chore: add create-docs script and templates (#4105)

package.json

@@ -89,6 +89,7 @@
     "packages:fix": "manypkg fix && monopeers fix",
     "changeset": "changeset",
     "create:package": "plop create-package",
+    "create:docs": "plop create-component-docs",
     "token-usage": "tsx tools/build/token-usage-detector.ts",
     "nx": "nx",
     "ci:autorespond": "tsx ./tools/github/autoresponder.ts"

packages/paste-website/src/pages/components/account-switcher/index.mdx

@@ -1,10 +1,3 @@
-export const meta = {
-  title: 'Account Switcher - Components',
-  package: '@twilio-paste/account-switcher',
-  description: "An Account Switcher is a stylized Menu Badge with a list of actions related to a user's accounts.",
-  slug: '/components/account-switcher/',
-};
-
 import {
   AccountSwitcher,
   AccountSwitcherBadge,
@@ -14,15 +7,21 @@ import {
   AccountSwitcherSeparator,
   useAccountSwitcherState,
 } from '@twilio-paste/account-switcher';
-
+import packageJson from '@twilio-paste/account-switcher/package.json';
 import {Box} from '@twilio-paste/box';
 
 import {SidebarCategoryRoutes} from '../../../constants';
-import packageJson from '@twilio-paste/account-switcher/package.json';
 import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
 import {getFeature, getNavigationData} from '../../../utils/api';
 import {accountSwitcherExample} from '../../../component-examples/AccountSwitcherExamples';
 
+export const meta = {
+  title: 'Account Switcher - Components',
+  package: '@twilio-paste/account-switcher',
+  description: packageJson.description,
+  slug: '/components/account-switcher/',
+};
+
 export default ComponentPageLayout;
 
 export const getStaticProps = async () => {

plopfile.js

@@ -88,4 +88,31 @@ module.exports = function (plop) {
       },
     ],
   });
+  plop.setGenerator("create-component-docs", {
+    description: "Creates a new directory for documentation of a component package on the website",
+    prompts: [
+      {
+        type: "input",
+        name: "component-name",
+        message: "What is the component package name?",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "packages/paste-website/src/pages/components/{{kebabCase component-name}}/index.mdx",
+        templateFile: "tools/plop-templates/docs-index.hbs",
+      },
+      {
+        type: "add",
+        path: "packages/paste-website/src/pages/components/{{kebabCase component-name}}/api.mdx",
+        templateFile: "tools/plop-templates/docs-api.hbs",
+      },
+      {
+        type: "add",
+        path: "packages/paste-website/src/pages/components/{{kebabCase component-name}}/changelog.mdx",
+        templateFile: "tools/plop-templates/docs-changelog.hbs",
+      },
+    ],
+  });
 };

tools/plop-templates/docs-api.hbs

@@ -0,0 +1,59 @@
+import Changelog from '@twilio-paste/{{kebabCase component-name}}/CHANGELOG.md'; // I don't know why this is needed but if you remove it the page fails to render
+import packageJson from '@twilio-paste/{{kebabCase component-name}}/package.json';
+
+import {SidebarCategoryRoutes} from '../../../constants';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api';
+
+export const meta = {
+  title: '{{titleCase component-name}} - Components', //TODO: change to titleCase ("Component Name") 
+  package: '@twilio-paste/{{kebabCase component-name}}',
+  description: packageJson.description,
+  slug: '/components/{{kebabCase component-name}}/api',
+};
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('{{titleCase component-name}}'); //TODO: change to titleCase ("Component Name") 
+  const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/{{kebabCase component-name}}');
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      componentApi,
+      mdxHeadings: [...mdxHeadings, ...componentApiTocData],
+      navigationData,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/{{kebabCase component-name}}',
+        storybookUrl: '/?path=/story/components-{{kebabCase component-name}}', //TODO: update this to the correct storybook URL
+      },
+    },
+  };
+};
+
+## Installation
+
+```bash
+yarn add @twilio-paste/{{kebabCase component-name}} - or - yarn add @twilio-paste/core
+```
+
+## Usage
+
+```jsx
+import { {{pascalCase component-name}} } from '@twilio-paste/core/{{kebabCase component-name}}';
+
+const {{pascalCase component-name}}Example = () => {
+  return (
+    <{{pascalCase component-name}} />
+  );
+};
+```
+
+## Props
+
+<PropsTable componentApi={props.componentApi} />

tools/plop-templates/docs-changelog.hbs

@@ -0,0 +1,36 @@
+import {SidebarCategoryRoutes} from '../../../constants';
+import Changelog from '@twilio-paste/{{kebabCase component-name}}/CHANGELOG.md';
+import packageJson from '@twilio-paste/{{kebabCase component-name}}/package.json';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData} from '../../../utils/api';
+
+export const meta = {
+  title: '{{titleCase component-name}} - Components', //TODO: change to titleCase ("Component Name") 
+  package: '@twilio-paste/{{kebabCase component-name}}',
+  description: packageJson.description,
+  slug: '/components/{{kebabCase component-name}}/changelog',
+};
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('{{titleCase component-name}}'); //TODO: change to titleCase ("Component Name") 
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      navigationData,
+      mdxHeadings,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/{{kebabCase component-name}}',
+        storybookUrl: '/?path=/story/components-{{kebabCase component-name}}', //TODO: Update this to the correct storybook URL
+      },
+    },
+  };
+};
+
+<Changelog />

tools/plop-templates/docs-index.hbs

@@ -0,0 +1,60 @@
+import { {{pascalCase component-name}} } from '@twilio-paste/{{kebabCase component-name}}';
+import packageJson from '@twilio-paste/{{kebabCase component-name}}/package.json';
+
+import {SidebarCategoryRoutes} from '../../../constants';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData} from '../../../utils/api';
+
+export const meta = {
+  title: '{{titleCase component-name}} - Components', //TODO: change to titleCase ("Component Name") 
+  package: '@twilio-paste/{{kebabCase component-name}}',
+  description: packageJson.description,
+  slug: '/components/{{kebabCase component-name}}/',
+};
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('{{titleCase component-name}}'); //TODO: change to titleCase ("Component Name") 
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      navigationData,
+      mdxHeadings,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/{{kebabCase component-name}}',
+        storybookUrl: '/?path=/story/components-{{kebabCase component-name}}', //TODO: Update this to the correct storybook URL
+      },
+    },
+  };
+};
+
+<LivePreview
+  scope={{ pascalCase component-name }} // TODO: add double curly brackets to scope value (`scope=\{{ ... }}`)
+  language="jsx"
+>
+  {`<{{pascalCase component-name}}/>`}
+</LivePreview>
+
+## Guidelines
+
+## About {{titleCase component-name}} //TODO: change to titleCase ("Component Name") 
+
+### Accessibility
+
+## Examples
+
+<LivePreview
+  scope={{ pascalCase component-name }} // TODO: add double curly brackets to scope value (`scope=\{{ ... }}`)
+  language="jsx"
+>
+  {`<{{pascalCase component-name}}/>`}
+</LivePreview>
+
+## Composition Notes
+