feat: pass dark mode to theme contex

examples/storybook-5/.storybook/main.js

@@ -25,6 +25,7 @@ module.exports = {
   ],
   addons: [
     '@storybook/addon-docs',
+    'storybook-dark-mode',
     'storybook-addon-deps',
   ],
   webpackFinal: async (config, { configType }) => {

integrations/storybook/package.json

@@ -34,14 +34,14 @@
   "license": "MIT",
   "dependencies": {
     "@component-controls/block-components": "^0.6.0",
+    "@component-controls/blocks": "^0.6.0",
     "@component-controls/components": "^0.6.0",
     "@component-controls/editors": "^0.6.0",
     "@component-controls/loader": "^0.6.0",
     "@component-controls/specification": "^0.6.0",
-    "@theme-ui/presets": "^0.3.0",
-    "@theme-ui/prism": "^0.3.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
+    "polished": "^3.4.4",
     "react": "^16.12.0",
     "typescript": "^3.7.5"
   },
@@ -65,6 +65,7 @@
     "@storybook/csf": "*",
     "@storybook/react": "*",
     "@storybook/theming": "*",
+    "polished": "*",
     "react": "*"
   },
   "publishConfig": {

integrations/storybook/src/blocks/BlockContext.tsx

@@ -1,26 +1,7 @@
 import React from 'react';
 import { toId, storyNameFromExport } from '@storybook/csf';
-import myStoryStore from '@component-controls/loader/story-store-data';
-import {
-  Story,
-  StoryArguments,
-  StoryComponent,
-} from '@component-controls/specification';
-import { LoadedComponentControls } from '@component-controls/core';
-import { CURRENT_SELECTION, DocsContext } from '@storybook/addon-docs/blocks';
-
-export interface BlockContextProps {
-  api?: any;
-  channel: any;
-  currentId?: string;
-  storyStore: any;
-  storyIdFromName: (name?: string) => string | undefined;
-}
-export const BlockContext = React.createContext<BlockContextProps>({
-  channel: {},
-  storyStore: {},
-  storyIdFromName: name => name,
-});
+import { BlockContext } from '@component-controls/blocks';
+import { DocsContext } from '@storybook/addon-docs/blocks';
 
 export const BlockContextProvider: React.FC = ({ children }) => {
   const context = React.useContext(DocsContext);
@@ -58,60 +39,3 @@ export const BlockContextProvider: React.FC = ({ children }) => {
     </BlockContext.Provider>
   );
 };
-
-export interface ControlsContextInputProps {
-  /** id of the story */
-  id?: string;
-  /** name of the story */
-  name?: string;
-}
-
-export interface ControlsContextProps {
-  api?: any;
-  channel?: any;
-  controls?: LoadedComponentControls;
-  args?: StoryArguments;
-  story?: any;
-  id?: string;
-  source?: string;
-  fileSource?: string;
-  component?: StoryComponent;
-}
-
-export const useControlsContext = ({
-  id,
-  name,
-}: ControlsContextInputProps): ControlsContextProps => {
-  const {
-    currentId,
-    storyStore,
-    storyIdFromName,
-    api,
-    channel,
-  } = React.useContext(BlockContext);
-  const inputId = id === CURRENT_SELECTION ? currentId : id;
-  const previewId = inputId || storyIdFromName(name);
-  if (!previewId) {
-    return {
-      api,
-      channel,
-    };
-  }
-  const story = storyStore.fromId(previewId) || {};
-  // console.log(myStoryStore);
-  const myStory: Story = myStoryStore && myStoryStore.stories[previewId];
-  const kindTitle = myStory.kind;
-  const kind = kindTitle ? myStoryStore.kinds[kindTitle] : undefined;
-  const source: string | undefined = myStory ? myStory.source : undefined;
-  return {
-    id: previewId,
-    api,
-    channel,
-    story,
-    source,
-    fileSource: kind ? kind.source : undefined,
-    component: kind ? kind.component : undefined,
-    args: myStory.arguments,
-    controls: story.controls || story.parameters.controls,
-  };
-};

integrations/storybook/src/blocks/ControlsTable.tsx

@@ -6,8 +6,12 @@ import {
   ComponentControlButton,
 } from '@component-controls/specification';
 import { mergeControlValues } from '@component-controls/core';
-import { useControlsContext, ControlsContextInputProps } from './BlockContext';
-import { SharedControlsTable } from '../shared/ControlsTable';
+import {
+  ControlsTable as SharedControlsTable,
+  useControlsContext,
+  ControlsContextInputProps,
+} from '@component-controls/blocks';
+
 import { SET_DATA_MSG } from '../shared/shared';
 import { ThemeProvider } from '../shared/ThemeProvider';
 export type ControlsTableProps = ControlsContextInputProps & {

integrations/storybook/src/blocks/ImportSource.tsx

@@ -1,23 +1,14 @@
 import React, { FC } from 'react';
-import { Source as SourceBlock } from '@component-controls/block-components';
-import { useControlsContext, ControlsContextInputProps } from './BlockContext';
+import {
+  ImportSource as BaseImportSource,
+  ImportSourceProps,
+} from '@component-controls/blocks';
 import { ThemeProvider } from '../shared/ThemeProvider';
 
-export type SourceProps = ControlsContextInputProps & {
-  /** a title to display */
-  title?: string;
-};
-
-export const ImportSource: FC<SourceProps> = ({ id, name }) => {
-  const { component } = useControlsContext({
-    id,
-    name,
-  });
+export const ImportSource: FC<ImportSourceProps> = props => {
   return (
     <ThemeProvider>
-      <SourceBlock>
-        {component && component.import ? component.import : ''}
-      </SourceBlock>
+      <BaseImportSource {...props} />
     </ThemeProvider>
   );
 };

integrations/storybook/src/blocks/Source.tsx

@@ -1,23 +1,14 @@
 import React, { FC } from 'react';
-import { StorySource as SourceBlock } from '@component-controls/block-components';
-import { useControlsContext, ControlsContextInputProps } from './BlockContext';
+import {
+  StorySource as BaseStorySource,
+  StorySourceProps,
+} from '@component-controls/blocks';
 import { ThemeProvider } from '../shared/ThemeProvider';
 
-export type SourceProps = ControlsContextInputProps & {
-  /** a title to display */
-  title?: string;
-};
-
-export const Source: FC<SourceProps> = ({ id, name }) => {
-  const { source, controls, args, fileSource } = useControlsContext({
-    id,
-    name,
-  });
+export const Source: FC<StorySourceProps> = props => {
   return (
     <ThemeProvider>
-      <SourceBlock controls={controls} args={args} fileSource={fileSource}>
-        {source}
-      </SourceBlock>
+      <BaseStorySource {...props} />
     </ThemeProvider>
   );
 };

integrations/storybook/src/blocks/index.ts

@@ -1,4 +1,4 @@
 export { ControlsTable, ControlsTableProps } from './ControlsTable';
-export { Source, SourceProps } from './Source';
+export { Source } from './Source';
 export { ImportSource } from './ImportSource';
-export { BlockContextProvider, BlockContext } from './BlockContext';
+export { BlockContextProvider } from './BlockContext';

integrations/storybook/src/manager/Panel.tsx

@@ -8,12 +8,12 @@ import {
 import { SetControlValueFn } from '@component-controls/specification';
 import { SET_STORIES } from '@storybook/core-events';
 import { API } from '@storybook/api';
+import { ControlsTable as SharedControlsTable } from '@component-controls/blocks';
 import {
   SET_DATA_MSG,
   SYNC_SMART_STORIES,
   GET_ALL_STORIES,
 } from '../shared/shared';
-import { SharedControlsTable } from '../shared/ControlsTable';
 import { ThemeProvider } from '../shared/ThemeProvider';
 import { NoControls } from './NoControls';
 

integrations/storybook/src/preview/PreviewPanel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SharedControlsTable } from '../shared/ControlsTable';
+import { ControlsTable as SharedControlsTable } from '@component-controls/blocks';
 
 export const createControlsPanel = ({
   storyId,

integrations/storybook/src/shared/ThemeProvider.tsx

@@ -1,54 +1,15 @@
 import React from 'react';
-import { polaris as theme } from '@theme-ui/presets';
-import prismTheme from '@theme-ui/prism/presets/dracula.json';
-import { ThemeProvider as ThemeUIProvider } from 'theme-ui';
-import { lighten } from 'polished';
+import { getLuminance } from 'polished';
+import { ThemeContext, Theme } from '@storybook/theming';
+import { ThemeProvider as ThemeUIProvider } from '@component-controls/blocks';
 
-export const ThemeProvider: React.FC = ({ children }) => (
-  <ThemeUIProvider
-    theme={{
-      ...theme,
-
-      styles: {
-        ...theme.styles,
-        code: {
-          ...prismTheme,
-        },
-        table: {
-          margin: 0,
-          borderCollapse: 'collapse',
-          fontSize: '14px',
-          lineHeight: '20px',
-          textAlign: 'left',
-          width: '100%',
-          borderSpacing: '0px',
-        },
-        td: {
-          padding: '16px 20px',
-        },
-        tr: {
-          borderTop: '1px solid rgba(0, 0, 0, 0.1)',
-        },
-      },
-      buttons: {
-        primary: {
-          color: '#333',
-          bg: '#f3f3f3',
-          borderRadius: 5,
-          boxShadow: 'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset',
-        },
-        secondary: {
-          bg: 'highlight',
-        },
-      },
-      colors: {
-        ...theme.colors,
-        accent: '#1EA7FD',
-        fadedText: lighten(0.25, theme.colors.text),
-        lightenPrimary: '#F6F9FC',
-      },
-    }}
-  >
-    {children}
-  </ThemeUIProvider>
-);
+export const ThemeProvider: React.FC = ({ children }) => {
+  const { background: { content = '#ffffff' } = {} } = React.useContext<Theme>(
+    ThemeContext as any,
+  );
+  return (
+    <ThemeUIProvider dark={getLuminance(content) < 0.5}>
+      {children}
+    </ThemeUIProvider>
+  );
+};

integrations/storybook/src/typings.d.ts

@@ -1,4 +1,3 @@
 declare module 'global';
 declare module '@storybook/addon-docs/blocks';
-declare module '@theme-ui/presets';
 declare module '@component-controls/loader/story-store-data';

ui/block-components/src/Source/Source.tsx

@@ -56,7 +56,6 @@ export const Source: FC<SourceProps> = ({
   dark = false,
 }) => {
   const [copied, setCopied] = React.useState(false);
-
   const onCopy = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     setCopied(true);