Project Initialization

packages/ui-common/src/components/Badge/Badge.tsx

@@ -0,0 +1,31 @@
+import { HTMLAttributes } from 'react';
+import clsx from 'clsx';
+
+export type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  tone?: BadgeTone;
+}
+
+const toneClasses: Record<BadgeTone, string> = {
+  neutral: 'bg-gray-100 text-gray-700',
+  success: 'bg-green-100 text-green-700',
+  warning: 'bg-amber-100 text-amber-800',
+  danger: 'bg-red-100 text-red-700',
+  info: 'bg-sky-100 text-sky-700',
+};
+
+const Badge = ({ tone = 'neutral', className, children, ...rest }: BadgeProps) => (
+  <span
+    className={clsx(
+      'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+      toneClasses[tone],
+      className,
+    )}
+    {...rest}
+  >
+    {children}
+  </span>
+);
+
+export default Badge;

packages/ui-common/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Badge';
+export type { BadgeProps, BadgeTone } from './Badge';

packages/ui-common/src/components/Button/Button.tsx

@@ -0,0 +1,46 @@
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+import clsx from 'clsx';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  isLoading?: boolean;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary: 'bg-blue-600 text-white hover:bg-blue-700 disabled:bg-blue-300',
+  secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 disabled:bg-gray-50',
+  ghost: 'bg-transparent text-gray-900 hover:bg-gray-100',
+  danger: 'bg-red-600 text-white hover:bg-red-700 disabled:bg-red-300',
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: 'px-3 py-1.5 text-sm',
+  md: 'px-4 py-2 text-base',
+  lg: 'px-6 py-3 text-lg',
+};
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = 'primary', size = 'md', isLoading, disabled, className, children, ...rest }, ref) => (
+    <button
+      ref={ref}
+      disabled={disabled || isLoading}
+      className={clsx(
+        'inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:cursor-not-allowed',
+        variantClasses[variant],
+        sizeClasses[size],
+        className,
+      )}
+      {...rest}
+    >
+      {isLoading ? 'Loading...' : children}
+    </button>
+  ),
+);
+
+Button.displayName = 'Button';
+
+export default Button;

packages/ui-common/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';

packages/ui-common/src/components/Form/FormField.tsx

@@ -0,0 +1,38 @@
+import { InputHTMLAttributes, ReactNode, forwardRef } from 'react';
+import clsx from 'clsx';
+
+export interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  error?: string;
+  hint?: ReactNode;
+}
+
+const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
+  ({ label, error, hint, id, className, ...rest }, ref) => {
+    const fieldId = id ?? rest.name;
+    return (
+      <label className="flex flex-col gap-1 text-sm" htmlFor={fieldId}>
+        <span className="font-medium text-gray-700">{label}</span>
+        <input
+          ref={ref}
+          id={fieldId}
+          aria-invalid={Boolean(error)}
+          className={clsx(
+            'rounded-md border px-3 py-2 text-gray-900 outline-none transition focus:ring-2',
+            error
+              ? 'border-red-400 focus:border-red-500 focus:ring-red-100'
+              : 'border-gray-300 focus:border-blue-500 focus:ring-blue-100',
+            className,
+          )}
+          {...rest}
+        />
+        {hint && !error ? <span className="text-xs text-gray-500">{hint}</span> : null}
+        {error ? <span className="text-xs text-red-600">{error}</span> : null}
+      </label>
+    );
+  },
+);
+
+FormField.displayName = 'FormField';
+
+export default FormField;

packages/ui-common/src/components/Form/index.ts

@@ -0,0 +1,2 @@
+export { default as FormField } from './FormField';
+export type { FormFieldProps } from './FormField';

packages/ui-common/src/components/Layout/DashboardLayout.tsx

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import Sidebar, { SidebarItem } from './Sidebar';
+
+export interface DashboardLayoutProps {
+  title?: string;
+  sidebarItems: SidebarItem[];
+  activeHref?: string;
+  onNavigate?: (href: string) => void;
+  headerRight?: ReactNode;
+  children: ReactNode;
+}
+
+const DashboardLayout = ({
+  title,
+  sidebarItems,
+  activeHref,
+  onNavigate,
+  headerRight,
+  children,
+}: DashboardLayoutProps) => (
+  <div className="flex min-h-screen bg-gray-50">
+    <Sidebar
+      title={title}
+      items={sidebarItems}
+      activeHref={activeHref}
+      onNavigate={onNavigate}
+    />
+    <div className="flex flex-1 flex-col">
+      <header className="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-3">
+        <div className="text-sm font-medium text-gray-700">{title}</div>
+        <div>{headerRight}</div>
+      </header>
+      <main className="flex-1 overflow-auto p-6">{children}</main>
+    </div>
+  </div>
+);
+
+export default DashboardLayout;

packages/ui-common/src/components/Layout/Sidebar.tsx

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import clsx from 'clsx';
+
+export interface SidebarItem {
+  label: string;
+  href: string;
+  icon?: ReactNode;
+}
+
+export interface SidebarProps {
+  title?: string;
+  items: SidebarItem[];
+  activeHref?: string;
+  onNavigate?: (href: string) => void;
+}
+
+const Sidebar = ({ title, items, activeHref, onNavigate }: SidebarProps) => (
+  <aside className="flex w-60 flex-col gap-1 border-r border-gray-200 bg-white px-3 py-4">
+    {title ? <div className="px-2 pb-3 text-sm font-semibold text-gray-700">{title}</div> : null}
+    <nav className="flex flex-col gap-0.5">
+      {items.map((item) => (
+        <a
+          key={item.href}
+          href={item.href}
+          onClick={(event) => {
+            if (onNavigate) {
+              event.preventDefault();
+              onNavigate(item.href);
+            }
+          }}
+          className={clsx(
+            'flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors',
+            activeHref === item.href
+              ? 'bg-blue-50 text-blue-700'
+              : 'text-gray-700 hover:bg-gray-100',
+          )}
+        >
+          {item.icon ? <span className="text-gray-500">{item.icon}</span> : null}
+          <span>{item.label}</span>
+        </a>
+      ))}
+    </nav>
+  </aside>
+);
+
+export default Sidebar;

packages/ui-common/src/components/Layout/index.ts

@@ -0,0 +1,4 @@
+export { default as Sidebar } from './Sidebar';
+export { default as DashboardLayout } from './DashboardLayout';
+export type { SidebarProps, SidebarItem } from './Sidebar';
+export type { DashboardLayoutProps } from './DashboardLayout';

packages/ui-common/src/components/Modal/Modal.tsx

@@ -0,0 +1,48 @@
+import { ReactNode, useEffect } from 'react';
+
+export interface ModalProps {
+  open: boolean;
+  title?: string;
+  onClose: () => void;
+  children: ReactNode;
+  footer?: ReactNode;
+}
+
+const Modal = ({ open, title, onClose, children, footer }: ModalProps) => {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-lg rounded-lg bg-white shadow-xl"
+        onClick={(event) => event.stopPropagation()}
+      >
+        {title ? (
+          <div className="border-b border-gray-200 px-4 py-3 text-base font-semibold text-gray-900">
+            {title}
+          </div>
+        ) : null}
+        <div className="px-4 py-4 text-sm text-gray-700">{children}</div>
+        {footer ? (
+          <div className="flex justify-end gap-2 border-t border-gray-200 px-4 py-3">{footer}</div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

packages/ui-common/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Modal';
+export type { ModalProps } from './Modal';

packages/ui-common/src/components/Table/Table.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+
+export interface TableColumn<T> {
+  key: string;
+  header: string;
+  render?: (row: T) => ReactNode;
+  width?: string;
+}
+
+export interface TableProps<T> {
+  columns: TableColumn<T>[];
+  data: T[];
+  rowKey: (row: T) => string;
+  emptyMessage?: string;
+}
+
+function Table<T>({ columns, data, rowKey, emptyMessage = 'No data' }: TableProps<T>) {
+  return (
+    <div className="overflow-x-auto rounded-md border border-gray-200">
+      <table className="min-w-full divide-y divide-gray-200 text-sm">
+        <thead className="bg-gray-50">
+          <tr>
+            {columns.map((column) => (
+              <th
+                key={column.key}
+                style={column.width ? { width: column.width } : undefined}
+                className="px-4 py-2 text-left font-medium text-gray-700"
+              >
+                {column.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-100 bg-white">
+          {data.length === 0 ? (
+            <tr>
+              <td colSpan={columns.length} className="px-4 py-6 text-center text-gray-500">
+                {emptyMessage}
+              </td>
+            </tr>
+          ) : (
+            data.map((row) => (
+              <tr key={rowKey(row)} className="hover:bg-gray-50">
+                {columns.map((column) => (
+                  <td key={column.key} className="px-4 py-2 text-gray-900">
+                    {column.render
+                      ? column.render(row)
+                      : ((row as unknown as Record<string, ReactNode>)[column.key] ?? '-')}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Table;

packages/ui-common/src/components/Table/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Table';
+export type { TableProps, TableColumn } from './Table';

packages/ui-common/src/index.ts

@@ -0,0 +1,26 @@
+export { default as Button } from './components/Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './components/Button';
+
+export { default as Table } from './components/Table';
+export type { TableProps, TableColumn } from './components/Table';
+
+export { FormField } from './components/Form';
+export type { FormFieldProps } from './components/Form';
+
+export { default as Modal } from './components/Modal';
+export type { ModalProps } from './components/Modal';
+
+export { default as Badge } from './components/Badge';
+export type { BadgeProps, BadgeTone } from './components/Badge';
+
+export {
+  Sidebar,
+  DashboardLayout,
+} from './components/Layout';
+export type {
+  SidebarProps,
+  SidebarItem,
+  DashboardLayoutProps,
+} from './components/Layout';
+
+export * from './theme';

packages/ui-common/src/theme/colors.ts

@@ -0,0 +1,24 @@
+export const colors = {
+  primary: {
+    50: '#eff6ff',
+    100: '#dbeafe',
+    500: '#3b82f6',
+    600: '#2563eb',
+    700: '#1d4ed8',
+    900: '#1e3a8a',
+  },
+  neutral: {
+    50: '#f9fafb',
+    100: '#f3f4f6',
+    200: '#e5e7eb',
+    400: '#9ca3af',
+    600: '#4b5563',
+    900: '#111827',
+  },
+  success: '#16a34a',
+  warning: '#f59e0b',
+  danger: '#dc2626',
+  info: '#0ea5e9',
+} as const;
+
+export type Colors = typeof colors;

packages/ui-common/src/theme/index.ts

@@ -0,0 +1,2 @@
+export * from './colors';
+export * from './typography';

packages/ui-common/src/theme/typography.ts

@@ -0,0 +1,28 @@
+export const typography = {
+  fontFamily: {
+    sans: '"Inter", "Segoe UI", sans-serif',
+    mono: '"Fira Code", "Menlo", monospace',
+  },
+  fontSize: {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    base: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+  },
+  fontWeight: {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+  },
+  lineHeight: {
+    tight: 1.25,
+    normal: 1.5,
+    relaxed: 1.75,
+  },
+} as const;
+
+export type Typography = typeof typography;