Use default names

.github/workflows/deploy-storybook.yml

@@ -41,11 +41,10 @@ jobs:
 
       - name: Upload Pages artifact
         uses: actions/upload-pages-artifact@v2
+        id: upload
         with:
           path: ./packages/ui/storybook-static
 
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
-        with:
-          artifact_name: github-pages

packages/ui/src/components/badge/Badge.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Badge } from './Badge';
+
+const meta: Meta<typeof Badge> = {
+  component: Badge,
+  tags: ['autodocs'],
+  title: 'Components/Badge',
+  args: {
+    children: 'Badge',
+    size: 'md',
+    outline: false,
+    disabled: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Basic: Story = {};
+export const Outline: Story = { args: { outline: true } };
+export const Disabled: Story = { args: { disabled: true } };

packages/ui/src/components/badge/Badge.styles.ts

@@ -0,0 +1,54 @@
+import { cva } from 'class-variance-authority';
+
+import { twOverrides } from '@/overrides';
+
+const defaultBorder = 'bg-none bg-transparent border';
+
+export const badgeDef = twOverrides(
+  {
+    badge:
+      'font-semibold inline-flex items-center justify-center border-0 transition-all',
+    variants: {
+      variant: {
+        primary:
+          'bg-primary text-primary-fg hover:bg-primary/80 active:bg-primary/90',
+        secondary:
+          'bg-secondary text-secondary-fg hover:bg-secondary/80 active:bg-secondary/90',
+        accent:
+          'bg-accent text-accent-fg hover:bg-accent/80 active:bg-accent/90 ring-accent/35',
+        success:
+          'bg-success text-success-fg hover:bg-success/80 active:bg-success/90',
+        danger:
+          'bg-danger text-danger-fg hover:bg-danger/80 active:bg-danger/90',
+        warning:
+          'bg-warning text-warning-fg hover:bg-warning/80 active:bg-warning/90',
+        ghost:
+          'text-foreground hover:bg-foreground/5 active:bg-foreground/10 ring-foreground/70',
+        link: 'text-foreground hover:text-foreground/70 active:text-foreground/90 underline-offset-4 hover:underline',
+      },
+      size: {
+        md: 'h-5 rounded-md px-2 text-xs',
+        sm: 'h-4 rounded px-1.5 text-xs',
+        lg: 'h-6 rounded-lg px-4 text-sm',
+      },
+      outline: {
+        primary: `${defaultBorder} border-primary text-primary hover:bg-primary/10 active:bg-primary/15`,
+        secondary: `${defaultBorder} border-secondary text-secondary hover:bg-secondary/10 active:bg-secondary/15`,
+        accent: `${defaultBorder} border-accent text-accent hover:bg-accent/10 active:bg-accent/15`,
+        success: `${defaultBorder} border-success text-success hover:bg-success/10 active:bg-success/15`,
+        danger: `${defaultBorder} border-danger text-danger hover:bg-danger/10 active:bg-danger/15`,
+        warning: `${defaultBorder} border-warning text-warning hover:bg-warning/10 active:bg-warning/15`,
+        ghost: `${defaultBorder} border-primary/25`,
+        link: null,
+      },
+      disabled: {
+        DEFAULT: 'opacity-65 cursor-not-allowed',
+      },
+    },
+  },
+  'badge',
+);
+
+export const badgeStyles = cva(badgeDef.badge, {
+  variants: badgeDef.variants,
+});

packages/ui/src/components/badge/Badge.tsx

@@ -0,0 +1,40 @@
+import { type VariantProps } from 'class-variance-authority';
+import { forwardRef, type ComponentProps } from 'react';
+
+import { cn } from '@/utils';
+
+import { badgeStyles } from './Badge.styles';
+
+export type BadgeProps = ComponentProps<'div'> &
+  Omit<VariantProps<typeof badgeStyles>, 'outline' | 'disabled'> & {
+    outline?: boolean;
+    disabled?: boolean;
+  };
+
+export const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
+  {
+    className,
+    variant = 'primary',
+    size = 'md',
+    outline = false,
+    disabled = false,
+    ...restProps
+  },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        badgeStyles({
+          variant,
+          size,
+          outline: outline && variant ? variant : null,
+          disabled: disabled ? 'DEFAULT' : null,
+          className,
+        }),
+      )}
+      {...restProps}
+    />
+  );
+});

packages/ui/src/overrides.ts

@@ -3,38 +3,17 @@ import { twMerge } from 'tailwind-merge';
 import type { PartialDeep } from 'type-fest';
 
 import type { avatarDef } from './components/avatar/Avatar.styles';
+import type { badgeDef } from './components/badge/Badge.styles';
 import type { buttonDef } from './components/button/Button.styles';
 
-// import type { alertDialogDef } from './alertDialog/AlertDialog';
-// import type { avatarDef } from './avatar/avatar.styles';
-// import type {
-//   badgeDef,
-//   buttonDef,
-//   dividerDef,
-//   inputDef,
-//   labelDef,
-//   tableDef,
-//   toastDef,
-//   tooltipDef,
-// } from './index';
-// import type { selectDef } from './select/select.styles';
-
 /**
  * This should hold types for all component style definitions
  * to allow building type for global overrides.
  */
 type ComponentOverridesDef = {
   button: typeof buttonDef;
   avatar: typeof avatarDef;
-  // badge: typeof badgeDef;
-  // divider: typeof dividerDef;
-  // table: typeof tableDef;
-  // input: typeof inputDef;
-  // label: typeof labelDef;
-  // toast: typeof toastDef;
-  // tooltip: typeof tooltipDef;
-  // select: typeof selectDef;
-  // alertDialog: typeof alertDialogDef;
+  badge: typeof badgeDef;
 };
 
 export type ComponentOverrides = PartialDeep<ComponentOverridesDef>;