-
Notifications
You must be signed in to change notification settings - Fork 18
/
tailwindui-storybook.js
87 lines (65 loc) · 1.99 KB
/
tailwindui-storybook.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
const fs = require("fs");
const camelCase = require("lodash/camelCase");
const startCase = require("lodash/startCase");
const [, , jsonFile, componentType] = process.argv;
if (!jsonFile || !componentType) {
console.log("usage: tailwind-storybook.js <jsonfile> <type>");
console.log("example: tailwind-storybook.js tailwindui.react.json react");
process.exit(0);
}
const sections = require(jsonFile);
const outputDir = `output/tailwindui-${componentType}`;
const storyFolder = `Tailwind UI`;
function createDir(dir) {
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir);
console.log("[INFO] directory created:", dir);
}
}
function pascalCase(str) {
return startCase(camelCase(str)).replace(/ /g, "");
}
async function run() {
createDir(outputDir);
// Uncomment to see data structure
console.log("sections[0]:", sections[0]);
sections.forEach((section) => {
const { title, components } = section;
let sectionName = pascalCase(title.replace(/\s/g, "_"));
if (sectionName.toLowerCase() === "faqs") {
sectionName = "FAQs";
}
const sectionDir = `${outputDir}/${sectionName}`;
createDir(sectionDir);
const storyDir = `${sectionDir}/stories`;
createDir(storyDir);
const importComponents = [];
const componentStories = [];
components.forEach((component) => {
const componentName = pascalCase(component.title);
importComponents.push(
`import ${componentName} from "./${componentName}";`
);
componentStories.push(`
<Story name="${componentName}">
<${componentName} />
</Story>`);
fs.writeFileSync(
`${storyDir}/${componentName}.tsx`,
component.codeblocks[componentType]
);
});
// Create story file
const storyIndex = `
import {
Meta,
Story,
} from "@storybook/addon-docs/blocks";
${importComponents.join("\n")}
<Meta title="${storyFolder} / ${sectionName}" />
${componentStories.join("\n")}
`;
fs.writeFileSync(`${storyDir}/index.stories.mdx`, storyIndex);
});
}
run();