@ilo-org/react 0.0.1

package/src/components/Form/Form.args.ts

@@ -0,0 +1,265 @@
+import { FormProps } from "./Form.props";
+import CheckboxArgs from "../Checkbox/Checkbox.args";
+import ChoiceGroupArgs from "../ChoiceGroup/ChoiceGroup.args";
+import DatePickerArgs from "../DatePicker/DatePicker.args";
+import DropdownArgs from "../Dropdown/Dropdown.args";
+import FileUploadArgs from "../FileUpload/FileUpload.args";
+import FormGroupArgs from "../FormGroup/FormGroup.args";
+import InputArgs from "../Input/Input.args";
+import NumberPickerArgs from "../NumberPicker/NumberPicker.args";
+import TextareaArgs from "../Textarea/Textarea.args";
+
+const basic: FormProps = {
+  action: "https://my.action.url",
+  formid: "exampleform",
+  items: [
+    {
+      field: InputArgs.basic,
+      type: "input",
+    },
+    {
+      field: DropdownArgs.basic,
+      type: "dropdown",
+    },
+    {
+      field: FormGroupArgs.basic,
+      type: "formgroup",
+    },
+    {
+      field: { ...CheckboxArgs.basic },
+      type: "checkbox",
+    },
+    {
+      choicegroupid: "multiplecheckboxes",
+      field: ChoiceGroupArgs.checkboxes.items,
+      legend: "Multiple Checkboxes",
+      type: "checkbox",
+    },
+    {
+      choicegroupid: "radios",
+      field: ChoiceGroupArgs.radios.items,
+      legend: "Radio Group",
+      type: "radio",
+    },
+    {
+      field: FileUploadArgs.basic,
+      type: "file",
+    },
+    {
+      field: DatePickerArgs.hasrange,
+      type: "date",
+    },
+    {
+      field: NumberPickerArgs.basic,
+      type: "number",
+    },
+    {
+      field: TextareaArgs.basic,
+      type: "textarea",
+    },
+  ],
+  submitlabel: "Submit",
+};
+
+const hashelper: FormProps = {
+  action: "https://my.action.url",
+  formid: "exampleform",
+  items: [
+    {
+      field: InputArgs.hashelper,
+      type: "input",
+    },
+    {
+      field: DropdownArgs.hashelper,
+      type: "dropdown",
+    },
+    {
+      choicegroupid: "multiplecheckboxes",
+      field: ChoiceGroupArgs.checkboxeshelper.items,
+      grouphelper: ChoiceGroupArgs.checkboxeshelper.grouphelper,
+      legend: "Multiple Checkboxes",
+      type: "checkbox",
+    },
+    {
+      choicegroupid: "radios",
+      field: ChoiceGroupArgs.radioshelper.items,
+      grouphelper: ChoiceGroupArgs.radioshelper.grouphelper,
+      legend: "Radio Group",
+      type: "radio",
+    },
+    {
+      field: FileUploadArgs.hashelper,
+      type: "file",
+    },
+    {
+      field: DatePickerArgs.hashelper,
+      type: "date",
+    },
+    {
+      field: NumberPickerArgs.hashelper,
+      type: "number",
+    },
+    {
+      field: TextareaArgs.hashelper,
+      type: "textarea",
+    },
+  ],
+  submitlabel: "Submit",
+};
+
+const haserror: FormProps = {
+  action: "https://my.action.url",
+  formid: "exampleform",
+  items: [
+    {
+      field: InputArgs.haserror,
+      type: "input",
+    },
+    {
+      field: DropdownArgs.haserror,
+      type: "dropdown",
+    },
+    {
+      choicegroupid: "multiplecheckboxes",
+      field: ChoiceGroupArgs.checkboxeserror.items,
+      grouperror: ChoiceGroupArgs.checkboxeserror.grouperror,
+      legend: "Multiple Checkboxes",
+      type: "checkbox",
+    },
+    {
+      choicegroupid: "radios",
+      field: ChoiceGroupArgs.radioserror.items,
+      grouperror: ChoiceGroupArgs.radioserror.grouperror,
+      legend: "Radio Group",
+      type: "radio",
+    },
+    {
+      field: FileUploadArgs.haserror,
+      type: "file",
+    },
+    {
+      field: DatePickerArgs.haserror,
+      type: "date",
+    },
+    {
+      field: NumberPickerArgs.haserror,
+      type: "number",
+    },
+    {
+      field: TextareaArgs.haserror,
+      type: "textarea",
+    },
+  ],
+  submitlabel: "Submit",
+};
+
+const hastooltip: FormProps = {
+  action: "https://my.action.url",
+  formid: "exampleform",
+  items: [
+    {
+      field: InputArgs.hastooltip,
+      type: "input",
+    },
+    {
+      field: DropdownArgs.hastooltip,
+      type: "dropdown",
+    },
+    {
+      choicegroupid: "multiplecheckboxes",
+      field: ChoiceGroupArgs.checkboxestooltip.items,
+      grouptooltip: ChoiceGroupArgs.checkboxestooltip.grouptooltip,
+      legend: "Multiple Checkboxes",
+      type: "checkbox",
+    },
+    {
+      choicegroupid: "radios",
+      field: ChoiceGroupArgs.radiostooltip.items,
+      grouptooltip: ChoiceGroupArgs.radiostooltip.grouptooltip,
+      legend: "Radio Group",
+      type: "radio",
+    },
+    {
+      field: FileUploadArgs.hastooltip,
+      type: "file",
+    },
+    {
+      field: DatePickerArgs.hastooltip,
+      type: "date",
+    },
+    {
+      field: NumberPickerArgs.hastooltip,
+      type: "number",
+    },
+    {
+      field: TextareaArgs.hastooltip,
+      type: "textarea",
+    },
+  ],
+  submitlabel: "Submit",
+};
+
+const hasdisabled: FormProps = {
+  action: "https://my.action.url",
+  formid: "exampleform",
+  items: [
+    {
+      field: InputArgs.isdisabled,
+      type: "input",
+    },
+    {
+      field: DropdownArgs.basic,
+      type: "dropdown",
+    },
+    {
+      field: FormGroupArgs.basic,
+      type: "formgroup",
+    },
+    {
+      field: { ...CheckboxArgs.basic },
+      type: "checkbox",
+    },
+    {
+      choicegroupid: "multiplecheckboxes",
+      field: ChoiceGroupArgs.checkboxes.items,
+      legend: "Multiple Checkboxes",
+      type: "checkbox",
+    },
+    {
+      choicegroupid: "radios",
+      field: ChoiceGroupArgs.radios.items,
+      legend: "Radio Group",
+      type: "radio",
+    },
+    {
+      field: FileUploadArgs.basic,
+      type: "file",
+    },
+    {
+      field: DatePickerArgs.hasrange,
+      type: "date",
+    },
+    {
+      field: NumberPickerArgs.basic,
+      type: "number",
+    },
+    {
+      field: TextareaArgs.basic,
+      type: "textarea",
+    },
+  ],
+  submitlabel: "Submit",
+};
+
+/**
+ * Sample prop definitions FormGroup's enumerable properties (imported in stories and test)
+ */
+const FormArgs = {
+  basic,
+  hasdisabled,
+  hashelper,
+  haserror,
+  hastooltip,
+};
+
+export default FormArgs;

package/src/components/Form/Form.props.d.ts

@@ -0,0 +1,84 @@
+import { CheckboxProps } from "../Checkbox/Checkbox.props";
+import { DatePickerProps } from "../DatePicker/DatePicker.props";
+import { DropdownProps } from "../Dropdown/Dropdown.props";
+import { FileUploadProps } from "../FileUpload/FileUpload.props";
+import { FormGroupProps } from "../FormGroupProps/FormGroupProps.props";
+import { InputProps } from "../InputProps/InputProps.props";
+import { NumberPickerProps } from "../NumberPicker/NumberPicker.props";
+import { RadioProps } from "../Radio/Radio.props";
+import { TextareaProps } from "../Textarea/Textarea.props";
+import { fieldTypes } from "../../types";
+
+interface FormItems {
+  /**
+   * An optional ID if this is a group of checkboxes or radios
+   */
+  choicegroupid?: string;
+
+  /**
+   * The inputs in this form group
+   */
+  field: Required<
+    | FormGroupProps
+    | DropdownProps
+    | Array<CheckboxProps>
+    | Array<RadioProps>
+    | CheckboxProps
+    | FileUploadProps
+    | NumberPickerProps
+    | DatePickerProps
+    | TextareaProps
+  >;
+
+  /**
+   * Optional error text for the choice group
+   */
+  grouperror?: string;
+
+  /**
+   * Optional helper text for the choice group
+   */
+  grouphelper?: string;
+
+  /**
+   * Optional tooltip text for the choice group
+   */
+  grouptooltip?: string;
+
+  /**
+   * If this is an array of items, an optional legend
+   */
+  legend?: string;
+
+  /**
+   * This item's field type
+   */
+  type: Required<fieldTypes>;
+}
+
+export interface FormProps {
+  /**
+   * The form's action attribute
+   */
+  action: Required<string>;
+
+  /**
+   * Specify an optional className to be added to your Form component.
+   */
+  className?: string;
+
+  /**
+   * The ID of the form
+   */
+  formid: Required<string>;
+
+  /**
+   * The inputs in this form group
+   */
+  items: Required<Array<FormItems>>;
+
+  /**
+   * The label for the form's submit button
+   */
+  submitlabel: Required<string>;
+}

package/src/components/Form/Form.tsx

@@ -0,0 +1,83 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { Button } from "../Button";
+import { FormProps } from "./Form.props";
+import { FormGroup } from "../FormGroup";
+import { Checkbox } from "../Checkbox";
+import { ChoiceGroup } from "../ChoiceGroup";
+import { DatePicker } from "../DatePicker";
+import { Dropdown } from "../Dropdown";
+import { FileUpload } from "../FileUpload";
+import { Input } from "../Input";
+import { NumberPicker } from "../NumberPicker";
+import { Textarea } from "../Textarea";
+
+const Form: FC<FormProps> = ({
+  action,
+  className,
+  formid,
+  items,
+  submitlabel,
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--form`;
+  const formClasses = classNames(className, {
+    [baseClass]: true,
+  });
+
+  return (
+    <form className={formClasses} id={formid} action={action}>
+      {items.map((item, i) => {
+        if (item?.type === "input") {
+          return <Input {...(item?.field as any)} key={i} />;
+        }
+        if (item?.type === "dropdown") {
+          return <Dropdown {...(item?.field as any)} key={i} />;
+        }
+        if (item?.type === "checkbox" && Array.isArray(item?.field) === false) {
+          return <Checkbox {...(item?.field as any)} key={i} />;
+        }
+        if (
+          (item?.type === "checkbox" || item?.type === "radio") &&
+          Array.isArray(item?.field)
+        ) {
+          return (
+            <ChoiceGroup
+              items={item?.field as any}
+              legend={item?.legend as any}
+              choicegroupid={item?.choicegroupid as any}
+              grouperror={item?.grouperror as any}
+              grouphelper={item?.grouphelper as any}
+              grouptooltip={item?.grouptooltip as any}
+              key={i}
+            />
+          );
+        }
+        if (item?.type === "file") {
+          return <FileUpload {...(item?.field as any)} key={i} />;
+        }
+        if (item?.type === "date") {
+          return <DatePicker {...(item?.field as any)} key={i} />;
+        }
+        if (item?.type === "number") {
+          return <NumberPicker {...(item?.field as any)} key={i} />;
+        }
+        if (item?.type === "textarea") {
+          return <Textarea {...(item?.field as any)} key={i} />;
+        }
+        if (item?.type === "formgroup") {
+          return <FormGroup {...(item?.field as any)} key={i} />;
+        }
+      })}
+      <Button
+        kind={"submit"}
+        label={submitlabel}
+        size={"large"}
+        type={"primary"}
+      />
+    </form>
+  );
+};
+
+export default Form;

package/src/components/Form/index.ts

@@ -0,0 +1 @@
+export { default as Form } from "./Form";

package/src/components/FormElement/FormElement.props.d.ts

@@ -0,0 +1,53 @@
+import { inputTypes, fieldTypes } from "../../types";
+
+export interface FormElementProps {
+  /**
+   * Specify the content of your FormElement.
+   */
+  children: ReactElement<Input> | ReactElement<Select> | ReactElement<Textarea>;
+
+  /**
+   * Specify an optional className to be added to your FormElement component.
+   */
+  className?: string;
+
+  /**
+   * Is the field disabled?
+   */
+  disabled?: boolean;
+
+  /**
+   * The fieldset's error message
+   */
+  error: string | false;
+
+  /**
+   * The fieldset's helper text
+   */
+  helper: string;
+
+  /**
+   * The ID of the form element
+   */
+  elemid: Required<string>;
+
+  /**
+   * The fieldset's label
+   */
+  label: Required<string>;
+
+  /**
+   * Is this element required?
+   */
+  required: boolean;
+
+  /**
+   * Does this fieldset have a tooltip?
+   */
+  tooltip?: string;
+
+  /**
+   * The type of field
+   */
+  type?: inputTypes | fieldTypes;
+}

package/src/components/FormElement/FormElement.tsx

@@ -0,0 +1,26 @@
+import { FC } from "react";
+import { FormElementProps } from "./FormElement.props";
+
+const FormElement: FC<FormElementProps> = ({
+  children,
+  // @ts-ignore
+  className,
+  // @ts-ignore
+  error,
+  // @ts-ignore
+  elemid,
+  // @ts-ignore
+  helper,
+  // @ts-ignore
+  label,
+  // @ts-ignore
+  required,
+  // @ts-ignore
+  tooltip,
+  // @ts-ignore
+  type,
+}) => {
+  return <>{children}</>;
+};
+
+export default FormElement;

package/src/components/FormElement/index.ts

@@ -0,0 +1 @@
+export { default as FormElement } from "./FormElement";

package/src/components/FormGroup/FormGroup.args.ts

@@ -0,0 +1,84 @@
+import CheckboxArgs from "../Checkbox/Checkbox.args";
+import DatePickerArgs from "../DatePicker/DatePicker.args";
+import DropdownArgs from "../Dropdown/Dropdown.args";
+import FileUploadArgs from "../FileUpload/FileUpload.args";
+import { FormGroupProps } from "./FormGroup.props";
+import InputArgs from "../Input/Input.args";
+import NumberPickerArgs from "../NumberPicker/NumberPicker.args";
+import RadioArgs from "../Radio/Radio.args";
+import TextareaArgs from "../Textarea/Textarea.args";
+
+const fgcheckboxfields = [];
+const fgradiofields = [];
+
+for (let i = 0; i < 5; i++) {
+  const checkboxargs = { ...CheckboxArgs.basic };
+  const radioargs = { ...RadioArgs.basic };
+  fgcheckboxfields.push(checkboxargs);
+  fgcheckboxfields[i].label = `Checkbox ${i}`;
+  fgcheckboxfields[i].name = `fgcheckbox${i}`;
+  fgcheckboxfields[i].id = `fgcheckbox${i}`;
+  fgcheckboxfields[i].grouped = true;
+  fgradiofields.push(radioargs);
+  fgradiofields[i].label = `Radio ${i}`;
+  fgradiofields[i].name = `fgradio`;
+  fgradiofields[i].value = `fgradio${i}`;
+  fgradiofields[i].id = `fgradio${i}`;
+}
+
+const basic: FormGroupProps = {
+  formgroupid: "examplegroup",
+  items: [
+    {
+      field: InputArgs.basic,
+      type: "input",
+    },
+    {
+      field: DropdownArgs.basic,
+      type: "dropdown",
+    },
+    {
+      field: { ...CheckboxArgs.basic },
+      type: "checkbox",
+    },
+    {
+      choicegroupid: "multiplecheckboxes",
+      field: fgcheckboxfields,
+      legend: "Multiple Checkboxes",
+      type: "checkbox",
+    },
+    {
+      choicegroupid: "radios",
+      field: fgradiofields,
+      legend: "Radio Group",
+      type: "radio",
+    },
+    {
+      field: FileUploadArgs.basic,
+      type: "file",
+    },
+    {
+      field: DatePickerArgs.basic,
+      type: "date",
+    },
+    {
+      field: NumberPickerArgs.basic,
+      type: "number",
+    },
+    {
+      field: TextareaArgs.basic,
+      type: "textarea",
+    },
+  ],
+  legend: "Example Legend",
+  type: "default",
+};
+
+/**
+ * Sample prop definitions FormGroup's enumerable properties (imported in stories and test)
+ */
+const FormGroupArgs = {
+  basic,
+};
+
+export default FormGroupArgs;

package/src/components/FormGroup/FormGroup.props.d.ts

@@ -0,0 +1,71 @@
+import { CheckboxProps } from "../Checkbox/Checkbox.props";
+import { DatePickerProps } from "../DatePicker/DatePicker.props";
+import { DropdownProps } from "../Dropdown/Dropdown.props";
+import { FileUploadProps } from "../FileUpload/FileUpload.props";
+import { InputProps } from "../InputProps/InputProps.props";
+import { NumberPickerProps } from "../NumberPicker/NumberPicker.props";
+import { RadioProps } from "../Radio/Radio.props";
+import { TextareaProps } from "../Textarea/Textarea.props";
+import { fieldTypes, formGroupTypes } from "../../types";
+
+// We can't put a form group inside a form group so let's remove that option
+const formGroupFieldTypes = fieldTypes.filter((item) => item !== "formgroup");
+
+interface FormGroupItems {
+  /**
+   * An optional ID if this is a group of checkboxes or radios
+   */
+  choicegroupid?: string;
+
+  /**
+   * The inputs in this form group
+   */
+  field: Required<
+    | InputProps
+    | DropdownProps
+    | Array<CheckboxProps>
+    | Array<RadioProps>
+    | CheckboxProps
+    | FileUploadProps
+    | NumberPickerProps
+    | DatePickerProps
+    | TextareaProps
+  >;
+
+  /**
+   * If this is an array of items, an optional legend
+   */
+  legend?: string;
+
+  /**
+   * This item's field type
+   */
+  type: Required<formGroupFieldTypes>;
+}
+
+export interface FormGroupProps {
+  /**
+   * Specify an optional className to be added to your FormGroup component.
+   */
+  className?: string;
+
+  /**
+   * The ID of the FormGroup
+   */
+  formgroupid: Required<string | boolean>;
+
+  /**
+   * The inputs in this form group
+   */
+  items: Required<Array<FormGroupItems>>;
+
+  /**
+   * The FormGroups's legend
+   */
+  legend: Required<string | false>;
+
+  /**
+   * This Form Groups's type
+   */
+  type: Required<formGroupTypes>;
+}