@balgamat/react-autoform-blueprint v1.0.0

Blueprint for React Autoform

Blueprint UI Components for React Autoform.

Available components

• Date,
• Editable,
• File,
• Image,
• List,
• Number,
• Preferences,
• Select,
• SelectMultiple,
• Switch,
• Text,
• TextArea,
• Title,

Installation

Make sure you also have the base package installed with this one :

yarn add @balgamat/react-autoform @balgamat/react-autoform-blueprint

then import it and apply the UI kit to the Autoforms:

import { customizeInputComponents } from '@balgamat/react-autoform';
import { Components as BlueprintComponents } from '@balgamat/react-autoform-blueprint';

customizeInputComponents(BlueprintComponents);

Don't forget to include the main CSS file from each Blueprint package in your app:

/* app.css */
@import "~normalize.css";
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
@import "~@blueprintjs/datetime/lib/css/blueprint-datetime.css";

Example

const [editedObj, Form] = useAutoform({
  onObject: {},
  withFields: [
    {
      label: 'Title',
      path: 'title',
      type: 'Title',
      error: 'This is a serious error! Right here, in the title!',
    },
    {
      label: 'Subtitle',
      path: 'subtitle',
      type: 'Editable',
      textType: 'H4',
    },
    {
      label: 'Username',
      path: 'username',
      type: 'Text',
      groupStyle: { marginTop: 16 },
    },
    {
      label: 'Profile photo',
      path: 'photo',
      type: 'Image',
    },
    {
      label: 'Password',
      path: 'password',
      type: 'Text',
      inputType: 'password',
      error: 'Has to be at least 8 characters long',
    },
    {
      label: 'How old are you?',
      path: 'age',
      type: 'Number',
      min: 18,
      max: 99,
      customError: 'You have to be 18 or older to continue',
    },
    {
      label: 'So that means you were born.. when?',
      path: 'birthdate',
      type: 'Date',
    },
    {
      label: 'Gender',
      path: 'gender',
      type: 'Select',
      options: [
        { data: null, label: 'None' },
        { data: 'M', label: 'Male' },
        { data: 'F', label: 'Female' },
      ],
      fill: true,
    },
    {
      label: 'Or maybe you want to select more genders?',
      path: 'genderMulti',
      type: 'SelectMultiple',
      options: [
        { data: 'N/A', label: 'None' },
        { data: 'M', label: 'Male' },
        { data: 'F', label: 'Female' },
        { data: 'X', label: 'Trans' },
        { data: '0', label: 'Neutral' },
      ],
      fill: true,
    },
    {
      label: 'Here, you set up some preferences',
      path: 'preferences',
      type: 'Preferences',
      options: [
        { data: 'dogs', label: 'I adore doggos' },
        { data: 'cats', label: 'I totally dig felines' },
        { data: 'reptiles', label: 'I am a fool for reptiles' },
      ],
      inlineSwitches: true,
    },
    {
      label: 'Can you name your BFFs?',
      path: 'list',
      type: 'List',
      fields: [
        {
          label: 'Name',
          path: 'name',
          type: 'Text',
        },
        {
          label: 'Surname',
          path: 'surname',
          type: 'Text',
        },
      ],
    },
    {
      label: 'Something about yourself',
      path: 'description',
      type: 'TextArea',
    },
    {
      label: 'Maybe include some attachments?',
      path: 'attachments',
      type: 'List',
      fields: [
        {
          label: 'File',
          path: 'file',
          type: 'File',
        },
      ],
    },
    {
      label: 'I accept the Terms & Conditions',
      path: 'terms',
      type: 'Switch',
    },
  ],
});