Merge pull request #757 from lumapps/chore/fix-storybook-injected-props

chore(storybook): fix dark theme switcher & chromatic date override

Author: gcornut

package.json

@@ -73,7 +73,7 @@
         "build:angularjs": "yarn workspace @lumx/angularjs build",
         "build:storybook": "yarn workspace @lumx/react build:storybook",
         "chromatic": "npx chromatic -b build:storybook",
-        "clean": "rm -rf packages/*/dist && lerna clean --yes && lerna run --stream clean",
+        "clean": "rm -rf packages/*/dist; lerna clean --yes && lerna run --stream clean",
         "clean:git-hooks": "yarn husky uninstall",
         "format": "yarn format:code && yarn format:style",
         "format:style": "prettier-stylelint --prettier-last --write packages/**/*.{css,scss}",

packages/lumx-react/src/stories/generated/List/Demos.stories.tsx

@@ -4,6 +4,7 @@
 export default { title: 'LumX components/list/List Demos' };
 
 export { App as Big } from './big';
+export { App as Clickable } from './clickable';
 export { App as Huge } from './huge';
 export { App as Paddings } from './paddings';
 export { App as Regular } from './regular';

packages/lumx-react/src/stories/generated/List/clickable.tsx

@@ -0,0 +1 @@
+../../../../../site-demo/content/product/components/list/react/clickable.tsx

packages/lumx-react/storybook/story-block/StoryBlock.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react';
+import React, { ElementType, useState } from 'react';
 import classNames from 'classnames';
 import isChromatic from 'chromatic/isChromatic';
 import { Alignment, Switch, Theme } from '@lumx/react';
@@ -10,21 +10,23 @@ import './index.scss';
 import 'focus-visible';
 
 interface StoryBlockProps {
-    children(p: { theme: Theme, today?: Date }): ReactElement;
+    Story: ElementType;
+    context: any;
 }
 
 const CLASSNAME = 'story-block';
 
 export const StoryBlock: React.FC<StoryBlockProps> = (props) => {
-    const { children } = 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);
 
-    if (isChromatic()) {
-        // Hard code today date for chromatic.
-        return children({ theme, today: new Date('May 25 2021 01:00') });
-    }
+    // Hard code today date for chromatic.
+    context.args.today = isChromatic() ? new Date('May 25 2021 01:00') : new Date();
+
+    if (isChromatic()) return <Story />;
 
     return (
         <div className={classNames(CLASSNAME, `${CLASSNAME}--theme-${theme}`)}>
@@ -41,7 +43,7 @@ export const StoryBlock: React.FC<StoryBlockProps> = (props) => {
                 <MaterialThemeSwitcher theme={theme} />
             </div>
 
-            {children({ theme, today: new Date() })}
+            <Story />
         </div>
     );
 };

packages/lumx-react/storybook/story-block/decorator.jsx

@@ -2,4 +2,6 @@ import React from 'react';
 
 import { StoryBlock } from './StoryBlock';
 
-export const withStoryBlockDecorator = (storyFn) => <StoryBlock>{storyFn}</StoryBlock>;
+export const withStoryBlockDecorator = (Story, context) => {
+    return <StoryBlock Story={Story} context={context}/>;
+};