Added tsdoc sync

README.md

@@ -98,6 +98,6 @@ See official docs for more information
 
 3. Use the <Link href="/docs/theme" className="text-primary underline">theme generator</Link> to generate CSS themes. Add the CSS variables to your global css file.
 
-## Philosophy
+## Repository
 
-I wanted to keep
+`npm run build` will trigger `prebuild`. In `prebuild`, @chimera-ui/components will run tsdocSync.js, which syncs the classNames from each component to a tsdoc comment above it.

apps/docs/components/ThemeGenerator/ThemeGenerator.tsx

@@ -202,14 +202,16 @@ const Sidebar = ({
           </Button>
         )}
 
-        <Button
-          className="hidden @[10px]:block w-full"
-          onClick={() => {
-            setStep(step + 1);
-          }}
-        >
-          Next
-        </Button>
+        {step < 3 && (
+          <Button
+            className="hidden @[10px]:block w-full"
+            onClick={() => {
+              setStep(step + 1);
+            }}
+          >
+            Next
+          </Button>
+        )}
       </div>
     </div>
   );
@@ -248,7 +250,9 @@ const CopyCss = ({ themeColors }: { themeColors: ColorsType }) => {
           <Clipboard className="w-4 h-4" />
         )}
       </Button>
-      <code className="px-8">{code}</code>
+      <code className="px-8" id="theme-gen-copy-css">
+        {code}
+      </code>
     </pre>
   );
 };

apps/docs/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "cypress open"
   },
   "dependencies": {
     "@chimera-ui/components": "workspace:*",
@@ -39,6 +40,7 @@
     "@types/color": "^3.0.3",
     "@types/react-resizable": "^3.0.3",
     "autoprefixer": "^10.4.13",
+    "cypress": "^12.7.0",
     "postcss": "^8.4.20",
     "react-docgen": "6.0.0-beta.5",
     "tailwindcss": "^3.2.4"

apps/docs/pages/docs/components/Accordion.mdx

@@ -45,3 +45,4 @@ import { InfoCircledIcon } from "@radix-ui/react-icons";
     </Accordion.Root>
   </Showcase.Preview>
 </Showcase>
+<div>{JSON.stringify(ComponentDocHelper)}</div>

apps/docs/pages/docs/components/Popover.mdx

@@ -77,9 +77,7 @@ import {
   <Showcase.Preview>
     <Popover.Root>
       <Popover.Trigger asChild>
-        <button className="IconButton" aria-label="Update dimensions">
-          <MixerHorizontalIcon />
-        </button>
+        <MixerHorizontalIcon />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content className="PopoverContent" sideOffset={5}>

apps/docs/pages/docs/components/Tabs.mdx

@@ -21,9 +21,9 @@ import { InfoCircledIcon } from "@radix-ui/react-icons";
         <Tabs.Trigger value="password">Password</Tabs.Trigger>
       </Tabs.List>
       <Tabs.Content value="account">
-        <p className="text-sm text-base-content">
-          Make changes to your account here. Click save when you're done.
-        </p>
+        <span className="text-sm text-base-content">
+            Make changes to your account here. Click save when you're done.
+        </span>
         <div className="grid gap-2 py-4">
           <div className="space-y-1">
             <Label htmlFor="name">Name</Label>
@@ -39,9 +39,9 @@ import { InfoCircledIcon } from "@radix-ui/react-icons";
         </div>
       </Tabs.Content>
       <Tabs.Content value="password">
-        <p className="text-sm text-base-content">
+        <span className="text-sm text-base-content">
           Change your password here. After saving, you'll be logged out.
-        </p>
+        </span>
         <div className="grid gap-2 py-4">
           <div className="space-y-1">
             <Label htmlFor="current">Current password</Label>
@@ -57,5 +57,6 @@ import { InfoCircledIcon } from "@radix-ui/react-icons";
         </div>
       </Tabs.Content>
     </Tabs.Root>
+
   </Showcase.Preview>
 </Showcase>

apps/docs/pages/docs/components/Tooltip.mdx

@@ -18,14 +18,13 @@ import { InfoCircledIcon } from "@radix-ui/react-icons";
     <Tooltip.Provider>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Button variant="outline" className="w-10 rounded-full p-0">
-            +<span className="sr-only">Add</span>
-          </Button>
+            <span className="sr-only">Add</span>
         </Tooltip.Trigger>
         <Tooltip.Content>
-          <p>Add to library</p>
+          <span>Add to library</span>
         </Tooltip.Content>
       </Tooltip.Root>
     </Tooltip.Provider>
+
   </Showcase.Preview>
 </Showcase>

apps/docs/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -16,13 +20,29 @@
     "incremental": true,
     "baseUrl": "./",
     "paths": {
-      "@/components/*": ["./components/*"],
-      "@/pages/*": ["./pages/*"],
-      "@/public/*": ["./public/*"],
-      "@/styles/*": ["./styles/*"],
-      "@/utils/*": ["./utils/*"]
+      "@/components/*": [
+        "./components/*"
+      ],
+      "@/pages/*": [
+        "./pages/*"
+      ],
+      "@/public/*": [
+        "./public/*"
+      ],
+      "@/styles/*": [
+        "./styles/*"
+      ],
+      "@/utils/*": [
+        "./utils/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

package.json

@@ -7,7 +7,9 @@
     "web": "turbo run dev --filter",
     "clean": "turbo run clean && rm -rf node_modules",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "prebuild": "turbo run prebuild --filter=@chimera-ui/components",
     "changeset": "changeset",
+    "test": "turbo run test --filter=docs",
     "version-packages": "changeset version",
     "release": "turbo run build --filter=docs^... && changeset publish"
   },

packages/components/docgen.js

@@ -0,0 +1,39 @@
+const fs = require("fs");
+const path = require("path");
+const reactDocs = require("react-docgen");
+
+const code = `
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+
+import { cn } from "../utils";
+
+export const Accordion = (
+  props: React.ComponentProps<typeof AccordionPrimitive.Root>
+) => {
+  return <></>;
+};
+
+const Root = AccordionPrimitive.Root;
+Root.displayName = AccordionPrimitive.Root.displayName;
+Accordion.Root = Root;
+
+/**
+ * Default Classes: ~ "border-b border-b-line" ~
+ * sdiofh
+ */
+const Item = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b border-b-line", className)}
+    {...props}
+  />
+));
+Item.displayName = "Accordion.Item";
+Accordion.Item = Item;
+`;
+
+console.log(reactDocs.parse(code));

packages/components/package.json

@@ -16,7 +16,7 @@
     "dist/**"
   ],
   "scripts": {
-    "prebuild": "node builddocs.js",
+    "prebuild": "node tsdocSync.js",
     "build": "tsup",
     "dev": "tsup --watch",
     "check-types": "tsc --noEmit"

packages/components/src/Accordion.tsx

@@ -53,7 +53,7 @@ const Trigger = React.forwardRef<
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
-Trigger.displayName = AccordionPrimitive.Trigger.displayName;
+Trigger.displayName = "Accordion.Trigger";
 Accordion.Trigger = Trigger;
 
 /**
@@ -75,5 +75,5 @@ const Content = React.forwardRef<
     <div className="pt-0 pb-4">{children}</div>
   </AccordionPrimitive.Content>
 ));
-Content.displayName = AccordionPrimitive.Content.displayName;
+Content.displayName = "Accordion.Content";
 Accordion.Content = Content;