From ec08eb1d74293408d2d7c4a611423d3a41781ab2 Mon Sep 17 00:00:00 2001 From: Danijel Martinek Date: Mon, 6 Apr 2026 14:56:16 +0200 Subject: [PATCH] feat(ui): set up Atomic Design structure with Tailwind v4 --- packages/ui/package.json | 11 +++++++++-- packages/ui/src/atoms/index.ts | 1 + packages/ui/src/index.ts | 7 +++++-- packages/ui/src/lib/utils.ts | 6 ++++++ packages/ui/src/molecules/index.ts | 1 + packages/ui/src/organisms/index.ts | 1 + packages/ui/src/styles/globals.css | 26 ++++++++++++++++++++++++++ packages/ui/src/templates/index.ts | 1 + pnpm-lock.yaml | 26 ++++++++++++++++++++++++++ 9 files changed, 76 insertions(+), 4 deletions(-) create mode 100644 packages/ui/src/atoms/index.ts create mode 100644 packages/ui/src/lib/utils.ts create mode 100644 packages/ui/src/molecules/index.ts create mode 100644 packages/ui/src/organisms/index.ts create mode 100644 packages/ui/src/styles/globals.css create mode 100644 packages/ui/src/templates/index.ts diff --git a/packages/ui/package.json b/packages/ui/package.json index 87e53b3..f7e9ec7 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -6,13 +6,20 @@ "main": "./src/index.ts", "types": "./src/index.ts", "scripts": { - "build": "tsc --noEmit", + "build": "echo 'typechecked by consuming app bundler'", "lint": "eslint .", "test": "vitest run", "typecheck": "tsc --noEmit" }, + "dependencies": { + "clsx": "^2.1.0", + "tailwind-merge": "^3.0.0", + "react": "^19.0.0" + }, "devDependencies": { "@repo/eslint-config": "workspace:*", - "@repo/typescript-config": "workspace:*" + "@repo/typescript-config": "workspace:*", + "@types/react": "^19.0.0", + "tailwindcss": "^4.1.0" } } diff --git a/packages/ui/src/atoms/index.ts b/packages/ui/src/atoms/index.ts new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/packages/ui/src/atoms/index.ts @@ -0,0 +1 @@ +export {}; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 0bb7a18..0bc6e2f 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,2 +1,5 @@ -// @repo/ui — shadcn/ui + Atomic Design component library -export {}; +export { cn } from "./lib/utils.js"; +export * from "./atoms/index.js"; +export * from "./molecules/index.js"; +export * from "./organisms/index.js"; +export * from "./templates/index.js"; diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts new file mode 100644 index 0000000..a5ef193 --- /dev/null +++ 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/src/molecules/index.ts b/packages/ui/src/molecules/index.ts new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/packages/ui/src/molecules/index.ts @@ -0,0 +1 @@ +export {}; diff --git a/packages/ui/src/organisms/index.ts b/packages/ui/src/organisms/index.ts new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/packages/ui/src/organisms/index.ts @@ -0,0 +1 @@ +export {}; diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css new file mode 100644 index 0000000..2eb4936 --- /dev/null +++ b/packages/ui/src/styles/globals.css @@ -0,0 +1,26 @@ +@import "tailwindcss"; + +@theme { + --color-background: hsl(0 0% 100%); + --color-foreground: hsl(240 10% 3.9%); + --color-card: hsl(0 0% 100%); + --color-card-foreground: hsl(240 10% 3.9%); + --color-popover: hsl(0 0% 100%); + --color-popover-foreground: hsl(240 10% 3.9%); + --color-primary: hsl(240 5.9% 10%); + --color-primary-foreground: hsl(0 0% 98%); + --color-secondary: hsl(240 4.8% 95.9%); + --color-secondary-foreground: hsl(240 5.9% 10%); + --color-muted: hsl(240 4.8% 95.9%); + --color-muted-foreground: hsl(240 3.8% 46.1%); + --color-accent: hsl(240 4.8% 95.9%); + --color-accent-foreground: hsl(240 5.9% 10%); + --color-destructive: hsl(0 84.2% 60.2%); + --color-destructive-foreground: hsl(0 0% 98%); + --color-border: hsl(240 5.9% 90%); + --color-input: hsl(240 5.9% 90%); + --color-ring: hsl(240 5.9% 10%); + --radius-sm: 0.25rem; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; +} diff --git a/packages/ui/src/templates/index.ts b/packages/ui/src/templates/index.ts new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/packages/ui/src/templates/index.ts @@ -0,0 +1 @@ +export {}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 11cde20..c39ecd6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -288,6 +288,16 @@ importers: packages/typescript-config: {} packages/ui: + dependencies: + clsx: + specifier: ^2.1.0 + version: 2.1.1 + react: + specifier: ^19.0.0 + version: 19.2.4 + tailwind-merge: + specifier: ^3.0.0 + version: 3.5.0 devDependencies: '@repo/eslint-config': specifier: workspace:* @@ -295,6 +305,12 @@ importers: '@repo/typescript-config': specifier: workspace:* version: link:../typescript-config + '@types/react': + specifier: ^19.0.0 + version: 19.2.14 + tailwindcss: + specifier: ^4.1.0 + version: 4.2.2 packages: @@ -3250,6 +3266,12 @@ packages: tabbable@6.4.0: resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==} + tailwind-merge@3.5.0: + resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==} + + tailwindcss@4.2.2: + resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==} + thread-stream@3.1.0: resolution: {integrity: sha512-OqyPZ9u96VohAyMfJykzmivOrY2wfMSf3C5TtFJVgN+Hm6aj+voFhlK+kZEIv2FBh1X6Xp3DlnCOfEQ3B2J86A==} @@ -6639,6 +6661,10 @@ snapshots: tabbable@6.4.0: {} + tailwind-merge@3.5.0: {} + + tailwindcss@4.2.2: {} + thread-stream@3.1.0: dependencies: real-require: 0.2.0