Export Layout & Block as separate styled Components

Author: usulpro

dev/register.js

@@ -1,29 +1,36 @@
 import React from 'react';
+import { styled } from '@storybook/theming';
 import { register } from '../src/register';
+import { Layout, Block } from '../src/Layout';
 import './config';
 
-const blockStyle = {
-  margin: 2,
-  padding: 4,
-  border: '2px solid gray',
-};
+
+const LayoutBlock = styled(Layout)`
+  padding: 0px;
+  border: red 1px solid;
+  label: layout-with-styles;
+`
+
+const AddonBlock = styled(Block)`
+  margin: 2px;
+  padding: 4px;
+  border: 2px solid gray;
+  font-size: 14px;
+  background-color: pink;
+  label: block-with-styles;
+`
 
 const AddonPanel = ({
   api,
   data,
-  setData,
   kind,
-  story,
-  rect,
-  Layout,
-  Block,
   indInc,
   indDec,
   update,
 }) => {
   return (
-    <Layout style={{ padding: 0 }}>
-      <Block style={{ ...blockStyle, minWidth: 50 }} size={200}>
+    <LayoutBlock style={{ padding: 0 }}>
+      <AddonBlock size={200}>
         kind: {kind}
         <br />
         <button onClick={() => indInc()}> + </button>
@@ -32,15 +39,15 @@ const AddonPanel = ({
         <button onClick={() => update({ themes: ['T1', 'T2', 'T3'] })}>
           Update
         </button>
-      </Block>
+      </AddonBlock>
       {/* <Block style={blockStyle}>
         <small>{JSON.stringify(api.getCurrentStoryData())}</small>
       </Block> */}
-      <Block style={blockStyle}>
+      <AddonBlock>
         channel store data: <br /> ({JSON.stringify(data)})
-      </Block>
+      </AddonBlock>
       {/* <Block style={blockStyle}>data ({JSON.stringify(rect, null, 2)})</Block> */}
-    </Layout>
+    </LayoutBlock>
   );
 };
 

src/Layout.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Rect from '@reach/rect';
-import { styled, css } from '@storybook/theming';
+import { styled, cx, css } from '@storybook/theming';
 
 const layout = React.createContext({});
 
@@ -14,7 +14,7 @@ const panelDimensions = rect =>
     : {};
 
 const AddonHolder = styled('div')`
-  height: 100;
+  height: 100%;
   label: addon-holder;
 `;
 
@@ -31,7 +31,21 @@ export const LayoutProvider = ({ children }) => (
   </Rect>
 );
 
-const StyledLayout = styled('div')`
+
+const StyledOverridden = ({
+  className,
+  overrides,
+  children,
+  isLandscape,
+  size,
+  ...props
+}) => (
+  <div className={`${className} ${overrides}`} {...props}>
+    {children}
+  </div>
+);
+
+const StyledLayout = styled(StyledOverridden)`
   display: flex;
   flex-direction: ${({ isLandscape }) => (isLandscape ? 'row' : 'column')};
   justify-content: space-between;
@@ -40,30 +54,28 @@ const StyledLayout = styled('div')`
   label: addon-layout;
 `;
 
-export const Layout = ({ children }) => (
+export const Layout = ({ className, children }) => (
   <layout.Consumer>
     {({ isLandscape }) => (
-      <StyledLayout isLandscape={isLandscape}>{children}</StyledLayout>
+      <StyledLayout isLandscape={isLandscape} overrides={className}>{children}</StyledLayout>
     )}
   </layout.Consumer>
 );
 
-const StyledBlock = styled.div(({ isLandscape, size }) => ({
-  flexGrow: 1,
-  ...(size
-    ? {
-        ...(isLandscape ? { width: size } : { height: size }),
-        flexGrow: undefined,
-      }
-    : {
-        ...(isLandscape ? { width: 2 } : { height: 2 }),
-      }),
-}));
 
-export const Block = ({ size, children }) => (
+const px = v => `${v}px`;
+
+const StyledBlock = styled(StyledOverridden)`
+  ${({ isLandscape }) => (isLandscape ? 'width' : 'height')}: ${({ size }) =>
+    size ? px(size) : '2px'};
+  ${({ size }) => (size ? '' : 'flex-grow: 1;')}
+  label: addon-block;
+`;
+
+export const Block = ({ size, children, className }) => (
   <layout.Consumer>
     {({ isLandscape }) => (
-      <StyledBlock size={size} isLandscape={isLandscape}>
+      <StyledBlock size={size} isLandscape={isLandscape} overrides={className}>
         {children}
       </StyledBlock>
     )}

src/register.js

@@ -3,10 +3,9 @@ import addons, { types as addonTypes } from '@storybook/addons';
 import { STORY_CHANGED } from '@storybook/core-events';
 import Rect from '@reach/rect';
 
-import {
-  getConfig,
-} from './config';
+import { getConfig } from './config';
 import withChannel from './withChannel';
+import { LayoutProvider } from './Layout';
 
 // todo: remove
 const panelDimesions = rect =>
@@ -76,7 +75,7 @@ class PanelHOC extends React.Component {
   render() {
     const Panel = this.props.component;
     const { api, active, data, setData, config } = this.props;
-    const {ADDON_ID, PANEL_ID, PANEL_Title} = config;
+    const { ADDON_ID, PANEL_ID, PANEL_Title } = config;
     const { kind, story } = this.state;
 
     if (!active) return null;
@@ -89,22 +88,24 @@ class PanelHOC extends React.Component {
           const Block = addonBlock(dim.isLandscape);
           return (
             <div ref={ref} name="addon-holder" style={{ height: '100%' }}>
-              <Panel
-                {...this.props.actions}
-                {...this.props.selectors}
-                api={api}
-                active={active}
-                data={data}
-                setData={setData}
-                kind={kind}
-                story={story}
-                ADDON_ID={ADDON_ID}
-                PANEL_ID={PANEL_ID}
-                PANEL_Title={PANEL_Title}
-                rect={dim}
-                Layout={Layout}
-                Block={Block}
-              />
+              <LayoutProvider>
+                <Panel
+                  {...this.props.actions}
+                  {...this.props.selectors}
+                  api={api}
+                  active={active}
+                  data={data}
+                  setData={setData}
+                  kind={kind}
+                  story={story}
+                  ADDON_ID={ADDON_ID}
+                  PANEL_ID={PANEL_ID}
+                  PANEL_Title={PANEL_Title}
+                  rect={dim}
+                  Layout={Layout}
+                  Block={Block}
+                />
+              </LayoutProvider>
             </div>
           );
         }}
@@ -113,7 +114,10 @@ class PanelHOC extends React.Component {
   }
 }
 
-export const register = (storeSelectors, createActions) => (Panel, { type = addonTypes.PANEL, initData } = {}) => {
+export const register = (storeSelectors, createActions) => (
+  Panel,
+  { type = addonTypes.PANEL, initData } = {}
+) => {
   const config = getConfig();
   const {
     EVENT_ID_INIT,

yarn.lock

@@ -1678,7 +1678,7 @@
     memoizerific "^1.11.3"
     qs "^6.5.2"
 
-"@storybook/[email protected]":
+"@storybook/[email protected]", "@storybook/theming@^5.0.11":
   version "5.0.11"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.0.11.tgz#46e243c36324676c36393c01695bdbd6369e79b4"
   integrity sha512-zZoMFirkdGYd4M6HupNYn713GesA/kx0nbhPfyatwnwRV9/LrG7KwkMjVDMrSHRdZei7z1KF7yFhleAOKb8RaQ==