ServerKit styled-components UI library
npm install serverkit-styled-libbash
npm install serverkit-styled-lib styled-components
또는
yarn add serverkit-styled-lib styled-components
`
기본 사용법
`tsx
import React from "react";
import { Button } from "serverkit-styled-lib";
function App() {
return (
);
}
`
테마 시스템 사용법
테마를 사용하면 전역적으로 색상, 폰트, 간격 등을 커스터마이징할 수 있습니다.
$3
`tsx
import React from "react";
import { Button, ThemeProvider, defaultTheme } from "serverkit-styled-lib";
function App() {
return (
);
}
`
$3
`tsx
import React from "react";
import { Button, ThemeProvider, Theme } from "serverkit-styled-lib";
const customTheme: Partial = {
colors: {
primary: "#ff6b6b",
secondary: "#4ecdc4",
danger: "#fa7c91",
background: {
primary: "#ff6b6b",
hover: {
primary: "#ff5252",
secondary: "#26d0ce",
danger: "#f8b2c1",
},
},
},
borderRadius: "12px",
};
function App() {
return (
);
}
`
$3
`tsx
import React, { useState } from "react";
import { Button, ThemeProvider, Theme } from "serverkit-styled-lib";
const lightTheme: Partial = {
colors: { primary: "#007bff" },
};
const darkTheme: Partial = {
colors: {
primary: "#6c5ce7",
background: { secondary: "#2d3436" },
text: { primary: "#ddd" },
},
};
function App() {
const [isDark, setIsDark] = useState(false);
return (
);
}
`
컴포넌트
$3
styled-components로 만든 버튼 컴포넌트
#### Props
- variant: 'primary' | 'secondary' | 'danger' (기본: 'primary')
- size: 'small' | 'medium' | 'large' (기본: 'medium')
- disabled: boolean (기본: false)
- fullWidth: boolean (기본: false)
- onClick: () => void
$3
전역 테마를 제공하는 컴포넌트
#### Props
- theme: Partial - 적용할 테마 객체
- children: React.ReactNode - 하위 컴포넌트들
테마 인터페이스
`tsx
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;
};
}
`
개발
`bash
의존성 설치
npm install
빌드
npm run build
Storybook 실행
npm run storybook
개발 모드 (watch)
npm run dev
`
퍼블리시
`bash
npm run build
npm publish
``