Skip to content

Commit

Permalink
🎉 Label 컴포넌트 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
oaoong committed Oct 27, 2023
1 parent 7d7ac58 commit 73fe1e9
Show file tree
Hide file tree
Showing 6 changed files with 78 additions and 1 deletion.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"build-storybook": "storybook build"
},
"dependencies": {
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@tanstack/react-query": "^5.0.0",
Expand Down
24 changes: 24 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 8 additions & 1 deletion src/components/ui/Input/Input.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react'
import Label from '../Label'
import { Input } from './Input'

const meta = {
Expand All @@ -15,6 +16,12 @@ export const Normal: Story = {
args: {},
}

export const Disabled: Story = {
export const InputWithLabel: Story = {
args: {},
render: (args) => (
<div className="flex flex-col space-y-2">
<Label htmlFor="input">라벨</Label>
<Input {...args} id="input" />
</div>
),
}
17 changes: 17 additions & 0 deletions src/components/ui/Label/Label.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import type { Meta, StoryObj } from '@storybook/react'
import { Label } from './Label'

const meta = {
title: 'UI/Label',
component: Label,
tags: ['autodocs'],
argTypes: {},
} satisfies Meta<typeof Label>

export default meta
type Story = StoryObj<typeof meta>

export const Normal: Story = {
args: {},
render: (args) => <Label {...args}>Label</Label>,
}
25 changes: 25 additions & 0 deletions src/components/ui/Label/Label.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/utils'

const labelVariants = cva(
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
)

const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
3 changes: 3 additions & 0 deletions src/components/ui/Label/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { Label } from './Label'

export default Label

0 comments on commit 73fe1e9

Please sign in to comment.