feat: added PropsTable

core/instrument/src/misc/propsInfo.ts

@@ -25,7 +25,7 @@ export const propsInfo = async (
       .update(filePath)
       .digest('hex'),
   );
-
+  console.log(componentName);
   if (fs.existsSync(cachedFileName)) {
     const cacheStats = fs.statSync(cachedFileName);
     const fileStats = fs.statSync(filePath);

core/instrument/test/__snapshots__/extract-props-info.test.ts.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`extract-props-info Button 1`] = `
+Object {
+  "description": "",
+  "displayName": "Button",
+  "methods": Array [],
+}
+`;
+
+exports[`extract-props-info PropsTable 1`] = `
+Object {
+  "description": "",
+  "displayName": "PropsTable",
+  "methods": Array [],
+  "props": Object {
+    "actions": Object {
+      "description": "additional actions provided to the component",
+      "parentName": "BlockContainerProps",
+      "type": Object {
+        "name": "array",
+        "raw": "ActionItem[]",
+        "value": Array [
+          Object {
+            "name": "ActionItem",
+          },
+        ],
+      },
+    },
+    "of": Object {
+      "description": "component",
+      "parentName": "ComponentInputProps",
+      "type": Object {
+        "name": "any",
+      },
+    },
+    "title": Object {
+      "description": "optional section title for the block",
+      "parentName": "BlockContainerProps",
+      "type": Object {
+        "name": "string",
+      },
+    },
+  },
+}
+`;

core/instrument/test/__snapshots__/follow-imports-custom.test.ts.snap

@@ -98,6 +98,7 @@ export const Markdown: FC<MarkdownProps> = ({ children, components }) => (
 }
 `;
 
+
 exports[`follow-imports-custom Title 1`] = `
 Object {
   "exportedAs": "Title",

core/instrument/test/extract-props-info.test.ts

@@ -0,0 +1,37 @@
+import * as path from 'path';
+import { propsInfo } from '../src/misc/propsInfo';
+
+describe('extract-props-info', () => {
+  const loadTestFiles = (componentName: string, fileName: string) => {
+    it(componentName, async () => {
+      expect(
+        await propsInfo(
+          [
+            {
+              name: '@component-controls/react-docgen-info',
+              test: /\.(js|jsx)$/,
+            },
+            {
+              name: '@component-controls/react-docgen-typescript-info',
+              test: /\.(ts|tsx)$/,
+            },
+          ],
+          fileName,
+          componentName,
+        ),
+      ).toMatchSnapshot();
+    });
+  };
+  loadTestFiles(
+    'PropsTable',
+    path.resolve(__dirname, '../../../ui/blocks/src/PropsTable/PropsTable.tsx'),
+  );
+
+  loadTestFiles(
+    'Button',
+    path.resolve(
+      __dirname,
+      '../../../node_modules/@theme-ui/components/src/Button.js',
+    ),
+  );
+});

core/instrument/test/follow-imports-custom.test.ts

@@ -7,7 +7,11 @@ import {
 import { followImports } from '../src/babel/follow-imports';
 
 describe('follow-imports-custom', () => {
-  const loadTestFiles = (componentName, fileName, source?: string) => {
+  const loadTestFiles = (
+    componentName: string,
+    fileName: string,
+    source?: string,
+  ) => {
     it(componentName, async () => {
       expect(
         await followImports(componentName, fileName, source, {
@@ -54,6 +58,7 @@ describe('follow-imports-custom', () => {
       '../../../ui/components/src/Markdown/Markdown.stories.tsx',
     ),
   );
+
   loadTestFiles(
     'Title',
     path.resolve(__dirname, '../../../ui/blocks/src/Title/Title.stories.tsx'),

examples/storybook-5/.storybook/main.js

@@ -20,7 +20,6 @@ module.exports = {
   stories: [
     '../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
     '../../../ui/components/src/**/*.stories.(js|tsx|mdx)',
-    '../../../ui/block-components/src/**/*.stories.(js|tsx|mdx)',
     '../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)',
     '../src/**/*.stories.(js|tsx|mdx)',
   ],

examples/storybook-5/.storybook/preview.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { addDecorator, addParameters } from '@storybook/react';
 import { Title as SBTitle, Description as SBDescription, Subtitle as SBSubtitle, Story, Stories, Props } from '@storybook/addon-docs/blocks';
 import { DependenciesTable } from 'storybook-addon-deps/blocks';
-import { ControlsTable, ThemeProvider, Title, Subtitle ,Description, StorySource, ComponentSource, BlockContextProvider } from '@component-controls/storybook';
+import { ControlsTable, ThemeProvider, Title, Subtitle ,Description, StorySource, ComponentSource, PropsTable, BlockContextProvider } from '@component-controls/storybook';
 
 addDecorator((story, ctx ) => {
   return (
@@ -31,6 +31,7 @@ export const DocsPage = ({
       <Story id="." />
       <StorySource id="." title='Story source'/>
       <ControlsTable id="." />
+      <PropsTable of="." />
       <Props slot={propsSlot} />
       <DependenciesTable titleDependencies='Dependencies' titleDependents='Dependents' />
       <Stories slot={storiesSlot} />

integrations/storybook/src/blocks/PropsTable.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import {
+  PropsTable as BasePropsTable,
+  PropsTableProps,
+} from '@component-controls/blocks';
+import { ThemeProvider } from '../shared/ThemeProvider';
+
+export const PropsTable: FC<PropsTableProps> = props => {
+  return (
+    <ThemeProvider>
+      <BasePropsTable {...props} />
+    </ThemeProvider>
+  );
+};

integrations/storybook/src/blocks/index.ts

@@ -1,7 +1,8 @@
-export { BlockContextProvider } from './BlockContext';
-export { ComponentSource } from './ComponentSource';
-export { ControlsTable, ControlsTableProps } from './ControlsTable';
-export { Description } from './Description';
-export { StorySource } from './StorySource';
-export { Subtitle } from './Subtitle';
-export { Title } from './Title';
+export * from './BlockContext';
+export * from './ComponentSource';
+export * from './ControlsTable';
+export * from './Description';
+export * from './PropsTable';
+export * from './StorySource';
+export * from './Subtitle';
+export * from './Title';

ui/blocks/package.json

@@ -37,6 +37,7 @@
     "copy-to-clipboard": "^3.2.1",
     "global": "^4.3.2",
     "js-string-escape": "^1.0.1",
+    "qs": "^6.9.1",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "theme-ui": "^0.3.1",
@@ -45,6 +46,7 @@
   "devDependencies": {
     "@types/jest": "^25.1.2",
     "@types/theme-ui": "^0.3.0",
+    "@types/qs": "^6.9.1",
     "cross-env": "^5.2.1",
     "docz-rollup": "^2.1.0",
     "eslint": "^6.5.1",

ui/blocks/src/BlocksContext/BlockContext.tsx

@@ -79,7 +79,6 @@ export const useControlsContext = ({
   } else {
     componentName = typeof of === 'string' ? of : of && (of as any).displayName;
   }
-
   const component =
     componentName && kind && kind.components[componentName]
       ? myStoryStore.components[kind.components[componentName]]

ui/blocks/src/ComponentSource/ComponentSource.tsx

@@ -1,24 +1,22 @@
 import React, { FC } from 'react';
 import { ActionItem } from '@component-controls/components';
-import { useControlsContext, StoryInputProps } from '../BlocksContext';
+import { useControlsContext, ComponentInputProps } from '../BlocksContext';
 import {
   ThemeContext,
   Source as SourceBlock,
   SourceProps,
 } from '@component-controls/components';
 import { repositoryActions } from '../utils/repositoryActions';
 
-export type ComponentSourceProps = StoryInputProps & SourceProps;
+export type ComponentSourceProps = ComponentInputProps & SourceProps;
 
 export const ComponentSource: FC<ComponentSourceProps> = ({
-  id,
-  name,
+  of,
   actions,
   ...rest
 }) => {
   const { component } = useControlsContext({
-    id,
-    name,
+    of,
   });
   let source;
   const { from, importedName, name: componentName } = component || {};

ui/blocks/src/ControlsTable/SingleControlsTable.tsx

@@ -15,7 +15,7 @@ export const SingleControlsTable: FC<ControlsTableProps> = ({
 }) => (
   <Table
     className="component-controls-table"
-    showHeader={false}
+    header={false}
     columns={[
       {
         Header: 'Name',

ui/blocks/src/PropsTable/PropsTable.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PropsTable } from './PropsTable';
+import { MockContext } from '../test/MockContext';
+
+export default {
+  title: 'Blocks/Core/PropsTable',
+  component: PropsTable,
+};
+
+export const simple = () => (
+  <MockContext storyId="blocks-core-propstable--simple" component={PropsTable}>
+    <PropsTable title="Props table" />
+  </MockContext>
+);

ui/blocks/src/PropsTable/PropsTable.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable react/display-name */
+/** @jsx jsx */
+import { jsx, Text, Flex, Styled } from 'theme-ui';
+import { FC } from 'react';
+import { PropType } from '@component-controls/specification';
+import {
+  Table,
+  BlockContainer,
+  BlockContainerProps,
+} from '@component-controls/components';
+import { useControlsContext, ComponentInputProps } from '../BlocksContext';
+
+export type PropsTableProps = ComponentInputProps & BlockContainerProps;
+
+export const PropsTable: FC<PropsTableProps> = ({ of, title, actions }) => {
+  const { component } = useControlsContext({
+    of,
+  });
+  const { info } = component || {};
+  console.log(component);
+  return (
+    <BlockContainer actions={actions} title={title}>
+      {info && (
+        <Table
+          sorting={true}
+          columns={[
+            {
+              Header: 'Name',
+              accessor: 'name',
+              Cell: ({
+                row: {
+                  original: {
+                    name,
+                    prop: {
+                      type: { required },
+                    },
+                  },
+                },
+              }: {
+                row: { original: { name: string; prop: PropType } };
+              }) => (
+                <Text
+                  sx={{
+                    fontWeight: 'bold',
+                    color: required ? 'red' : undefined,
+                  }}
+                >
+                  {name}
+                  {required ? '*' : ''}
+                </Text>
+              ),
+            },
+            {
+              Header: 'Description',
+              accessor: 'prop.description',
+              Cell: ({
+                row: {
+                  original: {
+                    prop: {
+                      description,
+                      type: { raw },
+                    },
+                  },
+                },
+              }: {
+                row: { original: { name: string; prop: PropType } };
+              }) => (
+                <Flex
+                  sx={{
+                    flexDirection: 'column',
+                  }}
+                >
+                  <Text>{description}</Text>
+                  <Styled.pre
+                    sx={{
+                      color: 'fadedText',
+                      mt: 2,
+                      letterSpacing: '0.10em',
+                    }}
+                  >
+                    {raw}
+                  </Styled.pre>
+                </Flex>
+              ),
+            },
+            {
+              Header: 'Default',
+              accessor: 'prop.defaultValue',
+              Cell: ({
+                row: {
+                  original: {
+                    prop: { defaultValue },
+                  },
+                },
+              }: {
+                row: { original: { name: string; prop: PropType } };
+              }) => <Text>{defaultValue || '-'}</Text>,
+            },
+          ]}
+          data={Object.keys(info.props).map(key => {
+            const prop = info.props[key];
+            return {
+              name: key,
+              prop: prop,
+            };
+          })}
+        />
+      )}
+    </BlockContainer>
+  );
+};

ui/blocks/src/PropsTable/index.ts

@@ -0,0 +1 @@
+export * from './PropsTable';

ui/blocks/src/index.ts

@@ -3,5 +3,6 @@ export * from './ControlsTable';
 export * from './Description';
 export * from './StorySource';
 export * from './ComponentSource';
+export * from './PropsTable';
 export * from './Subtitle';
 export * from './Title';

ui/components/src/ActionBar/ActionBar.tsx

@@ -64,8 +64,8 @@ export const ActionBar: FunctionComponent<ActionBarProps> = ({
             <Box
               key={`${typeof title === 'string' ? title : 'item'}_${index}`}
               sx={{
-                mt: 2,
-                mr: 2,
+                mt: 1,
+                mx: 1,
                 fontSize: 1,
                 a: ActionColors({ theme, disabled }),
                 button: ActionColors({ theme, disabled }),