属性選択ブロック

AttributeSelectionコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルな属性選択フォームです。フォームバリデーション、エラーハンドリング、モダンなデザインパターンを備えた属性選択のための完全なインターフェースを提供します。

🚀 インストール

npm install @nodeblocks/frontend-attribute-selection-block

📖 使用方法

import {AttributeSelection} from '@nodeblocks/frontend-attribute-selection-block';

基本的な使用方法
高度な使用方法

ライブエディター

function BasicAttributeSelection() {
  return (
    <AttributeSelection
      onSubmit={formData => {
        console.log('選択された属性:', formData);
      }}
      onChange={(setError, getValues) => {
        const values = getValues();
        console.log('フォーム値:', values);
      }}
      onCancel={reset => {
        reset();
        console.log('フォームがキャンセルされました');
      }}
      defaultValues={{example: true}}
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '16px',
      }}>
      <AttributeSelection.Title style={{color: 'black'}}>タイトル</AttributeSelection.Title>
      <AttributeSelection.Subtitle style={{color: 'black'}}>サブタイトル</AttributeSelection.Subtitle>
      <AttributeSelection.FieldName style={{color: 'black'}}>フィールド名</AttributeSelection.FieldName>
      <input type="checkbox" name="example" />
      <AttributeSelection.SubmitButton>送信</AttributeSelection.SubmitButton>
      <AttributeSelection.CancelButton>キャンセル</AttributeSelection.CancelButton>
    </AttributeSelection>
  );
}

結果

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

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

プロパティ	型	デフォルト	説明
`onSubmit`	`(data: T) => void`	必須	有効なデータでフォームが送信されたときにトリガーされるコールバック関数
`onChange`	`(setError: UseFormSetError<T>, getValues: UseFormGetValues<T>) => void`	必須	フォーム値が変更されたときにトリガーされるコールバック関数
`onCancel`	`(reset: UseFormReset<T>) => void`	必須	キャンセルボタンがクリックされたときにトリガーされるコールバック関数
`defaultValues`	`DefaultValues<T>`	`undefined`	初期レンダリング時にフィールドに設定するデフォルトフォーム値
`className`	`string`	`undefined`	フォームコンテナスタイリング用の追加CSSクラス名
`children`	`BlocksOverride`	`undefined`	フォームコンポーネントのカスタムブロックオーバーライド

注意: このコンポーネントはすべてのHTML form 要素プロパティを継承します。

サブコンポーネント

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

AttributeSelection.Title

プロパティ	型	デフォルト	説明
`children`	`ReactNode`	`"職種"`	フォームヘッダーのタイトルテキストコンテンツ
`className`	`string`	`undefined`	スタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML h2 要素プロパティを継承します。

AttributeSelection.Subtitle

プロパティ	型	デフォルト	説明
`children`	`ReactNode`	`"ご自身の職種を選択してください"`	フォーム説明を提供するサブタイトルテキストコンテンツ
`className`	`string`	`undefined`	スタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

AttributeSelection.FieldName

プロパティ	型	デフォルト	説明
`children`	`ReactNode`	`"役割"`	フォーム入力の上に表示されるフィールド名テキストコンテンツ
`className`	`string`	`undefined`	スタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

AttributeSelection.Checkbox

プロパティ	型	デフォルト	説明
`name`	`string`	`"example"`	フォームデータとバリデーションに使用されるフィールド名
`value`	`boolean`	`false`	チェックボックスのデフォルトチェック状態
`label`	`string`	`undefined`	チェックボックスの横に表示されるラベルテキスト
`isRequired`	`boolean`	`false`	フォームバリデーションでチェックボックスが必須かどうか
`isDisabled`	`boolean`	`false`	チェックボックスが無効かどうか
`className`	`string`	`undefined`	スタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML checkbox 要素プロパティを継承します。

AttributeSelection.SubmitButton

プロパティ	型	デフォルト	説明
`children`	`ReactNode`	`"次へ"`	ボタンテキストコンテンツ
`className`	`string`	`undefined`	スタイリング用の追加CSSクラス名
`fill`	`enum`	`"fill"`	ボタンフィルスタイル
`icon`	`enum`	`undefined`	ボタン左側のオプションアイコン
`iconColor`	`enum`	`undefined`	左側アイコンの色。提供されない場合、フィルタイプのデフォルト色が使用されます。
`isDisabled`	`boolean`	`false`	ボタンが無効で使用できないかどうか
`onClick`	`function`	`undefined`	ボタンクリックを処理する関数
`size`	`enum`	`"M"`	ボタンの縦サイズ
`textAlign`	`enum`	`"center"`	ボタン内でのアイコンとテキストの位置
`textColor`	`enum`	`"default"`	ボタンテキストの色
`textEmphasis`	`boolean`	`false`	ボタンテキストの太さ
`textSize`	`enum`	`"M"`	ボタンテキストのサイズ
`type`	`enum`	`"submit"`	ボタンの目的（htmlタイプに影響）

AttributeSelection.CancelButton

プロパティ	型	デフォルト	説明
`children`	`ReactNode`	`"戻る"`	ボタンテキストコンテンツ
`className`	`string`	`undefined`	スタイリング用の追加CSSクラス名
`fill`	`enum`	`"fill"`	ボタンフィルスタイル
`icon`	`enum`	`undefined`	ボタン左側のオプションアイコン
`iconColor`	`enum`	`undefined`	左側アイコンの色。提供されない場合、フィルタイプのデフォルト色が使用されます。
`isDisabled`	`boolean`	`false`	ボタンが無効で使用できないかどうか
`onClick`	`function`	`undefined`	ボタンクリックを処理する関数
`size`	`enum`	`"M"`	ボタンの縦サイズ
`textAlign`	`enum`	`"center"`	ボタン内でのアイコンとテキストの位置
`textColor`	`enum`	`"default"`	ボタンテキストの色
`textEmphasis`	`boolean`	`false`	ボタンテキストの太さ
`textSize`	`enum`	`"M"`	ボタンテキストのサイズ
`type`	`enum`	`"button"`	ボタンの目的（htmlタイプに影響）

🔧 TypeScript サポート

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

import {AttributeSelection} from '@nodeblocks/frontend-attribute-selection-block';
import {UseFormGetValues, UseFormSetError} from 'react-hook-form';

// 独自のフォームデータインターフェースを定義
interface CustomAttributeFormData {
  role: boolean;
  department: boolean;
  experience: boolean;
  skills: boolean;
}

const handleSubmit = (formData: CustomAttributeFormData) => {
  // 型安全なフォーム処理
  console.log(formData.role, formData.department, formData.experience);
};

const handleChange = (
  setError: UseFormSetError<CustomAttributeFormData>,
  getValues: UseFormGetValues<CustomAttributeFormData>,
) => {
  const values = getValues();
  // フォーム値をバリデーションし、必要に応じてエラーを設定
  if (!values.role && !values.department) {
    setError('role', {message: '少なくとも1つのオプションを選択してください'});
  }
};

const AttributeSelectionForm = () => {
  return (
    <AttributeSelection<CustomAttributeFormData>
      onSubmit={handleSubmit}
      onChange={handleChange}
      onCancel={reset => reset()}
      defaultValues={{role: false, department: false, experience: false, skills: false}}>
      <AttributeSelection.Title>属性を選択</AttributeSelection.Title>
      <AttributeSelection.Subtitle>該当するオプションを選択してください</AttributeSelection.Subtitle>
      <AttributeSelection.FieldName>職業情報</AttributeSelection.FieldName>
      <AttributeSelection.Checkbox name="role" label="管理職" />
      <AttributeSelection.Checkbox name="department" label="技術部門" />
      <AttributeSelection.Checkbox name="experience" label="5年以上の経験" />
      <AttributeSelection.Checkbox name="skills" label="リーダーシップスキル" />
      <AttributeSelection.SubmitButton>続行</AttributeSelection.SubmitButton>
      <AttributeSelection.CancelButton>戻る</AttributeSelection.CancelButton>
    </AttributeSelection>
  );
};

React、TypeScript、モダンなウェブ標準を使用して❤️で構築されました。

🚀 インストール​

📖 使用方法​

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

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

サブコンポーネント​

AttributeSelection.Title​

AttributeSelection.Subtitle​

AttributeSelection.FieldName​

AttributeSelection.Checkbox​

AttributeSelection.SubmitButton​

AttributeSelection.CancelButton​

🔧 TypeScript サポート​