メインコンテンツまでスキップ

基本情報ブロック

BasicInformationコンポーネントは、React、TypeScript、MUIで構築された、ユーザーの基本情報を収集するための完全にカスタマイズ可能でアクセシブルなフォームです。モダンなデザインパターン、react-hook-formを使用したフォームバリデーション、柔軟なカスタマイズオプションを備えた完全な住所と連絡先情報のインターフェースを提供します。

🚀 インストール​

npm install @nodeblocks/frontend-basic-information-block@0.2.0

📖 使用法​

import {BasicInformation} from '@nodeblocks/frontend-basic-information-block';
ライブエディター
function BasicInformationForm() {
  return (
    <BasicInformation
      onChange={(setError, getValues) => {
        console.log('フォーム値:', getValues());
        const values = getValues();
        if (!values.NameInput) {
          setError('NameInput', {message: '氏名は必須です', type: 'required'});
        }
      }}
      onSubmit={formData => {
        console.log('フォームが送信されました:', formData);
      }}
      onInvalid={errors => {
        console.log('フォームバリデーションエラー:', errors);
      }}>
      <BasicInformation.Title>基本情報</BasicInformation.Title>
      <BasicInformation.Subtitle>基本情報を入力してください</BasicInformation.Subtitle>
      <BasicInformation.NameInput />
      <BasicInformation.FuriganaInput />
      <BasicInformation.PostalCodeInput />
      <BasicInformation.PrefectureSelect />
      <BasicInformation.CityInput />
      <BasicInformation.AddressInput />
      <BasicInformation.PhoneInput />
      <BasicInformation.SubmitButton>送信</BasicInformation.SubmitButton>
    </BasicInformation>
  );
}
結果
Loading...

🔧 プロパティリファレンス​

メインコンポーネントのプロパティ​

プロパティ型デフォルト説明
onSubmit(data: T) => void必須有効なデータでフォームが送信されたときにトリガーされるコールバック関数
onChange(setError, getValues) => void必須フォーム値が変更されたときにトリガーされるコールバック関数。バリデーション用のフォーム制御関数を提供
onInvalid(errors: FieldErrors<T>) => void必須フォーム送信でバリデーションが失敗したときにトリガーされるコールバック関数
defaultValuesDefaultValues<T>undefined初期レンダリング時にフィールドに設定するデフォルトフォーム値
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント
classNamestringundefinedフォームコンテナスタイリング用の追加CSSクラス名
sxSxPropsundefinedカスタムスタイリング用のMUI sxプロパティ
spacingnumber4子要素間のスペーシング

注意: このコンポーネントは component="form" を持つMUI StackProps<'form'> を拡張し、すべてのStackコンポーネントプロパティを継承します。

サブコンポーネント​

BasicInformationコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

BasicInformation.Title​

プロパティ型デフォルト説明
childrenReactNode"基本情報"タイトルとして表示するコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxPropsundefinedカスタムスタイリング用のMUI sxプロパティ

注意: このコンポーネントは variant="h4" と component="h2" を持つMUI TypographyProps を拡張します。

BasicInformation.Subtitle​

プロパティ型デフォルト説明
childrenReactNode"* は必須事項です"サブタイトルとして表示するコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントは variant="body2" を持つMUI TypographyProps を拡張します。

BasicInformation.NameInput​

プロパティ型デフォルト説明
namestring"NameInput"フォームデータ用のフィールド名
labelstring"氏名"入力フィールドのラベル
placeholderstring"氏名を入力"プレースホルダーテキスト
requiredbooleantrueフィールドが必須かどうか
disabledbooleanfalse入力が無効かどうか
errorbooleanfalseエラー状態を表示するかどうか
helperTextstringundefined入力下に表示されるヘルパーテキスト
fullWidthbooleantrue入力が全幅を占めるかどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI TextFieldProps を拡張します。

BasicInformation.FuriganaInput​

プロパティ型デフォルト説明
namestring"FuriganaInput"フォームデータ用のフィールド名
labelstring"フリガナ"入力フィールドのラベル
placeholderstring"フリガナを入力"プレースホルダーテキスト
requiredbooleantrueフィールドが必須かどうか

注意: このコンポーネントはMUI TextFieldProps を拡張します。

BasicInformation.PostalCodeInput​

プロパティ型デフォルト説明
namestring"PostalCodeInput"フォームデータ用のフィールド名
labelstring"郵便番号"入力フィールドのラベル
placeholderstring"郵便番号を入力"プレースホルダーテキスト
requiredbooleantrueフィールドが必須かどうか
inputModestring"numeric"モバイルキーボード用の入力モード

注意: このコンポーネントはMUI TextFieldProps を拡張します。

BasicInformation.PrefectureSelect​

プロパティ型デフォルト説明
namestring"PrefectureSelect"フォームデータ用のフィールド名
labelstring"都道府県"フィールドラベル
placeholderstring"都道府県を選択"プレースホルダーテキスト
optionsArray<{value: string, label: string}>PREFECTURES (47都道府県)都道府県オプションの配列
requiredbooleantrueフィールドが必須かどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI SelectProps を拡張します。

BasicInformation.CityInput​

プロパティ型デフォルト説明
namestring"CityInput"フォームデータ用のフィールド名
labelstring"市区町村"入力フィールドのラベル
placeholderstring"市区町村を入力"プレースホルダーテキスト
requiredbooleantrueフィールドが必須かどうか

注意: このコンポーネントはMUI TextFieldProps を拡張します。

BasicInformation.AddressInput​

プロパティ型デフォルト説明
namestring"AddressInput"フォームデータ用のフィールド名
labelstring"町名・番地・建物"入力フィールドのラベル
placeholderstring"町名・番地・建物を入力"プレースホルダーテキスト
requiredbooleantrueフィールドが必須かどうか

注意: このコンポーネントはMUI TextFieldProps を拡張します。

BasicInformation.PhoneInput​

プロパティ型デフォルト説明
namestring"PhoneInput"フォームデータ用のフィールド名
labelstring"連絡先電話番号"入力フィールドのラベル
placeholderstring"電話番号を入力（ハイフンなしで入力）"プレースホルダーテキスト
requiredbooleantrueフィールドが必須かどうか
inputModestring"numeric"モバイルキーボード用の入力モード

注意: このコンポーネントはMUI TextFieldProps を拡張します。

BasicInformation.SubmitButton​

プロパティ型デフォルト説明
childrenReactNode"次へ"ボタンテキストコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxPropsundefinedカスタムスタイリング用のMUI sxプロパティ
disabledboolean!formState.isValidボタンが無効かどうか
variantstring"contained"MUI Buttonバリアント
sizestring"large"MUI Buttonサイズ
typestring"submit"ボタンタイプ

注意: このコンポーネントはMUI ButtonProps を拡張します。ボタンはフォームが無効な場合自動的に無効化されます。

BasicInformation.Input​

カスタムフィールドを作成するための汎用入力コンポーネント。

プロパティ型デフォルト説明
namestring必須フォームデータ用のフィールド名（フォームバインディングに必須）
labelstringundefined入力フィールドのラベル
placeholderstringundefinedプレースホルダーテキスト
requiredbooleanfalseフィールドが必須かどうか
disabledbooleanfalse入力が無効かどうか
errorbooleanfalseエラー状態を表示するかどうか
helperTextstringundefined入力下に表示されるヘルパーテキスト
fullWidthbooleantrue入力が全幅を占めるかどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI TextFieldProps を拡張します。

🎨 設定例​

カスタムフィールドラベル​

<BasicInformation.NameInput
  label="氏名"
  placeholder="氏名を入力してください"
  required={true}
/>

カスタム都道府県オプション​

const customPrefectures = [
  {value: 'tokyo', label: '東京都'},
  {value: 'osaka', label: '大阪府'},
  {value: 'kyoto', label: '京都府'},
];

<BasicInformation
  onSubmit={data => console.log(data)}
  onChange={() => {}}
  onInvalid={errors => console.log(errors)}
>
  <BasicInformation.Title>カスタム都道府県</BasicInformation.Title>
  <BasicInformation.NameInput label="氏名" placeholder="氏名を入力してください" required={true} />
  <BasicInformation.PrefectureSelect options={customPrefectures} placeholder="都道府県を選択してください" />
  <BasicInformation.CityInput />
  <BasicInformation.AddressInput />
  <BasicInformation.SubmitButton
    sx={{
      background: 'linear-gradient(135deg, #3b82f6, #2563eb)',
      borderRadius: '12px',
      '&:hover': {
        background: 'linear-gradient(135deg, #2563eb, #1d4ed8)',
      },
    }}
  >
    送信する
  </BasicInformation.SubmitButton>
</BasicInformation>

スタイル付き送信ボタン​

<BasicInformation.SubmitButton
  sx={{
    background: 'linear-gradient(135deg, #3b82f6, #2563eb)',
    borderRadius: '12px',
    '&:hover': {
      background: 'linear-gradient(135deg, #2563eb, #1d4ed8)',
    },
  }}
>
  送信する
</BasicInformation.SubmitButton>

ブロックオーバーライドパターン​

<BasicInformation
  onSubmit={data => console.log(data)}
  onChange={() => {}}
  onInvalid={errors => console.log(errors)}
>
  {({defaultBlocks, defaultBlockOrder}) => ({
    blocks: {
      ...defaultBlocks,
      title: {
        ...defaultBlocks.title,
        props: {
          ...defaultBlocks.title.props,
          children: 'カスタムタイトル',
          sx: {color: 'primary.main'},
        },
      },
      // カスタムブロックを追加
      customInfo: (
        <div
          style={{
            padding: '12px 16px',
            backgroundColor: '#e3f2fd',
            borderRadius: '8px',
            color: '#1976d2',
          }}
        >
          すべてのフィールドは登録に必須です
        </div>
      ),
    },
    blockOrder: [
      'title',
      'customInfo',
      'subtitle',
      ...defaultBlockOrder.filter((k) => k !== 'title' && k !== 'subtitle'),
    ],
  })}
</BasicInformation>

カスタム入力フィールドの追加​

<BasicInformation
  onSubmit={data => console.log(data)}
  onChange={() => {}}
  onInvalid={errors => console.log(errors)}
>
  <BasicInformation.Title>拡張フォーム</BasicInformation.Title>
  <BasicInformation.Subtitle />
  <BasicInformation.NameInput />
  <BasicInformation.Input name="CompanyName" label="会社名" placeholder="会社名を入力" required={false} />
  <BasicInformation.PhoneInput />
  <BasicInformation.SubmitButton />
</BasicInformation>

🔧 TypeScriptサポート​

包括的な型定義による完全なTypeScriptサポート:

import {BasicInformation} from '@nodeblocks/frontend-basic-information-block';
import {DefaultValues, FieldErrors, UseFormGetValues, UseFormSetError} from 'react-hook-form';

// デフォルトフォームデータ構造
interface DefaultBasicInformationFormData {
  NameInput: string;
  FuriganaInput: string;
  PostalCodeInput: string;
  PrefectureSelect: string;
  CityInput: string;
  AddressInput: string;
  PhoneInput: string;
}

// カスタムオプション用の選択オプション型
interface SelectOption {
  value: string;
  label: string;
}

const TypedBasicInformationExample = () => {
  const handleSubmit = (formData: DefaultBasicInformationFormData): void => {
    console.log('フォームが送信されました:', formData);
  };

  const handleInvalid = (errors: FieldErrors<DefaultBasicInformationFormData>): void => {
    console.log('バリデーションエラー:', errors);
  };

  const handleChange = (
    setError: UseFormSetError<DefaultBasicInformationFormData>,
    getValues: UseFormGetValues<DefaultBasicInformationFormData>,
  ): void => {
    const values = getValues();

    // カスタムバリデーション
    if (values.PhoneInput && values.PhoneInput.length < 10) {
      setError('PhoneInput', {message: '電話番号が短すぎます'});
    }
  };

  const defaultValues: DefaultValues<DefaultBasicInformationFormData> = {
    NameInput: '山田太郎',
    PrefectureSelect: '東京都',
  };

  return (
    <BasicInformation<DefaultBasicInformationFormData>
      onSubmit={handleSubmit}
      onInvalid={handleInvalid}
      onChange={handleChange}
      defaultValues={defaultValues}
      sx={{maxWidth: 600, mx: 'auto'}}
    >
      <BasicInformation.Title>基本情報</BasicInformation.Title>
      <BasicInformation.Subtitle>詳細をご入力ください</BasicInformation.Subtitle>
      <BasicInformation.NameInput />
      <BasicInformation.FuriganaInput />
      <BasicInformation.PostalCodeInput />
      <BasicInformation.PrefectureSelect />
      <BasicInformation.CityInput />
      <BasicInformation.AddressInput />
      <BasicInformation.PhoneInput />
      <BasicInformation.SubmitButton>送信</BasicInformation.SubmitButton>
    </BasicInformation>
  );
};

📝 注意事項​

  • コンポーネントは component="form" を持つMUIの Stack コンポーネントをベースとして使用します
  • フォームバリデーションは mode: 'onBlur' を持つ react-hook-form で処理されます
  • すべての入力フィールドは Controller を介してフォームコンテキストに自動的に接続されます
  • 送信ボタンは formState.isValid が false の場合自動的に無効化されます
  • デフォルトブロック: title、subtitle、nameInput、furiganaInput、postalCodeInput、prefectureSelect、cityInput、addressInput、phoneInput、submitButton、input
  • PrefectureSelect コンポーネントはデフォルトで日本の47都道府県すべてを含みます
  • CSSクラスはBEMスタイルの命名に従います: nbb-basic-information、nbb-basic-information-title など
  • 入力フィールドは内部でMUI TextField を使用し、すべてのTextFieldプロパティをサポートします
  • onChange コールバックはリアルタイムバリデーションのためにフォーム値変更ごとにトリガーされます
  • デフォルトパディングは p: 5（40px）、要素間スペーシングは 4（32px）です

React、TypeScript、MUIを使用して❤️で構築されました。