SimplePropsTable & ComponentDoc to functional components

package.json

@@ -61,7 +61,7 @@
     "bulma": "0.7.5",
     "coveralls": "3.0.4",
     "css-loader": "^2.1.1",
-    "docz": "latest",
+    "docz": "^1.2.0",
     "docz-theme-default": "^1.2.0",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.14.0",

src/__docs__/components/component-doc/as-doc.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import { PropDoc } from "../simple-props-table/types";
+
+export const asDoc: PropDoc = {
+  description: (
+    <span>
+      the React Component or JSX Element (e.g. <code>"div"</code> or{" "}
+      <code>span</code>) to render as
+    </span>
+  ),
+  typeName: "ReactType",
+};

src/__docs__/components/component-doc/component-doc.tsx

@@ -0,0 +1,38 @@
+// tslint:disable:no-submodule-imports
+import React from "react";
+
+import { Title } from "src/elements";
+
+import { ComponentFeatures, ComponentFeaturesProps } from "../feature";
+import {
+  SimplePropsTable,
+  SimplePropsTableProps,
+} from "../simple-props-table/simple-props-table";
+
+export type ComponentDocProps = {
+  asType: string;
+  customize?: ComponentFeaturesProps["customize"];
+  docPath?: ComponentFeaturesProps["docPath"];
+  name: string;
+  props: SimplePropsTableProps["props"];
+};
+
+export const ComponentDoc = ({
+  asType,
+  customize,
+  docPath,
+  name,
+  props,
+}: ComponentDocProps) => {
+  const componentFeaturesProps = { asType, customize, docPath };
+
+  return (
+    <React.Fragment>
+      <Title as="h4" size={4}>
+        {name}
+      </Title>
+      <ComponentFeatures {...componentFeaturesProps} />
+      <SimplePropsTable props={props} />
+    </React.Fragment>
+  );
+};

src/__docs__/components/component-doc/forward-ref-as-exotic-component-doc.tsx

@@ -0,0 +1,56 @@
+// tslint:disable:no-submodule-imports
+import React from "react";
+
+import { ForwardRefAsExoticComponent } from "src/base/exotic";
+
+import { ComponentFeaturesProps } from "../feature";
+import { SimplePropsTableProps } from "../simple-props-table/simple-props-table";
+import { ComponentDoc, ComponentDocProps } from "./component-doc";
+import { asDoc } from "./as-doc";
+import { refDoc } from "./ref-doc";
+
+export type ForwardRefAsExoticComponentDocProps = {
+  // tslint:disable-next-line:no-any
+  component: ForwardRefAsExoticComponent<any, any>;
+  customize: ComponentDocProps["customize"];
+  docPath?: ComponentFeaturesProps["docPath"];
+  props: SimplePropsTableProps["props"];
+};
+
+export const ForwardRefAsExoticComponentDoc = ({
+  component,
+  customize,
+  docPath,
+  props,
+}: ForwardRefAsExoticComponentDocProps) => {
+  const asType = component.defaultProps.as as React.ReactType;
+  const asTypeString =
+    typeof asType === "string"
+      ? asType
+      : asType.displayName !== undefined
+      ? asType.displayName
+      : JSON.stringify(asType);
+
+  const extendedProps: SimplePropsTableProps["props"] = {
+    as: asDoc,
+    ref: refDoc,
+    ...props,
+  };
+
+  for (const propName of Object.keys(extendedProps)) {
+    const defaultValue = component.defaultProps[propName];
+    if (defaultValue !== undefined) {
+      extendedProps[propName].defaultValue = JSON.stringify(defaultValue);
+    }
+  }
+
+  return (
+    <ComponentDoc
+      asType={asTypeString}
+      customize={customize}
+      docPath={docPath}
+      name={component.displayName}
+      props={extendedProps}
+    />
+  );
+};

src/__docs__/components/component-doc/index.ts

@@ -0,0 +1,6 @@
+export { asDoc } from "./as-doc";
+export { ComponentDoc } from "./component-doc";
+export {
+  ForwardRefAsExoticComponentDoc,
+} from "./forward-ref-as-exotic-component-doc";
+export { refDoc } from "./ref-doc";

src/__docs__/components/component-doc/ref-doc.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import { PropDoc } from "../simple-props-table/types";
+
+export const refDoc: PropDoc = {
+  description: (
+    <span>
+      a handle to the underlying <code>React Component</code> or{" "}
+      <code>JSX Element</code>
+    </span>
+  ),
+  typeName: "Ref",
+};