Storybook docs - Custom Story wrapper

CustomStoryWrapper.jsx

// @flow
/** @jsx jsx */
import * as React from 'react';
import {jsx} from '@emotion/core';

import {ThemeProvider} from 'emotion-theming';
import {Flexbox, Grid} from '../primitives';

import {darkTheme, lightTheme} from '../theme';


const storybookDocsBlock = {
  minHeight: '100vh',
  // KEY style declaration 
  // https://emotion.sh/docs/nested
  '#docs-root &': {
    minHeight: 'auto',
  },
};

export const CustomStoryWrapper = (props: StoryProps) => {
  const theme = props.theme === 'light' ? lightTheme : darkTheme;

  const {
    minWidth,
    children,
    gridTemplateColumns = props.gridTemplateColumns ||
      `repeat(${React.Children.count(children)}, auto)`,
    gridAutoFlow = 'column',
    gridAutoColumns = 'auto',
    gridAutoRows = 'auto',
    maxWidth = '800px',
    width = '100%',
    alignGridItems = 'center',
    color = 'text.default',
  } = props;

  return (
    <ThemeProvider theme={theme}>
      <Flexbox
        alignItems="center"
        justifyItems="center"
        justifyContent="center"
        padding="1em 1em 1em 0"
        backgroundColor="background.appInnerChrome"
        flexWrap={'wrap'}
        color={color}
        css={storybookDocsBlock}
      >
        <Grid
          justifyContent="center"
          gridGap={4}
          gridTemplateColumns={gridTemplateColumns}
          gridAutoFlow={gridAutoFlow}
          gridAutoRows={gridAutoRows}
          gridAutoColumns={gridAutoColumns}
          maxWidth={maxWidth}
          minWidth={minWidth}
          padding={2}
          width={width}
          alignItems={alignGridItems}
          {...props}
        >
          {children}
        </Grid>
      </Flexbox>
    </ThemeProvider>
  );
};