Base UI by MUI実践ガイド - スタイルレスUIで自由なデザインシステム構築

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

// types.d.ts
declare module '@mui/base' {
  // カスタム型定義を追加
}

/* globals.css - リセットとベーススタイル */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* カスタムプロパティの定義 */
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-background: #ffffff;
  --color-text: #1f2937;
  
  /* スペーシング */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* トランジション */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1f2937;
    --color-text: #f9fafb;
  }
}

src/
├── components/
│   ├── base/           # Base UIコンポーネントのラッパー
│   │   ├── Button/
│   │   ├── Input/
│   │   ├── Modal/
│   │   └── Select/
│   ├── ui/             # アプリケーション固有のコンポーネント
│   └── layout/         # レイアウトコンポーネント
├── styles/
│   ├── globals.css
│   ├── variables.css
│   └── utilities.css
├── hooks/              # カスタムフック
└── utils/              # ユーティリティ関数

import { Select, Option } from '@mui/base';
import { ChevronDownIcon } from '@heroicons/react/24/outline';

interface SelectFieldProps {
  label: string;
  options: Array<{ value: string; label: string }>;
  placeholder?: string;
}

export function SelectField({ label, options, placeholder }: SelectFieldProps) {
  return (
    <div className="form-field">
      <label className="form-label">{label}</label>
      <Select
        className="custom-select"
        placeholder={placeholder}
        slots={{
          root: 'button',
          listbox: 'ul',
          popup: 'div',
        }}
        slotProps={{
          root: {
            className: 'select-button',
          },
          listbox: {
            className: 'select-listbox',
          },
          popup: {
            className: 'select-popup',
          },
        }}
      >
        <span className="select-value" />
        <ChevronDownIcon className="select-icon" />
        
        {options.map((option) => (
          <Option
            key={option.value}
            value={option.value}
            className="select-option"
          >
            {option.label}
          </Option>
        ))}
      </Select>
    </div>
  );
}

import { Switch } from '@mui/base/Switch';
import { useState } from 'react';

interface ToggleSwitchProps {
  label: string;
  description?: string;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
}

export function ToggleSwitch({
  label,
  description,
  defaultChecked = false,
  onChange,
}: ToggleSwitchProps) {
  const [checked, setChecked] = useState(defaultChecked);
  
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newChecked = event.target.checked;
    setChecked(newChecked);
    onChange?.(newChecked);
  };
  
  return (
    <div className="switch-container">
      <div className="switch-content">
        <label htmlFor="custom-switch" className="switch-label">
          {label}
        </label>
        {description && (
          <p className="switch-description">{description}</p>
        )}
      </div>
      <Switch
        id="custom-switch"
        checked={checked}
        onChange={handleChange}
        slotProps={{
          root: {
            className: 'switch-root',
          },
          input: {
            'aria-label': label,
          },
          thumb: {
            className: 'switch-thumb',
          },
          track: {
            className: 'switch-track',
          },
        }}
      />
    </div>
  );
}

import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';

const formSchema = z.object({
  name: z.string().min(2, '名前は2文字以上で入力してください'),
  email: z.string().email('有効なメールアドレスを入力してください'),
  role: z.string().min(1, '役割を選択してください'),
  notifications: z.boolean(),
});

type FormData = z.infer<typeof formSchema>;

export function UserForm() {
  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: '',
      email: '',
      role: '',
      notifications: false,
    },
  });

  const onSubmit = async (data: FormData) => {
    await new Promise((resolve) => setTimeout(resolve, 2000));
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="user-form">
      <Controller
        name="name"
        control={control}
        render={({ field }) => (
          <TextField
            {...field}
            label="名前"
            error={errors.name?.message}
            required
          />
        )}
      />
      
      <Controller
        name="email"
        control={control}
        render={({ field }) => (
          <TextField
            {...field}
            type="email"
            label="メールアドレス"
            error={errors.email?.message}
            required
          />
        )}
      />
      
      <Controller
        name="role"
        control={control}
        render={({ field }) => (
          <SelectField
            {...field}
            label="役割"
            options={[
              { value: 'admin', label: '管理者' },
              { value: 'user', label: 'ユーザー' },
              { value: 'guest', label: 'ゲスト' },
            ]}
            error={errors.role?.message}
          />
        )}
      />
      
      <Controller
        name="notifications"
        control={control}
        render={({ field: { value, onChange } }) => (
          <ToggleSwitch
            label="通知を受け取る"
            description="重要な更新情報をメールで受け取ります"
            checked={value}
            onChange={onChange}
          />
        )}
      />
      
      <button
        type="submit"
        disabled={isSubmitting}
        className="submit-button"
      >
        {isSubmitting ? '送信中...' : '送信'}
      </button>
    </form>
  );
}