feat: Add Chromatic publishing to superset-frontend storybook

.github/workflows/chromatic.yml

@@ -0,0 +1,56 @@
+# .github/workflows/chromatic.yml
+# seee https://www.chromatic.com/docs/github-actions
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+# Only run if changes were made in superset-frontend folder of repo
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - "superset-frontend/**"
+  pull_request_target:
+    types: [opened, edited, synchronize, reopen]
+    paths:
+      - "superset-frontend/**"
+
+env:
+  CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        run: npm ci
+        working-directory: superset-frontend
+      # 👇 Checks if the branch is not master and runs Chromatic
+      - name: Publish to Chromatic
+        if: github.ref != 'refs/heads/master'
+        uses: chromaui/action@v1
+        # Required options for the Chromatic GitHub Action
+        with:
+          # 👇 Location of package.json from root of mono-repo
+          workingDir: superset-frontend
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ env.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: true # 👈 Option to prevent the workflow from failing
+      # 👇 Checks if the branch is master and accepts all changes in Chromatic
+      - name: Publish to Chromatic and auto accept changes
+        if: github.ref == 'refs/heads/master'
+        uses: chromaui/action@v1
+        # Required options for the Chromatic GitHub Action
+        with:
+          # 👇 Location of package.json from root of mono-repo
+          workingDir: superset-frontend
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ env.CHROMATIC_PROJECT_TOKEN }}
+          autoAcceptChanges: true # 👈 Option to accept all changes when merging to master
+          exitZeroOnChanges: true # 👈 Option to prevent the workflow from failing

superset-frontend/.storybook/main.js

@@ -24,7 +24,7 @@ module.exports = {
     builder: 'webpack5',
   },
   stories: [
-    '../src/@(components|common|filters|explore)/**/*.stories.@(t|j)sx',
+    '../src/@(components|common|filters|explore)/**/*.stories.@(tsx|jsx|mdx)',
   ],
   addons: [
     '@storybook/addon-essentials',
@@ -47,6 +47,6 @@ module.exports = {
     plugins: [...config.plugins, ...customConfig.plugins],
   }),
   typescript: {
-    reactDocgen: 'none',
+    reactDocgen: 'react-docgen-typescript',
   },
 };

superset-frontend/.storybook/preview.jsx

@@ -63,7 +63,14 @@ addParameters({
   },
   options: {
     storySort: {
-      method: 'alphabetical',
+      order: [
+        'Superset Frontend',
+        ['Controls', 'Display', 'Feedback', 'Input', '*'],
+        ['Overview', 'Examples', '*'],
+        'Design System',
+        ['Foundations', 'Components', 'Patterns', '*'],
+        '*',
+      ],
     },
   },
 });