+ {'Woooo'}
+
+ ),
+ },
+ ]}
+ />
+ );
+};
-export const withCustomSlots = () =>
+ {children}
+
+);
+ListRow.propTypes = {
+ flex: PropTypes.bool,
+ padding: PropTypes.bool,
+};
+
+const List = ({ children }) => (
+ *:not(:first-of-type)': {
+ borderTop: theme => `1px solid ${theme.colors.border}`,
+ },
+ '> *': {
+ flex: '0 0 auto',
+ },
+ }}>
+ {children}
+
+);
+
+List.propTypes = {
+ mini: PropTypes.bool,
+};
+
+export default List;
+export { ListRow };
diff --git a/packages/graphiql/src/new-components/List.stories.js b/packages/graphiql/src/new-components/List.stories.js
new file mode 100644
index 00000000000..95058e3bf14
--- /dev/null
+++ b/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) => {c}
);
+
+export const withFlexChild = () => (
+
+
+
+ {
+ 'Lists are a vertical stack of components and form the basis of most modules. This one is very long'
+ }
+
+
+ {'You normally want 1 flex area that grows forever like this one'}
+ {longText}
+ {'the end'}
+
+
+
+);
+
+export const withStackedRows = () => (
+
+
+ {'Title'}
+ {'Navigation'}
+ {'Search'}
+ {'Filter'}
+
+ {'Actual content'}
+ {longText}
+ {'Actual content ends here'}
+
+ {'Footer'}
+ {'Footers footer'}
+
+
+);
diff --git a/packages/graphiql/src/new-components/Type.js b/packages/graphiql/src/new-components/Type.js
new file mode 100644
index 00000000000..4517f60050b
--- /dev/null
+++ b/packages/graphiql/src/new-components/Type.js
@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+
+const SectionHeader = ({ children }) => (
+ {children}
+);
+
+const Explainer = ({ children }) => (
+ {children}
+);
+
+export { SectionHeader, Explainer };
diff --git a/packages/graphiql/src/new-components/Type.stories.js b/packages/graphiql/src/new-components/Type.stories.js
new file mode 100644
index 00000000000..cbab7a80b72
--- /dev/null
+++ b/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 = () => (
+
+
+ {'Title'}
+
+
+ {'Small explainer text'}
+
+ {'Normal text'}
+
+);
diff --git a/packages/graphiql/src/new-components/__tests__/Layout.spec.js b/packages/graphiql/src/new-components/__tests__/Layout.spec.js
deleted file mode 100644
index 0b25d7c777e..00000000000
--- a/packages/graphiql/src/new-components/__tests__/Layout.spec.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Layout from '../Layout';
-import Providers from './fixtures/Providers';
-
-it('renders correctly', () => {
- const tree = renderer
- .create(
-
- ,
- )
- .toJSON();
- expect(tree).toMatchSnapshot();
-});
diff --git a/packages/graphiql/src/new-components/__tests__/Nav.spec.js b/packages/graphiql/src/new-components/__tests__/Nav.spec.js
deleted file mode 100644
index faf84d38fe3..00000000000
--- a/packages/graphiql/src/new-components/__tests__/Nav.spec.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Nav from '../Nav';
-import Providers from './fixtures/Providers';
-
-it('renders correctly', () => {
- const tree = renderer
- .create(
-
- ,
- )
- .toJSON();
- expect(tree).toMatchSnapshot();
-});
diff --git a/packages/graphiql/src/new-components/__tests__/__snapshots__/Layout.spec.js.snap b/packages/graphiql/src/new-components/__tests__/__snapshots__/Layout.spec.js.snap
deleted file mode 100644
index d347a02850c..00000000000
--- a/packages/graphiql/src/new-components/__tests__/__snapshots__/Layout.spec.js.snap
+++ /dev/null
@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-
- nav
-
-
-
-
-
-`;
diff --git a/packages/graphiql/src/new-components/__tests__/__snapshots__/Nav.spec.js.snap b/packages/graphiql/src/new-components/__tests__/__snapshots__/Nav.spec.js.snap
deleted file mode 100644
index 18fee99a6f0..00000000000
--- a/packages/graphiql/src/new-components/__tests__/__snapshots__/Nav.spec.js.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-
- 🐽
-
-
- 👨🌾
-
-
- 🐝
-
-
-`;
diff --git a/packages/graphiql/src/new-components/__tests__/__snapshots__/stories.spec.js.snap b/packages/graphiql/src/new-components/__tests__/__snapshots__/stories.spec.js.snap
new file mode 100644
index 00000000000..6f5883ef2ef
--- /dev/null
+++ b/packages/graphiql/src/new-components/__tests__/__snapshots__/stories.spec.js.snap
@@ -0,0 +1,2229 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Layout With Full Screen Panel 1`] = `
+
+
+
+
+ 🐽
+
+
+ 👨🌾
+
+
+ 🐝
+
+
+
+
+
+
+
+
+
+
+ Console/Inspector
+
+
+
+
+`;
+
+exports[`Storyshots Layout With Many Sidebars 1`] = `
+
+
+
+
+ 🐽
+
+
+ 👨🌾
+
+
+ 🐝
+
+
+
+
+
+
+
+
+
+
+ Console/Inspector
+
+
+
+
+`;
+
+exports[`Storyshots Layout With Slots 1`] = `
+
+
+
+
+ 🐽
+
+
+ 👨🌾
+
+
+ 🐝
+
+
+
+
+
+
+
+
+
+ Console/Inspector
+
+
+
+
+`;
+
+exports[`Storyshots Layout With Strings Only 1`] = `
+
+
+ nav
+
+
+
+
+ input
+
+
+ response
+
+
+ console
+
+
+`;
+
+exports[`Storyshots Lists With Flex Child 1`] = `
+
+
+
+ Lists are a vertical stack of components and form the basis of most modules. This one is very long
+
+
+ You normally want 1 flex area that grows forever like this one
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+ the end
+
+
+
+
+
+ Title
+
+
+ Navigation
+
+
+ Search
+
+
+ Filter
+
+
+ Actual content
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+
+ scroll
+
+ Actual content ends here
+
+
+ Footer
+
+
+ Footers footer
+
+
+
+
+
+ Title
+
+
+
+
+ Small explainer text
+
+
+
+ Normal text
+
+
{children}
-);
-
-export default WithProviders;
diff --git a/packages/graphiql/src/new-components/__tests__/stories.spec.js b/packages/graphiql/src/new-components/__tests__/stories.spec.js
new file mode 100644
index 00000000000..22638c6f7c3
--- /dev/null
+++ b/packages/graphiql/src/new-components/__tests__/stories.spec.js
@@ -0,0 +1,6 @@
+import initStoryshots from '@storybook/addon-storyshots';
+import path from 'path';
+
+initStoryshots({
+ configPath: path.resolve(__dirname, '../../../.storybook'),
+});
diff --git a/packages/graphiql/src/new-components/theme/default.js b/packages/graphiql/src/new-components/theme/default.js
deleted file mode 100644
index 4e0cd33ed0d..00000000000
--- a/packages/graphiql/src/new-components/theme/default.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default {
- fonts: {
- body: 'system-ui, sans-serif',
- heading: '"Avenir Next", sans-serif',
- monospace: 'Menlo, monospace',
- },
- space: [5, 10, 20],
- colors: {
- text: '#939393',
- background: 'rgba(254, 247, 252, 0.940177)',
- cardBackground: '#fff',
- primary: '#E535AB',
- border: 'rgba(0, 0, 0, 0.1)',
- },
-};
diff --git a/packages/graphiql/src/new-components/themes/README.md b/packages/graphiql/src/new-components/themes/README.md
new file mode 100644
index 00000000000..86563886851
--- /dev/null
+++ b/packages/graphiql/src/new-components/themes/README.md
@@ -0,0 +1,34 @@
+_work in progress_
+
+# What's in a theme?
+
+Themes export a `
+ {'...'}
+
+);
+```
diff --git a/packages/graphiql/src/new-components/themes/constants.js b/packages/graphiql/src/new-components/themes/constants.js
new file mode 100644
index 00000000000..20c1e1c2783
--- /dev/null
+++ b/packages/graphiql/src/new-components/themes/constants.js
@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+
+export const PANEL_SIZES = ['sidebar', 'aside', 'full-screen'];
+
+/*
+Layout components are divided into 3 areas:
+- the gql explorer itself, which has 3 panels (input, response, console)
+- the side nav
+- the nav panels, which are a potentially infinite stack,
+ they are wrapped in an object that specifies what size they
+ should render at
+
+TODO: For the nav we can probably just pass a list oflinks instead of a component
+*/
+export const LAYOUT_PROP_TYPES = {
+ explorer: PropTypes.shape({
+ input: PropTypes.node,
+ response: PropTypes.node,
+ console: PropTypes.node,
+ }).isRequired,
+ nav: PropTypes.node.isRequired,
+ navPanels: PropTypes.arrayOf(
+ PropTypes.shape({
+ component: PropTypes.node,
+ key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ size: PropTypes.oneOf(PANEL_SIZES),
+ }),
+ ),
+};
diff --git a/packages/graphiql/src/new-components/themes/default/Layout.js b/packages/graphiql/src/new-components/themes/default/Layout.js
new file mode 100644
index 00000000000..a6e5c7a4006
--- /dev/null
+++ b/packages/graphiql/src/new-components/themes/default/Layout.js
@@ -0,0 +1,98 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+
+import PropTypes from 'prop-types';
+import { PANEL_SIZES, LAYOUT_PROP_TYPES } from './../constants';
+
+const NAV_WIDTH = '6em';
+const CONTENT_MIN_WIDTH = '60em';
+
+const sizeInCSSUnits = (theme, size) => {
+ switch (size) {
+ case 'sidebar':
+ return '10em';
+ case 'aside':
+ return '20em';
+ default:
+ return `calc(100vw - ${theme.space[2] * 3}px - ${NAV_WIDTH})`;
+ }
+};
+
+const Card = ({ children, size, transparent = false, innerSx }) => (
+ sizeInCSSUnits(theme, size)),
+ gridTemplate: '100% / 100%',
+ ...innerSx,
+ }}>
+ {children}
+
+);
+
+Card.propTypes = {
+ transparent: PropTypes.bool,
+ size: PropTypes.oneOf(PANEL_SIZES),
+ innerSx: PropTypes.object,
+};
+
+const gridBase = {
+ display: 'grid',
+ gridAutoFlow: 'column',
+ gridAutoColumns: '1fr',
+ gridAutoRows: '100%',
+ gap: 2,
+};
+
+const Layout = ({ nav, navPanels, explorer }) => {
+ const hasNavPanels = navPanels && navPanels.length > 0;
+ return (
+
+ {nav && (
+
+ {nav}
+
+ )}
+ {hasNavPanels && (
+
+ {navPanels.map(({ component, key, size }) => (
+
+ {component}
+
+ ))}
+
+ )}
+ {explorer && (
+
+ {explorer.input}
+ {explorer.response}
+ {explorer.console}
+
+ )}
+
+ );
+};
+
+Layout.propTypes = LAYOUT_PROP_TYPES;
+
+export default Layout;
diff --git a/packages/graphiql/src/new-components/themes/default/index.js b/packages/graphiql/src/new-components/themes/default/index.js
new file mode 100644
index 00000000000..90bdb931e7a
--- /dev/null
+++ b/packages/graphiql/src/new-components/themes/default/index.js
@@ -0,0 +1,37 @@
+import Layout from './Layout';
+
+const palette = {
+ neutral: {
+ 20: '#939393',
+ 90: `rgba(0, 0, 0, 0.1)`,
+ 100: '#fff',
+ },
+ fuscia: {
+ 90: 'rgba(254, 247, 252, 0.940177)',
+ 50: '#E535AB',
+ },
+};
+
+const colors = {
+ text: palette.neutral[20],
+ background: palette.fuscia[90],
+ cardBackground: palette.neutral[100],
+ primary: palette.fuscia[50],
+ border: palette.neutral[90],
+};
+
+const theme = {
+ fonts: {
+ body: 'system-ui, sans-serif',
+ heading: '"Avenir Next", sans-serif',
+ monospace: 'Menlo, monospace',
+ },
+ fontSizes: [12, 16, 20],
+ space: [5, 10, 20],
+ colors,
+ shadows: {
+ card: `0 0 0 .1px ${colors.border}, 0 1px 4px 0 ${colors.border}`,
+ },
+};
+
+export { Layout, theme };
diff --git a/packages/graphiql/src/new-components/theme/ThemeProvider.js b/packages/graphiql/src/new-components/themes/provider.js
similarity index 84%
rename from packages/graphiql/src/new-components/theme/ThemeProvider.js
rename to packages/graphiql/src/new-components/themes/provider.js
index e05dea7d900..de165005047 100644
--- a/packages/graphiql/src/new-components/theme/ThemeProvider.js
+++ b/packages/graphiql/src/new-components/themes/provider.js
@@ -1,5 +1,5 @@
import { ThemeProvider } from 'theme-ui';
-import theme from './default';
+import { theme, Layout } from './default';
import React from 'react';
import { Global } from '@emotion/core';
@@ -12,6 +12,7 @@ const Reset = () => (
},
body: {
fontFamily: themeStyles.fonts.body,
+ fontSize: themeStyles.fontSizes[1],
color: themeStyles.colors.text,
backgroundColor: themeStyles.colors.background,
},
@@ -31,6 +32,8 @@ const Reset = () => (
/>
);
+const useThemeLayout = () => Layout;
+
const Provider = ({ children }) => (
);
+export { useThemeLayout };
export default Provider;
diff --git a/yarn.lock b/yarn.lock
index 0afa596f425..32cae04b68b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2391,6 +2391,21 @@
dependencies:
any-observable "^0.3.0"
+"@storybook/addon-storyshots@^5.2.8":
+ version "5.2.8"
+ resolved "https://registry.yarnpkg.com/@storybook/addon-storyshots/-/addon-storyshots-5.2.8.tgz#1878d0cc7490941cc4006bd3bd96bfd06005e1e3"
+ integrity sha512-izUQTwzt1I0TdtYn3jv6yFIaW7H48gPW+nehisVXOA+0b0f+IySnC63+q3YcCQcC9cmZ5xxzZNJ1XycrsyVm0A==
+ dependencies:
+ "@jest/transform" "^24.9.0"
+ "@storybook/addons" "5.2.8"
+ core-js "^3.0.1"
+ glob "^7.1.3"
+ global "^4.3.2"
+ jest-specific-snapshot "^2.0.0"
+ read-pkg-up "^6.0.0"
+ regenerator-runtime "^0.12.1"
+ ts-dedent "^1.1.0"
+
"@sheerun/mutationobserver-shim@^0.3.2":
version "0.3.2"
resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz#8013f2af54a2b7d735f71560ff360d3a8176a87b"
@@ -3034,7 +3049,7 @@
"@types/react-dom" "*"
"@types/testing-library__dom" "*"
-"@types/webpack-env@^1.13.7":
+"@types/webpack-env@^1.13.7", "@types/webpack-env@^1.14.0":
version "1.14.1"
resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.14.1.tgz#0d8a53f308f017c53a5ddc3d07f4d6fa76b790d7"
integrity sha512-0Ki9jAAhKDSuLDXOIMADg54Hu60SuBTEsWaJGGy5cV+SSUQ63J2a+RrYYGrErzz39fXzTibhKrAQJAb8M7PNcA==
@@ -3988,7 +4003,7 @@ babel-plugin-macros@2.7.1:
cosmiconfig "^6.0.0"
resolve "^1.12.0"
-babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.4.5:
+babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.4.5, babel-plugin-macros@^2.8.0:
version "2.8.0"
resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -8185,6 +8200,7 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3
dependencies:
"@emotion/core" "^10.0.22"
"@mdx-js/react" "^1.5.2"
+ "@storybook/addon-storyshots" "^5.2.8"
codemirror "^5.47.0"
codemirror-graphql "^0.11.6"
copy-to-clipboard "^3.2.0"
@@ -9838,7 +9854,7 @@ jest-serializer@^24.9.0:
resolved "https://registry.npmjs.org/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
-jest-snapshot@^24.9.0:
+jest-snapshot@^24.1.0, jest-snapshot@^24.9.0:
version "24.9.0"
resolved "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-24.9.0.tgz#ec8e9ca4f2ec0c5c87ae8f925cf97497b0e951ba"
integrity sha512-uI/rszGSs73xCM0l+up7O7a40o90cnrk429LOiK3aeTvfC0HHmldbd81/B7Ix81KSFe1lwkbl7GnBGG4UfuDew==
@@ -9857,6 +9873,13 @@ jest-snapshot@^24.9.0:
pretty-format "^24.9.0"
semver "^6.2.0"
+jest-specific-snapshot@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/jest-specific-snapshot/-/jest-specific-snapshot-2.0.0.tgz#425fe524b25df154aa39f97fa6fe9726faaac273"
+ integrity sha512-aXaNqBg/svwEpY5iQEzEHc5I85cUBKgfeVka9KmpznxLnatpjiqjr7QLb/BYNYlsrZjZzgRHTjQJ+Svx+dbdvg==
+ dependencies:
+ jest-snapshot "^24.1.0"
+
jest-util@^24.9.0:
version "24.9.0"
resolved "https://registry.npmjs.org/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
@@ -13736,6 +13759,15 @@ read-pkg-up@^4.0.0:
find-up "^3.0.0"
read-pkg "^3.0.0"
+read-pkg-up@^6.0.0:
+ version "6.0.0"
+ resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-6.0.0.tgz#da75ce72762f2fa1f20c5a40d4dd80c77db969e3"
+ integrity sha512-odtTvLl+EXo1eTsMnoUHRmg/XmXdTkwXVxy4VFE9Kp6cCq7b3l7QMdBndND3eAFzrbSAXC/WCUOQQ9rLjifKZw==
+ dependencies:
+ find-up "^4.0.0"
+ read-pkg "^5.1.1"
+ type-fest "^0.5.0"
+
read-pkg@^1.0.0:
version "1.1.0"
resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
@@ -13763,7 +13795,7 @@ read-pkg@^3.0.0:
normalize-package-data "^2.3.2"
path-type "^3.0.0"
-read-pkg@^5.2.0:
+read-pkg@^5.1.1, read-pkg@^5.2.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
@@ -14100,6 +14132,13 @@ request@2.88.0, request@^2.87.0, request@^2.88.0:
tunnel-agent "^0.6.0"
uuid "^3.3.2"
+require-context.macro@^1.2.2:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/require-context.macro/-/require-context.macro-1.2.2.tgz#84bc90f6b9c6dec3a840c84cfd6b2dd92884e34d"
+ integrity sha512-qibgUj+t0YeBAIsQSqgY3iwFrwQoAV7mmZmvdEpGwe1eAS7iunLpINsRYX/lyuHtJDeJdF7U92jXNzbuDeM2RA==
+ dependencies:
+ "@types/webpack-env" "^1.14.0"
+
require-directory@^2.1.1:
version "2.1.1"
resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -15781,6 +15820,11 @@ tryer@^1.0.1:
resolved "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
+ts-dedent@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-1.1.0.tgz#67983940793183dc7c7f820acb66ba02cdc33c6e"
+ integrity sha512-CVCvDwMBWZKjDxpN3mU/Dx1v3k+sJgE8nrhXcC9vRopRfoa7vVzilNvHEAUi5jQnmFHpnxDx5jZdI1TpG8ny2g==
+
ts-jest@^24.1.0:
version "24.2.0"
resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-24.2.0.tgz#7abca28c2b4b0a1fdd715cd667d65d047ea4e768"
@@ -15853,6 +15897,11 @@ type-fest@^0.3.0:
resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"
integrity sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==
+type-fest@^0.5.0:
+ version "0.5.2"
+ resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.5.2.tgz#d6ef42a0356c6cd45f49485c3b6281fc148e48a2"
+ integrity sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw==
+
type-fest@^0.6.0:
version "0.6.0"
resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"