chore(chromatic): Enabling Chromatic (#3503)

* chore(chromatic): Enabling Chromatic * chore(chromatic): clean --------- Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
box · Feb 20, 2024 · b6f3ff1 · b6f3ff1
1 parent 85ebf26
commit b6f3ff1
Show file tree

Hide file tree

Showing 17 changed files with 1,981 additions and 599 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -23,6 +23,7 @@ aliases:
     key: yarn-{{ arch }}-{{ checksum "yarn.lock" }}-{{ checksum ".circleci/config.yml" }}
 
 defaults: &defaults
+  resource_class: large
   working_directory: ~/buie
   docker:
     - image: cimg/node:18.18
@@ -59,7 +60,6 @@ jobs:
             command: yarn flow check
 
   build-unit-tests:
-    resource_class: large
     <<: *defaults
     steps:
       - checkout
@@ -83,7 +83,7 @@ jobs:
           command: yarn test --maxWorkers=3
 
   e2e-tests:
-    working_directory: ~/buie
+    <<: *defaults
     docker:
       - image: cypress/included:12.13.0
     steps:
@@ -95,6 +95,19 @@ jobs:
           name: E2E tests
           command: yarn test:e2e
 
+  chromatic-deploy:
+    <<: *defaults
+    steps:
+        - checkout
+        - restore-cache: *restore-yarn-cache
+        - run: *yarn
+        - save-cache: *save-yarn-cache
+        - run: *clean
+        - run: *i18n
+        - run:
+            name: Chromatic
+            command: yarn chromatic
+
 workflows:
   version: 2
   lint_test_build:
@@ -103,3 +116,4 @@ workflows:
       - flow
       - build-unit-tests
       - e2e-tests
+      - chromatic-deploy
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,10 @@
 .idea
 _site
 __diff_output__
+build-storybook.log
+chromatic.log
+chromatic-build-*.xml
+chromatic-diagnostics.json
 dist
 es
 i18n/*.js

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -2,7 +2,7 @@ import path from 'path';
 
 const language = process.env.LANGUAGE;
 
-const config: { webpackFinal: (config: any) => Promise<any>; stories: string[]; framework: { name: string }; addons: (string | { name: string; options: { sass: { implementation: any } } })[] } = {
+const config: { webpackFinal: (config: any) => Promise<any>; staticDirs: string[]; stories: string[]; framework: { name: string }; addons: (string | { name: string; options: { sass: { implementation: any } } })[] } = {
     stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
     addons: [
         '@storybook/addon-links',
@@ -21,6 +21,7 @@ const config: { webpackFinal: (config: any) => Promise<any>; stories: string[];
     framework: {
         name: '@storybook/react-webpack5',
     },
+    staticDirs: ['public'],
     webpackFinal: async (config: any) => {
         // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
         // You can change the configuration based on that.
@@ -33,6 +34,7 @@ const config: { webpackFinal: (config: any) => Promise<any>; stories: string[];
             ...config.resolve.alias,
             'box-ui-elements-locale-data': path.resolve(`i18n/${language}`),
             'box-locale-data': path.resolve(`node_modules/@box/cldr-data/locale-data/${language}`),
+            'msw/native': path.resolve('node_modules/msw/lib/native/index.mjs'),
         };
 
         return config;

diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -3,6 +3,10 @@
         padding: 16px;
     }
 
+    .be.bce {
+        height: 500px;
+    }
+
     .be.bcu {
         height: 400px;
     }

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -5,7 +5,8 @@ import features from '../examples/src/features';
 import '../src/styles/variables';
 import '../src/styles/base.scss';
 import { reactIntl } from "./reactIntl";
-import { ProjectAnnotations, Renderer } from "@storybook/types";
+
+import { initialize, mswDecorator } from 'msw-storybook-addon';
 
 // Constants
 global.FEATURE_FLAGS = global.FEATURE_FLAGS || features;
@@ -14,7 +15,9 @@ global.FOLDER_ID = global.FOLDER_ID || '69083462919';
 // NOTE: The token used is a readonly token accessing public data in a demo enterprise. DO NOT PUT A WRITE TOKEN
 global.TOKEN = global.TOKEN || 'P1n3ID8nYMxHRWvenDatQ9k6JKzWzYrz';
 
-const preview: ProjectAnnotations<Renderer> = {
+initialize();
+
+const preview: any = {
     globals: {
         locale: reactIntl.defaultLocale,
         locales: {
@@ -23,6 +26,7 @@ const preview: ProjectAnnotations<Renderer> = {
         },
     },
     decorators:[
+        mswDecorator,
         (Story) =>
             (
                 <IntlProvider locale='en'>
@@ -32,6 +36,7 @@ const preview: ProjectAnnotations<Renderer> = {
     ],
     parameters: {
         actions: { argTypesRegex: '^on[A-Z].*' },
+        chromatic: { disableSnapshot: true },
         controls: {
             matchers: {
                 color: /(background|color)$/i,