feat: props and controls table visibility

ccontrols · Aug 8, 2020 · f46e8be · f46e8be
1 parent b25be1d
commit f46e8be
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 39 deletions.
diff --git a/core/core/src/configuration.ts b/core/core/src/configuration.ts
@@ -153,6 +153,18 @@ export interface ToolbarConfig {
    */
   right?: ActionItems;
 }
+
+/**
+ * configuration options for the controls module
+ */
+export interface ControlsConfig {
+  /**
+   * threshold for when to display the controls in their own table
+   * separate from the props table
+   */
+  threshold?: number;
+}
+
 /**
  * global configuration used at build time
  * stored in a file named main.js/main.ts
@@ -226,6 +238,11 @@ export interface RunOnlyConfiguration {
    * custom sidebar items
    */
   sidebar?: ActionItems;
+
+  /**
+   * controls module configuration options
+   */
+  controls?: ControlsConfig;
   /**
    * custom props to components
    * ex:
@@ -250,6 +267,9 @@ export const defaultRunConfig: RunConfiguration = {
     'Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site.',
   siteLanguage: 'en',
   author: '@component-controls',
+  controls: {
+    threshold: 10,
+  },
   pages: {
     story: {
       label: 'Docs',

diff --git a/core/core/src/controls-utils.ts b/core/core/src/controls-utils.ts
@@ -191,10 +191,9 @@ export const visibleControls = (
         )
     : {};
 
-export const hasControls = (controls?: ComponentControls): boolean =>
-  controls && typeof controls === 'object'
-    ? !!Object.keys(controls).filter(key => !controls[key].hidden).length
-    : false;
+export const getControlsCount = (controls?: ComponentControls): number =>
+  controls ? Object.keys(controls).length : 0;
+
 export const newControlValues = (
   controls: ComponentControls,
 ): ComponentControls => {

diff --git a/ui/app/src/Header/Header.tsx b/ui/app/src/Header/Header.tsx
@@ -51,6 +51,7 @@ export const Header: FC<HeaderProps> = ({ toolbar = {} }) => {
               const docInfo = docCounts[docType];
               return (
                 page.topMenu &&
+                docInfo &&
                 docInfo.count &&
                 homePage.docId !== docInfo.home?.title
               );

diff --git a/ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx b/ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx
@@ -6,7 +6,7 @@ import {
 
 import {
   getComponentName,
-  hasControls,
+  getControlsCount,
   CURRENT_STORY,
   Story,
   Component,
@@ -67,10 +67,11 @@ export const ComponentsBlockContainer: FC<ComponentsBlockContainerProps> = ({
 
   const keys =
     components && visibility !== 'controls' ? Object.keys(components) : [];
+  console.log(story?.controls);
   if (
     keys.length === 0 &&
     visibility !== 'info' &&
-    hasControls(story?.controls)
+    getControlsCount(story?.controls) > 0
   ) {
     keys.push('Controls');
   }

diff --git a/ui/blocks/src/PropsTable/BasePropsTable.tsx b/ui/blocks/src/PropsTable/BasePropsTable.tsx
@@ -38,6 +38,10 @@ interface PropRow {
 export interface BasePropsTableProps {
   component?: Component;
   extraColumns: Column[];
+  /**
+   * if true, will flatten the group by
+   */
+  flat?: boolean;
   tableProps: any;
   visibility?: ComponentVisibility;
 }
@@ -50,6 +54,7 @@ export const BasePropsTable: FC<BasePropsTableProps> = ({
   extraColumns,
   tableProps,
   visibility,
+  flat,
 }) => {
   const [copied, setCopied] = useState(false);
   const story = useCurrentStory();
@@ -130,16 +135,18 @@ export const BasePropsTable: FC<BasePropsTableProps> = ({
         rows.unshift.apply(rows, controlsRows);
       }
       const groupProps: GroupingProps = {};
-      if (parents.size > 1) {
-        const firstRowWithParent = rows.find(row => row?.prop.parentName);
-        if (firstRowWithParent) {
-          groupProps.expanded = {
-            [`prop.parentName:${firstRowWithParent.prop.parentName}`]: true,
-          };
+      if (!flat) {
+        if (parents.size > 1) {
+          const firstRowWithParent = rows.find(row => row?.prop.parentName);
+          if (firstRowWithParent) {
+            groupProps.expanded = {
+              [`prop.parentName:${firstRowWithParent.prop.parentName}`]: true,
+            };
+          }
+          groupProps.groupBy = ['prop.parentName'];
+        } else {
+          groupProps.hiddenColumns = ['prop.parentName'];
         }
-        groupProps.groupBy = ['prop.parentName'];
-      } else {
-        groupProps.hiddenColumns = ['prop.parentName'];
       }
       const columns = [
         {

diff --git a/ui/blocks/src/PropsTable/PropsTable.tsx b/ui/blocks/src/PropsTable/PropsTable.tsx
@@ -20,6 +20,10 @@ export interface PropsTableOwnProps {
    * extra custom columns passed to the PropsTable.
    */
   extraColumns?: Column[];
+  /**
+   * if true, will flatten the group by
+   */
+  flat?: boolean;
 }
 export type PropsTableProps = PropsTableOwnProps &
   Omit<ComponentsBlockContainerProps, 'children'> &
@@ -32,7 +36,7 @@ const NAME = 'propstable';
  */
 export const PropsTable: FC<PropsTableProps> = props => {
   const custom = useCustomProps<PropsTableProps>(NAME, props);
-  const { extraColumns = [], visibility = 'all', ...rest } = custom;
+  const { extraColumns = [], visibility = 'all', flat, ...rest } = custom;
 
   return (
     <ComponentsBlockContainer
@@ -47,6 +51,7 @@ export const PropsTable: FC<PropsTableProps> = props => {
             visibility={visibility}
             extraColumns={extraColumns}
             tableProps={tableProps}
+            flat={flat}
           />
         );
         return story ? (

diff --git a/ui/pages/src/ClassicPage/ClassicPage.tsx b/ui/pages/src/ClassicPage/ClassicPage.tsx
@@ -11,17 +11,52 @@ import {
   PropsTable,
   PackageVersion,
 } from '@component-controls/blocks';
+import { getControlsCount } from '@component-controls/core';
+import {
+  useCurrentStory,
+  useComponents,
+  useStore,
+  useCurrentDocument,
+} from '@component-controls/store';
 
-export const ClassicPage: FC = () => (
-  <div>
-    <PackageVersion />
-    <Description />
-    <ComponentSource id="." title="Component" />
-    <Playground title=".">
-      <Story id="." />
-    </Playground>
-    <PropsTable of="." title="Properties" visibility="all" />
-    <ComponentDeps id="." title="External dependencies" />
-    <Stories dark={true} />
-  </div>
-);
+export const ClassicPage: FC = () => {
+  const store = useStore();
+  const { controls: { threshold = 10 } = {} } = store.config;
+  const story = useCurrentStory();
+  const doc = useCurrentDocument();
+  const controlsCount = getControlsCount(story?.controls);
+  const components = useComponents({ of: '.' });
+  const propsCount =
+    components && doc
+      ? Object.keys(components).reduce((acc, key) => {
+          const component = store.components[doc.componentsLookup[key]];
+          return acc + Object.keys(component.info?.props || {}).length;
+        }, 0)
+      : 0;
+  const splitControls =
+    controlsCount > 0 &&
+    controlsCount < threshold &&
+    (propsCount === 0 ||
+      (controlsCount < propsCount && propsCount > threshold));
+  return (
+    <div>
+      <PackageVersion />
+      <Description />
+      <ComponentSource id="." title="Component" />
+      <Playground title=".">
+        <Story id="." />
+      </Playground>
+      {splitControls && (
+        <PropsTable of="." title="Controls" visibility="controls" />
+      )}
+      <PropsTable
+        of="."
+        title="Properties"
+        flat={propsCount < threshold}
+        visibility={splitControls ? 'info' : 'all'}
+      />
+      <ComponentDeps id="." title="External dependencies" />
+      <Stories dark={true} />
+    </div>
+  );
+};
diff --git a/ui/pages/src/TestingPage/TestingPage.tsx b/ui/pages/src/TestingPage/TestingPage.tsx
@@ -5,15 +5,26 @@ import {
   Story,
   Description,
 } from '@component-controls/blocks';
+import { getControlsCount } from '@component-controls/core';
+import { useCurrentStory } from '@component-controls/store';
+
 import { AxeAllyBlock } from '@component-controls/axe-plugin';
-export const TestingPage: FC = () => (
-  <>
-    <Description />
-    <Playground title=".">
-      <Story id="." />
-    </Playground>
+export const TestingPage: FC = () => {
+  const story = useCurrentStory();
+  const hasControls = getControlsCount(story?.controls) > 0;
+  return (
+    <>
+      <Description />
+      {hasControls && (
+        <>
+          <Playground title=".">
+            <Story id="." />
+          </Playground>
 
-    <PropsTable of="." title="Controls" visibility="controls" />
-    <AxeAllyBlock title="A11y tests" />
-  </>
-);
+          <PropsTable of="." title="Controls" visibility="controls" />
+        </>
+      )}
+      <AxeAllyBlock title="A11y tests" />
+    </>
+  );
+};