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

商品作成ブロック

CreateProduct は MUI ベースの制御型商品作成フォームです。

インストール​

npm install @nodeblocks/frontend-create-product-block

必要なもの​

項目理由
dataフォーム状態の単一の信頼源。title, categoryId, quantity, tags, prefecture, image などのフィールドを含みます
onDataChange検証、分析、または副作用のための更新済み状態とメタデータを受け取ります
errors (optional)ブラケット記法のパスをキーにしたフィールドエラー
labels (optional)セクションタイトル、フィールドラベル、ボタン文言、ドロップゾーンメッセージ、単位サフィックスのルート文言
placeholders (optional)テキスト、数値、セレクトフィールドのルートプレースホルダー文言
selectOptions (optional)カテゴリ、種別、オプション、都道府県フィールドのドロップダウン選択肢
tagTypes and tags (optional)BasicInfo.TagsField のタグセクションを有効にします
onRejectAttachment (optional)画像ドロップゾーンがファイルを拒否したときに呼び出されます
制御コンポーネント

CreateProduct はフォーム状態を保持しません。状態はアプリ側で管理し、data に渡してください。デフォルトの形には title, categoryId, typeId, optionId, quantity, description, details, tags, prefecture, city, onlineAvailability, inventoryNotes, availableFrom, availableUntil, additionalDetails, image が含まれます。

コード例​

ライブエディター
function Example() {
  const defaultData = {
    title: '',
    categoryId: '',
    typeId: '',
    optionId: '',
    quantity: '',
    description: '',
    details: '',
    tags: [],
    prefecture: '',
    city: '',
    onlineAvailability: false,
    inventoryNotes: '',
    availableFrom: '',
    availableUntil: '',
    additionalDetails: '',
    image: null,
  };

  const [data, setData] = React.useState(defaultData);
  const prefectureOptions = [
    { value: 'Hokkaido', label: 'Hokkaido' },
    { value: 'Tokyo', label: 'Tokyo' },
    { value: 'Osaka', label: 'Osaka' },
    { value: 'Okinawa', label: 'Okinawa' },
  ];

  return (
    <CreateProduct
      data={data}
      onDataChange={setData}
      selectOptions={{
        categoryOptions: [
          { value: 'electronics', label: 'Electronics' },
          { value: 'clothing', label: 'Clothing' },
        ],
        typeOptions: [
          { value: 'physical', label: 'Physical' },
          { value: 'digital', label: 'Digital' },
        ],
        optionOptions: [
          { value: 'standard', label: 'Standard' },
          { value: 'premium', label: 'Premium' },
        ],
        prefectureOptions,
      }}
      tagTypes={[
        { id: '100', label: 'Highlights' },
        { id: '200', label: 'Shipping' },
      ]}
      tags={[
        { id: '101', typeId: '100', label: 'Best seller' },
        { id: '201', typeId: '200', label: 'Ships from Japan' },
      ]}
      onSubmit={(event) => {
        event.preventDefault();
        setData((current) => ({ ...current }));
      }}
    />
  );
}
結果
Loading...

重要なプロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
dataCreateProductFormData ({ title, categoryId, typeId, optionId, quantity, description, details, tags, prefecture, city, onlineAvailability, inventoryNotes, availableFrom, availableUntil, additionalDetails, image } or extended Record<string, unknown>)Yes-制御されたフォームデータオブジェクト
onDataChange(data, meta) => voidYes-更新時に呼び出されます。meta には name, value, cause（input, change, blur, clear, reset, programmatic）、および任意の event が含まれます
errors{ [fieldName: string]: string | string[] }Noundefinedブラケット記法のパスをキーにしたフィールドエラー such as title, categoryId, image, or nested custom paths
labels{ mainInfoSectionTitle?, titleField?, dropzoneDropHere?, dropzoneUploadImage?, dropzoneSubtitle?, dropzoneImageAlt?, dropzoneOptionsButton?, dropzoneReplaceFile?, dropzoneDeleteFile?, basicInfoSectionTitle?, categoryField?, typeField?, optionField?, quantityField?, quantityUnit?, descriptionField?, detailsField?, tagsField?, additionalInfoTitle?, additionalInfoSubtitle?, prefectureField?, cityField?, onlineAvailabilityField?, inventoryNotesField?, availableFromField?, availableUntilField?, additionalDetailsField?, submitButton? }NomainInfoSectionTitle: 'Create a Product', titleField: 'Title', dropzoneDropHere: 'Drop the image here...', dropzoneUploadImage: 'Upload product image', dropzoneSubtitle: 'PNG, JPG up to 2MB', dropzoneImageAlt: 'Selected', dropzoneOptionsButton: 'Options', dropzoneReplaceFile: 'Select a new file', dropzoneDeleteFile: 'Delete', basicInfoSectionTitle: 'Basic Information', categoryField: 'Category', typeField: 'Type', optionField: 'Option', quantityField: 'Quantity', quantityUnit: 'pcs', descriptionField: 'Description', detailsField: 'Details', tagsField: 'Tags', additionalInfoTitle: 'Inventory', additionalInfoSubtitle: 'Location', prefectureField: 'Prefecture', cityField: 'City', onlineAvailabilityField: 'Online Availability', inventoryNotesField: 'Inventory Notes', availableFromField: 'Available From', availableUntilField: 'Available Until', additionalDetailsField: 'Additional Details', submitButton: 'Submit'タイトル、各セクション、フィールドラベル、ドロップゾーン文言、送信ボタンのルート文言
placeholders{ titleField?, categoryField?, typeField?, optionField?, quantityField?, descriptionField?, detailsField?, prefectureField?, cityField?, inventoryNotesField?, additionalDetailsField? }NotitleField: 'Enter title', categoryField: 'Select category', typeField: 'Select type', optionField: 'Select option', quantityField: 'Enter quantity', descriptionField: 'Describe the product', detailsField: 'Enter details', prefectureField: 'Enter prefecture', cityField: 'Enter city', inventoryNotesField: 'Notes about inventory', additionalDetailsField: 'Enter additional details'テキスト、数値、セレクトフィールドのルートプレースホルダー文言
selectOptions{ categoryOptions?, typeOptions?, optionOptions?, prefectureOptions? }Noundefinedセレクトフィールド用のドロップダウン選択肢セット。省略されたグループは空リストとして描画されます
tagTypesTagType[]NoundefinedBasicInfo.TagsField でのグループ表示を有効にします
tagsTag[]NoundefinedBasicInfo.TagsField に表示される利用可能なタグ
onRejectAttachment(file: File, error: DropzoneFileError) => voidNoundefinedドロップゾーンが画像ファイルを拒否したときに呼び出されます

コンテンツプロパティ​

labels, placeholders, selectOptions, tagTypes, tags 以外のルート専用コンテンツプロパティは公開されていません。

レイアウトと構成のプロパティ​

プロパティ型必須デフォルト説明
componentStackProps<'form'>['component']No'form'ルートコンテナ要素
childrenReactNode or block override functionNoundefinedコンパウンドコンポーネント用の JSX children を渡すか、ブロックをオーバーライドする関数を渡します
classNamestringNoundefinedルートコンテナの追加クラス名
sxStackProps<'form'>['sx']Noundefinedルートコンテナ用の MUI sx スタイリング

children を除く StackProps<'form'> の props を継承します。ルートはデフォルトで mainInfo, basicInfo, additionalInfo, actions を描画します。内部の入力プリミティブ TextField, NumberField, TimeField, CheckboxField, SelectField はカスタムレイアウト用に個別にエクスポートされます。

デフォルト UI ブロック​

ブロックMUI ベースコンポーネント備考
CreateProductStack + LocalizationProviderルートプロバイダー兼レイアウトコンテナ。component="form" がデフォルトで、中央寄せの内容と固定の最大幅を備えます
MainInfoStack画像アップロードとタイトルのための上部セクション
MainInfo.SectionTitleTypographyデフォルト文言は 商品を作成 です
MainInfo.DropzoneBox + Button + Menu + Typographyname="image"、デフォルトのドロップメッセージは 画像をここにドロップ...、アップロード案内は 商品画像をアップロード、サブタイトルは PNG、JPG、最大2MB、オプションボタンは オプション です
MainInfo.TitleFieldTextFieldname="title"、デフォルトラベルは タイトル、デフォルトプレースホルダーは タイトルを入力、最大長は 100 です
BasicInfoStackカテゴリ、数量、説明、詳細、タグのための中間セクション
BasicInfo.SectionTitleTypographyデフォルト文言は 基本情報 です
BasicInfo.CategoryFieldSelectFieldname="categoryId"、デフォルトラベルは カテゴリ、デフォルトプレースホルダーは カテゴリを選択 です
BasicInfo.TypeFieldSelectFieldname="typeId"、デフォルトラベルは 種別、デフォルトプレースホルダーは 種別を選択 です
BasicInfo.OptionFieldSelectFieldname="optionId"、デフォルトラベルは オプション、デフォルトプレースホルダーは オプションを選択 です
BasicInfo.QuantityFieldFormControl + FormLabel + OutlinedInputname="quantity"、デフォルトラベルは 数量、デフォルトプレースホルダーは 数量を入力、単位サフィックスは pcs です
BasicInfo.DescriptionFieldTextFieldname="description"、デフォルトラベルは 説明、デフォルトプレースホルダーは 商品の説明を入力、複数行入力です
BasicInfo.DetailsFieldTextFieldname="details"、デフォルトラベルは 詳細、デフォルトプレースホルダーは 詳細を入力、複数行入力です
BasicInfo.TagsFieldFormControl + FormLabel + FormGroup + Checkboxname="tags"、デフォルトラベルは タグ。tagTypes と tags の両方が指定された場合のみ描画されます
AdditionalInfoStack在庫と公開可用性のための下部セクション
AdditionalInfo.TitleTypographyデフォルト文言は 在庫 です
AdditionalInfo.SubtitleTypographyデフォルト文言は 所在地 です
AdditionalInfo.PrefectureFieldSelectFieldname="prefecture"、デフォルトラベルは 都道府県、デフォルトプレースホルダーは 都道府県を選択 です
AdditionalInfo.CityFieldTextFieldname="city"、デフォルトラベルは 市区町村、デフォルトプレースホルダーは 市区町村を入力 です
AdditionalInfo.OnlineAvailabilityFieldFormControlLabel + Checkboxname="onlineAvailability"、デフォルトラベルは オンラインで利用可能 です
AdditionalInfo.InventoryNotesFieldTextFieldname="inventoryNotes"、デフォルトラベルは 在庫メモ、デフォルトプレースホルダーは 在庫に関するメモ、複数行入力です
AdditionalInfo.AvailableFromFieldTimePickername="availableFrom"、デフォルトラベルは 公開開始、保存形式は HH:mm です
AdditionalInfo.AvailableUntilFieldTimePickername="availableUntil"、デフォルトラベルは 公開終了、保存形式は HH:mm です
AdditionalInfo.AdditionalDetailsFieldTextFieldname="additionalDetails"、デフォルトラベルは 追加詳細、デフォルトプレースホルダーは 追加詳細を入力、複数行入力です
ActionsStackページ中央に配置された下部アクション行
Actions.SubmitButtonButtonデフォルト文言は 送信 で、先頭にチェックアイコンが付きます

追加フィールドプリミティブ​

プリミティブMUI ベースコンポーネント備考
TextFieldTextField共有の制御テキストプリミティブ。CreateProduct.TextField としてエクスポートされます
NumberFieldTextField共有の制御数値プリミティブ。CreateProduct.NumberField としてエクスポートされます
TimeFieldTimePicker共有の制御時刻プリミティブ。CreateProduct.TimeField としてエクスポートされ、値は HH:mm 形式で保存されます
CheckboxFieldFormControlLabel + Checkbox共有の制御チェックボックスプリミティブ。CreateProduct.CheckboxField としてエクスポートされます
SelectFieldTextField共有の制御セレクトプリミティブ。CreateProduct.SelectField としてエクスポートされます

TypeScript​

export type CreateProductFormData =
  | {
      title: string;
      categoryId: string;
      typeId: string;
      optionId: string;
      quantity: string;
      description: string;
      details: string;
      tags: Tag[];
      prefecture: string;
      city: string;
      onlineAvailability: boolean;
      inventoryNotes: string;
      availableFrom: string;
      availableUntil: string;
      additionalDetails: string;
      image: { url: string; type?: string; id?: string } | File | null;
    }
  | Record<string, unknown>;