@luscii-healthtech/web-ui 21.4.2 → 22.0.1

package/dist/components/Input/Input.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { AllowedTextInputTypes } from "../Form/form.types";
 import type { IconKey, IconProps } from "../Icons/types/IconProps.type";
-import { FormFieldWidth } from "../Form/form.types";
 import "./Input.css";
+type AllowedTextInputTypes = Extract<React.HTMLInputTypeAttribute, "email" | "number" | "password" | "text">;
+type FormFieldWidth = "sm" | "md" | "lg" | "xl" | "full";
 /**
  * It's very complicated to tap into the onChange events of inputs,
  * so I omit the type it requires and add a easier one to deal with.

package/dist/components/Input/StyledInput.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import type { AllowedTextInputTypes } from "../Form/form.types";
 import type { IconProps } from "../Icons/types/IconProps.type";
-import type { FormFieldWidth } from "../Form/form.types";
+type AllowedTextInputTypes = Extract<React.HTMLInputTypeAttribute, "email" | "number" | "password" | "text">;
+type FormFieldWidth = "sm" | "md" | "lg" | "xl" | "full";
 export declare const StyledInput: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type"> & {
     type?: AllowedTextInputTypes | undefined;
     suffix?: string | undefined;
@@ -12,3 +12,4 @@ export declare const StyledInput: React.ForwardRefExoticComponent<Omit<Omit<Reac
     isClearIconVisible?: boolean | undefined;
     onClickClearField?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/Select/Select.d.ts

@@ -8,7 +8,7 @@ import React from "react";
  * bundle the svg assets used here, and we end up with some broken style.
  */
 import "./Select.scss";
-import { FormFieldWidth } from "../Form/form.types";
+type FormFieldWidth = "sm" | "md" | "lg" | "xl" | "full";
 interface OptionMinimal {
     value: any;
     label?: string;

package/dist/index.d.ts

@@ -77,7 +77,6 @@ export { ViewItem, type ViewItemProps } from "./components/ViewItem/ViewItem";
 export { UnorderedList, UList } from "./components/UnorderedList/UnorderedList";
 export { default as Text } from "./components/Text/Text";
 export { SearchInput, type SearchInputProps, } from "./components/Input/SearchInput";
-export { GenericForm, Form, type FormProps, type GenericFormProps, } from "./components/Form/Form";
 export { Icon } from "./components/Icon";
 export type { IconProps, IconKey, } from "./components/Icons/types/IconProps.type";
 export * from "./components/Icons";

package/dist/index.development.js

@@ -23,8 +23,6 @@ var debounce = require('lodash.debounce');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
 var ReactQuill = require('react-quill');
 require('react-quill/dist/quill.snow.css');
-var pick = require('lodash/pick');
-var index_ie11 = require('react-hook-form/dist/index.ie11');
 var react = require('@headlessui/react');
 var solid = require('@heroicons/react/20/solid');
 var ToggleGroup = require('@radix-ui/react-toggle-group');
@@ -63,7 +61,6 @@ var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
 var groupBy__default = /*#__PURE__*/_interopDefault(groupBy);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var ReactQuill__default = /*#__PURE__*/_interopDefault(ReactQuill);
-var pick__default = /*#__PURE__*/_interopDefault(pick);
 var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 
 /******************************************************************************
@@ -5338,215 +5335,6 @@ UnorderedList.Item = Item;
 UnorderedList.Padding = Padding$1;
 UnorderedList.Indent = Indent;
 
-const FormFieldErrorMessages = (props) => {
-  const { fieldName, error } = props;
-  const fieldErrors = error[fieldName];
-  if (!(fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors.types)) {
-    return null;
-  }
-  return React__namespace.default.createElement("div", { className: "ui-mt-1 ui-space-y-1" }, Object.entries(fieldErrors.types).map(([errorKey, errorMessage]) => React__namespace.default.createElement(Text, { key: `${fieldName}-${errorKey}`, text: errorMessage, color: "red", type: "sm" })));
-};
-
-function FormFieldLabeler({ name, children, label, fieldRequired, info, fieldErrors, decoratorClassname }) {
-  return React__namespace.default.createElement(
-    "div",
-    { className: classNames__default.default(decoratorClassname) },
-    label && React__namespace.default.createElement(
-      "label",
-      { className: "cweb-form-field-label ui-mb-1 ui-block", htmlFor: name, "data-is-required": fieldRequired },
-      React__namespace.default.createElement(Text, { className: "cweb-form-field-label-text", inline: true, text: label })
-    ),
-    React__namespace.default.createElement("fieldset", { className: "cweb-form-fieldset" }, children),
-    info && React__namespace.default.createElement(Text, { className: "cweb-form-info-text ui-mt-1", type: "sm", color: "slate-500", text: info }),
-    React__namespace.default.createElement(FormFieldErrorMessages, { fieldName: name, error: fieldErrors })
-  );
-}
-
-const hasError = (name, errors) => {
-  return !!(name && errors && name in errors);
-};
-const isRequired = (options) => {
-  return !!(options && "required" in options);
-};
-
-const FormInput = React__namespace.default.forwardRef((_a, innerRef) => {
-  var { control, name, rules, fieldErrors, fieldRequired, label, info, decoratorClassname } = _a, fieldProps = __rest(_a, ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"]);
-  return React__namespace.default.createElement(
-    FormFieldLabeler,
-    { name, fieldErrors, fieldRequired, label, info, decoratorClassname },
-    React__namespace.default.createElement(index_ie11.Controller, { name, control, rules, render: (field) => React__namespace.default.createElement(Input, Object.assign({}, fieldProps, field, { isError: hasError(name, fieldErrors), asFormField: true, ref: innerRef })) })
-  );
-});
-
-const FormRadioGroup = React__namespace.default.forwardRef((_a, innerRef) => {
-  var { control, name, rules, fieldErrors, fieldRequired, label, info, decoratorClassname } = _a, fieldProps = __rest(_a, ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"]);
-  return React__namespace.default.createElement(
-    FormFieldLabeler,
-    { name, fieldErrors, fieldRequired, label, info, decoratorClassname },
-    React__namespace.default.createElement(index_ie11.Controller, { name, control, rules, render: ({ onChange, value }) => {
-      return React__namespace.default.createElement(RadioGroupV2, Object.assign({}, fieldProps, { options: fieldProps.options.map((option) => Object.assign(Object.assign({}, option), { checked: value === option.value })), isError: hasError(name, fieldErrors), ref: innerRef, name, onChange }));
-    } })
-  );
-});
-
-const FormSelect = React__namespace.default.forwardRef((_a, innerRef) => {
-  var { control, name, rules, fieldErrors, fieldRequired, label, info, decoratorClassname } = _a, selectProps = __rest(_a, ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"]);
-  return React__namespace.default.createElement(
-    FormFieldLabeler,
-    { name, fieldErrors, fieldRequired, label, info, decoratorClassname },
-    React__namespace.default.createElement(index_ie11.Controller, { name, control, rules, render: (field) => React__namespace.default.createElement(Select, Object.assign({}, selectProps, field, { isError: hasError(name, fieldErrors), ref: innerRef })) })
-  );
-});
-
-const FormImagePicker = React__namespace.default.forwardRef((_a, innerRef) => {
-  var { control, name, rules, fieldErrors, fieldRequired, label, info, decoratorClassname } = _a, fieldProps = __rest(_a, ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"]);
-  return React__namespace.default.createElement(
-    FormFieldLabeler,
-    { name, fieldErrors, fieldRequired, label, info, decoratorClassname },
-    React__namespace.default.createElement(index_ie11.Controller, { name, control, rules, render: (field) => {
-      var _a2;
-      if (fieldProps.preselectedMedia && !field.value) {
-        field.onChange({
-          target: { name, value: fieldProps.preselectedMedia }
-        });
-      }
-      return React__namespace.default.createElement(MediaPicker, Object.assign({}, fieldProps, field, { media: fieldProps.media, onChange: (e) => {
-        var _a3;
-        field.onChange(e.target.value);
-        (_a3 = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.onChange) === null || _a3 === void 0 ? void 0 : _a3.call(fieldProps, e);
-      }, preselectedMedia: (_a2 = field.value) !== null && _a2 !== void 0 ? _a2 : fieldProps.preselectedMedia, ref: innerRef }));
-    } })
-  );
-});
-
-const FormFieldCheckbox = React__namespace.default.forwardRef((_a, innerRef) => {
-  var { control, name, rules, fieldErrors, fieldRequired, label, info, decoratorClassname } = _a, fieldProps = __rest(_a, ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"]);
-  return React__namespace.default.createElement(
-    FormFieldLabeler,
-    { name, fieldErrors, fieldRequired, label: "", info, decoratorClassname },
-    React__namespace.default.createElement(index_ie11.Controller, { name, control, rules, render: ({ onChange, value }) => {
-      return React__namespace.default.createElement(Checkbox, Object.assign({}, fieldProps, {
-        // Might be a tech debt due to how we named this
-        // but the field type is always a checkbox, its shape
-        // or style is what changes. The name `variant` was added
-        // to the props to avoid confusion.
-        type: fieldProps.variant,
-        isChecked: value,
-        error: hasError(name, fieldErrors),
-        ref: innerRef,
-        name,
-        onChange: (event) => {
-          onChange(event.target.checked);
-        },
-        text: label,
-        value
-      }));
-    } })
-  );
-});
-
-const FormFieldCheckboxList = ({ control, name, rules, fieldErrors, fieldRequired, label, info, decoratorClassname, fieldProps = { groups: [], onChange: () => void 0 } }) => {
-  return React__namespace.default.createElement(
-    FormFieldLabeler,
-    { name, fieldErrors, fieldRequired, label, info, decoratorClassname },
-    React__namespace.default.createElement(index_ie11.Controller, { name, control, rules, render: ({ onChange, value }) => {
-      const { className } = fieldProps;
-      const [checkboxListValues, setCheckboxListValues] = React.useState(value);
-      React.useEffect(() => {
-        setCheckboxListValues(value);
-      }, [value]);
-      return React__namespace.default.createElement(CheckboxList, { groups: checkboxListValues, className, onChange: (event) => {
-        setCheckboxListValues((previousState) => {
-          const newState = previousState.map((group) => {
-            const newItems = group.items.map((item) => {
-              if (item.id === event.id) {
-                return Object.assign(Object.assign({}, item), { isChecked: event.newCheckedValue });
-              } else {
-                return item;
-              }
-            });
-            return Object.assign(Object.assign({}, group), { items: newItems });
-          });
-          onChange(newState);
-          return newState;
-        });
-      } });
-    } })
-  );
-};
-
-const FormTextarea = React__namespace.default.forwardRef((_a, innerRef) => {
-  var { control, name, rules, fieldErrors, fieldRequired, label, info, decoratorClassname } = _a, fieldProps = __rest(_a, ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"]);
-  return React__namespace.default.createElement(
-    FormFieldLabeler,
-    { name, fieldErrors, fieldRequired, label, info, decoratorClassname },
-    React__namespace.default.createElement(index_ie11.Controller, { name, control, rules, render: (field) => React__namespace.default.createElement(Textarea, Object.assign({}, fieldProps, field, { isError: hasError(name, fieldErrors), ref: innerRef })) })
-  );
-});
-
-function GenericForm({ fields, onValid, onError, defaultValues }) {
-  const useFormReturn = index_ie11.useForm({
-    criteriaMode: "all",
-    defaultValues
-  });
-  React.useEffect(() => {
-    if (defaultValues) {
-      useFormReturn.reset(defaultValues);
-    }
-  }, [defaultValues]);
-  const { handleSubmit } = useFormReturn;
-  return React__namespace.default.createElement(
-    "div",
-    { className: "ui-space-y-6" },
-    React__namespace.default.createElement(Form, { fields, useFormReturn }),
-    React__namespace.default.createElement(PrimaryButton, { onClick: handleSubmit(onValid, onError), text: "submit" })
-  );
-}
-function Form({ fields, useFormReturn }) {
-  return React__namespace.default.createElement("div", { className: "ui-space-y-6" }, fields.map((props) => FormFieldMapper(props, useFormReturn)));
-}
-function FormFieldMapper(formFieldProps, useFormReturn) {
-  const { type, name, options, fieldProps = {} } = formFieldProps;
-  const decoratorProps = pick__default.default(formFieldProps, [
-    "label",
-    "info",
-    "decoratorClassname"
-  ]);
-  const { control, formState: { errors } } = useFormReturn;
-  switch (type) {
-    case "row":
-      return React__namespace.default.createElement(FlexRow, { key: formFieldProps.key }, formFieldProps.fields.map((field) => FormFieldMapper(Object.assign({ decoratorClassname: "ui-flex-auto" }, field), useFormReturn)));
-    case "text":
-    case "number":
-    case "email":
-    case "password":
-      return React__namespace.default.createElement(FormInput, Object.assign({ key: name, name }, decoratorProps, { fieldRequired: isRequired(options), fieldErrors: errors }, fieldProps, { control, rules: options, type }));
-    case "select":
-      return React__namespace.default.createElement(FormSelect, Object.assign({ key: name }, decoratorProps, { fieldRequired: isRequired(options), fieldErrors: errors }, fieldProps, { control, rules: options, name }));
-    case "mediaPicker":
-      return React__namespace.default.createElement(FormImagePicker, Object.assign({ key: name }, decoratorProps, { fieldRequired: isRequired(options), fieldErrors: errors }, fieldProps, { control, rules: options, name }));
-    case "radioGroup": {
-      return React__namespace.default.createElement(FormRadioGroup, Object.assign({ key: name }, decoratorProps, { fieldRequired: isRequired(options), fieldErrors: errors }, fieldProps, { name, rules: options, control }));
-    }
-    case "checkbox": {
-      return React__namespace.default.createElement(FormFieldCheckbox, Object.assign({ key: name }, decoratorProps, { fieldRequired: isRequired(options), fieldErrors: errors }, fieldProps, { type: "checkbox", name, rules: options, control }));
-    }
-    case "checkboxlist": {
-      return React__namespace.default.createElement(FormFieldCheckboxList, Object.assign({ key: name }, decoratorProps, { fieldRequired: isRequired(options), fieldErrors: errors, type: "checkboxlist", name, rules: options, control, fieldProps }));
-    }
-    case "textarea": {
-      return React__namespace.default.createElement(FormTextarea, Object.assign({ key: name }, decoratorProps, { fieldRequired: isRequired(options), fieldErrors: errors, type: "textarea", name, rules: options, control }, fieldProps));
-    }
-    case "title": {
-      return React__namespace.default.createElement(Title, Object.assign({ key: name }, fieldProps));
-    }
-    case "void":
-      return null;
-    default:
-      return null;
-  }
-}
-
 const FullPageModalHeader = ({ primaryButtonProps, actions, title }) => {
   return React__namespace.default.createElement(
     "div",
@@ -6160,12 +5948,10 @@ exports.FirstAidKitIcon = FirstAidKitIcon;
 exports.FlagIcon = FlagIcon;
 exports.FlexColumn = FlexColumn;
 exports.FlexRow = FlexRow;
-exports.Form = Form;
 exports.ForwardIcon = ForwardIcon;
 exports.FullPageModal = FullPageModal;
 exports.GearColoredIcon = GearColoredIcon;
 exports.GearIcon = CogwheelIcon;
-exports.GenericForm = GenericForm;
 exports.GroupColoredIcon = GroupColoredIcon;
 exports.GroupIcon = GroupIcon;
 exports.GroupOfThreeIcon = GroupOfThreeIcon;