feat: home page for documentation

core/instrument/src/misc/mdx-exports.ts

@@ -49,5 +49,5 @@ export const extractStoryExports = (exports?: MDXExportTypes): string => {
       return `${defaultExportCode}\n${storiesExports.join('\n')}`;
     }
   }
-  return '';
+  return 'export default { MDXPage: () => <MDXContent /> };';
 };

core/specification/src/stories.ts

@@ -241,6 +241,15 @@ export interface StoriesDoc {
    */
   MDXPage?: any;
 
+  /**
+   * if true, will display the documentation page full view
+   */
+  fullPage?: boolean;
+
+  /**
+   * side menu - hide
+   */
+  menu?: boolean | string;
   [name: string]: any;
 }
 

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

@@ -1,8 +1,19 @@
 ---
 title: Home
 route: /
+fullPage: true
+menu: false
 ---
 
-# Home Page
+import { jsx, Flex, Heading, Text } from 'theme-ui';
+
+<Flex sx={{ minHeight: '300px', width: '100%', alignItems: 'center', backgroundColor: 'primary', color: 'white' }}>
+  <Flex sx={{ flexDirection: 'column', alignItems: 'center', width: '100%'}}>
+    <Heading as='h1'>component-controls</Heading>
+    <Text>
+      design -> develop -> test
+    </Text>  
+  </Flex>  
+</Flex>
 
 This is some text

ui/app/src/Page/Page.tsx

@@ -3,7 +3,7 @@ import { FC, ReactNode, Fragment, useRef } from 'react';
 import { jsx, Container } from 'theme-ui';
 import * as qs from 'qs';
 import { Tabs, Tab, TabList, TabPanel } from '@component-controls/components';
-import { PageContainer } from '@component-controls/blocks';
+import { PageContainer, useStoryContext } from '@component-controls/blocks';
 import { SideContext } from '../SideContext';
 export interface PageConfig {
   key: string;
@@ -16,7 +16,7 @@ export type PagesConfig = (route: string) => PageConfig[];
 export interface PageProps {
   pagesFn: PagesConfig;
 }
-export const Page: FC<PageProps> = ({ pagesFn }) => {
+export const BasePage: FC<PageProps> = ({ pagesFn }) => {
   const pages = typeof pagesFn === 'function' ? pagesFn('') : [];
   const pageRef = useRef<HTMLDivElement>(null);
   const params =
@@ -67,3 +67,11 @@ export const Page: FC<PageProps> = ({ pagesFn }) => {
     </Fragment>
   );
 };
+
+export const Page: FC<PageProps> = props => {
+  const { doc } = useStoryContext({ id: '.' });
+  if (doc && doc.fullPage && doc.MDXPage) {
+    return <PageContainer maxWidth="100%" padding={0} />;
+  }
+  return <BasePage {...props} />;
+};

ui/app/src/Sidebar/Sidebar.tsx

@@ -2,7 +2,7 @@
 import { FC, useState, useMemo, useContext } from 'react';
 import { jsx, Input, Box, Theme } from 'theme-ui';
 
-import { BlockContext } from '@component-controls/blocks';
+import { BlockContext, useStoryContext } from '@component-controls/blocks';
 import {
   Sidebar as AppSidebar,
   ColorMode,
@@ -63,7 +63,15 @@ const createMenuItem = (
     newItem,
   );
 };
-export const Sidebar: FC<SidebarProps> = ({ docPath, buttonClass, title }) => {
+export const SidebarBase: FC<SidebarProps> = ({
+  docPath,
+  buttonClass,
+  title,
+}) => {
+  const { doc } = useStoryContext({ id: '.' });
+  if (doc && doc.fullPage) {
+    return null;
+  }
   const { SidebarClose, responsive } = useContext(SidebarContext);
   const { storeProvider } = useContext(BlockContext);
   const menuItems = useMemo(() => {
@@ -73,7 +81,9 @@ export const Sidebar: FC<SidebarProps> = ({ docPath, buttonClass, title }) => {
       const menuItems = docTitles.reduce((acc: MenuItems, title: string) => {
         const levels = title.split('/');
         const doc = docs[title];
-        createMenuItem(levels, levels, doc?.route, acc);
+        if (doc.menu !== false) {
+          createMenuItem(levels, levels, doc?.route, acc);
+        }
         return acc;
       }, []);
       return menuItems;
@@ -116,3 +126,11 @@ export const Sidebar: FC<SidebarProps> = ({ docPath, buttonClass, title }) => {
     </AppSidebar>
   );
 };
+
+export const Sidebar: FC<SidebarProps> = props => {
+  const { doc } = useStoryContext({ id: '.' });
+  if (doc && doc.fullPage) {
+    return null;
+  }
+  return <SidebarBase {...props} />;
+};

ui/blocks/src/PageContainer/PageContainer.tsx

@@ -18,6 +18,11 @@ export interface PageContainerProps {
    */
   maxWidth?: number | string;
 
+  /**
+   * container padding
+   */
+  padding?: number;
+
   /**
    * ref to the page container component
    */
@@ -30,7 +35,10 @@ export interface PageContainerProps {
  * Otherwise, the page elements are passed as children
  */
 export const PageContainer: FC<PageContainerProps> = forwardRef(
-  ({ children, components = {}, maxWidth }, ref: React.Ref<HTMLDivElement>) => {
+  (
+    { children, components = {}, maxWidth, padding = 4 },
+    ref: React.Ref<HTMLDivElement>,
+  ) => {
     useEffect(() => {
       try {
         const pageURL =
@@ -62,14 +70,16 @@ export const PageContainer: FC<PageContainerProps> = forwardRef(
         sx={{
           display: 'flex',
           justifyContent: 'center',
-          px: 4,
-          py: 4,
           bg: 'background',
           color: 'text',
           fontFamily: 'body',
+          width: '100%',
         }}
       >
-        <Box sx={{ maxWidth, width: '100%', position: 'relative' }} ref={ref}>
+        <Box
+          sx={{ maxWidth, width: '100%', p: padding, position: 'relative' }}
+          ref={ref}
+        >
           <StoryContextConsumer id=".">
             {({ doc }) => {
               const { MDXPage } = doc || {};