feat: TUP-700 @tacc/core-components - storybook (#462)

* test(@tacc/core-components): TUP-700 (WIP) * fix: tup-700 do not commit dist * docs(README): tup-700 add `build core-components` * feat: tup-700 peer dependencies * feat: tup-700 build (no tested on a client yet) * feat: tup-700 1st attempt to split files/css build * fix: tup-700 add main file to dist * build: tup-700 do not build tests * fix: tup-700 add types & fix resulting errors 1. import & use `dts` - Fixes build error: > error TS2307: Cannot find module './….module.css' or its corresponding type declarations. > … import styles from './….module.css'; 2. `"composite": true` - Fixes Typescript lint error: > Referenced project '/…/tup-ui/libs/core-components/tsconfig.lib.json' must have setting "composite": true. 3. `"declaration": true,` - Seemingly caused by `"composite": true`. - Fixes Vite build error: > \> nx run core-components:build:production > error TS6304: Composite projects may not disable declaration emit. * fix: tup-700 tag types in package.json * style: tup-700 move rollup opts input glob inline * style: npx nx format:write * style: tup-700 peerDependencies "So the consuming application is aware that it must have React installed to use this package." — https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma#dependencies * feat: tup-700 add CSS as sideEffects "To prevent the CSS files from being accidentally removed by the consumer's tree-shaking efforts…" —https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma#side-effects * feat: tup-700 ensure build before publish * fix: tup-700 do 2d5ab1c, 6336f2c, 233f165 correct Move the changes from thsoe commits to be in core-components package.json, not root package.json. - style: tup-700 peerDependencies "So the consuming application is aware that it must have React installed to use this package." — https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma#dependencies - feat: tup-700 add CSS as sideEffects "To prevent the CSS files from being accidentally removed by the consumer's tree-shaking efforts…" — https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma#side-effects - feat: tup-700 ensure build before publish * chore: tup-700 resolve vite.config.ts comment code Resolve all commented code in `vite.config.ts`. - `outDir` DELETED cuz `rollupOptions` > `output` exists - `reportCompressedSize` RESTORED cuz why not & it was already there - `commonjsOptions` & `transformMixedEsModules` DELETED cuz… - no `require` i.e. common js modules - `lib`'s `name` and `fileName` DELETED cuz… - `rollupOptions` > `output` > `assetFileNames` exists - `rollupOptions` > `output` > `entryFileNames` exists * fix: tup-700 scripts inaccurate * docs: tup-700 README * feat: tup-700 core-components deps via workspace * fix: tup-700 core-components deps via workspace * npx nx format:write * fix: core-components/package-lock.json should not exist Only 1 root package-lock.json in an Nx project such as tup-ui. Having this may have been cause of errors when starting CMS. * chore: rename Navbar → NavbarWrapper * chore: rename FieldWrapperFormik → FormikFieldWrapper * npx nx format:write * chore: move withBuilder to core-components * feat: move core-wrappers to core-components Because the distinction between them is not accurate. Both have components that import other components. * lint: rename some index.js to index.ts * lint: import via rel. path not lib name * deps: add core-wrappers deps to peerDeps * docs: do not reference lib names This causes more work when renaming a library. * docs: do reference (other) lib names These references are outside of this lib, so yeah, reference lib name. * docs(README): remove duplicate step * feat: TUP-700 @tacc/core-components - Storybook (#435) * feat: tup-700 storybook STEPS 1. `npm add -D @nx/storybook@17.2.8` 2. `npx nx@17.2.8 g @nx/storybook:configuration core-components --uiFramework="@storybook/react-vite" --bundler="vite"` 3. "Do you want to set up Storybook interaction tests? (Y/n) › false" CONCERNS 1. Generator installed `@swc-node/register` and `@swc/core`. 2. `@vitejs/plugin-react-swc` is already isntalled. 3. [Storybook 7 does not work with @vitejs/plugin-react-swc](storybookjs/storybook#22381) 4. I worry I cannot move to Storybook 8 via NX, because it requires NX v18. * deps: tup-700 uninstall `@swc-…` - Vite already uses `@vitejs/plugin-react-swc` (notice the SWC). - Storybook seems to work fine without these. - I read that in v8, Storybook will stop isntalling backup compilers. * feat: tup-700 Button stories, working Controls * fix: tup-700 ignore stories during build * fix: nx serve/build/test core-components * feat: tup-700 button story * style: npx nx format:write * docs(tup-ui): tup-700 README "Contributing" * fix: tup-700 npm ci core-components workspace ★ Running npm ci at this point: - DOES reinstall deps - does NOT create libs/core-components/node_modules - does NOT create libs/core-components/package-lock.json * npx nx format:write * docs: do not reference lib names This causes more work when renaming a library. * docs: do reference (other) lib names These references are outside of this lib, so yeah, reference lib name. * docs(README): add `make start` step * feat: make storybook optional * feat: make storybook optional (not peer) * docs(README): fix serve/start command * fix: make storybook optional (not peer) * chore: (redundantly) include optional dependences Optional dependencies are installed by default. We can not disable "install optional by default", cuz NX will fail: nrwl/nx#20617 We can not configure NPM to omit optional deps only per workspace, cuz: npm/cli#6099 * fix: limit install overhead for core-components For core-components, tell dev to only install for core-components. * fix: add missing dependencies for core-components All this change was required to run `npx nx serve core-components`. * fix: add missing `build-storybook` npm command * fix: a TypeScript lint error Error occurred as red squiggly udnerline in code editor when importing a component from within a component. * fix: do not pass size to `<Button type="link">` * feat: load global css via typescript not html
TACC · May 16, 2024 · a641527 · a641527
1 parent 9e6af47
commit a641527
Show file tree

Hide file tree

Showing 16 changed files with 5,810 additions and 979 deletions.
diff --git a/README.md b/README.md
@@ -24,6 +24,7 @@ To bring containers down after development, run `npx nx down tup-cms`.
 
 Other useful commands:
 
+- `npx nx serve core-components` to run a demo of the library for the core components.
 - `npx nx build core-components` to create a distributable library for the core components.
 
 ## Contributing
@@ -32,6 +33,8 @@ To contribute, first read [How to Contirbute](./docs/contributing.md).
 
 ---
 
+<!-- NX -->
+
 <p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="450"></p>
 
 🔎 **Smart, Fast and Extensible Build System**

diff --git a/libs/core-components/.storybook/main.ts b/libs/core-components/.storybook/main.ts
@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: 'libs/core-components/vite.config.ts',
+      },
+    },
+  },
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs
diff --git a/libs/core-components/.storybook/preview.global.css b/libs/core-components/.storybook/preview.global.css
@@ -0,0 +1,4 @@
+/* https://tacc-main.atlassian.net/wiki/x/hRlv */
+@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') layer(foundation);
+@import url('@tacc/core-styles/dist/core-styles.base.css') layer(base);
+@import url('@tacc/core-styles/dist/core-styles.portal.css') layer(base);
diff --git a/libs/core-components/.storybook/preview.ts b/libs/core-components/.storybook/preview.ts
@@ -0,0 +1 @@
+import './preview.global.css';
diff --git a/libs/core-components/README.md b/libs/core-components/README.md
@@ -45,7 +45,13 @@ Set up a new local CMS instance.
 2. Install Dependencies:
 
    ```sh
-   npm install
+   npm install --include=optional --workspace=libs/core-components
+   ```
+
+3. Start demo:
+
+   ```sh
+   npx nx serve core-components
    ```
 
 ## Developing
@@ -57,6 +63,15 @@ The components are [React components](https://react.dev/learn) that should be [w
 | `npm test`      | execute unit tests | [Vitest](https://vitest.dev/) |
 | `npm run build` | build components   | [Vite](https://vitejs.dev/)   |
 
+## Contributing
+
+### to the Demo
+
+| task               | reference                                         |
+| ------------------ | ------------------------------------------------- |
+| add/edit component | https://storybook.js.org/docs/writing-stories     |
+| change interaction | https://storybook.js.org/docs/essentials/controls |
+
 ## Testing
 
 ### Unit Tests

diff --git a/libs/core-components/package.json b/libs/core-components/package.json
@@ -10,17 +10,19 @@
     "dist"
   ],
   "scripts": {
-    "// start": "nx serve",
+    "start": "nx serve",
     "build": "nx build",
+    "build:storbook": "nx build-storybook",
     "test": "nx test",
     "prepublishOnly": "npm run build"
   },
   "homepage": "https://github.com/TACC/tup-ui/libs/core-components",
-  "repository": "git@github.com:TACC/tup-ui.git",
   "peerDependencies": {
-    "@tacc/core-styles": "^2.23.1",
+    "@nx/vite": "^17.2.8",
+    "@tacc/core-styles": "^2.25.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
     "formik": "^2.2.9",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -29,9 +31,20 @@
     "react-step-wizard": "^5.3.11",
     "react-table": "^7.8.0",
     "reactstrap": "^9.1.5",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "vite-plugin-dts": "^2.3.0",
+    "vite-tsconfig-paths": "^4.2.0"
   },
   "sideEffects": [
     "libs/core-componets/**/*.css"
-  ]
+  ],
+  "optionalDependencies": {
+    "@nx/storybook": "^17.2.8",
+    "@storybook/addon-essentials": "^7.6.19",
+    "@storybook/core-server": "^7.6.19",
+    "@storybook/react-vite": "^7.6.19"
+  },
+  "devDependencies": {
+    "vite-plugin-lib-inject-css": "^2.1.1"
+  }
 }
diff --git a/libs/core-components/project.json b/libs/core-components/project.json
@@ -24,6 +24,43 @@
         "passWithNoTests": true,
         "reportsDirectory": "../../coverage/libs/core-components"
       }
+    },
+    "serve": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "libs/core-components/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "libs/core-components/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/core-components",
+        "configDir": "libs/core-components/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
     }
   }
 }
diff --git a/libs/core-components/src/lib/Button/Button.stories.module.css b/libs/core-components/src/lib/Button/Button.stories.module.css
@@ -0,0 +1,3 @@
+.button + .button {
+  margin-left: 1em;
+}
diff --git a/libs/core-components/src/lib/Button/Button.stories.tsx b/libs/core-components/src/lib/Button/Button.stories.tsx
@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Button, { SIZE_MAP } from './Button';
+
+import styles from './Button.stories.module.css';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {
+    size: {
+      options: Object.keys(SIZE_MAP),
+      control: { type: 'inline-radio' },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Types: Story = {
+  render: (args) => {
+    const { size, ...argsSansSize } = args;
+
+    return (
+      <>
+        <Button type="primary" {...args}>
+          Primary
+        </Button>
+        <Button type="secondary" {...args}>
+          Secondary
+        </Button>
+        <Button type="tertiary" {...args}>
+          Tertiary
+        </Button>
+        <Button type="link" {...argsSansSize}>
+          as Link
+        </Button>
+      </>
+    );
+  },
+  args: {
+    className: styles['button'] + ' ',
+  },
+};
diff --git a/libs/core-components/tsconfig.json b/libs/core-components/tsconfig.json
@@ -17,6 +17,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
     }
   ],
   "extends": "../../tsconfig.base.json"

diff --git a/libs/core-components/tsconfig.lib.json b/libs/core-components/tsconfig.lib.json
@@ -16,7 +16,11 @@
     "**/*.spec.js",
     "**/*.test.js",
     "**/*.spec.jsx",
-    "**/*.test.jsx"
+    "**/*.test.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
   ],
   "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
 }
diff --git a/libs/core-components/tsconfig.storybook.json b/libs/core-components/tsconfig.storybook.json
@@ -0,0 +1,33 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": ""
+  },
+  "files": [
+    "../../node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.js"
+  ],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.stories.ts",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.stories.tsx",
+    "src/**/*.stories.mdx",
+    ".storybook/*.js",
+    ".storybook/*.ts"
+  ]
+}
diff --git a/libs/core-components/vite.config.ts b/libs/core-components/vite.config.ts
@@ -32,7 +32,9 @@ export default defineConfig({
       input: Object.fromEntries(
         // https://rollupjs.org/configuration-options/#input
         glob
-          .sync(resolve(__dirname, 'src/**/!(*.test).{ts,tsx,js,jsx}'))
+          .sync(resolve(__dirname, 'src/**/!(*.test).{ts,tsx,js,jsx}'), {
+            ignore: resolve(__dirname, 'src/**/*.stories.tsx'),
+          })
           .map((file) => [
             // This removes `...src/` as well as the file extension from each
             // file, so e.g. ...src/nested/foo.js becomes nested/foo

diff --git a/nx.json b/nx.json
@@ -35,6 +35,15 @@
     "@nx/vite:test": {
       "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
       "cache": true
+    },
+    "build-storybook": {
+      "cache": true,
+      "inputs": [
+        "default",
+        "^production",
+        "{projectRoot}/.storybook/**/*",
+        "{projectRoot}/tsconfig.storybook.json"
+      ]
     }
   },
   "namedInputs": {
@@ -45,7 +54,17 @@
       "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
       "!{projectRoot}/tsconfig.spec.json",
       "!{projectRoot}/jest.config.[jt]s",
-      "!{projectRoot}/.eslintrc.json"
+      "!{projectRoot}/.eslintrc.json",
+      "!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+      "!{projectRoot}/.storybook/**/*",
+      "!{projectRoot}/tsconfig.storybook.json"
     ]
+  },
+  "tasksRunnerOptions": {
+    "default": {
+      "options": {
+        "cacheableOperations": ["build-storybook"]
+      }
+    }
   }
 }