fix: container per page type

ccontrols · Jun 16, 2020 · ac7b9a2 · ac7b9a2
1 parent 7095bf4
commit ac7b9a2
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 20 deletions.
diff --git a/core/core/src/configuration.ts b/core/core/src/configuration.ts
@@ -29,6 +29,11 @@ export interface PageConfiguration {
    * whether to add to the top navigation menu
    */
   topMenu?: boolean;
+
+  /**
+   * page container react component
+   */
+  container?: ComponentType | null;
 }
 
 export type PagesConfiguration = Record<PageType, PageConfiguration>;
@@ -129,11 +134,6 @@ export interface RunOnlyConfiguration {
    * story sorting function
    */
   storySort?: (a: string, b: string) => number;
-
-  /**
-   * page container react component
-   */
-  container?: ComponentType;
 }
 
 export type RunConfiguration = RunOnlyConfiguration &
@@ -165,6 +165,7 @@ export const defaultRunConfig: RunConfiguration = {
     },
     page: {
       label: 'Page',
+      container: null,
     },
     tags: {
       label: 'Tags',

diff --git a/core/webpack-compile/src/utilities.ts b/core/webpack-compile/src/utilities.ts
@@ -68,13 +68,15 @@ const createConfig = (options: CompileRunProps): webpack.Configuration => {
         ),
         'broadcast-channel': require.resolve('broadcast-channel'),
         'theme-ui': require.resolve('theme-ui'),
+        'axe-core': require.resolve('axe-core'),
         '@theme-ui/presets': require.resolve('@theme-ui/presets'),
         '@theme-ui/core': require.resolve('@theme-ui/core'),
         '@theme-ui/css': require.resolve('@theme-ui/css'),
 
         'prism-react-renderer': require.resolve('prism-react-renderer'),
         'react-helmet': require.resolve('react-helmet'),
         'react-table': require.resolve('react-table'),
+        'react-color': require.resolve('react-color/lib'),
         'react-tabs': require.resolve('react-tabs'),
         'react-switch': require.resolve('react-switch'),
         'react-popper': require.resolve('react-popper'),
@@ -114,13 +116,15 @@ const createConfig = (options: CompileRunProps): webpack.Configuration => {
       '@theme-ui/presets': '@theme-ui/presets',
       '@theme-ui/core': '@theme-ui/core',
       '@theme-ui/css': '@theme-ui/css',
+      'axe-core': 'axe-core',
       polished: 'polished',
       lodash: 'lodash',
       'broadcast-channel': 'broadcast-channel',
       'prism-react-renderer/themes': 'prism-react-renderer/themes',
       'prism-react-renderer': 'prism-react-renderer',
       'react-helmet': 'react-helmet',
       'react-table': 'react-table',
+      'react-color/lib': 'react-color/lib',
       'react-tabs': 'react-tabs',
       'react-switch': 'react-switch',
       'react-popper': 'react-popper',

diff --git a/examples/gatsby/.config/buildtime.js b/examples/gatsby/.config/buildtime.js
@@ -9,6 +9,11 @@ module.exports = {
     '../src/stories/*.stories.(js|jsx|tsx|mdx)',
     '../../../ui/app/src/**/*.stories.(js|jsx|tsx|mdx)',
     '../../../ui/components/src/**/*.stories.(js|jsx|tsx|mdx)',
+
+    //'../../../ui/blocks/src/**/*.stories.(js|jsx|tsx|mdx)',
+    //'../../../core/core/src/stories/**/*.stories.(js|jsx|tsx|mdx)',
+    //'../../../ui/editors/src/**/*.stories.(js|jsx|tsx|mdx)',
+    //'../../../plugins/axe-plugin/src/stories/**/*.stories.(js|jsx|tsx|mdx)',
   ],
   pages: {
     story: {

diff --git a/ui/app/src/CategoryList/CategoryList.tsx b/ui/app/src/CategoryList/CategoryList.tsx
@@ -22,7 +22,11 @@ export const CategoryList: FC<CategoryListProps> = ({ type }) => {
   const categories = storeProvider?.getUniquesByCategory(type) || [];
   const pageConfig = storeProvider?.config?.pages?.[type] || {};
   return (
-    <PageContainer variant="categorylist.pagecontainer" id="content">
+    <PageContainer
+      type={type}
+      variant="categorylist.pagecontainer"
+      id="content"
+    >
       <Title>{pageConfig.label}</Title>
       <Box variant="categorylist.list">
         <ul>

diff --git a/ui/app/src/CategoryPage/CategoryPage.tsx b/ui/app/src/CategoryPage/CategoryPage.tsx
@@ -19,7 +19,11 @@ export const CategoryPage: FC<CategoryPageProps> = ({ type, category }) => {
   const Page =
     customPage && customPage.type === type ? customPage.MDXPage : undefined;
   return (
-    <PageContainer variant="categorypage.pagecontainer" id="content">
+    <PageContainer
+      type={type}
+      variant="categorypage.pagecontainer"
+      id="content"
+    >
       <Box variant="categorypage.titlecontainer">
         <Title>{category}</Title>
         <Link

diff --git a/ui/app/src/DocPage/DocPage.tsx b/ui/app/src/DocPage/DocPage.tsx
@@ -25,6 +25,7 @@ export const DocPage: FC<DocPageProps> = ({ type = 'story', ...props }) => {
   if (hasNoSideBars || isFullPage) {
     return (
       <PageContainer
+        type={type}
         variant={`pagecontainer.${isFullPage ? 'full' : type}`}
         id="content"
       />

diff --git a/ui/app/src/PageContainer/PageContainer.tsx b/ui/app/src/PageContainer/PageContainer.tsx
@@ -2,15 +2,28 @@ import React, { FC, useContext, forwardRef } from 'react';
 import {
   BlockContext,
   PageContainer as BlockPageContainer,
-  PageContainerProps,
+  PageContainerProps as BlockPageContainerProps,
 } from '@component-controls/blocks';
+import { PageType } from '@component-controls/core';
+
 import { Container as DefaultContainer } from '../Container';
 
-export const PageContainer: FC<Omit<
-  PageContainerProps,
-  'wrapper'
->> = forwardRef((props, ref: React.Ref<HTMLDivElement>) => {
-  const { storeProvider } = useContext(BlockContext);
-  const { container = DefaultContainer } = storeProvider.config || {};
-  return <BlockPageContainer ref={ref} wrapper={container} {...props} />;
-});
+export type PageContainerProps = {
+  /**
+   * page type
+   */
+  type: PageType;
+} & Omit<BlockPageContainerProps, 'wrapper'>;
+
+/**
+ * page container to enhance the inner page wrapper
+ */
+export const PageContainer: FC<PageContainerProps> = forwardRef(
+  ({ type, ...props }, ref: React.Ref<HTMLDivElement>) => {
+    const { storeProvider } = useContext(BlockContext);
+    const { pages } = storeProvider.config || {};
+    const page = pages ? pages[type] : undefined;
+    const { container = DefaultContainer } = page || {};
+    return <BlockPageContainer ref={ref} wrapper={container} {...props} />;
+  },
+);
diff --git a/ui/app/src/PageList/PageList.tsx b/ui/app/src/PageList/PageList.tsx
@@ -19,7 +19,7 @@ export const PageList: FC<PageListProps> = ({ type }) => {
   const pages = storeProvider?.getPageList(type) || [];
   const pageConfig = storeProvider?.config?.pages?.[type] || {};
   return (
-    <PageContainer sx={{ maxWidth: '1000px' }} id="content">
+    <PageContainer variant="pagelist.container" type={type} id="content">
       <Title>{pageConfig.label}</Title>
       <DocumentsList pages={pages} />
     </PageContainer>

diff --git a/ui/app/src/SidebarsPage/SidebarsMDXPage.tsx b/ui/app/src/SidebarsPage/SidebarsMDXPage.tsx
@@ -20,7 +20,7 @@ export const SidebarsMDXPage: FC<SidebarsMDXPageProps> = ({ type }) => {
     <Box variant="appsidebarpage.mdxcontainer">
       <Sidebar type={type} />
       <Box sx={{ flexGrow: 1 }} id="content">
-        <PageContainer variant={`pagecontainer.${type}`} />
+        <PageContainer type={type} variant={`pagecontainer.${type}`} />
       </Box>
     </Box>
   );

diff --git a/ui/app/src/SidebarsPage/SidebarsStoryPage.tsx b/ui/app/src/SidebarsPage/SidebarsStoryPage.tsx
@@ -76,7 +76,11 @@ export const SidebarsStoryPage: FC<DocPageProps> = ({ pagesFn, type }) => {
             </TabList>
           )}
 
-          <PageContainer variant={`pagecontainer.${type}`} ref={pageRef}>
+          <PageContainer
+            type={type}
+            variant={`pagecontainer.${type}`}
+            ref={pageRef}
+          >
             {pages &&
               pages.map(page => (
                 <TabPanel key={`panel_${page.key}`}>{page.render()}</TabPanel>

diff --git a/ui/blocks/src/PageContainer/PageContainer.tsx b/ui/blocks/src/PageContainer/PageContainer.tsx
@@ -20,7 +20,7 @@ export interface PageContainerOwnProps {
   /**
    * inner wrapper container
    */
-  wrapper?: ComponentType;
+  wrapper?: ComponentType | null;
 }
 
 export type PageContainerProps = PageContainerOwnProps &

diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -602,6 +602,9 @@ export const theme: Theme = {
     list: {},
     item: { my: 2 },
   },
+  pagelist: {
+    container: { maxWidth: '1000px' },
+  },
   categorypage: {
     pagecontainer: { maxWidth: '1000px' },
     titlecontainer: {