Skip to content

Commit 48dc80c

Browse files
CahllagerfeldCahllagerfeld
authored
feat: tag component (#52)
1 parent dac3259 commit 48dc80c

File tree

7 files changed

+318
-0
lines changed

7 files changed

+318
-0
lines changed

‎.changeset/empty-cups-drop.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@zenml-io/react-component-library": minor
3+
---
4+
5+
add tag component

‎src/components/Button/index.ts‎ renamed to ‎src/components/Button/index.tsx‎

File renamed without changes.

‎src/components/Input/index.ts‎ renamed to ‎src/components/Input/index.tsx‎

File renamed without changes.

‎src/components/Tag/Tag.stories.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { Meta } from "@storybook/react";
2+
import { Tag } from "./index";
3+
import { StoryObj } from "@storybook/react";
4+
5+
const meta = {
6+
title: "Elements/Tag",
7+
component: Tag,
8+
argTypes: {
9+
rounded: {
10+
control: "boolean",
11+
defaultValue: true
12+
},
13+
size: {
14+
control: "select",
15+
defaultValue: "sm",
16+
options: ["sm", "xs"]
17+
},
18+
emphasis: {
19+
control: "select",
20+
defaultValue: "subtle",
21+
options: ["bold", "subtle", "minimal"]
22+
},
23+
color: {
24+
control: "select",
25+
defaultValue: "blue",
26+
options: [
27+
"grey",
28+
"purple",
29+
"green",
30+
"yellow",
31+
"red",
32+
"blue",
33+
"teal",
34+
"lime",
35+
"magenta",
36+
"turquoise",
37+
"orange"
38+
]
39+
}
40+
},
41+
parameters: {
42+
layout: "centered"
43+
},
44+
45+
tags: ["autodocs"]
46+
} satisfies Meta<typeof Tag>;
47+
48+
export default meta;
49+
50+
type Story = StoryObj<typeof meta>;
51+
52+
export const minimal: Story = {
53+
name: "Minimal",
54+
args: {
55+
size: "sm",
56+
rounded: true,
57+
emphasis: "minimal",
58+
color: "magenta",
59+
children: "Classified"
60+
}
61+
};
62+
63+
export const subtle: Story = {
64+
name: "Subtle",
65+
args: {
66+
size: "sm",
67+
rounded: true,
68+
emphasis: "subtle",
69+
color: "magenta",
70+
children: "Classified"
71+
}
72+
};
73+
74+
export const bold: Story = {
75+
name: "Bold",
76+
args: {
77+
size: "sm",
78+
rounded: true,
79+
emphasis: "bold",
80+
color: "magenta",
81+
children: "Classified"
82+
}
83+
};

‎src/components/Tag/Tag.tsx‎

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
import { VariantProps, cva } from "class-variance-authority";
2+
import React, { HTMLAttributes, forwardRef } from "react";
3+
import { cn } from "../../utilities";
4+
5+
export const tagVariants = cva("shrink-0 flex items-center justify-center gap-0.5 py-0.5 px-1", {
6+
variants: {
7+
rounded: { false: "rounded-md", true: "rounded-rounded" },
8+
size: { sm: "h-6 text-text-sm", xs: "h-5 text-text-xs" },
9+
emphasis: {
10+
bold: "",
11+
subtle: "border",
12+
minimal: "border"
13+
},
14+
color: {
15+
grey: "",
16+
purple: "",
17+
green: "",
18+
yellow: "",
19+
red: "",
20+
blue: "",
21+
teal: "",
22+
lime: "",
23+
magenta: "",
24+
turquoise: "",
25+
orange: ""
26+
}
27+
},
28+
compoundVariants: [
29+
// gray
30+
{
31+
emphasis: "bold",
32+
color: "grey",
33+
class: "bg-neutral-600 text-theme-text-negative"
34+
},
35+
{
36+
emphasis: "subtle",
37+
color: "grey",
38+
class: "border-theme-border-moderate text-theme-text-secondary"
39+
},
40+
{
41+
emphasis: "minimal",
42+
color: "grey",
43+
class: "border-theme-border-moderate text-theme-text-secondary"
44+
},
45+
// purple
46+
{
47+
emphasis: "bold",
48+
color: "purple",
49+
class: "bg-primary-400 text-theme-text-negative"
50+
},
51+
{
52+
emphasis: "subtle",
53+
color: "purple",
54+
class: "border-primary-100 text-theme-text-brand bg-primary-25 "
55+
},
56+
{
57+
emphasis: "minimal",
58+
color: "purple",
59+
class: "border-theme-border-moderate text-theme-text-brand"
60+
},
61+
// red
62+
{
63+
emphasis: "bold",
64+
color: "red",
65+
class: "bg-error-600 text-theme-text-negative"
66+
},
67+
{
68+
emphasis: "subtle",
69+
color: "red",
70+
class: "bg-error-50 border-error-200 text-error-800"
71+
},
72+
{
73+
emphasis: "minimal",
74+
color: "red",
75+
class: "border-theme-border-moderate text-error-800"
76+
},
77+
// green
78+
{
79+
emphasis: "bold",
80+
color: "green",
81+
class: "bg-success-600 text-theme-text-negative"
82+
},
83+
{
84+
emphasis: "subtle",
85+
color: "green",
86+
class: "bg-success-50 border-success-200 text-success-800"
87+
},
88+
{
89+
emphasis: "minimal",
90+
color: "green",
91+
class: "border-theme-border-moderate text-success-800"
92+
},
93+
// yellow
94+
{
95+
emphasis: "bold",
96+
color: "yellow",
97+
class: "bg-warning-400 text-warning-900"
98+
},
99+
{
100+
emphasis: "subtle",
101+
color: "yellow",
102+
class: "bg-warning-50 border-warning-200 text-warning-900"
103+
},
104+
{
105+
emphasis: "minimal",
106+
color: "yellow",
107+
class: "border-theme-border-moderate text-warning-900"
108+
},
109+
// blue
110+
{
111+
emphasis: "bold",
112+
color: "blue",
113+
class: "bg-blue-500 text-theme-text-negative"
114+
},
115+
{
116+
emphasis: "subtle",
117+
color: "blue",
118+
class: "bg-blue-25 border-blue-100 text-blue-700"
119+
},
120+
{
121+
emphasis: "minimal",
122+
color: "blue",
123+
class: "border-theme-border-moderate text-blue-700"
124+
},
125+
// teal
126+
{
127+
emphasis: "bold",
128+
color: "teal",
129+
class: "bg-teal-600 text-theme-text-negative"
130+
},
131+
{
132+
emphasis: "subtle",
133+
color: "teal",
134+
class: "bg-teal-25 border-teal-100 text-teal-600"
135+
},
136+
{
137+
emphasis: "minimal",
138+
color: "teal",
139+
class: "border-theme-border-moderate text-teal-600"
140+
},
141+
// lime
142+
{
143+
emphasis: "bold",
144+
color: "lime",
145+
class: "bg-lime-700 text-theme-text-negative"
146+
},
147+
{
148+
emphasis: "subtle",
149+
color: "lime",
150+
class: "bg-lime-25 border-lime-100 text-lime-700"
151+
},
152+
{
153+
emphasis: "minimal",
154+
color: "lime",
155+
class: "border-theme-border-moderate text-lime-700"
156+
},
157+
// magenta
158+
{
159+
emphasis: "bold",
160+
color: "magenta",
161+
class: "bg-magenta-500 text-theme-text-negative"
162+
},
163+
{
164+
emphasis: "subtle",
165+
color: "magenta",
166+
class: "bg-magenta-25 border-magenta-100 text-magenta-600"
167+
},
168+
{
169+
emphasis: "minimal",
170+
color: "magenta",
171+
class: "border-theme-border-moderate text-magenta-600"
172+
},
173+
// turquoise
174+
{
175+
emphasis: "bold",
176+
color: "turquoise",
177+
class: "bg-turquoise-500 text-theme-text-negative"
178+
},
179+
{
180+
emphasis: "subtle",
181+
color: "turquoise",
182+
class: "bg-turquoise-25 border-turquoise-100 text-turquoise-600"
183+
},
184+
{
185+
emphasis: "minimal",
186+
color: "turquoise",
187+
class: "border-theme-border-moderate text-turquoise-600"
188+
},
189+
// orange
190+
{
191+
emphasis: "bold",
192+
color: "orange",
193+
class: "bg-orange-400 text-theme-text-negative"
194+
},
195+
{
196+
emphasis: "subtle",
197+
color: "orange",
198+
class: "bg-orange-25 border-orange-100 text-orange-700"
199+
},
200+
{
201+
emphasis: "minimal",
202+
color: "orange",
203+
class: "border-theme-border-moderate text-orange-600"
204+
}
205+
],
206+
defaultVariants: {
207+
rounded: true,
208+
size: "sm"
209+
}
210+
});
211+
212+
export interface TagProps
213+
extends Omit<HTMLAttributes<HTMLDivElement>, "color">,
214+
VariantProps<typeof tagVariants> {}
215+
216+
export const Tag = forwardRef<HTMLDivElement, TagProps>(
217+
({ className, rounded, emphasis, color, size, ...rest }, ref) => {
218+
return (
219+
<div
220+
{...rest}
221+
className={cn(tagVariants({ rounded, emphasis, color, size }), className)}
222+
ref={ref}
223+
></div>
224+
);
225+
}
226+
);
227+
228+
Tag.displayName = "Tag";

‎src/components/Tag/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./Tag";

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ export * from "./Avatar";
66
export * from "./Skeleton";
77
export * from "./Dropdown";
88
export * from "./Table";
9+
export * from "./Tag";

0 commit comments

Comments
 (0)