@pisodev/test-component-library 2.1.4 → 3.0.0

package/components/Tooltip/index.native.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { TooltipProps } from './Tooltip.types';
-
-// React Native에서는 Tooltip 미지원
-// children만 렌더링하고 tooltip은 무시
-export const Tooltip: React.FC<TooltipProps> = ({ children }) => {
-  if (process.env.NODE_ENV === 'development') {
-    console.warn(
-      'Tooltip is web-only. On React Native, consider using a modal or overlay library.'
-    );
-  }
-  return children as React.ReactElement;
-};
-
-export type { TooltipProps };

package/components/Tooltip/index.ts

@@ -1,3 +0,0 @@
-// 웹에서만 사용 가능
-export { Tooltip } from './Tooltip';
-export type { TooltipProps } from './Tooltip.types';

package/components/index.ts

@@ -1,8 +0,0 @@
-// 크로스 플랫폼 컴포넌트
-export * from './Anchor';
-
-// 웹 전용 컴포넌트 (RN에서는 fallback 제공)
-export * from './Tooltip';
-
-// React Native 전용 컴포넌트 (웹에서는 null 반환)
-export * from './StatusBar';

package/components/index.web.ts

@@ -1,8 +0,0 @@
-// 크로스 플랫폼 컴포넌트
-export * from './Anchor/index.web';
-
-// 웹 전용 컴포넌트
-export * from './Tooltip';
-
-// React Native 전용 컴포넌트 (웹에서는 null 반환)
-export * from './StatusBar/index.web';

package/components/theme/ThemeContext.ts

@@ -1,15 +0,0 @@
-import { createContext } from 'react';
-import { Theme, ThemeMode } from './colors.types';
-import { lightTheme } from './colors';
-
-export interface ThemeContextType {
-  theme: Theme;
-  mode: ThemeMode;
-  setMode: (mode: ThemeMode) => void;
-}
-
-export const ThemeContext = createContext<ThemeContextType>({
-  theme: lightTheme,
-  mode: 'light',
-  setMode: () => {},
-});

package/components/theme/ThemeProvider.native.tsx

@@ -1,36 +0,0 @@
-import React, { useState, ReactNode } from 'react';
-import { useColorScheme } from 'react-native';
-import { ThemeContext } from './ThemeContext';
-import { ThemeMode } from './colors.types';
-import { lightTheme, darkTheme } from './colors';
-
-export interface ThemeProviderProps {
-  children: ReactNode;
-  initialMode?: ThemeMode;
-  followSystem?: boolean;
-}
-
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({
-  children,
-  initialMode,
-  followSystem = true,
-}) => {
-  const systemColorScheme = useColorScheme();
-  const [manualMode, setManualMode] = useState<ThemeMode | null>(
-    initialMode || null
-  );
-
-  const mode =
-    manualMode || (followSystem && systemColorScheme) || 'light';
-  const theme = mode === 'light' ? lightTheme : darkTheme;
-
-  const setMode = (newMode: ThemeMode) => {
-    setManualMode(newMode);
-  };
-
-  return (
-    <ThemeContext.Provider value={{ theme, mode, setMode }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};

package/components/theme/ThemeProvider.tsx

@@ -1,6 +0,0 @@
-// 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/ThemeProvider.web.tsx

@@ -1,67 +0,0 @@
-import React, { useState, useEffect, ReactNode } from 'react';
-import { ThemeContext } from './ThemeContext';
-import { ThemeMode } from './colors.types';
-import { lightTheme, darkTheme } from './colors';
-
-export interface ThemeProviderProps {
-  children: ReactNode;
-  initialMode?: ThemeMode;
-}
-
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({
-  children,
-  initialMode = 'light',
-}) => {
-  const [mode, setMode] = useState<ThemeMode>(initialMode);
-  const theme = mode === 'light' ? lightTheme : darkTheme;
-
-  useEffect(() => {
-    // HTML 클래스 업데이트
-    document.documentElement.classList.remove('light', 'dark');
-    document.documentElement.classList.add(mode);
-
-    // CSS Variables 업데이트
-    const root = document.documentElement;
-
-    // Gray colors
-    root.style.setProperty('--gray-50', theme.colors.gray[50]);
-    root.style.setProperty('--gray-100', theme.colors.gray[100]);
-    root.style.setProperty('--gray-200', theme.colors.gray[200]);
-    root.style.setProperty('--gray-400', theme.colors.gray[400]);
-    root.style.setProperty('--gray-600', theme.colors.gray[600]);
-    root.style.setProperty('--gray-800', theme.colors.gray[800]);
-    root.style.setProperty('--gray-900', theme.colors.gray[900]);
-
-    // Green colors
-    root.style.setProperty('--green-400', theme.colors.green[400]);
-    root.style.setProperty('--green-500', theme.colors.green[500]);
-    root.style.setProperty('--green-600', theme.colors.green[600]);
-
-    // Blue colors
-    root.style.setProperty('--blue-400', theme.colors.blue[400]);
-    root.style.setProperty('--blue-500', theme.colors.blue[500]);
-    root.style.setProperty('--blue-600', theme.colors.blue[600]);
-
-    // Red colors
-    root.style.setProperty('--red-400', theme.colors.red[400]);
-    root.style.setProperty('--red-500', theme.colors.red[500]);
-    root.style.setProperty('--red-600', theme.colors.red[600]);
-
-    // Semantic colors
-    root.style.setProperty('--color-info', theme.semantic.info);
-    root.style.setProperty('--color-success', theme.semantic.success);
-    root.style.setProperty('--color-error', theme.semantic.error);
-    root.style.setProperty('--color-warning', theme.semantic.warning);
-
-    // Paper colors
-    root.style.setProperty('--paper-default', theme.paper.default);
-    root.style.setProperty('--paper-neutral', theme.paper.neutral);
-    root.style.setProperty('--paper-dialog', theme.paper.dialog);
-  }, [mode, theme]);
-
-  return (
-    <ThemeContext.Provider value={{ theme, mode, setMode }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};

package/components/theme/_colors.scss

@@ -1,89 +0,0 @@
-// Light Theme Colors
-$gray-50-light: #F6F8FA;
-$gray-100-light: #EEF0F2;
-$gray-200-light: #E6E8EA;
-$gray-400-light: #CED0D2;
-$gray-600-light: #86888A;
-$gray-800-light: #2C2E30;
-$gray-900-light: #0C0E10;
-
-$green-400-light: #18C792;
-$green-500-light: #16B383;
-$green-600-light: #12976F;
-
-$blue-400-light: #1473FF;
-$blue-500-light: #1267E6;
-$blue-600-light: #0F57C2;
-
-$red-400-light: #EB4242;
-$red-500-light: #D43B3B;
-$red-600-light: #B33232;
-
-$info-light: #1473FF;
-$success-light: #18C792;
-$error-light: #EB4242;
-$warning-light: #F0B800;
-
-$paper-default-light: #FFFFFF;
-$paper-neutral-light: #F6F8FA;
-$paper-dialog-light: #FFFFFF;
-
-// Dark Theme Colors
-$gray-50-dark: #1A1C1E;
-$gray-100-dark: #282A2C;
-$gray-200-dark: #36383A;
-$gray-400-dark: #525456;
-$gray-600-dark: #888A8C;
-$gray-800-dark: #CCCED0;
-$gray-900-dark: #FFFFFF;
-
-$green-400-dark: #1EEEAF;
-$green-500-dark: #54F2C2;
-$green-600-dark: #73F4CD;
-
-$blue-400-dark: #1473FF;
-$blue-500-dark: #4C95FF;
-$blue-600-dark: #6DA8FF;
-
-$red-400-dark: #FF4848;
-$red-500-dark: #FF7474;
-$red-600-dark: #FF8E8E;
-
-$info-dark: #1473FF;
-$success-dark: #1EEEAF;
-$error-dark: #FF4848;
-$warning-dark: #FFC400;
-
-$paper-default-dark: #0C0E10;
-$paper-neutral-dark: #0C0E10;
-$paper-dialog-dark: #1A1C1E;
-
-// Default (Light Theme) - 간편한 사용을 위한 기본값
-$gray-50: $gray-50-light;
-$gray-100: $gray-100-light;
-$gray-200: $gray-200-light;
-$gray-400: $gray-400-light;
-$gray-600: $gray-600-light;
-$gray-800: $gray-800-light;
-$gray-900: $gray-900-light;
-
-$green-400: $green-400-light;
-$green-500: $green-500-light;
-$green-600: $green-600-light;
-
-$blue-400: $blue-400-light;
-$blue-500: $blue-500-light;
-$blue-600: $blue-600-light;
-
-$red-400: $red-400-light;
-$red-500: $red-500-light;
-$red-600: $red-600-light;
-
-$info: $info-light;
-$success: $success-light;
-$error: $error-light;
-$warning: $warning-light;
-
-$paper-default: $paper-default-light;
-$paper-neutral: $paper-neutral-light;
-$paper-dialog: $paper-dialog-light;

package/components/theme/colors.ts

@@ -1,81 +0,0 @@
-import { Theme } from './colors.types';
-
-export const lightTheme: Theme = {
-  colors: {
-    gray: {
-      50: '#F6F8FA',
-      100: '#EEF0F2',
-      200: '#E6E8EA',
-      400: '#CED0D2',
-      600: '#86888A',
-      800: '#2C2E30',
-      900: '#0C0E10',
-    },
-    green: {
-      400: '#18C792',
-      500: '#16B383',
-      600: '#12976F',
-    },
-    blue: {
-      400: '#1473FF',
-      500: '#1267E6',
-      600: '#0F57C2',
-    },
-    red: {
-      400: '#EB4242',
-      500: '#D43B3B',
-      600: '#B33232',
-    },
-  },
-  semantic: {
-    info: '#1473FF',
-    success: '#18C792',
-    error: '#EB4242',
-    warning: '#F0B800',
-  },
-  paper: {
-    default: '#FFFFFF',
-    neutral: '#F6F8FA',
-    dialog: '#FFFFFF',
-  },
-};
-
-export const darkTheme: Theme = {
-  colors: {
-    gray: {
-      50: '#1A1C1E',
-      100: '#282A2C',
-      200: '#36383A',
-      400: '#525456',
-      600: '#888A8C',
-      800: '#CCCED0',
-      900: '#FFFFFF',
-    },
-    green: {
-      400: '#1EEEAF',
-      500: '#54F2C2',
-      600: '#73F4CD',
-    },
-    blue: {
-      400: '#1473FF',
-      500: '#4C95FF',
-      600: '#6DA8FF',
-    },
-    red: {
-      400: '#FF4848',
-      500: '#FF7474',
-      600: '#FF8E8E',
-    },
-  },
-  semantic: {
-    info: '#1473FF',
-    success: '#1EEEAF',
-    error: '#FF4848',
-    warning: '#FFC400',
-  },
-  paper: {
-    default: '#0C0E10',
-    neutral: '#0C0E10',
-    dialog: '#1A1C1E',
-  },
-};

package/components/theme/colors.types.ts

@@ -1,48 +0,0 @@
-// 간소화된 컬러 타입 (예시용)
-export interface ColorScale {
-  gray: {
-    50: string;
-    100: string;
-    200: string;
-    400: string;
-    600: string;
-    800: string;
-    900: string;
-  };
-  green: {
-    400: string;
-    500: string;
-    600: string;
-  };
-  blue: {
-    400: string;
-    500: string;
-    600: string;
-  };
-  red: {
-    400: string;
-    500: string;
-    600: string;
-  };
-}
-
-export interface SemanticColors {
-  info: string;
-  success: string;
-  error: string;
-  warning: string;
-}
-
-export interface PaperColors {
-  default: string;
-  neutral: string;
-  dialog: string;
-}
-
-export interface Theme {
-  colors: ColorScale;
-  semantic: SemanticColors;
-  paper: PaperColors;
-}
-
-export type ThemeMode = 'light' | 'dark';

package/components/theme/index.ts

@@ -1,5 +0,0 @@
-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/components/theme/index.web.ts

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

package/components/theme/useTheme.ts

@@ -1,12 +0,0 @@
-import { useContext } from 'react';
-import { ThemeContext } from './ThemeContext';
-
-export const useTheme = () => {
-  const context = useContext(ThemeContext);
-
-  if (!context) {
-    throw new Error('useTheme must be used within ThemeProvider');
-  }
-
-  return context;
-};

package/dist/Anchor/Anchor.native.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { AnchorProps } from './Anchor.types';
-export declare const Anchor: React.FC<AnchorProps>;

package/dist/Anchor/Anchor.native.js

@@ -1,34 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Anchor = void 0;
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const Anchor = ({ children, href, title, onPress, }) => {
-    const handlePress = () => {
-        if (onPress) {
-            onPress();
-        }
-        else if (href) {
-            react_native_1.Linking.openURL(href);
-        }
-    };
-    return (<react_native_1.Pressable onPress={handlePress} accessibilityRole="link" accessibilityLabel={title} accessibilityHint={`Opens ${href}`}>
-      {({ pressed }) => (<react_native_1.Text style={[styles.anchor, pressed && styles.anchorPressed]}>
-          {children}
-        </react_native_1.Text>)}
-    </react_native_1.Pressable>);
-};
-exports.Anchor = Anchor;
-const styles = react_native_1.StyleSheet.create({
-    anchor: {
-        color: '#2196f3',
-        textDecorationLine: 'none',
-    },
-    anchorPressed: {
-        color: '#1976d2',
-        textDecorationLine: 'underline',
-    },
-});

package/dist/Anchor/Anchor.types.d.ts

@@ -1,10 +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/dist/Anchor/Anchor.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Anchor/Anchor.web.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { AnchorProps } from './Anchor.types';
-export declare const Anchor: React.FC<AnchorProps>;

package/dist/Anchor/index.d.ts

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

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

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

package/dist/StatusBar/StatusBar.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { StatusBarProps } from './StatusBar.types';
-export declare const StatusBar: React.FC<StatusBarProps>;

package/dist/StatusBar/StatusBar.types.d.ts

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

package/dist/StatusBar/StatusBar.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/StatusBar/index.d.ts

@@ -1,2 +0,0 @@
-export { StatusBar } from './StatusBar';
-export type { StatusBarProps } from './StatusBar.types';

package/dist/StatusBar/index.web.d.ts

@@ -1,3 +0,0 @@
-import { StatusBarProps } from './StatusBar.types';
-export declare const StatusBar: (_props: StatusBarProps) => null;
-export type { StatusBarProps };

package/dist/Tooltip/Tooltip.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { TooltipProps } from './Tooltip.types';
-export declare const Tooltip: React.FC<TooltipProps>;

package/dist/Tooltip/Tooltip.types.d.ts

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

package/dist/Tooltip/Tooltip.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Tooltip/index.d.ts

@@ -1,2 +0,0 @@
-export { Tooltip } from './Tooltip';
-export type { TooltipProps } from './Tooltip.types';

package/dist/Tooltip/index.native.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { TooltipProps } from './Tooltip.types';
-export declare const Tooltip: React.FC<TooltipProps>;
-export type { TooltipProps };

package/dist/Tooltip/index.native.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
-// React Native에서는 Tooltip 미지원
-// children만 렌더링하고 tooltip은 무시
-const Tooltip = ({ children }) => {
-    if (process.env.NODE_ENV === 'development') {
-        console.warn('Tooltip is web-only. On React Native, consider using a modal or overlay library.');
-    }
-    return children;
-};
-exports.Tooltip = Tooltip;

package/dist/theme/ThemeContext.d.ts

@@ -1,7 +0,0 @@
-import { Theme, ThemeMode } from './colors.types';
-export interface ThemeContextType {
-    theme: Theme;
-    mode: ThemeMode;
-    setMode: (mode: ThemeMode) => void;
-}
-export declare const ThemeContext: import("react").Context<ThemeContextType>;

package/dist/theme/ThemeProvider.d.ts

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

package/dist/theme/ThemeProvider.native.d.ts

@@ -1,8 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ThemeMode } from './colors.types';
-export interface ThemeProviderProps {
-    children: ReactNode;
-    initialMode?: ThemeMode;
-    followSystem?: boolean;
-}
-export declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/dist/theme/ThemeProvider.web.d.ts

@@ -1,7 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ThemeMode } from './colors.types';
-export interface ThemeProviderProps {
-    children: ReactNode;
-    initialMode?: ThemeMode;
-}
-export declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/dist/theme/index.web.d.ts

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

package/dist/theme/useTheme.d.ts

@@ -1 +0,0 @@
-export declare const useTheme: () => import("./ThemeContext").ThemeContextType;