Skip to main content

Create Product Block

The CreateProduct Component is a fully customizable and accessible product creation form built with React and TypeScript. It provides a complete interface for product registration with image upload, category selection, location information, and modern design patterns.

πŸš€ Installation​

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

πŸ“– Usage​

import {CreateProduct} from '@nodeblocks/frontend-create-product-block';
function BasicCreateProduct() {
  const categoryOptions = [
    { value: 'electronics', label: 'Electronics' },
    { value: 'clothing', label: 'Clothing' },
    { value: 'home', label: 'Home & Garden' }
  ];

  return (
    <CreateProduct
      categoryOptions={categoryOptions}
      onSubmit={(formData) => {
        console.log('Product created:', formData);
      }}
      onChange={(setError, getValues, clearErrors) => {
        const values = getValues();
        console.log('Form values:', values);
      }}
      onAcceptAttachment={(files) => {
        console.log('File accepted:', files);
      }}
      onUploadAttachment={(file) => {
        console.log('Uploading file:', file);
        // Handle file upload logic
      }}
      onClearAttachment={() => {
        console.log('Attachment cleared');
      }}>
      <CreateProduct.MainInfo>
        <CreateProduct.MainInfo.SectionTitle>Product Information</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>Create Product</CreateProduct.Actions.SubmitButton>
      </CreateProduct.Actions>
    </CreateProduct>
  );
}

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
onSubmit(data: T, event?: React.BaseSyntheticEvent) => voidRequiredCallback function triggered when form is submitted with valid data
onChange(setError, getValues, clearErrors) => voidRequiredCallback function triggered when form values change
categoryOptionsOptionValue[]undefinedArray of category options for the category select field
onAcceptAttachment(files: File[]) => voidundefinedCallback fired when file is accepted for upload
onUploadAttachment(file: File) => voidundefinedCallback fired when file upload is triggered
onRejectAttachment(files: File[]) => voidundefinedCallback fired when file is rejected
onClearAttachment() => voidundefinedCallback fired when attachment is cleared
defaultDataDefaultValues<T>undefinedDefault form values to populate fields on initial render
dataTundefinedControlled form values - use this for external form state management
classNamestringundefinedAdditional CSS class name for styling the form container
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component inherits all HTML div element props.

Sub-Components​

The CreateProduct component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

CreateProduct.MainInfo​

Container for main product information including image upload and product name.

PropTypeDefaultDescription
childrenReactNodeundefinedCustom content to override default main info fields
directionenum"column"Flex direction for action buttons
alignItemsenum"stretch"Alignment of items in the container
gapSizeenum"S"Gap between items in the container
CreateProduct.MainInfo.SectionTitle​
PropTypeDefaultDescription
childrenReactNode"Main Info"Title content for the main info section
sizeenum"L"Typography size for the title
typeenum"heading"Typography type
colorenum"low-emphasis"Color theme for the title
weightenum"bold"Typography weight
classNamestringundefinedAdditional CSS class name for styling
CreateProduct.MainInfo.Dropzone​
PropTypeDefaultDescription
beforeUploadMessagestring"Upload"Message displayed before file upload
beforeUploadSubtitlestring"Select a file to upload."Subtitle displayed before file upload
afterUploadOptionsButtonstring"Options"Text for options button after upload
replaceFileButtonstring"Select a new file"Text for replace file button
deleteFileButtonstring"Delete"Text for delete file button
maxFilesnumber1Maximum number of files allowed
acceptstring"image/*"File types accepted
maxSizenumber5242880Maximum file size in bytes (5MB)
classNamestringundefinedAdditional CSS class name for styling
CreateProduct.MainInfo.NameField​
PropTypeDefaultDescription
namestring"name"Field name used for form data and validation
labelstring"Name"Field label displayed above the input
labelWeightenum"regular"Weight of the field label
namestring"applicationUserEmail"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
onOperationClick() => voidundefinedOperation onClick callback
postfixTextstringundefinedText to place after the component
showPasswordbooleanundefinedWhether to show password

Note: This component additional inherits some common HTML input element props.

CreateProduct.BasicInfo​

Container for basic product information including category and description.

PropTypeDefaultDescription
childrenBlocksOverrideundefinedCustom content to override default basic info fields
classNamestringundefinedAdditional CSS class name for styling
directionenum"column"Flex direction for action buttons
alignItemsenum"stretch"Alignment of items in the container
gapSizeenum"S"Gap between items in the container
CreateProduct.BasicInfo.Title​
PropTypeDefaultDescription
childrenReactNode"Basic Information"Title content for the basic info section
sizeenum"L"Typography size for the title
typeenum"heading"Typography type
colorenum"low-emphasis"Color theme for the title
weightenum"bold"Typography weight
classNamestringundefinedAdditional CSS class name for styling
CreateProduct.BasicInfo.CategoryField​
PropTypeDefaultDescription
namestring"categoryId"Field name for form data
labelstring"Categories"Field label
labelWeightenum"regular"Label weight
selectOptionValuesArray<{value: string, label: string}>[]Array of category options
isRequiredbooleanundefinedWhether the field is required
isDisabledbooleanundefinedWhether the input is disabled
errorTextstringundefinedError text for the input
classNamestringundefinedAdditional CSS class name for styling

Note: This component additional inherits some common HTML select element props.

CreateProduct.BasicInfo.DescriptionField​
PropTypeDefaultDescription
namestring"description"Field name for form data
labelstring"Description"Label of the input field
errorTextstringundefinedError text for the input
isDisabledbooleanundefinedWhether the input is disabled
isRequiredbooleanundefinedWhether the input is required
labelWeight`enum
classNamestringundefinedAdditional CSS class name for styling

Note: This component additional inherits some common HTML textarea element props.

CreateProduct.AdditionalInfo​

Container for additional product information including location details.

PropTypeDefaultDescription
childrenBlocksOverrideundefinedCustom content to override default additional info fields
classNamestringundefinedAdditional CSS class name for styling
directionenum"column"Flex direction for action buttons
alignItemsenum"stretch"Alignment of items in the container
gapSizeenum"S"Gap between items in the container
CreateProduct.AdditionalInfo.Title​
PropTypeDefaultDescription
childrenBlockReasOverride"Additional Information"Title content for the additional info section
sizeenum"L"Typography size for the title
typeenum"heading"Typography type
colorenum"low-emphasis"Color theme for the title
weightenum"bold"Typography weight
classNamestringundefinedAdditional CSS class name for styling
CreateProduct.AdditionalInfo.Subtitle​
PropTypeDefaultDescription
childrenReactNode"Location"Subtitle content for the location section
sizeenum"S"Typography size for the title
typeenum"heading"Typography type
colorenum"low-emphasis"Color theme for the title
weightenum"regular"Typography weight
classNamestringundefinedAdditional CSS class name for styling
CreateProduct.AdditionalInfo.Address1Field​
PropTypeDefaultDescription
namestring"address1"Field name for form data
labelstring"Prefecture"Field label
labelWeightenum"regular"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

Note: This component inherits all HTML select element props.

CreateProduct.AdditionalInfo.Address2Field​
PropTypeDefaultDescription
namestring"address2"Field name used for form data and validation
labelstring"Town"Field label displayed above the input
labelWeightenum"regular"Weight of the field label
classNamestringundefinedAdditional CSS class name for styling
errorTextstringundefinedError text for the input
isDisabledbooleanundefinedWhether the input is disabled
isRequiredbooleanundefinedWhether the input is required
onOperationClick() => voidundefinedOperation onClick callback
postfixTextstringundefinedText to place after the component
showPasswordbooleanundefinedWhether to show password

Note: This component additional inherits some common HTML input element props.

CreateProduct.Actions​

Container for form action buttons.

PropTypeDefaultDescription
childrenBlocksOverrideundefinedCustom content to override default action buttons
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

CreateProduct.Actions.SubmitButton​
PropTypeDefaultDescription
childrenReactNode"Submit"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)

Note: This component additional inherits some common HTML button element props.

Additional Field Components​

The component also provides additional field types that can be used in custom forms:

CreateProduct.TextField​

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

Note: This component additional inherits some common HTML input element props.

CreateProduct.TimeField​

PropTypeDefaultDescription
namestringRequiredField name for form data
labelstringRequiredLabel of the input field
labelWeightenum"regular"Label weight
isRequiredbooleanundefinedWhether the input is required
isDisabledbooleanundefinedWhether the input is disabled
errorTextstringundefinedError text for the input
classNamestringundefinedAdditional CSS class name for styling

Note: This component additional inherits some common HTML input element props.

CreateProduct.CheckboxField​

PropTypeDefaultDescription
namestringRequiredField name for form data
labelstringRequiredCheckbox label
messagestringundefinedCheckbox description message
showMessagebooleantrueWhether to show the message
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML checkbox element props.

CreateProduct.SelectField​

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

Note: This component additional inherits some common HTML select element props.

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {CreateProduct} from '@nodeblocks/frontend-create-product-block';
//in future we will not use react-hook-form, we will use our own form handling
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};
  customField?: string;
}

const handleSubmit = (data: CustomProductFormData, event?: React.BaseSyntheticEvent) => {
  // Type-safe form handling
  console.log('Product data:', data);
  console.log('Event:', event);
};

const handleChange = (
  setError: UseFormSetError<CustomProductFormData>,
  getValues: UseFormGetValues<CustomProductFormData>,
  clearErrors: UseFormClearErrors<CustomProductFormData>,
) => {
  const values = getValues();
  // Validate form values and set errors if needed
  if (!values.name) {
    setError('name', {message: 'Product name is required'});
  } else {
    clearErrors('name');
  }
};

const categoryOptions = [
  {value: 'electronics', label: 'Electronics'},
  {value: 'clothing', label: 'Clothing'},
  {value: 'home', label: 'Home & Garden'},
];

const CreateProductForm = () => {
  return (
    <CreateProduct<CustomProductFormData>
      onSubmit={handleSubmit}
      onChange={handleChange}
      categoryOptions={categoryOptions}
      onAcceptAttachment={files => console.log('Files accepted:', files)}
      onUploadAttachment={file => console.log('Uploading:', file)}
      onClearAttachment={() => console.log('Attachment cleared')}>
      <CreateProduct.MainInfo>
        <CreateProduct.MainInfo.SectionTitle>Product Details</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>Create Product</CreateProduct.Actions.SubmitButton>
      </CreateProduct.Actions>
    </CreateProduct>
  );
};

Built with ❀️ using React, TypeScript, and modern web standards.