属性選択ブロック

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

🚀 インストール

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

📖 使用法

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

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

function BasicAttributeSelection() {
  return (
    <AttributeSelection
      onSubmit={formData => {
        console.log('Attributes selected:', formData);
      }}
      onChange={(setError, getValues) => {
        const values = getValues();
        console.log('Form values:', values);
      }}
      onCancel={reset => {
        reset();
        console.log('Form cancelled');
      }}
      defaultValues={{example: true}}
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '16px',
      }}>
      <AttributeSelection.Title style={{color: 'black'}}>Title</AttributeSelection.Title>
      <AttributeSelection.Subtitle style={{color: 'black'}}>Subtitle</AttributeSelection.Subtitle>
      <AttributeSelection.FieldName style={{color: 'black'}}>FieldName</AttributeSelection.FieldName>
      <input type="checkbox" name="example" />
      <AttributeSelection.SubmitButton>Submit</AttributeSelection.SubmitButton>
      <AttributeSelection.CancelButton>Cancel</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';

// Define your own form data interface
interface CustomAttributeFormData {
  role: boolean;
  department: boolean;
  experience: boolean;
  skills: boolean;
}

const handleSubmit = (formData: CustomAttributeFormData) => {
  // Type-safe form handling
  console.log(formData.role, formData.department, formData.experience);
};

const handleChange = (
  setError: UseFormSetError<CustomAttributeFormData>,
  getValues: UseFormGetValues<CustomAttributeFormData>,
) => {
  const values = getValues();
  // Validate form values and set errors if needed
  if (!values.role && !values.department) {
    setError('role', {message: 'Please select at least one option'});
  }
};

const AttributeSelectionForm = () => {
  return (
    <AttributeSelection<CustomAttributeFormData>
      onSubmit={handleSubmit}
      onChange={handleChange}
      onCancel={reset => reset()}
      defaultValues={{role: false, department: false, experience: false, skills: false}}>
      <AttributeSelection.Title>Select Your Attributes</AttributeSelection.Title>
      <AttributeSelection.Subtitle>Choose the options that apply to you</AttributeSelection.Subtitle>
      <AttributeSelection.FieldName>Professional Information</AttributeSelection.FieldName>
      <AttributeSelection.Checkbox name="role" label="Management Role" />
      <AttributeSelection.Checkbox name="department" label="Technical Department" />
      <AttributeSelection.Checkbox name="experience" label="5+ Years Experience" />
      <AttributeSelection.Checkbox name="skills" label="Leadership Skills" />
      <AttributeSelection.SubmitButton>Continue</AttributeSelection.SubmitButton>
      <AttributeSelection.CancelButton>Go Back</AttributeSelection.CancelButton>
    </AttributeSelection>
  );
};

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

🚀 インストール​

📖 使用法​

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

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

サブコンポーネント​

AttributeSelection.Title​

AttributeSelection.Subtitle​

AttributeSelection.FieldName​

AttributeSelection.Checkbox​

AttributeSelection.SubmitButton​

AttributeSelection.CancelButton​

🔧 TypeScriptサポート​