Merge pull request #10 from zendesk/next

initial implementation of operation tracking

Author: bbrzoska

.config/beemo/eslint.ts

@@ -3,8 +3,11 @@ import { ESLintConfig } from '@beemo/driver-eslint'
 const config: ESLintConfig = {
   rules: {
     '@typescript-eslint/member-ordering': 'off',
+    '@typescript-eslint/lines-between-class-members': 'off',
+    'import/export': 'off',
     // just in case we want to support older browsers
     'unicorn/prefer-at': 'off',
+    'import/no-deprecated': 'off',
     'compat/compat': 'off',
   },
 }

.config/beemo/typescript.ts

@@ -3,7 +3,8 @@ import type TypeScript from '@niieani/scaffold/src/configs/typescript'
 export default {
   compilerOptions: {
     jsx: 'react',
-    target: 'es2015',
+    target: 'es2023' as 'es2022',
+    verbatimModuleSyntax: true,
   },
   'ts-node': {
     compilerOptions: {

.github/workflows/ci-cd.yml

@@ -17,10 +17,10 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [16, 18]
+        node: [22]
     steps:
-      - uses: zendesk/checkout@v3
-      - uses: zendesk/setup-node@v3
+      - uses: zendesk/checkout@v4
+      - uses: zendesk/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
           cache: 'yarn'
@@ -36,10 +36,10 @@ jobs:
     runs-on: ubuntu-latest
     if: github.actor != 'github-actions[bot]' && github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/main' || github.ref == 'refs/heads/next')
     steps:
-      - uses: zendesk/checkout@v3
-      - uses: zendesk/setup-node@v3
+      - uses: zendesk/checkout@v4
+      - uses: zendesk/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           scope: zendesk
           always-auth: 'true'
           cache: 'yarn'

.github/workflows/publish-storybook.yml

@@ -5,20 +5,20 @@ on:
     branches:
       - main
       - next
-  
+
   workflow_dispatch:
 
   # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
 permissions:
   contents: read
-  pages: write 
-  id-token: write   
+  pages: write
+  id-token: write
 
 jobs:
   build-storybook:
@@ -29,7 +29,7 @@ jobs:
       - uses: zendesk/checkout@v4
       - uses: zendesk/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           scope: zendesk
           always-auth: 'true'
           cache: 'yarn'
@@ -41,17 +41,16 @@ jobs:
         uses: actions/upload-pages-artifact@v3
         with:
           path: ./storybook-static
-    
+
   deploy:
     needs: build-storybook
     runs-on: ubuntu-latest
 
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
-    
+
     steps:
       - name: Deploy to Github Pages
         id: deployment
         uses: actions/deploy-pages@v4
-      

.gitignore

@@ -50,3 +50,5 @@ node_modules/
 
 .DS_Store
 *.local
+
+/storybook-static

.storybook/main.ts

@@ -1,39 +1,52 @@
-import type { StorybookConfig } from '@storybook/react-vite'
+import type { StorybookConfig } from '@storybook/react-webpack5'
 import remarkGfm from 'remark-gfm'
+// import { mergeConfig } from 'vite'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-interactions',
-    '@storybook/addon-actions',
-    '@storybook/addon-viewport',
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        mdxPluginOptions: {
-          mdxCompileOptions: {
-            remarkPlugins: [remarkGfm],
-          },
-        },
-      },
-    },
-    '@storybook/addon-controls',
-    '@storybook/addon-backgrounds',
-    '@storybook/addon-toolbars',
-    '@storybook/addon-measure',
-    '@storybook/addon-outline',
+    '@storybook/addon-essentials',
+    '@storybook/addon-webpack5-compiler-swc',
   ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
+  framework: '@storybook/react-webpack5',
+  // framework: {
+  //   // name: '@storybook/react-vite',
+  //   name: '@storybook/react-webpack5',
+  //   options: {},
+  // },
   core: {},
   // other storybook options...,
-  async viteFinal(config, options) {
-    // modify and return config
+  webpackFinal(config, options) {
+    const assetRule = config.module?.rules?.find(
+      (m) =>
+        typeof m === 'object' &&
+        m.test instanceof RegExp &&
+        m.test.test('.svg'),
+    )
+    if (!assetRule || typeof assetRule !== 'object') {
+      throw new Error('SVG rule not found')
+    }
+    assetRule.test =
+      /\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
+
+    config.module?.rules?.unshift({
+      test: /\.svg$/,
+      // issuer: /\.[jt]sx?$/,
+      use: [
+        { loader: '@svgr/webpack', options: { exportType: 'named' } },
+        'url-loader',
+      ],
+      // type: 'asset/resource',
+      // generator: { filename: 'static/media/[path][name][ext]' }
+    })
     return config
   },
+  typescript: {
+    check: false,
+    reactDocgen: 'react-docgen',
+    reactDocgenTypescriptOptions: {}, // Available only when reactDocgen is set to 'react-docgen-typescript'
+    // skipCompiler: true,
+  },
   docs: {
     autodocs: true,
   },

.storybook/preview.ts

@@ -1,9 +1,25 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+import type { Preview } from '@storybook/react'
+// import type { IndexEntry } from '@storybook/types';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    layout: 'fullscreen',
+    options: {
+      // a and b are of type IndexEntry, but adding the type annotations generates a syntax warning in the console for some reason
+      storySort: (a, b) => {
+        if (a.title.includes('Visualizer')) return -1
+        if (b.title.includes('Visualizer')) return 1
+        return 0
+      },
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
     },
   },
-}
+}
+
+export default preview

.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs

@@ -1,9 +1,11 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 nodeLinker: node-modules
 
 plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: '@yarnpkg/plugin-interactive-tools'
-  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
-    spec: '@yarnpkg/plugin-typescript'
   - path: .yarn/plugins/@yarnpkg/plugin-postinstall-dev.cjs
-    spec: 'https://raw.githubusercontent.com/sachinraja/yarn-plugin-postinstall-dev/main/bundles/%40yarnpkg/plugin-postinstall-dev.js'
+    spec: "https://raw.githubusercontent.com/sachinraja/yarn-plugin-postinstall-dev/main/bundles/%40yarnpkg/plugin-postinstall-dev.js"
+
+yarnPath: .yarn/releases/yarn-4.8.1.cjs