podo-ui 0.3.6 → 0.3.8

package/react/atom/input.tsx

@@ -1,67 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { z } from 'zod';
-import styles from './input.module.scss';
-
-interface InputWrapperProps extends React.ComponentProps<'input'> {
-  value?: string | number;
-  className?: string;
-  validator?: z.ZodType<unknown>;
-  withIcon?: string;
-  withRightIcon?: string;
-  unit?: string;
-}
-
-const Input: React.FC<InputWrapperProps> = ({
-  validator,
-  value,
-  className,
-  withIcon,
-  withRightIcon,
-  unit,
-  ...rest
-}) => {
-  const [message, setMessage] = useState('');
-  const [statusClass, setStatusClass] = useState('');
-
-  const validateHandler = useCallback(() => {
-    setMessage('');
-    setStatusClass('');
-    if (validator && value) {
-      try {
-        validator.parse(value);
-        setStatusClass('success');
-      } catch (e) {
-        if (e instanceof z.ZodError) {
-          setMessage(e.errors[0].message);
-          setStatusClass('danger');
-        }
-      }
-    }
-  }, [validator, value]);
-
-  useEffect(() => {
-    validateHandler();
-  }, [validateHandler, value]);
-
-  return (
-    <div className={`${styles.style} ${className || ''}`}>
-      <div
-        className={`${className || ''} ${withIcon ? 'with-icon' : ''} ${withRightIcon ? 'with-right-icon' : ''}`}
-      >
-        {withIcon && <i className={withIcon} />}
-        <input
-          {...rest}
-          value={value ?? ''}
-          className={`${statusClass} ${className || ''}`}
-        />
-        {withRightIcon && <i className={withRightIcon} />}
-        {unit && <span className="unit">{unit}</span>}
-      </div>
-      {validator && message !== '' && (
-        <div className="validator">{message}</div>
-      )}
-    </div>
-  );
-};
-
-export default Input;

package/react/atom/textarea.tsx

@@ -1,51 +0,0 @@
-import { useState } from 'react';
-import { z } from 'zod';
-import styles from './textarea.module.scss';
-
-interface TextareaWrapperProps extends React.ComponentProps<'textarea'> {
-  value: string;
-  className?: string;
-  validator?: z.ZodType<unknown>;
-}
-
-const Textarea: React.FC<TextareaWrapperProps> = ({
-  validator,
-  value,
-  className,
-  ...rest
-}) => {
-  const [message, setMessage] = useState('');
-  const [statusClass, setStatusClass] = useState('');
-
-  const validateHandler = () => {
-    setMessage('');
-    setStatusClass('');
-    if (validator && value.length > 0) {
-      try {
-        validator.parse(value);
-        setStatusClass('success');
-      } catch (e) {
-        if (e instanceof z.ZodError) {
-          setMessage(e.errors[0].message);
-          setStatusClass('danger');
-        }
-      }
-    }
-  };
-
-  return (
-    <div className={`${styles.style} ${className}`}>
-      <textarea
-        {...rest}
-        value={value}
-        className={`${statusClass} ${className}`}
-        onKeyUp={validateHandler}
-      />
-      {validator && message !== '' && (
-        <div className="validator">{message}</div>
-      )}
-    </div>
-  );
-};
-
-export default Textarea;

package/react/molecule/field.tsx

@@ -1,78 +0,0 @@
-import { z } from 'zod';
-import styles from './field.module.scss';
-import { useCallback, useEffect, useState } from 'react';
-
-interface Props {
-  label?: string;
-  labelClass?: string;
-  required?: boolean;
-  helper?: string;
-  helperClass?: string;
-  children?: React.ReactNode;
-  validator?: z.ZodType<unknown>;
-  value?: string;
-  setClassName?: React.Dispatch<React.SetStateAction<string>>;
-  className?: string;
-}
-
-const Field = ({
-  label,
-  labelClass,
-  required,
-  helper,
-  helperClass,
-  children,
-  validator,
-  value,
-  setClassName,
-  className,
-}: Props) => {
-  const [message, setMessage] = useState('');
-
-  const validateHandler = useCallback(() => {
-    setMessage('');
-    if (setClassName) {
-      setClassName('');
-    }
-    if (validator && value && value.length > 0) {
-      try {
-        validator.parse(value);
-        if (setClassName) {
-          setClassName('success');
-        }
-      } catch (e) {
-        if (e instanceof z.ZodError) {
-          setMessage(e.errors[0].message);
-          if (setClassName) {
-            setClassName('danger');
-          }
-        }
-      }
-    }
-  }, [validator, value, setClassName]);
-
-  useEffect(() => {
-    validateHandler();
-  }, [validateHandler]);
-
-  return (
-    <div className={`${styles.style} ${className || ''}`}>
-      {label && (
-        <label className={labelClass}>
-          {label}
-
-          {required && <span className="required">*</span>}
-        </label>
-      )}
-      <div className="child">{children}</div>
-      {helper ||
-        (validator && message !== '' && (
-          <div className={`helper ${helperClass || ''}`}>
-            {message || helper}
-          </div>
-        ))}
-    </div>
-  );
-};
-
-export default Field;

package/react/molecule/pagination.tsx

@@ -1,87 +0,0 @@
-import styles from './pagination.module.scss';
-
-interface PaginationProps {
-  currentPage: number;
-  totalPages: number;
-  onPageChange: (page: number) => void;
-  maxVisiblePages?: number;
-}
-
-export default function Pagination({
-  currentPage,
-  totalPages,
-  onPageChange,
-  maxVisiblePages = 5,
-}: PaginationProps) {
-  const getPageNumbers = () => {
-    const pages: number[] = [];
-    const startPage = Math.floor((currentPage - 1) / maxVisiblePages) * maxVisiblePages + 1;
-    const endPage = Math.min(startPage + maxVisiblePages - 1, totalPages);
-
-    for (let i = startPage; i <= endPage; i++) {
-      pages.push(i);
-    }
-
-    return pages;
-  };
-
-  const pageNumbers = getPageNumbers();
-
-  const handlePrevious = () => {
-    if (currentPage > 1) {
-      onPageChange(currentPage - 1);
-    }
-  };
-
-  const handleNext = () => {
-    if (currentPage < totalPages) {
-      onPageChange(currentPage + 1);
-    }
-  };
-
-  if (totalPages === 0) {
-    return null;
-  }
-
-  return (
-    <div className={styles.pagination}>
-      {currentPage > 1 ? (
-        <button
-          onClick={handlePrevious}
-          className={styles.pageButton}
-          aria-label="이전 페이지"
-        >
-          <i className="icon-arrow-left"></i>
-        </button>
-      ) : (
-        <div className={styles.pageButtonPlaceholder} />
-      )}
-
-      {pageNumbers.map((pageNum) => (
-        <button
-          key={pageNum}
-          onClick={() => onPageChange(pageNum)}
-          className={`${styles.pageButton} ${
-            currentPage === pageNum ? styles.active : ''
-          }`}
-          aria-label={`${pageNum}페이지`}
-          aria-current={currentPage === pageNum ? 'page' : undefined}
-        >
-          {pageNum}
-        </button>
-      ))}
-
-      {currentPage < totalPages ? (
-        <button
-          onClick={handleNext}
-          className={styles.pageButton}
-          aria-label="다음 페이지"
-        >
-          <i className="icon-arrow-right"></i>
-        </button>
-      ) : (
-        <div className={styles.pageButtonPlaceholder} />
-      )}
-    </div>
-  );
-}

package/react/molecule/toast-provider.tsx

@@ -1,123 +0,0 @@
-'use client';
-
-import React, { createContext, useContext, useState, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import Toast, { ToastProps, ToastPosition, ToastVariant } from './toast';
-import styles from './toast-container.module.scss';
-
-interface ToastData extends Omit<ToastProps, 'id' | 'onClose'> {
-  id: string;
-  position: ToastPosition;
-}
-
-interface ToastOptions {
-  header?: string;
-  message: string;
-  variant?: ToastVariant;
-  type?: 'type01' | 'type02';
-  long?: boolean;
-  duration?: number;
-  width?: string | number;
-  position?: ToastPosition;
-}
-
-interface ToastContextType {
-  showToast: (options: ToastOptions) => string;
-  hideToast: (id: string) => void;
-}
-
-const ToastContext = createContext<ToastContextType | undefined>(undefined);
-
-export const useToast = () => {
-  const context = useContext(ToastContext);
-  if (!context) {
-    throw new Error('useToast must be used within ToastProvider');
-  }
-  return context;
-};
-
-export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [toasts, setToasts] = useState<ToastData[]>([]);
-  const [isMounted, setIsMounted] = useState(false);
-
-  React.useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  const showToast = useCallback((options: ToastOptions): string => {
-    const id = `toast-${Date.now()}-${Math.random()}`;
-    const position = options.position || 'top-right';
-
-    setToasts((prev) => [
-      ...prev,
-      {
-        id,
-        position,
-        header: options.header,
-        message: options.message,
-        variant: options.variant,
-        type: options.type,
-        long: options.long,
-        duration: options.duration,
-        width: options.width,
-      },
-    ]);
-
-    return id;
-  }, []);
-
-  const hideToast = useCallback((id: string) => {
-    setToasts((prev) => prev.filter((toast) => toast.id !== id));
-  }, []);
-
-  const getToastsByPosition = (position: ToastPosition) => {
-    return toasts.filter((toast) => toast.position === position);
-  };
-
-  const positions: ToastPosition[] = [
-    'top-left',
-    'top-center',
-    'top-right',
-    'center-left',
-    'center',
-    'center-right',
-    'bottom-left',
-    'bottom-center',
-    'bottom-right',
-  ];
-
-  return (
-    <ToastContext.Provider value={{ showToast, hideToast }}>
-      {children}
-      {isMounted &&
-        createPortal(
-          <div className={styles.toastPortal}>
-            {positions.map((position) => {
-              const positionToasts = getToastsByPosition(position);
-              if (positionToasts.length === 0) return null;
-
-              return (
-                <div key={position} className={`${styles.toastContainer} ${styles[position]}`}>
-                  {positionToasts.map((toast) => (
-                    <Toast
-                      key={toast.id}
-                      id={toast.id}
-                      header={toast.header}
-                      message={toast.message}
-                      variant={toast.variant}
-                      type={toast.type}
-                      long={toast.long}
-                      duration={toast.duration}
-                      width={toast.width}
-                      onClose={hideToast}
-                    />
-                  ))}
-                </div>
-              );
-            })}
-          </div>,
-          document.body
-        )}
-    </ToastContext.Provider>
-  );
-};

package/react/molecule/toast.tsx

@@ -1,116 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import styles from './toast.module.scss';
-
-export type ToastPosition =
-  | 'top-left'
-  | 'top-center'
-  | 'top-right'
-  | 'center-left'
-  | 'center'
-  | 'center-right'
-  | 'bottom-left'
-  | 'bottom-center'
-  | 'bottom-right';
-
-export type ToastVariant = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
-
-export interface ToastProps {
-  id: string;
-  header?: string;
-  message: string;
-  variant?: ToastVariant;
-  type?: 'type01' | 'type02';
-  long?: boolean;
-  duration?: number;
-  width?: string | number;
-  onClose: (id: string) => void;
-}
-
-const Toast: React.FC<ToastProps> = ({
-  id,
-  header,
-  message,
-  variant = 'default',
-  type = 'type01',
-  long = false,
-  duration = 3000,
-  width,
-  onClose,
-}) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const [isClosing, setIsClosing] = useState(false);
-
-  useEffect(() => {
-    // Fade in
-    requestAnimationFrame(() => {
-      setIsVisible(true);
-    });
-
-    // Auto close
-    if (duration > 0) {
-      const timer = setTimeout(() => {
-        handleClose();
-      }, duration);
-
-      return () => clearTimeout(timer);
-    }
-  }, [duration]);
-
-  const handleClose = () => {
-    setIsClosing(true);
-    setTimeout(() => {
-      onClose(id);
-    }, 200); // 0.2s fade out
-  };
-
-  const toastClasses = [
-    'toast',
-    variant,
-    type === 'type02' ? 'toast-border' : '',
-    long ? 'toast-long' : '',
-    styles.toastAnimation,
-    isVisible && !isClosing ? styles.fadeIn : '',
-    isClosing ? styles.fadeOut : '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const toastStyle: React.CSSProperties = {
-    width: width ? (typeof width === 'number' ? `${width}px` : width) : 'auto',
-  };
-
-  const getIcon = () => {
-    switch (variant) {
-      case 'success':
-        return 'icon-check';
-      case 'warning':
-        return 'icon-warning';
-      case 'danger':
-        return 'icon-danger';
-      case 'primary':
-      case 'info':
-      case 'default':
-      default:
-        return 'icon-info';
-    }
-  };
-
-  return (
-    <div className={toastClasses} style={toastStyle}>
-      <div className="toast-icon">
-        <i className={getIcon()}></i>
-      </div>
-      <div className="toast-content">
-        {header && !long && <div className="toast-header">{header}</div>}
-        <div className="toast-body">{message}</div>
-      </div>
-      <button className="toast-close" onClick={handleClose}>
-        <i className="icon-close"></i>
-      </button>
-    </div>
-  );
-};
-
-export default Toast;

package/react.ts

@@ -1,17 +0,0 @@
-import Input from './react/atom/input';
-import Textarea from './react/atom/textarea';
-import Editor from './react/atom/editor';
-import EditorView from './react/atom/editor-view';
-import Pagination from './react/molecule/pagination';
-import Field from './react/molecule/field';
-const Form = {
-  Input,
-  Textarea,
-  Editor,
-  EditorView,
-  Field,
-};
-
-export default Form;
-
-export { Input, Textarea, Editor, EditorView, Pagination, Field };