add forms

tremorlabs · Jan 20, 2024 · 799ad1f · 799ad1f
1 parent 2dba5c9
commit 799ad1f
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 34 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/index.ts b/src/index.ts
@@ -79,11 +79,20 @@ async function main() {
       }
 
       // Install tremor
-      const dependenciesSpinner = ora(`Installing @tremor/react...`).start();
+      const tremorSpinner = ora(`Installing @tremor/react...`).start();
       await execa(packageManager, [
         packageManager === "npm" ? "install" : "add",
         "@tremor/react",
       ]);
+      tremorSpinner.succeed();
+
+      const dependenciesSpinner = ora(
+        `Installing Tailwind CSS dependency...`
+      ).start();
+      await execa(packageManager, [
+        packageManager === "npm" ? "install" : "add",
+        "-D @tailwindcss/forms",
+      ]);
       dependenciesSpinner.succeed();
 
       const tailwindDestination = "./tailwind.config.js";

diff --git a/src/templates.ts b/src/templates.ts
@@ -38,35 +38,35 @@ export const CONTENT_REFINE = `[
     "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
   ]`;
 
-export const SAFELIST = `[
-    {
-      pattern:
-        /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-      variants: ["hover", "ui-selected"],
-    },
-    {
-      pattern:
-        /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-      variants: ["hover", "ui-selected"],
-    },
-    {
-      pattern:
-        /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-      variants: ["hover", "ui-selected"],
-    },
-    {
-      pattern:
-        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-    },
-    {
-      pattern:
-        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-    },
-    {
-      pattern:
-        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-    },
-  ]`;
+export const SAFELIST = `safelist: [
+  {
+    pattern:
+      /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    variants: ["hover", "ui-selected"],
+  },
+  {
+    pattern:
+      /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    variants: ["hover", "ui-selected"],
+  },
+  {
+    pattern:
+      /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    variants: ["hover", "ui-selected"],
+  },
+  {
+    pattern:
+      /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+  },
+  {
+    pattern:
+      /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+  },
+  {
+    pattern:
+      /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+  },
+],`;
 
 export const THEME = `{
     transparent: "transparent",
@@ -106,15 +106,15 @@ export const THEME = `{
         // dark mode
         "dark-tremor": {
           brand: {
-            faint: "#0B1229", // custom
+            faint: "#0B1229",
             muted: colors.blue[950],
             subtle: colors.blue[800],
             DEFAULT: colors.blue[500],
             emphasis: colors.blue[400],
             inverted: colors.gray[950],
           },
           background: {
-            muted: "#131A2B", // custom
+            muted: "#131A2B",
             subtle: colors.gray[800],
             DEFAULT: colors.gray[900],
             emphasis: colors.gray[300],
@@ -150,10 +150,12 @@ export const THEME = `{
         "tremor-full": "9999px",
       },
       fontSize: {
-        "tremor-label": ["0.75rem"],
+        "tremor-label": ["0.75rem", { lineHeight: "1rem" }],
         "tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
         "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
         "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
       },
     },
   }`;
+
+export const PLUGINS = `[require('@headlessui/tailwindcss'), require('@tailwindcss/forms')],`;
diff --git a/src/utils/get-tailwind-config.ts b/src/utils/get-tailwind-config.ts
@@ -8,6 +8,7 @@ import {
   CONTENT_VITE,
   SAFELIST,
   THEME,
+  PLUGINS,
 } from "../templates";
 import { FrameworkConfigType } from "../types";
 
@@ -30,7 +31,7 @@ module.exports = {
   content: ${contentConfig},
   theme: ${THEME},
   safelist: ${SAFELIST},
-  plugins: [require("@headlessui/tailwindcss")],
+  plugins: ${PLUGINS},
 };
 `;
 };