Release/storybook

.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react/jsx-runtime',
     'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
   ],
   ignorePatterns: ['./leather-styles'],
   plugins: ['react', 'react-hooks', '@typescript-eslint', 'deprecation'],
@@ -112,7 +113,7 @@ module.exports = {
               {
                 name: 'react-redux',
                 importNames: ['useSelector'],
-                message: 'Selectors must be expored from the store via a hook',
+                message: 'Selectors must be exported from the store via a hook',
               },
               {
                 name: '@radix-ui/themes',

.github/workflows/build-extension.yml

@@ -1,11 +1,12 @@
-name: PR Extensions builds
+name: PR extension build
+
 on: [pull_request, workflow_dispatch]
 
 jobs:
   pre-run:
     runs-on: ubuntu-latest
     steps:
-      - name: Cancel Previous Runs
+      - name: Cancel previous runs
         uses: styfle/cancel-workflow-action@main
         with:
           access_token: ${{ github.token }}
@@ -54,7 +55,7 @@ jobs:
           COMMIT_SHA: ${{ env.SHORT_SHA }}
 
       - uses: actions/upload-artifact@v3
-        name: Upload ${{ matrix.target }} Extension Zip
+        name: Upload ${{ matrix.target }} extension zip
         with:
           name: leather-${{ matrix.target }}-${{ env.SHORT_SHA }}
           path: dist

.github/workflows/chromatic.yml

@@ -0,0 +1,18 @@
+name: Chromatic
+
+on: [pull_request, workflow_dispatch]
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - run: yarn
+
+      - uses: chromaui/action@latest
+        with:
+          autoAcceptChanges: 'main'
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/development-extension.yml

@@ -1,4 +1,5 @@
-name: Development Extension
+name: Development extension
+
 on:
   push:
     branches:

.github/workflows/notify-release.yml

@@ -1,6 +1,6 @@
 # Sends a notification to Discord whenever a new version of Leather is available in FireFox or Chrome stores
+name: Notify on release
 
-name: Notify on Release
 on:
   schedule:
     # Run every hour

.github/workflows/playwright.yml

@@ -1,4 +1,4 @@
-name: Integration Tests
+name: Integration tests
 
 env:
   CI: true

.github/workflows/publish-extensions.yml

@@ -1,4 +1,5 @@
-name: Publish Extensions
+name: Publish extensions
+
 on:
   push:
     tags-ignore:

.ls-lint.yml

@@ -7,3 +7,4 @@ ignore:
   - .git
   - dist
   - node_modules
+  - storybook-static

.storybook/leather-theme.ts

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'dark',
+  brandTitle: 'Leather Storybook',
+  brandUrl: 'https://leather.io',
+  brandImage: 'assets/images/leather.png',
+  brandTarget: '_self',
+});

.storybook/main.ts

@@ -0,0 +1,70 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+const config: StorybookConfig = {
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            use: [
+              'style-loader',
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    plugins: ['postcss-preset-env', '@pandacss/dev/postcss'],
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+  docs: {
+    autodocs: 'tag',
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  staticDirs: ['../public'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
+  swc: () => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
+  typescript: {
+    check: true,
+    reactDocgen: 'react-docgen-typescript',
+  },
+  webpackFinal: config => {
+    config.resolve ??= {};
+    config.resolve.plugins ??= [];
+    config.resolve.plugins.push(
+      new TsconfigPathsPlugin({
+        extensions: config.resolve.extensions,
+      })
+    );
+    return config;
+  },
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/manager-api';
+
+import leatherTheme from './leather-theme';
+
+addons.setConfig({
+  theme: leatherTheme,
+});

.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<link rel="stylesheet" href="/assets/base.css" />
+<link rel="preload" href="/assets/fonts/diatype/diatype-medium.woff2" />
+<link rel="preload" href="/assets/fonts/diatype/diatype-regular.woff2" />
+<link rel="preload" href="/assets/fonts/marche/marche-super-pro.woff2" />

.storybook/preview.ts

@@ -0,0 +1,17 @@
+import type { Preview } from '@storybook/react';
+
+import '../src/app/index.css';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;