styled-hook-form/lib/components/form-builder/stories/overview.stories.js

React form library for styled-components based on grommet and react-hook-form

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Overview = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const form_builder_1 = require("../form-builder");
const context_1 = require("../../../context");
const types_1 = require("../types");
const styled_components_1 = __importDefault(require("styled-components"));
const grommet_1 = require("grommet");
const react_1 = require("react");
const meta = {
    title: "Form Builder/Overview",
    args: {},
    component: form_builder_1.FormBuilder,
};
const ResponsiveFlex = styled_components_1.default.div `
  display: flex;
  flex-wrap: wrap;
`;
const ResponsiveFlexCol = styled_components_1.default.div `
  flex-basis: 25%;
  min-width: 300px;
  flex-basis: 50%;
  box-sizing: border-box;
  padding: 0.5em 1em;
  @media (max-width: 720px) {
    flex-basis: 100%;
  }
`;
exports.default = meta;
const fields = [
    {
        name: "textInput",
        label: "Text Input:",
        defaultValue: "",
        type: types_1.FormFieldType.Text,
        maxLength: 20,
        minLength: 10,
        tip: "Plain Text Input",
        gridArea: "left",
    },
    {
        name: "numericInput",
        label: "Numeric Input",
        defaultValue: 0,
        type: types_1.FormFieldType.Number,
        tip: "Numbers only",
        gridArea: "left",
    },
    {
        name: "dateVal",
        label: "Date Input",
        defaultValue: "",
        type: types_1.FormFieldType.Date,
        tip: "Date Value",
        gridArea: "left",
    },
    {
        name: "password",
        label: "Password",
        defaultValue: "",
        type: types_1.FormFieldType.Password,
        tip: "Choose as passsword",
        showPasswordStrength: true,
        minPasswordStrength: 50,
        visibilityToggle: true,
        required: true,
        gridArea: "left",
    },
    {
        name: "boolCheckbox",
        label: "Boolean Input Checkbox",
        defaultValue: true,
        type: types_1.FormFieldType.Boolean,
        tip: "Bool input using checkbox",
        required: true,
        controlType: "checkbox",
        gridArea: "left",
    },
    {
        name: "singleList",
        label: "Single Select List",
        defaultValue: 2,
        type: types_1.FormFieldType.DropDown,
        options: [
            {
                name: "Male",
                value: 1,
            },
            {
                name: "Female",
                value: 2,
            },
        ],
        itemLabelKey: "name",
        itemValueKey: "value",
        tip: "You are allowed to pick one",
        gridArea: "right",
    },
    {
        name: "multiList",
        label: "Mutiple Select List",
        defaultValue: 2,
        type: types_1.FormFieldType.DropDown,
        options: [
            {
                name: "C++",
                value: 1,
            },
            {
                name: "Javascript",
                value: 2,
            },
            {
                name: "Go",
                value: 3,
            },
        ],
        itemLabelKey: "name",
        itemValueKey: "value",
        multiple: true,
        tip: "You can choose many",
        gridArea: "right",
    },
    {
        name: "timeVal",
        label: "Time Input:",
        defaultValue: new Date(),
        type: types_1.FormFieldType.Time,
        tip: "Time Input",
        gridArea: "right",
    },
    {
        name: "sub",
        label: "Sub Form Editor",
        type: types_1.FormFieldType.SubForm,
        gridArea: "right",
        required: true,
        render: (base) => {
            // eslint-disable-next-line react-hooks/rules-of-hooks
            let [showSub, setShowSub] = react_1.useState(false);
            return (jsx_runtime_1.jsxs(grommet_1.Box, { children: [showSub && (jsx_runtime_1.jsx(grommet_1.Layer, Object.assign({ onEsc: () => setShowSub(false), position: "center" }, { children: base(jsx_runtime_1.jsx(grommet_1.Box, { children: jsx_runtime_1.jsxs(grommet_1.Box, Object.assign({ direction: "row" }, { children: [jsx_runtime_1.jsx(grommet_1.Button, { label: "Save", type: "submit" }, void 0),
                                    jsx_runtime_1.jsx(grommet_1.Button, { label: "cancel", onClick: () => setShowSub(false) }, void 0)] }), void 0) }, void 0), {
                            onSubmit: () => setShowSub(false),
                        }) }), void 0)),
                    jsx_runtime_1.jsx(grommet_1.Button, { label: "Edit Form In Modal", onClick: () => setShowSub(true) }, void 0)] }, void 0));
        },
        formProps: {
            fields: [
                {
                    name: "sub-info",
                    label: "Sub Info",
                    type: types_1.FormFieldType.Text,
                },
            ],
        },
    },
];
const StyledFormBuilder = styled_components_1.default(form_builder_1.FormBuilder) `
  background-color: #f1f1f1;
  padding: 2em;
  border-radius: 4px;
  border: solid 1px #aaa;
`;
const Template = (args) => (jsx_runtime_1.jsx(context_1.FormBuilderContextProvider, { children: jsx_runtime_1.jsx(StyledFormBuilder, Object.assign({}, args, { onSubmit: (data) => alert(JSON.stringify(data)), layout: jsx_runtime_1.jsx(ResponsiveFlex, {}, void 0), rows: ["flex", "flex", "5em"], columns: ["50%", "50%"], editorWrapComponent: jsx_runtime_1.jsx(ResponsiveFlexCol, {}, void 0), devMode: true, areas: [
            {
                name: "right",
                start: [1, 0],
                end: [1, 1],
            },
            {
                name: "left",
                start: [0, 0],
                end: [0, 1],
            },
            {
                name: "foot",
                start: [0, 2],
                end: [0, 2],
            },
        ] }, { children: jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ fill: true }, { children: jsx_runtime_1.jsx(grommet_1.Button, { gridArea: "foot", type: "submit", primary: true, size: "small", label: "Submit", alignSelf: "start" }, void 0) }), void 0) }), void 0) }, void 0));
exports.Overview = Template.bind({});
exports.Overview.args = {
    fields: fields,
};