Merge branch 'next'

.eslintignore

@@ -12,3 +12,5 @@ assets/
 fixtures/
 
 src/icons/
+
+src/codemods/

.github/PULL_REQUEST_TEMPLATE.md

@@ -14,12 +14,15 @@ Please fill out the information below to expedite the review and (hopefully) mer
 ### Media
 
 <!-- _Optionally, but highly recommended_ Depending on the impact of the change or the complexity of the contribution, choose between and image to showcase the visual changes or a Loom video describing the work you have made. -->
+
 ​
+
 ## Why
 
 <!-- A brief explanation over why this need arise alonside a sentence with keyword to close related issue "Closes #N" or "relates #X, relates #Y" -->
 
 ​
+
 ## How
 
 <!-- Often a list of things to describe the process to accomplish this PR -->

.github/workflows/docs.yml

@@ -18,6 +18,8 @@ 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

.prettierignore

@@ -1 +1,2 @@
-package-lock.json
+package-lock.json
+src/codemods/__testfixtures__/

.storybook/FreenowTheme.ts

@@ -1,19 +1,20 @@
 // .storybook/FreenowTheme.ts
 import { create } from '@storybook/theming/create';
 
-export default create({
-    base: 'light',
-
-    // Typography
+const baseVars = {
     fontBase: '"Open Sans", sans-serif',
     fontCode: 'monospace',
 
     brandTitle: 'FREENOW',
     brandUrl: 'https://wave.free-now.com/',
     brandImage: 'https://wave.free-now.com/freenow-logo.svg',
-    brandTarget: '_self',
+    brandTarget: '_self'
+};
+
+export const LightTheme = create({
+    base: 'light',
+    ...baseVars,
 
-    //
     colorPrimary: '#CA0928',
     colorSecondary: '#585C6D',
 
@@ -38,3 +39,11 @@ export default create({
     inputTextColor: '#10162F',
     inputBorderRadius: 2
 });
+
+export const DarkTheme = create({
+    base: 'dark',
+    appContentBg: 'hsl(0deg, 0%, 5%)',
+    appPreviewBg: '#222425',
+    inputTextColor: 'blue',
+    ...baseVars
+});

.storybook/main.ts

@@ -6,7 +6,8 @@ const config: StorybookConfig = {
         '@storybook/addon-links',
         '@storybook/addon-essentials',
         '@storybook/addon-interactions',
-        '@storybook/addon-viewport'
+        '@storybook/addon-viewport',
+        'storybook-dark-mode'
     ],
     framework: {
         name: '@storybook/react-webpack5',

.storybook/preview.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { Preview } from '@storybook/react';
+import { themes } from '@storybook/theming';
+import { DocsContainer } from '@storybook/addon-docs';
+import { useDarkMode } from 'storybook-dark-mode';
+
+import { GlobalStyle as ClassicColors } from '../src/essentials/Colors/Colors';
+import { GlobalStyle as ModernColors } from '../src/essentials/Colors/ModernColors';
+import { DarkScheme, LightScheme } from '../src/components/ColorScheme';
+
+import { LightTheme, DarkTheme } from './FreenowTheme';
+
+const THEMES = {
+    classic: ClassicColors,
+    modern: ModernColors
+} as const;
+
+export const withTheme = (Story, context) => {
+    const Theme = THEMES[context.globals.theme];
+    return (
+        <>
+            <Theme />
+            <Story {...context} />
+        </>
+    );
+};
+
+export const withColorScheme = (Story, context) => {
+    const SchemeWrapper = useDarkMode() ? DarkScheme : LightScheme;
+
+    return (
+        <SchemeWrapper>
+            <Story {...context} />
+        </SchemeWrapper>
+    );
+};
+
+export const preview: Preview = {
+    decorators: [withTheme, withColorScheme],
+    parameters: {
+        darkMode: {
+            dark: { ...themes.dark, ...DarkTheme },
+            light: {
+                ...themes.normal,
+                ...LightTheme
+            },
+            lightClass: ['wave', 'light-scheme'],
+            darkClass: ['wave', 'dark-scheme'],
+            stylePreview: true
+        },
+        actions: { argTypesRegex: '^on[A-Z].*' },
+        viewMode: 'docs',
+        controls: {
+            expanded: true,
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/
+            }
+        },
+        options: {
+            storySort: {
+                order: ['Welcome', 'Get Started', 'Essentials', 'Components', 'Form Elements']
+            }
+        },
+        docs: {
+            container: props => {
+                const scheme = useDarkMode() ? DarkTheme : LightTheme;
+                const globals = props.context.store.globals.get();
+                const WaveTheme = THEMES[globals.theme];
+
+                return (
+                    <>
+                        <WaveTheme />
+                        <DocsContainer {...props} theme={scheme} />
+                    </>
+                );
+            },
+            toc: {
+                headingSelector: 'h2, h3'
+            }
+        },
+        backgrounds: {
+            disable: true
+        },
+        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'
+                }
+            }
+        }
+    },
+    globalTypes: {
+        theme: {
+            description: 'Global theme for components',
+            defaultValue: 'modern',
+            toolbar: {
+                title: 'Theme',
+                icon: 'paintbrush',
+                items: ['modern', 'classic'],
+                dynamicTitle: true
+            }
+        }
+    }
+};
+
+export default preview;

.stylelintignore

@@ -0,0 +1,2 @@
+node_modules/
+src/codemods/__testfixtures__/