feat: add badge button (#50)

- Add badge button

apps/nt-headless-ui/components/ui/badge/badge.spec.tsx

@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { Badge } from './badge'
+
+describe('Badge', () => {
+    it('renders with default variant', () => {
+        render(<Badge>Default Badge</Badge>)
+        const badgeElement = screen.getByText('Default Badge')
+        expect(badgeElement).toBeInTheDocument()
+        expect(badgeElement).toHaveClass(
+            'text-white bg-success text-xs',
+        )
+    })
+
+    it('renders with danger variant', () => {
+        render(<Badge variant="danger">Danger Badge</Badge>)
+        const badgeElement = screen.getByText('Danger Badge')
+        expect(badgeElement).toBeInTheDocument()
+        expect(badgeElement).toHaveClass(
+            'text-white bg-danger text-xs',
+        )
+    })
+
+    it('renders with warning variant', () => {
+        render(<Badge variant="warning">Warning Badge</Badge>)
+        const badgeElement = screen.getByText('Warning Badge')
+        expect(badgeElement).toBeInTheDocument()
+        expect(badgeElement).toHaveClass(
+            'text-white bg-warning text-xs',
+        )
+    })
+
+    it('renders with info variant', () => {
+        render(<Badge variant="info">Info Badge</Badge>)
+        const badgeElement = screen.getByText('Info Badge')
+        expect(badgeElement).toBeInTheDocument()
+        expect(badgeElement).toHaveClass('text-white bg-info text-xs')
+    })
+
+    it('renders with silver variant', () => {
+        render(<Badge variant="silver">Silver Badge</Badge>)
+        const badgeElement = screen.getByText('Silver Badge')
+        expect(badgeElement).toBeInTheDocument()
+        expect(badgeElement).toHaveClass(
+            'text-black bg-secondary-6 text-xs',
+        )
+    })
+
+    it('renders with rounded full', () => {
+        render(<Badge rounded>Rounded Badge</Badge>)
+        const badgeElement = screen.getByText('Rounded Badge')
+        expect(badgeElement).toBeInTheDocument()
+        expect(badgeElement).toHaveClass('rounded-full')
+    })
+
+    it('renders with rounded md', () => {
+        render(<Badge rounded={false}>Rounded Badge</Badge>)
+        const badgeElement = screen.getByText('Rounded Badge')
+        expect(badgeElement).toBeInTheDocument()
+        expect(badgeElement).toHaveClass('rounded-md')
+    })
+
+    it('renders with left icon', () => {
+        render(
+            <Badge icon={<span>Icon</span>} iconPosition="left">
+                Badge with Icon
+            </Badge>,
+        )
+        const badgeElement = screen.getByText('Badge with Icon')
+        const iconElement = screen.getByText('Icon')
+        expect(badgeElement).toBeInTheDocument()
+        expect(iconElement).toBeInTheDocument()
+    })
+
+    it('renders with right icon', () => {
+        render(
+            <Badge icon={<span>Icon</span>} iconPosition="right">
+                Badge with Icon
+            </Badge>,
+        )
+        const badgeElement = screen.getByText('Badge with Icon')
+        const iconElement = screen.getByText('Icon')
+        expect(badgeElement).toBeInTheDocument()
+        expect(iconElement).toBeInTheDocument()
+    })
+})

apps/nt-headless-ui/components/ui/badge/badge.stories.tsx

@@ -0,0 +1,63 @@
+import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { Badge, BadgeProps } from './badge'
+
+export default {
+    title: 'Components/Badge',
+    component: Badge,
+} as Meta
+
+const Template: StoryFn<BadgeProps> = (args: BadgeProps) => (
+    <Badge {...args}>Badge text</Badge>
+)
+
+export const Primary: StoryFn<BadgeProps> = Template.bind({})
+Primary.args = {
+    onClick: () => alert('Button clicked!'),
+}
+
+export const Danger: StoryFn<BadgeProps> = Template.bind({})
+Danger.args = {
+    onClick: () => alert('Button clicked!'),
+    variant: 'danger',
+}
+
+export const Warning: StoryFn<BadgeProps> = Template.bind({})
+Warning.args = {
+    onClick: () => alert('Button clicked!'),
+    variant: 'warning',
+}
+
+export const Info: StoryFn<BadgeProps> = Template.bind({})
+Info.args = {
+    onClick: () => alert('Button clicked!'),
+    variant: 'info',
+}
+
+export const Silver: StoryFn<BadgeProps> = Template.bind({})
+Silver.args = {
+    onClick: () => alert('Button clicked!'),
+    variant: 'silver',
+}
+
+export const WithIconLeft: StoryFn<BadgeProps> = Template.bind({})
+WithIconLeft.args = {
+    onClick: () => alert('Button with icon clicked!'),
+    icon: (
+        <span role="img" aria-label="icon">
+            🚀
+        </span>
+    ),
+}
+
+export const WithIconRight: StoryFn<BadgeProps> = Template.bind({})
+WithIconRight.args = {
+    onClick: () => alert('Button with icon clicked!'),
+    iconPosition: 'right',
+    icon: (
+        <span role="img" aria-label="icon">
+            🚀
+        </span>
+    ),
+}

apps/nt-headless-ui/components/ui/badge/badge.tsx

@@ -0,0 +1,62 @@
+import { cn } from '@/lib/utils'
+import { cva, VariantProps } from 'class-variance-authority'
+import React from 'react'
+
+const badgeVariants = cva(
+    'inline-flex items-center hover:cursor-pointer px-2.5 py-1.5',
+    {
+        variants: {
+            variant: {
+                default: 'text-white bg-success text-xs',
+                danger: 'text-white bg-danger text-xs',
+                warning: 'text-white bg-warning text-xs',
+                info: 'text-white bg-info text-xs',
+                silver: 'text-black bg-secondary-6 text-xs',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    },
+)
+
+export interface BadgeProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof badgeVariants> {
+    rounded?: boolean
+    icon?: React.ReactNode
+    iconPosition?: 'left' | 'right'
+}
+
+const Badge: React.FC<BadgeProps> = ({
+    children,
+    variant,
+    rounded = true,
+    className,
+    icon = null,
+    iconPosition = 'left',
+    ...props
+}) => {
+    return (
+        <div
+            className={cn(
+                badgeVariants({ variant }),
+                rounded ? 'rounded-full' : 'rounded-md',
+                className,
+            )}
+            {...props}
+        >
+            {icon && iconPosition === 'left' && (
+                <span className="mr-2">{icon}</span>
+            )}
+            {children}
+            {icon && iconPosition === 'right' && (
+                <span className="ml-2">{icon}</span>
+            )}
+        </div>
+    )
+}
+
+Badge.displayName = 'Badge'
+
+export { Badge }

apps/nt-headless-ui/package.json

@@ -9,7 +9,7 @@
         "lint": "next lint",
         "dev": "storybook dev -p 6006 -c .storybook",
         "build-storybook": "storybook -c .storybook -o dist/storybook",
-        "test": "npx vitest"
+        "test": "pnpm vitest"
     },
     "dependencies": {
         "@radix-ui/react-slot": "^1.1.1",

apps/nt-headless-ui/vite.config.ts

@@ -1,6 +1,6 @@
 import react from '@vitejs/plugin-react'
 import path from 'path'
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
     resolve: {
@@ -13,5 +13,9 @@ export default defineConfig({
         globals: true,
         environment: 'jsdom',
         setupFiles: path.resolve(__dirname, './setup-test.ts'),
+        coverage: {
+            reporter: ['cobertura', 'lcov'],
+            reportOnFailure: true,
+        },
     },
 })

apps/nt-stylesheet/package.json

@@ -38,6 +38,7 @@
     "devDependencies": {
         "@types/node": "20.4.9",
         "nx": "^20.2.2",
+        "sass-embedded": "^1.83.4",
         "typescript": "^5.7.2",
         "vite-plugin-dts": "^4.4.0",
         "vite-plugin-sass-dts": "^1.3.29"