Component API Design

コンポーネント API 設計の原則

1. MUI ネイティブ API の活用

MUI コンポーネントの props をそのまま公開し、Figma テンプレートとの 1:1 対応を維持する：

// MUI Button をそのまま re-export
export { default as Button } from "@mui/material/Button";
export type { ButtonProps } from "@mui/material/Button";

2. テーマによるカスタマイズ

コンポーネントの見た目はテーマの styleOverrides に集約し、コンポーネントファイルをシンプルに保つ：

tokens/theme.ts

export const theme = createTheme({
  components: {
    MuiButton: {
      defaultProps: { disableElevation: true },
      styleOverrides: {
        root: { textTransform: "none" },
      },
    },
  },
});

3. ThemeProvider の提供

PlaybookProvider で ThemeProvider + CssBaseline をバンドルし、利用側のセットアップを簡素化：

import { PlaybookProvider } from "@playbook/ui";

function App() {
  return (
    <PlaybookProvider>
      <YourApp />
    </PlaybookProvider>
  );
}

4. tss-react によるカスタムスタイル

MUI にないカスタムコンポーネントには tss-react を使い、テーマトークンを参照したスタイルを定義：

import { tss } from "tss-react/mui";

const useStyles = tss.create(({ theme }) => ({
  root: {
    padding: theme.spacing(2),
    borderRadius: theme.shape.borderRadius,
    backgroundColor: theme.palette.primary.main,
  },
}));