Add Tailwind Prefix, Improve Build System in Dev, Minor Spacing and C…

…ircuit JSON viewer fixes (#149) * rely only on built css * checkpoint shadcn w/ prefix added * add radius to base * checkpoint, issues w/ circuit json and bom * fix circuit json table * improve spacing on dropdown * tailwind config
tscircuit · Jan 18, 2025 · 5faab65 · 5faab65
1 parent a17b767
commit 5faab65
Show file tree

Hide file tree

Showing 24 changed files with 313 additions and 225 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/components.json b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "index.css",
+    "baseColor": "neutral",
+    "cssVariables": false,
+    "prefix": "rf-"
+  },
+  "aliases": {
+    "components": "lib/components",
+    "utils": "lib/utils",
+    "ui": "lib/components/ui",
+    "lib": "lib",
+    "hooks": "lib/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/index.html b/index.html
@@ -7,7 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="https://cdn.tailwindcss.com"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/lib/components/BomTable.tsx b/lib/components/BomTable.tsx
@@ -9,7 +9,7 @@ export const linkify = (supplier: string, partNumber: string) => {
   if (supplier === "jlcpcb") {
     return (
       <a
-        className="underline text-blue-500"
+        className="rf-underline rf-text-blue-500"
         target="_blank"
         rel="noreferrer"
         href={`https://jlcpcb.com/partdetail/${partNumber}`}
@@ -36,24 +36,24 @@ export const BomTable: React.FC<BomTableProps> = ({ circuitJson }) => {
   }
 
   return (
-    <div className="overflow-x-auto">
-      <table className="w-full text-left text-sm">
+    <div className="rf-overflow-x-auto">
+      <table className="rf-w-full rf-text-left rf-text-sm">
         <thead>
-          <tr className="border-b">
-            <th className="p-2">Name</th>
+          <tr className="rf-border-b">
+            <th className="rf-p-2">Name</th>
             {Array.from(supplierColumns).map((supplier) => (
-              <th key={supplier} className="p-2 capitalize">
+              <th key={supplier} className="rf-p-2 rf-capitalize">
                 {supplier}
               </th>
             ))}
           </tr>
         </thead>
         <tbody>
           {sourceComponents.map((comp) => (
-            <tr key={comp.source_component_id} className="border-b">
-              <td className="p-2">{comp.name}</td>
+            <tr key={comp.source_component_id} className="rf-border-b">
+              <td className="rf-p-2">{comp.name}</td>
               {Array.from(supplierColumns).map((supplier) => (
-                <td key={supplier} className="p-2">
+                <td key={supplier} className="rf-p-2">
                   {linkify(
                     supplier,
                     comp.supplier_part_numbers?.[supplier]?.[0] || "",