From 1f2069cc51f63bd3d671d77f0da511acf350d9cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Mon, 14 Oct 2024 14:01:56 -0400 Subject: [PATCH] chore: add create-docs script and templates --- package.json | 1 + .../components/account-switcher/index.mdx | 17 +++--- plopfile.js | 27 +++++++++ tools/plop-templates/docs-api.hbs | 59 ++++++++++++++++++ tools/plop-templates/docs-changelog.hbs | 36 +++++++++++ tools/plop-templates/docs-index.hbs | 60 +++++++++++++++++++ 6 files changed, 191 insertions(+), 9 deletions(-) create mode 100644 tools/plop-templates/docs-api.hbs create mode 100644 tools/plop-templates/docs-changelog.hbs create mode 100644 tools/plop-templates/docs-index.hbs diff --git a/package.json b/package.json index a29b2756af..d7a2bdafb7 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ "packages:fix": "manypkg fix && monopeers fix", "changeset": "changeset", "create:package": "plop create-package", + "create:docs": "plop create-docs", "token-usage": "tsx tools/build/token-usage-detector.ts", "nx": "nx", "ci:autorespond": "tsx ./tools/github/autoresponder.ts" diff --git a/packages/paste-website/src/pages/components/account-switcher/index.mdx b/packages/paste-website/src/pages/components/account-switcher/index.mdx index f7d5d5e436..bed2173649 100644 --- a/packages/paste-website/src/pages/components/account-switcher/index.mdx +++ b/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 () => { diff --git a/plopfile.js b/plopfile.js index 40b965666c..24e88c870e 100644 --- a/plopfile.js +++ b/plopfile.js @@ -88,4 +88,31 @@ module.exports = function (plop) { }, ], }); + plop.setGenerator("create-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", + }, + ], + }); }; diff --git a/tools/plop-templates/docs-api.hbs b/tools/plop-templates/docs-api.hbs new file mode 100644 index 0000000000..9e2394b9a1 --- /dev/null +++ b/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 + + diff --git a/tools/plop-templates/docs-changelog.hbs b/tools/plop-templates/docs-changelog.hbs new file mode 100644 index 0000000000..e68557e6c8 --- /dev/null +++ b/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 + }, + }, + }; +}; + + diff --git a/tools/plop-templates/docs-index.hbs b/tools/plop-templates/docs-index.hbs new file mode 100644 index 0000000000..d324b04811 --- /dev/null +++ b/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 + }, + }, + }; +}; + + + {`<{{pascalCase component-name}}/>`} + + +## Guidelines + +## About {{titleCase component-name}} //TODO: change to titleCase ("Component Name") + +### Accessibility + +## Examples + + + {`<{{pascalCase component-name}}/>`} + + +## Composition Notes +