ci(chromatic): automate with github actions (#259)

* ci(chromatic): automate with github actions

* ci(chromatic): limit viewport size to not reach the pixels limit

* docs(storybook): have predictable quotes generation per story

* docs(storybook): make sure we reset the generated id for each story

* chore(type): adapte tsconfig of .storybook/

.github/workflows/chromatic.yml

@@ -0,0 +1,34 @@
+name: Chromatic
+
+on: push
+
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16.14.2
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v2
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 6
+          run_install: |
+            - args: [--frozen-lockfile]
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.gitignore

@@ -27,6 +27,7 @@ cypress/screenshots/
 # storybook
 .storybook.out
 .cache/
+build-storybook.log
 
 # logs
 yarn-error.log

.storybook/preview.tsx

@@ -2,12 +2,18 @@ import '@atlaskit/css-reset';
 
 import React from 'react';
 import { withPerformance } from 'storybook-addon-performance';
+import { resetData } from '../stories/src/data';
 import GlobalStyles from './custom-decorators/global-styles';
 import welcomeMessage from './welcome-message';
 
 welcomeMessage();
 
 export const decorators = [
+  (Story: React.ElementType, { id }: { id: string }) => {
+    resetData(id);
+
+    return <Story key={id} />;
+  },
   (Story: React.ElementType): React.ReactElement => (
     <GlobalStyles>
       <Story />

.storybook/tsconfig.json

@@ -1,4 +1,10 @@
 {
   "extends": "../tsconfig.json",
-  "include": ["**/*"]
+  "include": ["**/*"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@react-forked/dnd": ["../src/index.ts"]
+    }
+  },
 }

.storybook/typings.d.ts

@@ -1,3 +1,8 @@
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
 declare module '*.svg' {
   const src: string;
   export default src;

cypress/integration/reorder.spec.ts

@@ -9,8 +9,8 @@ describe('reorder', () => {
 
   it('should reorder within a list', () => {
     // order: 1, 2
-    cy.get(getHandleSelector()).eq(0).as('first').should('contain', 'id:1');
-    cy.get(getHandleSelector()).eq(1).should('contain', 'id:2');
+    cy.get(getHandleSelector()).eq(0).as('first').should('contain', 'id:G1');
+    cy.get(getHandleSelector()).eq(1).should('contain', 'id:G2');
 
     // reorder operation
     cy.get('@first')
@@ -25,11 +25,11 @@ describe('reorder', () => {
 
     // order now 2, 1
     // note: not using get aliases as they where returning incorrect results
-    cy.get(getHandleSelector()).eq(0).should('contain', 'id:2');
+    cy.get(getHandleSelector()).eq(0).should('contain', 'id:G2');
 
-    cy.get(getHandleSelector()).eq(1).should('contain', 'id:1');
+    cy.get(getHandleSelector()).eq(1).should('contain', 'id:G1');
 
     // element should maintain focus post drag
-    cy.focused().should('contain', 'id:1');
+    cy.focused().should('contain', 'id:G1');
   });
 });

package.json

@@ -37,6 +37,7 @@
     "prettier_target": "*.{js,jsx,ts,tsx,md,json} src/**/*.{js,jsx,ts,tsx,md,json} test/**/*.{js,jsx,ts,tsx,md,json} docs/**/*.{js,jsx,ts,tsx,md,json} stories/**/*.{js,jsx,ts,tsx,md,json} cypress/**/*.{js,jsx,ts,tsx,md,json} csp-server/**/*.{js,jsx,ts,tsx,md,json}"
   },
   "scripts": {
+    "chromatic": "chromatic --project-token=f92123f238de",
     "prepare": "husky install",
     "release": "cross-env SKIP_PREPARE_COMMIT_MSG=true release-it",
     "test:accessibility": "lighthouse http://localhost:9002/iframe.html?id=single-vertical-list--basic --no-enable-error-reporting --config-path=lighthouse.config.js --chrome-flags='--headless' --output=json --output=html --output-path=./test-reports/lighthouse/a11y.json && node a11y-audit-parse.js",
@@ -123,6 +124,7 @@
     "@types/react-redux": "7.1.23",
     "@types/react-virtualized": "9.21.20",
     "@types/react-window": "1.8.5",
+    "@types/seedrandom": "3.0.2",
     "@typescript-eslint/eslint-plugin": "5.15.0",
     "@typescript-eslint/parser": "5.15.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.6",
@@ -181,6 +183,7 @@
     "rollup-plugin-dts": "4.2.0",
     "rollup-plugin-size-snapshot": "0.12.0",
     "rollup-plugin-terser": "7.0.2",
+    "seedrandom": "3.0.5",
     "storybook-addon-performance": "0.16.1",
     "styled-components": "5.3.3",
     "stylelint": "14.6.0",

stories/1-single-vertical-list.stories.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import styled from '@emotion/styled';
 import QuoteApp from './src/vertical/quote-app';
-import { quotes, getQuotes } from './src/data';
+import { getQuotes } from './src/data';
 import { grid } from './src/constants';
 
-const data = {
-  small: quotes,
-  medium: getQuotes(40),
-  large: getQuotes(500),
+const generateData = {
+  small: () => getQuotes(),
+  medium: () => getQuotes(40),
+  large: () => getQuotes(500),
 };
 
 const ScrollContainer = styled.div`
@@ -27,11 +27,17 @@ const Title = styled.h4`
 `;
 
 storiesOf('single vertical list', module)
-  .add('basic', () => <QuoteApp initial={data.small} />)
-  .add('large data set', () => <QuoteApp initial={data.large} />)
+  .add('basic', () => <QuoteApp initial={generateData.small()} />)
+  .add('large data set', () => <QuoteApp initial={generateData.large()} />, {
+    chromatic: {
+      // This is to make sure we do not reach
+      // the 25,000,000px limit of the snapshot.
+      viewports: [320],
+    },
+  })
   .add('Droppable is a scroll container', () => (
     <QuoteApp
-      initial={data.medium}
+      initial={generateData.medium()}
       listStyle={{
         overflowY: 'scroll',
         maxHeight: '80vh',
@@ -41,7 +47,7 @@ storiesOf('single vertical list', module)
   ))
   .add('window scrolling and a Droppable scroll container', () => (
     <QuoteApp
-      initial={data.medium}
+      initial={generateData.medium()}
       listStyle={{
         overflowY: 'scroll',
         maxHeight: '120vh',
@@ -52,9 +58,9 @@ storiesOf('single vertical list', module)
   .add('within a larger scroll container', () => (
     <ScrollContainer>
       <Title>List is within a larger scroll container</Title>
-      <QuoteApp initial={data.medium} />
+      <QuoteApp initial={generateData.medium()} />
     </ScrollContainer>
   ))
   .add('with combine enabled', () => (
-    <QuoteApp initial={data.small} isCombineEnabled />
+    <QuoteApp initial={generateData.small()} isCombineEnabled />
   ));

stories/10-table.stories.tsx

@@ -4,12 +4,14 @@ import WithDimensionLocking from './src/table/with-dimension-locking';
 import WithFixedColumns from './src/table/with-fixed-columns';
 import WithPortal from './src/table/with-portal';
 import WithClone from './src/table/with-clone';
-import { quotes } from './src/data';
+import { getQuotes } from './src/data';
 
 storiesOf('Tables', module)
-  .add('with fixed width columns', () => <WithFixedColumns initial={quotes} />)
+  .add('with fixed width columns', () => (
+    <WithFixedColumns initial={getQuotes()} />
+  ))
   .add('with dimension locking', () => (
-    <WithDimensionLocking initial={quotes} />
+    <WithDimensionLocking initial={getQuotes()} />
   ))
-  .add('with clone', () => <WithClone initial={quotes} />)
-  .add('with custom portal', () => <WithPortal initial={quotes} />);
+  .add('with clone', () => <WithClone initial={getQuotes()} />)
+  .add('with custom portal', () => <WithPortal initial={getQuotes()} />);

stories/11-portal.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import PortalApp from './src/portal/portal-app';
-import { quotes } from './src/data';
+import { getQuotes } from './src/data';
 
 storiesOf('Portals', module).add('Using your own portal', () => (
-  <PortalApp initial={quotes.slice(0, 2)} />
+  <PortalApp initial={getQuotes().slice(0, 2)} />
 ));

stories/2-single-horizontal.stories.tsx

@@ -2,25 +2,24 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import styled from '@emotion/styled';
 import AuthorApp from './src/horizontal/author-app';
-import { quotes, getQuotes } from './src/data';
-import type { Quote } from './src/types';
+import { getQuotes } from './src/data';
 
-const bigData: Quote[] = getQuotes(30);
+const generateBigData = () => getQuotes(30);
 
 const WideWindow = styled.div`
   width: 120vw;
 `;
 
 storiesOf('single horizontal list', module)
-  .add('simple', () => <AuthorApp initial={quotes} />)
+  .add('simple', () => <AuthorApp initial={getQuotes()} />)
   .add('with combine enabled', () => (
-    <AuthorApp initial={quotes} isCombineEnabled />
+    <AuthorApp initial={getQuotes()} isCombineEnabled />
   ))
   .add('with overflow scroll', () => (
-    <AuthorApp initial={bigData} internalScroll />
+    <AuthorApp initial={generateBigData()} internalScroll />
   ))
   .add('with window scroll and overflow scroll', () => (
     <WideWindow>
-      <AuthorApp initial={bigData} internalScroll />
+      <AuthorApp initial={generateBigData()} internalScroll />
     </WideWindow>
   ));

stories/3-board.stories.stories.tsx

@@ -4,17 +4,17 @@ import Board from './src/board/board';
 import { authorQuoteMap, generateQuoteMap } from './src/data';
 
 const data = {
-  medium: generateQuoteMap(100),
-  large: generateQuoteMap(500),
+  medium: () => generateQuoteMap(100),
+  large: () => generateQuoteMap(500),
 };
 
 storiesOf('board', module)
   .add('simple', () => <Board initial={authorQuoteMap} />)
   .add('dragging a clone', () => <Board initial={authorQuoteMap} useClone />)
-  .add('medium data set', () => <Board initial={data.medium} />)
-  .add('large data set', () => <Board initial={data.large} />)
+  .add('medium data set', () => <Board initial={data.medium()} />)
+  .add('large data set', () => <Board initial={data.large()} />)
   .add('long lists in a short container', () => (
-    <Board initial={data.medium} containerHeight="60vh" />
+    <Board initial={data.medium()} containerHeight="60vh" />
   ))
   .add('scrollable columns', () => (
     <Board initial={authorQuoteMap} withScrollableColumns />

stories/40-programmatic.stories.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import WithControls from './src/programmatic/with-controls';
 import Runsheet from './src/programmatic/runsheet';
-import { quotes } from './src/data';
+import { getQuotes } from './src/data';
 
 storiesOf('Programmatic dragging', module)
-  .add('with controls', () => <WithControls initial={quotes.slice(0, 3)} />)
-  .add('with runsheet', () => <Runsheet initial={quotes} />);
+  .add('with controls', () => (
+    <WithControls initial={getQuotes().slice(0, 3)} />
+  ))
+  .add('with runsheet', () => <Runsheet initial={getQuotes()} />);

stories/45-virtual.stories.tsx

@@ -14,6 +14,14 @@ storiesOf('Virtual: react-window', module)
 storiesOf('Virtual: react-virtualized', module)
   .add('list', () => <ReactVirtualizedList initial={getQuotes(1000)} />)
   .add('board', () => <ReactVirtualizedBoard />)
-  .add('window list', () => (
-    <ReactVirtualizedWindowList initial={getQuotes(1000)} />
-  ));
+  .add(
+    'window list',
+    () => <ReactVirtualizedWindowList initial={getQuotes(700)} />,
+    {
+      chromatic: {
+        // This is to make sure we do not reach
+        // the 25,000,000px limit of the snapshot.
+        viewports: [320],
+      },
+    },
+  );

stories/5-multiple-vertical-lists.stories.tsx

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import QuoteApp from './src/multiple-vertical/quote-app';
 import { getQuotes } from './src/data';
 
-const quoteMap = {
+const generateQuoteMap = () => ({
   alpha: getQuotes(7),
   beta: getQuotes(3),
   gamma: getQuotes(7),
@@ -14,8 +14,8 @@ const quoteMap = {
   theta: getQuotes(5),
   iota: getQuotes(20),
   kappa: getQuotes(5),
-};
+});
 
 storiesOf('multiple vertical lists', module).add('stress test', () => (
-  <QuoteApp initial={quoteMap} />
+  <QuoteApp initial={generateQuoteMap()} />
 ));