Wech 21/support react 18

.babelrc.json

@@ -0,0 +1,16 @@
+{
+    "sourceType": "unambiguous",
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "chrome": 100
+                }
+            }
+        ],
+        "@babel/preset-typescript",
+        "@babel/preset-react"
+    ],
+    "plugins": []
+}

.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

@@ -18,12 +18,14 @@ jobs:
                   node-version: 18
             - name: Install dependencies
               uses: bahmutov/npm-install@v1
+              with:
+                  install-command: npm i --legacy-peer-deps
             - name: Build docs
               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 +34,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/

.prettierignore

@@ -1,2 +1 @@
-package-lock.json
-*.mdx
+package-lock.json

.storybook/FreenowTheme.ts

@@ -0,0 +1,41 @@
+// .storybook/FreenowTheme.ts
+import { create } from '@storybook/theming/create';
+import logo from '../public/assets/freenow-logo.svg';
+
+export default create({
+    base: 'light',
+
+    // Typography
+    fontBase: '"Open Sans", sans-serif',   
+    fontCode: 'monospace',
+
+    brandTitle: 'FREENOW',
+    brandUrl: 'https://wave.free-now.com/',
+    brandImage: logo,
+    brandTarget: '_self',
+
+    //
+    colorPrimary: '#CA0928',
+    colorSecondary: '#585C6D',
+
+    // UI
+    appBg: '#ffffff',
+    appContentBg: '#ffffff',
+    appBorderColor: '#585C6D',
+    appBorderRadius: 4,
+
+    // Text colors
+    textColor: '#10162F',
+    textInverseColor: '#ffffff',
+
+    // Toolbar default and active colors
+    barTextColor: '#9E9E9E',
+    barSelectedColor: '#585C6D',
+    barBg: '#ffffff',
+
+    // Form colors
+    inputBg: '#ffffff',
+    inputBorder: '#10162F',
+    inputTextColor: '#10162F',
+    inputBorderRadius: 2
+});

.storybook/main.ts

@@ -0,0 +1,21 @@
+import { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+    stories: ['../**/*.storybook.mdx', '../src/**/*.stories.@(ts|tsx)'],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        '@storybook/addon-viewport'
+    ],
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {}
+    },
+    docs: {
+        autodocs: true
+    },
+    staticDirs: ['../public']
+};
+
+export default config;

.storybook/manager.ts

@@ -0,0 +1,7 @@
+// .storybook/manager.ts
+import { addons } from '@storybook/manager-api';
+import FreenowTheme from './FreenowTheme';
+
+addons.setConfig({
+    theme: FreenowTheme
+});

.storybook/preview.ts

@@ -0,0 +1,77 @@
+import { Preview } from '@storybook/react';
+import { themes } from '@storybook/theming';
+
+export const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: '^on[A-Z].*' },
+        viewMode: 'docs',
+        controls: {
+            expanded: true,
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/
+            }
+        },
+        docs: {
+            theme: themes.light
+        },
+        backgrounds: {
+            default: 'light',
+            values: [
+                { name: 'light', value: '#FFFFFF' },
+                { name: 'dark', value: '#001E3E' }
+            ]
+        },
+        viewport: {
+            viewports: {
+                mobile: {
+                    name: 'Mobile',
+                    styles: {
+                        height: '568px',
+                        width: '320px'
+                    },
+                    type: 'mobile'
+                },
+                mobile_landscape: {
+                    name: 'Mobile landscape',
+                    styles: {
+                        height: '320px',
+                        width: '568px'
+                    },
+                    type: 'mobile'
+                },
+                tablet: {
+                    name: 'Tablet',
+                    styles: {
+                        height: '1112px',
+                        width: '834px'
+                    },
+                    type: 'tablet'
+                },
+                tablet_landscape: {
+                    name: 'Tablet landscape',
+                    styles: {
+                        height: '834px',
+                        width: '1112px'
+                    },
+                    type: 'tablet'
+                },
+                desktop: {
+                    name: 'Desktop',
+                    styles: {
+                        height: '1080px',
+                        width: '1920px'
+                    },
+                    type: 'desktop'
+                }
+            }
+        },
+        options: {
+            storySort: {
+                order: ['Welcome', 'Essentials', 'Components', 'Form Elements']
+            }
+        }
+    }
+};
+
+export default preview;

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
 

docs/accessibility.storybook.mdx

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Accessibility" />
+
+# Accessibility (a11y)
+
+Accessible design not only helps users with disabilities; it provides better user experiences for everyone.
+
+## Overview
+
+Our goal is to provide a consistent user experience for all users, whether they’re navigating with a mouse/touchscreen, keyboard, or screen reader.
+
+An accessible product should:
+
+-   Give all users the same quality of experience
+-   Adapt to users and situations
+
+Individually accessible elements and components are part of building accessible products, but the accessibility efforts need for manual testing. When designing new UIs, rely as much as possible on Wave existing components and follow accessible patterns. If you're creating a new component or pattern (one that doesn't exist in Wave), keep in mind accessibility practices before your implementation.
+
+## Mission
+
+The Wave Design System team wants as many people as possible to be able to use Wave powered products. For example, that means you should be able to:
+
+-   **zoom** in up to 300% without the text spilling off the screen
+-   navigate most of the website using just a **keyboard**
+-   listen to most of the website using a **screen reader**
+
+## Aid development process
+
+-   How to [audit Web a11y Video](https://www.youtube.com/watch?v=cOmehxAU_4s)
+-   Use the [a11y project checklist](https://www.a11yproject.com/checklist/) and aim for at least A level compliance
+-   Use [axe dev tools](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) for accessibility testing. Check more at [deque Axe](https://www.deque.com/axe/devtools/) and learn [how to use it with this Video](https://www.youtube.com/watch?v=dyU9yrRJ5Eg)
+-   Use [Lighthouse Chrome extension](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en) for accessibility score. Check more at [Web.dev a11y](https://web.dev/accessibility-scoring/)
+-   Use [accessible queries](https://testing-library.com/docs/queries/about#priority) when writing tests. This assume you are using [testing-library](https://testing-library.com/)