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

商品作成ブロック

CreateProductコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルな商品作成フォームです。画像アップロード、カテゴリ選択、位置情報、モダンなデザインパターンを備えた商品登録のための完全なインターフェースを提供します。

🚀 インストール​

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

📖 使用法​

import {CreateProduct} from '@nodeblocks/frontend-create-product-block';
ライブエディター
function BasicCreateProduct() {
  const categoryOptions = [
    {value: 'electronics', label: '電子機器'},
    {value: 'clothing', label: '衣類'},
    {value: 'home', label: 'ホーム・ガーデン'},
  ];

  return (
    <CreateProduct
      categoryOptions={categoryOptions}
      onSubmit={formData => {
        console.log('商品が作成されました:', formData);
      }}
      onChange={(_setError, getValues) => {
        const values = getValues();
        console.log('フォーム値:', values);
      }}
      onAcceptAttachment={files => {
        console.log('ファイルが承認されました:', files);
      }}
      onClearAttachment={() => {
        console.log('添付ファイルがクリアされました');
      }}
    >
      <CreateProduct.MainInfo>
        <CreateProduct.MainInfo.SectionTitle>商品情報</CreateProduct.MainInfo.SectionTitle>
        <CreateProduct.MainInfo.Dropzone />
        <CreateProduct.MainInfo.NameField />
      </CreateProduct.MainInfo>

      <CreateProduct.BasicInfo>
        <CreateProduct.BasicInfo.Title />
        <CreateProduct.BasicInfo.CategoryField />
        <CreateProduct.BasicInfo.DescriptionField />
      </CreateProduct.BasicInfo>

      <CreateProduct.AdditionalInfo>
        <CreateProduct.AdditionalInfo.Title />
        <CreateProduct.AdditionalInfo.Subtitle />
        <CreateProduct.AdditionalInfo.Address1Field />
        <CreateProduct.AdditionalInfo.Address2Field />
      </CreateProduct.AdditionalInfo>

      <CreateProduct.Actions>
        <CreateProduct.Actions.SubmitButton>商品を作成</CreateProduct.Actions.SubmitButton>
      </CreateProduct.Actions>
    </CreateProduct>
  );
}
結果
Loading...

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

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

プロパティ型デフォルト説明
onSubmit(data: T, event?: React.BaseSyntheticEvent) => void必須有効なデータでフォームが送信されたときにトリガーされるコールバック関数
onChange(setError, getValues, clearErrors) => void必須フォーム値が変更されたときにトリガーされるコールバック関数
categoryOptionsArray<{value: string, label: string}>undefinedカテゴリ選択フィールド用のカテゴリオプションの配列
onAcceptAttachment(files: File[]) => voidundefinedファイルがアップロード用に承認されたときに発生するコールバック
onRejectAttachment(file: File, message: string) => voidundefinedファイルがエラーメッセージ付きで拒否されたときに発生するコールバック
onClearAttachment() => voidundefined添付ファイルがクリアされたときに発生するコールバック
defaultDataDefaultValues<T>undefined初期レンダリング時にフィールドに設定するデフォルトフォーム値
dataTundefined制御されたフォーム値 - 外部フォーム状態管理に使用
classNamestringundefinedフォームコンテナスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

注意: メインコンポーネントはMUI StackProps を拡張し、component="form" を使用してフォーム要素としてレンダリングされます。デフォルトスタイリングには spacing={4}、direction="column"、p: 3 のパディングが含まれます。

サブコンポーネント​

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

CreateProduct.MainInfo​

画像アップロードと商品名を含むメイン商品情報のコンテナ。

プロパティ型デフォルト説明
childrenBlocksOverrideundefinedデフォルトメイン情報フィールドをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Stack プロパティを継承します。デフォルトスタイリングには spacing={4} が含まれます。

CreateProduct.MainInfo.SectionTitle​
プロパティ型デフォルト説明
childrenReactNode"Create a Product"メイン情報セクションのタイトルコンテンツ
variantTypographyProps['variant']"h6"MUI Typographyバリアント
componentElementType"h3"レンダリングするHTML要素
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Typography プロパティを継承します。

CreateProduct.MainInfo.Dropzone​
プロパティ型デフォルト説明
isDraggingMessagestring"Drop the image here..."ドラッグ中に表示されるメッセージ
beforeUploadMessagestring"Upload product image"ファイルアップロード前に表示されるメッセージ
beforeUploadSubtitlestring"PNG, JPG up to 2MB"ファイルアップロード前に表示されるサブタイトル
afterUploadOptionsButtonstring"Options"アップロード後のオプションボタンのテキスト
replaceFileButtonstring"Select a new file"ファイル置換ボタンのテキスト
deleteFileButtonstring"Delete"ファイル削除ボタンのテキスト
requiredbooleanundefinedファイルアップロードが必須かどうか
maxSizenumber2000000最大ファイルサイズ（バイト単位、2MB）
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Box プロパティと react-dropzone プロパティを継承します。image/* ファイルのみ受け付け、単一ファイルアップロード。

CreateProduct.MainInfo.NameField​
プロパティ型デフォルト説明
namestring"name"フォームデータとバリデーションに使用されるフィールド名
labelstring"Name"入力の上に表示されるフィールドラベル
placeholderstring"Enter product name"プレースホルダーテキスト
requiredbooleantrueフィールドが必須かどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI TextField プロパティを継承します。

CreateProduct.BasicInfo​

カテゴリと説明を含む基本商品情報のコンテナ。

プロパティ型デフォルト説明
childrenBlocksOverrideundefinedデフォルト基本情報フィールドをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Stack プロパティを継承します。デフォルトスタイリングには spacing={4} が含まれます。

CreateProduct.BasicInfo.Title​
プロパティ型デフォルト説明
childrenReactNode"Basic Information"基本情報セクションのタイトルコンテンツ
variantTypographyProps['variant']"h6"MUI Typographyバリアント
componentElementType"h3"レンダリングするHTML要素
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Typography プロパティを継承します。

CreateProduct.BasicInfo.CategoryField​
プロパティ型デフォルト説明
namestring"categoryId"フォームデータのフィールド名
labelstring"Categories"フィールドラベル
placeholderstring"Select product category"プレースホルダーテキスト
optionsArray<{value: string, label: string}>コンテキストからカテゴリオプションの配列
requiredbooleantrueフィールドが必須かどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI TextField プロパティを継承します（selectモード）。オプションはメインコンポーネントの categoryOptions プロパティ経由で提供されます。

CreateProduct.BasicInfo.DescriptionField​
プロパティ型デフォルト説明
namestring"description"フォームデータのフィールド名
labelstring"Description"入力フィールドのラベル
placeholderstring"Describe the product"プレースホルダーテキスト
inputTypestring"multiline"入力タイプ（テキストエリアにはmultiline）
requiredbooleantrueフィールドが必須かどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI TextField プロパティを継承します。4行のマルチラインテキストエリアとしてレンダリングされます。

CreateProduct.AdditionalInfo​

位置詳細を含む追加商品情報のコンテナ。

プロパティ型デフォルト説明
childrenBlocksOverrideundefinedデフォルト追加情報フィールドをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Stack プロパティを継承します。デフォルトスタイリングには spacing={4} が含まれます。

CreateProduct.AdditionalInfo.Title​
プロパティ型デフォルト説明
childrenReactNode"Additional Infomation"追加情報セクションのタイトルコンテンツ
variantTypographyProps['variant']"h6"MUI Typographyバリアント
componentElementType"h3"レンダリングするHTML要素
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Typography プロパティを継承します。

CreateProduct.AdditionalInfo.Subtitle​
プロパティ型デフォルト説明
childrenReactNode"Location"位置セクションのサブタイトルコンテンツ
variantTypographyProps['variant']"body1"MUI Typographyバリアント
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Typography プロパティを継承します。デフォルトスタイリングには fontWeight: 'bold' が含まれます。

CreateProduct.AdditionalInfo.Address1Field​
プロパティ型デフォルト説明
namestring"address1"フォームデータのフィールド名
labelstring"Prefecture"フィールドラベル
placeholderstring"Select prefecture"プレースホルダーテキスト
optionsArray<{value: string, label: string}>prefectures都道府県オプションの配列（日本の都道府県）
requiredbooleantrueフィールドが必須かどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI TextField プロパティを継承します（selectモード）。

CreateProduct.AdditionalInfo.Address2Field​
プロパティ型デフォルト説明
namestring"address2"フォームデータとバリデーションに使用されるフィールド名
labelstring"Address"入力の上に表示されるフィールドラベル
placeholderstring"Enter location address"プレースホルダーテキスト
requiredbooleantrueフィールドが必須かどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI TextField プロパティを継承します。

CreateProduct.Actions​

フォームアクションボタンのコンテナ。

プロパティ型デフォルト説明
childrenBlocksOverrideundefinedデフォルトアクションボタンをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Stack プロパティを継承します。デフォルトスタイリングには direction="row"、justifyContent: 'center'、alignItems: 'center' が含まれます。

CreateProduct.Actions.SubmitButton​
プロパティ型デフォルト説明
childrenReactNode"Submit"ボタン内に配置するテキスト
variantButtonProps['variant']"contained"MUI Buttonバリアント
sizeButtonProps['size']"large"MUI Buttonサイズ
type"submit" | "button" | "reset""submit"HTMLボタンタイプ
disabledboolean!formState.isValidフォームが無効なときに無効化
startIconReactNode<TaskAlt />ボタンテキストの前に表示されるアイコン
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Button プロパティを継承します。フォームバリデーションが失敗すると自動的に無効化されます。

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

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

CreateProduct.TextField​

プロパティ型デフォルト説明
namePath<T>必須フォームデータのフィールド名
labelstringundefined入力フィールドのラベル
placeholderstringundefinedプレースホルダーテキスト
requiredbooleanundefinedフィールドが必須かどうか
inputType"multiline" | stringundefined入力タイプ（テキストエリアには "multiline" を使用）
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI TextField プロパティを継承します。フォーム統合に react-hook-form Controllerを使用します。

CreateProduct.TimeField​

プロパティ型デフォルト説明
namePath<T>必須フォームデータのフィールド名
labelstringundefined入力フィールドのラベル
requiredbooleanundefinedフィールドが必須かどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントは type="time" を持つMUI TextField プロパティを継承します。フォーム統合に react-hook-form Controllerを使用します。

CreateProduct.CheckboxField​

プロパティ型デフォルト説明
namePath<T>必須フォームデータのフィールド名
labelReactNode必須チェックボックスラベル
requiredbooleanundefinedフィールドが必須かどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI FormControlLabel プロパティを継承します。フォーム統合に react-hook-form Controllerを使用します。

CreateProduct.SelectField​

プロパティ型デフォルト説明
namePath<T>必須フォームデータのフィールド名
labelstringundefinedフィールドラベル
placeholderstringundefinedオプションが選択されていないときのプレースホルダーテキスト
optionsArray<{value: string, label: string}>undefinedオプションの配列
requiredbooleanundefinedフィールドが必須かどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI TextField プロパティを継承します（selectモード）。フォーム統合に react-hook-form Controllerを使用します。

🎨 設定例​

カスタムセクションタイトルスタイリング​

<CreateProduct.MainInfo.SectionTitle
  variant="h5"
  sx={{
    color: 'primary.main',
    fontWeight: 700,
    borderBottom: '2px solid',
    borderColor: 'primary.main',
    pb: 1,
  }}
>
  商品を作成
</CreateProduct.MainInfo.SectionTitle>

カスタムドロップゾーンスタイリング​

<CreateProduct.MainInfo.Dropzone
  beforeUploadMessage="商品画像をドロップ"
  beforeUploadSubtitle="PNG, JPG 最大2MBをサポート"
  sx={{
    borderColor: 'primary.main',
    bgcolor: 'primary.50',
    '&:hover': {bgcolor: 'primary.100'},
  }}
/>

カスタムフィールドスタイリング​

<CreateProduct.TextField
  name="customField"
  label="カスタムフィールド"
  sx={{
    '& .MuiOutlinedInput-root': {
      borderRadius: '12px',
    },
  }}
/>

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

<CreateProduct {...props}>
  {({defaultBlocks, defaultBlockOrder}) => ({
    blocks: {
      ...defaultBlocks,
      mainInfo: {
        ...defaultBlocks.mainInfo,
        props: {
          ...defaultBlocks.mainInfo.props,
          sx: {
            background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 100%)',
            borderRadius: '14px',
            p: 3,
          },
        },
      },
    },
    blockOrder: defaultBlockOrder,
  })}
</CreateProduct>

🔧 TypeScriptサポート​

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

import {CreateProduct} from '@nodeblocks/frontend-create-product-block';
import {UseFormClearErrors, UseFormGetValues, UseFormSetError} from 'react-hook-form';

interface CustomProductFormData extends Record<string, unknown> {
  name: string;
  description: string;
  address1: string;
  address2: string;
  categoryId: string;
  image: {url: string; type?: string; id?: string} | File;
  customField?: string;
  price?: string;
  stock?: string;
  sku?: string;
}

interface CategoryOption {
  value: string;
  label: string;
}

// 完全な型付けの使用例
function TypedCreateProductExample() {
  const categoryOptions: CategoryOption[] = [
    {value: 'electronics', label: '電子機器'},
    {value: 'clothing', label: '衣類'},
    {value: 'home', label: 'ホーム・ガーデン'},
  ];

  const handleSubmit = (data: CustomProductFormData, event?: React.BaseSyntheticEvent): void => {
    console.log('商品データ:', data);
    console.log('イベント:', event);
  };

  const handleChange = (
    setError: UseFormSetError<CustomProductFormData>,
    getValues: UseFormGetValues<CustomProductFormData>,
    clearErrors: UseFormClearErrors<CustomProductFormData>,
  ): void => {
    const values = getValues();
    // フォーム値をバリデーションし、必要に応じてエラーを設定
    if (!values.name) {
      setError('name', {message: '商品名は必須です'});
    } else {
      clearErrors('name');
    }
  };

  return (
    <CreateProduct<CustomProductFormData>
      onSubmit={handleSubmit}
      onChange={handleChange}
      categoryOptions={categoryOptions}
      onAcceptAttachment={files => console.log('ファイルが承認されました:', files)}
      onRejectAttachment={(file, message) => console.log('ファイルが拒否されました:', file, message)}
      onClearAttachment={() => console.log('添付ファイルがクリアされました')}
    >
      <CreateProduct.MainInfo>
        <CreateProduct.MainInfo.SectionTitle>商品詳細</CreateProduct.MainInfo.SectionTitle>
        <CreateProduct.MainInfo.Dropzone />
        <CreateProduct.MainInfo.NameField name="name" />
      </CreateProduct.MainInfo>

      <CreateProduct.BasicInfo>
        <CreateProduct.BasicInfo.Title />
        <CreateProduct.BasicInfo.CategoryField />
        <CreateProduct.BasicInfo.DescriptionField />
      </CreateProduct.BasicInfo>

      <CreateProduct.AdditionalInfo>
        <CreateProduct.AdditionalInfo.Title />
        <CreateProduct.AdditionalInfo.Subtitle />
        <CreateProduct.AdditionalInfo.Address1Field />
        <CreateProduct.AdditionalInfo.Address2Field />
      </CreateProduct.AdditionalInfo>

      <CreateProduct.Actions>
        <CreateProduct.Actions.SubmitButton>商品を作成</CreateProduct.Actions.SubmitButton>
      </CreateProduct.Actions>
    </CreateProduct>
  );
}

📝 注意事項​

  • ルートコンポーネントは component="form" を持つMUIの Stack を使用してセマンティックなフォーム要素を作成します
  • フォーム状態管理はバリデーション用の mode: 'onBlur' を持つ react-hook-form によって処理されます
  • onChange コールバックはフォーム値が変更されるたびにトリガーされ、setError、getValues、clearErrors 関数を提供します
  • SubmitButton は formState.isValid が false の場合、自動的に無効化されます
  • デフォルトブロック順序: mainInfo、basicInfo、additionalInfo、actions
  • すべてのサブコンポーネントはインラインスタイリング用のMUI sx プロパティをサポートします
  • フォームフィールドはフォーム状態統合に react-hook-form Controllerを使用します
  • コンポーネントはカスタムフォームデータインターフェース用のジェネリック型付けをサポートします（DefaultCreateProductFormData を拡張する必要があります）
  • CSSクラスはBEM命名規則に従います: nbb-create-product、nbb-create-product-main-info など
  • 画像ドロップゾーンは最大ファイルサイズ2MBと image/* acceptフィルターを持つ react-dropzone を使用します
  • Address1Fieldの都道府県オプションは日本の都道府県で事前設定されています
  • data プロパティは制御されたフォーム状態に使用でき、defaultData は初期値を設定します

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