feat: theming of app components

core/specification/src/configuration.ts

@@ -18,6 +18,16 @@ export interface PageConfiguration {
    * by default, only story and blogs have home pages
    */
   hasHomePage?: boolean;
+
+  /**
+   * whether to take a fullpage theme option
+   */
+  fullPage?: boolean;
+
+  /**
+   * whether to add navigation sidebars to the page
+   */
+  sidebars?: boolean;
 }
 
 export type PagesConfiguration = Record<PageType, PageConfiguration>;
@@ -118,10 +128,12 @@ export const defaultRunConfig: RunConfiguration = {
     story: {
       label: 'Docs',
       hasHomePage: true,
+      sidebars: true,
     },
     blog: {
       label: 'Blog',
       hasHomePage: true,
+      sidebars: false,
     },
     author: {
       label: 'Authors',

core/specification/src/stories.ts

@@ -246,14 +246,16 @@ export interface StoriesDoc {
   MDXPage?: any;
 
   /**
-   * if true, will display the documentation page full view
+   * if true, will display the documentation page full size (pagecontainer.full theme variant)
+   * the default value is from the page type configuration
    */
   fullPage?: boolean;
 
   /**
-   * side menu - hide
+   * whether to add navigation sidebars to the page
+   * the default value is from the page type configuration
    */
-  menu?: boolean | string;
+  sidebars?: boolean;
 
   /**
    *  optional date the document was created

core/store/src/serialization/load-store.ts

@@ -36,7 +36,7 @@ export const loadStoryStore = (
           stories: {},
           components: {},
           packages: {},
-          config: deepMerge(buildConfig, deepMerge(config, defaultRunConfig)),
+          config: deepMerge(buildConfig, deepMerge(defaultRunConfig, config)),
         };
         stores.forEach(s => {
           const storeDoc = s.doc;

examples/gatsby/.config/main.js

@@ -7,7 +7,7 @@ module.exports = {
   ],
   pages: {
     story: {
-      basePath: 'page/',
+      basePath: 'api/',
     },
     blog: {
       basePath: 'blogs/',

examples/gatsby/.config/runtime.js

@@ -13,6 +13,11 @@ module.exports = {
       //primary: 'pink',
     }
   },
+  pages: {
+    story: {
+      label: 'API',
+    },
+  },  
   storySort: (a, b) => {
     const aDoc = a.split('/')[0];
     const aIndex = categories.findIndex(c => c === aDoc);

examples/stories/src/blogs/home-page.mdx

@@ -2,6 +2,7 @@
 title: Home
 route: /
 type: page
+fullPage: true
 ---
 
 import { jsx, Flex, Box, Heading, Text, Button, Card } from 'theme-ui';

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

@@ -23,15 +23,15 @@ exports.createPages = async (
   };
   const pageTemplates: Record<PageType, string> = {
     story: require.resolve(`../src/templates/DocPage.tsx`),
-    blog: require.resolve(`../src/templates/BlogPage.tsx`),
-    page: require.resolve(`../src/templates/PagePage.tsx`),
+    blog: require.resolve(`../src/templates/DocPage.tsx`),
+    page: require.resolve(`../src/templates/DocPage.tsx`),
     tags: require.resolve(`../src/templates/CategoryPage.tsx`),
     author: require.resolve(`../src/templates/CategoryPage.tsx`),
   };
   const listTemplates: Record<PageType, string> = {
     story: require.resolve(`../src/templates/DocPage.tsx`),
+    page: require.resolve(`../src/templates/DocPage.tsx`),
     blog: require.resolve(`../src/templates/PageList.tsx`),
-    page: require.resolve(`../src/templates/PagePage.tsx`),
     tags: require.resolve(`../src/templates/CategoryList.tsx`),
     author: require.resolve(`../src/templates/CategoryList.tsx`),
   };
@@ -50,8 +50,9 @@ exports.createPages = async (
         docs.forEach(doc => {
           createPage({
             path: getDocPath(pageType, doc, store.buildConfig),
-            component: pageTemplates[pageType],
+            component: pageTemplates[pageType] || pageTemplates['story'],
             context: {
+              type: pageType,
               doc: doc.title,
             },
           });
@@ -60,7 +61,7 @@ exports.createPages = async (
           const docsPage = docs.find(doc => doc?.route === `/${page.basePath}`);
           createPage({
             path: `/${page.basePath}`,
-            component: listTemplates[pageType],
+            component: listTemplates[pageType] || listTemplates['story'],
             context: {
               type: pageType,
               doc: docsPage?.title,
@@ -104,6 +105,7 @@ exports.createPages = async (
       component: pageTemplates['page'],
       context: {
         doc: homePage?.doc?.title,
+        type: homePage?.doc?.type,
       },
     });
   }

integrations/gatsby-theme-stories/src/templates/DocPage.tsx

@@ -1,18 +1,20 @@
 import React, { FC } from 'react';
+import { PageType } from '@component-controls/specification';
 import { DocPage } from '@component-controls/app';
 import { Layout } from '../components/Layout';
 import { pages } from '../config/pages';
 
 interface DocPageProps {
   pathContext: {
     doc: string;
+    type: PageType;
   };
 }
 
-const DocPageTemplate: FC<DocPageProps> = ({ pathContext: { doc } }) => {
+const DocPageTemplate: FC<DocPageProps> = ({ pathContext: { doc, type } }) => {
   return (
     <Layout docId={doc}>
-      <DocPage pagesFn={pages} />
+      <DocPage pagesFn={pages} type={type} />
     </Layout>
   );
 };

integrations/storybook/src/docs-page/DocsContainer.tsx

@@ -18,7 +18,7 @@ export const PageContextContainer: FC = ({ children }) => {
   return (
     <ThemeProvider theme={store.config?.theme} dark={isDark}>
       <BlockContextProvider storyId={storyId} store={store} options={options}>
-        <BlockPageContainer sx={{ maxWidth: '1000px' }}>
+        <BlockPageContainer variant="pagecontainer.storybook">
           {children}
         </BlockPageContainer>
       </BlockContextProvider>

ui/app/src/App/App.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, Fragment } from 'react';
-import { jsx, Flex } from 'theme-ui';
+import { jsx, Box } from 'theme-ui';
 import {
   SkipLinks,
   SkiLinksItemProps,
@@ -36,16 +36,11 @@ export const App: FC<AppProps> = ({ title, children }) => {
     <Fragment>
       <SEO title={title} />
       <SkipLinks items={items} />
-      <Flex
-        sx={{
-          minHeight: '100vh',
-          flexDirection: 'column',
-        }}
-      >
+      <Box variant="app">
         <Header title={title}></Header>
         {children}
         <Footer />
-      </Flex>
+      </Box>
     </Fragment>
   );
 };

ui/app/src/CategoryList/CategoryList.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, useContext } from 'react';
-import { jsx } from 'theme-ui';
+import { jsx, Box } from 'theme-ui';
 import { PageType } from '@component-controls/specification';
 import { Title } from '@component-controls/components';
 import { PageContainer, BlockContext } from '@component-controls/blocks';
@@ -14,18 +14,20 @@ export const CategoryList: FC<CategoryListProps> = ({ type }) => {
   const categories = storeProvider?.getUniquesByCategory(type) || [];
   const pageConfig = storeProvider?.config?.pages?.[type] || {};
   return (
-    <PageContainer sx={{ maxWidth: '1000px' }} id="content">
+    <PageContainer variant="categorylist.pagecontainer" id="content">
       <Title>{pageConfig.label}</Title>
-      <ul>
-        {Object.keys(categories).map(key => (
-          <CategoryListItem
-            key={key}
-            link={storeProvider.getPagePath(type, key)}
-            name={key}
-            count={categories[key]}
-          />
-        ))}
-      </ul>
+      <Box variant="categorylist.list">
+        <ul>
+          {Object.keys(categories).map(key => (
+            <CategoryListItem
+              key={key}
+              link={storeProvider.getPagePath(type, key)}
+              name={key}
+              count={categories[key]}
+            />
+          ))}
+        </ul>
+      </Box>
     </PageContainer>
   );
 };

ui/app/src/CategoryList/CategoryListItem.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx } from 'theme-ui';
+import { jsx, Box } from 'theme-ui';
 import { Subtitle } from '@component-controls/components';
 import { Link } from '@component-controls/app-components';
 
@@ -15,10 +15,12 @@ export const CategoryListItem: FC<CategoryListItemProps> = ({
   link,
 }) => {
   return (
-    <li sx={{ my: 2 }}>
-      <Link href={link}>
-        <Subtitle>{`${name} (${count})`}</Subtitle>
-      </Link>
+    <li>
+      <Box variant="categorylist.item">
+        <Link href={link}>
+          <Subtitle>{`${name} (${count})`}</Subtitle>
+        </Link>
+      </Box>
     </li>
   );
 };

ui/app/src/CategoryPage/CategoryPage.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, useContext } from 'react';
-import { jsx, Box, Flex } from 'theme-ui';
+import { jsx, Box } from 'theme-ui';
 import { PageType } from '@component-controls/specification';
 import { Title, Subtitle } from '@component-controls/components';
 import { Link } from '@component-controls/app-components';
@@ -16,21 +16,15 @@ export const CategoryPage: FC<CategoryPageProps> = ({ type, category }) => {
   const pageConfig = storeProvider?.config?.pages?.[type] || {};
   const pages = storeProvider.getPagesByCategory(type, category);
   return (
-    <PageContainer sx={{ maxWidth: '1000px' }} id="content">
-      <Flex
-        sx={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
+    <PageContainer variant="categoryage.pagecontainer" id="content">
+      <Box variant="categoryage.titlecontainer">
         <Title>{pageConfig.label}</Title>
         <Link
           href={`/${pageConfig.basePath}`}
         >{`All ${pageConfig.label}`}</Link>
-      </Flex>
+      </Box>
       <Subtitle>{`filtered by "${category}"`}</Subtitle>
-      <Box sx={{ my: 3 }}>
+      <Box variant="categoryage.listcontainer">
         <DocumentsList pages={pages} />
       </Box>
     </PageContainer>