@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

package/src/components/tag.stories.tsx

@@ -0,0 +1,371 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Check, Circle, Star, X, Zap } from "lucide-react";
+import { Tag, type TagProps } from "./tag";
+
+const iconMap = {
+	check: <Check className="size-4" />,
+	star: <Star className="size-4" />,
+	zap: <Zap className="size-4" />,
+	circle: <Circle className="size-4" />,
+	x: <X className="size-4" />,
+} as const;
+
+type IconName = keyof typeof iconMap;
+
+interface TagWrapperProps extends Omit<TagProps, "icon"> {
+	icon?: IconName;
+}
+
+function TagWrapper({ icon = "check", children, ...props }: TagWrapperProps) {
+	return (
+		<Tag icon={iconMap[icon]} {...props}>
+			{children}
+		</Tag>
+	);
+}
+
+const meta = {
+	title: "Component/Tag",
+	component: TagWrapper,
+	parameters: {
+		layout: "centered",
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		shape: {
+			control: "select",
+			options: ["round", "square"],
+		},
+		size: {
+			control: "select",
+			options: ["big", "small"],
+		},
+		type: {
+			control: "select",
+			options: ["filled", "outlined"],
+		},
+		vibrance: {
+			control: "select",
+			options: ["vivid", "subtle"],
+		},
+		color: {
+			control: "select",
+			options: ["red", "yellow", "green", "blue", "gray", "contrast"],
+		},
+		showIcon: {
+			control: "boolean",
+		},
+		icon: {
+			control: "select",
+			options: ["check", "star", "zap", "circle", "x"],
+		},
+		children: {
+			control: "text",
+		},
+	},
+	args: {
+		children: "Tag",
+		shape: "round",
+		size: "big",
+		type: "filled",
+		vibrance: "vivid",
+		color: "green",
+		showIcon: true,
+		icon: "check",
+	},
+} satisfies Meta<typeof TagWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+	tags: ["!dev"],
+	render: ({ children, ...args }) => (
+		<TagWrapper {...args}>{children}</TagWrapper>
+	),
+} satisfies Story;
+
+export const Demo = {
+	tags: ["!autodocs"],
+	render: () => {
+		const colors = [
+			{ label: "Red", value: "red" },
+			{ label: "Yellow", value: "yellow" },
+			{ label: "Green", value: "green" },
+			{ label: "Blue", value: "blue" },
+			{ label: "Gray", value: "gray" },
+			{ label: "Contrast", value: "contrast" },
+		] as const;
+
+		return (
+			<div className="space-y-8">
+				{/* Filled Section */}
+				<div>
+					<h2 className="typo-h4 mb-4">Filled</h2>
+					<div className="overflow-x-auto">
+						<table className="border-collapse">
+							<thead>
+								<tr>
+									<th className="p-2 text-left border border-gray-200">
+										Color
+									</th>
+									<th
+										colSpan={4}
+										className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs"
+									>
+										Round
+									</th>
+									<th
+										colSpan={4}
+										className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs"
+									>
+										Square
+									</th>
+								</tr>
+								<tr>
+									<th className="p-2 border border-gray-200" />
+									<th className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs">
+										Big/Vivid
+									</th>
+									<th className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs">
+										Big/Subtle
+									</th>
+									<th className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs">
+										Small/Vivid
+									</th>
+									<th className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs">
+										Small/Subtle
+									</th>
+									<th className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs">
+										Big/Vivid
+									</th>
+									<th className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs">
+										Big/Subtle
+									</th>
+									<th className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs">
+										Small/Vivid
+									</th>
+									<th className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs">
+										Small/Subtle
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								{colors.map((color) => (
+									<tr key={color.value}>
+										<td className="p-2 typo-label border border-gray-200">
+											{color.label}
+										</td>
+										{/* Round */}
+										<td className="p-2 border border-gray-200 text-center">
+											<Tag
+												shape="round"
+												size="big"
+												type="filled"
+												vibrance="vivid"
+												color={color.value}
+												icon={<Check />}
+											>
+												Tag
+											</Tag>
+										</td>
+										<td className="p-2 border border-gray-200 text-center">
+											<Tag
+												shape="round"
+												size="big"
+												type="filled"
+												vibrance="subtle"
+												color={color.value}
+												icon={<Check />}
+											>
+												Tag
+											</Tag>
+										</td>
+										<td className="p-2 border border-gray-200 text-center">
+											<Tag
+												shape="round"
+												size="small"
+												type="filled"
+												vibrance="vivid"
+												color={color.value}
+												icon={<Check />}
+											>
+												Tag
+											</Tag>
+										</td>
+										<td className="p-2 border border-gray-200 text-center">
+											<Tag
+												shape="round"
+												size="small"
+												type="filled"
+												vibrance="subtle"
+												color={color.value}
+												icon={<Check />}
+											>
+												Tag
+											</Tag>
+										</td>
+										{/* Square */}
+										<td className="p-2 border border-gray-200 text-center">
+											<Tag
+												shape="square"
+												size="big"
+												type="filled"
+												vibrance="vivid"
+												color={color.value}
+												icon={<Check />}
+											>
+												Tag
+											</Tag>
+										</td>
+										<td className="p-2 border border-gray-200 text-center">
+											<Tag
+												shape="square"
+												size="big"
+												type="filled"
+												vibrance="subtle"
+												color={color.value}
+												icon={<Check />}
+											>
+												Tag
+											</Tag>
+										</td>
+										<td className="p-2 border border-gray-200 text-center">
+											<Tag
+												shape="square"
+												size="small"
+												type="filled"
+												vibrance="vivid"
+												color={color.value}
+												icon={<Check />}
+											>
+												Tag
+											</Tag>
+										</td>
+										<td className="p-2 border border-gray-200 text-center">
+											<Tag
+												shape="square"
+												size="small"
+												type="filled"
+												vibrance="subtle"
+												color={color.value}
+												icon={<Check />}
+											>
+												Tag
+											</Tag>
+										</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+				</div>
+
+				{/* Outlined Section */}
+				<div>
+					<h2 className="typo-h4 mb-4">Outlined</h2>
+					<div className="overflow-x-auto">
+						<table className="border-collapse">
+							<thead>
+								<tr>
+									<th className="p-2 text-left border border-gray-200">
+										Color
+									</th>
+									<th
+										colSpan={2}
+										className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs"
+									>
+										Round
+									</th>
+									<th
+										colSpan={2}
+										className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs"
+									>
+										Square
+									</th>
+								</tr>
+								<tr>
+									<th className="p-2 border border-gray-200" />
+									<th className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs">
+										Big
+									</th>
+									<th className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs">
+										Small
+									</th>
+									<th className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs">
+										Big
+									</th>
+									<th className="p-2 text-center border border-gray-200 bg-gray-50 typo-label-xs">
+										Small
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								{colors.map((color) => (
+									<tr key={color.value}>
+										<td className="p-2 typo-label border border-gray-200">
+											{color.label}
+										</td>
+										<td className="p-2 border border-gray-200 text-center">
+											<Tag
+												shape="round"
+												size="big"
+												type="outlined"
+												color={color.value}
+												icon={<Check />}
+											>
+												Tag
+											</Tag>
+										</td>
+										<td className="p-2 border border-gray-200 text-center">
+											<Tag
+												shape="round"
+												size="small"
+												type="outlined"
+												color={color.value}
+												icon={<Check />}
+											>
+												Tag
+											</Tag>
+										</td>
+										<td className="p-2 border border-gray-200 text-center">
+											<Tag
+												shape="square"
+												size="big"
+												type="outlined"
+												color={color.value}
+												icon={<Check />}
+											>
+												Tag
+											</Tag>
+										</td>
+										<td className="p-2 border border-gray-200 text-center">
+											<Tag
+												shape="square"
+												size="small"
+												type="outlined"
+												color={color.value}
+												icon={<Check />}
+											>
+												Tag
+											</Tag>
+										</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		);
+	},
+} satisfies Story;

package/src/components/tag.tsx

@@ -0,0 +1,236 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type React from "react";
+import { cn } from "../shadcn/lib/utils";
+
+const baseChipStyles = cn(
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"whitespace-nowrap",
+	"shrink-0",
+	"[&>svg]:pointer-events-none",
+	"[&>svg]:shrink-0",
+	"transition-colors",
+	"duration-200",
+);
+
+const iconBaseClasses = cn(
+	"flex",
+	"items-center",
+	"justify-center",
+	"shrink-0",
+	"[&>svg]:pointer-events-none",
+	"[&>svg]:shrink-0",
+);
+
+const iconSizeClasses = {
+	big: cn("[&>svg]:size-4"),
+	small: cn("[&>svg]:w-3", "[&>svg]:h-3"),
+};
+
+const tagVariants = cva(baseChipStyles, {
+	variants: {
+		shape: {
+			round: "rounded-full",
+			square: "rounded",
+		},
+		size: {
+			big: cn("gap-1", "typo-body"),
+			small: cn("gap-1", "typo-body-xs"),
+		},
+		type: {
+			filled: "",
+			outlined: "border bg-transparent",
+		},
+		vibrance: {
+			vivid: "",
+			subtle: "",
+		},
+		color: {
+			green: "",
+			gray: "",
+			red: "",
+			blue: "",
+			yellow: "",
+			contrast: "",
+		},
+	},
+	compoundVariants: [
+		// ============ SIZE + TYPE (padding compensation for border) ============
+		{
+			size: "big",
+			type: "filled",
+			class: "px-3 py-1",
+		},
+		{
+			size: "big",
+			type: "outlined",
+			class: "px-[11px] py-[3px]",
+		},
+		{
+			size: "small",
+			type: "filled",
+			class: "px-2 h-[22px]",
+		},
+		{
+			size: "small",
+			type: "outlined",
+			class: "px-[7px] h-[22px]",
+		},
+
+		// ============ FILLED VIVID ============
+		{
+			type: "filled",
+			color: "red",
+			vibrance: "vivid",
+			class: "bg-bg-error-primary_inverse text-fg-primary_on-brand",
+		},
+		{
+			type: "filled",
+			color: "yellow",
+			vibrance: "vivid",
+			class: "bg-bg-warning-primary_inverse text-fg-warning-primary",
+		},
+		{
+			type: "filled",
+			color: "green",
+			vibrance: "vivid",
+			class: "bg-fg-success-primary text-fg-primary_on-brand",
+		},
+		{
+			type: "filled",
+			color: "blue",
+			vibrance: "vivid",
+			class: "bg-bg-link text-fg-primary_on-brand",
+		},
+		{
+			type: "filled",
+			color: "gray",
+			vibrance: "vivid",
+			class: "bg-fg-tertiary text-fg-primary_on-brand",
+		},
+		{
+			type: "filled",
+			color: "contrast",
+			vibrance: "vivid",
+			class: "bg-bg-primary_inverse text-fg-primary_on-brand",
+		},
+
+		// ============ FILLED SUBTLE ============
+		{
+			type: "filled",
+			color: "red",
+			vibrance: "subtle",
+			class: "bg-bg-error-tertiary text-fg-error-primary",
+		},
+		{
+			type: "filled",
+			color: "yellow",
+			vibrance: "subtle",
+			class: "bg-bg-warning-secondary text-fg-warning-primary",
+		},
+		{
+			type: "filled",
+			color: "green",
+			vibrance: "subtle",
+			class: "bg-bg-success-secondary text-fg-success-primary",
+		},
+		{
+			type: "filled",
+			color: "blue",
+			vibrance: "subtle",
+			class: "bg-bg-info-primary text-fg-info-primary",
+		},
+		{
+			type: "filled",
+			color: "gray",
+			vibrance: "subtle",
+			class: "bg-bg-tertiary text-text-secondary",
+		},
+		{
+			type: "filled",
+			color: "contrast",
+			vibrance: "subtle",
+			class: "bg-bg-tertiary text-fg-primary",
+		},
+
+		// ============ OUTLINED (only vivid) ============
+		{
+			type: "outlined",
+			color: "red",
+			class: "border-border-error text-text-error-primary",
+		},
+		{
+			type: "outlined",
+			color: "yellow",
+			class: "border-fg-warning-primary text-text-warning-primary",
+		},
+		{
+			type: "outlined",
+			color: "green",
+			class: "border-border-success text-text-success-primary",
+		},
+		{
+			type: "outlined",
+			color: "blue",
+			class: "border-border-link text-text-link",
+		},
+		{
+			type: "outlined",
+			color: "gray",
+			class: "border-border-primary_hover text-fg-secondary",
+		},
+		{
+			type: "outlined",
+			color: "contrast",
+			class: "border-border-primary_hover text-fg-primary",
+		},
+	],
+	defaultVariants: {
+		shape: "round",
+		size: "big",
+		type: "filled",
+		vibrance: "vivid",
+		color: "green",
+	},
+});
+
+export type TagProps = {
+	icon?: React.ReactNode;
+	showIcon?: boolean;
+} & Omit<React.ComponentProps<"div">, "color"> &
+	VariantProps<typeof tagVariants>;
+
+export function Tag({
+	children,
+	shape,
+	size = "big",
+	type = "filled",
+	vibrance = "vivid",
+	color,
+	icon,
+	showIcon = true,
+	className,
+	...props
+}: TagProps) {
+	const shouldShowIcon = showIcon && icon;
+	const currentSize: "big" | "small" = size ?? "big";
+
+	return (
+		<div
+			data-slot="tag"
+			className={cn(
+				tagVariants({ shape, size, type, vibrance, color }),
+				className,
+			)}
+			{...props}
+		>
+			{shouldShowIcon && (
+				<div className={cn(iconBaseClasses, iconSizeClasses[currentSize])}>
+					{icon}
+				</div>
+			)}
+			<span>{children}</span>
+		</div>
+	);
+}