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

基本情報ブロック

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

🚀 インストール​

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

📖 使用方法​

import {BasicInformation} from '@nodeblocks/frontend-basic-information-block';
function BasicInformationForm() {
  return (
    <BasicInformation
      onChange={(setError, getValues) => {
        console.log('Form values:', getValues());
        const values = getValues();
        if (!values.NameInput) {
          setError('NameInput', {message: 'Name is required', type: 'required'});
        }
      }}
      onSubmit={formData => {
        console.log('Form submitted:', formData);
      }}
      onInvalid={errors => {
        console.log('Form validation errors:', errors);
      }}>
      <BasicInformation.Title>Basic Information</BasicInformation.Title>
      <BasicInformation.Subtitle>Please fill in your basic information</BasicInformation.Subtitle>
      <BasicInformation.NameInput />
      <BasicInformation.FuriganaInput />
      <BasicInformation.PostalCodeInput />
      <BasicInformation.PrefectureSelect />
      <BasicInformation.CityInput />
      <BasicInformation.AddressInput />
      <BasicInformation.PhoneInput />
      <BasicInformation.SubmitButton>Submit</BasicInformation.SubmitButton>
    </BasicInformation>
  );
}

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

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

メインの BasicInformation コンポーネントは HTML form 要素のすべてのプロパティを継承し（onSubmit、onChange、children は上書きされます）、さらに次を追加します:

PropTypeDefaultDescription
onSubmit(data: T) => voidRequiredCallback function triggered when form is submitted with valid data
onChange(setError, getValues) => voidRequiredCallback function triggered when form values change. Provides form control functions for validation
onInvalid(errors: FieldErrors<T>) => voidRequiredCallback function triggered when form submission fails validation
defaultValuesDefaultValues<T>undefinedDefault form values to populate fields on initial render
childrenBlocksOverrideundefinedCustom block components to override default rendering
classNamestringundefinedAdditional CSS class name for styling the form container

サブコンポーネント​

BasicInformation コンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントはメインコンポーネントのコンテキストからデフォルト値を受け取り、props でそれらを上書きできます。

BasicInformation.Title​

HTML h2 要素のすべてのプロパティを継承し、さらに次を追加します:

PropTypeDefaultDescription
childrenReactNode"基本情報"Content to display as the title

BasicInformation.Subtitle​

HTML div 要素のすべてのプロパティを継承し、さらに次を追加します:

PropTypeDefaultDescription
childrenReactNodeDefault required fields messageContent to display as the subtitle - typically shows required field information

BasicInformation.NameInput​

deepMerge を使ってデフォルトのフィールド設定と渡された props を結合します。内部の Input コンポーネントのすべての props を継承し、さらに次を追加します:

| Prop | Type | Default | Description | |------|------|---------|-------------|s | name | string | "NameInput" | Field name for form data | | className | string | undefined | Additional CSS class name for styling | | errorText | string | undefined | Error text for the input | | isDisabled | boolean | undefined | Whether the input is disabled | | isRequired | boolean | undefined | Whether the input is required | | label | string | "氏名" | Label of the input field | | labelWeight | enum | "bold" | Label weight | | onOperationClick | () => void | undefined | Operation onClick callback | | postfixText | string | undefined | Text to place after the component | | showPassword | boolean | undefined | Whether to show password |

注: このコンポーネントは、いくつかの共通 HTML input 要素プロパティも追加で継承します。

BasicInformation.FuriganaInput​

PropTypeDefaultDescription
namestring"FuriganaInput"Field name for form data
classNamestringundefinedAdditional CSS class name for styling
errorTextstringundefinedError text for the input
isDisabledbooleanundefinedWhether the input is disabled
isRequiredbooleanundefinedWhether the input is required
labelstring"フリガナ"Label of the input field
labelWeightenum"bold"Label weight
onOperationClick() => voidundefinedOperation onClick callback
postfixTextstringundefinedText to place after the component
showPasswordbooleanundefinedWhether to show password

注: このコンポーネントは、いくつかの共通 HTML input 要素プロパティも追加で継承します。

BasicInformation.PostalCodeInput​

PropTypeDefaultDescription
namestring"PostalCodeInput"Field name for form data
classNamestringundefinedAdditional CSS class name for styling
errorTextstringundefinedError text for the input
isDisabledbooleanundefinedWhether the input is disabled
isRequiredbooleanundefinedWhether the input is required
labelstring"郵便番号"Label of the input field
labelWeightenum"bold"Label weight
onOperationClick() => voidundefinedOperation onClick callback
postfixTextstringundefinedText to place after the component
showPasswordbooleanundefinedWhether to show password

注: このコンポーネントは、いくつかの共通 HTML input 要素プロパティも追加で継承します。

BasicInformation.PrefectureSelect​

PropTypeDefaultDescription
namestring"PrefectureSelect"Field name for form data
labelstring"都道府県"Field label
labelWeightenum"bold"Label weight
selectOptionValuesArray<{value: string, label: string}>[]Array of prefecture options
isRequiredbooleanundefinedWhether the field is required
isDisabledbooleanundefinedWhether the input is disabled
errorTextstringundefinedError text for the input
classNamestringundefinedAdditional CSS class name for styling

注: このコンポーネントは、いくつかの共通 HTML select 要素プロパティも追加で継承します。

BasicInformation.CityInput​

PropTypeDefaultDescription
namestring"CityInput"Field name for form data
classNamestringundefinedAdditional CSS class name for styling
errorTextstringundefinedError text for the input
isDisabledbooleanundefinedWhether the input is disabled
isRequiredbooleanundefinedWhether the input is required
labelstring"市区町村"Label of the input field
labelWeightenum"bold"Label weight
onOperationClick() => voidundefinedOperation onClick callback
postfixTextstringundefinedText to place after the component
showPasswordbooleanundefinedWhether to show password

注: このコンポーネントは、いくつかの共通 HTML input 要素プロパティも追加で継承します。

BasicInformation.AddressInput​

PropTypeDefaultDescription
namestring"AddressInput"Field name for form data
classNamestringundefinedAdditional CSS class name for styling
errorTextstringundefinedError text for the input
isDisabledbooleanundefinedWhether the input is disabled
isRequiredbooleanundefinedWhether the input is required
labelstring"町名・番地・建物"Label of the input field
labelWeightenum"bold"Label weight
onOperationClick() => voidundefinedOperation onClick callback
postfixTextstringundefinedText to place after the component
showPasswordbooleanundefinedWhether to show password

注: このコンポーネントは、いくつかの共通 HTML input 要素プロパティも追加で継承します。

BasicInformation.PhoneInput​

PropTypeDefaultDescription
namestring"PhoneInput"Field name for form data
classNamestringundefinedAdditional CSS class name for styling
errorTextstringundefinedError text for the input
isDisabledbooleanundefinedWhether the input is disabled
isRequiredbooleanundefinedWhether the input is required
labelstring"連絡先電話番号"Label of the input field
labelWeightenum"bold"Label weight
onOperationClick() => voidundefinedOperation onClick callback
postfixTextstringundefinedText to place after the component
showPasswordbooleanundefinedWhether to show password
inputModestring"numeric"Input mode for mobile keyboards

注: このコンポーネントは、いくつかの共通 HTML input 要素プロパティも追加で継承します。

BasicInformation.SubmitButton​

@basaldev/blocks-frontend-framework の Button コンポーネントのすべての props を継承し、さらに次を追加します:

PropTypeDefaultDescription
childrenReactNode"次へ"Text to place inside the button
classNamestringundefinedAdditional CSS class name for styling
fillenum"fill"Button fill style
iconenumundefinedOptional icon for the left-hand side of the button
iconColorenumundefinedColor for the left-hand side icon. When not provided, a default color for the fill type will be used.
isDisabledbooleanfalseWhether the button is disabled and cannot be used
onClickfunctionundefinedFunction to handle button click
sizeenum"M"Button vertical size
textAlignenum"center"Button icon and text positioning within the button
textColorenum"default"Button text color
textEmphasisbooleanfalseButton text weight
textSizeenum"M"Button text size
typeenum"submit"Button purpose (affects html type)

注: このコンポーネントは、いくつかの共通 HTML button 要素プロパティも追加で継承します。

追加フィールドコンポーネント​

このコンポーネントは、カスタムフォームで使用できる追加のフィールドタイプも提供します:

BasicInformation.Input​

PropTypeDefaultDescription
namestringRequiredField name for form data
errorTextstringundefinedError text for the input
isDisabledbooleanundefinedWhether the input is disabled
isRequiredbooleanundefinedWhether the input is required
labelstringRequiredLabel of the input field
labelWeightenum"regular"Label weight
onOperationClick() => voidundefinedOperation onClick callback
postfixTextstringundefinedText to place after the component
showPasswordbooleanundefinedWhether to show password

🔧 TypeScript サポート​

包括的な型定義を備えた完全な TypeScript サポート:

import {BasicInformation} from '@nodeblocks/frontend-basic-information-block';
//in future we will not use react-hook-form, we will use our own form handling
import {FieldErrors, UseFormGetValues, UseFormSetError} from 'react-hook-form';

// Default form data structure
interface DefaultBasicInformationFormData {
  NameInput: string;
  FuriganaInput: string;
  PostalCodeInput: string;
  PrefectureSelect: string;
  CityInput: string;
  AddressInput: string;
  PhoneInput: string;
}

// Extend with custom fields (component uses union type)

const MyBasicInformationForm = () => {
  const handleSubmit = (formData: DefaultBasicInformationFormData) => {
    console.log('Form submitted:', formData);
    // Handle form submission
  };

  const handleInvalid = (errors: FieldErrors<DefaultBasicInformationFormData>) => {
    console.log('Validation errors:', errors);
    // Handle validation errors
  };

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

    // Custom validation
    if (values.PhoneInput && values.PhoneInput.length < 10) {
      setError('PhoneInput', {message: 'Phone number too short'});
    }
  };

  return (
    <BasicInformation<DefaultBasicInformationFormData>
      onSubmit={handleSubmit}
      onInvalid={handleInvalid}
      onChange={handleChange}
      defaultValues={{NameInput: 'John Doe'}}>
      <BasicInformation.Title>Basic Information</BasicInformation.Title>
      <BasicInformation.Subtitle>Please provide your details</BasicInformation.Subtitle>
      <BasicInformation.NameInput />
      <BasicInformation.FuriganaInput />
      <BasicInformation.PostalCodeInput />
      <BasicInformation.PrefectureSelect />
      <BasicInformation.CityInput />
      <BasicInformation.AddressInput />
      <BasicInformation.PhoneInput />
      <BasicInformation.SubmitButton>Submit</BasicInformation.SubmitButton>
    </BasicInformation>
  );
};

React、TypeScript、そして最新の Web 標準で構築されています。