forked from pointblankdev/tailwindui-storybook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwindui.js
178 lines (146 loc) · 5 KB
/
tailwindui.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
const fs = require("fs");
const playwright = require("playwright");
const baseUrl = "https://tailwindui.com";
const email = (process.env.email || "").trim();
const password = (process.env.password || "").trim();
// Make sure email and password are provided
if (!email || !password) {
console.log(
"[ERROR] please provide email and password of your tailwind ui account as environment variable."
);
console.log(
"example: email=myemail@example.com password=mypassword node tailwindui.js react"
);
process.exit(1);
}
const outputDir = "output";
async function login(page, email, password) {
await page.goto(baseUrl + "/login");
await page.type('#email', email);
await page.type('#password', password);
await page.click('[type="submit"]');
await page.waitForNavigation();
// Assert login succeeded
const loginFailedToken = "These credentials do not match our records";
const el = await page.$$(`:text("${loginFailedToken}")`);
if (el.length) {
throw new Error("invalid credentials");
}
}
async function getSections(page) {
const sections = await page.evaluate(([]) => {
let sections = [];
document
.querySelectorAll('#components [href^="/components"]')
.forEach((el) => {
const title = el.querySelector("p:nth-child(1)").innerText;
const components = el.querySelector("p:nth-child(2)").innerText;
const url = el.href;
sections.push({ title, componentsCount: parseInt(components), url });
});
return Promise.resolve(sections);
}, []);
return sections;
}
async function getComponents(page, sectionUrl, type = "html") {
// Go to section url
await page.goto(sectionUrl);
// Select react code
await page.waitForSelector('[x-model="activeSnippet"]');
await page.evaluate(
([type]) => {
document.querySelectorAll('[x-model="activeSnippet"]').forEach((el) => {
el.value = type;
const evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
el.dispatchEvent(evt);
});
},
[type]
);
// Toggle all codeblocks (otherwise the `innerText` will be empty)
await page.waitForSelector('[x-ref="code"]');
await page.evaluate(([]) => {
document.querySelectorAll('section[id^="component-"]').forEach((el) => {
el.querySelector('[x-ref="code"]').click();
});
}, []);
// Wait until codeblock is visible
await page.waitForSelector(`[x-ref="codeBlock${type}"]`);
const components = await page.evaluate(
([type]) => {
let components = [];
document.querySelectorAll('section[id^="component-"]').forEach((el) => {
const title = el.querySelector("a").innerText;
const component = el.querySelector(`[x-ref="codeBlock${type}"]`).innerText;
components.push({ title, codeblocks: { [type]: component } });
});
return Promise.resolve(components);
},
[type]
);
// Back to home page
await page.goto(baseUrl);
return components;
}
async function run() {
const [, , componentType] = process.argv;
if (!componentType) {
console.error("[ERROR] please specify component type (html/react/vue).");
console.error(`example: node tailwindui.js react`);
process.exit(0);
}
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir);
console.log("[INFO] output directory created");
}
const browser = await playwright["chromium"].launch({
headless: false,
// slowMo: 200, // Uncomment to activate slow mo
});
const ctx = await browser.newContext();
const page = await ctx.newPage();
console.log("[INFO] logging in to tailwindui.com..");
try {
// Login to tailwindui.com. Throws error if failed.
await login(page, email, password);
} catch (e) {
const maskPassword = password.replace(/.{4}$/g, "*".repeat(4));
console.log(
`[ERROR] login failed: ${e.message} (email: ${email}, password: ${maskPassword})`
);
process.exit(1);
}
console.log(`[INFO] fetching sections..`);
let sections = await getSections(page).catch((e) => {
console.log("[ERROR] getSections failed:", e);
});
const sumComponents = sections
.map((s) => s.componentsCount)
.reduce((a, b) => parseInt(a) + parseInt(b), [0]);
console.log(
`[INFO] ${sections.length} sections found (${sumComponents} components)`
);
for (const i in sections) {
const { title, componentsCount, url } = sections[i];
console.log(
`[${parseInt(i) + 1}/${
sections.length
}] fetching ${componentType} components: ${title} (${componentsCount} components)`
);
let components = [];
try {
components = await getComponents(page, url, componentType);
} catch (e) {
console.log("[ERROR] getComponent failed:", title, e.message);
process.exit(1);
}
sections[i].components = components;
}
await browser.close();
const jsonFile = `${outputDir}/tailwindui.${componentType}.json`;
console.log("[INFO] writing json file:", jsonFile);
fs.writeFileSync(jsonFile, JSON.stringify(sections));
console.log("[INFO] done!");
}
run();