@pisodev/test-component-library 1.1.1 → 2.0.0

package/package.json

@@ -1,31 +1,42 @@
 {
   "name": "@pisodev/test-component-library",
-  "version": "1.1.1",
-  "description": "SCSS 기반 React 컴포넌트 라이브러리",
-  "type": "module",
+  "version": "2.0.0",
+  "description": "웹과 React Native를 위한 컴포넌트 라이브러리",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "react-native": "dist/index.native.js",
   "files": [
-    "dist"
+    "dist",
+    "components"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build": "npm run build:web",
+    "build:web": "rollup -c rollup.config.web.js",
+    "build:native": "tsc -p tsconfig.native.json",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
     "react",
+    "react-native",
     "components",
-    "sass",
     "ui",
     "component-library",
-    "typescript"
+    "typescript",
+    "cross-platform"
   ],
   "author": "",
   "license": "MIT",
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -33,8 +44,10 @@
     "@rollup/plugin-typescript": "^12.3.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
+    "@types/react-native": "^0.73.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
+    "react-native": "^0.76.6",
     "rollup": "^4.54.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",

package/README.md

@@ -1,101 +0,0 @@
-# @pisodev/test-component-library
-
-SASS 기반 React 컴포넌트 라이브러리입니다.
-
-## 설치
-
-```bash
-npm install @pisodev/test-component-library
-```
-
-## 사용법
-
-### 기본 사용
-
-```tsx
-import { Anchor, ThemeProvider } from '@pisodev/test-component-library';
-
-function App() {
-  return (
-    <ThemeProvider>
-      <Anchor
-        href="https://example.com"
-        rel="noopener noreferrer"
-        title="예시 사이트로 이동"
-        target="_blank"
-      >
-        외부 링크
-      </Anchor>
-    </ThemeProvider>
-  );
-}
-```
-
-### 테마 커스터마이징
-
-컬러 시스템을 커스터마이징하여 브랜드 컬러를 적용할 수 있습니다.
-
-```tsx
-import { ThemeProvider } from '@pisodev/test-component-library';
-
-function App() {
-  return (
-    <ThemeProvider
-      colors={{
-        primary: {
-          600: '#ff6b6b',  // 링크의 기본 색상
-          700: '#ee5a52',  // hover 상태 색상
-        },
-      }}
-    >
-      <YourApp />
-    </ThemeProvider>
-  );
-}
-```
-
-**사용 가능한 컬러 스케일**: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
-
-**기본 제공 컬러**: `primary`, `secondary`, `success`, `warning`, `danger`
-
-**컬러 변경 방법**:
-- 일부 스케일만 변경: 필요한 스케일만 지정하면 나머지는 기본값 유지
-- 새 컬러 추가: 원하는 이름으로 새로운 컬러 스케일 추가 가능
-
-## 컴포넌트
-
-### Anchor
-
-`rel`과 `title` 속성이 **필수**인 링크 컴포넌트입니다. 접근성과 SEO를 위해 항상 이 속성들을 제공해야 합니다.
-
-```tsx
-<Anchor
-  href="https://example.com"
-  rel="noopener noreferrer"
-  title="예시 사이트로 이동"
-  target="_blank"
->
-  외부 링크
-</Anchor>
-
-<Anchor
-  href="/about"
-  rel="internal"
-  title="회사 소개 페이지"
->
-  회사 소개
-</Anchor>
-```
-
-**Props (필수 항목)**
-- `href`: `string` (필수)
-- `rel`: `string` (필수) - 링크 관계 (예: `"noopener noreferrer"`, `"internal"`)
-- `title`: `string` (필수) - 링크 설명 (접근성 및 SEO에 중요)
-- `target`: `'_blank'` | `'_self'` | `'_parent'` | `'_top'` (기본값: `'_self'`)
-- `onClick`: `(e: React.MouseEvent<HTMLAnchorElement>) => void`
-
-> **참고**: `rel`과 `title`은 접근성, SEO, 보안을 위해 반드시 제공해야 하는 필수 속성입니다.
-
-## 라이센스
-
-MIT

package/dist/components/Anchor/Anchor.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export interface AnchorProps {
-    children: React.ReactNode;
-    href: string;
-    rel: string;
-    title: string;
-    target?: '_blank' | '_self' | '_parent' | '_top';
-    className?: string;
-    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-}
-export declare const Anchor: React.FC<AnchorProps>;

package/dist/components/Anchor/index.d.ts

@@ -1,2 +0,0 @@
-export { Anchor } from './Anchor';
-export type { AnchorProps } from './Anchor';

package/dist/components/Button/Button.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export interface ButtonProps {
-    children: React.ReactNode;
-    variant?: 'primary' | 'secondary' | 'outline';
-    size?: 'small' | 'medium' | 'large';
-    onClick?: () => void;
-    disabled?: boolean;
-    type?: 'button' | 'submit' | 'reset';
-    className?: string;
-}
-export declare const Button: React.FC<ButtonProps>;

package/dist/components/Button/index.d.ts

@@ -1,2 +0,0 @@
-export { Button } from './Button';
-export type { ButtonProps } from './Button';

package/dist/components/Card/Card.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export interface CardProps {
-    children: React.ReactNode;
-    title?: string;
-    subtitle?: string;
-    footer?: React.ReactNode;
-    variant?: 'default' | 'elevated' | 'outlined';
-    className?: string;
-    onClick?: () => void;
-}
-export declare const Card: React.FC<CardProps>;

package/dist/components/Card/index.d.ts

@@ -1,2 +0,0 @@
-export { Card } from './Card';
-export type { CardProps } from './Card';

package/dist/components/index.d.ts

@@ -1,6 +0,0 @@
-export { Button } from './Button';
-export type { ButtonProps } from './Button';
-export { Card } from './Card';
-export type { CardProps } from './Card';
-export { Anchor } from './Anchor';
-export type { AnchorProps } from './Anchor';

package/dist/theme/ThemeProvider.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Theme, ThemeColors } from './types';
-interface ThemeContextValue {
-    theme: Theme;
-}
-interface ThemeProviderProps {
-    children: React.ReactNode;
-    colors?: ThemeColors;
-}
-export declare const ThemeProvider: React.FC<ThemeProviderProps>;
-export declare const useTheme: () => ThemeContextValue;
-export {};

package/dist/theme/defaultTheme.d.ts

@@ -1,2 +0,0 @@
-import { Theme } from './types';
-export declare const defaultTheme: Theme;

package/dist/theme/index.d.ts

@@ -1,3 +0,0 @@
-export { ThemeProvider, useTheme } from './ThemeProvider';
-export { defaultTheme } from './defaultTheme';
-export type { Theme, ThemeColors, ColorScale } from './types';

package/dist/theme/types.d.ts

@@ -1,23 +0,0 @@
-export interface ColorScale {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-}
-export interface ThemeColors {
-    primary?: Partial<ColorScale>;
-    secondary?: Partial<ColorScale>;
-    success?: Partial<ColorScale>;
-    warning?: Partial<ColorScale>;
-    danger?: Partial<ColorScale>;
-    [key: string]: Partial<ColorScale> | undefined;
-}
-export interface Theme {
-    colors: ThemeColors;
-}