From 5db92f92b45ade116fb377c1e07acc351bc5f29b Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Tue, 2 Apr 2024 08:04:36 +0000 Subject: [PATCH 1/3] feat: add tag component --- src/components/Tag/Tag.stories.tsx | 75 ++++++++++ src/components/Tag/Tag.tsx | 226 +++++++++++++++++++++++++++++ src/components/Tag/index.tsx | 1 + src/components/index.ts | 1 + 4 files changed, 303 insertions(+) create mode 100644 src/components/Tag/Tag.stories.tsx create mode 100644 src/components/Tag/Tag.tsx create mode 100644 src/components/Tag/index.tsx diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx new file mode 100644 index 0000000..efde147 --- /dev/null +++ b/src/components/Tag/Tag.stories.tsx @@ -0,0 +1,75 @@ +import { Meta } from "@storybook/react"; +import { Tag } from "./index"; +import { StoryObj } from "@storybook/react"; + +const meta = { + title: "Elements/Tag", + component: Tag, + argTypes: { + rounded: { + control: "boolean", + defaultValue: true + }, + emphasis: { + control: "select", + defaultValue: "subtle", + options: ["bold", "subtle", "minimal"] + }, + color: { + control: "select", + defaultValue: "blue", + options: [ + "grey", + "purple", + "green", + "yellow", + "red", + "blue", + "teal", + "lime", + "magenta", + "turquoise", + "orange" + ] + } + }, + parameters: { + layout: "centered" + }, + + tags: ["autodocs"] +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const minimal: Story = { + name: "Minimal", + args: { + rounded: true, + emphasis: "minimal", + color: "magenta", + children: "Classified" + } +}; + +export const subtle: Story = { + name: "Subtle", + args: { + rounded: true, + emphasis: "subtle", + color: "magenta", + children: "Classified" + } +}; + +export const bold: Story = { + name: "Bold", + args: { + rounded: true, + emphasis: "bold", + color: "magenta", + children: "Classified" + } +}; diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx new file mode 100644 index 0000000..ed36e52 --- /dev/null +++ b/src/components/Tag/Tag.tsx @@ -0,0 +1,226 @@ +import { VariantProps, cva } from "class-variance-authority"; +import React, { HTMLAttributes, forwardRef } from "react"; +import { cn } from "../../utilities"; + +export const tagVariants = cva("shrink-0 text-text-sm py-0.5 px-1", { + variants: { + rounded: { false: "rounded-md", true: "rounded-rounded" }, + emphasis: { + bold: "", + subtle: "border", + minimal: "border" + }, + color: { + grey: "", + purple: "", + green: "", + yellow: "", + red: "", + blue: "", + teal: "", + lime: "", + magenta: "", + turquoise: "", + orange: "" + } + }, + compoundVariants: [ + // gray + { + emphasis: "bold", + color: "grey", + class: "bg-neutral-600 text-theme-text-negative" + }, + { + emphasis: "subtle", + color: "grey", + class: "border-theme-border-moderate text-theme-text-secondary" + }, + { + emphasis: "minimal", + color: "grey", + class: "border-theme-border-moderate text-theme-text-secondary" + }, + // purple + { + emphasis: "bold", + color: "purple", + class: "bg-primary-400 text-theme-text-negative" + }, + { + emphasis: "subtle", + color: "purple", + class: "border-primary-100 text-theme-text-brand bg-primary-25 " + }, + { + emphasis: "minimal", + color: "purple", + class: "border-theme-border-moderate text-theme-text-brand" + }, + // red + { + emphasis: "bold", + color: "red", + class: "bg-error-600 text-theme-text-negative" + }, + { + emphasis: "subtle", + color: "red", + class: "bg-error-50 border-error-200 text-error-800" + }, + { + emphasis: "minimal", + color: "red", + class: "border-theme-border-moderate text-error-800" + }, + // green + { + emphasis: "bold", + color: "green", + class: "bg-success-600 text-theme-text-negative" + }, + { + emphasis: "subtle", + color: "green", + class: "bg-success-50 border-success-200 text-success-800" + }, + { + emphasis: "minimal", + color: "green", + class: "border-theme-border-moderate text-success-800" + }, + // yellow + { + emphasis: "bold", + color: "yellow", + class: "bg-warning-400 text-warning-900" + }, + { + emphasis: "subtle", + color: "yellow", + class: "bg-warning-50 border-warning-200 text-warning-900" + }, + { + emphasis: "minimal", + color: "yellow", + class: "border-theme-border-moderate text-warning-900" + }, + // blue + { + emphasis: "bold", + color: "blue", + class: "bg-blue-500 text-theme-text-negative" + }, + { + emphasis: "subtle", + color: "blue", + class: "bg-blue-25 border-blue-100 text-blue-700" + }, + { + emphasis: "minimal", + color: "blue", + class: "border-theme-border-moderate text-blue-700" + }, + // teal + { + emphasis: "bold", + color: "teal", + class: "bg-teal-600 text-theme-text-negative" + }, + { + emphasis: "subtle", + color: "teal", + class: "bg-teal-25 border-teal-100 text-teal-600" + }, + { + emphasis: "minimal", + color: "teal", + class: "border-theme-border-moderate text-teal-600" + }, + // lime + { + emphasis: "bold", + color: "lime", + class: "bg-lime-700 text-theme-text-negative" + }, + { + emphasis: "subtle", + color: "lime", + class: "bg-lime-25 border-lime-100 text-lime-700" + }, + { + emphasis: "minimal", + color: "lime", + class: "border-theme-border-moderate text-lime-700" + }, + // magenta + { + emphasis: "bold", + color: "magenta", + class: "bg-magenta-500 text-theme-text-negative" + }, + { + emphasis: "subtle", + color: "magenta", + class: "bg-magenta-25 border-magenta-100 text-magenta-600" + }, + { + emphasis: "minimal", + color: "magenta", + class: "border-theme-border-moderate text-magenta-600" + }, + // turquoise + { + emphasis: "bold", + color: "turquoise", + class: "bg-turquoise-500 text-theme-text-negative" + }, + { + emphasis: "subtle", + color: "turquoise", + class: "bg-turquoise-25 border-turquoise-100 text-turquoise-600" + }, + { + emphasis: "minimal", + color: "turquoise", + class: "border-theme-border-moderate text-turquoise-600" + }, + // orange + { + emphasis: "bold", + color: "orange", + class: "bg-orange-400 text-theme-text-negative" + }, + { + emphasis: "subtle", + color: "orange", + class: "bg-orange-25 border-orange-100 text-orange-700" + }, + { + emphasis: "minimal", + color: "orange", + class: "border-theme-border-moderate text-orange-600" + } + ], + defaultVariants: { + rounded: true + } +}); + +export interface TagProps + extends Omit, "color">, + VariantProps {} + +export const Tag = forwardRef( + ({ className, rounded, emphasis, color, ...rest }, ref) => { + return ( +
+ ); + } +); + +Tag.displayName = "Tag"; diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx new file mode 100644 index 0000000..5b4c58b --- /dev/null +++ b/src/components/Tag/index.tsx @@ -0,0 +1 @@ +export * from "./Tag"; diff --git a/src/components/index.ts b/src/components/index.ts index bbfadeb..6a96195 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -6,3 +6,4 @@ export * from "./Avatar"; export * from "./Skeleton"; export * from "./Dropdown"; export * from "./Table"; +export * from "./Tag"; From 80bfb33304887936d9d06c0fc6552e57018d191e Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Tue, 2 Apr 2024 08:05:05 +0000 Subject: [PATCH 2/3] chore: add changeset --- .changeset/empty-cups-drop.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/empty-cups-drop.md diff --git a/.changeset/empty-cups-drop.md b/.changeset/empty-cups-drop.md new file mode 100644 index 0000000..c5323e0 --- /dev/null +++ b/.changeset/empty-cups-drop.md @@ -0,0 +1,5 @@ +--- +"@zenml-io/react-component-library": minor +--- + +add tag component From 6657464cdd82513144907735b78a23c1a3c57e15 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Tue, 2 Apr 2024 08:42:49 +0000 Subject: [PATCH 3/3] feat: add different size --- src/components/Button/{index.ts => index.tsx} | 0 src/components/Input/{index.ts => index.tsx} | 0 src/components/Tag/Tag.stories.tsx | 8 ++++++++ src/components/Tag/Tag.tsx | 10 ++++++---- 4 files changed, 14 insertions(+), 4 deletions(-) rename src/components/Button/{index.ts => index.tsx} (100%) rename src/components/Input/{index.ts => index.tsx} (100%) diff --git a/src/components/Button/index.ts b/src/components/Button/index.tsx similarity index 100% rename from src/components/Button/index.ts rename to src/components/Button/index.tsx diff --git a/src/components/Input/index.ts b/src/components/Input/index.tsx similarity index 100% rename from src/components/Input/index.ts rename to src/components/Input/index.tsx diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx index efde147..a3ec10f 100644 --- a/src/components/Tag/Tag.stories.tsx +++ b/src/components/Tag/Tag.stories.tsx @@ -10,6 +10,11 @@ const meta = { control: "boolean", defaultValue: true }, + size: { + control: "select", + defaultValue: "sm", + options: ["sm", "xs"] + }, emphasis: { control: "select", defaultValue: "subtle", @@ -47,6 +52,7 @@ type Story = StoryObj; export const minimal: Story = { name: "Minimal", args: { + size: "sm", rounded: true, emphasis: "minimal", color: "magenta", @@ -57,6 +63,7 @@ export const minimal: Story = { export const subtle: Story = { name: "Subtle", args: { + size: "sm", rounded: true, emphasis: "subtle", color: "magenta", @@ -67,6 +74,7 @@ export const subtle: Story = { export const bold: Story = { name: "Bold", args: { + size: "sm", rounded: true, emphasis: "bold", color: "magenta", diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index ed36e52..1a72a18 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -2,9 +2,10 @@ import { VariantProps, cva } from "class-variance-authority"; import React, { HTMLAttributes, forwardRef } from "react"; import { cn } from "../../utilities"; -export const tagVariants = cva("shrink-0 text-text-sm py-0.5 px-1", { +export const tagVariants = cva("shrink-0 flex items-center justify-center gap-0.5 py-0.5 px-1", { variants: { rounded: { false: "rounded-md", true: "rounded-rounded" }, + size: { sm: "h-6 text-text-sm", xs: "h-5 text-text-xs" }, emphasis: { bold: "", subtle: "border", @@ -203,7 +204,8 @@ export const tagVariants = cva("shrink-0 text-text-sm py-0.5 px-1", { } ], defaultVariants: { - rounded: true + rounded: true, + size: "sm" } }); @@ -212,11 +214,11 @@ export interface TagProps VariantProps {} export const Tag = forwardRef( - ({ className, rounded, emphasis, color, ...rest }, ref) => { + ({ className, rounded, emphasis, color, size, ...rest }, ref) => { return (
);