From 95b318f995b6c68105fe47908613ece129aa1f42 Mon Sep 17 00:00:00 2001 From: codegen-bot Date: Tue, 18 Mar 2025 21:56:17 +0000 Subject: [PATCH 01/14] LC-173: Migrate LambdaCurry/forms to ShadCN tailwind V4 --- apps/docs/src/main.css | 88 +++++------ apps/docs/tailwind.config.js | 4 +- packages/components/package.json | 2 +- packages/components/src/ui/button.tsx | 19 ++- packages/components/src/ui/checkbox-field.tsx | 27 +++- packages/components/src/ui/form.tsx | 145 +++++++++--------- packages/components/src/ui/label.tsx | 22 ++- 7 files changed, 170 insertions(+), 137 deletions(-) diff --git a/apps/docs/src/main.css b/apps/docs/src/main.css index 96eed7ed..efbd9d8d 100644 --- a/apps/docs/src/main.css +++ b/apps/docs/src/main.css @@ -2,71 +2,73 @@ @tailwind components; @tailwind utilities; -:root { - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; +@layer base { + @theme { + --background: 0 0% 100%; + --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%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 47.4% 11.2%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; + --card: 0 0% 100%; + --card-foreground: 222.2 47.4% 11.2%; - --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%; - --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 100% 50%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 100% 50%; + --destructive-foreground: 210 40% 98%; - --ring: 215 20.2% 65.1%; + --ring: 215 20.2% 65.1%; - --radius: 0.5rem; -} + --radius: 0.5rem; + } -@layer base { .dark { - --background: 224 71% 4%; - --foreground: 213 31% 91%; + @theme { + --background: 224 71% 4%; + --foreground: 213 31% 91%; - --muted: 223 47% 11%; - --muted-foreground: 215.4 16.3% 56.9%; + --muted: 223 47% 11%; + --muted-foreground: 215.4 16.3% 56.9%; - --accent: 216 34% 17%; - --accent-foreground: 210 40% 98%; + --accent: 216 34% 17%; + --accent-foreground: 210 40% 98%; - --popover: 224 71% 4%; - --popover-foreground: 215 20.2% 65.1%; + --popover: 224 71% 4%; + --popover-foreground: 215 20.2% 65.1%; - --border: 216 34% 17%; - --input: 216 34% 17%; + --border: 216 34% 17%; + --input: 216 34% 17%; - --card: 224 71% 4%; - --card-foreground: 213 31% 91%; + --card: 224 71% 4%; + --card-foreground: 213 31% 91%; - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 1.2%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 1.2%; - --secondary: 222.2 47.4% 11.2%; - --secondary-foreground: 210 40% 98%; + --secondary: 222.2 47.4% 11.2%; + --secondary-foreground: 210 40% 98%; - --destructive: 0 63% 31%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 63% 31%; + --destructive-foreground: 210 40% 98%; - --ring: 216 34% 17%; + --ring: 216 34% 17%; - --radius: 0.5rem; + --radius: 0.5rem; + } } } diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js index c056b3aa..fc945cf4 100644 --- a/apps/docs/tailwind.config.js +++ b/apps/docs/tailwind.config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - darkMode: ['class'], + darkMode: 'class', content: ['./src/**/*.{ts,tsx}', '../../packages/components/src/**/*.{ts,tsx}'], theme: { screens: { @@ -73,4 +73,4 @@ module.exports = { }, }, plugins: [require('tailwindcss-animate')], -}; +}; \ No newline at end of file diff --git a/packages/components/package.json b/packages/components/package.json index dd3c0c12..5114f9cb 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -82,7 +82,7 @@ "glob": "^11.0.0", "postcss": "^8.4.49", "react": "^19.0.0", - "tailwindcss": "^3.4.17", + "tailwindcss": "^4.0.0", "typescript": "^5.7.2", "vite": "^5.4.11", "vite-plugin-dts": "^4.4.0", diff --git a/packages/components/src/ui/button.tsx b/packages/components/src/ui/button.tsx index b09044cc..c3e3b762 100644 --- a/packages/components/src/ui/button.tsx +++ b/packages/components/src/ui/button.tsx @@ -36,12 +36,17 @@ export interface ButtonProps asChild?: boolean; } -const Button = React.forwardRef( - ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : 'button'; - return ; - }, -); +export function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) { + const Comp = asChild ? Slot : 'button'; + return ( + + ); +} + Button.displayName = 'Button'; -export { Button, buttonVariants }; +export { buttonVariants }; \ No newline at end of file diff --git a/packages/components/src/ui/checkbox-field.tsx b/packages/components/src/ui/checkbox-field.tsx index 10a36289..09006b2a 100644 --- a/packages/components/src/ui/checkbox-field.tsx +++ b/packages/components/src/ui/checkbox-field.tsx @@ -30,23 +30,38 @@ export interface CheckboxProps< checkClassName?: string; } -const CheckboxField = React.forwardRef( - ({ control, name, className, label, description, components, indicatorClassName, checkClassName, ...props }, ref) => ( +export function CheckboxField< + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath, +>({ + control, + name, + className, + label, + description, + components, + indicatorClassName, + checkClassName, + ...props +}: CheckboxProps) { + return ( ( - + @@ -66,9 +81,9 @@ const CheckboxField = React.forwardRef( )} /> - ), -); + ); +} CheckboxField.displayName = CheckboxPrimitive.Root.displayName; -export { CheckboxField as Checkbox }; +export { CheckboxField as Checkbox }; \ No newline at end of file diff --git a/packages/components/src/ui/form.tsx b/packages/components/src/ui/form.tsx index 27997abc..5753fa04 100644 --- a/packages/components/src/ui/form.tsx +++ b/packages/components/src/ui/form.tsx @@ -7,10 +7,10 @@ import { Label } from './label'; import { cn } from './utils'; export interface FieldComponents { - FormControl: React.ForwardRefExoticComponent>; - FormDescription: React.ForwardRefExoticComponent>; - FormLabel: React.ForwardRefExoticComponent>; - FormMessage: React.ForwardRefExoticComponent>; + FormControl: React.ComponentType; + FormDescription: React.ComponentType; + FormLabel: React.ComponentType; + FormMessage: React.ComponentType; } export type FormFieldContextValue< @@ -35,7 +35,7 @@ export interface FormItemProps extends React.HTMLAttributes { Component?: React.ComponentType; } -export const FormItem = React.forwardRef(({ Component, className, ...props }, ref) => { +export function FormItem({ Component, className, ...props }: FormItemProps) { const id = React.useId(); if (Component) { @@ -51,42 +51,43 @@ export const FormItem = React.forwardRef(({ Compo formMessageId: `${id}-form-item-message`, }} > -
+
); -}); +} FormItem.displayName = 'FormItem'; export interface FormLabelProps extends React.ComponentPropsWithoutRef { error?: string; - Component?: React.ForwardRefExoticComponent>; + Component?: React.ComponentType; } -export const FormLabel = React.forwardRef, FormLabelProps>( - ({ Component, htmlFor, className, error, ...props }, ref) => { - const { formItemId } = React.useContext(FormItemContext); - - if (Component) { - return ( - - ); - } +export function FormLabel({ Component, htmlFor, className, error, ...props }: FormLabelProps) { + const { formItemId } = React.useContext(FormItemContext); + if (Component) { return ( -