WECH-23: Migrate components to storybook part 1

.eslintignore

@@ -2,7 +2,7 @@
 node_modules/
 
 # generated files
-.docz/
+storybook-static/
 lib/
 
 # other
@@ -12,4 +12,3 @@ assets/
 fixtures/
 
 src/icons/
-src/gatsby-theme-docz

.eslintrc.js

@@ -8,7 +8,9 @@ module.exports = {
         'plugin:jest/recommended',
         'plugin:promise/recommended',
         'plugin:unicorn/recommended',
-        'prettier'
+        'prettier',
+        'plugin:storybook/recommended',
+        'plugin:storybook/recommended'
     ],
     env: {
         node: true,
@@ -21,11 +23,8 @@ module.exports = {
     rules: {
         // conflicts with stylelint rule
         'unicorn/numeric-separators-style': 'off',
-
         'unicorn/no-useless-undefined': 'off',
-
         '@typescript-eslint/no-unsafe-return': 'off',
-
         '@typescript-eslint/no-unsafe-assignment': 'off',
         'react/require-default-props': 'off',
         // Often used for this library
@@ -35,7 +34,7 @@ module.exports = {
         'no-prototype-builtins': 'off',
         // https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html
         'import/prefer-default-export': 'off',
-        'import/no-default-export': 'error',
+        'import/no-default-export': 'off',
         // Too restrictive: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md
         'react/destructuring-assignment': 'off',
         // No jsx extension: https://github.com/facebook/create-react-app/issues/87#issuecomment-234627904
@@ -47,14 +46,21 @@ module.exports = {
         '@typescript-eslint/explicit-function-return-type': 'off',
         '@typescript-eslint/no-use-before-define': [
             'error',
-            { functions: false, classes: true, variables: true, typedefs: true }
+            {
+                functions: false,
+                classes: true,
+                variables: true,
+                typedefs: true
+            }
         ],
         // Common abbreviations are known and readable
         'unicorn/prevent-abbreviations': 'off',
         // Airbnb prefers forEach
         'unicorn/no-array-for-each': 'off',
         // It's not accurate in the monorepo style
-        'import/no-extraneous-dependencies': 'off'
+        'import/no-extraneous-dependencies': 'off',
+        // Storybook Template.bind returns any type
+        '@typescript-eslint/no-unsafe-member-access': 'off'
     },
     overrides: [
         {

.github/workflows/docs.yml

@@ -22,8 +22,8 @@ jobs:
               run: npm run build:documentation
             - uses: actions/upload-artifact@v3
               with:
-                  name: docz-dist
-                  path: .docz/dist
+                  name: storybook-dist
+                  path: storybook-static
 
     deploy:
         if: github.ref == 'refs/heads/main'
@@ -32,7 +32,7 @@ jobs:
         steps:
             - uses: actions/download-artifact@v3
               with:
-                  name: docz-dist
+                  name: storybook-dist
                   path: public
             - name: Deploy
               uses: peaceiris/actions-gh-pages@v3

.gitignore

@@ -8,7 +8,7 @@ coverage/
 junit.xml
 
 # project files
-.docz/
+storybook-static/
 *.tgz
 .npmrc
 node_modules/

.storybook/main.js

@@ -0,0 +1,5 @@
+module.exports = {
+    stories: ['../src/stories/**/*.stories.@(ts|tsx)'],
+    addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+    framework: '@storybook/react'
+};

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/
+        }
+    }
+};

CONTRIBUTING.md

@@ -104,17 +104,18 @@ If an unreviewed ticket reports a bug, try and reproduce it. If you can reproduc
 
 Our documentation is great but it can always be improved. Did you find a typo? Do you think that something should be clarified? Go ahead and suggest a documentation patch!
 
-We use [Docz](https://www.docz.site) to run our documentation site at [wave.free-now.com](https://wave.free-now.com/).
+We use [Storybook](https://storybook.js.org) to run our documentation site at [wave.free-now.com](https://wave.free-now.com/).
 
 To add a new component to our documentation site:
 
-1. Create a new file with the `.md` extension for your component in `/components/[component]/docs`.
-2. Add the markdown header for the page name, route and parent menu
-3. Include a brief description, examples as well as the the `Playground` and `Props` components of [Docz].
+1. Create a new file with the `.stories.tsx` prefix for your component in `/src/stories`.
+2. Include a brief description and examples. Props should be configurable via Storybook
+
+To learn more how to add stories go to [Storybook docs](https://storybook.js.org/docs/react/writing-stories/introduction)
 
 ### Reporting pains and use cases
 
-Speak outloud for us to understand your pains is valuable, challenge current approaches and help us to understand how to do better. Make sure to verify that the topic hasn't being touched yet on the issues poll otherwise open a new one and let's start the conversation
+Speak out loud for us to understand your pains is valuable, challenge current approaches and help us to understand how to do better. Make sure to verify that the topic hasn't being touched yet on the issues poll otherwise open a new one and let's start the conversation
 
 ### Take from the backlog