Merge pull request #75 from meza/colormode

Color mode

.eslintrc.js

@@ -19,15 +19,17 @@ module.exports = {
     {
       files: [
         '**/*.test.ts',
-        'test/**/*.ts'
+        '**/*.test.tsx',
+        'test/**/*.ts',
+        'test/**/*.tsx'
       ],
       rules: {
         '@typescript-eslint/no-non-null-assertion': 'off',
         '@typescript-eslint/no-empty-function': 'off',
         '@typescript-eslint/ban-ts-comment': 'off',
         'no-use-before-define': 'off',
         'max-nested-callbacks': 'off',
-        'sonarjs/no-duplicate-string': 'off',
+        'sonarjs/no-duplicate-string': 'off'
       }
     }
   ],
@@ -36,14 +38,14 @@ module.exports = {
     sourceType: 'module',
     ecmaVersion: 'latest',
     ecmaFeatures: {
-      jsx: true,
+      jsx: true
     },
     project: ['./tsconfig.json', './.storybook/tsconfig.json']
   },
   settings: {
     jest: {
-      version: 28,
-    },
+      version: 28
+    }
   },
   plugins: [
     'i18next',
@@ -58,7 +60,7 @@ module.exports = {
       {
         alphabetize: {
           caseInsensitive: false,
-          order: 'asc',
+          order: 'asc'
         },
         groups: [
           'builtin',
@@ -67,17 +69,17 @@ module.exports = {
           'parent',
           'sibling',
           'index',
-          'type',
+          'type'
         ],
         pathGroups: [
           {
             pattern: 'react',
             group: 'external',
-            position: 'before',
-          },
+            position: 'before'
+          }
         ],
-        pathGroupsExcludedImportTypes: ['type'],
-      },
+        pathGroupsExcludedImportTypes: ['type']
+      }
     ],
     'sonarjs/no-duplicate-string': 'off',
     'no-continue': 'off',

.storybook/main.ts

@@ -1,14 +1,22 @@
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 import { DefinePlugin } from 'webpack';
 import { StorybookConfig } from '@storybook/react-webpack5';
+
 const storybookConfig: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-links',
-    '@meza/storybook-react-i18next',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss')
+        }
+      }
+    },
     {
       name: '@storybook/addon-docs',
       options: {

.storybook/manager.ts

@@ -1,8 +1,6 @@
 import { addons } from '@storybook/manager-api';
-import { theme } from './theme';
+import theme from './theme';
 
 addons.setConfig({
-  theme: theme,
+  theme: theme
 });
-
-export default theme;

.storybook/preview.tsx

@@ -0,0 +1,121 @@
+import i18n from '../testUtils/i18nextForStorybook';
+import React, { useEffect } from 'react';
+import { ColorMode, ColorModeContext } from '~/components/ColorModeSwitcher';
+import { StoryContext, StoryFn } from '@storybook/react';
+import '../src/styles/app.css';
+import './storybook.css';
+import { I18nextProvider } from 'react-i18next';
+import theme from './theme';
+import { useGlobals } from '@storybook/addons';
+import { createRemixStub } from '@remix-run/testing/dist/create-remix-stub';
+
+const createRemixStoryDecorator = (Story: StoryFn) => {
+  const RemixStub = createRemixStub([
+    {
+      path: '/*',
+      element: <Story/>,
+      action: () => ({ redirect: '/' }),
+      loader: () => ({ redirect: '/' })
+    }
+  ]);
+  return <RemixStub/>;
+};
+
+const withAllTheThings = (Story: StoryFn, context: StoryContext) => {
+  const [globals, updateGlobals] = useGlobals();
+  const colorMode = globals.colorMode || ColorMode.LIGHT;
+
+  const setStoryColorMode = (mode: ColorMode, force = true) => {
+    const cl = document.firstElementChild?.classList;
+    document.body.classList.remove(ColorMode.LIGHT, ColorMode.DARK);
+    if (cl) {
+      cl.remove(ColorMode.LIGHT, ColorMode.DARK);
+      cl.add(mode);
+      if (force) {
+        updateGlobals({ colorMode: mode });
+      }
+    }
+  };
+
+  const RemixStub = createRemixStub([
+    {
+      path: '/*',
+      element: <Story/>,
+      action: () => ({ redirect: '/' }),
+      loader: () => ({ redirect: '/' })
+    }
+  ]);
+
+  useEffect(() => {
+    setStoryColorMode(colorMode, false);
+  }, [colorMode]);
+
+  return (
+    <I18nextProvider i18n={i18n}>
+      <ColorModeContext.Provider
+        value={{
+          colorMode: colorMode,
+          setColorMode: setStoryColorMode
+        }}>
+        <RemixStub/>
+      </ColorModeContext.Provider>
+    </I18nextProvider>
+  );
+};
+
+export const decorators = [
+  withAllTheThings
+];
+
+/** @type { import('@storybook/react').Preview } */
+export const parameters = {
+  docs: {
+    theme: theme,
+    canvas: {
+      background: false,
+      className: 'storybook-canvas'
+    },
+    story: {
+      inline: true
+    }
+  },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  },
+  dependencies: {
+    // display only dependencies/dependents that have a story in storybook
+    // by default this is false
+    withStoriesOnly: true,
+
+    // completely hide a dependency/dependents block if it has no elements
+    // by default this is false
+    hideEmpty: true
+  },
+  backgrounds: { disable: true },
+  locale: 'en',
+  locales: {
+    en: 'English'
+  }
+};
+
+export const globalTypes = {
+  colorMode: {
+    name: 'ColorMode',
+    description: 'Color Mode',
+    defaultValue: 'dark',
+    toolbar: {
+      items: [
+        { value: 'dark', title: 'Dark', icon: 'moon' },
+        { value: 'light', title: 'Light', icon: 'sun' }
+      ],
+      showName: true,
+      dynamicTitle: true
+    }
+  }
+};
+
+

.storybook/storybook.css

@@ -0,0 +1,6 @@
+/** This is necessary to override the default canvas styles */
+.storybook-canvas {
+  background-color: var(--color-secondary) !important;
+  color: var(--color-primary) !important;
+  @custom-media --motion-ok true;
+}

.storybook/theme.ts

@@ -1,12 +1,9 @@
 import { create } from '@storybook/theming/create';
 
-export const theme = create({
+export default create({
   base: 'dark',
   brandTitle: 'Storybook',
   brandUrl: 'https://storybook.com',
   brandImage: 'https://placekitten.com/350/150',
-  brandTarget: '_self',
-  colorPrimary: '#ED117D',
+  brandTarget: '_self'
 });
-
-export default theme;

.stylelintrc.json

@@ -6,7 +6,14 @@
     "stylelint-order"
   ],
   "rules": {
-    "order/properties-alphabetical-order": true
+    "order/properties-alphabetical-order": true,
+    "at-rule-empty-line-before": ["always", {
+      "except": [
+        "blockless-after-same-name-blockless",
+        "first-nested"
+      ],
+      "ignore": ["after-comment"]
+    }]
   },
   "reportDescriptionlessDisables": true,
   "reportInvalidScopeDisables": true,