Feat/58 chip (#172)

* feat: chip

* feat: working light mode chip with all variants

* feat: convert to button, touchup styles

* fix: convert active to a data attribute

* fix: focus visible

* fix: remove other sizes

* fix: remove null as a type

* fix: use native sizes

src/assets/build/plus.icon.tsx

@@ -0,0 +1,15 @@
+export const Plus = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 12 12"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="inherit"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6 2.5V6m0 0v3.5M6 6h3.5M6 6H2.5"
+    />
+  </svg>
+)

src/assets/index.ts

@@ -4,3 +4,4 @@ export * from './build/radio-selected.icon'
 export * from './build/user.icon'
 export * from './build/clear.icon'
 export * from './build/search.icon'
+export * from './build/plus.icon'

src/components/Chip/index.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { cva, VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { Plus } from '@/assets'
+
+const chipVariants = cva(
+  [
+    [
+      'inline-flex',
+      'rounded-full',
+      'shrink-0',
+      'items-center',
+      'justify-center',
+      'border border-2',
+      'font-semibold',
+      'leading-normal',
+      'text-foreground',
+      'focus-visible:outline-none',
+      'focus-visible:shadow-blue'
+    ],
+    [
+      'disabled:border-none',
+      'disabled:text-foreground-subtle',
+      'disabled:bg-background-subtle',
+      'dark:disabled:bg-background-subtle-dark',
+      'dark:disabled:text-foreground-subtle-dark'
+    ],
+    [
+      'data-[active]:bg-foreground',
+      'data-[active]:border-none',
+      'data-[active]:text-foreground-inverse',
+      'dark:data-[active]:bg-foreground-dark',
+      'dark:data-[active]:text-foreground-inverse-dark'
+    ]
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          'bg-background',
+          'border-border-subtle',
+          'dark:bg-background-dark',
+          'dark:border-border-subtle-dark',
+          'dark:text-foreground-dark'
+        ],
+        warning: ['bg-yellow-50', 'border-feedback-yellow'],
+        success: ['bg-green-50', 'border-feedback-green'],
+        error: ['bg-red-50', 'border-feedback-red'],
+        info: ['bg-blue-50', 'border-primary-600', 'dark:border-primary-600']
+      },
+      size: {
+        default: ['text-xs', 'px-2.5', 'py-2 h-[26px]', 'gap-1'],
+        lg: ['text-sm', 'pl-4', 'pr-3', 'py-1.5', 'h-[33px]', 'gap-1.5']
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+
+interface ChipProps
+  extends React.ComponentPropsWithRef<'button'>,
+    VariantProps<typeof chipVariants> {
+  active?: boolean
+}
+
+const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(
+  (
+    { className, variant, size, children, disabled, onClick, active, ...props },
+    ref
+  ) => {
+    return (
+      <button
+        onClick={onClick}
+        data-active={active}
+        className={cn(chipVariants({ variant, size }))}
+        disabled={disabled}
+        ref={ref}
+        {...props}
+      >
+        {children}
+        <div className="flex items-center justify-center w-6 h-6 p-2.5">
+          <Plus
+            className={cn(size == 'lg' ? 'h-4 w-4' : 'h-3 w-3', [
+              'stroke-current',
+              'shrink-0'
+            ])}
+          />
+        </div>
+      </button>
+    )
+  }
+)
+
+export { Chip, ChipProps }

src/index.ts

@@ -8,3 +8,4 @@ export * from './components/ButtonGroup'
 export * from './components/Tooltip'
 export * from './components/Input'
 export * from './components/Switch'
+export * from './components/Chip'

stories/Chip/Chip.stories.ts

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Chip } from '@/index'
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Components/Chip',
+  component: Chip,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered'
+  },
+  argTypes: {
+    size: {
+      options: ['default', 'lg']
+    }
+  }
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+} satisfies Meta<typeof Chip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    children: 'Hello, this is a chip'
+  }
+}
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    children: 'Hello, this is a chip'
+  }
+}
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    children: 'Hello, this is a chip'
+  }
+}
+export const Info: Story = {
+  args: {
+    variant: 'info',
+    children: 'Hello, this is a chip'
+  }
+}
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    children: 'Hello, this is a chip'
+  }
+}
+export const Active: Story = {
+  args: {
+    active: true,
+    children: 'Hello, this is a chip'
+  }
+}
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: 'Hello, this is a chip'
+  }
+}
+
+export const LargeDefault: Story = {
+  args: {
+    size: 'lg',
+    children: 'Hello, this is a chip'
+  }
+}
+export const LargeActive: Story = {
+  args: {
+    active: true,
+    size: 'lg',
+    children: 'Hello, this is a chip'
+  }
+}