Core package storybook setup (#1003)

* [/][m]: add storybook to core package

* [/][s]: replace nx with nrwl packages for storybook

* [core][xs]: mv tsconfig.storybook.json to .storybook/tsconfig.json

* [/][s]: configure storybook with tailwind

* [core/tailwind.config.js][xs]: add basic Flowershow tailwind config

* [core][xs]: add example story

* [core][s]: darkmode storybook addon

packages/core/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@nrwl/react/plugins/storybook',
+    'storybook-tailwind-dark-mode'
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+};
+
+export default config;
+
+// To customize your webpack configuration you can use the webpackFinal field.
+// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
+// and https://nx.dev/packages/storybook/documents/custom-builder-configs

packages/core/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import './tailwind-imports.css';
+
+const preview = {
+    globalTypes: {
+        darkMode: {
+            defaultValue: false, // Enable dark mode by default on all stories
+        },
+        className: {
+            defaultValue: 'dark', // Set your custom dark mode class name
+        },
+    },
+};
+
+export default preview;

packages/core/.storybook/tailwind-imports.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/core/.storybook/tsconfig.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"
+  ]
+}

packages/core/postcss.config.js

@@ -0,0 +1,11 @@
+// libs/shared/ui/postcss.config.js
+const { join } = require('path');
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+};

packages/core/project.json

@@ -34,6 +34,37 @@
         "jestConfig": "packages/core/jest.config.ts",
         "passWithNoTests": true
       }
+    },
+    "storybook": {
+      "executor": "@nrwl/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "packages/core/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nrwl/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/core",
+        "configDir": "packages/core/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "test-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "test-storybook -c packages/core/.storybook --url=http://localhost:4400"
+      }
     }
   }
 }

packages/core/src/ui/Card/Card.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Card } from './Card';
+
+const meta: Meta<typeof Card> = {
+    component: Card,
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+
+const blog = {
+    urlPath: "#",
+    title: "Card title goes here",
+    date: "2021-01-01",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam quis accumsan maximus, quam libero porttitor nisl, vita",
+}
+
+export const Primary: Story = {
+    render: () => (
+        <Card className="md:col-span-3">
+            <Card.Title href={`${blog.urlPath}`}>
+                {blog.title}
+            </Card.Title>
+            <Card.Eyebrow
+                as="time"
+                dateTime={blog.date}
+                className="md:hidden"
+                decorate
+            >
+                {blog.date}
+            </Card.Eyebrow>
+            {blog.description && (
+                <Card.Description>
+                    {blog.description}
+                </Card.Description>
+            )}
+            <Card.Cta>Read article</Card.Cta>
+        </Card>
+    ),
+};

packages/core/tailwind.config.js

@@ -0,0 +1,44 @@
+const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
+const { join } = require('path');
+// const defaultTheme = require("tailwindcss/defaultTheme");
+const colors = require("tailwindcss/colors");
+
+module.exports = {
+  content: [
+    join(__dirname, './src/**/*.{js,ts,jsx,tsx}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  darkMode: "class",
+  theme: {
+    extend: {
+      // support wider width for large screens >1440px eg. in hero
+      maxWidth: {
+        "8xl": "88rem",
+      },
+      // fontFamily: {
+      //   sans: ["ui-sans-serif", ...defaultTheme.fontFamily.sans],
+      //   serif: ["ui-serif", ...defaultTheme.fontFamily.serif],
+      //   mono: ["ui-monospace", ...defaultTheme.fontFamily.mono],
+      //   headings: ["-apple-system", ...defaultTheme.fontFamily.sans],
+      // },
+      colors: {
+        background: {
+          DEFAULT: colors.white,
+          dark: colors.slate[900],
+        },
+        primary: {
+          DEFAULT: colors.gray[700],
+          dark: colors.gray[300],
+        },
+        secondary: {
+          DEFAULT: colors.sky[400],
+          dark: colors.sky[400],
+        },
+      },
+    },
+  },
+  /* eslint global-require: off */
+  // plugins: [
+  //   require("@tailwindcss/typography")
+  // ],
+};

packages/core/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "jsx": "react-jsx",
     "module": "es2020",
     "moduleResolution": "node",
@@ -22,6 +23,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
     }
   ]
 }

packages/core/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": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
 }