serverkit-styled-lib

ServerKit styled-components 기반 UI 라이브러리

컴포넌트 목록

Accordion

Alert

Alert Dialog

Aspect Ratio

Avatar

Badge

Breadcrumb

Button

Calendar

Card

Carousel

Chart

Checkbox

Collapsible

Combobox

Command

Context Menu

Data Table

Date Picker

Dialog

Drawer

Dropdown Menu

Hover Card

Input

Input OTP

Label

Menubar

Navigation Menu

Pagination

Popover

Progress

Radio Group

Resizable

Scroll-area

Select

Separator

Sheet

Sidebar

Skeleton

Slider

Sonner

Switch

Table

Tabs

Textarea

Toast

Toggle

Toggle Group

Tooltip

Typography

설치

npm install serverkit-styled-lib styled-components
# 또는
yarn add serverkit-styled-lib styled-components

기본 사용법

import React from "react";
import { Button } from "serverkit-styled-lib";

function App() {
  return (
    <div>
      <Button variant="primary" size="medium" onClick={() => alert("클릭!")}>
        기본 버튼
      </Button>

      <Button variant="secondary" size="large">
        세컨더리 버튼
      </Button>

      <Button variant="danger" disabled>
        비활성화 버튼
      </Button>
    </div>
  );
}

테마 시스템 사용법

테마를 사용하면 전역적으로 색상, 폰트, 간격 등을 커스터마이징할 수 있습니다.

기본 테마 사용

import React from "react";
import { Button, ThemeProvider, defaultTheme } from "serverkit-styled-lib";

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Button variant="primary">테마가 적용된 버튼</Button>
    </ThemeProvider>
  );
}

커스텀 테마 사용

import React from "react";
import { Button, ThemeProvider, Theme } from "serverkit-styled-lib";

const customTheme: Partial<Theme> = {
  colors: {
    primary: "#ff6b6b",
    secondary: "#4ecdc4",
    danger: "#fa7c91",
    background: {
      primary: "#ff6b6b",
      hover: {
        primary: "#ff5252",
        secondary: "#26d0ce",
        danger: "#f8b2c1",
      },
    },
  },
  borderRadius: "12px",
};

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Button variant="primary">커스텀 테마 버튼</Button>
      <Button variant="secondary">커스텀 테마 세컨더리</Button>
    </ThemeProvider>
  );
}

런타임 테마 변경

import React, { useState } from "react";
import { Button, ThemeProvider, Theme } from "serverkit-styled-lib";

const lightTheme: Partial<Theme> = {
  colors: { primary: "#007bff" },
};

const darkTheme: Partial<Theme> = {
  colors: {
    primary: "#6c5ce7",
    background: { secondary: "#2d3436" },
    text: { primary: "#ddd" },
  },
};

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <Button onClick={() => setIsDark(!isDark)}>
        {isDark ? "라이트 모드" : "다크 모드"}
      </Button>
    </ThemeProvider>
  );
}

컴포넌트

Button

styled-components로 만든 버튼 컴포넌트

Props

• variant: 'primary' | 'secondary' | 'danger' (기본: 'primary')
• size: 'small' | 'medium' | 'large' (기본: 'medium')
• disabled: boolean (기본: false)
• fullWidth: boolean (기본: false)
• onClick: () => void

ThemeProvider

전역 테마를 제공하는 컴포넌트

Props

• theme: Partial - 적용할 테마 객체
• children: React.ReactNode - 하위 컴포넌트들

테마 인터페이스

interface Theme {
  colors: {
    primary: string;
    secondary: string;
    danger: string;
    text: {
      primary: string;
      secondary: string;
      white: string;
    };
    background: {
      primary: string;
      secondary: string;
      hover: {
        primary: string;
        secondary: string;
        danger: string;
      };
    };
    border: {
      default: string;
      hover: string;
    };
  };
  spacing: {
    small: string;
    medium: string;
    large: string;
  };
  borderRadius: string;
  fontSize: {
    small: string;
    medium: string;
    large: string;
  };
}

개발

# 의존성 설치
npm install

# 빌드
npm run build

# Storybook 실행
npm run storybook

# 개발 모드 (watch)
npm run dev

퍼블리시

npm run build
npm publish