From ad3a0b185621d774aedf5ff7d0fe5db2f02058b8 Mon Sep 17 00:00:00 2001 From: Mohit Mehta Date: Sun, 2 Jun 2024 14:54:11 +0530 Subject: [PATCH 1/7] started setting up the ui package to build components in the packages folder --- .gitignore | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 9d24364..955a77f 100644 --- a/.gitignore +++ b/.gitignore @@ -37,4 +37,6 @@ yarn-error.log* -packages/database/dist \ No newline at end of file +packages/database/dist + +dist \ No newline at end of file From a35e4c82c9a4cfa6adfee8296468ab709c121cfb Mon Sep 17 00:00:00 2001 From: Mohit Mehta Date: Sun, 2 Jun 2024 17:30:26 +0530 Subject: [PATCH 2/7] ui turbo removed --- packages/ui/card.tsx | 27 ---------------- packages/ui/index.tsx | 2 -- packages/ui/turbo/generators/config.ts | 31 ------------------- .../turbo/generators/templates/component.hbs | 14 --------- 4 files changed, 74 deletions(-) delete mode 100644 packages/ui/card.tsx delete mode 100644 packages/ui/index.tsx delete mode 100644 packages/ui/turbo/generators/config.ts delete mode 100644 packages/ui/turbo/generators/templates/component.hbs diff --git a/packages/ui/card.tsx b/packages/ui/card.tsx deleted file mode 100644 index e6551f3..0000000 --- a/packages/ui/card.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from "react"; - -export function Card({ - className, - title, - children, - href, -}: { - className?: string; - title: string; - children: React.ReactNode; - href: string; -}): JSX.Element { - return ( - -

- {title} -> -

-

{children}

- - ); -} diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx deleted file mode 100644 index 926b151..0000000 --- a/packages/ui/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -// component exports -export { Card } from "./card"; diff --git a/packages/ui/turbo/generators/config.ts b/packages/ui/turbo/generators/config.ts deleted file mode 100644 index f8dc6e8..0000000 --- a/packages/ui/turbo/generators/config.ts +++ /dev/null @@ -1,31 +0,0 @@ -import type { PlopTypes } from "@turbo/gen"; - -// Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation - -// eslint-disable-next-line import/no-default-export -- Turbo generators require default export -export default function generator(plop: PlopTypes.NodePlopAPI): void { - // A simple generator to add a new React component to the internal UI library - plop.setGenerator("react-component", { - description: "Adds a new react component", - prompts: [ - { - type: "input", - name: "name", - message: "What is the name of the component?", - }, - ], - actions: [ - { - type: "add", - path: "{{pascalCase name}}.tsx", - templateFile: "templates/component.hbs", - }, - { - type: "append", - path: "index.tsx", - pattern: /(?\/\/ component exports)/g, - template: 'export * from "./{{pascalCase name}}";', - }, - ], - }); -} diff --git a/packages/ui/turbo/generators/templates/component.hbs b/packages/ui/turbo/generators/templates/component.hbs deleted file mode 100644 index cf7b636..0000000 --- a/packages/ui/turbo/generators/templates/component.hbs +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from "react"; - -interface Props { - children?: React.ReactNode; -} - -export const {{ pascalCase name }} = ({ children }: Props) => { - return ( -
-

{{ name }}

- {children} -
- ); -}; From 1b2282d8e8fea8abc3fed0605aae20487bd29688 Mon Sep 17 00:00:00 2001 From: Mohit Mehta Date: Sun, 2 Jun 2024 18:04:13 +0530 Subject: [PATCH 3/7] updated tailwind config imports in package.json --- .gitignore | 4 +- apps/application/package.json | 178 ++++++++++---------- apps/dashboard/package.json | 49 +++--- apps/sites/package.json | 82 ++++----- apps/web/package.json | 106 ++++++------ package.json | 2 +- packages/tailwind-config/package.json | 7 +- packages/tailwind-config/tailwind.config.ts | 95 +++++++++-- packages/ui/.eslintrc.js | 2 +- packages/ui/components.json | 17 ++ packages/ui/package.json | 44 ++--- packages/ui/postcss.config.js | 4 + packages/ui/src/components/ui/button.tsx | 0 packages/ui/src/globals.css | 76 +++++++++ packages/ui/src/lib/utils.ts | 0 packages/ui/tailwind.config.ts | 9 + packages/ui/tsconfig.json | 6 +- pnpm-lock.yaml | 58 ++++--- 18 files changed, 471 insertions(+), 268 deletions(-) create mode 100644 packages/ui/components.json create mode 100644 packages/ui/postcss.config.js create mode 100644 packages/ui/src/components/ui/button.tsx create mode 100644 packages/ui/src/globals.css create mode 100644 packages/ui/src/lib/utils.ts create mode 100644 packages/ui/tailwind.config.ts diff --git a/.gitignore b/.gitignore index 955a77f..f4eff35 100644 --- a/.gitignore +++ b/.gitignore @@ -39,4 +39,6 @@ yarn-error.log* packages/database/dist -dist \ No newline at end of file +dist + +.eslintcache \ No newline at end of file diff --git a/apps/application/package.json b/apps/application/package.json index 335c64e..bff1bd4 100644 --- a/apps/application/package.json +++ b/apps/application/package.json @@ -1,91 +1,91 @@ { - "name": "application", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": " next dev", - "build": "next build", - "start": "next start", - "lint": "next lint", - "postinstall": "prisma generate" - }, - "dependencies": { - "@aws-sdk/client-s3": "^3.577.0", - "@hookform/resolvers": "^3.4.2", - "@next-auth/prisma-adapter": "^1.0.7", - "@prisma/client": "^5.14.0", - "@prisma/nextjs-monorepo-workaround-plugin": "^5.14.0", - "@radix-ui/react-accordion": "^1.1.2", - "@radix-ui/react-alert-dialog": "^1.0.4", - "@radix-ui/react-aspect-ratio": "^1.0.3", - "@radix-ui/react-avatar": "^1.0.3", - "@radix-ui/react-checkbox": "^1.0.4", - "@radix-ui/react-collapsible": "^1.0.3", - "@radix-ui/react-context-menu": "^2.1.4", - "@radix-ui/react-dialog": "^1.0.4", - "@radix-ui/react-dropdown-menu": "^2.0.5", - "@radix-ui/react-hover-card": "^1.0.6", - "@radix-ui/react-label": "^2.0.2", - "@radix-ui/react-menubar": "^1.0.3", - "@radix-ui/react-navigation-menu": "^1.1.3", - "@radix-ui/react-popover": "^1.0.6", - "@radix-ui/react-progress": "^1.0.3", - "@radix-ui/react-radio-group": "^1.1.3", - "@radix-ui/react-scroll-area": "^1.0.4", - "@radix-ui/react-select": "^2.0.0", - "@radix-ui/react-separator": "^1.0.3", - "@radix-ui/react-slider": "^1.1.2", - "@radix-ui/react-slot": "^1.0.2", - "@radix-ui/react-switch": "^1.0.3", - "@radix-ui/react-tabs": "^1.0.4", - "@radix-ui/react-toast": "^1.1.4", - "@radix-ui/react-toggle": "^1.0.3", - "@radix-ui/react-tooltip": "^1.0.6", - "@tanstack/react-query": "^5.37.1", - "@tanstack/react-query-devtools": "^5.37.1", - "@tanstack/react-table": "^8.17.3", - "class-variance-authority": "^0.7.0", - "clsx": "^2.1.1", - "cmdk": "^1.0.0", - "date-fns": "^3.6.0", - "focus-trap-react": "^10.2.3", - "framer-motion": "^11.2.6", - "lucide-react": "^0.379.0", - "nanoid": "^5.0.7", - "next": "14.2.3", - "next-auth": "^4.24.7", - "next-mdx-remote": "^4.4.1", - "next-themes": "^0.3.0", - "novel": "^0.4.2", - "react": "18.3.1", - "react-day-picker": "^8.10.1", - "react-dom": "18.3.1", - "react-hook-form": "^7.51.5", - "react-icons": "^5.2.1", - "react-textarea-autosize": "^8.5.3", - "sonner": "^1.4.41", - "tailwind-merge": "^2.3.0", - "unist-util-visit": "^5.0.0", - "zod": "^3.23.8" - }, - "devDependencies": { - "@tailwindcss/forms": "^0.5.7", - "@tailwindcss/typography": "^0.5.13", - "@tanstack/eslint-plugin-query": "^5.35.6", - "@types/js-cookie": "^3.0.6", - "@types/node": "^20.12.12", - "@types/react": "^18.3.2", - "@types/react-dom": "^18.3.0", - "autoprefixer": "^10.4.19", - "@saroh/database": "workspace:*", - "eslint": "^9.3.0", - "eslint-config-next": "14.2.3", - "postcss": "^8.4.38", - "prettier-plugin-tailwindcss": "^0.5.14", - "prisma": "^5.14.0", - "tailwind-config": "workspace:*", - "tailwindcss": "^3.4.3", - "tailwindcss-animate": "^1.0.7", - "typescript": "^5.4.5" - } + "name": "application", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": " next dev", + "build": "next build", + "start": "next start", + "lint": "next lint", + "postinstall": "prisma generate" + }, + "dependencies": { + "@aws-sdk/client-s3": "^3.577.0", + "@hookform/resolvers": "^3.4.2", + "@next-auth/prisma-adapter": "^1.0.7", + "@prisma/client": "^5.14.0", + "@prisma/nextjs-monorepo-workaround-plugin": "^5.14.0", + "@radix-ui/react-accordion": "^1.1.2", + "@radix-ui/react-alert-dialog": "^1.0.4", + "@radix-ui/react-aspect-ratio": "^1.0.3", + "@radix-ui/react-avatar": "^1.0.3", + "@radix-ui/react-checkbox": "^1.0.4", + "@radix-ui/react-collapsible": "^1.0.3", + "@radix-ui/react-context-menu": "^2.1.4", + "@radix-ui/react-dialog": "^1.0.4", + "@radix-ui/react-dropdown-menu": "^2.0.5", + "@radix-ui/react-hover-card": "^1.0.6", + "@radix-ui/react-label": "^2.0.2", + "@radix-ui/react-menubar": "^1.0.3", + "@radix-ui/react-navigation-menu": "^1.1.3", + "@radix-ui/react-popover": "^1.0.6", + "@radix-ui/react-progress": "^1.0.3", + "@radix-ui/react-radio-group": "^1.1.3", + "@radix-ui/react-scroll-area": "^1.0.4", + "@radix-ui/react-select": "^2.0.0", + "@radix-ui/react-separator": "^1.0.3", + "@radix-ui/react-slider": "^1.1.2", + "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-switch": "^1.0.3", + "@radix-ui/react-tabs": "^1.0.4", + "@radix-ui/react-toast": "^1.1.4", + "@radix-ui/react-toggle": "^1.0.3", + "@radix-ui/react-tooltip": "^1.0.6", + "@tanstack/react-query": "^5.37.1", + "@tanstack/react-query-devtools": "^5.37.1", + "@tanstack/react-table": "^8.17.3", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.1", + "cmdk": "^1.0.0", + "date-fns": "^3.6.0", + "focus-trap-react": "^10.2.3", + "framer-motion": "^11.2.6", + "lucide-react": "^0.379.0", + "nanoid": "^5.0.7", + "next": "14.2.3", + "next-auth": "^4.24.7", + "next-mdx-remote": "^4.4.1", + "next-themes": "^0.3.0", + "novel": "^0.4.2", + "react": "18.3.1", + "react-day-picker": "^8.10.1", + "react-dom": "18.3.1", + "react-hook-form": "^7.51.5", + "react-icons": "^5.2.1", + "react-textarea-autosize": "^8.5.3", + "sonner": "^1.4.41", + "tailwind-merge": "^2.3.0", + "unist-util-visit": "^5.0.0", + "zod": "^3.23.8" + }, + "devDependencies": { + "@tailwindcss/forms": "^0.5.7", + "@tailwindcss/typography": "^0.5.13", + "@tanstack/eslint-plugin-query": "^5.35.6", + "@types/js-cookie": "^3.0.6", + "@types/node": "^20.12.12", + "@types/react": "^18.3.2", + "@types/react-dom": "^18.3.0", + "autoprefixer": "^10.4.19", + "@saroh/database": "workspace:*", + "eslint": "^9.3.0", + "eslint-config-next": "14.2.3", + "postcss": "^8.4.38", + "prettier-plugin-tailwindcss": "^0.5.14", + "prisma": "^5.14.0", + "@saroh/tailwind-config": "workspace:*", + "tailwindcss": "^3.4.3", + "tailwindcss-animate": "^1.0.7", + "typescript": "^5.4.5" + } } diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json index b837f23..c8a4268 100644 --- a/apps/dashboard/package.json +++ b/apps/dashboard/package.json @@ -1,26 +1,27 @@ { - "name": "dashboard", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "next dev --port 3005", - "build": "next build", - "start": "next start", - "lint": "next lint" - }, - "dependencies": { - "react": "^18", - "react-dom": "^18", - "next": "14.2.3" - }, - "devDependencies": { - "typescript": "^5", - "@types/node": "^20", - "@types/react": "^18", - "@types/react-dom": "^18", - "postcss": "^8", - "tailwindcss": "^3.4.1", - "eslint": "^8", - "eslint-config-next": "14.2.3" - } + "name": "dashboard", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev --port 3005", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "react": "^18", + "react-dom": "^18", + "next": "14.2.3" + }, + "devDependencies": { + "typescript": "^5", + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18", + "postcss": "^8", + "tailwindcss": "^3.4.1", + "eslint": "^8", + "eslint-config-next": "14.2.3", + "@saroh/tailwind-config": "workspace:*" + } } diff --git a/apps/sites/package.json b/apps/sites/package.json index 41aae8b..5c9b1e9 100644 --- a/apps/sites/package.json +++ b/apps/sites/package.json @@ -1,43 +1,43 @@ { - "name": "sites", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "next dev --port 3003", - "build": "next build", - "start": "next start", - "lint": "next lint", - "predev": "prisma generate" - }, - "dependencies": { - "@prisma/nextjs-monorepo-workaround-plugin": "^5.12.1", - "class-variance-authority": "^0.7.0", - "clsx": "^2.1.0", - "cmdk": "^1.0.0", - "date-fns": "^3.6.0", - "lucide-react": "^0.368.0", - "nanoid": "^5.0.7", - "next": "14.2.1", - "next-mdx-remote": "^4.4.1", - "next-themes": "^0.3.0", - "react": "18.2.0", - "react-dom": "18.2.0", - "sonner": "^1.4.41", - "tailwind-merge": "^2.2.2", - "unist-util-visit": "^5.0.0" - }, - "devDependencies": { - "@tailwindcss/typography": "^0.5.12", - "@types/node": "^20.12.7", - "@types/react": "^18.2.78", - "@types/react-dom": "^18.2.25", - "autoprefixer": "^10.4.19", - "@saroh/database": "workspace:*", - "eslint": "^9.0.0", - "eslint-config-next": "14.2.1", - "postcss": "^8.4.38", - "tailwind-config": "workspace:*", - "tailwindcss": "^3.4.3", - "typescript": "^5.4.5" - } + "name": "sites", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev --port 3003", + "build": "next build", + "start": "next start", + "lint": "next lint", + "predev": "prisma generate" + }, + "dependencies": { + "@prisma/nextjs-monorepo-workaround-plugin": "^5.12.1", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.0", + "cmdk": "^1.0.0", + "date-fns": "^3.6.0", + "lucide-react": "^0.368.0", + "nanoid": "^5.0.7", + "next": "14.2.1", + "next-mdx-remote": "^4.4.1", + "next-themes": "^0.3.0", + "react": "18.2.0", + "react-dom": "18.2.0", + "sonner": "^1.4.41", + "tailwind-merge": "^2.2.2", + "unist-util-visit": "^5.0.0" + }, + "devDependencies": { + "@tailwindcss/typography": "^0.5.12", + "@types/node": "^20.12.7", + "@types/react": "^18.2.78", + "@types/react-dom": "^18.2.25", + "autoprefixer": "^10.4.19", + "@saroh/database": "workspace:*", + "eslint": "^9.0.0", + "eslint-config-next": "14.2.1", + "postcss": "^8.4.38", + "@saroh/tailwind-config": "workspace:*", + "tailwindcss": "^3.4.3", + "typescript": "^5.4.5" + } } diff --git a/apps/web/package.json b/apps/web/package.json index 4d73de6..8850ee3 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -1,55 +1,55 @@ { - "name": "web", - "version": "1.0.0", - "private": true, - "scripts": { - "dev": "next dev --port 3002", - "build": " next build", - "start": "next start", - "lint": "next lint", - "postinstall": "prisma generate" - }, - "dependencies": { - "@hookform/resolvers": "^3.3.4", - "@prisma/client": "^5.12.1", - "@prisma/nextjs-monorepo-workaround-plugin": "^5.12.1", - "@radix-ui/react-avatar": "^1.0.3", - "@radix-ui/react-label": "^2.0.2", - "@radix-ui/react-slot": "^1.0.2", - "@radix-ui/react-toast": "^1.1.4", - "@tabler/icons-react": "^3.2.0", - "@tsparticles/engine": "^3.3.0", - "@tsparticles/react": "^3.0.0", - "@tsparticles/slim": "^3.3.0", - "class-variance-authority": "^0.7.0", - "clsx": "^2.1.0", - "framer-motion": "^11.0.28", - "lucide-react": "^0.368.0", - "mini-svg-data-uri": "^1.4.4", - "next": "^14.2.1", - "next-themes": "^0.3.0", - "prisma": "5.12.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-hook-form": "^7.51.3", - "react-icons": "^5.0.1", - "simplex-noise": "^4.0.1", - "tailwind-merge": "^2.2.2", - "tailwindcss-animate": "^1.0.7", - "zod": "^3.22.4" - }, - "devDependencies": { - "@next/eslint-plugin-next": "^14.2.1", - "@types/node": "^20.12.7", - "@types/react": "^18.2.78", - "@types/react-dom": "^18.2.25", - "autoprefixer": "^10.4.19", - "@saroh/database": "workspace:*", - "eslint-config-custom": "workspace:*", - "postcss": "^8.4.38", - "tailwind-config": "workspace:*", - "tailwindcss": "^3.4.3", - "tsconfig": "workspace:*", - "typescript": "^5.4.5" - } + "name": "web", + "version": "1.0.0", + "private": true, + "scripts": { + "dev": "next dev --port 3002", + "build": " next build", + "start": "next start", + "lint": "next lint", + "postinstall": "prisma generate" + }, + "dependencies": { + "@hookform/resolvers": "^3.3.4", + "@prisma/client": "^5.12.1", + "@prisma/nextjs-monorepo-workaround-plugin": "^5.12.1", + "@radix-ui/react-avatar": "^1.0.3", + "@radix-ui/react-label": "^2.0.2", + "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-toast": "^1.1.4", + "@tabler/icons-react": "^3.2.0", + "@tsparticles/engine": "^3.3.0", + "@tsparticles/react": "^3.0.0", + "@tsparticles/slim": "^3.3.0", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.0", + "framer-motion": "^11.0.28", + "lucide-react": "^0.368.0", + "mini-svg-data-uri": "^1.4.4", + "next": "^14.2.1", + "next-themes": "^0.3.0", + "prisma": "5.12.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-hook-form": "^7.51.3", + "react-icons": "^5.0.1", + "simplex-noise": "^4.0.1", + "tailwind-merge": "^2.2.2", + "tailwindcss-animate": "^1.0.7", + "zod": "^3.22.4" + }, + "devDependencies": { + "@next/eslint-plugin-next": "^14.2.1", + "@types/node": "^20.12.7", + "@types/react": "^18.2.78", + "@types/react-dom": "^18.2.25", + "autoprefixer": "^10.4.19", + "@saroh/database": "workspace:*", + "eslint-config-custom": "workspace:*", + "postcss": "^8.4.38", + "@saroh/tailwind-config": "workspace:*", + "tailwindcss": "^3.4.3", + "tsconfig": "workspace:*", + "typescript": "^5.4.5" + } } diff --git a/package.json b/package.json index 2fa1fca..53c8882 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ }, "devDependencies": { "@babel/traverse": "^7.24.5", - "eslint": "^9.3.0", + "eslint": "^8.48.0", "husky": "^8.0.3", "postcss": "^8.4.38", "prettier": "^3.2.5", diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json index f376bb9..e5fb4f8 100644 --- a/packages/tailwind-config/package.json +++ b/packages/tailwind-config/package.json @@ -1,10 +1,15 @@ { - "name": "tailwind-config", + "name": "@saroh/tailwind-config", "version": "0.0.0", "private": true, "main": "index.ts", "types": "index.ts", "devDependencies": { "tailwindcss": "^3.4.3" + }, + "dependencies": { + "@tailwindcss/forms": "^0.5.7", + "@tailwindcss/typography": "^0.5.13", + "tailwindcss-animate": "^1.0.7" } } \ No newline at end of file diff --git a/packages/tailwind-config/tailwind.config.ts b/packages/tailwind-config/tailwind.config.ts index f67dc8d..7f50c1c 100644 --- a/packages/tailwind-config/tailwind.config.ts +++ b/packages/tailwind-config/tailwind.config.ts @@ -1,19 +1,82 @@ import type { Config } from "tailwindcss"; +import tailwindcssAnimate from "tailwindcss-animate"; + +const config = { + darkMode: ["class"], + content: [ + "./pages/**/*.{ts,tsx}", + "./components/**/*.{ts,tsx}", + "./app/**/*.{ts,tsx}", + "./src/**/*.{ts,tsx}", + "../../packages/ui/src/**/*.{ts,tsx}", + ], + prefix: "", + theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, + extend: { + colors: { + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, + }, + }, + plugins: [tailwindcssAnimate], +} satisfies Config; -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: { - "glow-conic": - "conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a853ba 180deg, #e92a67 360deg)", - }, - }, - }, - plugins: [], -}; export default config; diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js index d750d83..a2d2108 100644 --- a/packages/ui/.eslintrc.js +++ b/packages/ui/.eslintrc.js @@ -1,3 +1,3 @@ module.exports = { - extends: ["custom/react-internal"], + extends: ["custom/react-internal"], }; diff --git a/packages/ui/components.json b/packages/ui/components.json new file mode 100644 index 0000000..5d18d02 --- /dev/null +++ b/packages/ui/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "src/globals.css", + "baseColor": "slate", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@ui/components", + "utils": "@ui/lib/utils" + } +} diff --git a/packages/ui/package.json b/packages/ui/package.json index 3ddb5b1..7e3f98e 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,21 +1,27 @@ { - "name": "@saroh/ui", - "version": "0.0.0", - "main": "./index.tsx", - "types": "./index.tsx", - "license": "MIT", - "scripts": { - "lint": "eslint .", - "generate:component": "turbo gen react-component" - }, - "devDependencies": { - "@turbo/gen": "^1.13.3", - "@types/node": "^20.12.12", - "@types/react": "^18.3.2", - "@types/react-dom": "^18.3.0", - "eslint-config-custom": "workspace:*", - "react": "^18.3.1", - "tsconfig": "workspace:*", - "typescript": "^5.4.5" - } + "name": "@saroh/ui", + "version": "0.0.0", + "main": "./index.tsx", + "types": "./index.tsx", + "license": "MIT", + "scripts": { + "lint": "eslint .", + "generate:component": "turbo gen react-component" + }, + "devDependencies": { + "@saroh/tailwind-config": "workspace:*", + "@turbo/gen": "^1.13.3", + "@types/node": "^20.12.12", + "@types/react": "^18.3.2", + "@types/react-dom": "^18.3.0", + "eslint-config-custom": "workspace:*", + "react": "^18.3.1", + "tsconfig": "workspace:*", + "typescript": "^5.4.5" + }, + "dependencies": { + "autoprefixer": "^10.4.19", + "postcss": "^8.4.38", + "tailwindcss": "^3.4.3" + } } diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js new file mode 100644 index 0000000..61b4232 --- /dev/null +++ b/packages/ui/postcss.config.js @@ -0,0 +1,4 @@ +export const plugins = { + tailwindcss: {}, + autoprefixer: {}, +}; diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx new file mode 100644 index 0000000..e69de29 diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css new file mode 100644 index 0000000..4ef0baf --- /dev/null +++ b/packages/ui/src/globals.css @@ -0,0 +1,76 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + + --radius: 0.5rem; + } + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} \ No newline at end of file diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts new file mode 100644 index 0000000..e69de29 diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts new file mode 100644 index 0000000..30638c3 --- /dev/null +++ b/packages/ui/tailwind.config.ts @@ -0,0 +1,9 @@ +// tailwind config is required for editor support +import sharedConfig from "@saroh/tailwind-config/tailwind.config"; +import type { Config } from "tailwindcss"; + +const config: Pick = { + presets: [sharedConfig], +}; + +export default config; diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json index cd6c94d..c50596f 100644 --- a/packages/ui/tsconfig.json +++ b/packages/ui/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "tsconfig/react-library.json", - "include": ["."], - "exclude": ["dist", "build", "node_modules"] + "extends": "tsconfig/react-library.json", + "include": ["."], + "exclude": ["dist", "build", "node_modules"] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index df996a7..9246b13 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -16,8 +16,8 @@ importers: specifier: ^7.24.5 version: 7.24.5 eslint: - specifier: ^9.3.0 - version: 9.3.0 + specifier: ^8.48.0 + version: 8.57.0 husky: specifier: ^8.0.3 version: 8.0.3 @@ -260,6 +260,9 @@ importers: '@saroh/database': specifier: workspace:* version: link:../../packages/database + '@saroh/tailwind-config': + specifier: workspace:* + version: link:../../packages/tailwind-config '@tailwindcss/forms': specifier: ^0.5.7 version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5))) @@ -299,9 +302,6 @@ importers: prisma: specifier: ^5.14.0 version: 5.14.0 - tailwind-config: - specifier: workspace:* - version: link:../../packages/tailwind-config tailwindcss: specifier: ^3.4.3 version: 3.4.3(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5)) @@ -398,6 +398,9 @@ importers: specifier: ^18 version: 18.3.1(react@18.3.1) devDependencies: + '@saroh/tailwind-config': + specifier: workspace:* + version: link:../../packages/tailwind-config '@types/node': specifier: ^20 version: 20.12.12 @@ -554,6 +557,9 @@ importers: '@saroh/database': specifier: workspace:* version: link:../../packages/database + '@saroh/tailwind-config': + specifier: workspace:* + version: link:../../packages/tailwind-config '@tailwindcss/typography': specifier: ^0.5.12 version: 0.5.12(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.12.7)(typescript@5.4.5))) @@ -578,9 +584,6 @@ importers: postcss: specifier: ^8.4.38 version: 8.4.38 - tailwind-config: - specifier: workspace:* - version: link:../../packages/tailwind-config tailwindcss: specifier: ^3.4.3 version: 3.4.3(ts-node@10.9.1(@types/node@20.12.7)(typescript@5.4.5)) @@ -678,6 +681,9 @@ importers: '@saroh/database': specifier: workspace:* version: link:../../packages/database + '@saroh/tailwind-config': + specifier: workspace:* + version: link:../../packages/tailwind-config '@types/node': specifier: ^20.12.7 version: 20.12.7 @@ -696,9 +702,6 @@ importers: postcss: specifier: ^8.4.38 version: 8.4.38 - tailwind-config: - specifier: workspace:* - version: link:../../packages/tailwind-config tailwindcss: specifier: ^3.4.3 version: 3.4.3(ts-node@10.9.1(@types/node@20.12.7)(typescript@5.4.5)) @@ -760,6 +763,16 @@ importers: version: 5.4.5 packages/tailwind-config: + dependencies: + '@tailwindcss/forms': + specifier: ^0.5.7 + version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5))) + '@tailwindcss/typography': + specifier: ^0.5.13 + version: 0.5.13(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5))) + tailwindcss-animate: + specifier: ^1.0.7 + version: 1.0.7(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5))) devDependencies: tailwindcss: specifier: ^3.4.3 @@ -770,7 +783,20 @@ importers: packages/tsconfig: {} packages/ui: + dependencies: + autoprefixer: + specifier: ^10.4.19 + version: 10.4.19(postcss@8.4.38) + postcss: + specifier: ^8.4.38 + version: 8.4.38 + tailwindcss: + specifier: ^3.4.3 + version: 3.4.3(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5)) devDependencies: + '@saroh/tailwind-config': + specifier: workspace:* + version: link:../tailwind-config '@turbo/gen': specifier: ^1.13.3 version: 1.13.3(@types/node@20.12.12)(typescript@5.4.5) @@ -7647,10 +7673,6 @@ packages: yallist@4.0.0: resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==} - yaml@2.3.4: - resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==} - engines: {node: '>= 14'} - yaml@2.4.2: resolution: {integrity: sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==} engines: {node: '>= 14'} @@ -15259,7 +15281,7 @@ snapshots: postcss-load-config@4.0.1(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5)): dependencies: lilconfig: 2.1.0 - yaml: 2.3.4 + yaml: 2.4.2 optionalDependencies: postcss: 8.4.38 ts-node: 10.9.1(@types/node@20.12.12)(typescript@5.4.5) @@ -15267,7 +15289,7 @@ snapshots: postcss-load-config@4.0.1(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.12.7)(typescript@5.4.5)): dependencies: lilconfig: 2.1.0 - yaml: 2.3.4 + yaml: 2.4.2 optionalDependencies: postcss: 8.4.38 ts-node: 10.9.1(@types/node@20.12.7)(typescript@5.4.5) @@ -16916,8 +16938,6 @@ snapshots: yallist@4.0.0: {} - yaml@2.3.4: {} - yaml@2.4.2: {} yn@3.1.1: {} From ae93eaf13ac20c5da1e198d982bc1a5d8bf1d1ce Mon Sep 17 00:00:00 2001 From: Mohit Mehta Date: Sun, 2 Jun 2024 18:54:53 +0530 Subject: [PATCH 4/7] updated ui package and dashboard to test if ui is installed correctly --- apps/dashboard/app/layout.tsx | 2 +- apps/dashboard/app/page.tsx | 113 +---------------------- apps/dashboard/package.json | 3 +- apps/dashboard/postcss.config.mjs | 15 +-- apps/dashboard/tailwind.config.ts | 21 +---- package.json | 2 +- packages/ui/.eslintrc.js | 8 +- packages/ui/package.json | 47 +++++++++- packages/ui/src/components/ui/button.tsx | 57 ++++++++++++ packages/ui/src/lib/utils.ts | 6 ++ packages/ui/tsconfig.json | 8 +- packages/ui/tsup.config.ts | 15 +++ pnpm-lock.yaml | 76 +++++++++------ 13 files changed, 197 insertions(+), 176 deletions(-) create mode 100644 packages/ui/tsup.config.ts 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 -

- -
- -
- Next.js Logo -
- - +
+
); } 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 From fda468f00570de56caaf490c1357ddb8888ff99e Mon Sep 17 00:00:00 2001 From: Mohit Mehta Date: Sun, 2 Jun 2024 19:42:59 +0530 Subject: [PATCH 5/7] added utility functions and constants --- apps/dashboard/app/page.tsx | 2 +- packages/tailwind-config/tailwind.config.ts | 4 +- packages/ui/postcss.config.js | 11 +- packages/ui/src/components/ui/button.tsx | 6 +- packages/ui/src/lib/utils.ts | 2 + packages/ui/tailwind.config.ts | 1 + packages/ui/tsconfig.json | 5 +- packages/utils/package.json | 58 ++++++-- packages/utils/src/constants/index.ts | 1 + packages/utils/src/functions/cn.ts | 6 + packages/utils/src/functions/index.ts | 1 + packages/utils/src/index.ts | 2 + packages/utils/tsconfig.json | 5 + packages/utils/tsup.config.ts | 10 ++ pnpm-lock.yaml | 141 +++++++++++++++++++- 15 files changed, 228 insertions(+), 27 deletions(-) create mode 100644 packages/utils/src/constants/index.ts create mode 100644 packages/utils/src/functions/cn.ts create mode 100644 packages/utils/src/functions/index.ts create mode 100644 packages/utils/src/index.ts create mode 100644 packages/utils/tsconfig.json create mode 100644 packages/utils/tsup.config.ts diff --git a/apps/dashboard/app/page.tsx b/apps/dashboard/app/page.tsx index 6e4ed7e..71906ba 100644 --- a/apps/dashboard/app/page.tsx +++ b/apps/dashboard/app/page.tsx @@ -1,4 +1,4 @@ -import { Button } from "@saroh/ui"; +import { Button } from "@saroh/ui/components/ui/button"; export default function Home() { return ( diff --git a/packages/tailwind-config/tailwind.config.ts b/packages/tailwind-config/tailwind.config.ts index 7f50c1c..64add2b 100644 --- a/packages/tailwind-config/tailwind.config.ts +++ b/packages/tailwind-config/tailwind.config.ts @@ -1,3 +1,5 @@ +import forms from "@tailwindcss/forms"; +import typography from "@tailwindcss/typography"; import type { Config } from "tailwindcss"; import tailwindcssAnimate from "tailwindcss-animate"; @@ -76,7 +78,7 @@ const config = { }, }, }, - plugins: [tailwindcssAnimate], + plugins: [tailwindcssAnimate, forms, typography], } satisfies Config; export default config; diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js index 61b4232..1f803a7 100644 --- a/packages/ui/postcss.config.js +++ b/packages/ui/postcss.config.js @@ -1,4 +1,9 @@ -export const plugins = { - tailwindcss: {}, - autoprefixer: {}, +/* eslint-disable import/no-default-export -- none */ +/** @type {import('postcss-load-config').Config} */ +const config = { + plugins: { + tailwindcss: {}, + }, }; + +export default config; diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx index 329ad21..fae92bd 100644 --- a/packages/ui/src/components/ui/button.tsx +++ b/packages/ui/src/components/ui/button.tsx @@ -1,8 +1,8 @@ +/* eslint-disable import/no-named-as-default-member -- showing unnecessary errors*/ 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"; +import React from "react"; +import { cn } from "src/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", diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts index e6a8be0..141047c 100644 --- a/packages/ui/src/lib/utils.ts +++ b/packages/ui/src/lib/utils.ts @@ -1,3 +1,5 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type -- not added because it's a utility function that doesn't need a return type + */ import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts index 30638c3..d1ad68a 100644 --- a/packages/ui/tailwind.config.ts +++ b/packages/ui/tailwind.config.ts @@ -1,3 +1,4 @@ +/* eslint-disable import/no-default-export -- not needed */ // tailwind config is required for editor support import sharedConfig from "@saroh/tailwind-config/tailwind.config"; import type { Config } from "tailwindcss"; diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json index 57908d2..6872633 100644 --- a/packages/ui/tsconfig.json +++ b/packages/ui/tsconfig.json @@ -3,9 +3,6 @@ "include": ["."], "exclude": ["dist", "build", "node_modules"], "compilerOptions": { - "baseUrl": ".", - "paths": { - "@ui/*": ["./src/*"] - } + "baseUrl": "." } } diff --git a/packages/utils/package.json b/packages/utils/package.json index 0911f8e..addce16 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,12 +1,50 @@ { - "name": "@saroh/utils", - "version": "1.0.0", - "description": "", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "keywords": [], - "author": "", - "license": "ISC" + "name": "@saroh/utils", + "version": "1.0.0", + "description": "Utility functions and constants for Saroh.io", + "scripts": { + "build": "tsup", + "lint": "eslint src/", + "dev": "tsup --watch", + "check-types": "tsc --noEmit" + }, + "sideEffects": false, + "main": "./dist/index.mjs", + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", + "files": [ + "dist/**" + ], + "dependencies": { + "clsx": "^2.1.1", + "tailwind-merge": "^2.3.0" + }, + "peerDependencies": { + "react": "^18.3.1" + }, + "devDependencies": { + "@types/node": "^20.13.0", + "@types/react": "^18.3.3", + "react": "^18.3.1", + "tsup": "^8.0.2", + "typescript": "^5.4.5" + }, + "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", + "utils", + "utility" + ], + "publishConfig": { + "access": "public" + } } diff --git a/packages/utils/src/constants/index.ts b/packages/utils/src/constants/index.ts new file mode 100644 index 0000000..3bb0eaa --- /dev/null +++ b/packages/utils/src/constants/index.ts @@ -0,0 +1 @@ +export const APP_NAME = "Saroh"; diff --git a/packages/utils/src/functions/cn.ts b/packages/utils/src/functions/cn.ts new file mode 100644 index 0000000..e6a8be0 --- /dev/null +++ b/packages/utils/src/functions/cn.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/utils/src/functions/index.ts b/packages/utils/src/functions/index.ts new file mode 100644 index 0000000..963c6b2 --- /dev/null +++ b/packages/utils/src/functions/index.ts @@ -0,0 +1 @@ +export * from "./cn"; diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts new file mode 100644 index 0000000..27e55f0 --- /dev/null +++ b/packages/utils/src/index.ts @@ -0,0 +1,2 @@ +export * from "./constants"; +export * from "./functions"; diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json new file mode 100644 index 0000000..c50596f --- /dev/null +++ b/packages/utils/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "tsconfig/react-library.json", + "include": ["."], + "exclude": ["dist", "build", "node_modules"] +} diff --git a/packages/utils/tsup.config.ts b/packages/utils/tsup.config.ts new file mode 100644 index 0000000..a208a61 --- /dev/null +++ b/packages/utils/tsup.config.ts @@ -0,0 +1,10 @@ +import { defineConfig, Options } from "tsup"; + +export default defineConfig((options: Options) => ({ + entry: ["src/**/*.ts"], + format: ["esm"], + dts: true, + minify: true, + external: ["react"], + ...options, +})); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 67cbbed..5498f7f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -769,17 +769,17 @@ importers: dependencies: '@tailwindcss/forms': specifier: ^0.5.7 - version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5))) + version: 0.5.7(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5))) '@tailwindcss/typography': specifier: ^0.5.13 - version: 0.5.13(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5))) + version: 0.5.13(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5))) tailwindcss-animate: specifier: ^1.0.7 - version: 1.0.7(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5))) + version: 1.0.7(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5))) devDependencies: tailwindcss: specifier: ^3.4.3 - version: 3.4.3(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5)) + version: 3.4.3(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5)) packages/templates: {} @@ -840,7 +840,29 @@ importers: specifier: ^5.4.5 version: 5.4.5 - packages/utils: {} + packages/utils: + dependencies: + '@types/node': + specifier: ^20.13.0 + version: 20.13.0 + '@types/react': + specifier: ^18.3.3 + version: 18.3.3 + clsx: + specifier: ^2.1.1 + version: 2.1.1 + react: + specifier: ^18.3.1 + version: 18.3.1 + tailwind-merge: + specifier: ^2.3.0 + version: 2.3.0 + tsup: + specifier: ^8.0.2 + version: 8.0.2(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5))(typescript@5.4.5) + typescript: + specifier: ^5.4.5 + version: 5.4.5 packages: @@ -3325,6 +3347,9 @@ packages: '@types/node@20.12.7': resolution: {integrity: sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==} + '@types/node@20.13.0': + resolution: {integrity: sha512-FM6AOb3khNkNIXPnHFDYaHerSv8uN22C91z098AnGccVu+Pcdhi+pNUFDi0iLmPIsVE0JBD0KVS7mzUYt4nRzQ==} + '@types/normalize-package-data@2.4.1': resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==} @@ -3349,6 +3374,9 @@ packages: '@types/react@18.3.2': resolution: {integrity: sha512-Btgg89dAnqD4vV7R3hlwOxgqobUQKgx3MmrQRi0yYbs/P0ym8XozIAlkqVilPqHQwXs4e9Tf63rrCgl58BcO4w==} + '@types/react@18.3.3': + resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==} + '@types/semver@7.5.8': resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==} @@ -10435,6 +10463,11 @@ snapshots: mini-svg-data-uri: 1.4.4 tailwindcss: 3.4.3(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5)) + '@tailwindcss/forms@0.5.7(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5)))': + dependencies: + mini-svg-data-uri: 1.4.4 + tailwindcss: 3.4.3(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5)) + '@tailwindcss/typography@0.5.12(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.12.7)(typescript@5.4.5)))': dependencies: lodash.castarray: 4.4.0 @@ -10451,6 +10484,14 @@ snapshots: postcss-selector-parser: 6.0.10 tailwindcss: 3.4.3(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5)) + '@tailwindcss/typography@0.5.13(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5)))': + dependencies: + lodash.castarray: 4.4.0 + lodash.isplainobject: 4.0.6 + lodash.merge: 4.6.2 + postcss-selector-parser: 6.0.10 + tailwindcss: 3.4.3(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5)) + '@tanstack/eslint-plugin-query@5.35.6(eslint@9.3.0)(typescript@5.4.5)': dependencies: '@typescript-eslint/utils': 6.21.0(eslint@9.3.0)(typescript@5.4.5) @@ -11002,6 +11043,10 @@ snapshots: dependencies: undici-types: 5.26.5 + '@types/node@20.13.0': + dependencies: + undici-types: 5.26.5 + '@types/normalize-package-data@2.4.1': {} '@types/object.omit@3.0.2': {} @@ -11028,6 +11073,11 @@ snapshots: '@types/prop-types': 15.7.5 csstype: 3.1.2 + '@types/react@18.3.3': + dependencies: + '@types/prop-types': 15.7.5 + csstype: 3.1.2 + '@types/semver@7.5.8': {} '@types/strip-bom@3.0.0': {} @@ -15312,6 +15362,14 @@ snapshots: postcss: 8.4.38 ts-node: 10.9.1(@types/node@20.12.7)(typescript@5.4.5) + postcss-load-config@4.0.1(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5)): + dependencies: + lilconfig: 2.1.0 + yaml: 2.4.2 + optionalDependencies: + postcss: 8.4.38 + ts-node: 10.9.1(@types/node@20.13.0)(typescript@5.4.5) + postcss-nested@6.0.1(postcss@8.4.38): dependencies: postcss: 8.4.38 @@ -16297,6 +16355,10 @@ snapshots: dependencies: tailwindcss: 3.4.3(ts-node@10.9.1(@types/node@20.12.7)(typescript@5.4.5)) + tailwindcss-animate@1.0.7(tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5))): + dependencies: + tailwindcss: 3.4.3(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5)) + tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.12.12)(typescript@5.4.5)): dependencies: '@alloc/quick-lru': 5.2.0 @@ -16351,6 +16413,33 @@ snapshots: transitivePeerDependencies: - ts-node + tailwindcss@3.4.3(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5)): + dependencies: + '@alloc/quick-lru': 5.2.0 + arg: 5.0.2 + chokidar: 3.5.3 + didyoumean: 1.2.2 + dlv: 1.1.3 + fast-glob: 3.3.1 + glob-parent: 6.0.2 + is-glob: 4.0.3 + jiti: 1.21.0 + lilconfig: 2.1.0 + micromatch: 4.0.6 + normalize-path: 3.0.0 + object-hash: 3.0.0 + picocolors: 1.0.0 + postcss: 8.4.38 + postcss-import: 15.1.0(postcss@8.4.38) + postcss-js: 4.0.1(postcss@8.4.38) + postcss-load-config: 4.0.1(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5)) + postcss-nested: 6.0.1(postcss@8.4.38) + postcss-selector-parser: 6.0.13 + resolve: 1.22.8 + sucrase: 3.34.0 + transitivePeerDependencies: + - ts-node + tapable@2.2.1: {} text-table@0.2.0: {} @@ -16467,6 +16556,25 @@ snapshots: yn: 3.1.1 optional: true + ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5): + dependencies: + '@cspotcode/source-map-support': 0.8.1 + '@tsconfig/node10': 1.0.9 + '@tsconfig/node12': 1.0.11 + '@tsconfig/node14': 1.0.3 + '@tsconfig/node16': 1.0.4 + '@types/node': 20.13.0 + acorn: 8.11.3 + acorn-walk: 8.2.0 + arg: 4.1.3 + create-require: 1.1.1 + diff: 4.0.2 + make-error: 1.3.6 + typescript: 5.4.5 + v8-compile-cache-lib: 3.0.1 + yn: 3.1.1 + optional: true + tsconfig-paths@3.14.2: dependencies: '@types/json5': 0.0.29 @@ -16515,6 +16623,29 @@ snapshots: - supports-color - ts-node + tsup@8.0.2(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5))(typescript@5.4.5): + dependencies: + bundle-require: 4.0.2(esbuild@0.19.12) + cac: 6.7.14 + chokidar: 3.5.3 + debug: 4.3.4 + esbuild: 0.19.12 + execa: 5.1.1 + globby: 11.1.0 + joycon: 3.1.1 + postcss-load-config: 4.0.1(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5)) + resolve-from: 5.0.0 + rollup: 4.14.2 + source-map: 0.8.0-beta.0 + sucrase: 3.34.0 + tree-kill: 1.2.2 + optionalDependencies: + postcss: 8.4.38 + typescript: 5.4.5 + transitivePeerDependencies: + - supports-color + - ts-node + tsutils@3.21.0(typescript@5.4.5): dependencies: tslib: 1.14.1 From f912bece6b789ee8f2f0c08013bc6bd93d639df4 Mon Sep 17 00:00:00 2001 From: Mohit Mehta Date: Sun, 2 Jun 2024 20:06:03 +0530 Subject: [PATCH 6/7] updated packages, tailwind css not showing up correctly --- apps/dashboard/postcss.config.mjs | 15 +++++++-------- apps/dashboard/tailwind.config.ts | 2 +- packages/ui/package.json | 3 ++- packages/ui/postcss.config.js | 1 + packages/ui/src/components/ui/button.tsx | 5 ++++- packages/ui/tailwind.config.ts | 13 ++++++++++++- packages/ui/tsconfig.json | 5 ++++- packages/ui/tsup.config.ts | 3 +++ pnpm-lock.yaml | 16 ++++++++++------ 9 files changed, 44 insertions(+), 19 deletions(-) diff --git a/apps/dashboard/postcss.config.mjs b/apps/dashboard/postcss.config.mjs index 935bfcf..6f94347 100644 --- a/apps/dashboard/postcss.config.mjs +++ b/apps/dashboard/postcss.config.mjs @@ -1,9 +1,8 @@ -// /** @type {import('postcss-load-config').Config} */ -// const config = { -// plugins: { -// tailwindcss: {}, -// }, -// }; +/** @type {import('postcss-load-config').Config} */ +const config = { + plugins: { + tailwindcss: {}, + }, +}; -// export default config; -export * from "@saroh/ui/postcss.config"; +export default config; diff --git a/apps/dashboard/tailwind.config.ts b/apps/dashboard/tailwind.config.ts index 4f4eeaa..d0a055b 100644 --- a/apps/dashboard/tailwind.config.ts +++ b/apps/dashboard/tailwind.config.ts @@ -1 +1 @@ -export * from "@saroh/ui/tailwind.config"; +export * from "@saroh/tailwind-config/tailwind.config"; diff --git a/packages/ui/package.json b/packages/ui/package.json index 5eec2c7..3084a85 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -35,7 +35,8 @@ "postcss": "^8.4.38", "tailwind-merge": "^2.3.0", "tailwindcss": "^3.4.3", - "tsup": "^8.0.2" + "tsup": "^8.0.2", + "@saroh/utils": "workspace:*" }, "author": "Mohit Kumar ", "homepage": "https://saroh.io", diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js index 1f803a7..ce66483 100644 --- a/packages/ui/postcss.config.js +++ b/packages/ui/postcss.config.js @@ -3,6 +3,7 @@ const config = { plugins: { tailwindcss: {}, + autoprefixer: {}, }, }; diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx index fae92bd..6d1a6ed 100644 --- a/packages/ui/src/components/ui/button.tsx +++ b/packages/ui/src/components/ui/button.tsx @@ -1,8 +1,11 @@ +/* eslint-disable @typescript-eslint/no-unsafe-call -- no*/ +/* eslint-disable @typescript-eslint/no-unsafe-assignment -- some */ +/* eslint-disable import/no-extraneous-dependencies -- trying to remove error */ /* eslint-disable import/no-named-as-default-member -- showing unnecessary errors*/ import { Slot } from "@radix-ui/react-slot"; +import { cn } from "@saroh/utils"; import { cva, type VariantProps } from "class-variance-authority"; import React from "react"; -import { cn } from "src/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", diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts index d1ad68a..6c4f12c 100644 --- a/packages/ui/tailwind.config.ts +++ b/packages/ui/tailwind.config.ts @@ -4,7 +4,18 @@ import sharedConfig from "@saroh/tailwind-config/tailwind.config"; import type { Config } from "tailwindcss"; const config: Pick = { - presets: [sharedConfig], + presets: [ + { + ...sharedConfig, + content: [ + "./pages/**/*.{ts,tsx}", + "./components/**/*.{ts,tsx}", + "./app/**/*.{ts,tsx}", + "./src/**/*.{ts,tsx}", + "../../packages/ui/src/**/*.{ts,tsx}", + ], + }, + ], }; export default config; diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json index 6872633..57908d2 100644 --- a/packages/ui/tsconfig.json +++ b/packages/ui/tsconfig.json @@ -3,6 +3,9 @@ "include": ["."], "exclude": ["dist", "build", "node_modules"], "compilerOptions": { - "baseUrl": "." + "baseUrl": ".", + "paths": { + "@ui/*": ["./src/*"] + } } } diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts index f0a75d8..7ac7d69 100644 --- a/packages/ui/tsup.config.ts +++ b/packages/ui/tsup.config.ts @@ -1,3 +1,6 @@ +/* eslint-disable @typescript-eslint/no-shadow -- no*/ +/* eslint-disable import/no-default-export -- no */ +/* eslint-disable @typescript-eslint/consistent-type-imports -- no */ import { defineConfig, Options } from "tsup"; export default defineConfig((options: Options) => ({ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5498f7f..b1e2f4e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -790,6 +790,9 @@ importers: '@radix-ui/react-slot': specifier: ^1.0.2 version: 1.0.2(@types/react@18.3.2)(react@18.3.1) + '@saroh/utils': + specifier: workspace:* + version: link:../utils autoprefixer: specifier: ^10.4.19 version: 10.4.19(postcss@8.4.38) @@ -842,21 +845,22 @@ importers: packages/utils: dependencies: + clsx: + specifier: ^2.1.1 + version: 2.1.1 + tailwind-merge: + specifier: ^2.3.0 + version: 2.3.0 + devDependencies: '@types/node': specifier: ^20.13.0 version: 20.13.0 '@types/react': specifier: ^18.3.3 version: 18.3.3 - clsx: - specifier: ^2.1.1 - version: 2.1.1 react: specifier: ^18.3.1 version: 18.3.1 - tailwind-merge: - specifier: ^2.3.0 - version: 2.3.0 tsup: specifier: ^8.0.2 version: 8.0.2(postcss@8.4.38)(ts-node@10.9.1(@types/node@20.13.0)(typescript@5.4.5))(typescript@5.4.5) From f71386cae37bc74a57baca4f151c66207899f15f Mon Sep 17 00:00:00 2001 From: Mohit Mehta Date: Sun, 2 Jun 2024 20:14:26 +0530 Subject: [PATCH 7/7] updated the ui config, now styles are showing up --- apps/dashboard/package.json | 1 + apps/dashboard/postcss.config.mjs | 1 + packages/ui/src/components/index.ts | 1 + packages/ui/src/components/ui/index.ts | 1 + packages/ui/src/globals.css | 100 ++++++++++++------------- packages/ui/src/index.ts | 1 + packages/ui/src/lib/utils.ts | 8 -- pnpm-lock.yaml | 3 + 8 files changed, 58 insertions(+), 58 deletions(-) create mode 100644 packages/ui/src/components/index.ts create mode 100644 packages/ui/src/components/ui/index.ts create mode 100644 packages/ui/src/index.ts delete mode 100644 packages/ui/src/lib/utils.ts diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json index 6bceac1..f075d02 100644 --- a/apps/dashboard/package.json +++ b/apps/dashboard/package.json @@ -19,6 +19,7 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "autoprefixer": "^10.4.19", "postcss": "^8", "tailwindcss": "^3.4.1", "eslint": "^8", diff --git a/apps/dashboard/postcss.config.mjs b/apps/dashboard/postcss.config.mjs index 6f94347..88ac031 100644 --- a/apps/dashboard/postcss.config.mjs +++ b/apps/dashboard/postcss.config.mjs @@ -2,6 +2,7 @@ const config = { plugins: { tailwindcss: {}, + autoprefixer: {}, }, }; diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts new file mode 100644 index 0000000..4aedf59 --- /dev/null +++ b/packages/ui/src/components/index.ts @@ -0,0 +1 @@ +export * from "./ui"; diff --git a/packages/ui/src/components/ui/index.ts b/packages/ui/src/components/ui/index.ts new file mode 100644 index 0000000..98d55ac --- /dev/null +++ b/packages/ui/src/components/ui/index.ts @@ -0,0 +1 @@ +export * from "./button"; diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css index 4ef0baf..27e12ec 100644 --- a/packages/ui/src/globals.css +++ b/packages/ui/src/globals.css @@ -3,74 +3,74 @@ @tailwind utilities; @layer base { - :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; - --radius: 0.5rem; - } + --radius: 0.5rem; + } - .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; - } + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + } } @layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } -} \ No newline at end of file + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts new file mode 100644 index 0000000..40b494c --- /dev/null +++ b/packages/ui/src/index.ts @@ -0,0 +1 @@ +export * from "./components"; diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts deleted file mode 100644 index 141047c..0000000 --- a/packages/ui/src/lib/utils.ts +++ /dev/null @@ -1,8 +0,0 @@ -/* eslint-disable @typescript-eslint/explicit-function-return-type -- not added because it's a utility function that doesn't need a return type - */ -import { clsx, type ClassValue } from "clsx"; -import { twMerge } from "tailwind-merge"; - -export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b1e2f4e..212113d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -413,6 +413,9 @@ importers: '@types/react-dom': specifier: ^18 version: 18.3.0 + autoprefixer: + specifier: ^10.4.19 + version: 10.4.19(postcss@8.4.38) eslint: specifier: ^8 version: 8.57.0