@tsed/react-formio 3.0.0-alpha.1 → 3.0.0-alpha.11

package/src/components/form-control/formControl.component.tsx

@@ -1,58 +0,0 @@
-import classnames from "classnames";
-import type { PropsWithChildren, ReactNode } from "react";
-
-export interface FormControlProps<Data = any> {
-  name: string;
-  value?: Data;
-  required?: boolean;
-  label?: string;
-  className?: string;
-  onChange?: (name: string, value: any) => void;
-  description?: string | ReactNode;
-  prefix?: ReactNode | string;
-  suffix?: ReactNode | string;
-  shadow?: boolean;
-}
-
-export function FormControl({
-  children,
-  name,
-  required,
-  prefix,
-  suffix,
-  description,
-  label,
-  className
-}: PropsWithChildren<FormControlProps>) {
-  return (
-    <div data-testid={name && `form-group-${name}`} id={`form-group-${name || ""}`} className={classnames("form-group", className)}>
-      {label && (
-        <label htmlFor={name} data-testid='form-control-label' className={`col-form-label ${required ? " field-required" : ""}`}>
-          {label}
-        </label>
-      )}
-      <div className={"input-group"}>
-        {prefix && (
-          <div className='input-group-prepend'>
-            <span className='input-group-text' data-testid='form-control-prefix'>
-              {prefix}
-            </span>
-          </div>
-        )}
-        {children}
-        {suffix && (
-          <div className='input-group-append'>
-            <span className='input-group-text' data-testid='form-control-suffix'>
-              {suffix}
-            </span>
-          </div>
-        )}
-      </div>
-      {description && (
-        <div data-testid='form-control-description' className='form-text text-muted'>
-          {description}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/form-control/formControl.stories.tsx

@@ -1,63 +0,0 @@
-import { iconClass } from "../../utils/iconClass";
-import { FormControl } from "./formControl.component";
-
-export default {
-  title: "ReactFormio/FormControl",
-  component: FormControl,
-  argTypes: {
-    label: {
-      control: {
-        type: "text"
-      }
-    },
-    name: {
-      control: {
-        type: "text"
-      }
-    },
-    children: {
-      control: {
-        type: HTMLElement || HTMLCollection
-      }
-    }
-  },
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  return <FormControl {...args} />;
-};
-
-Sandbox.args = {
-  label: "Label",
-  children: <input type='text' className='form-control' placeholder='placeholder' />
-};
-
-export const WithPrefix = (args: any) => {
-  return <FormControl {...args} />;
-};
-
-WithPrefix.args = {
-  label: "Label",
-  children: <input type='text' className='form-control' placeholder='placeholder' />,
-  prefix: <i className={iconClass(undefined, "calendar")} />
-};
-
-export const WithSuffix = (args: any) => {
-  return <FormControl {...args} />;
-};
-
-WithSuffix.args = {
-  label: "Label",
-  children: <input type='text' className='form-control' placeholder='placeholder' />,
-  suffix: <i className={iconClass(undefined, "calendar")} />
-};
-
-export const WithDescription = (args: any) => {
-  return <FormControl {...args} />;
-};
-
-WithDescription.args = {
-  label: "Label",
-  children: <input type='text' className='form-control' placeholder='placeholder' />
-};

package/src/components/form-edit/formCtas.component.tsx

@@ -1,106 +0,0 @@
-import PropTypes from "prop-types";
-import { ReactElement } from "react";
-
-import { useTooltip } from "../../hooks/useTooltip";
-import { FormOptions } from "../../interfaces";
-import { iconClass } from "../../utils/iconClass";
-
-export interface FormEditCTAsProps extends Record<string, unknown> {
-  saveText?: string;
-  options?: FormOptions;
-  hasUndo?: boolean;
-  hasRedo?: boolean;
-  disabled?: boolean;
-  onCopy?: Function;
-  onSubmit?: Function;
-  onReset?: Function;
-  onUndo?: Function;
-  onRedo?: Function;
-}
-
-export function FormEditCTAs({
-  saveText = "Save",
-  disabled,
-  options = {},
-  onCopy,
-  hasUndo,
-  hasRedo,
-  onUndo,
-  onRedo,
-  onReset,
-  onSubmit
-}: FormEditCTAsProps): ReactElement {
-  const { i18n: t = (t: string): string => t } = options;
-
-  const copyTooltipRef: any = useTooltip({
-    trigger: "hover",
-    placement: "top",
-    title: t("Copy")
-  });
-
-  const undoTooltipRef: any = useTooltip({
-    trigger: "hover",
-    placement: "top",
-    title: t("Undo last change")
-  });
-
-  const redoTooltipRef: any = useTooltip({
-    trigger: "hover",
-    placement: "top",
-    title: t("Redo last change")
-  });
-
-  const resetTooltipRef: any = useTooltip({
-    trigger: "hover",
-    placement: "top",
-    title: t("Reset all changes")
-  });
-
-  return (
-    <div className={"form-edit__actions"}>
-      <div>
-        <button
-          className={`btn btn-primary btn-save flex ${disabled ? "disabled" : ""}`}
-          disabled={disabled}
-          onClick={() => !disabled && onSubmit && onSubmit()}
-        >
-          <i className={`mr-1 ${iconClass(options.iconset, "save")}`} />
-          {saveText}
-        </button>
-
-        <div>
-          <button className={`btn btn-light btn-undo ${hasUndo ? "" : "disabled"}`} onClick={() => onUndo && onUndo()} ref={undoTooltipRef}>
-            <i className={iconClass(options.iconset, "undo")} />
-          </button>
-
-          <button className={`btn btn-light btn-redo ${hasRedo ? "" : "disabled"}`} onClick={() => onRedo && onRedo()} ref={redoTooltipRef}>
-            <i className={iconClass(options.iconset, "redo")} />
-          </button>
-        </div>
-
-        <div>
-          {onCopy && (
-            <button className='btn btn-light' onClick={() => onCopy()} ref={copyTooltipRef!}>
-              <i className={iconClass(options.iconset, "copy")} />
-            </button>
-          )}
-
-          <button className={`btn btn-light btn-reset`} onClick={() => onReset && onReset()} ref={resetTooltipRef!}>
-            <i className={iconClass(options.iconset, "reset")} />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-FormEditCTAs.propTypes = {
-  saveText: PropTypes.string,
-  options: PropTypes.object,
-  hasUndo: PropTypes.bool,
-  hasRedo: PropTypes.bool,
-  disabled: PropTypes.bool,
-  onCopy: PropTypes.func,
-  onSubmit: PropTypes.func,
-  onReset: PropTypes.func
-};

package/src/components/form-edit/formEdit.component.tsx

@@ -1,59 +0,0 @@
-import PropTypes from "prop-types";
-
-import { FormOptions } from "../../interfaces/FormOptions";
-import { FormBuilder } from "../form-builder/formBuilder.component";
-import { FormEditCTAs } from "./formCtas.component";
-import { FormParameters } from "./formParameters.component";
-import { useFormEdit, UseFormEditHookProps } from "./useFormEdit.hook";
-
-export interface FormEditProps extends UseFormEditHookProps {
-  builder?: any;
-  options?: FormOptions;
-}
-
-export function FormEdit(props: FormEditProps) {
-  const { form, isValid, setChange, hasRedo, hasChanged, hasUndo, redo, undo, reset, onSubmit, onCopy } = useFormEdit(props);
-  const { options = {}, builder } = props;
-
-  return (
-    <div>
-      <div className='form-edit'>
-        <FormParameters {...props} className={""} key={`form-settings-${form._id}`} form={form} onChange={setChange} />
-        <FormEditCTAs
-          {...props}
-          className={""}
-          key={`form-edit-ctas-${form._id}`}
-          options={options}
-          hasRedo={hasRedo}
-          hasUndo={hasUndo}
-          disabled={!(isValid && hasChanged)}
-          onRedo={redo}
-          onUndo={undo}
-          onReset={reset}
-          onCopy={onCopy}
-          onSubmit={onSubmit}
-        />
-      </div>
-
-      <FormBuilder
-        key={`form-builder-${form._id}`}
-        components={form.components!}
-        display={form.display}
-        options={options}
-        builder={builder}
-        onChange={(components) => {
-          setChange("components", components);
-        }}
-      />
-    </div>
-  );
-}
-
-FormEdit.propTypes = {
-  form: PropTypes.object.isRequired,
-  options: PropTypes.object,
-  typeChoices: PropTypes.array,
-  displayChoices: PropTypes.array,
-  enableTags: PropTypes.bool,
-  onSubmit: PropTypes.func
-};

package/src/components/forms-table/components/formCell.component.tsx

@@ -1,47 +0,0 @@
-import classnames from "classnames";
-import moment from "moment";
-import { CellProps } from "react-table";
-
-import { FormSchema } from "../../../interfaces";
-import { iconClass } from "../../../utils/iconClass";
-import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";
-
-export function FormsCell(props: CellProps<FormSchema> & { icon: string; i18n: (f: string) => string }) {
-  const {
-    icon = "server",
-    row: { original: form }
-  } = props;
-
-  return (
-    <div className={"p-1"}>
-      <h4 className={"text-primary text-lg flex items-center"}>
-        <i className={classnames(iconClass(undefined, icon), "mr-1")} />
-        {form.title}
-      </h4>
-
-      <ul className='reset-list text-gray-500'>
-        <li className={"text-sm"}>Name: {form.name || form.machineName}</li>
-        <li className='mt-5'>
-          <span className='badge bg-light mr-1'>
-            <i className={classnames(iconClass(undefined, "history"), "mr-1")} />
-            <span>Updated {moment(form.modified).fromNow()}</span>
-          </span>
-
-          {(form.tags || []).map((tag, index) => (
-            <button
-              key={index}
-              className='badge badge-hover bg-secondary mr-1'
-              onClick={stopPropagationWrapper(() => {
-                props.setFilter("tags", tag);
-                props.gotoPage(0);
-              })}
-            >
-              <i className={classnames(iconClass(undefined, "tags"), "mr-1")} />
-              {tag}
-            </button>
-          ))}
-        </li>
-      </ul>
-    </div>
-  );
-}

package/src/components/forms-table/formsTable.component.tsx

@@ -1,40 +0,0 @@
-import { FormSchema } from "../../interfaces";
-import { DefaultColumnFilter } from "../table/filters/defaultColumnFilter.component";
-import { SelectColumnFilter } from "../table/filters/selectColumnFilter.component";
-import { TableProps } from "../table/hooks/useCustomTable.hook";
-import { Table } from "../table/table.component";
-import { FormsCell as DefaultFormCell } from "./components/formCell.component";
-
-export type FormsTableProps = Omit<TableProps<FormSchema>, "columns"> & {
-  icon?: string;
-  tags?: { label: string; value: string }[];
-};
-
-export function FormsTable({ Cell, ...props }: FormsTableProps) {
-  const { i18n = (f: string) => f, tags } = props;
-  const FormCell = Cell || (DefaultFormCell as any);
-  const columns = [
-    {
-      Header: i18n("Title"),
-      accessor: "title",
-      id: "title",
-      Cell: (props: any) => <FormCell {...props} icon={props.icon} i18n={i18n} />,
-      Filter: DefaultColumnFilter,
-      colspan: 2
-    },
-    {
-      Header: i18n("Tags"),
-      accessor: "tags",
-      id: "tags",
-      hidden: true,
-      Filter: (props: any) =>
-        tags && tags.length ? (
-          <SelectColumnFilter {...props} column={{ ...props.columns, choices: tags }} />
-        ) : (
-          <DefaultColumnFilter {...props} />
-        )
-    }
-  ];
-
-  return <Table {...(props as any)} columns={columns} />;
-}

package/src/components/index.ts

@@ -1,25 +0,0 @@
-export * from "./actions-table/actionsTable.component";
-export * from "./alert/alert.component";
-export * from "./card/card.component";
-export * from "./form/form.component";
-export * from "./form/useForm.hook";
-export * from "./form-access/formAccess.component";
-export * from "./form-action/formAction.component";
-export * from "./form-builder/formBuilder.component";
-export * from "./form-control/formControl.component";
-export * from "./form-edit/formCtas.component";
-export * from "./form-edit/formEdit.component";
-export * from "./form-edit/formParameters.component";
-export * from "./form-edit/useFormEdit.hook";
-export * from "./form-settings/formSettings.component";
-export * from "./forms-table/formsTable.component";
-export * from "./input-tags/inputTags.component";
-export * from "./input-text/inputText.component";
-export * from "./loader/loader.component";
-export * from "./modal/modal.component";
-export * from "./modal/removeModal.component";
-export * from "./pagination/pagination.component";
-export * from "./select/select.component";
-export * from "./submissions-table/submissionsTable.component";
-export * from "./table";
-export * from "./tabs/tabs.component";

package/src/components/input-tags/inputTags.component.tsx

@@ -1,58 +0,0 @@
-import Choices from "@formio/choices.js";
-import uniq from "lodash/uniq";
-import PropTypes from "prop-types";
-import { useEffect, useRef } from "react";
-
-import { FormControl, FormControlProps } from "../form-control/formControl.component";
-
-export interface InputTagsProps<T = any> extends Omit<FormControlProps, "description" | "prefix" | "suffix"> {
-  value?: T;
-  onChange?: (name: string, value: T) => void;
-  placeholder?: string;
-
-  [key: string]: any;
-}
-
-export function InputTags({ name, value = [], label, onChange, required, description, prefix, suffix, ...props }: InputTagsProps) {
-  const ref: any = useRef();
-
-  useEffect(() => {
-    const instance = new Choices(ref.current, {
-      delimiter: ",",
-      editItems: true,
-      removeItemButton: true
-    });
-
-    instance.setValue([].concat(value, []));
-
-    instance.passedElement.element.addEventListener("addItem", (event: any) => {
-      onChange && onChange(name, uniq(value.concat(event.detail.value)));
-    });
-
-    instance.passedElement.element.addEventListener("removeItem", (event: any) => {
-      onChange &&
-        onChange(
-          name,
-          value.filter((v: string) => v !== event.detail.value)
-        );
-    });
-
-    return () => {
-      instance.destroy();
-    };
-  }, []);
-
-  return (
-    <FormControl name={name} label={label} required={required} description={description} prefix={prefix} suffix={suffix}>
-      <input ref={ref} type='text' {...props} id={name} required={required} />
-    </FormControl>
-  );
-}
-
-InputTags.propTypes = {
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.array,
-  required: PropTypes.bool,
-  onChange: PropTypes.func
-};

package/src/components/input-tags/inputTags.stories.tsx

@@ -1,97 +0,0 @@
-import { useState } from "react";
-
-import { iconClass } from "../../utils/iconClass";
-import { InputTags } from "./inputTags.component";
-
-const useValue = (args: any) => {
-  const [value, setValue] = useState(args.value);
-
-  return {
-    ...args,
-    value,
-    onChange(name: string, value: any) {
-      setValue(value);
-      args.onChange(name, value);
-    }
-  };
-};
-
-export default {
-  title: "ReactFormio/InputTags",
-  component: InputTags,
-  argTypes: {
-    label: {
-      control: {
-        type: "text"
-      }
-    },
-    name: {
-      control: {
-        type: "text"
-      }
-    },
-    value: {
-      control: {
-        type: "object"
-      }
-    },
-    size: {
-      control: {
-        type: "select",
-        options: ["sm", "normal"]
-      }
-    },
-    placeholder: {
-      control: {
-        type: "text"
-      }
-    },
-    choices: {
-      control: {
-        type: "object"
-      }
-    },
-    description: {
-      control: {
-        type: "text"
-      }
-    }
-  },
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  return <InputTags {...args} />;
-};
-
-Sandbox.args = {
-  name: "name",
-  label: "Label",
-  value: ["test"],
-  size: "",
-  placeholder: "Placeholder"
-};
-
-export const WithPrefix = (args: any) => {
-  return <InputTags prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-WithPrefix.args = {
-  label: "Label",
-  value: [],
-  name: "name",
-  size: "",
-  placeholder: "Placeholder"
-};
-
-export const WithSuffix = (args: any) => {
-  return <InputTags suffix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-WithSuffix.args = {
-  label: "Label",
-  value: [],
-  name: "name",
-  size: "",
-  placeholder: "Placeholder"
-};

package/src/components/input-text/inputText.component.tsx

@@ -1,85 +0,0 @@
-import classnames from "classnames";
-import PropTypes from "prop-types";
-import { useEffect, useMemo, useState } from "react";
-
-import { callLast } from "../../utils/callLast";
-import { getEventValue } from "../../utils/getEventValue";
-import { FormControl, FormControlProps } from "../form-control/formControl.component";
-
-export interface InputTextProps<T = any> extends FormControlProps {
-  type?: string;
-  value?: T;
-  /**
-   * The input size
-   */
-  size?: string;
-  onChange?: (name: string, value: T) => void;
-  placeholder?: string;
-
-  [key: string]: any;
-}
-
-export function InputText<T = any>({
-  name,
-  value,
-  label,
-  onChange,
-  required,
-  size,
-  type,
-  prefix,
-  suffix,
-  description,
-  className,
-  placeholder,
-  ...props
-}: InputTextProps<T>) {
-  const [localValue, setValue] = useState(value);
-
-  const change = useMemo(() => onChange && callLast(onChange, 300), [onChange]);
-
-  useEffect(() => {
-    setValue(value);
-  }, [value]);
-
-  return (
-    <FormControl
-      name={name}
-      label={label}
-      required={required}
-      description={description}
-      prefix={prefix}
-      suffix={suffix}
-      className={className}
-    >
-      <input
-        type={type || "text"}
-        {...props}
-        data-testid={`input_${name}`}
-        className={classnames("form-control", size && `form-control-${size}`)}
-        id={name}
-        required={required}
-        value={(localValue || "") as any}
-        placeholder={placeholder}
-        onChange={(event) => {
-          const value = getEventValue(event);
-          setValue(value);
-
-          return change && change(name, value);
-        }}
-      />
-    </FormControl>
-  );
-}
-
-InputText.propTypes = {
-  label: PropTypes.string,
-  type: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.any,
-  size: PropTypes.string,
-  required: PropTypes.bool,
-  onChange: PropTypes.func,
-  prefix: PropTypes.any,
-  suffix: PropTypes.any
-};