From fe22b5479680271b4544ad834a3e18f9b521c340 Mon Sep 17 00:00:00 2001 From: ruru <142723369+ruru-m07@users.noreply.github.com> Date: Thu, 15 Aug 2024 16:19:09 +0530 Subject: [PATCH] refactor(components): refactor components and fix bugs --- .../content/docs => .changeset}/changelog.mdx | 0 apps/www/__registry__/index.tsx | 12 + apps/www/components/preview/index.tsx | 4 +- apps/www/components/selectLargeData.tsx | 39 ++++ apps/www/content/docs/components/button.mdx | 22 +- apps/www/content/docs/components/select.mdx | 42 ++++ apps/www/content/docs/meta.json | 1 - .../public/registry/components/avatar.json | 2 +- .../www/public/registry/components/badge.json | 2 +- .../public/registry/components/button.json | 2 +- .../public/registry/components/checkbox.json | 2 +- .../www/public/registry/components/input.json | 2 +- .../public/registry/components/select.json | 2 +- .../public/registry/components/spinner.json | 2 +- .../public/registry/components/switch.json | 2 +- apps/www/public/registry/components/tabs.json | 11 + .../public/registry/components/textarea.json | 2 +- .../public/registry/components/tooltip.json | 2 +- apps/www/public/registry/index.json | 6 + apps/www/registry/ui.ts | 6 + apps/www/scripts/build-registry.mts | 7 +- packages/cli/src/utils/index.ts | 2 +- packages/cli/src/utils/templates.ts | 206 ++++++++++++------ packages/ui/src/components/avatar.tsx | 4 - packages/ui/src/components/badge.tsx | 1 - packages/ui/src/components/button.tsx | 10 +- packages/ui/src/components/checkbox.tsx | 10 +- packages/ui/src/components/input.tsx | 21 +- packages/ui/src/components/select.tsx | 3 - packages/ui/src/components/spinner.tsx | 1 - packages/ui/src/components/tabs.tsx | 1 - packages/ui/src/components/textarea.tsx | 8 +- packages/ui/src/components/tooltip.tsx | 4 - tsconfig.json | 2 + 34 files changed, 305 insertions(+), 138 deletions(-) rename {apps/www/content/docs => .changeset}/changelog.mdx (100%) create mode 100644 apps/www/components/selectLargeData.tsx create mode 100644 apps/www/public/registry/components/tabs.json diff --git a/apps/www/content/docs/changelog.mdx b/.changeset/changelog.mdx similarity index 100% rename from apps/www/content/docs/changelog.mdx rename to .changeset/changelog.mdx diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index 279f4ef..2b6f485 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -101,6 +101,18 @@ export const Index: Record = { category: "undefined", subcategory: undefined, }, + tabs: { + name: "tabs", + type: "components:ui", + registryDependencies: undefined, + component: React.lazy( + () => import("@/../../packages/ui/src/components/tabs"), + ), + source: "", + files: ["@/../../packages/ui/src/components/tabs.tsx"], + category: "undefined", + subcategory: undefined, + }, textarea: { name: "textarea", type: "components:ui", diff --git a/apps/www/components/preview/index.tsx b/apps/www/components/preview/index.tsx index 599844e..cf81028 100644 --- a/apps/www/components/preview/index.tsx +++ b/apps/www/components/preview/index.tsx @@ -20,6 +20,7 @@ import { SelectGroup, SelectItem, SelectLabel, + SelectSeparator, SelectTrigger, SelectValue, } from "ruru-ui/components/select"; @@ -145,7 +146,8 @@ export default { - Fruits + Languages + C C++ Java diff --git a/apps/www/components/selectLargeData.tsx b/apps/www/components/selectLargeData.tsx new file mode 100644 index 0000000..3272e73 --- /dev/null +++ b/apps/www/components/selectLargeData.tsx @@ -0,0 +1,39 @@ +import { + Select, + SelectContent, + SelectTrigger, + SelectValue, + SelectGroup, + SelectItem, + SelectLabel, + SelectScrollDownButton, + SelectScrollUpButton, + SelectSeparator, +} from "ruru-ui/components/select"; + +const SelectCountries = () => { + return ( + <> + + + ); +}; + +export default SelectCountries; diff --git a/apps/www/content/docs/components/button.mdx b/apps/www/content/docs/components/button.mdx index 3129cc7..6546211 100644 --- a/apps/www/content/docs/components/button.mdx +++ b/apps/www/content/docs/components/button.mdx @@ -235,7 +235,7 @@ The `Button` component allows you to show a loading spinner when the button is i - - - +
+ + + +
) } ``` diff --git a/apps/www/content/docs/components/select.mdx b/apps/www/content/docs/components/select.mdx index e3e473c..3cdd124 100644 --- a/apps/www/content/docs/components/select.mdx +++ b/apps/www/content/docs/components/select.mdx @@ -19,6 +19,7 @@ import { SelectScrollDownButton, } from "ruru-ui/components/select"; import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs"; +import SelectCountries from "../../../components/selectLargeData.tsx" ## Installation @@ -71,6 +72,7 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs"; Fruits + Apple Banana Blueberry @@ -106,6 +108,7 @@ export function SelectDemo() { Fruits + Apple Banana Blueberry @@ -139,6 +142,7 @@ The `Select` component can be used to create a basic dropdown menu. Fruits + Apple Banana Blueberry @@ -158,6 +162,7 @@ The `Select` component can be used to create a basic dropdown menu. SelectContent, SelectLabel, SelectItem, + SelectSeparator, } from "ruru-ui/components/select"; export function BasicSelect() { @@ -169,6 +174,7 @@ The `Select` component can be used to create a basic dropdown menu. Fruits + Apple Banana Blueberry @@ -197,6 +203,7 @@ You can disable the `Select` component by passing the `disabled` prop to the `Se Fruits + Apple Banana Blueberry @@ -216,6 +223,7 @@ You can disable the `Select` component by passing the `disabled` prop to the `Se SelectContent, SelectLabel, SelectItem, + SelectSeparator, } from "ruru-ui/components/select"; export function DisabledSelect() { @@ -227,6 +235,7 @@ You can disable the `Select` component by passing the `disabled` prop to the `Se Fruits + Apple Banana Blueberry @@ -256,6 +265,7 @@ You can set a default value for the `Select` component by passing the `defaultVa Fruits + Apple Banana Blueberry @@ -275,6 +285,7 @@ You can set a default value for the `Select` component by passing the `defaultVa SelectContent, SelectLabel, SelectItem, + SelectSeparator, } from "ruru-ui/components/select"; export function DefaultValueSelect() { @@ -286,6 +297,7 @@ export function DefaultValueSelect() { Fruits + Apple Banana Blueberry @@ -300,6 +312,36 @@ export function DefaultValueSelect() { +### ScrollDownButton and ScrollUpButton + +You can add scroll buttons to the `Select` component by using the `SelectScrollDownButton` and `SelectScrollUpButton` components. + + + + + + + + + + ## Props | Name | Type | Default | Description | diff --git a/apps/www/content/docs/meta.json b/apps/www/content/docs/meta.json index 87db49b..ed1c618 100644 --- a/apps/www/content/docs/meta.json +++ b/apps/www/content/docs/meta.json @@ -6,7 +6,6 @@ "installation", "cli", "dark-mode", - "changelog", "---Components---", "...components", "---Others---", diff --git a/apps/www/public/registry/components/avatar.json b/apps/www/public/registry/components/avatar.json index 4d0f203..0964f07 100644 --- a/apps/www/public/registry/components/avatar.json +++ b/apps/www/public/registry/components/avatar.json @@ -3,7 +3,7 @@ "files": [ { "name": "avatar.tsx", - "content": "import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\ntype AvatarProps = Omit<\n React.ComponentPropsWithoutRef<\"img\">,\n \"src\" | \"alt\"\n> & {\n className?: string;\n size?: number;\n placeholder?: string;\n src: string;\n};\nconst Avatar = React.forwardRef(\n ({ className, size = 30, src, placeholder, ...props }, ref) => {\n return (\n \n );\n },\n);\nAvatar.displayName = \"Avatar\";\ntype AvatarGroupProps = Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n \"children\"\n> & {\n className?: string;\n members: { src: string; alt: string }[];\n size?: number;\n limit?: number;\n aClassName?: string;\n lnClassName?: string;\n};\nconst AvatarGroup = React.forwardRef(\n (\n { className, aClassName, lnClassName, size = 30, members, limit, ...props },\n ref,\n ) => {\n const displayedMembers =\n limit && members.length > limit ? members.slice(0, limit - 1) : members;\n const extraMembersCount =\n limit && members.length > limit ? members.length - limit + 1 : 0;\n return (\n
\n {displayedMembers.map((member, index) => (\n \n ))}\n {extraMembersCount > 0 && (\n \n +{extraMembersCount}\n
\n )}\n \n );\n },\n);\nAvatarGroup.displayName = \"AvatarGroup\";\ntype AvatarWithBadgeProps = Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n \"children\"\n> & {\n className?: string;\n size?: number;\n src: string;\n placeholder?: string;\n badgeSrc: string;\n iClassName?: string;\n sClassName?: string;\n};\nconst AvatarWithBadge = React.forwardRef(\n (\n {\n className,\n sClassName,\n iClassName,\n size = 30,\n src,\n placeholder,\n badgeSrc,\n ...props\n },\n ref,\n ) => {\n return (\n \n \n \n \n );\n },\n);\nAvatarWithBadge.displayName = \"AvatarWithBadge\";\nexport { Avatar, AvatarGroup, AvatarWithBadge };\n" + "content": "import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n\ntype AvatarProps = Omit<\n React.ComponentPropsWithoutRef<\"img\">,\n \"src\" | \"alt\"\n> & {\n \n className?: string;\n \n size?: number;\n \n placeholder?: string;\n \n src: string;\n};\n\n\nconst Avatar = React.forwardRef(\n ({ className, size = 30, src, placeholder, ...props }, ref) => {\n return (\n \n );\n },\n);\nAvatar.displayName = \"Avatar\";\n\ntype AvatarGroupProps = Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n \"children\"\n> & {\n \n className?: string;\n \n members: { src: string; alt: string }[];\n \n size?: number;\n \n limit?: number;\n aClassName?: string;\n lnClassName?: string;\n};\n\nconst AvatarGroup = React.forwardRef(\n (\n { className, aClassName, lnClassName, size = 30, members, limit, ...props },\n ref,\n ) => {\n const displayedMembers =\n limit && members.length > limit ? members.slice(0, limit - 1) : members;\n const extraMembersCount =\n limit && members.length > limit ? members.length - limit + 1 : 0;\n\n return (\n
\n {displayedMembers.map((member, index) => (\n \n ))}\n {extraMembersCount > 0 && (\n \n +{extraMembersCount}\n
\n )}\n \n );\n },\n);\nAvatarGroup.displayName = \"AvatarGroup\";\n\ntype AvatarWithBadgeProps = Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n \"children\"\n> & {\n \n className?: string;\n \n size?: number;\n \n src: string;\n \n placeholder?: string;\n \n badgeSrc: string;\n iClassName?: string;\n sClassName?: string;\n};\n\n\nconst AvatarWithBadge = React.forwardRef(\n (\n {\n className,\n sClassName,\n iClassName,\n size = 30,\n src,\n placeholder,\n badgeSrc,\n ...props\n },\n ref,\n ) => {\n return (\n \n \n \n \n );\n },\n);\nAvatarWithBadge.displayName = \"AvatarWithBadge\";\n\nexport { Avatar, AvatarGroup, AvatarWithBadge };\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/components/badge.json b/apps/www/public/registry/components/badge.json index f38c94b..f296158 100644 --- a/apps/www/public/registry/components/badge.json +++ b/apps/www/public/registry/components/badge.json @@ -3,7 +3,7 @@ "files": [ { "name": "badge.tsx", - "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/utils/cn\";\nconst variants = {\n gray: \"bg-[#8f8f8f] text-white\",\n \"gray-subtle\": \"bg-[#1f1f1f] text-white\",\n blue: \"bg-[#0072f5] text-white\",\n \"blue-subtle\": \"bg-[#10233d] text-[#52a8ff]\",\n purple: \"bg-[#8e4ec6] text-white\",\n \"purple-subtle\": \"bg-[#2e1938] text-[#bf7af0]\",\n amber: \"bg-[#ffb224] text-black\",\n \"amber-subtle\": \"bg-[#331b00] text-[#f2a20d]\",\n red: \"bg-[#e5484d] text-white\",\n \"red-subtle\": \"bg-[#3c1618] text-[#ff6166]\",\n pink: \"bg-[#ea3e83] text-white\",\n \"pink-subtle\": \"bg-[#4f1c31] text-[#f75f8f]\",\n green: \"bg-[#45a557] text-white\",\n \"green-subtle\": \"bg-[#0f2e18] text-[#62c073]\",\n teal: \"bg-[#12a594] text-white\",\n \"teal-subtle\": \"bg-[#083a33] text-[#0ac7b4]\",\n inverted: \"bg-primary text-primary-foreground\",\n};\nconst sizes = {\n sm: \"text-xs px-1.5 py-[1.5px]\",\n md: \"text-sm px-2.5 py-[2px]\",\n lg: \"text-lg px-3 py-[2.5px]\",\n};\nconst badgeVariants = cva(\n \"w-fit h-fit inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 capitalize\",\n {\n variants: {\n variant: {\n ...variants,\n },\n size: {\n ...sizes,\n },\n },\n defaultVariants: {\n variant: \"gray\",\n size: \"md\",\n },\n },\n);\nexport interface BadgeProps\n extends React.HTMLAttributes,\n VariantProps {\n children: React.ReactNode;\n variant: keyof typeof variants;\n size?: \"sm\" | \"md\" | \"lg\";\n icon?: React.ReactNode;\n}\nconst Badge: React.FC = ({\n children,\n className,\n variant,\n size = \"md\",\n icon,\n ...props\n}: BadgeProps): React.ReactElement => {\n return (\n
\n {icon && {icon}}\n {children}\n
\n );\n};\nexport { Badge, badgeVariants };\n" + "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/utils/cn\";\n\nconst variants = {\n gray: \"bg-[#8f8f8f] text-white\",\n \"gray-subtle\": \"bg-[#1f1f1f] text-white\",\n blue: \"bg-[#0072f5] text-white\",\n \"blue-subtle\": \"bg-[#10233d] text-[#52a8ff]\",\n purple: \"bg-[#8e4ec6] text-white\",\n \"purple-subtle\": \"bg-[#2e1938] text-[#bf7af0]\",\n amber: \"bg-[#ffb224] text-black\",\n \"amber-subtle\": \"bg-[#331b00] text-[#f2a20d]\",\n red: \"bg-[#e5484d] text-white\",\n \"red-subtle\": \"bg-[#3c1618] text-[#ff6166]\",\n pink: \"bg-[#ea3e83] text-white\",\n \"pink-subtle\": \"bg-[#4f1c31] text-[#f75f8f]\",\n green: \"bg-[#45a557] text-white\",\n \"green-subtle\": \"bg-[#0f2e18] text-[#62c073]\",\n teal: \"bg-[#12a594] text-white\",\n \"teal-subtle\": \"bg-[#083a33] text-[#0ac7b4]\",\n inverted: \"bg-primary text-primary-foreground\",\n};\n\nconst sizes = {\n sm: \"text-xs px-1.5 py-[1.5px]\",\n md: \"text-sm px-2.5 py-[2px]\",\n lg: \"text-lg px-3 py-[2.5px]\",\n};\n\nconst badgeVariants = cva(\n \"w-fit h-fit inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 capitalize\",\n {\n variants: {\n variant: {\n ...variants,\n },\n size: {\n ...sizes,\n },\n },\n defaultVariants: {\n variant: \"gray\",\n size: \"md\",\n },\n },\n);\n\nexport interface BadgeProps\n extends React.HTMLAttributes,\n VariantProps {\n \n children: React.ReactNode;\n \n variant: keyof typeof variants;\n \n size?: \"sm\" | \"md\" | \"lg\";\n \n icon?: React.ReactNode;\n}\n\nconst Badge: React.FC = ({\n children,\n className,\n variant,\n size = \"md\",\n icon,\n ...props\n}: BadgeProps): React.ReactElement => {\n return (\n
\n {icon && {icon}}\n {children}\n
\n );\n};\n\nexport { Badge, badgeVariants };\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/components/button.json b/apps/www/public/registry/components/button.json index 20f05e9..e10b734 100644 --- a/apps/www/public/registry/components/button.json +++ b/apps/www/public/registry/components/button.json @@ -4,7 +4,7 @@ "files": [ { "name": "button.tsx", - "content": "\"use client\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Spinner } from \"./spinner\";\nexport const buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow hover:bg-primary/85 hover:shadow-md\",\n secondary:\n \"border-input border-[1.5px] bg-primary-foreground hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\n tertiary: \"text-primary hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\n error: \"bg-[#d93036] hover:bg-[#ff6166]\",\n warning: \"bg-[#ff990a] text-primary-foreground hover:bg-[#d27504]\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n small: \"h-8 rounded-md px-3 text-xs\",\n large: \"h-10 rounded-md px-8\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\nexport interface ButtonProps\n extends Omit<\n React.ButtonHTMLAttributes,\n \"prefix\" | \"suffix\"\n >,\n VariantProps {\n asChild?: boolean;\n prefix?: React.ReactNode;\n suffix?: React.ReactNode;\n disabled?: boolean;\n loading?: boolean;\n}\nexport const Button = React.forwardRef(\n (\n {\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n prefix,\n suffix,\n disabled = false,\n loading = false,\n ...props\n },\n ref,\n ) => {\n const Comp = asChild ? Slot : \"button\";\n return (\n
\n \n {loading ? : null}\n {prefix ? (\n \n {prefix}\n \n ) : null}\n {props.children}\n {suffix ? (\n \n {suffix}\n \n ) : null}\n \n
\n );\n },\n);\nButton.displayName = \"Button\";\n" + "content": "\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Spinner } from \"./spinner\";\n\nexport const buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow hover:bg-primary/85 hover:shadow-md\",\n secondary:\n \"border-input border-[1.5px] bg-primary-foreground hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\n tertiary: \"text-primary hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\n error: \"bg-[#d93036] hover:bg-[#ff6166]\",\n warning: \"bg-[#ff990a] text-primary-foreground hover:bg-[#d27504]\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n small: \"h-8 rounded-md px-3 text-xs\",\n large: \"h-10 rounded-md px-8\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nexport interface ButtonProps\n extends Omit<\n React.ButtonHTMLAttributes,\n \"prefix\" | \"suffix\"\n >,\n VariantProps {\n \n asChild?: boolean;\n \n prefix?: React.ReactNode;\n \n suffix?: React.ReactNode;\n \n disabled?: boolean;\n \n loading?: boolean;\n}\n\nexport const Button = React.forwardRef(\n (\n {\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n prefix,\n suffix,\n disabled = false,\n loading = false,\n ...props\n },\n ref,\n ) => {\n const Comp = asChild ? Slot : \"button\";\n\n return (\n
\n \n {loading ? : null}\n {prefix ? (\n \n {prefix}\n \n ) : null}\n {props.children}\n {suffix ? (\n \n {suffix}\n \n ) : null}\n \n
\n );\n },\n);\n\nButton.displayName = \"Button\";\n" } ], "type": "components:ui", diff --git a/apps/www/public/registry/components/checkbox.json b/apps/www/public/registry/components/checkbox.json index 55fc6da..12babbe 100644 --- a/apps/www/public/registry/components/checkbox.json +++ b/apps/www/public/registry/components/checkbox.json @@ -4,7 +4,7 @@ "files": [ { "name": "checkbox.tsx", - "content": "import * as React from \"react\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { cn } from \"@/utils/cn\";\ntype CheckboxProps = React.ComponentPropsWithoutRef<\n typeof CheckboxPrimitive.Root\n> & {\n indeterminate?: boolean;\n};\nconst Checkbox = React.forwardRef<\n React.ElementRef,\n CheckboxProps\n>(({ className, indeterminate = false, ...props }, ref) => (\n \n {indeterminate ? (\n \n \n \n ) : (\n \n \n \n \n \n )}\n \n));\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\nexport { Checkbox };\n" + "content": "import * as React from \"react\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\n\nimport { cn } from \"@/utils/cn\";\n\ntype CheckboxProps = React.ComponentPropsWithoutRef<\n typeof CheckboxPrimitive.Root\n> & {\n \n indeterminate?: boolean;\n};\n\nconst Checkbox = React.forwardRef<\n React.ElementRef,\n CheckboxProps\n>(({ className, indeterminate = false, ...props }, ref) => (\n \n {indeterminate ? (\n \n \n \n ) : (\n \n \n \n \n \n )}\n \n));\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\nexport { Checkbox };\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/components/input.json b/apps/www/public/registry/components/input.json index aa72bef..61960b4 100644 --- a/apps/www/public/registry/components/input.json +++ b/apps/www/public/registry/components/input.json @@ -3,7 +3,7 @@ "files": [ { "name": "input.tsx", - "content": "\"use client\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nexport interface InputProps\n extends Omit<\n React.InputHTMLAttributes,\n \"children\" | \"prefix\" | \"suffix\"\n > {\n className?: string;\n iclassName?: string;\n prefix?: React.ReactNode | string;\n suffix?: React.ReactNode | string;\n prefixStyling?: boolean;\n label?: string;\n suffixStyling?: boolean;\n error?: string;\n}\nconst Input = React.forwardRef(\n (\n {\n className,\n iclassName,\n prefix,\n suffix,\n prefixStyling = true,\n suffixStyling = true,\n label,\n type,\n error,\n ...props\n },\n ref,\n ) => {\n const prefixRef = React.useRef(null);\n const suffixRef = React.useRef(null);\n const [prefixWidth, setPrefixWidth] = React.useState(0);\n const [suffixWidth, setSuffixWidth] = React.useState(0);\n React.useEffect(() => {\n if (prefixRef.current) {\n setPrefixWidth(prefixRef.current.offsetWidth);\n }\n if (suffixRef.current) {\n setSuffixWidth(suffixRef.current.offsetWidth);\n }\n }, [prefix, suffix]);\n return (\n
\n {label && (\n \n {label}\n \n )}\n {prefix && (\n \n {prefix}\n {prefixStyling &&
}\n
\n )}\n \n {suffix && (\n \n {suffixStyling && (\n
\n )}\n {suffix}\n
\n )}\n {error && (\n \n \n \n \n \n
\n )}\n \n );\n },\n);\nInput.displayName = \"Input\";\nexport interface SearchInputProps\n extends Omit, \"children\"> {\n enablePrefixStyling?: boolean;\n}\nconst SearchInput = React.forwardRef(\n ({ enablePrefixStyling = false, ...props }, ref) => {\n return (\n \n \n \n }\n prefixStyling={enablePrefixStyling}\n className={cn(\"rounded-full\", props.className)}\n ref={ref}\n {...props}\n />\n );\n },\n);\nSearchInput.displayName = \"SearchInput\";\nexport { Input, SearchInput };\n" + "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\nexport interface InputProps\n extends Omit<\n React.InputHTMLAttributes,\n \"children\" | \"prefix\" | \"suffix\"\n > {\n \n className?: string;\n \n iclassName?: string;\n \n prefix?: React.ReactNode | string;\n \n suffix?: React.ReactNode | string;\n \n prefixStyling?: boolean;\n \n label?: string;\n \n suffixStyling?: boolean;\n \n error?: string;\n}\n\nconst Input = React.forwardRef(\n (\n {\n className,\n iclassName,\n prefix,\n suffix,\n prefixStyling = true,\n suffixStyling = true,\n label,\n type,\n error,\n ...props\n },\n ref,\n ) => {\n \n const prefixRef = React.useRef(null);\n const suffixRef = React.useRef(null);\n \n const [prefixWidth, setPrefixWidth] = React.useState(0);\n const [suffixWidth, setSuffixWidth] = React.useState(0);\n \n React.useEffect(() => {\n if (prefixRef.current) {\n setPrefixWidth(prefixRef.current.offsetWidth);\n }\n if (suffixRef.current) {\n setSuffixWidth(suffixRef.current.offsetWidth);\n }\n }, [prefix, suffix]);\n\n return (\n
\n {label && (\n \n {label}\n \n )}\n {prefix && (\n \n {prefix}\n {prefixStyling &&
}\n
\n )}\n \n {suffix && (\n \n {suffixStyling && (\n
\n )}\n {suffix}\n
\n )}\n {error && (\n \n \n \n \n \n
\n )}\n \n );\n },\n);\n\nInput.displayName = \"Input\";\n\nexport interface SearchInputProps\n extends Omit, \"children\"> {\n \n enablePrefixStyling?: boolean;\n}\n\nconst SearchInput = React.forwardRef(\n ({ enablePrefixStyling = false, ...props }, ref) => {\n return (\n \n \n \n }\n prefixStyling={enablePrefixStyling}\n className={cn(\"rounded-full\", props.className)}\n ref={ref}\n {...props}\n />\n );\n },\n);\n\nSearchInput.displayName = \"SearchInput\";\n\nexport { Input, SearchInput };\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/components/select.json b/apps/www/public/registry/components/select.json index 88f4c64..f4d4c18 100644 --- a/apps/www/public/registry/components/select.json +++ b/apps/www/public/registry/components/select.json @@ -4,7 +4,7 @@ "files": [ { "name": "select.tsx", - "content": "\"use client\";\nimport * as React from \"react\";\nimport {\n CaretSortIcon,\n CheckIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from \"@radix-ui/react-icons\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { cn } from \"@/utils/cn\";\nconst Select = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\nconst SelectTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n span]:line-clamp-1\",\n className,\n )}\n {...props}\n >\n {children}\n \n \n \n \n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n));\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName;\nconst SelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n \n \n \n \n {children}\n \n \n \n \n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\nconst SelectLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\nconst SelectItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\nconst SelectSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n SelectScrollUpButton,\n SelectScrollDownButton,\n};\n" + "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n CaretSortIcon,\n CheckIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from \"@radix-ui/react-icons\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { cn } from \"@/utils/cn\";\n\nconst Select = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n span]:line-clamp-1\",\n className,\n )}\n {...props}\n >\n {children}\n \n \n \n \n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n));\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName;\n\nconst SelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n \n \n \n \n {children}\n \n \n \n \n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n SelectScrollUpButton,\n SelectScrollDownButton,\n};\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/components/spinner.json b/apps/www/public/registry/components/spinner.json index 44b414d..8180f32 100644 --- a/apps/www/public/registry/components/spinner.json +++ b/apps/www/public/registry/components/spinner.json @@ -3,7 +3,7 @@ "files": [ { "name": "spinner.tsx", - "content": "import React from \"react\";\nimport { cn } from \"@/utils/cn\";\ntype SpinnerProps = React.ComponentPropsWithoutRef<\"div\"> & {\n className?: string;\n size?: number;\n};\nconst Spinner = React.forwardRef(\n ({ className, size, ...props }, ref) => {\n const computeDelay = (i: number): string => `${-1.2 + i * 0.1}s`;\n const computeRotation = (i: number): string => `${i * 30}deg`;\n return (\n \n
\n {[...Array(12)].map((_, i) => (\n \n ))}\n
\n \n );\n },\n);\nSpinner.displayName = \"Spinner\";\nexport { Spinner };\n" + "content": "import React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\ntype SpinnerProps = React.ComponentPropsWithoutRef<\"div\"> & {\n \n className?: string;\n \n size?: number;\n};\n\n\nconst Spinner = React.forwardRef(\n ({ className, size, ...props }, ref) => {\n \n const computeDelay = (i: number): string => `${-1.2 + i * 0.1}s`;\n\n \n const computeRotation = (i: number): string => `${i * 30}deg`;\n\n return (\n \n
\n {[...Array(12)].map((_, i) => (\n \n ))}\n
\n \n );\n },\n);\n\nSpinner.displayName = \"Spinner\";\n\nexport { Spinner };\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/components/switch.json b/apps/www/public/registry/components/switch.json index 5378383..2f278e9 100644 --- a/apps/www/public/registry/components/switch.json +++ b/apps/www/public/registry/components/switch.json @@ -4,7 +4,7 @@ "files": [ { "name": "switch.tsx", - "content": "\"use client\";\nimport * as React from \"react\";\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\nimport { cn } from \"@/utils/cn\";\nconst Switch = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n));\nSwitch.displayName = SwitchPrimitives.Root.displayName;\nexport { Switch };\n" + "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\n\nimport { cn } from \"@/utils/cn\";\n\nconst Switch = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n));\nSwitch.displayName = SwitchPrimitives.Root.displayName;\n\nexport { Switch };\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/components/tabs.json b/apps/www/public/registry/components/tabs.json new file mode 100644 index 0000000..f5a5617 --- /dev/null +++ b/apps/www/public/registry/components/tabs.json @@ -0,0 +1,11 @@ +{ + "name": "tabs", + "dependencies": ["@radix-ui/react-tabs"], + "files": [ + { + "name": "tabs.tsx", + "content": "\"use client\";\n\nimport type {\n TabsContentProps,\n TabsProps as BaseProps,\n} from \"@radix-ui/react-tabs\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport React, { useMemo, useState, useCallback, useLayoutEffect } from \"react\";\nimport { cn } from \"@/utils/cn\";\n\nconst TabsPrimitiveRoot = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>((props, ref) => {\n return (\n \n );\n});\n\nTabsPrimitiveRoot.displayName = \"TabsPrimitiveRoot\";\n\nconst TabsList = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>((props, ref) => (\n \n));\nTabsList.displayName = \"TabsList\";\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>((props, ref) => (\n \n));\nTabsTrigger.displayName = \"TabsTrigger\";\n\nconst TabsContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>((props, ref) => (\n \n));\nTabsContent.displayName = \"TabsContent\";\n\ntype ChangeListener = (v: string) => void;\nconst listeners = new Map();\n\nfunction addChangeListener(id: string, listener: ChangeListener): void {\n const list = listeners.get(id) ?? [];\n list.push(listener);\n listeners.set(id, list);\n}\n\nfunction removeChangeListener(id: string, listener: ChangeListener): void {\n const list = listeners.get(id) ?? [];\n listeners.set(\n id,\n list.filter((item) => item !== listener),\n );\n}\n\nfunction update(id: string, v: string, persist: boolean): void {\n listeners.get(id)?.forEach((item) => {\n item(v);\n });\n\n if (persist) localStorage.setItem(id, v);\n else sessionStorage.setItem(id, v);\n}\n\nexport interface TabsProps extends BaseProps {\n \n groupId?: string;\n \n persist?: boolean;\n \n defaultIndex?: number;\n \n disabled?: boolean;\n \n items?: string[];\n}\n\nexport function Tabs({\n groupId,\n items = [],\n persist = false,\n defaultIndex = 0,\n disabled = false,\n ...props\n}: TabsProps): React.ReactElement {\n const values = useMemo(() => items.map((item) => toValue(item)), [items]);\n const [value, setValue] = useState(values[defaultIndex]);\n\n useLayoutEffect(() => {\n if (!groupId) return;\n\n const onUpdate: ChangeListener = (v) => {\n if (values.includes(v)) setValue(v);\n };\n\n const previous = persist\n ? localStorage.getItem(groupId)\n : sessionStorage.getItem(groupId);\n\n if (previous) onUpdate(previous);\n addChangeListener(groupId, onUpdate);\n return () => {\n removeChangeListener(groupId, onUpdate);\n };\n }, [groupId, persist, values]);\n\n const onValueChange = useCallback(\n (v: string) => {\n if (groupId) {\n update(groupId, v, persist);\n } else {\n setValue(v);\n }\n },\n [groupId, persist],\n );\n\n return (\n \n \n {values.map((v, i) => (\n \n {items[i]}\n \n ))}\n \n {props.children}\n \n );\n}\n\nfunction toValue(v: string): string {\n return v.toLowerCase().replace(/\\s/, \"-\");\n}\n\nexport function Tab({\n value,\n className,\n ...props\n}: TabsContentProps): React.ReactElement {\n return (\n figure:only-child]:-m-4 [&>figure:only-child]:rounded-none [&>figure:only-child]:border-none\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { TabsList, TabsTrigger, TabsContent };\n" + } + ], + "type": "components:ui" +} diff --git a/apps/www/public/registry/components/textarea.json b/apps/www/public/registry/components/textarea.json index e2c7787..771cc0f 100644 --- a/apps/www/public/registry/components/textarea.json +++ b/apps/www/public/registry/components/textarea.json @@ -3,7 +3,7 @@ "files": [ { "name": "textarea.tsx", - "content": "\"use client\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nexport interface TextAreaProps\n extends Omit<\n React.InputHTMLAttributes,\n \"children\" | \"prefix\" | \"suffix\"\n > {\n className?: string;\n label?: string;\n error?: string;\n}\nconst Textarea = React.forwardRef(\n ({ className, label, error, ...props }, ref) => {\n return (\n
\n {label && (\n \n {label}\n \n )}\n \n {error && (\n \n \n \n \n \n
\n )}\n \n );\n },\n);\nTextarea.displayName = \"Textarea\";\nexport { Textarea };\n" + "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nexport interface TextAreaProps\n extends Omit<\n React.InputHTMLAttributes,\n \"children\" | \"prefix\" | \"suffix\"\n > {\n \n className?: string;\n \n label?: string;\n \n error?: string;\n}\n\nconst Textarea = React.forwardRef(\n ({ className, label, error, ...props }, ref) => {\n return (\n
\n {label && (\n \n {label}\n \n )}\n \n {error && (\n \n \n \n \n \n
\n )}\n \n );\n },\n);\n\nTextarea.displayName = \"Textarea\";\n\nexport { Textarea };\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/components/tooltip.json b/apps/www/public/registry/components/tooltip.json index f75b2a9..c6a4de1 100644 --- a/apps/www/public/registry/components/tooltip.json +++ b/apps/www/public/registry/components/tooltip.json @@ -4,7 +4,7 @@ "files": [ { "name": "tooltip.tsx", - "content": "\"use client\";\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"@/utils/cn\";\nconst TooltipProvider = TooltipPrimitive.Provider;\nconst Tooltip = TooltipPrimitive.Root;\nconst TooltipTrigger = TooltipPrimitive.Trigger;\nconst TooltipContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, sideOffset = 5, ...props }, ref) => (\n \n {props.children}\n \n \n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n" + "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"@/utils/cn\";\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\nconst Tooltip = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, sideOffset = 5, ...props }, ref) => (\n \n {props.children}\n \n \n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/index.json b/apps/www/public/registry/index.json index f101263..49cb958 100644 --- a/apps/www/public/registry/index.json +++ b/apps/www/public/registry/index.json @@ -44,6 +44,12 @@ "files": ["switch.tsx"], "type": "components:ui" }, + { + "name": "tabs", + "dependencies": ["@radix-ui/react-tabs"], + "files": ["tabs.tsx"], + "type": "components:ui" + }, { "name": "textarea", "files": ["textarea.tsx"], diff --git a/apps/www/registry/ui.ts b/apps/www/registry/ui.ts index fd7600a..6f25c1a 100644 --- a/apps/www/registry/ui.ts +++ b/apps/www/registry/ui.ts @@ -46,6 +46,12 @@ export const ui: Registry = [ dependencies: ["@radix-ui/react-icons", "@radix-ui/react-select"], files: ["switch.tsx"], }, + { + name: "tabs", + type: "components:ui", + dependencies: ["@radix-ui/react-tabs"], + files: ["tabs.tsx"], + }, { name: "textarea", type: "components:ui", diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts index 9713ff9..5153456 100644 --- a/apps/www/scripts/build-registry.mts +++ b/apps/www/scripts/build-registry.mts @@ -98,15 +98,14 @@ async function buildStyles(registry: Registry) { "utf8", ); - // Remove single-line comments - content = content.replace(/\/\/.*$/gm, ""); + // Remove single-line comments, excluding URLs + content = content.replace(/(^|[^:])\/\/.*$/gm, "$1"); // Remove multi-line comments content = content.replace(/\/\*[\s\S]*?\*\//gm, ""); - // ! it also removeing white lines :( , will fix // Remove lines that are completely empty (after removing comments) - content = content.replace(/^\s*\n/gm, ""); + // content = content.replace(/^\s*\n/gm, ""); return { name: basename(file), diff --git a/packages/cli/src/utils/index.ts b/packages/cli/src/utils/index.ts index a6fd00d..0507bec 100644 --- a/packages/cli/src/utils/index.ts +++ b/packages/cli/src/utils/index.ts @@ -9,7 +9,7 @@ export function getPackageInfo() { } export function config() { - // const baseUrl = "http://localhost:3000"; + // const baseUrl = "http://localhost:3000"; const baseUrl = process.env.NODE_ENV === "development" diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts index 4163f95..3d0969f 100644 --- a/packages/cli/src/utils/templates.ts +++ b/packages/cli/src/utils/templates.ts @@ -8,8 +8,7 @@ export const UTILS_JS = `import { ClassNameValue, twMerge } from "tailwind-merge export const cn = twMerge; `; -export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */ -module.exports = { +export const TAILWIND_CONFIG = `const config = { darkMode: ["class"], content: [ "./pages/**/*.{<%- extension %>,<%- extension %>x}", @@ -17,7 +16,7 @@ module.exports = { "./app/**/*.{<%- extension %>,<%- extension %>x}", "./src/**/*.{<%- extension %>,<%- extension %>x}", ], - prefix: "<%- prefix %>", + prefix: "", theme: { container: { center: true, @@ -27,6 +26,46 @@ module.exports = { }, }, extend: { + colors: { + border: "#E0E0E0", + input: "#E0E0E0", + ring: "#0F0F0F", + background: "#FAFAFA", + foreground: "#0F0F0F", + primary: { + DEFAULT: "#1A1A1A", + foreground: "#FAFAFA", + }, + secondary: { + DEFAULT: "#FAFAFA", + foreground: "#1A1A1A", + }, + destructive: { + DEFAULT: "#E63946", + foreground: "#FAFAFA", + }, + muted: { + DEFAULT: "#F5F5F5", + foreground: "#737373", + }, + accent: { + DEFAULT: "#F0F0F0", + foreground: "#1A1A1A", + }, + popover: { + DEFAULT: "#FFFFFF", + foreground: "#262626", + }, + card: { + DEFAULT: "#FFFEFE", + foreground: "#0F0F0F", + }, + }, + borderRadius: { + lg: "0.5rem", + md: "calc(0.5rem - 2px)", + sm: "calc(0.5rem - 4px)", + }, keyframes: { "accordion-down": { from: { height: "0" }, @@ -50,6 +89,8 @@ module.exports = { }, plugins: [require("tailwindcss-animate")], }; + +export default config; `; export const TAILWIND_CONFIG_WITH_VARIABLES = `/** @type {import('tailwindcss').Config} */ @@ -128,10 +169,12 @@ module.exports = { }, }, plugins: [require("tailwindcss-animate")], -}`; +} +`; -export const TAILWIND_CONFIG_TS = `/** @type {import('tailwindcss').Config} */ -module.exports = { +export const TAILWIND_CONFIG_TS = `import type { Config } from "tailwindcss"; + +const config = { darkMode: ["class"], content: [ "./pages/**/*.{<%- extension %>,<%- extension %>x}", @@ -139,7 +182,7 @@ module.exports = { "./app/**/*.{<%- extension %>,<%- extension %>x}", "./src/**/*.{<%- extension %>,<%- extension %>x}", ], - prefix: "<%- prefix %>", + prefix: "", theme: { container: { center: true, @@ -149,6 +192,46 @@ module.exports = { }, }, extend: { + colors: { + border: "#E0E0E0", + input: "#E0E0E0", + ring: "#0F0F0F", + background: "#FAFAFA", + foreground: "#0F0F0F", + primary: { + DEFAULT: "#1A1A1A", + foreground: "#FAFAFA", + }, + secondary: { + DEFAULT: "#FAFAFA", + foreground: "#1A1A1A", + }, + destructive: { + DEFAULT: "#E63946", + foreground: "#FAFAFA", + }, + muted: { + DEFAULT: "#F5F5F5", + foreground: "#737373", + }, + accent: { + DEFAULT: "#F0F0F0", + foreground: "#1A1A1A", + }, + popover: { + DEFAULT: "#FFFFFF", + foreground: "#262626", + }, + card: { + DEFAULT: "#FFFEFE", + foreground: "#0F0F0F", + }, + }, + borderRadius: { + lg: "0.5rem", + md: "calc(0.5rem - 2px)", + sm: "calc(0.5rem - 4px)", + }, keyframes: { "accordion-down": { from: { height: "0" }, @@ -171,20 +254,22 @@ module.exports = { }, }, plugins: [require("tailwindcss-animate")], -}; +} satisfies Config; + +export default config; `; -export const TAILWIND_CONFIG_TS_WITH_VARIABLES = `import type { Config } from "tailwindcss" +export const TAILWIND_CONFIG_TS_WITH_VARIABLES = `import type { Config } from "tailwindcss"; const config = { darkMode: ["class"], content: [ - './pages/**/*.{<%- extension %>,<%- extension %>x}', - './components/**/*.{<%- extension %>,<%- extension %>x}', - './app/**/*.{<%- extension %>,<%- extension %>x}', - './src/**/*.{<%- extension %>,<%- extension %>x}', - ], - prefix: "<%- prefix %>", + "./pages/**/*.{<%- extension %>,<%- extension %>x}", + "./components/**/*.{<%- extension %>,<%- extension %>x}", + "./app/**/*.{<%- extension %>,<%- extension %>x}", + "./src/**/*.{<%- extension %>,<%- extension %>x}", + ], + prefix: "", theme: { container: { center: true, @@ -243,17 +328,23 @@ const config = { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, + spinner: { + from: { opacity: "1" }, + to: { opacity: "0.15" }, + }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", + spinner: "spinner 1.2s linear infinite", }, }, }, plugins: [require("tailwindcss-animate")], -} satisfies Config +} satisfies Config; -export default config`; +export default config; +`; export const GLOBLES_CSS_FILES = `@tailwind base; @tailwind components; @@ -261,58 +352,49 @@ export const GLOBLES_CSS_FILES = `@tailwind base; @layer base { :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; + --background: 0 0% 98%; + --foreground: 0 0% 3.9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; --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%; + --popover-foreground: 0 0% 15.1%; + --card: 0 0% 99.7%; + --card-foreground: 0 0% 3.9%; + --border: 0 0% 89.8%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --accent: 0 0% 94.1%; + --accent-foreground: 0 0% 9%; --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%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; --radius: 0.5rem; - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - --chart-3: 197 37% 24%; - --chart-4: 43 74% 66%; - --chart-5: 27 87% 67%; } .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%; + --background: 0 0% 3.9%; + --foreground: 0 0% 94%; + --muted: 0 0% 12.9%; + --muted-foreground: 0 0% 60.9%; + --card: 0 0% 6%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 7%; + --popover-foreground: 0 0% 88%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 12.9%; + --secondary-foreground: 0 0% 98%; + --accent: 0 0% 12.9%; + --accent-foreground: 0 0% 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%; - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; } } diff --git a/packages/ui/src/components/avatar.tsx b/packages/ui/src/components/avatar.tsx index 41dc75a..bbf3a5b 100644 --- a/packages/ui/src/components/avatar.tsx +++ b/packages/ui/src/components/avatar.tsx @@ -81,7 +81,6 @@ const Avatar = React.forwardRef( }, ); Avatar.displayName = "Avatar"; - /** * Props for the AvatarGroup component. */ @@ -135,7 +134,6 @@ type AvatarGroupProps = Omit< * */ limit?: number; - aClassName?: string; lnClassName?: string; }; @@ -180,7 +178,6 @@ const AvatarGroup = React.forwardRef( }, ); AvatarGroup.displayName = "AvatarGroup"; - /** * Props for the AvatarWithBadge component. */ @@ -249,7 +246,6 @@ type AvatarWithBadgeProps = Omit< * */ badgeSrc: string; - iClassName?: string; sClassName?: string; }; diff --git a/packages/ui/src/components/badge.tsx b/packages/ui/src/components/badge.tsx index b8d5bc7..4226873 100644 --- a/packages/ui/src/components/badge.tsx +++ b/packages/ui/src/components/badge.tsx @@ -94,7 +94,6 @@ export interface BadgeProps */ icon?: React.ReactNode; } - /** * A badge component used to display a small notification or status indicator. * diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx index 6c191b9..396a496 100644 --- a/packages/ui/src/components/button.tsx +++ b/packages/ui/src/components/button.tsx @@ -50,7 +50,6 @@ export interface ButtonProps * ``` */ asChild?: boolean; - /** * Element to render before the button text. * @type {React.ReactNode} @@ -62,7 +61,6 @@ export interface ButtonProps * ``` */ prefix?: React.ReactNode; - /** * Element to render after the button text. * @type {React.ReactNode} @@ -74,7 +72,6 @@ export interface ButtonProps * ``` */ suffix?: React.ReactNode; - /** * Disable the button. * @type {boolean} @@ -86,7 +83,6 @@ export interface ButtonProps * ``` */ disabled?: boolean; - /** * Show loading spinner inside the button. * @type {boolean} @@ -99,7 +95,6 @@ export interface ButtonProps */ loading?: boolean; } - /** * A customizable button component with different variants and sizes. * @@ -140,7 +135,10 @@ export const Button = React.forwardRef( return (
) : ( @@ -67,8 +65,8 @@ const Checkbox = React.forwardRef< diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx index 52f481c..58e0c8c 100644 --- a/packages/ui/src/components/input.tsx +++ b/packages/ui/src/components/input.tsx @@ -1,9 +1,7 @@ "use client"; import * as React from "react"; - import { cn } from "@/utils/cn"; - /** * Props for the Input component. */ @@ -24,7 +22,6 @@ export interface InputProps * ``` */ className?: string; - /** * Additional class names to apply to the input element. * @@ -37,7 +34,6 @@ export interface InputProps * ``` */ iclassName?: string; - /** * Node or string to render as prefix inside the input container. * @@ -50,7 +46,6 @@ export interface InputProps * ``` */ prefix?: React.ReactNode | string; - /** * Node or string to render as suffix inside the input container. * @@ -63,7 +58,6 @@ export interface InputProps * ``` */ suffix?: React.ReactNode | string; - /** * Flag to apply styling to the prefix. * @@ -76,7 +70,6 @@ export interface InputProps * ``` */ prefixStyling?: boolean; - /** * Label for the input element. * @@ -89,7 +82,6 @@ export interface InputProps * ``` */ label?: string; - /** * Flag to apply styling to the suffix. * @@ -102,7 +94,6 @@ export interface InputProps * ``` */ suffixStyling?: boolean; - /** * error - Error message to display below the input. * @@ -116,7 +107,6 @@ export interface InputProps */ error?: string; } - /** * Input component with optional prefix and suffix. * @@ -153,13 +143,11 @@ const Input = React.forwardRef( */ const prefixRef = React.useRef(null); const suffixRef = React.useRef(null); - /** * State to store the width of the prefix and suffix elements. */ const [prefixWidth, setPrefixWidth] = React.useState(0); const [suffixWidth, setSuffixWidth] = React.useState(0); - // Update the width of the prefix and suffix elements when they change React.useEffect(() => { if (prefixRef.current) { @@ -234,8 +222,8 @@ const Input = React.forwardRef( style={{ color: "currentcolor" }} > @@ -251,7 +239,6 @@ const Input = React.forwardRef( ); Input.displayName = "Input"; - /** * Props for the SearchInput component. */ @@ -287,8 +274,8 @@ const SearchInput = React.forwardRef( } diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx index 41a7453..3fd6195 100644 --- a/packages/ui/src/components/select.tsx +++ b/packages/ui/src/components/select.tsx @@ -8,13 +8,10 @@ import { ChevronUpIcon, } from "@radix-ui/react-icons"; import * as SelectPrimitive from "@radix-ui/react-select"; - import { cn } from "@/utils/cn"; const Select = SelectPrimitive.Root; - const SelectGroup = SelectPrimitive.Group; - const SelectValue = SelectPrimitive.Value; const SelectTrigger = React.forwardRef< diff --git a/packages/ui/src/components/spinner.tsx b/packages/ui/src/components/spinner.tsx index 3486b32..57c4953 100644 --- a/packages/ui/src/components/spinner.tsx +++ b/packages/ui/src/components/spinner.tsx @@ -25,7 +25,6 @@ type SpinnerProps = React.ComponentPropsWithoutRef<"div"> & { */ size?: number; }; - /** * A spinner component to indicate loading state. * Displays a rotating spinner with configurable class names. diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx index 3d2d114..e49a425 100644 --- a/packages/ui/src/components/tabs.tsx +++ b/packages/ui/src/components/tabs.tsx @@ -97,7 +97,6 @@ export interface TabsProps extends BaseProps { * @default undefined */ groupId?: string; - /** * Enable persistent * @default false diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx index 176adf3..03797ba 100644 --- a/packages/ui/src/components/textarea.tsx +++ b/packages/ui/src/components/textarea.tsx @@ -3,7 +3,6 @@ import * as React from "react"; import { cn } from "@/utils/cn"; - /** * Props for the Input component. */ @@ -24,7 +23,6 @@ export interface TextAreaProps * ``` */ className?: string; - /** * Label for the input element. * @@ -37,7 +35,6 @@ export interface TextAreaProps * ``` */ label?: string; - /** * error - Error message to display below the input. * @@ -51,7 +48,6 @@ export interface TextAreaProps */ error?: string; } - /** * Input component with optional prefix and suffix. * @@ -95,8 +91,8 @@ const Textarea = React.forwardRef( style={{ color: "currentcolor" }} > diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx index 4e7b1d5..4d571f6 100644 --- a/packages/ui/src/components/tooltip.tsx +++ b/packages/ui/src/components/tooltip.tsx @@ -4,7 +4,6 @@ import * as React from "react"; import * as TooltipPrimitive from "@radix-ui/react-tooltip"; import { cn } from "@/utils/cn"; - /** * TooltipProvider component. * Provides context for all tooltip components. @@ -23,7 +22,6 @@ import { cn } from "@/utils/cn"; * */ const TooltipProvider = TooltipPrimitive.Provider; - /** * Tooltip component. * The root component for the tooltip. @@ -40,7 +38,6 @@ const TooltipProvider = TooltipPrimitive.Provider; * */ const Tooltip = TooltipPrimitive.Root; - /** * TooltipTrigger component. * The element that triggers the display of the tooltip. @@ -52,7 +49,6 @@ const Tooltip = TooltipPrimitive.Root; * */ const TooltipTrigger = TooltipPrimitive.Trigger; - /** * TooltipContent component. * The content of the tooltip that appears when the trigger is activated. diff --git a/tsconfig.json b/tsconfig.json index d72a9f3..994ca41 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,6 +2,8 @@ "$schema": "https://json.schemastore.org/tsconfig", "display": "Default", "compilerOptions": { + "target": "ESNext", + "module": "ESNext", "composite": false, "declaration": true, "declarationMap": true,