updated ui package and dashboard to test if ui is installed correctly

himohitmehta · Jun 2, 2024 · ae93eaf · ae93eaf
1 parent 1b2282d
commit ae93eaf
Show file tree

Hide file tree

Showing 13 changed files with 197 additions and 176 deletions.
diff --git a/apps/dashboard/app/layout.tsx b/apps/dashboard/app/layout.tsx
@@ -1,6 +1,6 @@
+import "@saroh/ui/globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
 

diff --git a/apps/dashboard/app/page.tsx b/apps/dashboard/app/page.tsx
@@ -1,116 +1,9 @@
-import Image from "next/image";
+import { Button } from "@saroh/ui";
 
 export default function Home() {
     return (
-        <main className="flex min-h-screen flex-col items-center justify-between p-24">
-            <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-                <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200  lg:p-4 dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:dark:bg-zinc-800/30">
-                    Get started by editing&nbsp;
-                    <code className="font-mono font-bold">app/page.tsx</code>
-                </p>
-                <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white lg:static lg:size-auto lg:bg-none dark:from-black dark:via-black">
-                    <a
-                        className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-                        href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        By{" "}
-                        <Image
-                            src="/vercel.svg"
-                            alt="Vercel Logo"
-                            className="dark:invert"
-                            width={100}
-                            height={24}
-                            priority
-                        />
-                    </a>
-                </div>
-            </div>
-
-            <div className="before:bg-gradient-radial after:bg-gradient-conic relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40">
-                <Image
-                    className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-                    src="/next.svg"
-                    alt="Next.js Logo"
-                    width={180}
-                    height={37}
-                    priority
-                />
-            </div>
-
-            <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
-                <a
-                    href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-                    className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    <h2 className="mb-3 text-2xl font-semibold">
-                        Docs{" "}
-                        <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-                            -&gt;
-                        </span>
-                    </h2>
-                    <p className="m-0 max-w-[30ch] text-sm opacity-50">
-                        Find in-depth information about Next.js features and
-                        API.
-                    </p>
-                </a>
-
-                <a
-                    href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-                    className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    <h2 className="mb-3 text-2xl font-semibold">
-                        Learn{" "}
-                        <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-                            -&gt;
-                        </span>
-                    </h2>
-                    <p className="m-0 max-w-[30ch] text-sm opacity-50">
-                        Learn about Next.js in an interactive course
-                        with&nbsp;quizzes!
-                    </p>
-                </a>
-
-                <a
-                    href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-                    className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    <h2 className="mb-3 text-2xl font-semibold">
-                        Templates{" "}
-                        <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-                            -&gt;
-                        </span>
-                    </h2>
-                    <p className="m-0 max-w-[30ch] text-sm opacity-50">
-                        Explore starter templates for Next.js.
-                    </p>
-                </a>
-
-                <a
-                    href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-                    className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    <h2 className="mb-3 text-2xl font-semibold">
-                        Deploy{" "}
-                        <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-                            -&gt;
-                        </span>
-                    </h2>
-                    <p className="m-0 max-w-[30ch] text-balance text-sm opacity-50">
-                        Instantly deploy your Next.js site to a shareable URL
-                        with Vercel.
-                    </p>
-                </a>
-            </div>
+        <main>
+            <Button>Login</Button>
         </main>
     );
 }
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -11,7 +11,8 @@
     "dependencies": {
         "react": "^18",
         "react-dom": "^18",
-        "next": "14.2.3"
+        "next": "14.2.3",
+        "@saroh/ui": "workspace:*"
     },
     "devDependencies": {
         "typescript": "^5",

diff --git a/apps/dashboard/postcss.config.mjs b/apps/dashboard/postcss.config.mjs
@@ -1,8 +1,9 @@
-/** @type {import('postcss-load-config').Config} */
-const config = {
-  plugins: {
-    tailwindcss: {},
-  },
-};
+// /** @type {import('postcss-load-config').Config} */
+// const config = {
+//   plugins: {
+//     tailwindcss: {},
+//   },
+// };
 
-export default config;
+// export default config;
+export * from "@saroh/ui/postcss.config";
diff --git a/apps/dashboard/tailwind.config.ts b/apps/dashboard/tailwind.config.ts
@@ -1,20 +1 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-    content: [
-        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-        "./components/**/*.{js,ts,jsx,tsx,mdx}",
-        "./app/**/*.{js,ts,jsx,tsx,mdx}",
-    ],
-    theme: {
-        extend: {
-            backgroundImage: {
-                "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-                "gradient-conic":
-                    "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-            },
-        },
-    },
-    plugins: [],
-};
-export default config;
+export * from "@saroh/ui/tailwind.config";
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
         "db:seed": "turbo run db:seed",
         "dev": "turbo run dev --concurrency 100",
         "lint": "turbo run lint",
-        "format": "prettier --write \"**/*.{ts,tsx,md}\""
+        "format": "prettier --write \"**/*.{js,jsx,ts,tsx,md}\""
     },
     "prisma": {
         "schema": "packages/database/prisma/schema.prisma",

diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js
@@ -1,3 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
-    extends: ["custom/react-internal"],
+    root: true,
+    extends: ["eslint-config-custom/react-internal.js"],
+    parser: "@typescript-eslint/parser",
+    rules: {
+        "no-redeclare": "off",
+    },
 };
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,12 +1,20 @@
 {
     "name": "@saroh/ui",
+    "description": "UI components for Saroh.io",
     "version": "0.0.0",
-    "main": "./index.tsx",
-    "types": "./index.tsx",
+    "sideEffects": false,
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist/**"
+    ],
     "license": "MIT",
     "scripts": {
-        "lint": "eslint .",
-        "generate:component": "turbo gen react-component"
+        "build": "tsup",
+        "lint": "eslint src/",
+        "dev": "tsup --watch",
+        "check-types": "tsc --noEmit"
     },
     "devDependencies": {
         "@saroh/tailwind-config": "workspace:*",
@@ -20,8 +28,37 @@
         "typescript": "^5.4.5"
     },
     "dependencies": {
+        "@radix-ui/react-slot": "^1.0.2",
         "autoprefixer": "^10.4.19",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
         "postcss": "^8.4.38",
-        "tailwindcss": "^3.4.3"
+        "tailwind-merge": "^2.3.0",
+        "tailwindcss": "^3.4.3",
+        "tsup": "^8.0.2"
+    },
+    "author": "Mohit Kumar <himohitmehta>",
+    "homepage": "https://saroh.io",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/himohitmehta/saroh.io.git"
+    },
+    "bugs": {
+        "url": "https://github.com/himohitmehta/saroh.io/issues"
+    },
+    "keywords": [
+        "saroh",
+        "saroh.io",
+        "ui"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "exports": {
+        "./globals.css": "./src/globals.css",
+        "./postcss.config": "./postcss.config.js",
+        "./tailwind.config": "./tailwind.config.ts",
+        "./lib/*": "./src/lib/*.ts",
+        "./components/*": "./src/components/*.tsx"
     }
 }
diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@ui/lib/utils";
+
+const buttonVariants = cva(
+    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    {
+        variants: {
+            variant: {
+                default:
+                    "bg-primary text-primary-foreground hover:bg-primary/90",
+                destructive:
+                    "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                outline:
+                    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+                secondary:
+                    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                ghost: "hover:bg-accent hover:text-accent-foreground",
+                link: "text-primary underline-offset-4 hover:underline",
+            },
+            size: {
+                default: "h-10 px-4 py-2",
+                sm: "h-9 rounded-md px-3",
+                lg: "h-11 rounded-md px-8",
+                icon: "h-10 w-10",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    },
+);
+
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : "button";
+        return (
+            <Comp
+                className={cn(buttonVariants({ variant, size, className }))}
+                ref={ref}
+                {...props}
+            />
+        );
+    },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
@@ -1,5 +1,11 @@
 {
     "extends": "tsconfig/react-library.json",
     "include": ["."],
-    "exclude": ["dist", "build", "node_modules"]
+    "exclude": ["dist", "build", "node_modules"],
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@ui/*": ["./src/*"]
+        }
+    }
 }
diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+    entry: ["src/**/*.tsx"],
+    format: ["esm"],
+    esbuildOptions(options) {
+        options.banner = {
+            js: '"use client"',
+        };
+    },
+    dts: true,
+    minify: true,
+    external: ["react"],
+    ...options,
+}));