Merge pull request #10 from martinc1991/feature/config-daisy-ui

Feature/config daisy UI
chescalante · May 31, 2024 · 94883a8 · 94883a8
2 parents 062322e + d9ddd6e
commit 94883a8
Show file tree

Hide file tree

Showing 9 changed files with 703 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ui/index.html b/packages/ui/index.html
@@ -1,5 +1,5 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -16,6 +16,10 @@
     "@types/react": "18.2.66",
     "@types/react-dom": "18.2.22",
     "@vitejs/plugin-react-swc": "3.5.0",
+    "autoprefixer": "^10.4.19",
+    "daisyui": "^4.11.1",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "typescript": "5.2.2",
     "vite": "5.2.0",
     "vite-tsconfig-paths": "^4.3.2"

diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
@@ -1,14 +1,15 @@
+import reactLogo from "@/assets/react.svg";
+import { Button } from "@/components";
 import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
 import "./App.css";
+import viteLogo from "/vite.svg";
 
 function App() {
   const [count, setCount] = useState(0);
 
   return (
     <>
-      <div>
+      <div className="flex flex-col items-center">
         <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
           <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
@@ -18,16 +19,12 @@ function App() {
       </div>
       <h1>Vite + React</h1>
       <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
+        <Button onClick={() => setCount((count) => count + 1)}>count is {count}</Button>
         <p>
           Edit <code>src/App.tsx</code> and save to test HMR
         </p>
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
     </>
   );
 }

diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
@@ -0,0 +1,5 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export function Button(props: ButtonProps) {
+  return <button className="btn" {...props} />;
+}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
@@ -0,0 +1 @@
+export * from "./button";
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
@@ -0,0 +1,13 @@
+import type { Config } from "tailwindcss";
+import daisyui from "daisyui";
+
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [daisyui],
+  daisyui: {
+    themes: ["dark"],
+  },
+} satisfies Config;