smetaniny-react-form-builder

React Form Builder

Библиотека реализована в рамках изучения паттерна "Строитель"

PHP Builder Example GitHub

React Form Builder — это библиотека, реализующая паттерн "Строитель" для создания форм в React. Она позволяет динамически создавать различные поля формы (такие как текстовые поля, поля для email и селекторы), а также управлять состоянием формы.

Применимость паттерна "Строитель" в React.js

Паттерн "Строитель" (Builder) предназначен для поэтапного создания сложных объектов. Он позволяет абстрагироваться от процесса создания и облегчает создание различных вариаций одного и того же продукта. В контексте разработки на React данный паттерн может быть полезен в следующих сценариях.

1. Создание динамических форм

Один из наиболее распространенных сценариев применения паттерна "Строитель" — создание динамических форм, где структура формы изменяется в зависимости от состояния приложения или пользовательского ввода.

Пример: В интернет-магазине может потребоваться форма заказа с различными полями (имя, адрес, способ доставки, опции платежа). С помощью паттерна "Строитель" можно создать класс, который поэтапно добавляет поля в форму в зависимости от выбранного товара или способа доставки.

2. Конструирование сложных компонентов

Если компонент имеет множество свойств и опций, использование строителя позволяет разбить процесс создания на этапы, что делает код более читаемым и управляемым.

Пример: Для компонента карточки товара можно использовать строителя для настройки таких свойств, как изображение, заголовок, цена, описание и кнопка "Добавить в корзину". Каждый шаг добавляет элементы или изменяет конфигурацию компонента.

3. Упрощение управления состоянием компонентов

Паттерн "Строитель" облегчает управление состоянием компонентов, особенно когда состояние зависит от множества параметров.

Пример: В приложении для редактирования профиля пользователя можно использовать строителя для пошаговой настройки состояния полей ввода (имя, email, телефон), с возможностью валидации и отображения ошибок.

4. Поддержка разных конфигураций

Когда требуется поддерживать несколько конфигураций одного и того же компонента, паттерн "Строитель" позволяет создавать разные варианты без дублирования кода.

Пример: Для компонента отображения сообщений, который может быть отображен как предупреждение, ошибка или информационное сообщение, можно использовать строителя для создания различных конфигураций этого компонента.

5. Разделение логики создания и рендеринга

Использование паттерна "Строитель" помогает разделить логику создания компонентов и их отображение, что упрощает модульное тестирование и повторное использование кода.

Пример: Вместо создания компонентов непосредственно в местах их использования, можно делегировать процесс их создания классу-строителю, а затем использовать готовые компоненты в приложении.

Заключение

Паттерн "Строитель" в React.js является мощным инструментом для организации кода при создании сложных компонентов или форм. Он обеспечивает гибкость, упрощает процесс создания и тестирования, а также способствует лучшему разделению ответственности в приложении. Использование этого паттерна может значительно повысить читаемость и поддерживаемость кода, что особенно важно в больших и сложных приложениях.

Структура паттерна

Проект включает следующие компоненты:

• Абстрактный строитель: Базовый класс для создания различных типов полей формы, обеспечивающий общую функциональность.
• Конкретные строители: Реализации для создания текстовых полей, полей ввода email и селекторов.
• Директор: Класс, управляющий процессом создания формы, используя конкретные строители для добавления полей.
• Типы полей: Интерфейсы, описывающие структуру полей формы и их свойства.
• Продукт: Собранные поля формы в виде JSX-элементов, которые могут быть использованы в приложении.

/react-form-builder
│
├── /src
│ ├── /builders # Строители форм
│ │ ├── FormBuilder.tsx # Абстрактный строитель
│ │ ├── TextInputBuilder.tsx # Строитель для текстового поля
│ │ ├── EmailInputBuilder.tsx # Строитель для поля email
│ │ └── SelectInputBuilder.tsx # Строитель для выпадающих списков
│ │
│ ├── /components # Компоненты React
│ │ └── ReactFormBuilder.tsx # Основной компонент для рендеринга форм
│ │
│ └── /types # Типы и интерфейсы
│ └── FormField.ts # Интерфейс для полей формы
│
├── package.json # Конфигурация npm проекта
├── README.md # Описание проекта
└── tsconfig.json # Конфигурация TypeScript

Пример использования

import React, {useState, useEffect} from "react";
import {
    TextInputBuilder,
    EmailInputBuilder,
    SelectInputBuilder,
    FormDirector
} from "smetaniny-react-form-builder";

// Основной компонент формы
const Patterns = () => {
    const [formFields, setFormFields] = useState(null);

    const createForms = () => {
        const textBuilder = new TextInputBuilder();
        const emailBuilder = new EmailInputBuilder();
        const selectBuilder = new SelectInputBuilder();

        // Создаем директора для текстового поля
        const textDirector = new FormDirector(textBuilder);
        textDirector.createField('text', 'username', 'username', 'Введите ваше имя');
        const textForm = textDirector.getForm();

        // Создаем директора для email поля
        const emailDirector = new FormDirector(emailBuilder);
        emailDirector.createField('email', 'email', 'email', 'Введите ваше email');
        const emailForm = emailDirector.getForm();

        // Создаем директора для поля выбора и передаем опции
        const selectDirector = new FormDirector(selectBuilder);
        selectDirector.createSelectField('options', 'options', 'Выберите опцию', ['Опция 1', 'Опция 2', 'Опция 3']);
        const selectForm = selectDirector.getForm();

        // Объединяем все формы в одно JSX-элемент
        setFormFields(
            <div>
                <h3>Текстовые поля</h3>
                {textForm}
                <h3>Email поля</h3>
                {emailForm}
                <h3>Выбор опции</h3>
                {selectForm}
            </div>
        );
    };

    useEffect(() => {
        createForms();
    }, []);

    return (
        <div>
            <h3>Создание формы</h3>
            <form>
                <div>{formFields}</div>
            </form>
        </div>
    );
};

export default Patterns;