[new-ui] Panels & themes (#1157)

* add storybook
* add wip stories
* prettier
* build-demo
* coverage
* ignore all new-components
* snaps, nav blocks, layout blocks, contain layout
* auto take snaps
* Update babel.config.js
* NOT PINK

Co-authored-by: Rikki Schulte <rikki.schulte@gmail.com>

babel.config.js

@@ -3,28 +3,30 @@
 const envConfig = {
   ignoreBrowserslistConfig: true,
   modules: 'commonjs',
-  targets: { node: true }
+  targets: { node: true },
 };
 
 if (process.env.ESM) {
-  envConfig.modules = false
+  envConfig.modules = false;
 }
 
 if (process.env.CDN) {
-  envConfig.modules = 'umd'
-  envConfig.targets = null
-  envConfig.ignoreBrowserslistConfig = false
+  envConfig.modules = 'umd';
+  envConfig.targets = null;
+  envConfig.ignoreBrowserslistConfig = false;
 }
 
 module.exports = {
   presets: [
-    [
-      require.resolve('@babel/preset-env'),
-      envConfig,
-    ],
+    [require.resolve('@babel/preset-env'), envConfig],
     require.resolve('@babel/preset-flow'),
     require.resolve('@babel/preset-react'),
   ],
+  env: {
+    test: {
+      plugins: [require.resolve('babel-plugin-macros')],
+    },
+  },
   plugins: [
     require.resolve('@babel/plugin-proposal-class-properties'),
     require.resolve('@babel/plugin-syntax-dynamic-import'),

jest.config.js

@@ -30,7 +30,7 @@ module.exports = {
   collectCoverageFrom: [
     '**/src/**/*.{js,jsx,ts,tsx}',
     '!**/src/**/*.stories.js*',
-    '!**/new-components/theme/default.js*',
+    '!**/new-components/themes/**/index.js*',
     '!**/new-components/**', // TODO: add proper coverage to new components
     '!**/{dist,esm}/**',
     '!**/node_modules/**',

packages/graphiql/.storybook/config.js

@@ -1,10 +1,11 @@
 import { configure, addDecorator } from '@storybook/react';
-import ThemeProvider from '../src/new-components/theme/ThemeProvider';
+import ThemeProvider from '../src/new-components/themes/provider';
 import React from 'react';
+import requireContext from 'require-context.macro';
 
 addDecorator(story => <ThemeProvider>{story()}</ThemeProvider>);
 
 configure(
-  require.context('../src/new-components', true, /\.stories\.js$/),
+  requireContext('../src/new-components', true, /\.stories\.js$/),
   module,
 );

packages/graphiql/package.json

@@ -60,7 +60,9 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
+    "@storybook/addon-storyshots": "^5.2.8",
     "@storybook/react": "^5.2.8",
+    "babel-plugin-macros": "^2.8.0",
     "@testing-library/jest-dom": "4.2.4",
     "@testing-library/react": "9.4.0",
     "cross-env": "^6.0.3",
@@ -82,6 +84,7 @@
     "react-dom": "^16.12.0",
     "react-hot-loader": "^4.12.18",
     "react-test-renderer": "^16.12.0",
+    "require-context.macro": "^1.2.2",
     "rimraf": "^3.0.0",
     "serve": "^11.2.0",
     "start-server-and-test": "^1.10.6",

packages/graphiql/src/new-components/Layout.stories.js

@@ -1,9 +1,112 @@
 import React from 'react';
-import Layout from './Layout';
 import Nav from './Nav';
+import List, { ListRow } from './List';
+import { useThemeLayout } from './themes/provider';
+
+const explorer = {
+  input: (
+    <List>
+      <ListRow>{'Input'}</ListRow>
+    </List>
+  ),
+  response: (
+    <List>
+      <ListRow>{'Response'}</ListRow>
+    </List>
+  ),
+  console: (
+    <List>
+      <ListRow>{'Console/Inspector'}</ListRow>
+    </List>
+  ),
+};
+const nav = <Nav />;
+const slots = { nav, explorer };
 
 export default { title: 'Layout' };
 
-export const withDefaultSlots = () => <Layout />;
+export const withSlots = () => {
+  const Layout = useThemeLayout();
+  return <Layout {...slots} />;
+};
+
+export const withManySidebars = () => {
+  const Layout = useThemeLayout();
+  return (
+    <Layout
+      {...slots}
+      navPanels={[
+        {
+          key: 1,
+          size: 'sidebar',
+          component: (
+            <List>
+              <ListRow>{'Sidebar'}</ListRow>
+            </List>
+          ),
+        },
+        {
+          key: 2,
+          size: 'aside',
+          component: (
+            <List>
+              <ListRow>{'aside'}</ListRow>
+            </List>
+          ),
+        },
+        {
+          key: 3,
+          size: 'aside',
+          component: (
+            <List>
+              <ListRow>{'Another aside'}</ListRow>
+            </List>
+          ),
+        },
+      ]}
+    />
+  );
+};
+
+export const withFullScreenPanel = () => {
+  const Layout = useThemeLayout();
+  return (
+    <Layout
+      {...slots}
+      navPanels={[
+        {
+          key: 1,
+          size: 'full-screen',
+          component: (
+            <List>
+              <ListRow>{'Woooo'}</ListRow>
+            </List>
+          ),
+        },
+      ]}
+    />
+  );
+};
 
-export const withCustomSlots = () => <Layout nav={<Nav />} />;
+export const withStringsOnly = () => {
+  const Layout = useThemeLayout();
+  return (
+    <Layout
+      {...{
+        explorer: {
+          input: 'input',
+          response: 'response',
+          console: 'console',
+        },
+        nav: 'nav',
+        navPanels: [
+          {
+            component: 'sidebar',
+            key: 'sidebar',
+            size: 'sidebar',
+          },
+        ],
+      }}
+    />
+  );
+};

packages/graphiql/src/new-components/List.js

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+
+import PropTypes from 'prop-types';
+
+const ListRow = ({ children, flex = false, padding = true }) => (
+  <div
+    sx={{
+      overflow: 'auto',
+      flex: flex && '1 1 auto',
+      padding: padding && 2,
+    }}>
+    {children}
+  </div>
+);
+ListRow.propTypes = {
+  flex: PropTypes.bool,
+  padding: PropTypes.bool,
+};
+
+const List = ({ children }) => (
+  <div
+    sx={{
+      backgroundColor: 'cardBackground',
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      '> *:not(:first-of-type)': {
+        borderTop: theme => `1px solid ${theme.colors.border}`,
+      },
+      '> *': {
+        flex: '0 0 auto',
+      },
+    }}>
+    {children}
+  </div>
+);
+
+List.propTypes = {
+  mini: PropTypes.bool,
+};
+
+export default List;
+export { ListRow };

packages/graphiql/src/new-components/List.stories.js

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import List, { ListRow } from './List';
+
+export default { title: 'Lists' };
+
+const longText = Array(300)
+  .fill('scroll')
+  .map((c, i) => <div key={i}>{c}</div>);
+
+export const withFlexChild = () => (
+  <div style={{ height: '100vh', display: 'grid' }}>
+    <List>
+      <ListRow>
+        {
+          'Lists are a vertical stack of components and form the basis of most modules. This one is very long'
+        }
+      </ListRow>
+      <ListRow flex>
+        {'You normally want 1 flex area that grows forever like this one'}
+        {longText}
+        {'the end'}
+      </ListRow>
+    </List>
+  </div>
+);
+
+export const withStackedRows = () => (
+  <div style={{ height: '100vh', display: 'grid' }}>
+    <List>
+      <ListRow>{'Title'}</ListRow>
+      <ListRow>{'Navigation'}</ListRow>
+      <ListRow>{'Search'}</ListRow>
+      <ListRow>{'Filter'}</ListRow>
+      <ListRow flex>
+        {'Actual content'}
+        {longText}
+        {'Actual content ends here'}
+      </ListRow>
+      <ListRow>{'Footer'}</ListRow>
+      <ListRow>{'Footers footer'}</ListRow>
+    </List>
+  </div>
+);

packages/graphiql/src/new-components/Type.js

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+
+const SectionHeader = ({ children }) => (
+  <h2 sx={{ color: 'primary', fontSize: [2] }}>{children}</h2>
+);
+
+const Explainer = ({ children }) => (
+  <span sx={{ fontSize: [0] }}>{children}</span>
+);
+
+export { SectionHeader, Explainer };

packages/graphiql/src/new-components/Type.stories.js

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import List, { ListRow } from './List';
+import { SectionHeader, Explainer } from './Type';
+
+export default { title: 'Type' };
+
+export const type = () => (
+  <List>
+    <ListRow>
+      <SectionHeader>{'Title'}</SectionHeader>
+    </ListRow>
+    <ListRow>
+      <Explainer>{'Small explainer text'}</Explainer>
+    </ListRow>
+    <ListRow>{'Normal text'}</ListRow>
+  </List>
+);