@lumx/react 3.1.1 → 3.1.3-alpha.0

package/storybook/generate-demo-stories.js

@@ -1,59 +0,0 @@
-const path = require('path');
-const glob = require('glob');
-const fs = require('fs');
-const lodash = require('lodash');
-
-const generateStory = (component, storyFiles) => `/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/${lodash.kebabCase(component)}/${component} Demos' };
-
-${storyFiles
-    .map((storyFile) => {
-        const fileNameWithoutExtension = path.basename(storyFile.replace(/\.\w+$/, ''));
-        const storyName = lodash.startCase(fileNameWithoutExtension).replace(/ /g, '');
-        const storyPath = `./${fileNameWithoutExtension}`;
-        return `export { App as ${storyName} } from '${storyPath}';`;
-    })
-    .join('\n')}
-`;
-
-// Generate site demo component demo as stories.
-function generateDemoStories() {
-    // Base path for generated stories.
-    const basePath = path.join(__dirname, '..', 'src', 'stories', 'generated');
-    // Reset directory.
-    try {
-        fs.rmdirSync(basePath, { recursive: true });
-        fs.mkdirSync(basePath, { recursive: true });
-    } catch (e) {}
-
-    const generatedStoriesFiles = [];
-    const componentDemos = glob.sync(
-        path.join(__dirname, '..', '..', 'site-demo', 'content', 'product', 'components', '*'),
-    );
-    for (const componentDemo of componentDemos) {
-        const demoFiles = glob.sync(path.join(componentDemo, 'react', '*.tsx'));
-        if (demoFiles.length === 0) continue;
-
-        const component = lodash.startCase(path.basename(componentDemo)).replace(/ /g, '');
-        const componentDemoDir = path.join(basePath, component);
-        fs.mkdirSync(componentDemoDir);
-
-        const storyFiles = demoFiles.map((demoFile) => {
-            const storyFile = path.join(componentDemoDir, path.basename(demoFile));
-            fs.symlinkSync(path.relative(path.dirname(storyFile), demoFile), storyFile);
-            return storyFile;
-        });
-
-        const story = generateStory(component, storyFiles);
-
-        const generatedDemoStoryFile = path.join(componentDemoDir, `Demos.stories.tsx`);
-        fs.writeFileSync(generatedDemoStoryFile, story);
-
-        generatedStoriesFiles.push(generatedDemoStoryFile);
-    }
-    return generatedStoriesFiles;
-}
-
-module.exports = generateDemoStories;

package/storybook/main.js

@@ -1,67 +0,0 @@
-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

@@ -1,13 +0,0 @@
-{
-  "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

@@ -1,11 +0,0 @@
-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

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

package/storybook/story-block/StoryBlock.tsx

@@ -1,49 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,27 +0,0 @@
-@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;
-    }
-}