@pisodev/test-component-library 2.0.2 → 2.1.0

package/components/theme/ThemeContext.ts

@@ -0,0 +1,15 @@
+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

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

@@ -0,0 +1,67 @@
+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.ts

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,48 @@
+// 간소화된 컬러 타입 (예시용)
+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

@@ -0,0 +1,4 @@
+export { ThemeProvider } from './ThemeProvider.native';
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,12 @@
+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/theme/ThemeContext.d.ts

@@ -0,0 +1,7 @@
+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.native.d.ts

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,7 @@
+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/colors.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from './colors.types';
+export declare const lightTheme: Theme;
+export declare const darkTheme: Theme;

package/dist/theme/colors.types.d.ts

@@ -0,0 +1,43 @@
+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/dist/theme/index.d.ts

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

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

@@ -0,0 +1,4 @@
+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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisodev/test-component-library",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "웹과 React Native를 위한 컴포넌트 라이브러리",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",