diff --git a/apps/core/app/test/page.tsx b/apps/core/app/test/page.tsx deleted file mode 100644 index 52b95704..00000000 --- a/apps/core/app/test/page.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Input } from "@repo/ui/components/input"; -import { - Select, - SelectContent, - SelectGroup, - SelectItem, - SelectLabel, - SelectTrigger, - SelectValue, -} from "@repo/ui/components/select"; - -const Page = () => { - return ( -
- - -
- ); -}; - -export default Page; diff --git a/apps/storybook/.storybook/preview.ts b/apps/storybook/.storybook/preview.ts index 7794cfe6..16adad4e 100644 --- a/apps/storybook/.storybook/preview.ts +++ b/apps/storybook/.storybook/preview.ts @@ -12,7 +12,7 @@ const preview: Preview = { { name: "dark", class: "dark", color: "#333333" }, ], }, - actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { matchers: { color: /(background|color)$/i, diff --git a/apps/storybook/src/stories/chip.stories.tsx b/apps/storybook/src/stories/chip.stories.tsx new file mode 100644 index 00000000..08f4a98c --- /dev/null +++ b/apps/storybook/src/stories/chip.stories.tsx @@ -0,0 +1,145 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { Chip } from "@repo/ui/components/chip"; +import { CheckCircle, XCircle } from "lucide-react"; + +const chipData = [ + { + label: "Default", + variants: ["primary", "warning", "danger", "success", "info", "secendery"], + sizes: ["sm", "md", "lg"], + disabled: false, + }, + { + label: "Disabled", + variants: ["primary", "warning", "danger", "success", "info", "secendery"], + sizes: ["sm", "md", "lg"], + disabled: true, + }, +]; + +const meta: Meta = { + title: "Components/Chip", + component: Chip, + tags: ["autodocs"], + argTypes: { + variant: { + control: "radio", + options: ["primary", "warning", "danger", "success", "info", "secendery"], + }, + size: { control: "radio", options: ["sm", "md", "lg"] }, + disabled: { control: "boolean" }, + iconLeft: { control: false }, + iconRight: { control: false }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Primary: Story = { + args: { + children: "Primary Chip", + variant: "primary", + }, +}; + +export const Warning: Story = { + args: { + children: "Warning Chip", + variant: "warning", + }, +}; + +export const Danger: Story = { + args: { + children: "Danger Chip", + variant: "danger", + }, +}; + +export const Success: Story = { + args: { + children: "Success Chip", + variant: "success", + }, +}; + +export const Info: Story = { + args: { + children: "Info Chip", + variant: "info", + }, +}; + +export const Sizes: Story = { + args: { + children: "Chip Size", + variant: "primary", + size: "md", + }, + parameters: { + docs: { + description: { + story: "Demonstrates different chip sizes.", + }, + }, + }, + render: (args) => ( +
+ + Small + + + Medium + + + Large + +
+ ), +}; + +export const WithIcons: Story = { + args: { + children: "Chip with Icons", + variant: "primary", + iconLeft: , + iconRight: , + }, +}; + +export const DisabledState: Story = { + args: { + children: "Disabled Chip", + variant: "primary", + disabled: true, + }, +}; + +export const AllChips: Story = { + render: () => ( +
+ {chipData.map((group, groupIndex) => ( +
+
+ {group.label} +
+ {group.variants.map((variant) => + group.sizes.map((size) => ( + } + iconRight={} + > + Chip + + )), + )} +
+ ))} +
+ ), +}; diff --git a/packages/icons/package.json b/packages/icons/package.json index c563bbbb..52895241 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -60,6 +60,7 @@ "./IllustrationIcon": "./src/components/IllustrationIcon.tsx", "./cinema4D": "./src/components/cinema4D.tsx", "./Asset3dIcon": "./src/components/3dAsset.tsx,", + "./curveX": "./src/components/curveX.tsx", "./x": "./src/components/x.tsx", "./menu-2": "./src/components/menu-2.tsx", "./serach": "./src/components/serach.tsx", diff --git a/packages/icons/src/components/curveX.tsx b/packages/icons/src/components/curveX.tsx new file mode 100644 index 00000000..e412fc47 --- /dev/null +++ b/packages/icons/src/components/curveX.tsx @@ -0,0 +1,32 @@ +import { IconProps } from "../types/types"; +const CurveXicon = (props: IconProps) => { + const { size = 24, color = "currentColor", ...resProps } = props; + + return ( + + + + + ); +}; + +export default CurveXicon; diff --git a/packages/ui/src/components/atoms/chip.tsx b/packages/ui/src/components/atoms/chip.tsx new file mode 100644 index 00000000..bbd310c0 --- /dev/null +++ b/packages/ui/src/components/atoms/chip.tsx @@ -0,0 +1,68 @@ +import { cva, type VariantProps } from "class-variance-authority"; +import React from "react"; +import { Slot } from "@radix-ui/react-slot"; + +const chipVariants = cva( + "inline-flex gap-2 items-center justify-center disabled:bg-ring disabled:text-gray-400 whitespace-nowrap text-foreground rounded-lg bg-primary px-3 py-2 text-sm font-medium transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-50", + { + variants: { + variant: { + primary: "bg-primary hover:bg-purple-600 ", + warning: "bg-warning hover:bg-amber-700 ", + danger: "bg-rose-500 hover:bg-rose-700 ", + success: "bg-success hover:bg-emerald-700 ", + info: "bg-sky-500 hover:bg-sky-700 ", + secendery: "bg-secondary hover:bg-zinc-900 ", + }, + size: { + sm: "h-9 text-sm", + md: "h-[52px]", + lg: "h-14 text-lg", + }, + }, + defaultVariants: { + variant: "primary", + size: "sm", + }, + }, +); +export interface ChipProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean; + iconLeft?: React.ReactNode; + iconRight?: React.ReactNode; +} + +const Chip = React.forwardRef( + ( + { + className, + variant, + size, + asChild, + iconLeft: IconLeft, + iconRight: IconRight, + children, + ...props + }, + ref, + ) => { + const Comp = asChild ? Slot : "button"; + return ( + + {IconLeft && {IconLeft}} + {children} + {IconRight && {IconRight}} + + ); + }, +); +Chip.displayName = "Chip"; + +export { Chip, chipVariants };