Add Label component

README.md

@@ -150,3 +150,19 @@ const box = <Box _hover={{bg: ["red", "blue"]}}/>
 // Same
 const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
 ```
+
+## How to Contribute
+
+### Requirements
+- Rust compiler installed
+- pnpm package manager installed
+
+### Development Setup
+To set up the development environment, install the following packages:
+```sh
+pnpm i
+pnpm build
+cargo install cargo-tarpaulin
+cargo install wasm-pack
+```
+After installation, run pnpm test to ensure everything works correctly.

README_ko.md

@@ -144,3 +144,19 @@ const box = <Box _hover={{bg: ["red", "blue"]}}/>
 // Same
 const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
 ```
+
+## 기여 방법
+
+### 요구 사항
+- Rust 컴파일러 설치
+- pnpm 패키지 매니저 설치
+
+### 개발용 설치
+개발 환경을 위해 아래 패키지들을 설치합니다.
+```sh
+pnpm i
+pnpm build
+cargo install cargo-tarpaulin
+cargo install wasm-pack
+```
+설치 후 pnpm test를 실행하여 문제가 없는지 확인합니다.

packages/components/src/components/Button/index.tsx

@@ -7,7 +7,7 @@ import {
 } from '@devup-ui/react'
 import { clsx } from 'clsx'
 
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'default'
   colors?: {
     primary?: string
@@ -105,6 +105,7 @@ export function Button({
           },
         }[variant]
       }
+      // Q. how to use dark theme?
       _themeDark={{
         _active: {
           primary: {

packages/components/src/components/Label/Label.stories.tsx

@@ -0,0 +1,28 @@
+import { css } from '@devup-ui/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { Label } from './index' 
+
+type Story = StoryObj<typeof meta>
+
+// use the same blueprint with button.
+const meta: Meta<typeof Label> = {
+    title: 'Devfive/Label', 
+    component: Label, 
+    decorators: [
+        (Story) => (
+            <div style={{ padding: '10px'}}>
+                <Story />
+            </div>
+        )
+    ]
+}
+
+export const Default: Story = {
+    args: {
+        children: 'Label Text',
+        disabled: false,  
+    }
+}
+
+export default meta;

packages/components/src/components/Label/index.tsx

@@ -0,0 +1,61 @@
+import { type DevupThemeTypography, Text as DevupText } from '@devup-ui/react'
+import { clsx } from 'clsx'
+
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  // our custom properties.
+  colors?: {
+    text?: string
+    error?: string
+    disabled?: string
+  }
+  typography?: keyof DevupThemeTypography
+  ellipsis?: boolean
+  required?: boolean
+  disabled?: boolean
+  tooltip?: string
+}
+
+export function Label({
+  form,
+  htmlFor,
+  colors,
+  typography,
+  ellipsis = false,
+  required = false,
+  disabled = false,
+  tooltip,
+  children,
+  className,
+  ...props
+}: LabelProps): React.ReactElement {
+  return (
+    <DevupText
+      as="label"
+      className={clsx(ellipsis, className)}
+      color={
+        disabled
+          ? colors?.disabled || '#999'
+          : colors?.error || colors?.text || 'inherit'
+      }
+      cursor={disabled ? 'not-allowed' : 'default'}
+      form={form}
+      htmlFor={htmlFor}
+      opacity={disabled ? 0.6 : 1}
+      styleVars={{
+        text: colors?.text,
+        error: colors?.error,
+        disabled: colors?.disabled,
+      }}
+      title={tooltip}
+      typography={typography}
+      {...props}
+    >
+      {children}
+      {required && (
+        <span style={{ color: colors?.error || 'red', marginLeft: '2px' }}>
+          *
+        </span>
+      )}
+    </DevupText>
+  )
+}