Atomic components stories (#1422)

.github/workflows/ci.yml

@@ -127,4 +127,5 @@ jobs:
           restore-keys: ${{ runner.os }}-${{ matrix.node }}-storybook-${{ env.cache-name }}-
 
       - run: npm ci
+      - run: npm run pregenerate
       - run: npm run storybook:build

.jest/__mocks__/matchMedia.js

@@ -0,0 +1,13 @@
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn()
+  }))
+})

.jest/jest.setup.js

@@ -1 +1,2 @@
 import '@testing-library/jest-dom/extend-expect'
+import './__mocks__/matchMedia'

.storybook/main.js

@@ -1,5 +1,5 @@
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
-
+const webpack = require('webpack')
 module.exports = {
   core: { builder: 'webpack5' },
   stories: ['../src/**/*.stories.tsx'],
@@ -47,6 +47,12 @@ module.exports = {
     })
     config.resolve.fallback = fallback
 
+    config.plugins = (config.plugins || []).concat([
+      new webpack.ProvidePlugin({
+        process: 'process/browser',
+        Buffer: ['buffer', 'Buffer']
+      })
+    ])
     return config
   }
 }

.storybook/preview.js

@@ -13,7 +13,7 @@ export const parameters = {
   controls: {
     matchers: {
       color: /(background|color)$/i,
-      date: /Date$/
+      date: /date$/
     }
   }
 }