Update script to support current tailwindui.com

.env.sample

@@ -0,0 +1,5 @@
+BASE_URL=https://tailwindui.com
+
+email=some-email
+password=some-password
+slowmo=0

README.md

@@ -26,10 +26,10 @@ The two steps process makes it easy to adjust for future needs.
 
    ```sh
    # Format:
-   email=<[email protected]> password=<yourpassword> node tailwindui.js <react|vue|html>
+   yarn start <react|vue|html>
 
    # Example:
-   email='[email protected]' password='pass123' node tailwindui.js react
+   yarn start react
    ```
 
    The command will start chromium and navigate thru tailwindui.com website to copy the components codes. Here's how it looks like:
@@ -40,8 +40,8 @@ The two steps process makes it easy to adjust for future needs.
 5. Now we can create the mdx files based on above json. To do so, run:
 
    ```sh
-   # Replace `react.json` suffix with `vue.json` as you fit
-   node tailwindui-storybook.js ./output/tailwindui.react.json react
+    # Replace "react" with "html" or "vue" (based on step 3)
+   yarn create-mdx react
    ```
 
    ![tailwindui-storybook](docs/tailwindui-storybook-mdx.gif)

lib/getComponents.js

@@ -0,0 +1,46 @@
+const baseUrl = process.env.BASE_URL;
+
+async function getComponents(page, sectionUrl, type = "html") {
+  // Go to section url. Example: https://tailwindui.com/components/marketing/sections/heroes
+  await page.goto(sectionUrl);
+
+  const toggleCodeSelector = '[role=tablist] > [id^=headlessui-tabs-tab-]:nth-child(2)'
+  try {
+    // Element to toggle code snippet (hint: ../docs/hints/toggle-code.png). 
+    // The element won't exist if the user doesn't have access to the paid component.
+    await page.waitForSelector(toggleCodeSelector, { timeout: 10 * 1000 });
+  } catch (error) {
+    console.warn(`You do not have access to this section components: ${sectionUrl}`);
+  }
+
+  const components = await page.evaluate(([toggleCodeSelector, type]) => {
+    let components = [];
+    document.querySelectorAll('section[id^="component-"]').forEach((el) => {
+      const toggleCode = el.querySelector(toggleCodeSelector);
+      if (!toggleCode) {
+        return
+      }
+
+      // Toggle code block
+      el.querySelector(toggleCodeSelector)?.click();
+
+      // Change the type of code snippet to HTML/React/Vue (hint: ../docs/hints/toggle-code-format.png)
+      const toggleSnippetType = el.querySelector('select.form-select')
+      toggleSnippetType.value = type;
+      toggleSnippetType.dispatchEvent(new Event('change', { bubbles: true }));
+
+      // Extract code blocks (hint: ../docs/hints/codeblock.png)
+      const title = el.querySelector("h2 a").innerText;
+      const codeblock = el.querySelector('pre code')?.innerText;
+      codeblock && components.push({ title, codeblocks: { [type]: codeblock } });
+    });
+    return Promise.resolve(components);
+  }, [toggleCodeSelector, type]);
+
+  // Back to home page
+  await page.goto(baseUrl);
+
+  return components;
+}
+
+module.exports = getComponents

lib/getSections.js

@@ -0,0 +1,18 @@
+async function getSections(page) {
+  const sections = await page.evaluate(([]) => {
+    const buildSections = [];
+    document
+      .querySelectorAll('a[href^="/components"]')
+      .forEach((el) => {
+        const title = el.children[1]?.innerText;
+        const countComponents = el.parentElement?.nextElementSibling?.innerText;
+        const url = el.href;
+        title && countComponents && buildSections.push({ title, componentsCount: parseInt(countComponents), url });
+      });
+    return Promise.resolve(buildSections);
+  }, []);
+
+  return sections;
+}
+
+module.exports = getSections

lib/getSections.sample.json

@@ -0,0 +1,12 @@
+[
+  {
+    "title": "Hero Sections",
+    "componentsCount": 9,
+    "url": "https://tailwindui.com/components/marketing/sections/heroes"
+  },
+  {
+    "title": "Feature Sections",
+    "componentsCount": 10,
+    "url": "https://tailwindui.com/components/marketing/sections/feature-sections"
+  }
+]

lib/login.js

@@ -0,0 +1,22 @@
+const baseUrl = process.env.BASE_URL;
+const selector = {
+  email: 'input#email',
+  password: 'input#password',
+  submit: 'button[type=submit]',
+}
+
+async function login(page, email, password) {
+  await page.goto(baseUrl + "/login");
+  await page.locator(selector.email).fill(email);
+  await page.locator(selector.password).fill(password);
+  await page.locator(selector.submit).click();
+
+  // 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");
+  }
+}
+
+module.exports = login

package.json

@@ -1,7 +1,13 @@
 {
   "name": "tailwindui-storybook",
+  "engine": ">=14",
+  "scripts": {
+    "start": "node -r dotenv/config tailwindui.js",
+    "create-mdx": "node -r dotenv/config tailwindui-storybook.js"
+  },
   "dependencies": {
+    "dotenv": "^16.0.3",
     "lodash": "^4.17.21",
-    "playwright": "^1.9.2"
+    "playwright": "^1.27.1"
   }
 }

tailwindui-storybook.js

@@ -2,36 +2,31 @@ const fs = require("fs");
 const camelCase = require("lodash/camelCase");
 const startCase = require("lodash/startCase");
 
-const [, , jsonFile, componentType] = process.argv;
+const createDir = require("./util/createDir");
 
-if (!jsonFile || !componentType) {
-  console.log("usage: tailwind-storybook.js <jsonfile> <type>");
-  console.log("example: tailwind-storybook.js tailwindui.react.json react");
+const componentType = process.argv[process.argv.length - 1];
+if (!componentType.match(/react|html|vue/)) {
+  console.log("usage: tailwind-storybook.js <react|html|vue>");
+  console.log("example: tailwind-storybook.js 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);
-  }
+const jsonFile = `./output/tailwindui.${componentType}.json`
+if (!fs.existsSync(jsonFile)) {
+  console.error("[ERROR] could not find json file at", jsonFile)
+  console.log(`→ Have you run 'yarn start ${componentType}'?`)
+  process.exit(1)
 }
 
-function pascalCase(str) {
-  return startCase(camelCase(str)).replace(/ /g, "");
-}
+const sections = require(jsonFile)
+const storyFolder = `Tailwind UI`;
+const outputDir = `output/tailwindui-${componentType}`;
 
 async function run() {
   createDir(outputDir);
 
   // Uncomment to see data structure
-  console.log("sections[0]:", sections[0]);
+  // console.log("sections[0]:", sections[0]);
 
   sections.forEach((section) => {
     const { title, components } = section;
@@ -52,12 +47,15 @@ async function run() {
     components.forEach((component) => {
       const componentName = pascalCase(component.title);
 
+      // Add `Component_` prefix for import name if component name starts with number
+      const importName = componentName.match(/^\d/) ? `Component_${componentName}` : componentName;
+
       importComponents.push(
-        `import ${componentName} from "./${componentName}";`
+        `import ${importName} from "./${componentName}";`
       );
       componentStories.push(`
 <Story name="${componentName}">
-    <${componentName} />
+    <${importName} />
 </Story>`);
 
       fs.writeFileSync(
@@ -67,21 +65,20 @@ async function run() {
     });
 
     // Create story file
-    const storyIndex = `
-import {
-    Meta,
-    Story,
-} from "@storybook/addon-docs/blocks";
+    const storyIndex = `import { Meta, Story } from "@storybook/addon-docs";
 
 ${importComponents.join("\n")}
 
 <Meta title="${storyFolder} / ${sectionName}" />
-
 ${componentStories.join("\n")}
 `;
 
     fs.writeFileSync(`${storyDir}/index.stories.mdx`, storyIndex);
   });
 }
 
+function pascalCase(str) {
+  return startCase(camelCase(str)).replace(/ /g, "");
+}
+
 run();