@lumx/react 3.0.7 → 3.1.0

package/storybook/main.js

@@ -0,0 +1,67 @@
+const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+const CONFIGS = require('../../../configs');
+const POSTCSS_CONFIG = require(path.resolve(__dirname, 'postcss.config.js'));
+const generateDemoStories = require('./generate-demo-stories');
+
+// Generate storybook stories from demo site demos.
+generateDemoStories();
+
+module.exports = {
+    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+    staticDirs: ['../../site-demo/static/'],
+    addons: [
+        '@storybook/addon-knobs',
+        '@storybook/addon-a11y',
+        '@storybook/addon-essentials',
+    ],
+    webpackFinal: async (config) => {
+        config.resolve.modules.push(
+            path.resolve(__dirname, 'node_modules')
+        );
+
+        config.module.rules.push(
+            /** SCSS Loader */
+            {
+                test: /\.s?css$/,
+                sideEffects: true,
+                loaders: [
+                    { loader: 'style-loader', options: { attributes: { id: 'injected-styles' } } },
+                    'css-loader',
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            postcssOptions: POSTCSS_CONFIG,
+                        },
+                    },
+                    'sass-loader',
+                ],
+            },
+
+            /** TS/TSX/JS/JSX babel loader. */
+            {
+                exclude: [/node_modules/u, /\.(test|spec)\.[t|j]sx?/u],
+                test: /\.[j|t]sx?$/u,
+                use: {
+                    loader: 'babel-loader',
+                    options: CONFIGS.babel,
+                },
+            },
+
+            /** File loader */
+            {
+                test: /\.(png|jpe?g|gif)$/i,
+                use: 'file-loader',
+            },
+        );
+
+        /** Resolve file extensions. */
+        config.resolve.extensions = [...config.resolve.extensions, '.ts', '.tsx', '.js', '.jsx'];
+
+        /** Resolve module aliases @lumx/XXX */
+        config.resolve.plugins = [new TsconfigPathsPlugin({ configFile: '../tsconfig.json' })];
+
+        return config;
+    },
+};

package/storybook/package.json

@@ -0,0 +1,13 @@
+{
+  "devDependencies": {
+    "@storybook/addon-a11y": "^6.4.5",
+    "@storybook/addon-essentials": "^6.4.5",
+    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/react": "^6.4.5"
+  },
+  "license": "MIT",
+  "scripts": {
+    "start": "start-storybook -c . -p 9000",
+    "build": "build-storybook -c ."
+  }
+}

package/storybook/preview.js

@@ -0,0 +1,11 @@
+import { withKnobs } from '@storybook/addon-knobs';
+import { withStoryBlockDecorator } from './story-block/decorator';
+
+export const parameters = {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+};
+
+export const decorators = [
+    withKnobs(),
+    withStoryBlockDecorator
+];

package/storybook/start

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+yarn install
+yarn start "$@"

package/storybook/story-block/StoryBlock.tsx

@@ -0,0 +1,49 @@
+import React, { ElementType, useState } from 'react';
+import classNames from 'classnames';
+import isChromatic from 'chromatic/isChromatic';
+import { Alignment, Switch, Theme } from '@lumx/react';
+import { MaterialThemeSwitcher } from '@lumx/react/utils/MaterialThemeSwitcher';
+
+import '@lumx/core/scss/lumx.scss';
+import './index.scss';
+
+import 'focus-visible';
+
+interface StoryBlockProps {
+    Story: ElementType;
+    context: any;
+}
+
+const CLASSNAME = 'story-block';
+
+export const StoryBlock: React.FC<StoryBlockProps> = (props) => {
+    const { Story, context } = props;
+
+    const [theme, setTheme] = useState<Theme>(Theme.light);
+    context.args.theme = theme;
+    const toggleTheme = () => setTheme(theme === Theme.light ? Theme.dark : Theme.light);
+
+    // Hard code today date for stable chromatic stories snapshots.
+    context.parameters.today = isChromatic() ? new Date('May 25 2021 01:00') : new Date();
+
+    if (isChromatic()) return <Story />;
+
+    return (
+        <div className={classNames(CLASSNAME, context.parameters.hasGreyBackground && `${CLASSNAME}--has-grey-background`, `${CLASSNAME}--theme-${theme}`)}>
+            <div className={`${CLASSNAME}__toolbar`}>
+                <Switch
+                    className="dark-theme-switcher"
+                    isChecked={theme === Theme.dark}
+                    onChange={toggleTheme}
+                    position={Alignment.right}
+                    theme={theme}
+                >
+                    Dark Background
+                </Switch>
+                <MaterialThemeSwitcher theme={theme} />
+            </div>
+
+            <Story />
+        </div>
+    );
+};

package/storybook/story-block/decorator.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { StoryBlock } from './StoryBlock';
+
+export const withStoryBlockDecorator = (Story, context) => {
+    return <StoryBlock Story={Story} context={context}/>;
+};

package/storybook/story-block/index.scss

@@ -0,0 +1,27 @@
+@import '~@lumx/core/src/scss/design-tokens';
+@import '~@lumx/core/src/scss/core';
+
+.story-block {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    padding: 1rem;
+
+    &--has-grey-background:not(&--theme-dark) {
+        background: lightgray;
+    }
+
+    &--theme-dark {
+        background: lumx-color-variant('dark', 'N');
+        color: lumx-color-variant('light', 'N');
+    }
+
+    &__toolbar {
+        display: flex;
+        margin-bottom: $lumx-spacing-unit-big;
+        gap: $lumx-spacing-unit-big;
+    }
+}