Added New API Docs for all components STC-536 (#164)

* docs: added api doc pages to all components STC-536

* feat: Added pnpm with workspaces STC-536

* feat: Added plop STC-536

* chore: Renamed internal components to work with docgen STC-536

* chore: reverted change to pnpm STC-536

* fix: Fixed Uploader story STC-536

package.json

@@ -52,7 +52,8 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "chromatic": "npx chromatic",
-    "build:styleguidist": "styleguidist build"
+    "build:styleguidist": "styleguidist build",
+    "plop": "plop"
   },
   "husky": {
     "hooks": {
@@ -96,14 +97,14 @@
     "@release-it/keep-a-changelog": "^2.3.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.2",
-    "@storybook/addon-a11y": "^6.3.12",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
+    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-actions": "6.3.12",
+    "@storybook/addon-essentials": "6.3.12",
+    "@storybook/addon-links": "6.3.12",
     "@storybook/addon-measure": "^2.0.0",
-    "@storybook/node-logger": "^6.3.12",
-    "@storybook/preset-create-react-app": "^3.1.7",
-    "@storybook/react": "^6.3.12",
+    "@storybook/node-logger": "6.3.12",
+    "@storybook/preset-create-react-app": "^3.2.0",
+    "@storybook/react": "6.3.12",
     "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^7.0.0",
@@ -125,7 +126,7 @@
     "dotenv-cli": "^4.0.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-unicorn": "^33.0.1",
     "faker": "^5.5.3",
@@ -134,6 +135,7 @@
     "jest-axe": "^5.0.1",
     "lint-staged": "^10.5.4",
     "lodash": "^4.17.21",
+    "plop": "^3.0.4",
     "prettier": "^2.3.1",
     "react": "^17.0.2",
     "react-docgen-typescript": "^1.22.0",

plop-templates/docs/api.hbs

@@ -0,0 +1,9 @@
+# {{pascalCase componentName}}
+
+import { PropTable } from '@site/src/components/PropTable'
+
+<PropTable name="{{pascalCase componentName}}" />
+
+## Examples
+
+- [{{pascalCase componentName}}](/docs/components/{{pascalCase componentName}})

plopfile.mjs

@@ -0,0 +1,18 @@
+export default function (plop) {
+  // create your generators here
+  plop.setGenerator('createAPIDoc', {
+    description: 'create API doc page for a component',
+    prompts: [
+      {
+        type: "input",
+        name: "componentName",
+        message: "What is the component name?",
+      },
+    ],
+    actions: [{
+      type: 'add',
+      path: 'website/docs/apis/{{pascalCase componentName}}.mdx',
+      templateFile: 'plop-templates/docs/api.hbs'
+    }]
+  });
+};

src/components/Button/Button.tsx

@@ -41,7 +41,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     ...htmlProps
   }: ButtonProps,
   ref
-) {
+): JSX.Element {
   const baseButton: ThemeUICSSObject = {
     display: "flex",
     gap: size === "large" ? 2 : 1,

src/components/EditableField/Autocomplete/Autocomplete.stories.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource theme-ui */
 import EditableFieldAutocomplete, {
   EditableFieldAutocompleteProps,
-} from "./Autocomplete"
+} from "./EditableFieldAutocomplete"
 import { mockedOptions } from "../../Autocomplete/__mocks__/options"
 import { Meta, Story } from "@storybook/react/types-6-0"
 import { useState } from "react"

src/components/EditableField/Autocomplete/Autocomplete.test.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties } from "react"
 import { render, screen } from "../../../tests/utils"
 import { axe } from "jest-axe"
-import EditableAutocomplete from "./Autocomplete"
+import EditableAutocomplete from "./EditableFieldAutocomplete"
 import userEvent from "@testing-library/user-event"
 import { mockedOptions } from "../../Autocomplete/__mocks__/options"
 

src/components/EditableField/EditableField.ts

@@ -1,11 +1,11 @@
-import Group from "./Group/Group"
-import Text from "./Text/Text"
-import Select from "./Select/Select"
-import Autocomplete from "./Autocomplete/Autocomplete"
-export type { EditableFieldAutocompleteProps } from "./Autocomplete/Autocomplete"
-export type { EditableFieldGroupProps } from "./Group/Group"
-export type { EditableFieldTextProps } from "./Text/Text"
-export type { EditableFieldSelectProps } from "./Select/Select"
+import Group from "./Group/EditableFieldGroup"
+import Text from "./Text/EditableFieldText"
+import Select from "./Select/EditableFieldSelect"
+import Autocomplete from "./Autocomplete/EditableFieldAutocomplete"
+export type { EditableFieldAutocompleteProps } from "./Autocomplete/EditableFieldAutocomplete"
+export type { EditableFieldGroupProps } from "./Group/EditableFieldGroup"
+export type { EditableFieldTextProps } from "./Text/EditableFieldText"
+export type { EditableFieldSelectProps } from "./Select/EditableFieldSelect"
 
 const EditableField = {
   Autocomplete,

src/components/EditableField/Group/Group.stories.tsx

@@ -1,9 +1,13 @@
 /** @jsxImportSource theme-ui */
-import EditableFieldGroup, { EditableFieldGroupProps } from "./Group"
+import EditableFieldGroup, {
+  EditableFieldGroupProps,
+} from "./EditableFieldGroup"
 import { Meta, Story } from "@storybook/react/types-6-0"
-import EditableText from "../Text/Text"
-import EditableSelect, { EditableFieldSelectProps } from "../Select/Select"
-import EditableFieldAutocomplete from "../Autocomplete/Autocomplete"
+import EditableText from "../Text/EditableFieldText"
+import EditableSelect, {
+  EditableFieldSelectProps,
+} from "../Select/EditableFieldSelect"
+import EditableFieldAutocomplete from "../Autocomplete/EditableFieldAutocomplete"
 import { useState } from "react"
 import { mockedOptions } from "../../Autocomplete/__mocks__/options"
 import Highlight from "../../Highlight/Highlight"

src/components/EditableField/Select/Select.stories.tsx

@@ -1,4 +1,6 @@
-import EditableFieldSelect, { EditableFieldSelectProps } from "./Select"
+import EditableFieldSelect, {
+  EditableFieldSelectProps,
+} from "./EditableFieldSelect"
 import { Meta, Story } from "@storybook/react/types-6-0"
 import { useState } from "react"
 import { action } from "@storybook/addon-actions"

src/components/EditableField/Select/Select.test.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen } from "../../../tests/utils"
 import { axe } from "jest-axe"
-import EditableSelect from "./Select"
+import EditableSelect from "./EditableFieldSelect"
 import userEvent from "@testing-library/user-event"
 
 describe("EditableText", () => {

src/components/EditableField/Text/Text.stories.tsx

@@ -1,4 +1,4 @@
-import EditableText, { EditableFieldTextProps } from "./Text"
+import EditableText, { EditableFieldTextProps } from "./EditableFieldText"
 import { Meta, Story } from "@storybook/react/types-6-0"
 import { useState } from "react"
 

src/components/EditableField/Text/Text.test.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen } from "../../../tests/utils"
 import { axe } from "jest-axe"
-import EditableText from "./Text"
+import EditableText from "./EditableFieldText"
 import userEvent from "@testing-library/user-event"
 
 describe("EditableText", () => {

src/components/LinearProgress/LinearProgress.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
-import React, { HTMLAttributes } from "react"
+import { forwardRef, HTMLAttributes } from "react"
 import { keyframes } from "@emotion/react"
 
 const indeterminate1 = keyframes`
@@ -45,8 +45,8 @@ export interface LinearProgressProps {
   progress?: number
 }
 
-const LinearProgress = React.forwardRef<HTMLDivElement, LinearProgressProps>(
-  function LinearProgressComponent(
+const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(
+  function LinearProgress(
     {
       className,
       color = "secondary",

src/components/Uploader/Uploader.stories.tsx

@@ -2,14 +2,14 @@
 import React, { useState } from "react"
 import { Meta, Story } from "@storybook/react/types-6-0"
 
-import Uploader, { IUploaderProps } from "./Uploader"
+import Uploader, { UploaderProps } from "./Uploader"
 
 export default {
   title: "Design System/Uploader",
   component: Uploader,
 } as Meta
 
-const DefaultTemplate: Story<IUploaderProps> = (props) => {
+const DefaultTemplate: Story<UploaderProps> = (props) => {
   const [files, setFiles] = useState<File[]>([])
 
   return (