fix: document and example ts types update

ccontrols · Nov 15, 2020 · c54b319 · c54b319
1 parent dff4fc2
commit c54b319
Show file tree

Hide file tree

Showing 69 changed files with 365 additions and 335 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -139,7 +139,7 @@
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/core/instrument",
       "args": [
-        "mdx-stories",
+        "esm-doc",
       ],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",

diff --git a/core/core/src/controls.ts b/core/core/src/controls.ts
@@ -276,8 +276,8 @@ export interface ComponentControlArray
   inline?: boolean;
 }
 
-export interface ComponentControlObject
-  extends ComponentControlBase<ComponentControls> {
+export interface ComponentControlObject<P = ComponentControls>
+  extends ComponentControlBase<P> {
   type: ControlTypes.OBJECT;
   /**
    * the label for the editor button
@@ -375,12 +375,12 @@ export interface ComponentControlNumber extends ComponentControlBase<number> {
  * },
  */
 
-export type ComponentControl =
+export type ComponentControl<P = any> =
   | ComponentControlText
   | ComponentControlBoolean
   | ComponentControlColor
   | ComponentControlDate
-  | ComponentControlObject
+  | ComponentControlObject<P>
   | ComponentControlButton
   | ComponentControlOptions
   | ComponentControlNumber
@@ -392,6 +392,6 @@ export type ComponentControl =
  * the name of the property is the key
  * and the value is the ComponentControl
  */
-export interface ComponentControls {
-  [name: string]: ComponentControl;
+export interface ComponentControls<P = ComponentControl> {
+  [name: string]: ComponentControl<P>;
 }
diff --git a/core/core/src/document.ts b/core/core/src/document.ts
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import { PropsWithChildren, ReactElement } from 'react';
+import { ComponentType, PropsWithChildren, ReactElement } from 'react';
 import { CodeLocation, PackageInfo, StoryRenderFn } from './utility';
 import { Component } from './components';
-import { ComponentControls } from './controls';
+import { ComponentControls, ComponentControl } from './controls';
 import { RunConfiguration, DocType, PageLayoutProps } from './configuration';
 /**
  * an identifier/variable.argument in the source code
@@ -81,11 +81,11 @@ export interface SmartControls {
  * story prooperties that can be inherited from the document, or each story can have its properties
  */
 
-export interface StoryProps {
+export interface StoryProps<Props = unknown> {
   /**
    * id for component associated with the story
    */
-  component?: string | Record<string, unknown>;
+  component?: string | Record<string, unknown> | ComponentType<Props>;
 
   /**
    * multiple components option
@@ -112,7 +112,7 @@ export interface StoryProps {
 /**
  * Story interface - usually extracted by the AST instrumenting loader
  */
-export type Story = {
+export type Story<Props = unknown> = {
   /**
    * name of the Story.
    */
@@ -166,22 +166,31 @@ export type Story = {
    * it is set internally and will be used to create a story URL
    */
   dynamicId?: string;
-} & StoryProps;
+} & StoryProps<Props>;
 
 export type DynamicExamples = Story[];
+
+export type ExampleControls = {
+  [name: string]:
+    | ComponentControl<ExampleControls>
+    | string
+    | string[]
+    | boolean
+    | number;
+};
+
 /**
  * es named export function, excapsulates a contained example code.
  */
-export type Example<P = {}> =
-  | ({
-      (props: PropsWithChildren<P>, context?: any): ReactElement<
-        any,
-        any
-      > | null;
-    } & Omit<Story, 'controls'> & {
-        controls?: Story['controls'] | string | string[] | boolean | number;
-      })
-  | DynamicExamples;
+export type Example<Props = unknown> = {
+  (props: PropsWithChildren<Props>, context?: any): ReactElement<
+    any,
+    any
+  > | null;
+  bind: (props: any) => Example<Props>;
+} & Omit<Story<Props>, 'controls'> & {
+    controls?: ExampleControls;
+  };
 
 /**
  * dynamic story creator function type.
@@ -195,7 +204,7 @@ export const defDocType: DocType = 'story';
  * For MDX files, fromtmatter is used to declare the document properties.
  * For ESM (ES Modules) documentation files, the default export is used.
  */
-export type Document = {
+export type Document<Props = unknown> = {
   /**
    * title of the document. If no 'route' parameter is specifified, the title is used to generate the document url.
    * This is the only required field, to show the document in the menu structures.
@@ -289,7 +298,7 @@ export type Document = {
    * since multiple components of the same name can be used
    * example: ['Button']: 'c:/myapp/Button.tsx'
    */
-  componentsLookup: {
+  componentsLookup?: {
     [name: string]: string;
   };
 
@@ -302,7 +311,7 @@ export type Document = {
    * custom prop set by mdxjs
    */
   isMDXComponent?: boolean;
-} & StoryProps &
+} & StoryProps<Props> &
   PageLayoutProps;
 export const dateToLocalString = (date?: Date): string =>
   date

diff --git a/core/instrument/src/babel/extract-attributes.ts b/core/instrument/src/babel/extract-attributes.ts
@@ -67,8 +67,9 @@ export const extractAttributes = (
   node: any,
 ): Record<string, unknown> | any | undefined => {
   if (node) {
-    if (node.properties) {
-      const attributes: Record<string, unknown> = node.properties.reduce(
+    const properties = node.properties || node.expression?.properties;
+    if (properties) {
+      const attributes: Record<string, unknown> = properties.reduce(
         (acc: Record<string, unknown>, propNode: any) => {
           const attribute = nodeToAttribute(propNode);
           if (attribute) {

diff --git a/core/instrument/src/misc/component-attributes.ts b/core/instrument/src/misc/component-attributes.ts
@@ -18,7 +18,7 @@ export const componentsFromParams = (
 ): string[] => {
   const result = [];
   const { component } = element;
-  const name = componentName(component);
+  const name = componentName(component as string);
   if (name) {
     result.push(name);
   }

diff --git a/core/instrument/test/__snapshots__/esm-async.test.ts.snap b/core/instrument/test/__snapshots__/esm-async.test.ts.snap
@@ -17,7 +17,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.39.1",
+        "@component-controls/core": "^1.39.3",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -53,7 +53,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.39.2",
+      "version": "1.39.3",
     },
   },
   "stories": Object {
@@ -97,7 +97,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.39.1",
+        "@component-controls/core": "^1.39.3",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -133,7 +133,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.39.2",
+      "version": "1.39.3",
     },
   },
   "stories": Object {
@@ -193,7 +193,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.39.1",
+        "@component-controls/core": "^1.39.3",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -229,7 +229,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.39.2",
+      "version": "1.39.3",
     },
   },
   "stories": Object {
@@ -273,7 +273,7 @@ Object {
         "@babel/generator": "^7.9.4",
         "@babel/parser": "^7.9.4",
         "@babel/traverse": "^7.9.0",
-        "@component-controls/core": "^1.39.1",
+        "@component-controls/core": "^1.39.3",
         "@hutson/parse-repository-url": "^5.0.0",
         "@mdx-js/loader": "^1.5.5",
         "@mdx-js/react": "^1.6.5",
@@ -309,7 +309,7 @@ Object {
         "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
         "issues": "https://github.com/ccontrols/component-controls/issues",
       },
-      "version": "1.39.2",
+      "version": "1.39.3",
     },
   },
   "stories": Object {