@balgamat/react-autoform-fluent-ui

Fluent UI for React Autoform

Fluent UI Components for React Autoform.

Available components

• Checkbox
• ChoiceGroup
• ColorPicker
• ComboBox
• DatePicker
• Dropdown
• Rating
• Slider
• SpinButton
• SwatchColorPicker
• TextField
• Toggle

Installation

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

yarn add @balgamat/react-autoform @balgamat/react-autoform-fluent-ui

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

import { customizeInputComponents } from '@balgamat/react-autoform';
import { useFluentUIComponents } from '@balgamat/react-autoform-fluent-ui';

useFluentUIComponents(customizeInputComponents);

Example form with all components

import { useAutoform, validation, customizeInputComponents } from '@balgamat/react-autoform';
import { useFluentUIComponents } from '@balgamat/react-autoform-fluent-ui';

useFluentUIComponents(customizeInputComponents);

const App = () => {
  const fields = [
    {
      label: 'Color',
      path: 'color',
      id: 'color',
      locale: 'cs',
      type: 'ColorPicker',
      validation: validation.string().required(),
    },
    {
      label: 'Date',
      path: 'date',
      locale: 'cs',
      type: 'DatePicker',
      validation: validation.string().required(),
    },
    {
      label: 'Checkbox  1',
      path: 'checkbox1',
      type: 'Checkbox',
      validation: validation.bool(),
    },
    {
      label: 'Checkbox 2',
      path: 'checkbox2',
      type: 'Checkbox',
      validation: validation.bool(),
    },
    {
      label: 'Checkbox 3',
      path: 'checkbox3',
      type: 'Checkbox',
      validation: validation.bool(),
    },
    {
      label: 'ChoiceGroup',
      path: 'choiceGroup',
      type: 'ChoiceGroup',
      options: [{ data: 'Option A' }, { data: 'Option B' }],
      keyExtractor: (option: any) => option,
      labelExtractor: (option: any) => option,
      validation: validation.string().required(),
    },
    {
      label: 'ComboBox',
      path: 'combobox',
      type: 'ComboBox',
      options: [
        { data: 'Option A', key: 'A' },
        { data: 'Option B', key: 'B' },
      ],
      keyExtractor: (option: any) => option,
      labelExtractor: (option: any) => option,
      validation: validation.string().required(),
    },
    {
      label: 'Dropdown',
      path: 'dropdown',
      type: 'Dropdown',
      multiSelect: true,
      options: [
        { data: 'Option A', key: 'A' },
        { data: 'Option B', key: 'B' },
      ],
      keyExtractor: (option: any) => option,
      labelExtractor: (option: any) => option,
      validation: validation.string().required(),
    },
    {
      label: 'Rating',
      path: 'rating',
      id: 'rating',
      type: 'Rating',
    },
    {
      label: 'Slider',
      path: 'slider',
      type: 'Slider',
    },
    {
      label: 'SpinButton',
      path: 'spinButton',
      type: 'SpinButton',
    },
    {
      label: 'SwatchColorPicker',
      path: 'swatchColorPicker',
      type: 'SwatchColorPicker',
      id: 'swatchColorPicker',
      colors: { Oranžová: '#FA3', Zelená: '#AF3', Modrá: '#3AF' },
      cellShape: 'square',
    },
    {
      label: 'TextField',
      path: 'text',
      type: 'TextField',
    },
    {
      label: 'Toggle',
      path: 'toggle',
      type: 'Toggle',
    },
  ];

  const [obj, Form, validationResult] = useAutoform({ withFields: fields });

  return (
    <div>
      <div style={{ padding: 24 }}>{Form}</div>
      <div style={{ padding: 24 }}>
        Validation has <b>{validationResult.valid ? 'passed' : 'failed'}</b>.
        <br />
        This is the resulting object:
        <br />
        <pre>{JSON.stringify(obj, null, 2)}</pre>
      </div>
    </div>
  );
};