feat: TUP-700 @tacc/core-components - storybook

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**

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

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);

libs/core-components/.storybook/preview.ts

@@ -0,0 +1 @@
+import './preview.global.css';

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

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"
+  }
 }

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
+        }
+      }
     }
   }
 }

libs/core-components/src/lib/Button/Button.stories.module.css

@@ -0,0 +1,3 @@
+.button + .button {
+  margin-left: 1em;
+}

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'] + ' ',
+  },
+};

libs/core-components/tsconfig.json

@@ -17,6 +17,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
     }
   ],
   "extends": "../../tsconfig.base.json"

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"]
 }

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"
+  ]
+}

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

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"]
+      }
+    }
   }
 }