Skip to content

Commit 012fc44

Browse files
nkrantznkrantz
authored
chore: add create-docs script and templates (#4105)
1 parent 7425ece commit 012fc44

File tree

6 files changed

+191
-9
lines changed

6 files changed

+191
-9
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@
8989
"packages:fix": "manypkg fix && monopeers fix",
9090
"changeset": "changeset",
9191
"create:package": "plop create-package",
92+
"create:docs": "plop create-component-docs",
9293
"token-usage": "tsx tools/build/token-usage-detector.ts",
9394
"nx": "nx",
9495
"ci:autorespond": "tsx ./tools/github/autoresponder.ts"

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
export const meta = {
2-
title: 'Account Switcher - Components',
3-
package: '@twilio-paste/account-switcher',
4-
description: "An Account Switcher is a stylized Menu Badge with a list of actions related to a user's accounts.",
5-
slug: '/components/account-switcher/',
6-
};
7-
81
import {
92
AccountSwitcher,
103
AccountSwitcherBadge,
@@ -14,15 +7,21 @@ import {
147
AccountSwitcherSeparator,
158
useAccountSwitcherState,
169
} from '@twilio-paste/account-switcher';
17-
10+
import packageJson from '@twilio-paste/account-switcher/package.json';
1811
import {Box} from '@twilio-paste/box';
1912

2013
import {SidebarCategoryRoutes} from '../../../constants';
21-
import packageJson from '@twilio-paste/account-switcher/package.json';
2214
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
2315
import {getFeature, getNavigationData} from '../../../utils/api';
2416
import {accountSwitcherExample} from '../../../component-examples/AccountSwitcherExamples';
2517

18+
export const meta = {
19+
title: 'Account Switcher - Components',
20+
package: '@twilio-paste/account-switcher',
21+
description: packageJson.description,
22+
slug: '/components/account-switcher/',
23+
};
24+
2625
export default ComponentPageLayout;
2726

2827
export const getStaticProps = async () => {

‎plopfile.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,4 +88,31 @@ module.exports = function (plop) {
8888
},
8989
],
9090
});
91+
plop.setGenerator("create-component-docs", {
92+
description: "Creates a new directory for documentation of a component package on the website",
93+
prompts: [
94+
{
95+
type: "input",
96+
name: "component-name",
97+
message: "What is the component package name?",
98+
},
99+
],
100+
actions: [
101+
{
102+
type: "add",
103+
path: "packages/paste-website/src/pages/components/{{kebabCase component-name}}/index.mdx",
104+
templateFile: "tools/plop-templates/docs-index.hbs",
105+
},
106+
{
107+
type: "add",
108+
path: "packages/paste-website/src/pages/components/{{kebabCase component-name}}/api.mdx",
109+
templateFile: "tools/plop-templates/docs-api.hbs",
110+
},
111+
{
112+
type: "add",
113+
path: "packages/paste-website/src/pages/components/{{kebabCase component-name}}/changelog.mdx",
114+
templateFile: "tools/plop-templates/docs-changelog.hbs",
115+
},
116+
],
117+
});
91118
};

‎tools/plop-templates/docs-api.hbs‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
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
2+
import packageJson from '@twilio-paste/{{kebabCase component-name}}/package.json';
3+
4+
import {SidebarCategoryRoutes} from '../../../constants';
5+
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
6+
import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api';
7+
8+
export const meta = {
9+
title: '{{titleCase component-name}} - Components', //TODO: change to titleCase ("Component Name")
10+
package: '@twilio-paste/{{kebabCase component-name}}',
11+
description: packageJson.description,
12+
slug: '/components/{{kebabCase component-name}}/api',
13+
};
14+
15+
export default ComponentPageLayout;
16+
17+
export const getStaticProps = async () => {
18+
const navigationData = await getNavigationData();
19+
const feature = await getFeature('{{titleCase component-name}}'); //TODO: change to titleCase ("Component Name")
20+
const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/{{kebabCase component-name}}');
21+
return {
22+
props: {
23+
data: {
24+
...packageJson,
25+
...feature,
26+
},
27+
componentApi,
28+
mdxHeadings: [...mdxHeadings, ...componentApiTocData],
29+
navigationData,
30+
pageHeaderData: {
31+
categoryRoute: SidebarCategoryRoutes.COMPONENTS,
32+
githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/{{kebabCase component-name}}',
33+
storybookUrl: '/?path=/story/components-{{kebabCase component-name}}', //TODO: update this to the correct storybook URL
34+
},
35+
},
36+
};
37+
};
38+
39+
## Installation
40+
41+
```bash
42+
yarn add @twilio-paste/{{kebabCase component-name}} - or - yarn add @twilio-paste/core
43+
```
44+
45+
## Usage
46+
47+
```jsx
48+
import { {{pascalCase component-name}} } from '@twilio-paste/core/{{kebabCase component-name}}';
49+
50+
const {{pascalCase component-name}}Example = () => {
51+
return (
52+
<{{pascalCase component-name}} />
53+
);
54+
};
55+
```
56+
57+
## Props
58+
59+
<PropsTable componentApi={props.componentApi} />

‎tools/plop-templates/docs-changelog.hbs‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {SidebarCategoryRoutes} from '../../../constants';
2+
import Changelog from '@twilio-paste/{{kebabCase component-name}}/CHANGELOG.md';
3+
import packageJson from '@twilio-paste/{{kebabCase component-name}}/package.json';
4+
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
5+
import {getFeature, getNavigationData} from '../../../utils/api';
6+
7+
export const meta = {
8+
title: '{{titleCase component-name}} - Components', //TODO: change to titleCase ("Component Name")
9+
package: '@twilio-paste/{{kebabCase component-name}}',
10+
description: packageJson.description,
11+
slug: '/components/{{kebabCase component-name}}/changelog',
12+
};
13+
14+
export default ComponentPageLayout;
15+
16+
export const getStaticProps = async () => {
17+
const navigationData = await getNavigationData();
18+
const feature = await getFeature('{{titleCase component-name}}'); //TODO: change to titleCase ("Component Name")
19+
return {
20+
props: {
21+
data: {
22+
...packageJson,
23+
...feature,
24+
},
25+
navigationData,
26+
mdxHeadings,
27+
pageHeaderData: {
28+
categoryRoute: SidebarCategoryRoutes.COMPONENTS,
29+
githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/{{kebabCase component-name}}',
30+
storybookUrl: '/?path=/story/components-{{kebabCase component-name}}', //TODO: Update this to the correct storybook URL
31+
},
32+
},
33+
};
34+
};
35+
36+
<Changelog />

‎tools/plop-templates/docs-index.hbs‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { {{pascalCase component-name}} } from '@twilio-paste/{{kebabCase component-name}}';
2+
import packageJson from '@twilio-paste/{{kebabCase component-name}}/package.json';
3+
4+
import {SidebarCategoryRoutes} from '../../../constants';
5+
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
6+
import {getFeature, getNavigationData} from '../../../utils/api';
7+
8+
export const meta = {
9+
title: '{{titleCase component-name}} - Components', //TODO: change to titleCase ("Component Name")
10+
package: '@twilio-paste/{{kebabCase component-name}}',
11+
description: packageJson.description,
12+
slug: '/components/{{kebabCase component-name}}/',
13+
};
14+
15+
export default ComponentPageLayout;
16+
17+
export const getStaticProps = async () => {
18+
const navigationData = await getNavigationData();
19+
const feature = await getFeature('{{titleCase component-name}}'); //TODO: change to titleCase ("Component Name")
20+
return {
21+
props: {
22+
data: {
23+
...packageJson,
24+
...feature,
25+
},
26+
navigationData,
27+
mdxHeadings,
28+
pageHeaderData: {
29+
categoryRoute: SidebarCategoryRoutes.COMPONENTS,
30+
githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/{{kebabCase component-name}}',
31+
storybookUrl: '/?path=/story/components-{{kebabCase component-name}}', //TODO: Update this to the correct storybook URL
32+
},
33+
},
34+
};
35+
};
36+
37+
<LivePreview
38+
scope={{ pascalCase component-name }} // TODO: add double curly brackets to scope value (`scope=\{{ ... }}`)
39+
language="jsx"
40+
>
41+
{`<{{pascalCase component-name}}/>`}
42+
</LivePreview>
43+
44+
## Guidelines
45+
46+
## About {{titleCase component-name}} //TODO: change to titleCase ("Component Name")
47+
48+
### Accessibility
49+
50+
## Examples
51+
52+
<LivePreview
53+
scope={{ pascalCase component-name }} // TODO: add double curly brackets to scope value (`scope=\{{ ... }}`)
54+
language="jsx"
55+
>
56+
{`<{{pascalCase component-name}}/>`}
57+
</LivePreview>
58+
59+
## Composition Notes
60+

0 commit comments

Comments
 (0)