Merge pull request #5 from PxTools/PXWEB2-27-install-and-setup-storybook

Pxweb2-27 install and setup storybook

apps/pxweb2/src/app/app.tsx

@@ -9,7 +9,10 @@ export function App() {
   return (
     <div>
       <NxWelcome title="pxweb2" />
-      <Pxweb2Ui />
+      <Pxweb2Ui 
+        title="Welcome to pxweb2-ui!"
+        variant="primary"
+      />
     </div>
   );
 }

libs/pxweb2-ui/.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', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: 'libs/pxweb2-ui/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/pxweb2-ui/project.json

@@ -31,6 +31,49 @@
       "options": {
         "reportsDirectory": "../../coverage/libs/pxweb2-ui"
       }
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "libs/pxweb2-ui/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/pxweb2-ui",
+        "configDir": "libs/pxweb2-ui/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "test-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "test-storybook -c libs/pxweb2-ui/.storybook --url=http://localhost:4400"
+      }
+    },
+    "static-storybook": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "pxweb2-ui:build-storybook",
+        "staticFilePath": "dist/storybook/pxweb2-ui"
+      },
+      "configurations": {
+        "ci": {
+          "buildTarget": "pxweb2-ui:build-storybook:ci"
+        }
+      }
     }
   }
 }

libs/pxweb2-ui/src/lib/pxweb2-ui.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Pxweb2Ui } from './pxweb2-ui';
+
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+const meta: Meta<typeof Pxweb2Ui> = {
+  component: Pxweb2Ui,
+  title: 'Pxweb2Ui',
+};
+export default meta;
+type Story = StoryObj<typeof Pxweb2Ui>;
+
+export const Primary = {
+  args: {
+    title: 'pxweb2-ui primary!',
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    title: 'pxweb2-ui secondary!',
+    variant: 'secondary',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/pxweb2-ui secondary!/gi)).toBeTruthy();
+  },
+};
+
+export const Heading: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/Welcome to Pxweb2Ui!/gi)).toBeTruthy();
+  },
+};

libs/pxweb2-ui/src/lib/pxweb2-ui.tsx

@@ -1,12 +1,20 @@
 import styles from './pxweb2-ui.module.scss';
 
 /* eslint-disable-next-line */
-export interface Pxweb2UiProps {}
+export interface Pxweb2UiProps {
+  title: string;
+  variant: 'primary' | 'secondary';
+}
 
 export function Pxweb2Ui(props: Pxweb2UiProps) {
+  const title = props.title || 'Welcome to pxweb2-ui!';
+
   return (
     <div className={styles['container']}>
-      <h1>Welcome to Pxweb2Ui! Hei alle sammen</h1>
+      <h1>{title}</h1>
+      {props.variant === 'primary' && (
+        <button className={styles['button']}>Primary</button>
+      )}
     </div>
   );
 }

libs/pxweb2-ui/tsconfig.json

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

libs/pxweb2-ui/tsconfig.lib.json

@@ -17,7 +17,11 @@
     "**/*.spec.js",
     "**/*.test.js",
     "**/*.spec.jsx",
-    "**/*.test.jsx"
+    "**/*.test.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
   ],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

libs/pxweb2-ui/tsconfig.storybook.json

@@ -0,0 +1,31 @@
+{
+  "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/**/*.stories.ts",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.stories.tsx",
+    "src/**/*.stories.mdx",
+    ".storybook/*.js",
+    ".storybook/*.ts"
+  ]
+}

nx.json

@@ -22,6 +22,15 @@
     "@nx/vite:test": {
       "cache": true,
       "inputs": ["default", "^production"]
+    },
+    "build-storybook": {
+      "cache": true,
+      "inputs": [
+        "default",
+        "^production",
+        "{projectRoot}/.storybook/**/*",
+        "{projectRoot}/tsconfig.storybook.json"
+      ]
     }
   },
   "namedInputs": {
@@ -34,7 +43,10 @@
       "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
       "!{projectRoot}/tsconfig.spec.json",
       "!{projectRoot}/.eslintrc.json",
-      "!{projectRoot}/eslint.config.js"
+      "!{projectRoot}/eslint.config.js",
+      "!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+      "!{projectRoot}/.storybook/**/*",
+      "!{projectRoot}/tsconfig.storybook.json"
     ],
     "sharedGlobals": []
   },
@@ -55,5 +67,12 @@
         "unitTestRunner": "vitest"
       }
     }
+  },
+  "tasksRunnerOptions": {
+    "default": {
+      "options": {
+        "cacheableOperations": ["build-storybook"]
+      }
+    }
   }
 }