feat: configure pages and tabs

ccontrols · May 30, 2020 · 94f7ba4 · 94f7ba4
1 parent 195b01b
commit 94f7ba4
Show file tree

Hide file tree

Showing 13 changed files with 125 additions and 113 deletions.
diff --git a/core/webpack-configs/src/react/index.ts b/core/webpack-configs/src/react/index.ts
@@ -5,6 +5,7 @@ export const react: Configuration = {
     rules: [
       {
         test: /\.(js|jsx)$/,
+        exclude: [/node_modules/],
         use: [
           {
             loader: 'babel-loader',
@@ -19,6 +20,7 @@ export const react: Configuration = {
       },
       {
         test: /\.(ts|tsx)$/,
+        exclude: [/node_modules/],
         use: [
           {
             loader: require.resolve('babel-loader'),
@@ -30,6 +32,7 @@ export const react: Configuration = {
       },
       {
         test: /\.(stories|story).mdx$/,
+        exclude: [/node_modules/],
         use: [
           {
             loader: 'babel-loader',

diff --git a/examples/gatsby/.config/main.js b/examples/gatsby/.config/main.js
@@ -1,5 +1,5 @@
 module.exports = {
   stories: [
-    '../../stories/src/**/*.stories.(js|tsx|mdx)',
+    '../../stories/src/**/*.stories.(js|jsx|tsx|mdx)',
   ],
 };
diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@component-controls/gatsby-theme-stories": "^1.1.0",
+    "@component-controls/pages": "^1.1.0",
     "gatsby": "^2.22.10",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

diff --git a/examples/gatsby/src/@component-controls/gatsby-theme-stories/config/pages.tsx b/examples/gatsby/src/@component-controls/gatsby-theme-stories/config/pages.tsx
@@ -0,0 +1,16 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { ClassicPage, TestingPage } from '@component-controls/pages';
+
+export const pages = () => [
+  {
+    key: 'page',
+    title: 'Documentation',
+    render: () => <ClassicPage />,
+  },
+  {
+    key: 'test',
+    title: 'Testing',
+    render: () => <TestingPage />,
+  },
+];
diff --git a/integrations/gatsby-theme-stories/README.md b/integrations/gatsby-theme-stories/README.md
@@ -27,95 +27,43 @@ Accessibility testing plugin using the [axe-core](https://github.com/dequelabs/a
 
 Some of the design goals:
 
--   Test at the component-level.
--   Provide a dashboard view to quickly see the errors and tests for the compnnt.
--   Ability to select and outline the sub-elements generating the errors.
--   Ability to see details from the errors and passed rules.
+-   Gatsby theme quick start.
+-   Full UI configurability with components shadowing.
 
-<p align="center">
-  <img src="https://github.com/ccontrols/component-controls/raw/master/plugins/axe-plugin/images/axe-ally-testing.gif" alt="ally tests with axe plugin" width="738">
-</p>
 
 # Getting Started
 
 ## Install
 
 ```sh
-yarn add @component-controls/axe-plugin --dev
+yarn add gatsby-theme-stories
 ```
 
 ## Configure
 
-The axe-plugin is already installed part of [testing page](https://github.com/ccontrols/component-controls/blob/master/ui/pages/src/TestingPage/TestingPage.tsx) and you can also add it to any other documentation page:
+the default options will configure `componnet-controls` to work with react apps,  with `reac-docgen` for prop-types and `react-docgen-typescript` for typescript props information
 
-```
-import {...} from '@component-controls/blocks';
-import { AxeAllyBlock } from '@component-controls/axe-plugin';
-
-
-export const TestingCustomePage= () => (
-  <>
-    <EditPage />
-    <Title />
-    <Subtitle />
-    <Description />
-    <Playground title=".">
-      <Story id="." />
-    </Playground>
-
-    <PropsTable of="." title="Controls" visibility="controls" />
-    <AxeAllyBlock title="A11y tests" />
-  </>
-);
-
-```
-
-## Pages format
-
-The page definition files need to have a default export with the following fields
+in `gatsby-config.js`:
 
 ```js
-import React from 'react';
-export default {
-  // key used for navigation
-  key: string,
-  // title of the tab
-  title: string,
-  // react render function. 
-  // active boolean - if the tab custom page is active
-  // storyId as a string
-  // Return an object that can be rendered from ReactDOM.render
-  render: ({ active, storyId }) => Element,
-}
-```
-
-## Examples
+  plugins: [
+    ...
+    {
+      resolve: '@component-controls/gatsby-theme-stories',
+      options: {
+        //path to the configuration files
+        configPath: '.config',
+      },
+    },
+    ...
+  ],
 
-### Simple page
-
-```js
-import React from 'react';
-import { DocsContainer, Story} from '@storybook/addon-docs/blocks';
-import { useContext, } from '@component-controls/storybook-custom-docs';
-
-const Page = () => {
-  const context = useContext();
-  return (
-    <DocsContainer context={context}><Story id={storyId}/></DocsContainer>
-  )
-}
-export default {
-  key: 'docs-page',
-  title: 'Docs Page',
-  render: ({ active, storyId }) => {
-    return active ? <Page storyId={storyId} /> : null;  
-  } 
-}
 ```
 
+
 # API
 
-<react-docgen-typescript path="./src" exclude="AllyDashboard.tsx,BaseAllyBlock.tsx,HighlightSelector.tsx,NodesTable.tsx,ResultsTable.tsx,SelectionContext.tsx" />
+<react-docgen-typescript path="./src" exclude="Store.tsx" />
 
 <!-- START-REACT-DOCGEN-TYPESCRIPT -->
 

diff --git a/integrations/gatsby-theme-stories/gatsby-config.js b/integrations/gatsby-theme-stories/gatsby-config.js
@@ -1,21 +1,20 @@
-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',
-  ],
+module.exports = options => {
+  return {
+    siteMetadata: {
+      siteTitle: `Stories`,
+      siteTitleAlt: `Component controls stories - @lekoarts/gatsby-theme-graphql-playground`,
+      siteHeadline: `Component controls stories - Gatsby Theme from @atanasster`,
+      siteUrl: `https://gatsby-theme-stories.netlify.com`,
+      siteDescription: `Component controls stories. Write your components documentation with MDX and JSX and design, develop, test and review in a single site.`,
+      siteLanguage: `en`,
+      author: `@atanasster`,
+      graphiQLUrl: `https://gatsby-theme-stories.netlify.com/___graphql`,
+      basePath: options.basePath,
+    },
+    plugins: [
+      'gatsby-plugin-react-helmet',
+      'gatsby-plugin-theme-ui',
+      'gatsby-plugin-typescript',
+    ].filter(Boolean),
+  };
 };
diff --git a/integrations/gatsby-theme-stories/src/components/Header.tsx b/integrations/gatsby-theme-stories/src/components/Header.tsx
@@ -1,13 +1,13 @@
 /** @jsx jsx */
 import { FC, useContext } from 'react';
-import { jsx, Heading } from 'theme-ui';
+import { jsx } from 'theme-ui';
 import { Flex } from '@theme-ui/components';
 import { ColorMode, SidebarContext } from '@component-controls/app-components';
 
 interface HeaderProps {
   title?: string;
 }
-export const Header: FC<HeaderProps> = ({ title }) => {
+export const Header: FC<HeaderProps> = ({ children }) => {
   const { SidebarToggle } = useContext(SidebarContext);
 
   return (
@@ -22,7 +22,7 @@ export const Header: FC<HeaderProps> = ({ title }) => {
       >
         <Flex sx={{ flexDirection: 'row', alignItems: 'center' }}>
           <SidebarToggle />
-          <Heading sx={{ pl: 2 }}>{title}</Heading>
+          {children}
         </Flex>
         <Flex
           sx={{
@@ -34,7 +34,7 @@ export const Header: FC<HeaderProps> = ({ title }) => {
             flexFlow: `wrap`,
           }}
         >
-          <a>links</a>
+          link
         </Flex>
         <ColorMode />
       </Flex>

diff --git a/integrations/gatsby-theme-stories/src/components/Layout.tsx b/integrations/gatsby-theme-stories/src/components/Layout.tsx
@@ -2,35 +2,40 @@
 import React, { FC } from 'react';
 import { jsx, Flex, Container } from 'theme-ui';
 import { Global } from '@emotion/core';
-import { ThemeProvider } from '@component-controls/components';
+import {
+  ThemeProvider,
+  Tabs,
+  Tab,
+  TabList,
+  TabPanel,
+} from '@component-controls/components';
 import { SidebarContextProvider } from '@component-controls/app-components';
-
 import { PageContainer } from '@component-controls/blocks';
 import { Store } from '@component-controls/store';
 import { SEO } from './SEO';
 import { Sidebar } from './Sidebar';
 import { Header } from './Header';
+import { PagesConfig } from './types';
 
 interface LayoutProps {
   children: React.ReactNode;
   title?: string;
   storyStore: Store;
   storyId: string;
+  pages: PagesConfig;
 }
 
 export const Layout: FC<LayoutProps> = ({
-  children,
+  pages: pagesFn,
   title,
   storyStore,
   storyId,
 }) => {
+  const pages = pagesFn('');
   return (
     <ThemeProvider>
       <Global
         styles={() => ({
-          '*': {
-            boxSizing: `inherit`,
-          },
           a: {
             transition: `all 0.3s ease-in-out`,
           },
@@ -41,10 +46,23 @@ export const Layout: FC<LayoutProps> = ({
         <Flex sx={{ flexDirection: 'row' }}>
           <Sidebar storyId={storyId} />
           <Container>
-            <Header title={title} />
-            <PageContainer store={storyStore} storyId={storyId}>
-              {children}
-            </PageContainer>
+            <Tabs>
+              <Header title={title}>
+                {pages.length > 1 && (
+                  <TabList>
+                    {pages.map(page => (
+                      <Tab key={`tab_${page.key}`}>{page.title}</Tab>
+                    ))}
+                  </TabList>
+                )}
+              </Header>
+
+              <PageContainer store={storyStore} storyId={storyId}>
+                {pages.map(page => (
+                  <TabPanel key={`panel_${page.key}`}>{page.render()}</TabPanel>
+                ))}
+              </PageContainer>
+            </Tabs>
           </Container>
         </Flex>
       </SidebarContextProvider>

diff --git a/integrations/gatsby-theme-stories/src/components/Sidebar.tsx b/integrations/gatsby-theme-stories/src/components/Sidebar.tsx
@@ -20,11 +20,11 @@ const Link: FC<LinkProps> = props => (
     sx={{
       color: 'inherit',
       '&.active': {
-        backgroundColor: 'accent',
+        backgroundColor: 'highlight',
         color: 'primary',
       },
       ':hover': {
-        backgroundColor: 'accent',
+        backgroundColor: 'highlight',
       },
     }}
   />

diff --git a/integrations/gatsby-theme-stories/src/components/types.ts b/integrations/gatsby-theme-stories/src/components/types.ts
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+export interface PageConfig {
+  key: string;
+  title: string;
+  render: () => ReactNode;
+}
+
+export type PagesConfig = (route: string) => PageConfig[];
diff --git a/integrations/gatsby-theme-stories/src/config/pages.tsx b/integrations/gatsby-theme-stories/src/config/pages.tsx
@@ -0,0 +1,12 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { ClassicPage } from '@component-controls/pages';
+import { PagesConfig } from '../components/types';
+
+export const pages: PagesConfig = () => [
+  {
+    key: 'page',
+    title: 'Documentation',
+    render: () => <ClassicPage />,
+  },
+];
diff --git a/integrations/gatsby-theme-stories/src/templates/StoryPage.tsx b/integrations/gatsby-theme-stories/src/templates/StoryPage.tsx
@@ -1,9 +1,10 @@
 import React, { FC, useMemo } from 'react';
-import { ClassicPage } from '@component-controls/pages';
 
 import { StoriesStore } from '@component-controls/specification';
 import { Store } from '@component-controls/store';
+
 import { Layout } from '../components/Layout';
+import { pages } from '../config/pages';
 
 interface SitePageProps {
   pathContext: {
@@ -25,9 +26,12 @@ const SitePage: FC<SitePageProps> = ({
     [loadedStore],
   );
   return (
-    <Layout title={title} storyStore={storyStore} storyId={storyId}>
-      <ClassicPage />
-    </Layout>
+    <Layout
+      title={title}
+      storyStore={storyStore}
+      storyId={storyId}
+      pages={pages}
+    />
   );
 };