refactored into v8

Author: Rafael C

.eslintrc.json

@@ -1,13 +1,20 @@
 {
   "parser": "babel-eslint",
-  "extends": ["airbnb", "prettier"],
+  "extends": [
+    "airbnb",
+    "prettier",
+    "plugin:storybook/recommended"
+  ],
   "env": {
     "browser": true,
     "node": true,
     "jest": true,
     "es6": true
   },
-  "plugins": ["react", "jsx-a11y"],
+  "plugins": [
+    "react",
+    "jsx-a11y"
+  ],
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module",
@@ -35,4 +42,4 @@
     "jsx-a11y/click-events-have-key-events": 0,
     "import/no-extraneous-dependencies": 0
   }
-}
+}

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,53 @@
+name: Deploy Storybook to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./storybook-static
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,5 +1,25 @@
-node_modules
-npm-debug.log
+# Dependencies
+node_modules/
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# OS
 .DS_Store
-dist
-storybook-static
+
+# Build outputs
+dist/
+storybook-static/
+coverage/
+
+# TypeScript
+*.tsbuildinfo
+
+# Env files
+.env
+.env.*
+!.env.example
+*storybook.log

.storybook/main.js

@@ -1,13 +1,35 @@
-module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+// .storybook/main.js
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+    '@storybook/addon-onboarding',
     '@storybook/preset-scss',
   ],
-  framework: '@storybook/react',
-  core: {
-    builder: '@storybook/builder-webpack5',
+
+  framework: '@storybook/react-webpack5',
+
+  webpackFinal: async (config) => {
+    // Keep this minimal. Storybook + preset-scss already provide loaders.
+    config.resolve ||= {};
+    config.resolve.extensions = Array.from(
+      new Set([
+        ...(config.resolve.extensions || []),
+        '.ts',
+        '.tsx',
+        '.js',
+        '.jsx',
+        '.mjs',
+      ])
+    );
+
+    return config;
   },
 };
+
+export default config;

.storybook/preview.js

@@ -1,9 +1,43 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+// .storybook/preview.js
+
+/** @type { import('@storybook/react-webpack5').Preview } */
+
+// Default theme module for stories that support `cssModule` (e.g. AwesomeButton family)
+import themeEric from '../src/styles/themes/theme-eric';
+
+const resolvedTheme = themeEric?.default || themeEric;
+
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    layout: 'centered',
+
+    // Nice defaults for button components
+    actions: {
+      argTypesRegex: '^on[A-Z].*',
     },
   },
-}
+
+  decorators: [
+    (Story, context) => {
+      // Inject cssModule only when the story didn't set one explicitly.
+      // This keeps stories lean while still allowing overrides per story.
+      const args = context.args || {};
+
+      return Story({
+        args: {
+          ...args,
+          cssModule: args.cssModule ?? resolvedTheme,
+        },
+      });
+    },
+  ],
+};
+
+export default preview;