chore: add gatsby template site layout

Author: atanasster

core/webpack-compile/src/index.ts

@@ -1,7 +1,6 @@
 import { CompileProps, CompileResults, WatchProps } from './types';
 import { runCompiler } from './utilities';
 export * from './types';
-
 /**
  * compile the stories with webpack
  * returns the stories store object

examples/gatsby/.config/main.js

@@ -1,10 +1,5 @@
 module.exports = {
   stories: [
-    '../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
-    '../../../ui/components/src/**/*.stories.(js|tsx|mdx)',
-    '../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)',
-    '../../../core/specification/src/stories/**/*.stories.(js|tsx|mdx)',
-    '../../../plugins/axe-plugin/src/stories/**/*.stories.(js|tsx|mdx)',
     '../../stories/src/**/*.stories.(js|tsx|mdx)',
   ],
 };

examples/gatsby/gatsby-config.js

@@ -1,17 +1,15 @@
 module.exports = {
   siteMetadata: {
-    title: 'Component Controls Gatsby Starter',
+    siteTitle: 'Component Controls Gatsby Starter',
     author: 'Atanas Stoyanov',
     description: 'A sample site to showcase gatsby stories loading.',
     siteUrl: 'https://components-storybook-6-no-docs.netlify.app',
   },
   plugins: [
-    'gatsby-plugin-typescript',
-    'gatsby-plugin-emotion',
     {
-      resolve: '@component-controls/gatsby-plugin-stories',
+      resolve: '@component-controls/gatsby-theme-stories',
       options: {
-        config: '.config',
+        configPath: '.config',
       },
     },
   ],

examples/gatsby/gatsby-node.js

@@ -14,10 +14,8 @@
     "directory": "examples/gatsby"
   },
   "dependencies": {
-    "@component-controls/gatsby-plugin-stories": "^1.1.0",
-    "gatsby": "^2.22.9",
-    "gatsby-plugin-emotion": "^4.3.2",
-    "gatsby-plugin-typescript": "^2.4.3",
+    "@component-controls/gatsby-theme-stories": "^1.1.0",
+    "gatsby": "^2.22.10",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },

examples/gatsby/package.json

@@ -0,0 +1,21 @@
+module.exports = {
+  siteMetadata: {
+    siteTitle: `GraphQL Playground`,
+    siteTitleAlt: `GraphQL Playground - @lekoarts/gatsby-theme-graphql-playground`,
+    siteHeadline: `GraphQL Playground - Gatsby Theme from @lekoarts`,
+    siteUrl: `https://gatsby-theme-graphql-playground.netlify.com`,
+    siteDescription: `GraphQL Playground to showcase the power of GraphQL. Write your queries and documentation with MDX and display queries in an interactive GraphiQL window. It can source from your localhost or a remote URL (e.g. Codesandbox).`,
+    siteLanguage: `en`,
+    siteImage: `/banner.jpg`,
+    author: `@lekoarts_de`,
+    graphiQLUrl: `https://711808k40x.sse.codesandbox.io/___graphql`,
+    basePath: options.basePath,
+    docsPath: options.docsPath,
+  },
+
+  plugins: [
+    'gatsby-plugin-react-helmet',
+    'gatsby-plugin-theme-ui',
+    'gatsby-plugin-typescript',
+  ],
+};

examples/gatsby/src/pages/index.tsx

@@ -1,7 +1,7 @@
 {
-  "name": "@component-controls/gatsby-plugin-stories",
+  "name": "@component-controls/gatsby-theme-stories",
   "version": "1.1.0",
-  "description": "Gatsby plugin to collect story files",
+  "description": "Gatsby theme to create stories documentation sites",
   "keywords": [
     "story",
     "gatsby"
@@ -12,7 +12,9 @@
   "files": [
     "dist/",
     "package.json",
-    "README.md"
+    "README.md",
+    "gatsby-config.js",
+    "gatsby-node.js"
   ],
   "scripts": {
     "build": "yarn cross-env NODE_ENV=production rollup -c",
@@ -30,17 +32,33 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/ccontrols/component-controls.git",
-    "directory": "integrations/gatsby-source-stories"
+    "directory": "integrations/gatsby-theme-stories"
   },
   "license": "MIT",
   "dependencies": {
+    "@component-controls/components": "^1.1.0",
+    "@component-controls/blocks": "^1.1.0",
     "@component-controls/loader": "^1.1.0",
+    "@component-controls/pages": "^1.1.0",
+    "@component-controls/specification": "^1.1.0",
     "@component-controls/store": "^1.1.0",
-    "@component-controls/webpack-configs": "^1.1.0"
+    "@component-controls/webpack-compile": "^1.1.0",
+    "gatsby": "^2.22.10",
+    "gatsby-plugin-react-helmet": "^3.3.2",
+    "gatsby-plugin-theme-ui": "^0.3.0",
+    "gatsby-plugin-typescript": "^2.4.3",
+    "theme-ui": "^0.3.1",
+    "@theme-ui/sidenav": "^0.3.1",
+    "react": "^16.13.1",
+    "react-helmet": "^6.0.0"
   },
   "devDependencies": {
     "typescript": "^3.8.3"
   },
+  "peerDependencies": {
+    "gatsby": "^2.22.10",
+    "react": "^16.13.1"
+  },
   "publishConfig": {
     "access": "public"
   },

integrations/gatsby-plugin-stories/src/gatsby-node.ts

@@ -0,0 +1,79 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+
+interface Props {
+  isDark: boolean;
+  toggle: (e: any) => void;
+}
+
+// Adapted from: https://codepen.io/aaroniker/pen/KGpXZo and https://github.com/narative/gatsby-theme-novela/blob/714b6209c5bd61b220370e8a7ad84c0b1407946a/%40narative/gatsby-theme-novela/src/components/Navigation/Navigation.Header.tsx
+
+export const ColorMode = ({ isDark, toggle }: Props) => (
+  <button
+    onClick={toggle}
+    type="button"
+    aria-label={isDark ? `Activate Light Mode` : `Activate Dark Mode`}
+    title={isDark ? `Activate Light Mode` : `Activate Dark Mode`}
+    sx={{
+      opacity: 0.65,
+      position: `relative`,
+      borderRadius: `5px`,
+      width: `40px`,
+      height: `25px`,
+      display: `flex`,
+      alignItems: `center`,
+      justifyContent: `center`,
+      transition: `opacity 0.3s ease`,
+      border: `none`,
+      outline: `none`,
+      background: `none`,
+      cursor: `pointer`,
+      padding: 0,
+      appearance: `none`,
+      '&:hover, &:focus': { opacity: 1 },
+    }}
+  >
+    <div
+      sx={{
+        position: `relative`,
+        width: `24px`,
+        height: `24px`,
+        borderRadius: `50%`,
+        border: t => (isDark ? `4px solid ${t.colors.toggleIcon}` : `none`),
+        backgroundColor: isDark ? `toggleIcon` : `transparent`,
+        transform: isDark ? `scale(0.55)` : `scale(1)`,
+        transition: `all 0.45s ease`,
+        overflow: isDark ? `visible` : `hidden`,
+        boxShadow: t =>
+          isDark ? `none` : `inset 8px -8px 0px 0px ${t.colors.toggleIcon}`,
+        '&:before': {
+          content: `""`,
+          position: `absolute`,
+          right: `-9px`,
+          top: `-9px`,
+          height: `24px`,
+          width: `24px`,
+          border: t => (isDark ? `2px solid ${t.colors.toggleIcon}` : `none`),
+          borderRadius: `50%`,
+          transform: isDark ? `translate(14px, -14px)` : `translate(0, 0)`,
+          opacity: isDark ? 0 : 1,
+          transition: `transform 0.45s ease`,
+        },
+        '&:after': {
+          content: `""`,
+          width: `8px`,
+          height: `8px`,
+          borderRadius: `50%`,
+          margin: `-4px 0 0 -4px`,
+          position: `absolute`,
+          top: `50%`,
+          left: `50%`,
+          boxShadow: t =>
+            `0 -23px 0 ${t.colors.toggleIcon}, 0 23px 0 ${t.colors.toggleIcon}, 23px 0 0 ${t.colors.toggleIcon}, -23px 0 0 ${t.colors.toggleIcon}, 15px 15px 0 ${t.colors.toggleIcon}, -15px 15px 0 ${t.colors.toggleIcon}, 15px -15px 0 ${t.colors.toggleIcon}, -15px -15px 0 ${t.colors.toggleIcon}`,
+          transform: isDark ? `scale(1)` : `scale(0)`,
+          transition: `all 0.35s ease`,
+        },
+      }}
+    />
+  </button>
+);

integrations/gatsby-plugin-stories/src/types.ts

@@ -0,0 +1,41 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, useColorMode, Heading } from 'theme-ui';
+import { Flex } from '@theme-ui/components';
+import { ColorMode } from './ColorMode';
+
+interface HeaderProps {
+  title?: string;
+}
+export const Header: FC<HeaderProps> = ({ title }) => {
+  const [colorMode, setColorMode] = useColorMode();
+  const isDark = colorMode === `dark`;
+  const toggleColorMode = (e: any) => {
+    e.preventDefault();
+    setColorMode(isDark ? `light` : `dark`);
+  };
+
+  return (
+    <header sx={{ px: 3, py: 1 }}>
+      <Flex sx={{ alignItems: `center`, justifyContent: `space-between` }}>
+        <Heading>{title}</Heading>
+        <ColorMode isDark={isDark} toggle={toggleColorMode} />
+      </Flex>
+      <div
+        sx={{
+          boxSizing: `border-box`,
+          display: `flex`,
+          variant: `dividers.bottom`,
+          alignItems: `center`,
+          justifyContent: `space-between`,
+          mt: 3,
+          color: `secondary`,
+          a: { color: `secondary`, ':hover': { color: `heading` } },
+          flexFlow: `wrap`,
+        }}
+      >
+        links
+      </div>
+    </header>
+  );
+};

integrations/gatsby-plugin-stories/LICENSE.md renamed to integrations/gatsby-theme-stories/LICENSE.md

@@ -0,0 +1,53 @@
+/** @jsx jsx */
+import React, { FC } from 'react';
+import { jsx, Container } from 'theme-ui';
+import { Global } from '@emotion/core';
+import { ThemeProvider } from '@component-controls/components';
+import { PageContainer, store } from '@component-controls/blocks';
+import { Store } from '@component-controls/store';
+import { SEO } from './SEO';
+import { Sidebar } from './Sidebar';
+import { Header } from './Header';
+
+interface LayoutProps {
+  children: React.ReactNode;
+  title?: string;
+}
+
+export const Layout: FC<LayoutProps> = ({ children, title }) => {
+  const storyStore = React.useMemo(
+    () => new Store({ store, updateLocalStorage: false }),
+    [],
+  );
+
+  return (
+    <ThemeProvider>
+      <Global
+        styles={() => ({
+          '*': {
+            boxSizing: `inherit`,
+          },
+          a: {
+            transition: `all 0.3s ease-in-out`,
+          },
+        })}
+      />
+      <SEO title={title} />
+      <div
+        sx={{
+          display: `grid`,
+          gridTemplateColumns: [`200px 1fr`, `200px 1fr`, `250px 1fr`],
+          minHeight: `100vh`,
+        }}
+      >
+        <Sidebar />
+        <Container>
+          <Header title={title} />
+          <PageContainer store={storyStore} storyId="id-of-story">
+            {children}
+          </PageContainer>
+        </Container>
+      </div>
+    </ThemeProvider>
+  );
+};