@pisodev/test-component-library 2.1.4 → 3.0.0

package/src/theme/build-colors.ts

@@ -0,0 +1,103 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as colorScales from './colors.data';
+
+/**
+ * colors.data.ts에서 읽어서 SCSS와 CSS 파일 자동 생성
+ */
+
+// SCSS 파일 생성
+function generateSCSS(): string {
+  let scss = '// 이 파일은 자동 생성됩니다. 직접 수정하지 마세요.\n';
+  scss += '// build-colors.ts 스크립트로 생성됨\n\n';
+
+  // Light 변수
+  scss += '// Gray Scale - Light\n';
+  Object.entries(colorScales.grayScale.light).forEach(([key, value]) => {
+    scss += `$gray-${key}-light: ${value};\n`;
+  });
+
+  scss += '\n';
+
+  // Dark 변수
+  scss += '// Gray Scale - Dark\n';
+  Object.entries(colorScales.grayScale.dark).forEach(([key, value]) => {
+    scss += `$gray-${key}-dark: ${value};\n`;
+  });
+
+  scss += '\n';
+
+  // CSS Variables 참조
+  scss += '// Default (CSS Variables 사용 - 테마 자동 전환)\n';
+  Object.keys(colorScales.grayScale.light).forEach((key) => {
+    scss += `$gray-${key}: var(--gray-${key});\n`;
+  });
+
+  return scss;
+}
+
+// CSS 파일 생성
+function generateCSS(): string {
+  let css = '/* 이 파일은 자동 생성됩니다. 직접 수정하지 마세요. */\n';
+  css += '/* build-colors.ts 스크립트로 생성됨 */\n\n';
+
+  // Root (기본 라이트)
+  css += '/* 기본 (라이트 모드) */\n';
+  css += ':root {\n';
+  css += '  color-scheme: light dark;\n';
+  Object.entries(colorScales.grayScale.light).forEach(([key, value]) => {
+    css += `  --gray-${key}: ${value};\n`;
+  });
+  css += '}\n\n';
+
+  // 다크 모드 자동 감지
+  css += '/* 다크 모드 자동 감지 (OS 설정) */\n';
+  css += '@media (prefers-color-scheme: dark) {\n';
+  css += '  :root:not(.light) {\n';
+  Object.entries(colorScales.grayScale.dark).forEach(([key, value]) => {
+    css += `    --gray-${key}: ${value};\n`;
+  });
+  css += '  }\n';
+  css += '}\n\n';
+
+  // 수동 라이트 모드
+  css += '/* 수동 라이트 모드 강제 */\n';
+  css += '.light {\n';
+  css += '  color-scheme: light;\n';
+  Object.entries(colorScales.grayScale.light).forEach(([key, value]) => {
+    css += `  --gray-${key}: ${value};\n`;
+  });
+  css += '}\n\n';
+
+  // 수동 다크 모드
+  css += '/* 수동 다크 모드 강제 */\n';
+  css += '.dark {\n';
+  css += '  color-scheme: dark;\n';
+  Object.entries(colorScales.grayScale.dark).forEach(([key, value]) => {
+    css += `  --gray-${key}: ${value};\n`;
+  });
+  css += '}\n';
+
+  return css;
+}
+
+// 파일 저장
+function main() {
+  const themeDir = __dirname;
+
+  // SCSS 파일 생성
+  const scssContent = generateSCSS();
+  const scssPath = path.join(themeDir, '_colors.scss');
+  fs.writeFileSync(scssPath, scssContent, 'utf-8');
+  console.log('✅ Generated:', scssPath);
+
+  // CSS 파일 생성
+  const cssContent = generateCSS();
+  const cssPath = path.join(themeDir, 'colors.css');
+  fs.writeFileSync(cssPath, cssContent, 'utf-8');
+  console.log('✅ Generated:', cssPath);
+
+  console.log('🎉 Color files generated successfully!');
+}
+
+main();

package/src/theme/colors.css

@@ -0,0 +1,67 @@
+/* 이 파일은 자동 생성됩니다. 직접 수정하지 마세요. */
+/* build-colors.ts 스크립트로 생성됨 */
+
+/* 기본 (라이트 모드) */
+:root {
+  color-scheme: light dark;
+  --gray-50: #F6F8FA;
+  --gray-100: #EEF0F2;
+  --gray-200: #E6E8EA;
+  --gray-300: #DADCDD;
+  --gray-400: #CED0D2;
+  --gray-500: #AAACAE;
+  --gray-600: #86888A;
+  --gray-700: #4C4E50;
+  --gray-800: #2C2E30;
+  --gray-900: #0C0E10;
+  --gray-00: #FFFFFF;
+}
+
+/* 다크 모드 자동 감지 (OS 설정) */
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --gray-50: #1A1C1E;
+    --gray-100: #282A2C;
+    --gray-200: #36383A;
+    --gray-300: #444648;
+    --gray-400: #525456;
+    --gray-500: #66686A;
+    --gray-600: #888A8C;
+    --gray-700: #AAACAE;
+    --gray-800: #CCCED0;
+    --gray-900: #FFFFFF;
+    --gray-00: #0C0E10;
+  }
+}
+
+/* 수동 라이트 모드 강제 */
+.light {
+  color-scheme: light;
+  --gray-50: #F6F8FA;
+  --gray-100: #EEF0F2;
+  --gray-200: #E6E8EA;
+  --gray-300: #DADCDD;
+  --gray-400: #CED0D2;
+  --gray-500: #AAACAE;
+  --gray-600: #86888A;
+  --gray-700: #4C4E50;
+  --gray-800: #2C2E30;
+  --gray-900: #0C0E10;
+  --gray-00: #FFFFFF;
+}
+
+/* 수동 다크 모드 강제 */
+.dark {
+  color-scheme: dark;
+  --gray-50: #1A1C1E;
+  --gray-100: #282A2C;
+  --gray-200: #36383A;
+  --gray-300: #444648;
+  --gray-400: #525456;
+  --gray-500: #66686A;
+  --gray-600: #888A8C;
+  --gray-700: #AAACAE;
+  --gray-800: #CCCED0;
+  --gray-900: #FFFFFF;
+  --gray-00: #0C0E10;
+}

package/src/theme/colors.data.ts

@@ -0,0 +1,28 @@
+export const grayScale = {
+  light: {
+    '00': '#FFFFFF',
+    '50': '#F6F8FA',
+    '100': '#EEF0F2',
+    '200': '#E6E8EA',
+    '300': '#DADCDD',
+    '400': '#CED0D2',
+    '500': '#AAACAE',
+    '600': '#86888A',
+    '700': '#4C4E50',
+    '800': '#2C2E30',
+    '900': '#0C0E10',
+  },
+  dark: {
+    '00': '#0C0E10',
+    '50': '#1A1C1E',
+    '100': '#282A2C',
+    '200': '#36383A',
+    '300': '#444648',
+    '400': '#525456',
+    '500': '#66686A',
+    '600': '#888A8C',
+    '700': '#AAACAE',
+    '800': '#CCCED0',
+    '900': '#FFFFFF',
+  },
+};

package/src/theme/colors.ts

@@ -0,0 +1,14 @@
+import { Theme } from './colors.types';
+import * as colorScales from './colors.data'
+
+export const lightColors: Theme = {
+  colors: {
+    gray: colorScales.grayScale.light,
+  },
+};
+
+export const darkColors: Theme = {
+  colors: {
+    gray: colorScales.grayScale.dark,
+  },
+};

package/src/theme/colors.types.ts

@@ -0,0 +1,23 @@
+// 컬러 스케일 타입 (50, 100, 200 등의 명도)
+export interface ColorScale {
+  '00': string;
+  '50': string;
+  '100': string;
+  '200': string;
+  '300': string;
+  '400': string;
+  '500': string;
+  '600': string;
+  '700': string;
+  '800': string;
+  '900': string;
+}
+
+export interface Theme {
+  colors: {
+    gray: ColorScale;
+    // green: Partial<ColorScale>; 
+  };
+}
+
+export type ThemeMode = 'light' | 'dark';

package/src/theme/index.ts

@@ -0,0 +1,3 @@
+export type { ColorScale, Theme, ThemeMode } from './colors.types';
+export { lightColors, darkColors } from './colors';
+export * as colorScales from './colors.data';

package/src/types/scss.d.ts

@@ -0,0 +1,9 @@
+declare module '*.scss' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module '*.module.scss' {
+  const content: { [className: string]: string };
+  export default content;
+}

package/components/Anchor/Anchor.native.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { Text, Pressable, Linking, StyleSheet } from 'react-native';
-import { AnchorProps } from './Anchor.types';
-
-export const Anchor: React.FC<AnchorProps> = ({
-  children,
-  href,
-  title,
-  onPress,
-}) => {
-  const handlePress = () => {
-    if (onPress) {
-      onPress();
-    } else if (href) {
-      Linking.openURL(href);
-    }
-  };
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      accessibilityRole="link"
-      accessibilityLabel={title}
-      accessibilityHint={`Opens ${href}`}
-    >
-      {({ pressed }: any) => (
-        <Text style={[styles.anchor, pressed && styles.anchorPressed]}>
-          {children}
-        </Text>
-      )}
-    </Pressable>
-  );
-};
-
-const styles = StyleSheet.create({
-  anchor: {
-    color: '#2196f3',
-    textDecorationLine: 'none',
-  },
-  anchorPressed: {
-    color: '#1976d2',
-    textDecorationLine: 'underline',
-  },
-});

package/components/Anchor/Anchor.types.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface AnchorProps {
-  children: ReactNode;
-  href: string;
-  rel?: string;
-  title?: string;
-  target?: '_blank' | '_self' | '_parent' | '_top';
-  className?: string;
-  onPress?: () => void;
-}

package/components/Anchor/Anchor.web.module.scss

@@ -1,33 +0,0 @@
-$transition: all 0.2s ease;
-
-// CSS Variables fallback
-$primary-color: var(--color-primary-600, #2196f3);
-$primary-hover: var(--color-primary-700, #1976d2);
-$primary-visited: var(--color-primary-800, #1565c0);
-$primary-active: var(--color-primary-900, #0d47a1);
-
-.anchor {
-  color: $primary-color;
-  text-decoration: none;
-  transition: $transition;
-  cursor: pointer;
-  position: relative;
-
-  &:hover {
-    color: $primary-hover;
-    text-decoration: underline;
-  }
-
-  &:focus {
-    outline: 2px solid $primary-color;
-    outline-offset: 2px;
-  }
-
-  &:visited {
-    color: $primary-visited;
-  }
-
-  &:active {
-    color: $primary-active;
-  }
-}

package/components/Anchor/Anchor.web.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { AnchorProps } from './Anchor.types';
-import styles from './Anchor.web.module.scss';
-
-export const Anchor: React.FC<AnchorProps> = ({
-  children,
-  href,
-  rel,
-  title,
-  target = '_self',
-  className = '',
-  onPress,
-}) => {
-  const anchorClasses = [styles.anchor, className].filter(Boolean).join(' ');
-
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (onPress) {
-      e.preventDefault();
-      onPress();
-    }
-  };
-
-  return (
-    <a
-      href={href}
-      rel={rel}
-      title={title}
-      target={target}
-      className={anchorClasses}
-      onClick={handleClick}
-    >
-      {children}
-    </a>
-  );
-};

package/components/Anchor/README.md

@@ -1,58 +0,0 @@
-# Anchor
-
-링크 컴포넌트 - 웹과 React Native 모두 지원
-
-## Props
-
-| Prop | Type | Required | Platform | Description |
-|------|------|----------|----------|-------------|
-| children | ReactNode | ✓ | All | 링크 텍스트 |
-| href | string | ✓ | All | URL |
-| rel | string | - | Web only | rel 속성 |
-| title | string | - | All | title 속성 / 접근성 레이블 |
-| target | '_blank' \| '_self' \| '_parent' \| '_top' | - | Web only | target 속성 |
-| className | string | - | Web only | CSS 클래스 |
-| onPress | () => void | - | All | 클릭 핸들러 |
-
-## 웹 사용법
-
-```tsx
-import { Anchor } from '@pisodev/test-component-library';
-
-<Anchor
-  href="https://example.com"
-  title="Example"
-  rel="noopener"
-  target="_blank"
->
-  Click me
-</Anchor>
-```
-
-## React Native 사용법
-
-```tsx
-import { Anchor } from '@pisodev/test-component-library';
-
-<Anchor
-  href="https://example.com"
-  title="Example"
->
-  Click me
-</Anchor>
-```
-
-## 구현 차이점
-
-### 웹 (Anchor.web.tsx)
-- `<a>` 태그 사용
-- SCSS 모듈 스타일링
-- :hover, :focus, :visited, :active 가상 선택자
-- target, rel 속성 지원
-
-### React Native (Anchor.native.tsx)
-- Pressable + Text 컴포넌트 사용
-- StyleSheet 기반 스타일링
-- Pressed 상태로 hover 효과 구현
-- Linking API로 URL 열기
-- 접근성 속성 자동 적용

package/components/Anchor/index.ts

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

package/components/Anchor/index.web.ts

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

package/components/StatusBar/README.md

@@ -1,56 +0,0 @@
-# StatusBar
-
-**플랫폼**: React Native 전용
-
-모바일 상단 상태바(시간, 배터리 등)의 스타일을 제어하는 컴포넌트입니다.
-
-## 플랫폼 지원
-
-- ⚠️ **Web**: 지원 안 함 (null 반환)
-- ✅ **React Native**: 완전 지원
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| barStyle | 'default' \| 'light-content' \| 'dark-content' | - | 상태바 텍스트 색상 |
-| backgroundColor | string | - | 상태바 배경색 (Android) |
-| hidden | boolean | - | 상태바 숨김 여부 |
-
-## React Native 사용법
-
-```tsx
-import { StatusBar } from '@pisodev/test-component-library';
-
-function App() {
-  return (
-    <>
-      <StatusBar
-        barStyle="dark-content"
-        backgroundColor="#ffffff"
-      />
-      {/* 나머지 앱 내용 */}
-    </>
-  );
-}
-```
-
-## 웹 대안
-
-웹에서는 HTML meta 태그로 브라우저 테마 색상을 제어할 수 있습니다:
-
-```html
-<!-- public/index.html -->
-<meta name="theme-color" content="#ffffff">
-```
-
-또는 JavaScript로 동적 제어:
-
-```tsx
-useEffect(() => {
-  const metaThemeColor = document.querySelector('meta[name="theme-color"]');
-  if (metaThemeColor) {
-    metaThemeColor.setAttribute('content', '#ffffff');
-  }
-}, []);
-```

package/components/StatusBar/StatusBar.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { StatusBar as RNStatusBar } from 'react-native';
-import { StatusBarProps } from './StatusBar.types';
-
-export const StatusBar: React.FC<StatusBarProps> = ({
-  barStyle = 'default',
-  backgroundColor,
-  hidden = false,
-}) => {
-  return (
-    <RNStatusBar
-      barStyle={barStyle}
-      backgroundColor={backgroundColor}
-      hidden={hidden}
-    />
-  );
-};

package/components/StatusBar/StatusBar.types.ts

@@ -1,5 +0,0 @@
-export interface StatusBarProps {
-  barStyle?: 'default' | 'light-content' | 'dark-content';
-  backgroundColor?: string;
-  hidden?: boolean;
-}

package/components/StatusBar/index.ts

@@ -1,3 +0,0 @@
-// React Native에서만 사용 가능
-export { StatusBar } from './StatusBar';
-export type { StatusBarProps } from './StatusBar.types';

package/components/StatusBar/index.web.ts

@@ -1,14 +0,0 @@
-import { StatusBarProps } from './StatusBar.types';
-
-// 웹에서는 StatusBar 개념이 없음
-export const StatusBar = (_props: StatusBarProps) => {
-  if (process.env.NODE_ENV === 'development') {
-    console.warn(
-      'StatusBar is only available on React Native. ' +
-      'For web, you can use <meta name="theme-color"> in your HTML.'
-    );
-  }
-  return null;
-};
-
-export type { StatusBarProps };

package/components/Tooltip/README.md

@@ -1,45 +0,0 @@
-# Tooltip
-
-**플랫폼**: 웹 전용
-
-마우스 호버 시 툴팁을 표시하는 컴포넌트입니다.
-
-## 플랫폼 지원
-
-- ✅ **Web**: 완전 지원
-- ⚠️ **React Native**: children만 렌더링 (툴팁 미표시)
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| children | ReactNode | ✓ | 툴팁을 표시할 요소 |
-| content | string | ✓ | 툴팁 내용 |
-| position | 'top' \| 'bottom' \| 'left' \| 'right' | - | 툴팁 위치 (기본: 'top') |
-
-## 웹 사용법
-
-```tsx
-import { Tooltip } from '@pisodev/test-component-library';
-
-<Tooltip content="This is a tooltip" position="top">
-  <button>Hover me</button>
-</Tooltip>
-```
-
-## React Native 대안
-
-React Native에서는 모바일에 hover 개념이 없으므로:
-
-1. **react-native-tooltip** 사용
-2. **Modal + Pressable** 조합
-3. **Long press** 제스처로 툴팁 표시
-
-```tsx
-// RN 대안 예시
-import { Tooltip } from 'react-native-elements';
-
-<Tooltip popover={<Text>Info here</Text>}>
-  <Text>Press me</Text>
-</Tooltip>
-```

package/components/Tooltip/Tooltip.module.scss

@@ -1,44 +0,0 @@
-.tooltipWrapper {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip {
-  position: absolute;
-  background-color: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-size: 14px;
-  white-space: nowrap;
-  z-index: 1000;
-  pointer-events: none;
-
-  &.top {
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    margin-bottom: 8px;
-  }
-
-  &.bottom {
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    margin-top: 8px;
-  }
-
-  &.left {
-    right: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    margin-right: 8px;
-  }
-
-  &.right {
-    left: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    margin-left: 8px;
-  }
-}

package/components/Tooltip/Tooltip.tsx

@@ -1,26 +0,0 @@
-import React, { useState } from 'react';
-import { TooltipProps } from './Tooltip.types';
-import styles from './Tooltip.module.scss';
-
-export const Tooltip: React.FC<TooltipProps> = ({
-  children,
-  content,
-  position = 'top',
-}) => {
-  const [isVisible, setIsVisible] = useState(false);
-
-  return (
-    <div
-      className={styles.tooltipWrapper}
-      onMouseEnter={() => setIsVisible(true)}
-      onMouseLeave={() => setIsVisible(false)}
-    >
-      {children}
-      {isVisible && (
-        <div className={`${styles.tooltip} ${styles[position]}`}>
-          {content}
-        </div>
-      )}
-    </div>
-  );
-};

package/components/Tooltip/Tooltip.types.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface TooltipProps {
-  children: ReactNode;
-  content: string;
-  position?: 'top' | 'bottom' | 'left' | 'right';
-}