fix: update page tabs from build config

ccontrols · Aug 18, 2020 · b2551e7 · b2551e7
1 parent 28da119
commit b2551e7
Show file tree

Hide file tree

Showing 13 changed files with 203 additions and 116 deletions.
diff --git a/core/store/src/create-pages/pages-paths.ts b/core/store/src/create-pages/pages-paths.ts
@@ -138,11 +138,16 @@ export const getDocPages = (store: Store): DocPagesPath[] => {
       const page = pages[type as DocType];
       const docType = type as DocType;
       const docs: Pages = getPageList(store, docType);
-      const tabs: Pick<TabConfiguration, 'route'>[] = page.tabs || [
-        { route: undefined },
+      const tabs: Pick<TabConfiguration, 'route' | 'title'>[] = page.tabs || [
+        { route: undefined, title: '' },
       ];
       tabs.forEach((tab, tabIndex) => {
-        const route = tabIndex > 0 ? tab.route : undefined;
+        const route =
+          tabIndex > 0
+            ? tab.route || tab.title
+              ? tab.title.toLowerCase()
+              : ''
+            : undefined;
         docs.forEach(doc => {
           if (doc.route !== '/') {
             const stories =

diff --git a/core/store/src/serialization/load-store.ts b/core/store/src/serialization/load-store.ts
@@ -32,8 +32,8 @@ export const loadStore = (store: LoadingStore): Store => {
     } = store;
     if (stores) {
       globalStore.config = deepMergeArrays(
-        buildConfig,
-        deepMergeArrays(defaultRunConfig, config),
+        defaultRunConfig,
+        deepMergeArrays(buildConfig, config),
       );
       stores.forEach(s => {
         const storeDoc = s.doc;

diff --git a/examples/gatsby/.config/runtime.tsx b/examples/gatsby/.config/runtime.tsx
@@ -21,12 +21,6 @@ const config: RunOnlyConfiguration = {
   pages: {
     story: {
       label: 'API',
-      tabs: [
-        { title: 'Documentation', type: 'ClassicPage' },
-        { title: 'Testing', type: 'TestingPage' },
-        { title: 'Viewport', type: 'ViewportPage' },
-      ],
-
     },
     tutorial: {
       label: 'Tutorial',

diff --git a/examples/starter/.config/buildtime.js b/examples/starter/.config/buildtime.js
@@ -14,6 +14,15 @@ module.exports = {
       ]
     };
   },
+  pages: {
+    story: {
+      tabs: [
+        { title: 'Documentation', type: 'ClassicPage' },
+        { title: 'Testing', type: 'TestingPage' },
+        { title: 'Viewport', type: 'ViewportPage' },
+      ],
+    },
+  },
   instrument: {
     components: {
       package: {

diff --git a/examples/starter/.config/runtime.js b/examples/starter/.config/runtime.js
diff --git a/examples/starter/.config/runtime.tsx b/examples/starter/.config/runtime.tsx
@@ -0,0 +1,9 @@
+import { RunOnlyConfiguration } from "@component-controls/core";
+
+const config: RunOnlyConfiguration = {
+  siteTitle: `awLib`,
+  siteDescription: `Some description meta.`,
+  author: 'my name',
+};
+
+export default config;
diff --git a/examples/starter/package.json b/examples/starter/package.json
@@ -25,7 +25,6 @@
     "next": "^9.5.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "theme-ui": "^0.4.0-rc.1",
     "webpack-bundle-analyzer": "^3.8.0"
   }
 }
diff --git a/integrations/storybook/rollup.config.js b/integrations/storybook/rollup.config.js
@@ -10,6 +10,5 @@ export default config({
     './src/register-storyconfig-panel.tsx',
     './src//docs-page/full-page.tsx',
     './src//docs-page/testing-page.tsx',
-    './src//docs-page/viewport-page.tsx',
   ],
 });
diff --git a/integrations/storybook/src/docs-page/viewport-page.tsx b/integrations/storybook/src/docs-page/viewport-page.tsx
diff --git a/integrations/storybook/src/preset.ts b/integrations/storybook/src/preset.ts
@@ -14,7 +14,6 @@ module.exports = {
     const pages = customPages || [
       require.resolve('./full-page'),
       require.resolve('./testing-page'),
-      require.resolve('./viewport-page'),
     ];
     if (pages.length) {
       return [

diff --git a/plugins/viewport-plugin/src/index.tsx b/plugins/viewport-plugin/src/index.tsx
@@ -6,72 +6,75 @@ import {
   Story,
   StoryBlockContainerProps,
 } from '@component-controls/blocks';
-
+import { useStory, StoryInputProps } from '@component-controls/store';
 import { ActionContainer } from '@component-controls/components';
 
-export const ViewportBlock: FC<StoryBlockContainerProps> = props => {
+export const ViewportBlock: FC<StoryBlockContainerProps & StoryInputProps> = ({
+  id,
+  name,
+  ...props
+}) => {
+  const story = useStory({ id, name });
   const [showXSmall, setShowXSmall] = useState(true);
   const [showSmall, setShowSmall] = useState(true);
   const [showMed, setShowMed] = useState(true);
-  return (
-    <StoryBlockContainer {...props}>
-      {({ story: { id: storyId } = {} }) => (
-        <ActionContainer
-          actions={[
-            { node: 'medium', onClick: () => setShowMed(!showMed) },
-            { node: 'small', onClick: () => setShowSmall(!showSmall) },
-            { node: 'xtra-small', onClick: () => setShowXSmall(!showXSmall) },
-          ]}
-          plain={true}
+  return story ? (
+    <StoryBlockContainer story={story} {...props}>
+      <ActionContainer
+        actions={[
+          { node: 'medium', onClick: () => setShowMed(!showMed) },
+          { node: 'small', onClick: () => setShowSmall(!showSmall) },
+          { node: 'xtra-small', onClick: () => setShowXSmall(!showXSmall) },
+        ]}
+        plain={true}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            minHeight: '250px',
+            height: 'fit-content',
+            width: '100%',
+            overflow: 'auto',
+            p: 1,
+            boxShadow: (t: Theme) => `0px 2px 6px 0px ${t.colors?.shadow}`,
+          }}
         >
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'row',
-              minHeight: '250px',
+              minWidth: '250px',
+              height: 'fit-content',
+              m: 1,
+              boxShadow: (t: Theme) => `0px 2px 6px 0px ${t.colors?.shadow}`,
+            }}
+            hidden={!showXSmall}
+          >
+            <Story id={story.id} />
+          </Box>
+          <Box
+            sx={{
+              minWidth: '500px',
+              height: 'fit-content',
+              m: 1,
+              boxShadow: (t: Theme) => `0px 2px 6px 0px ${t.colors?.shadow}`,
+            }}
+            hidden={!showSmall}
+          >
+            <Story id={story.id} />
+          </Box>
+          <Box
+            sx={{
+              minWidth: '900px',
               height: 'fit-content',
-              width: '100%',
-              overflow: 'auto',
-              p: 1,
+              m: 1,
               boxShadow: (t: Theme) => `0px 2px 6px 0px ${t.colors?.shadow}`,
             }}
+            hidden={!showMed}
           >
-            <Box
-              sx={{
-                minWidth: '250px',
-                height: 'fit-content',
-                m: 1,
-                boxShadow: (t: Theme) => `0px 2px 6px 0px ${t.colors?.shadow}`,
-              }}
-              hidden={!showXSmall}
-            >
-              <Story id={storyId} />
-            </Box>
-            <Box
-              sx={{
-                minWidth: '500px',
-                height: 'fit-content',
-                m: 1,
-                boxShadow: (t: Theme) => `0px 2px 6px 0px ${t.colors?.shadow}`,
-              }}
-              hidden={!showSmall}
-            >
-              <Story id={storyId} />
-            </Box>
-            <Box
-              sx={{
-                minWidth: '900px',
-                height: 'fit-content',
-                m: 1,
-                boxShadow: (t: Theme) => `0px 2px 6px 0px ${t.colors?.shadow}`,
-              }}
-              hidden={!showMed}
-            >
-              <Story id={storyId} />
-            </Box>
+            <Story id={story.id} />
           </Box>
-        </ActionContainer>
-      )}
+        </Box>
+      </ActionContainer>
     </StoryBlockContainer>
-  );
+  ) : null;
 };
diff --git a/ui/app/src/SidebarsPage/SidebarsStoryPage.tsx b/ui/app/src/SidebarsPage/SidebarsStoryPage.tsx
@@ -48,7 +48,10 @@ export const SidebarsStoryPage: FC<DocPageProps> = ({ type, doc }) => {
     : undefined;
   const pageRef = useRef<HTMLDivElement>(null);
   const tabIndex = Math.max(
-    tabs.findIndex(tab => tab.route === selectedTab),
+    tabs.findIndex(tab => {
+      const route = tab.route || tab.title ? tab.title.toLowerCase() : '';
+      return route === selectedTab;
+    }),
     0,
   );
   const renderTab = (tab: TabConfiguration) => {
@@ -71,23 +74,27 @@ export const SidebarsStoryPage: FC<DocPageProps> = ({ type, doc }) => {
         <Tabs fontSize={2} defaultIndex={tabIndex}>
           {tabs && tabs.length > 1 && (
             <TabList>
-              {tabs.map((tab, tabIndex) => (
-                <Tab key={`tab_${tab.route}`}>
-                  <Link
-                    href={
-                      docId
-                        ? getDocumentPath(
-                            type,
-                            docId,
-                            tabIndex > 0 ? tab.route : undefined,
-                          )
-                        : '#'
-                    }
-                  >
-                    {tab.title}
-                  </Link>
-                </Tab>
-              ))}
+              {tabs.map((tab, tabIndex) => {
+                const route =
+                  tab.route || tab.title ? tab.title.toLowerCase() : '';
+                return (
+                  <Tab key={`tab_${route}`}>
+                    <Link
+                      href={
+                        docId
+                          ? getDocumentPath(
+                              type,
+                              docId,
+                              tabIndex > 0 ? route : undefined,
+                            )
+                          : '#'
+                      }
+                    >
+                      {tab.title}
+                    </Link>
+                  </Tab>
+                );
+              })}
             </TabList>
           )}
 
@@ -97,11 +104,15 @@ export const SidebarsStoryPage: FC<DocPageProps> = ({ type, doc }) => {
             ref={pageRef}
           >
             {tabs &&
-              tabs.map((tab, index) => (
-                <TabPanel key={`panel_${tab.route}`}>
-                  {tabIndex === index ? renderTab(tab) : null}
-                </TabPanel>
-              ))}
+              tabs.map((tab, index) => {
+                const route =
+                  tab.route || tab.title ? tab.title.toLowerCase() : '';
+                return (
+                  <TabPanel key={`panel_${route}`}>
+                    {tabIndex === index ? renderTab(tab) : null}
+                  </TabPanel>
+                );
+              })}
           </PageContainer>
         </Tabs>
       </Box>