fix(docs): Auto generate root index.ts

Author: fhlavac

README.md

@@ -9,10 +9,10 @@ This repo contains a set of opinionated react component groups used to standardi
 - the component should bring a value value above and beyond existing PatternFly components
 
 ### To add a new component:
-1. create a folder in `src/` matching its name (for example `src/MyNewComponent`)
-2. to the new folder add a new `.tsx` file named after the component (for example `src/MyNewComponent/MyNewComponent.tsx`)
+1. create a folder in `src/` matching its name (for example `src/MyComponent`)
+2. to the new folder add a new `.tsx` file named after the component (for example `src/MyComponent/MyComponent.tsx`)
 3. to the same folder include also a `index.ts` which will export the component as a default and then all necessary interfaces
-4. don't forget to export your component using `export * from './ComponentName'` from the root `index` file located in `src/index.ts`
+4. if this file structure is not met, your component won't be exposed correctly
 
 #### Example component:
 ```
@@ -22,7 +22,7 @@ import { createUseStyles } from 'react-jss';
 
 // do not forget to export your component's interface
 // always place component's interface above the component itself in the code
-export interface MyNewComponentProps {
+export interface MyComponentProps {
   text: String;
 }
 
@@ -34,7 +34,7 @@ const useStyles = createUseStyles({
 })
 
 // do not use named export of your component, just a default one
-const MyNewComponent: React.FunctionComponent<MyNewComponentProps> = () => {
+const MyComponent: React.FunctionComponent<MyComponentProps> = () => {
   const classes = useStyles();
 
   return (
@@ -44,42 +44,38 @@ const MyNewComponent: React.FunctionComponent<MyNewComponentProps> = () => {
   );
 };
 
-export default MyNewComponent;
+export default MyComponent;
 ``` 
 
 #### Index file example:
 ```
-export { default } from './MyNewComponent';
-export * from './MyNewComponent';
+export { default } from './MyComponent';
+export * from './MyComponent';
 ``` 
 
 #### Component directory structure example:
 ```
 src
-|- MyNewComponent
-|  |- index.ts
-|  |- MyNewComponent.tsx
-|- ...
-|- ...
-|- ...
-|- index.ts       <<-- export * from './MyNewComponent';
+|- MyComponent
+   |- index.ts
+   |- MyComponent.tsx
 ``` 
 
 ### Component's API rules:
 - prop names comply with PatternFly components naming standards (`variant`, `onClick`, `position`, etc.)
 - the API is maximally simplified and all props are provided with a description
 - it is build on the top of existing PatternFly types without prop omitting
-- it is well documented using the PatternFly documentation (`/packages/module/patternfly-docs/content/extensions/component-groups/examples/MyNewComponent/MyNewComponent.md`) with examples of all possible use cases (`packages/module/patternfly-docs/content/extensions/component-groups/examples/MyNewComponent/MyNewComponent[...]Example.tsx`)
+- it is well documented using the PatternFly documentation (`/packages/module/patternfly-docs/content/extensions/component-groups/examples/MyComponent/MyComponent.md`) with examples of all possible use cases (`packages/module/patternfly-docs/content/extensions/component-groups/examples/MyComponent/MyComponent[...]Example.tsx`)
 - do not unnecessarily use external libraries in your component - rather, delegate the necessary logic to the component's user using the component's API
 
 #### Component API definition example:
 ```
 // when possible, extend available PatternFly types
-export interface MyNewComponentProps extends ButtonProps {
+export interface MyComponentProps extends ButtonProps {
     customLabel: Boolean
 };
 
-export const MyNewComponent: React.FunctionComponent<MyNewComponentProps> = ({ customLabel, ...props }) => ( ... );
+export const MyComponent: React.FunctionComponent<MyComponentProps> = ({ customLabel, ...props }) => ( ... );
 ```
 
 
@@ -88,28 +84,28 @@ export const MyNewComponent: React.FunctionComponent<MyNewComponentProps> = ({ c
 ---
 section: extensions
 subsection: Component groups
-id: MyNewComponent
-propComponents: ['MyNewComponent']
+id: MyComponent
+propComponents: ['MyComponent']
 ---
 
-import MyNewComponent from "@patternfly/react-component-groups/dist/dynamic/MyNewComponent";
+import MyComponent from "@patternfly/react-component-groups/dist/dynamic/MyComponent";
 
 ## Component usage
 
-MyNewComponent has been created to demo contributing to this repository.
+MyComponent has been created to demo contributing to this repository.
 
-### MyNewComponent component example label
+### MyComponent component example label
 
-```js file="./MyNewComponentExample.tsx"```
+```js file="./MyComponentExample.tsx"```
 
 ```
 
-#### Component usage file example: (`MyNewComponentExample.tsx`)
+#### Component usage file example: (`MyComponentExample.tsx`)
 ```
 import React from 'react';
 
-const MyNewComponentExample: React.FunctionComponent = () => (
-  <MyNewComponent customLabel="My label">
+const MyComponentExample: React.FunctionComponent = () => (
+  <MyComponent customLabel="My label">
 );
 
 export default BatteryLowExample;

package-lock.json

@@ -53,29 +53,6 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.21.4",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-config-prettier": "8.6.0",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
-    "prettier": "2.8.3",
-    "jest":"^29.2.2",
-    "babel-jest":"^29.2.2",
-    "@babel/core": "^7.19.6",
-    "@babel/preset-env": "^7.19.4",
-    "@babel/preset-react":"^7.18.6",
-    "@babel/preset-flow": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@testing-library/react":"^13.4.0",
-    "@testing-library/user-event": "14.4.3",
-    "@testing-library/jest-dom":"^5.14.1",
-    "@testing-library/dom": "^8.0.7",
-    "jest-environment-jsdom": "^29.5.0",
-    "jest-canvas-mock": "^2.4.0",
-    "ts-jest":"29.0.3",
-    "serve": "^14.1.2",
-    "rimraf": "^2.6.2",
-    "whatwg-fetch": "^3.6.2",
-    "babel-polyfill": "6.26.0",
-    "identity-obj-proxy": "^3.0.0",
     "fs-extra": "^9.1.0",
     "glob": "^7.2.3",
     "identity-obj-proxy": "^3.0.0",

package.json

@@ -0,0 +1,44 @@
+const fse = require('fs-extra');
+const glob = require('glob');
+const path = require('path');
+
+const root = process.cwd();
+
+const ENV_AGNOSTIC_ROOT = `${root}/src`
+
+const sourceFiles = glob.sync(path.resolve(__dirname, './src/*/index.ts'))
+
+async function generateIndex(files) {
+  // ensure the dynamic root exists
+  fse.ensureDirSync(path.resolve(ENV_AGNOSTIC_ROOT));
+
+  const destFile = `${ENV_AGNOSTIC_ROOT}/index.ts`;
+
+  const stream = fse.createWriteStream(destFile);
+  stream.once('open', () => {
+    stream.write('// this file is autogenerated by generate-index.js, modifying it manually will have no effect\n');
+
+    files.forEach(file => {
+      const name = file.replace('/index.ts', '').split('/').pop();
+      stream.write(`\nexport { default as ${name} } from './${name}';\n`);
+      stream.write(`export * from './${name}';\n`);
+    });
+    stream.end();
+  });
+
+  return Promise.resolve();
+}
+
+async function run(files) {
+  try {
+    await generateIndex(files);
+
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    process.exit(1);
+  }
+}
+  
+run(sourceFiles);
+  

packages/module/generate-index.js

@@ -5,11 +5,12 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "scripts": {
-    "build": "npm run build:js && npm run build:esm && npm run build:fed:packages",
+    "build": "npm run build:index && npm run build:js && npm run build:esm && npm run build:fed:packages",
     "build:watch": "npm run build:js && npm run build:esm -- --watch && npm run build:fed:packages -- --watch",
     "build:esm": "tsc --build --verbose ./tsconfig.json",
     "build:fed:packages": "node generate-fed-package-json.js",
     "build:js": "tsc -p tsconfig.cjs.json",
+    "build:index": "node generate-index.js",
     "clean": "rimraf dist",
     "docs:develop": "pf-docs-framework start",
     "docs:build": "pf-docs-framework build all --output public",

packages/module/package.json

@@ -1,7 +1,25 @@
+// this file is autogenerated by generate-index.js, modifying it manually will have no effect
+
+export { default as Battery } from './Battery';
 export * from './Battery';
+
+export { default as DetailsPage } from './DetailsPage';
 export * from './DetailsPage';
+
+export { default as DetailsPageHeader } from './DetailsPageHeader';
 export * from './DetailsPageHeader';
+
+export { default as ErrorBoundary } from './ErrorBoundary';
 export * from './ErrorBoundary';
+
+export { default as ErrorStack } from './ErrorStack';
+export * from './ErrorStack';
+
+export { default as ErrorState } from './ErrorState';
 export * from './ErrorState';
+
+export { default as HorizontalNav } from './HorizontalNav';
 export * from './HorizontalNav';
+
+export { default as NotAuthorized } from './NotAuthorized';
 export * from './NotAuthorized';