feat: added theme, components for PageContainer

ccontrols · Apr 16, 2020 · ae6f7c1 · ae6f7c1
1 parent 9f2acfa
commit ae6f7c1
Show file tree

Hide file tree

Showing 36 changed files with 391 additions and 196 deletions.
diff --git a/examples/storybook-6-no-docs/.storybook/main.js b/examples/storybook-6-no-docs/.storybook/main.js
@@ -12,10 +12,11 @@ module.exports = {
     },  
   ],
   stories: [
-    //'../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
-    //'../../../ui/components/src/**/*.stories.(js|tsx|mdx)',
-    //'../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)',
-    '../../stories/src/stories/smart-controls.stories.mdx',
+    '../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
+    '../../../ui/components/src/**/*.stories.(js|tsx|mdx)',
+    '../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)',
+    '../../stories/src/**/*.stories.(js|tsx|mdx)',
+    '../stories/**/*.stories.(js|tsx|mdx)',
   ],
   webpackFinal: async (config, { configType }) => {
     return {

diff --git a/examples/storybook-6-no-docs/.storybook/preview.js b/examples/storybook-6-no-docs/.storybook/preview.js
@@ -1,37 +1,17 @@
 import React from 'react'
 import { addDecorator, addParameters } from '@storybook/react';
-import { ThemeProvider, BlockContextProvider } from '@component-controls/storybook';
-import { ControlsTable, Title, Subtitle, Story, Playground, Stories, Description, ComponentSource, PropsTable } from '@component-controls/blocks';
+import { ThemeProvider, useIsDark } from '@component-controls/storybook';
 
 addDecorator((story, ctx ) => {
+  const isDark = useIsDark();
   return (
-    <ThemeProvider>
+    <ThemeProvider dark={isDark}>
       {story(ctx)}
     </ThemeProvider>
   );
 })
-
-export const DocsPage = () => {
-  return (
-    <ThemeProvider>
-      <BlockContextProvider>
-        <Title />
-        <Subtitle />
-        <Description />
-        <ComponentSource id="." title='Component' />
-        <Playground openTab="source" title=".">
-          <Story id="." />
-        </Playground>  
-        <ControlsTable id="." />
-        <PropsTable of="." />
-        <Stories dark={true}/>
-      </BlockContextProvider>  
-    </ThemeProvider>  
-  );
-};
 const categories = ['Storybook', 'Blocks', 'Editors', 'Components']
 addParameters({
-  docs_xxx: { page: DocsPage },
   dependencies: { hideEmpty: true },
   options: {
     storySort: (a, b) => {

diff --git a/examples/storybook-6-no-docs/package.json b/examples/storybook-6-no-docs/package.json
@@ -16,7 +16,6 @@
     "@storybook/addon-docs": "next",
     "@storybook/addon-storysource": "next",
     "@storybook/react": "next",
-    "@storybook/theming": "next",
     "babel-loader": "^8.0.6",
     "babel-preset-react-app": "^9.0.0",
     "cross-env": "^5.2.0",

diff --git a/...es/src/stories/smart-controls.stories.mdx → ...o-docs/stories/smart-controls.stories.mdx b/...es/src/stories/smart-controls.stories.mdx → ...o-docs/stories/smart-controls.stories.mdx
@@ -1,9 +1,10 @@
-import { Meta, PropsTable, Playground, Story, BlockContextProvider, ControlsTable, ComponentSource, StorySource } from '@component-controls/storybook';
-import { Button } from '../components/Button';
-
+import { Meta} from '@component-controls/storybook';
+import { PropsTable, Playground, Story, ControlsTable, ComponentSource, StorySource  } from '@component-controls/blocks';
+import { Button } from '../../stories/src/components/Button';
 
 <Meta title="Storybook/MDX" parameters={{component: Button}} />
 
+
 # Smart controls
 <ComponentSource of={Button} title='Component source' />
 

diff --git a/examples/storybook-6/.storybook/main.js b/examples/storybook-6/.storybook/main.js
@@ -22,6 +22,7 @@ module.exports = {
     '../../../ui/components/src/**/*.stories.(js|tsx|mdx)',
     '../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)',
     '../../stories/src/**/*.stories.(js|tsx|mdx)',
+    '../stories/**/*.stories.(js|tsx|mdx)',
   ],
   addons: [
     '@storybook/addon-docs',

diff --git a/examples/storybook-6/.storybook/preview.js b/examples/storybook-6/.storybook/preview.js
@@ -1,37 +1,18 @@
 import React from 'react'
 import { addDecorator, addParameters } from '@storybook/react';
-import { ThemeProvider, BlockContextProvider } from '@component-controls/storybook';
-import { ControlsTable, Title, Subtitle, Story, Playground, Stories, Description, ComponentSource, PropsTable } from '@component-controls/blocks';
+import { ThemeProvider, useIsDark } from '@component-controls/storybook';
 
 addDecorator((story, ctx ) => {
+  const isDark = useIsDark();
   return (
-    <ThemeProvider>
+    <ThemeProvider dark={isDark}>
       {story(ctx)}
     </ThemeProvider>
   );
 })
 
-export const DocsPage = () => {
-  return (
-    <ThemeProvider>
-      <BlockContextProvider>
-        <Title />
-        <Subtitle />
-        <Description />
-        <ComponentSource id="." title='Component' />
-        <Playground openTab="source" title=".">
-          <Story id="." />
-        </Playground>  
-        <ControlsTable id="." />
-        <PropsTable of="." />
-        <Stories dark={true}/>
-      </BlockContextProvider>  
-    </ThemeProvider>  
-  );
-};
 const categories = ['Storybook', 'Blocks', 'Editors', 'Components']
 addParameters({
-  docs_xxx: { page: DocsPage },
   dependencies: { hideEmpty: true },
   options: {
     storySort: (a, b) => {

diff --git a/examples/storybook-6/package.json b/examples/storybook-6/package.json
@@ -16,7 +16,6 @@
     "@storybook/addon-docs": "next",
     "@storybook/addon-storysource": "next",
     "@storybook/react": "next",
-    "@storybook/theming": "next",
     "babel-loader": "^8.0.6",
     "babel-preset-react-app": "^9.0.0",
     "cross-env": "^5.2.0",

diff --git a/examples/storybook-6/stories/smart-controls.stories.mdx b/examples/storybook-6/stories/smart-controls.stories.mdx
@@ -0,0 +1,45 @@
+import { Meta, PropsTable, Playground as Preview, Story, BlockContextProvider, ControlsTable, ComponentSource, StorySource } from '@component-controls/storybook';
+import { Button } from '../../stories/src/components/Button';
+
+<Meta title="Storybook/MDX" parameters={{component: Button}} />
+
+
+# Smart controls
+<ComponentSource of={Button} title='Component source' />
+
+<PropsTable of={Button} />
+
+
+<Preview>
+  <Story name="smart story">
+    {(props) => (
+      <Button label="default" {...props}/>
+    )}  
+  </Story>
+</Preview>
+
+
+# Small story with custom controls
+
+<Preview>
+  <Story name="small story" 
+    controls={{
+      text: {type: 'text', value: 'Hello'},
+    }}
+    >
+    {({ text }) => (
+      <Button label={text}/>
+    )}  
+  </Story>
+</Preview>
+
+
+<ControlsTable name="small story" />
+# Story with no parameters == no smart controls
+
+<Preview>
+  <Story name="no controls">
+      <Button label="Hello"/>
+      <Button label="Second button"/>
+  </Story>
+</Preview>
diff --git a/integrations/storybook/README.md b/integrations/storybook/README.md
@@ -1,7 +1,3 @@
-```diff
-- WARNING - THIS ADDON CAN NOT YET BE USED AS SOME OF THE STORYBOOK FEATURES IT REQUIRES ARE NOT YET MERGED
-```
-
 ## Table of contents
 
   * [Storybook](#storybook)
@@ -32,7 +28,7 @@
 
 ## Storybook
 
-The Storybook integration of the component-controls (aka "Addon Controls") allows you to define and then edit story properties dynamically in the [Storybook](https://storybook.js.org) UI with a set of property editors. 
+The Storybook integration of component-controls allows you to define and then edit story properties dynamically in the [Storybook](https://storybook.js.org) UI with a set of property editors. 
 
 
 The definitions of the control properties can be found [here](https://github.com/ccontrols/component-controls/blob/master/core/specification/src/types.ts): 

diff --git a/integrations/storybook/package.json b/integrations/storybook/package.json
@@ -51,7 +51,6 @@
     "@storybook/api": "next",
     "@storybook/client-api": "next",
     "@storybook/react": "next",
-    "@storybook/theming": "next",
     "@types/node": "^13.7.0",
     "babel-loader": "^8.0.6",
     "babel-preset-react-app": "^9.0.0"
@@ -62,7 +61,6 @@
     "@storybook/api": "*",
     "@storybook/client-api": "*",
     "@storybook/react": "*",
-    "@storybook/theming": "*",
     "polished": "*",
     "react": "*"
   },

diff --git a/integrations/storybook/src/blocks/ControlsTable.tsx b/integrations/storybook/src/blocks/ControlsTable.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import {
-  ControlsTable as BaseControlsTable,
+  ControlsTable as BlockControlsTable,
   ControlsTableProps,
   useStoryContext,
 } from '@component-controls/blocks';
@@ -24,7 +24,7 @@ export const ControlsTable: FC<ControlsTableProps> = ({
 
   return id ? (
     <ThemeProvider>
-      <BaseControlsTable id={id} {...rest} />
+      <BlockControlsTable id={id} {...rest} />
     </ThemeProvider>
   ) : null;
 };
diff --git a/integrations/storybook/src/context/ThemeProvider.tsx b/integrations/storybook/src/context/ThemeProvider.tsx
@@ -1,15 +1,13 @@
 import React from 'react';
-import { getLuminance } from 'polished';
-import { ThemeContext, Theme } from '@storybook/theming';
 import { ThemeProvider as ThemeUIProvider } from '@component-controls/components';
+import { BlockContextProvider } from './BlockContext';
+import { useIsDark } from './useIsDark';
 
 export const ThemeProvider: React.FC = ({ children }) => {
-  const { background: { content = '#ffffff' } = {} } = React.useContext<Theme>(
-    ThemeContext as any,
-  );
+  const isDark = useIsDark();
   return (
-    <ThemeUIProvider dark={getLuminance(content) < 0.5}>
-      {children}
+    <ThemeUIProvider dark={isDark}>
+      <BlockContextProvider>{children}</BlockContextProvider>
     </ThemeUIProvider>
   );
 };
diff --git a/integrations/storybook/src/context/index.ts b/integrations/storybook/src/context/index.ts
@@ -1,2 +1,3 @@
 export * from './BlockContext';
 export * from './ThemeProvider';
+export * from './useIsDark';
diff --git a/integrations/storybook/src/context/useIsDark.tsx b/integrations/storybook/src/context/useIsDark.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+export const useIsDark = (): boolean => {
+  const [isDark, setIsDark] = React.useState(prefersDark.matches);
+  React.useEffect(() => {
+    //inspired from: https://github.com/hipstersmoothie/storybook-dark-mode/blob/46476b4e96a5b310f13e7dccc69e2baa5e477814/src/Tool.tsx#L111
+    const prefersDarkUpdate = (event: MediaQueryListEvent) => {
+      setIsDark(event.matches);
+    };
+    prefersDark.addListener(prefersDarkUpdate);
+
+    return () => {
+      prefersDark.removeListener(prefersDarkUpdate);
+    };
+  });
+  return isDark;
+};
diff --git a/integrations/storybook/src/page/PageContainer.tsx b/integrations/storybook/src/page/PageContainer.tsx
@@ -1,12 +1,11 @@
 import React, { FC } from 'react';
-import { getLuminance } from 'polished';
-import { ThemeContext, Theme } from '@storybook/theming';
 import { addons } from '@storybook/addons';
 import { STORY_CHANGED } from '@storybook/core-events';
 import {
   PageContainer as BlockPageContainer,
   PageContainerProps,
 } from '@component-controls/blocks';
+import { useIsDark } from '../context/useIsDark';
 
 export const PageContextContainer: FC<PageContainerProps> = ({
   children,
@@ -15,10 +14,8 @@ export const PageContextContainer: FC<PageContainerProps> = ({
   const [storyId, setStoryId] = React.useState<string | undefined>(
     defaultStoryId,
   );
+  const isDark = useIsDark();
   const channel = React.useMemo(() => addons.getChannel(), []);
-  const { background: { content = '#ffffff' } = {} } = React.useContext<Theme>(
-    ThemeContext as any,
-  );
 
   React.useEffect(() => {
     const onStoryChange = (id: string) => {
@@ -31,7 +28,7 @@ export const PageContextContainer: FC<PageContainerProps> = ({
     };
   }, []);
   return (
-    <BlockPageContainer dark={getLuminance(content) < 0.5} storyId={storyId}>
+    <BlockPageContainer dark={isDark} storyId={storyId}>
       {children}
     </BlockPageContainer>
   );

diff --git a/ui/blocks/package.json b/ui/blocks/package.json
@@ -35,6 +35,7 @@
     "@component-controls/editors": "^0.6.0",
     "@component-controls/specification": "^0.6.0",
     "@component-controls/store": "^0.6.0",
+    "@mdx-js/react": "^1.5.8",
     "@storybook/csf": "^0.0.1",
     "copy-to-clipboard": "^3.2.1",
     "global": "^4.3.2",
@@ -47,7 +48,9 @@
     "theme-ui": "^0.3.1"
   },
   "devDependencies": {
+    "@theme-ui/presets": "^0.3.0",
     "@types/jest": "^25.1.2",
+    "@types/mdx-js__react":"^1.5.1",
     "@types/theme-ui": "^0.3.0",
     "@types/qs": "^6.9.1",
     "cross-env": "^5.2.1",

diff --git a/ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx b/ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx
@@ -33,10 +33,9 @@ export const StoryBlockContainer: FC<StoryBlockContainerProps> = ({
     id,
     name,
   });
-  const { component, kind, story } = context;
+  const { story } = context;
   const title = getStoryBlockTitle({
-    kind,
-    component,
+    story,
     title: userTitle,
   });
   const block = children(context, rest);

diff --git a/ui/blocks/src/ComponentSource/ComponentSource.tsx b/ui/blocks/src/ComponentSource/ComponentSource.tsx
@@ -51,7 +51,7 @@ export const ComponentSource: FC<ComponentSourceProps> = ({
 
         if (component && component.source) {
           allActions.push({
-            title: showFileSource ? 'import' : 'component',
+            title: showFileSource ? 'import' : 'source',
             onClick: onShowFileSource,
           });
         }