@pisodev/test-component-library 2.1.0 → 2.1.3

package/components/theme/ThemeProvider.tsx

@@ -0,0 +1,6 @@
+// This file exists for TypeScript type resolution
+// The actual implementation is in ThemeProvider.web.tsx and ThemeProvider.native.tsx
+// Metro bundler and Rollup will automatically pick the correct platform-specific file
+
+export { ThemeProvider } from './ThemeProvider.native';
+export type { ThemeProviderProps } from './ThemeProvider.native';

package/components/theme/index.ts

@@ -1,4 +1,5 @@
-export { ThemeProvider } from './ThemeProvider.native';
+export { ThemeProvider } from './ThemeProvider';
+export type { ThemeProviderProps } from './ThemeProvider';
 export { useTheme } from './useTheme';
 export { lightTheme, darkTheme } from './colors';
 export type { Theme, ThemeMode, ColorScale, SemanticColors, PaperColors } from './colors.types';

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider } from './ThemeProvider.native';
+export type { ThemeProviderProps } from './ThemeProvider.native';

package/dist/theme/index.d.ts

@@ -1,4 +1,5 @@
-export { ThemeProvider } from './ThemeProvider.native';
+export { ThemeProvider } from './ThemeProvider';
+export type { ThemeProviderProps } from './ThemeProvider';
 export { useTheme } from './useTheme';
 export { lightTheme, darkTheme } from './colors';
 export type { Theme, ThemeMode, ColorScale, SemanticColors, PaperColors } from './colors.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisodev/test-component-library",
-  "version": "2.1.0",
+  "version": "2.1.3",
   "description": "웹과 React Native를 위한 컴포넌트 라이브러리",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -51,6 +51,7 @@
     "rollup": "^4.54.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "postcss": "^8.4.49",
     "sass": "^1.97.1",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3"

package/components/README.md

@@ -1,195 +0,0 @@
-# 컴포넌트 가이드
-
-## 컴포넌트 타입
-
-### 1. 크로스 플랫폼 컴포넌트 (웹 + RN 모두 지원)
-
-```
-ComponentName/
-├── ComponentName.types.ts        # 공유 타입
-├── ComponentName.web.tsx         # 웹 구현
-├── ComponentName.native.tsx      # RN 구현
-├── index.ts                      # export
-└── README.md
-```
-
-**예시**: Anchor, Button, Card
-
-**index.ts**:
-```typescript
-export { ComponentName } from './ComponentName';
-export type { ComponentNameProps } from './ComponentName.types';
-```
-
----
-
-### 2. 웹 전용 컴포넌트
-
-```
-WebOnlyComponent/
-├── WebOnlyComponent.types.ts     # 타입
-├── WebOnlyComponent.tsx          # 웹 구현 (.web.tsx 아님!)
-├── WebOnlyComponent.module.scss  # 스타일
-├── index.ts                      # export
-└── README.md
-```
-
-**예시**: Table, Tooltip, Dropdown
-
-**index.ts**:
-```typescript
-export { WebOnlyComponent } from './WebOnlyComponent';
-export type { WebOnlyComponentProps } from './WebOnlyComponent.types';
-```
-
-**중요**: RN에서 import 시 에러 방지를 위한 처리
-
-**Option 1 - 타입만 제공**:
-```typescript
-// index.native.ts (별도 파일)
-import { WebOnlyComponentProps } from './WebOnlyComponent.types';
-
-export const WebOnlyComponent = () => {
-  if (__DEV__) {
-    console.warn('WebOnlyComponent is not available on React Native');
-  }
-  return null;
-};
-
-export type { WebOnlyComponentProps };
-```
-
-**Option 2 - 완전히 제외**:
-```typescript
-// components/index.ts에서
-export * from './Anchor';
-export * from './Button';
-
-// 조건부 export (빌드 설정에서 처리)
-if (typeof window !== 'undefined') {
-  export * from './WebOnlyComponent';
-}
-```
-
----
-
-### 3. React Native 전용 컴포넌트
-
-```
-NativeOnlyComponent/
-├── NativeOnlyComponent.types.ts  # 타입
-├── NativeOnlyComponent.tsx       # RN 구현 (.native.tsx 아님!)
-├── index.ts                      # export
-└── README.md
-```
-
-**예시**: MapView, Camera, BiometricAuth
-
-**index.ts**:
-```typescript
-export { NativeOnlyComponent } from './NativeOnlyComponent';
-export type { NativeOnlyComponentProps } from './NativeOnlyComponent.types';
-```
-
-**웹에서 import 시 에러 방지**:
-
-**index.web.ts (별도 파일)**:
-```typescript
-import { NativeOnlyComponentProps } from './NativeOnlyComponent.types';
-
-export const NativeOnlyComponent = () => {
-  if (process.env.NODE_ENV === 'development') {
-    console.warn('NativeOnlyComponent is only available on React Native');
-  }
-  return null;
-};
-
-export type { NativeOnlyComponentProps };
-```
-
----
-
-## 실전 예시
-
-### 예시 1: Tooltip (웹 전용)
-
-DOM API를 사용하므로 RN에서 불가능
-
-```
-Tooltip/
-├── Tooltip.types.ts
-├── Tooltip.tsx                   # 웹 구현
-├── Tooltip.module.scss
-├── index.ts                      # 웹용 export
-├── index.native.ts               # RN용 - null 반환 또는 대안
-└── README.md
-```
-
-**index.native.ts**:
-```typescript
-import { TooltipProps } from './Tooltip.types';
-
-// RN에서는 React Native의 Tooltip 사용 권장
-export const Tooltip: React.FC<TooltipProps> = ({ children }) => {
-  return <>{children}</>;  // 툴팁 없이 children만 렌더
-};
-
-export type { TooltipProps };
-```
-
-### 예시 2: DatePicker (플랫폼별 구현 차이가 큼)
-
-웹과 RN에서 완전히 다른 API 사용
-
-```
-DatePicker/
-├── DatePicker.types.ts           # 공통 props만
-├── DatePicker.web.tsx            # HTML input type="date"
-├── DatePicker.native.tsx         # @react-native-community/datetimepicker
-├── index.ts
-└── README.md
-```
-
-### 예시 3: MapView (RN 전용)
-
-react-native-maps 사용
-
-```
-MapView/
-├── MapView.types.ts
-├── MapView.tsx                   # RN 구현
-├── index.ts                      # RN export
-├── index.web.ts                  # 웹에서는 에러 또는 대안
-└── README.md
-```
-
-**index.web.ts**:
-```typescript
-export const MapView = () => {
-  throw new Error(
-    'MapView is only available on React Native. Use a web map library like react-leaflet instead.'
-  );
-};
-```
-
----
-
-## 권장 사항
-
-### 플랫폼 전용 컴포넌트를 만들기 전에
-
-1. **정말 플랫폼 전용이 필요한가?**
-   - 대부분의 UI 컴포넌트는 크로스 플랫폼 가능
-   - 로직만 분리하고 렌더링만 다르게 할 수 있는지 검토
-
-2. **대안 제공**
-   - 웹 전용: RN에서는 null 반환 + 경고
-   - RN 전용: 웹에서는 에러 throw + 대안 라이브러리 제안
-
-3. **문서화**
-   - README.md에 플랫폼 제한 명시
-   - 대안 라이브러리/방법 제시
-
-4. **TypeScript 타입은 공유**
-   - Props 타입은 양쪽에서 사용 가능하도록
-   - 개발자 경험(DX) 향상