fix: update components docs

ccontrols · Mar 20, 2020 · 55c50fe · 55c50fe
1 parent b7c828f
commit 55c50fe
Show file tree

Hide file tree

Showing 23 changed files with 255 additions and 395 deletions.
diff --git a/scripts/insert-react-docgen-typescript.js b/scripts/insert-react-docgen-typescript.js
@@ -86,17 +86,16 @@ function insertTypescriptDocs(options) {
     const parser = withDefaultConfig(parserOptions);
 
     const getDirectories = (folder, excludeFiles, repoDir, newNodes) => {
-      const items = fs.readdirSync(folder, { withFileTypes: true });
+      const items = fs.readdirSync(folder, { withFileTypes: true })
+        .filter(entry => !excludeFiles.some(excluded => entry.name.match(new RegExp(excluded))));
       const files = items.filter(entry => !entry.isDirectory());
       for (const entry of files) {
-        if (excludeFiles.indexOf(entry.name) === -1) {
-          const propTables = parser.parse(path.join(folder, entry.name));
-          if (propTables && propTables.length > 0) {
-            propTables.forEach(propTable => {
-              const propNodes = propsToMDNodes(propTable, path.join(repoDir,entry.name ));
-              newNodes.push.apply(newNodes, propNodes);
-            })
-          }  
+        const propTables = parser.parse(path.join(folder, entry.name));
+        if (propTables && propTables.length > 0) {
+          propTables.forEach(propTable => {
+            const propNodes = propsToMDNodes(propTable, path.join(repoDir,entry.name ));
+            newNodes.push.apply(newNodes, propNodes);
+          })
         }  
       };
       items.filter(entry => entry.isDirectory())

diff --git a/ui/blocks/src/ComponentSource/ComponentSource.tsx b/ui/blocks/src/ComponentSource/ComponentSource.tsx
@@ -4,13 +4,16 @@ import { ComponentsContainer } from '../context/components/ComponentsContainer';
 import { ComponentInputProps } from '../context/components/ComponentsContext';
 import {
   ThemeContext,
-  Source as SourceBlock,
+  Source,
   SourceProps,
+  BlockContainer,
+  BlockContainerProps,
 } from '@component-controls/components';
 import { repositoryActions } from '../utils/repositoryActions';
 
 export type ComponentSourceProps = ComponentInputProps &
-  Omit<SourceProps, 'children'>;
+  Omit<SourceProps, 'children'> &
+  BlockContainerProps;
 
 /**
  * Displays import statement for a component as well as the component file source code
@@ -21,6 +24,7 @@ export type ComponentSourceProps = ComponentInputProps &
 export const ComponentSource: FC<ComponentSourceProps> = ({
   of,
   actions,
+  title,
   ...rest
 }) => {
   return (
@@ -64,9 +68,11 @@ export const ComponentSource: FC<ComponentSourceProps> = ({
           allActions.push.apply(allActions, actions);
         }
         return (
-          <SourceBlock dark={dark} {...rest} actions={allActions}>
-            {showFileSource ? component?.source : source}
-          </SourceBlock>
+          <BlockContainer title={title}>
+            <Source dark={dark} {...rest} actions={allActions}>
+              {showFileSource ? component?.source : source}
+            </Source>
+          </BlockContainer>
         );
       }}
     </ComponentsContainer>

diff --git a/ui/blocks/src/ControlsTable/ControlsTable.tsx b/ui/blocks/src/ControlsTable/ControlsTable.tsx
@@ -13,6 +13,7 @@ import {
 } from '@component-controls/core';
 import {
   BlockContainer,
+  ActionContainer,
   Tab,
   Tabs,
   TabList,
@@ -97,32 +98,34 @@ export const ControlsTable: FC<ControlsTableProps & {
       },
     ];
     return (
-      <BlockContainer actions={actionItems} title={title}>
-        <Box
-          sx={{
-            pt: 4,
-          }}
-        >
-          {groupedItems.length === 1 ? (
-            <SingleControlsTable
-              {...props}
-              controls={groupedItems[0].controls}
-            />
-          ) : (
-            <Tabs>
-              <TabList>
+      <BlockContainer title={title}>
+        <ActionContainer actions={actionItems}>
+          <Box
+            sx={{
+              pt: 4,
+            }}
+          >
+            {groupedItems.length === 1 ? (
+              <SingleControlsTable
+                {...props}
+                controls={groupedItems[0].controls}
+              />
+            ) : (
+              <Tabs>
+                <TabList>
+                  {groupedItems.map(item => (
+                    <Tab key={`tab_${item.label}`}>{item.label}</Tab>
+                  ))}
+                </TabList>
                 {groupedItems.map(item => (
-                  <Tab key={`tab_${item.label}`}>{item.label}</Tab>
+                  <TabPanel key={`tab_panel_${item.label}`}>
+                    <SingleControlsTable {...props} controls={item.controls} />
+                  </TabPanel>
                 ))}
-              </TabList>
-              {groupedItems.map(item => (
-                <TabPanel key={`tab_panel_${item.label}`}>
-                  <SingleControlsTable {...props} controls={item.controls} />
-                </TabPanel>
-              ))}
-            </Tabs>
-          )}
-        </Box>
+              </Tabs>
+            )}
+          </Box>
+        </ActionContainer>
       </BlockContainer>
     );
   }

diff --git a/ui/blocks/src/PropsTable/block/BlockPropsTable.tsx b/ui/blocks/src/PropsTable/block/BlockPropsTable.tsx
@@ -2,11 +2,15 @@ import React, { FC, useState } from 'react';
 import {
   BlockContainer,
   BlockContainerProps,
+  ActionContainer,
+  ActionContainerProps,
   ActionItem,
 } from '@component-controls/components';
 import { PropsTable, PropsTableProps } from '../plain';
 
-export type BlockPropsTableProps = PropsTableProps & BlockContainerProps;
+export type BlockPropsTableProps = PropsTableProps &
+  BlockContainerProps &
+  ActionContainerProps;
 
 export const BlockPropsTable: FC<BlockPropsTableProps> = ({
   title,
@@ -24,20 +28,10 @@ export const BlockPropsTable: FC<BlockPropsTableProps> = ({
     allActions.push.apply(allActions, actions);
   }
   // add some padding for the actions bar
-  const propsTable = (
-    <PropsTable
-      css={{
-        'thead tr:first-of-type>th': {
-          paddingTop: 26,
-        },
-      }}
-      filtering={filtering}
-      {...rest}
-    />
-  );
+  const propsTable = <PropsTable filtering={filtering} {...rest} />;
   return propsTable ? (
-    <BlockContainer actions={allActions} title={title}>
-      {propsTable}
+    <BlockContainer title={title}>
+      <ActionContainer actions={allActions}>{propsTable}</ActionContainer>
     </BlockContainer>
   ) : null;
 };
diff --git a/ui/blocks/src/StorySource/PureStorySource.stories.tsx b/ui/blocks/src/StorySource/PureStorySource.stories.tsx
@@ -11,7 +11,7 @@ export default {
   component: PureStorySource,
 };
 
-export const simpleSource = ({
+export const overview = ({
   language,
   children,
   theme,
@@ -58,7 +58,7 @@ const languages: string[] = [
   'yaml',
 ];
 
-simpleSource.story = {
+overview.story = {
   controls: {
     language: { type: 'options', options: languages, value: 'jsx' },
     children: {