Поиск JS-фреймворка для генерации UI

/*
 * Copyright 2018 Palantir Technologies, Inc. All rights reserved.
 *
 * Licensed under the terms of the LICENSE file distributed with this project.
 */

import * as React from "react";

import { FormGroup, H5, InputGroup, Intent, Switch } from "@blueprintjs/core";
import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
import { IntentSelect } from "./common/intentSelect";

export interface IFormGroupExampleState {
    disabled: boolean;
    helperText: boolean;
    inline: boolean;
    intent: Intent;
    label: boolean;
    requiredLabel: boolean;
}

export class FormGroupExample extends React.PureComponent<IExampleProps, IFormGroupExampleState> {
    public state: IFormGroupExampleState = {
        disabled: false,
        helperText: false,
        inline: false,
        intent: Intent.NONE,
        label: true,
        requiredLabel: true,
    };

    private handleDisabledChange = handleBooleanChange(disabled => this.setState({ disabled }));
    private handleHelperTextChange = handleBooleanChange(helperText => this.setState({ helperText }));
    private handleInlineChange = handleBooleanChange(inline => this.setState({ inline }));
    private handleLabelChange = handleBooleanChange(label => this.setState({ label }));
    private handleRequiredLabelChange = handleBooleanChange(requiredLabel => this.setState({ requiredLabel 

}));
    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));

    public render() {
        const { disabled, helperText, inline, intent, label, requiredLabel } = this.state;

        const options = (
            <>
                <H5>Props</H5>
                <Switch label="Disabled" checked={disabled} onChange={this.handleDisabledChange} />
                <Switch label="Inline" checked={inline} onChange={this.handleInlineChange} />
                <Switch label="Show helper text" checked={helperText} onChange=

{this.handleHelperTextChange} />
                <Switch label="Show label" checked={label} onChange={this.handleLabelChange} />
                <Switch label="Show label info" checked={requiredLabel} onChange=

{this.handleRequiredLabelChange} />
                <IntentSelect intent={intent} onChange={this.handleIntentChange} />
            </>
        );

        return (
            <Example options={options} {...this.props}>
                <FormGroup
                    disabled={disabled}
                    helperText={helperText && "Helper text with details..."}
                    inline={inline}
                    intent={intent}
                    label={label && "Label"}
                    labelFor="text-input"
                    labelInfo={requiredLabel && "(required)"}
                >
                    <InputGroup id="text-input" placeholder="Placeholder text" disabled={disabled} 

intent={intent} />
                </FormGroup>
                <FormGroup
                    disabled={disabled}
                    helperText={helperText && "Helper text with details..."}
                    inline={inline}
                    intent={intent}
                    label={label && "Label"}
                    labelFor="text-input"
                    labelInfo={requiredLabel && "(required)"}
                >
                    <Switch id="text-input" label="Engage the hyperdrive" disabled={disabled} />
                    <Switch id="text-input" label="Initiate thrusters" disabled={disabled} />
                </FormGroup>
            </Example>
        );
    }
}

{
  "enm": {},
  "cat": {
    "Номенклатура": {
      "form": {
        "selection": {
          "fields": [
            "is_folder",
            "id",
            "Артикул",
            "_t_.name as presentation",
            "`cat_КлассификаторЕдиницИзмерения`.name as `ЕдиницаИзмерения`",
            "`cat_НоменклатурныеГруппы`.name as `НоменклатурнаяГруппа`"
          ],
          "cols": [
            {"id": "id", "width": "120", "type": "ro", "align": "left", "sort": "server", "caption": "Код"},
            {"id": "Артикул", "width": "150", "type": "ro", "align": "left", "sort": "server", "caption": "Артикул"},
            {"id": "presentation", "width": "*", "type": "ro", "align": "left", "sort": "server", "caption": "Наименование"},
            {"id": "ЕдиницаИзмерения", "width": "70", "type": "ro", "align": "left", "sort": "server", "caption": "Ед"},
            {"id": "НоменклатурнаяГруппа", "width": "170", "type": "ro", "align": "left", "sort": "server", "caption": "Номенклатурная группа"}
          ]
        }
      }
    },
    "ДоговорыКонтрагентов": {
      "form": {
        "selection": {
          "fields": [
            "is_folder",
            "id",
            "_t_.name as presentation",
            "`enm_ВидыДоговоров`.synonym as `ВидДоговора`",
            "`cat_Организации`.name as `Организация`"
          ],
          "cols": [
            {"id": "presentation", "width": "*", "type": "ro", "align": "left", "sort": "server", "caption": "Наименование"},
            {"id": "ВидДоговора", "width": "150", "type": "ro", "align": "left", "sort": "server", "caption": "Вид договора"},
            {"id": "Организация", "width": "150", "type": "ro", "align": "left", "sort": "server", "caption": "Организация"}
          ]
        }
      }
    }
  },
  "doc": {
    "ЗаказПокупателя": {
      "form": {
        "selection": {
          "fields": [
            "date",
            "number_doc",
            "Контрагент",
            "СуммаДокумента",
            "posted",
            "СостояниеЗаказа",
            "Комментарий"
          ],
          "cols": [
            {"id": "date", "width": "120", "type": "ro", "align": "left", "sort": "server", "caption": "Дата"},
            {"id": "number_doc", "width": "120", "type": "ro", "align": "left", "sort": "server", "caption": "Номер"},
            {"id": "Контрагент", "width": "170", "type": "ro", "align": "left", "sort": "server", "caption": "Контрагент"},
            {"id": "СуммаДокумента", "width": "120", "type": "ron", "align": "right", "sort": "server", "caption": "Сумма"},
            {"id": "СостояниеЗаказа", "width": "100", "type": "ro", "align": "left", "sort": "server", "caption": "Состояние"},
            {"id": "Комментарий", "width": "*", "type": "ro", "align": "left", "sort": "server", "caption": "Комментарий"}
          ]
        },
        "obj": {
          "head": {
            " ": ["number_doc", "date", "ВидОперации", "Организация", "Контрагент", "Договор"],
            "Планирование": ["СостояниеЗаказа", "Старт", "ДатаОтгрузки"],
            "Дополнительно": ["Проект", "Касса", "Событие", "НалогообложениеНДС", "СуммаВключаетНДС", "Ответственный", "Комментарий",
              {"id": "СуммаДокумента", "path": "o.СуммаДокумента", "synonym": "Сумма документа", "type": "ro"}
            ]
          },
          "tabular_sections": {
            "Запасы":  {
              "fields": ["row","Номенклатура","Характеристика","Количество","ЕдиницаИзмерения","Цена","ПроцентСкидкиНаценки","Сумма","СтавкаНДС","СуммаНДС","Всего","ДатаОтгрузки","Спецификация","Содержание"],
              "headers": "№,Номенклатура,Характеристика,Колич.,Ед,Цена,% Скидки,Сумма,% НДС,НДС,Всего,Отгруз.,Спецификация,Содержание",
              "widths": "40,*,*,70,50,70,70,70,70,70,70,70,70,80",
              "min_widths": "40,200,140,70,50,70,70,70,70,70,70,70,70,80",
              "aligns": "",
              "sortings": "na,na,na,na,na,na,na,na,na,na,na,na,na,na",
              "types": "cntr,ref,ref,calck,refc,calck,calck,ron,refc,ron,ron,dhxCalendar,ref,txt"
            }
          }
        }
      }
    }
  },
  "ireg": {},
  "areg": {},
  "dp": {},
  "rep": {},
  "cch": {},
  "cacc": {}
}