Merge experimental components (#469)

* feat(experimental): add Chip and Text Add experimental theme and utils. * feat(experimental): add Button WIP * chore(storybook): upgrade to latest v8 * fix(raddi): fix order * feat(font): load Roboto Flex in Storybook * style(chip): remove commented/unused code * feat(button): adjust style * feat(text): add story * feat(button): add secondary * feat(storybook): re-order experimental folder * feat(chip): remove react import from story * feat(text): add kitchen sink * feat(input): add input * feat(input): export and fix story * Disp 105/css colors (#466) * feat: add experimental colors * feat(button): use color variables * feat(storybook): add experimental theme * chore: update package-lock --------- Co-authored-by: Lena Rashkovan <lena.rashkovan@free-now.com> * Disp 140/button (#467) * feat(storybook): add experimental themes for rider and driver * feat(button): add styling * feat(button): add pressed and focus states * fix(text): fix typography * feat(experimental): use rems in spaces --------- Co-authored-by: Lena Rashkovan <lena.rashkovan@free-now.com> * feat: add exports for experimental components (#464) * feat: add exports for experimental components * chore: rollback manual rc version * feat(experimental): add color palette and global styles to export * chore: put codemods back --------- Co-authored-by: Lena Rashkovan <lena.rashkovan@free-now.com> * Disp 139/input (#468) * feat(input): replace base input with react-aria component * feat(text-field): add basic styles and structure * feat(text-field): add a flying label * feat(text-field): add a flying label * feat(text-field): add clearing * chore(text-field): silence the style linter * feat(text-field): add auto grow * fix(text-field): fix overflow jump --------- Co-authored-by: Lena Rashkovan <lena.rashkovan@free-now.com> --------- Co-authored-by: Artur Miglio <artur.miglio@free-now.com> Co-authored-by: Lena Rashkovan <lena.rashkovan@free-now.com> Co-authored-by: martimalek <46452321+martimalek@users.noreply.github.com>
freenowtech · Sep 19, 2024 · f643383 · f643383
1 parent 84cef60
commit f643383
Show file tree

Hide file tree

Showing 30 changed files with 38,852 additions and 7,549 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -2,21 +2,28 @@ 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',
-        'storybook-dark-mode'
+        'storybook-dark-mode',
+        '@storybook/addon-webpack5-compiler-swc'
     ],
+
     framework: {
         name: '@storybook/react-webpack5',
         options: {}
     },
-    docs: {
-        autodocs: true
-    },
-    staticDirs: ['../public']
+
+    docs: {},
+
+    staticDirs: ['../public'],
+
+    typescript: {
+        reactDocgen: 'react-docgen-typescript'
+    }
 };
 
 export default config;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -3,7 +3,13 @@
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
 <link rel="manifest" href="/site.webmanifest" />
 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,400i,600,600i,700,800" rel="stylesheet" />
+<link
+    href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght@8..144,50..100,400..700"
+    rel="stylesheet"
+/>
 <meta name="msapplication-TileColor" content="#da532c" />
 <meta name="theme-color" content="#ffffff" />
 

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -6,17 +6,30 @@ 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 { createGlobalStyle, ColorPalette as ExperimentalColors } from '../src/essentials/experimental/Colors';
 import { DarkScheme, LightScheme } from '../src/components/ColorScheme';
 
-import { LightTheme, DarkTheme } from './FreenowTheme';
+import { LightTheme, DarkTheme } from '../src/docs/storybook-theme/FreenowTheme';
 
 const THEMES = {
     classic: ClassicColors,
-    modern: ModernColors
+    modern: ModernColors,
+    'experimental (rider)': createGlobalStyle({
+        accent: ExperimentalColors.red['50'],
+        onAccent: ExperimentalColors.neutral['100'],
+        accentDark: ExperimentalColors.red['60']
+    }),
+    'experimental (driver)': createGlobalStyle({
+        accent: ExperimentalColors.red['30'],
+        onAccent: ExperimentalColors.neutral['99'],
+        accentDark: ExperimentalColors.red['90'],
+        onAccentDark: ExperimentalColors.neutral['10']
+    })
 } as const;
 
 export const withTheme = (Story, context) => {
-    const Theme = THEMES[context.globals.theme];
+    const { theme } = context.globals;
+    const Theme = THEMES[theme];
     return (
         <>
             <Theme />
@@ -37,6 +50,7 @@ export const withColorScheme = (Story, context) => {
 
 export const preview: Preview = {
     decorators: [withTheme, withColorScheme],
+
     parameters: {
         darkMode: {
             dark: { ...themes.dark, ...DarkTheme },
@@ -59,7 +73,7 @@ export const preview: Preview = {
         },
         options: {
             storySort: {
-                order: ['Welcome', 'Get Started', 'Essentials', 'Components', 'Form Elements']
+                order: ['Welcome', 'Get Started', 'Essentials', 'Experimental', 'Components', 'Form Elements']
             }
         },
         docs: {
@@ -127,18 +141,21 @@ export const preview: Preview = {
             }
         }
     },
+
     globalTypes: {
         theme: {
             description: 'Global theme for components',
             defaultValue: 'modern',
             toolbar: {
                 title: 'Theme',
                 icon: 'paintbrush',
-                items: ['modern', 'classic'],
+                items: ['modern', 'classic', 'experimental (rider)', 'experimental (driver)'],
                 dynamicTitle: true
             }
         }
     }
+
+    // tags: ['autodocs']
 };
 
 export default preview;