diff --git a/apps/dashboard/app/layout.tsx b/apps/dashboard/app/layout.tsx index 2918f93..e401839 100644 --- 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 index 5ce7002..6e4ed7e 100644 --- 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 ( -
-
-

- Get started by editing  - app/page.tsx -

-
- - By{" "} - Vercel Logo - -
-
- -
- Next.js Logo -
- -
- -

- Docs{" "} - - -> - -

-

- Find in-depth information about Next.js features and - API. -

- - - -

- Learn{" "} - - -> - -

-

- Learn about Next.js in an interactive course - with quizzes! -

- - - -

- Templates{" "} - - -> - -

-

- Explore starter templates for Next.js. -

- - - -

- Deploy{" "} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL - with Vercel. -

- -
+
+
); } diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json index c8a4268..6bceac1 100644 --- 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 index 1a69fd2..935bfcf 100644 --- 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 index 86359dc..4f4eeaa 100644 --- 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 index 53c8882..c3f203b 100644 --- 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 index a2d2108..b1c0275 100644 --- 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 index 7e3f98e..5eec2c7 100644 --- 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 ", + "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 index e69de29..329ad21 100644 --- 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, + VariantProps { + asChild?: boolean; +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button"; + return ( + + ); + }, +); +Button.displayName = "Button"; + +export { Button, buttonVariants }; diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts index e69de29..e6a8be0 100644 --- 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 index c50596f..57908d2 100644 --- 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 new file mode 100644 index 0000000..f0a75d8 --- /dev/null +++ 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, +})); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9246b13..67cbbed 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -388,6 +388,9 @@ importers: apps/dashboard: dependencies: + '@saroh/ui': + specifier: workspace:* + version: link:../../packages/ui next: specifier: 14.2.3 version: 14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -784,15 +787,30 @@ importers: packages/ui: dependencies: + '@radix-ui/react-slot': + specifier: ^1.0.2 + version: 1.0.2(@types/react@18.3.2)(react@18.3.1) autoprefixer: specifier: ^10.4.19 version: 10.4.19(postcss@8.4.38) + class-variance-authority: + specifier: ^0.7.0 + version: 0.7.0 + clsx: + specifier: ^2.1.1 + version: 2.1.1 postcss: specifier: ^8.4.38 version: 8.4.38 + tailwind-merge: + specifier: ^2.3.0 + version: 2.3.0 tailwindcss: specifier: ^3.4.3 version: 3.4.3(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5)) + tsup: + specifier: ^8.0.2 + version: 8.0.2(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5))(typescript@5.4.5) devDependencies: '@saroh/tailwind-config': specifier: workspace:* @@ -9020,7 +9038,7 @@ snapshots: '@radix-ui/react-arrow@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -9131,14 +9149,14 @@ snapshots: '@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.78)(react@18.2.0)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 react: 18.2.0 optionalDependencies: '@types/react': 18.2.78 '@radix-ui/react-compose-refs@1.0.1(@types/react@18.3.2)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 react: 18.3.1 optionalDependencies: '@types/react': 18.3.2 @@ -9165,14 +9183,14 @@ snapshots: '@radix-ui/react-context@1.0.1(@types/react@18.2.78)(react@18.2.0)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 react: 18.2.0 optionalDependencies: '@types/react': 18.2.78 '@radix-ui/react-context@1.0.1(@types/react@18.3.2)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 react: 18.3.1 optionalDependencies: '@types/react': 18.3.2 @@ -9265,7 +9283,7 @@ snapshots: '@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.25)(@types/react@18.2.78)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.78)(react@18.2.0) '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.25)(@types/react@18.2.78)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) @@ -9279,7 +9297,7 @@ snapshots: '@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.2)(react@18.3.1) '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -9314,14 +9332,14 @@ snapshots: '@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.78)(react@18.2.0)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 react: 18.2.0 optionalDependencies: '@types/react': 18.2.78 '@radix-ui/react-focus-guards@1.0.1(@types/react@18.3.2)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 react: 18.3.1 optionalDependencies: '@types/react': 18.3.2 @@ -9337,7 +9355,7 @@ snapshots: '@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.25)(@types/react@18.2.78)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.78)(react@18.2.0) '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.25)(@types/react@18.2.78)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.78)(react@18.2.0) @@ -9349,7 +9367,7 @@ snapshots: '@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.2)(react@18.3.1) '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.2)(react@18.3.1) @@ -9385,7 +9403,7 @@ snapshots: '@radix-ui/react-id@1.0.1(@types/react@18.2.78)(react@18.2.0)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.78)(react@18.2.0) react: 18.2.0 optionalDependencies: @@ -9393,7 +9411,7 @@ snapshots: '@radix-ui/react-id@1.0.1(@types/react@18.3.2)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.2)(react@18.3.1) react: 18.3.1 optionalDependencies: @@ -9540,7 +9558,7 @@ snapshots: '@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.25)(@types/react@18.2.78)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.25)(@types/react@18.2.78)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -9550,7 +9568,7 @@ snapshots: '@radix-ui/react-portal@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -9568,7 +9586,7 @@ snapshots: '@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.25)(@types/react@18.2.78)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.78)(react@18.2.0) '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.78)(react@18.2.0) react: 18.2.0 @@ -9579,7 +9597,7 @@ snapshots: '@radix-ui/react-presence@1.0.1(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.2)(react@18.3.1) '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.2)(react@18.3.1) react: 18.3.1 @@ -9749,7 +9767,7 @@ snapshots: '@radix-ui/react-slot@1.0.2(@types/react@18.2.78)(react@18.2.0)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.78)(react@18.2.0) react: 18.2.0 optionalDependencies: @@ -9757,7 +9775,7 @@ snapshots: '@radix-ui/react-slot@1.0.2(@types/react@18.3.2)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.2)(react@18.3.1) react: 18.3.1 optionalDependencies: @@ -9898,7 +9916,7 @@ snapshots: '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.78)(react@18.2.0)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.78)(react@18.2.0) react: 18.2.0 optionalDependencies: @@ -9906,7 +9924,7 @@ snapshots: '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.3.2)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.2)(react@18.3.1) react: 18.3.1 optionalDependencies: @@ -9920,7 +9938,7 @@ snapshots: '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.78)(react@18.2.0)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.78)(react@18.2.0) react: 18.2.0 optionalDependencies: @@ -9928,7 +9946,7 @@ snapshots: '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.3.2)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.2)(react@18.3.1) react: 18.3.1 optionalDependencies: @@ -9962,7 +9980,7 @@ snapshots: '@radix-ui/react-use-rect@1.0.1(@types/react@18.3.2)(react@18.3.1)': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@radix-ui/rect': 1.0.1 react: 18.3.1 optionalDependencies: @@ -9998,7 +10016,7 @@ snapshots: '@radix-ui/rect@1.0.1': dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 '@remirror/core-constants@2.0.2': {} @@ -12725,7 +12743,7 @@ snapshots: eslint-plugin-jsx-a11y@6.7.1(eslint@9.0.0): dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 aria-query: 5.3.0 array-includes: 3.1.6 array.prototype.flatmap: 1.3.1 @@ -14176,7 +14194,7 @@ snapshots: match-sorter@6.3.1: dependencies: - '@babel/runtime': 7.24.0 + '@babel/runtime': 7.24.5 remove-accents: 0.4.2 mdast-util-definitions@5.1.2: @@ -14848,7 +14866,7 @@ snapshots: dependencies: '@headlessui/react': 1.7.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@popperjs/core': 2.11.8 - clsx: 2.1.0 + clsx: 2.1.1 escape-string-regexp: 5.0.0 flexsearch: 0.7.31 focus-visible: 5.2.0 @@ -14872,7 +14890,7 @@ snapshots: '@napi-rs/simple-git': 0.1.9 '@theguild/remark-mermaid': 0.0.5(react@18.2.0) '@theguild/remark-npm2yarn': 0.2.1 - clsx: 2.1.0 + clsx: 2.1.1 github-slugger: 2.0.0 graceful-fs: 4.2.11 gray-matter: 4.0.3