@ilo-org/react 0.0.1

package/src/components/Checkbox/Checkbox.args.ts

@@ -0,0 +1,22 @@
+import { CheckboxProps } from "./Checkbox.props";
+
+const basic: CheckboxProps = {
+  callback: "",
+  disabled: false,
+  error: false,
+  grouped: false,
+  helper: false,
+  label: "Checkbox Label",
+  name: "checkbox",
+  required: false,
+  type: "checkbox",
+};
+
+/**
+ * Sample prop definitions Checkbox's enumerable properties (imported in stories and test)
+ */
+const CheckboxArgs = {
+  basic,
+};
+
+export default CheckboxArgs;

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

@@ -0,0 +1,61 @@
+export interface CheckboxProps {
+  /**
+   * The checkbox's onChange callback.
+   */
+  callback: function;
+
+  /**
+   * Specify an optional className to be added to your checkbox.
+   */
+  className?: string;
+
+  /**
+   * Is the checkbox disabled?
+   */
+  disabled?: boolean;
+
+  /**
+   * Does the checkbox have an error?
+   */
+  error?: string | false;
+
+  /**
+   * Is this checkbox part of a group?
+   */
+  grouped?: boolean;
+
+  /**
+   * The checkbox's helper text
+   */
+  helper: string | false;
+
+  /**
+   * The checkbox's id attribute
+   */
+  id?: string;
+
+  /**
+   * Does this checkbox have a label?
+   */
+  label: string;
+
+  /**
+   * The checkbox's name attribute
+   */
+  name?: Required<string>;
+
+  /**
+   * Specify whether this checkbox is required
+   */
+  required?: boolean;
+
+  /**
+   * Does this checkbox have a tooltip?
+   */
+  tooltip?: string;
+
+  /**
+   * The input's type.
+   */
+  type?: "checkbox";
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,92 @@
+import { FC, useState } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { CheckboxProps } from "./Checkbox.props";
+import { Fieldset } from "../Fieldset";
+import { FormElement } from "../FormElement";
+
+const Checkbox: FC<CheckboxProps> = ({
+  callback,
+  disabled = false,
+  error,
+  grouped,
+  helper,
+  id,
+  label,
+  name,
+  required,
+  tooltip,
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--checkbox`;
+
+  const CheckboxClasses = classNames("", {
+    [baseClass]: true,
+    [`error`]: error,
+  });
+
+  const [checked, setChecked] = useState(false);
+
+  /**
+   * On change, if there is a callback, call it
+   */
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(e.target.checked);
+
+    if (callback) {
+      callback(e);
+    }
+  };
+
+  return (
+    <>
+      {grouped && (
+        <FormElement
+          elemid={id as any}
+          label={label}
+          helper={helper as any}
+          error={error as any}
+          required={required as any}
+          tooltip={tooltip}
+        >
+          <input
+            id={id}
+            name={name}
+            onChange={handleChange}
+            disabled={disabled}
+            required={required as any}
+            type={"checkbox"}
+            className={CheckboxClasses}
+            checked={checked}
+          />
+        </FormElement>
+      )}
+      {!grouped && (
+        <Fieldset legend={false} fieldsetid={false}>
+          <FormElement
+            elemid={id as any}
+            label={label}
+            helper={helper as any}
+            error={error as any}
+            required={required as any}
+            tooltip={tooltip}
+            type={"checkbox"}
+          >
+            <input
+              id={id}
+              name={name}
+              onChange={handleChange}
+              disabled={disabled}
+              required={required as any}
+              type={"checkbox"}
+              className={CheckboxClasses}
+              checked={checked}
+            />
+          </FormElement>
+        </Fieldset>
+      )}
+    </>
+  );
+};
+
+export default Checkbox;

package/src/components/Checkbox/index.ts

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

package/src/components/ChoiceGroup/ChoiceGroup.args.ts

@@ -0,0 +1,90 @@
+import { ChoiceGroupProps } from "./ChoiceGroup.props";
+import CheckboxArgs from "../Checkbox/Checkbox.args";
+import RadioArgs from "../Radio/Radio.args";
+
+const checkboxfields = [];
+const radiofields = [];
+
+for (let i = 0; i < 5; i++) {
+  const checkboxargs = { ...CheckboxArgs.basic };
+  const radioargs = { ...RadioArgs.basic };
+  checkboxfields.push(checkboxargs);
+  checkboxfields[i].label = `Checkbox ${i}`;
+  checkboxfields[i].name = `checkbox${i}`;
+  checkboxfields[i].grouped = true;
+  checkboxfields[i].type = "checkbox";
+  radiofields.push(radioargs);
+  radiofields[i].label = `Radio ${i}`;
+  radiofields[i].name = `radio${i}`;
+  radiofields[i].type = "radio";
+}
+
+const checkboxes: ChoiceGroupProps = {
+  choicegroupid: "checkboxgroup",
+  items: checkboxfields,
+  legend: "Checkbox Legend",
+};
+
+const radios: ChoiceGroupProps = {
+  choicegroupid: "radiogroup",
+  items: radiofields,
+  legend: "Radio Legend",
+};
+
+const checkboxeshelper: ChoiceGroupProps = {
+  choicegroupid: "checkboxgroup",
+  grouphelper: "This is the helper text",
+  items: checkboxfields,
+  legend: "Checkbox Legend",
+};
+
+const radioshelper: ChoiceGroupProps = {
+  choicegroupid: "radiogroup",
+  grouphelper: "This is the helper text",
+  items: radiofields,
+  legend: "Radio Legend",
+};
+
+const checkboxeserror: ChoiceGroupProps = {
+  choicegroupid: "checkboxgroup",
+  grouperror: "this one has an error",
+  items: checkboxfields,
+  legend: "Checkbox Legend",
+};
+
+const radioserror: ChoiceGroupProps = {
+  choicegroupid: "radiogroup",
+  grouperror: "this one has an error",
+  items: radiofields,
+  legend: "Radio Legend",
+};
+
+const checkboxestooltip: ChoiceGroupProps = {
+  choicegroupid: "checkboxgroup",
+  items: checkboxfields,
+  legend: "Checkbox Legend",
+  grouptooltip: "This is the tooltip",
+};
+
+const radiostooltip: ChoiceGroupProps = {
+  choicegroupid: "radiogroup",
+  items: radiofields,
+  legend: "Radio Legend",
+  grouptooltip: "This is the tooltip",
+};
+
+/**
+ * Sample prop definitions ChoiceGroup's enumerable properties (imported in stories and test)
+ */
+const ChoiceGroupArgs = {
+  checkboxes,
+  radios,
+  checkboxeshelper,
+  radioshelper,
+  checkboxeserror,
+  radioserror,
+  checkboxestooltip,
+  radiostooltip,
+};
+
+export default ChoiceGroupArgs;

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

@@ -0,0 +1,57 @@
+import { CheckboxProps } from "../Checkbox/Checkbox.props";
+import { RadioProps } from "../RadioProps/RadioProps.props";
+import { fieldTypes } from "../../types";
+
+// We can't put a form group inside a form group so let's remove that option
+const choiceGroupFieldTypes = fieldTypes.filter(
+  (item) => item === "checkbox" || item === "radio"
+);
+
+interface ChoiceGroupItems {
+  /**
+   * The inputs in this choice group
+   */
+  field: Required<CheckboxProps | RadioProps>;
+
+  /**
+   * This item's field type
+   */
+  type: Required<choiceGroupFieldTypes>;
+}
+
+export interface ChoiceGroupProps {
+  /**
+   * Specify an optional className to be added to your ChoiceGroup component.
+   */
+  className?: string;
+
+  /**
+   * The ID of the ChoiceGroup
+   */
+  choicegroupid: Required<string>;
+
+  /**
+   * 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;
+
+  /**
+   * The inputs in this ChoiceGroup
+   */
+  items: Required<Array<FormGroupItems>>;
+
+  /**
+   * The ChoiceGroup's legend
+   */
+  legend: Required<string | false>;
+}

package/src/components/ChoiceGroup/ChoiceGroup.tsx

@@ -0,0 +1,42 @@
+import { FC } from "react";
+import { ChoiceGroupProps } from "./ChoiceGroup.props";
+import { Checkbox } from "../Checkbox";
+import { Fieldset } from "../Fieldset";
+import { Radio } from "../Radio";
+
+const ChoiceGroup: FC<ChoiceGroupProps> = ({
+  className,
+  choicegroupid,
+  grouperror,
+  grouphelper,
+  grouptooltip,
+  items,
+  legend,
+}) => {
+  // whatever type the first item has we expect from the other items
+  const sanitzeditems = items.filter((item: any) => item !== items[0].type);
+
+  return (
+    <Fieldset
+      className={`ilo--choice-group ${className ? className : ""}`}
+      legend={legend}
+      fieldsetid={choicegroupid}
+      grouphelper={grouphelper}
+      grouperror={grouperror}
+      grouptooltip={grouptooltip}
+    >
+      {sanitzeditems.map((item: any, i: any) => {
+        console.log(item);
+        if (item?.type === "checkbox") {
+          return <Checkbox {...(item as any)} key={i} />;
+        }
+        if (item?.type === "radio") {
+          return <Radio {...(item as any)} key={i} />;
+        }
+      })}
+      ;
+    </Fieldset>
+  );
+};
+
+export default ChoiceGroup;

package/src/components/ChoiceGroup/index.ts

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

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

@@ -0,0 +1,92 @@
+import React from "react";
+
+type Dimension = "height" | "width";
+
+export interface CollapseProps {
+  className?: string;
+
+  /**
+   * Show the component; triggers the expand or collapse animation
+   */
+  panelIn?: boolean;
+
+  /**
+   * Wait until the first "enter" transition to mount the component (add it to the DOM)
+   */
+  mountOnEnter?: boolean;
+
+  /**
+   * Unmount the component (remove it from the DOM) when it is collapsed
+   */
+  unmountOnExit?: boolean;
+
+  /**
+   * Run the expand animation when the component mounts, if it is initially
+   * shown
+   */
+  appear?: boolean;
+
+  /**
+   * Duration of the collapse animation in milliseconds, to ensure that
+   * finishing callbacks are fired even if the original browser transition end
+   * events are canceled
+   */
+  timeout?: number;
+
+  /**
+   * The dimension used when collapsing, or a function that returns the
+   * dimension
+   */
+  dimension?: Dimension | (() => Dimension);
+
+  /**
+   * Function that returns the height or width of the animating DOM node
+   *
+   * Allows for providing some custom logic for how much the Collapse component
+   * should animate in its specified dimension. Called with the current
+   * dimension prop value and the DOM node.
+   *
+   * @default element.offsetWidth | element.offsetHeight
+   */
+  getDimensionValue?: (dimension: Dimension, element: HTMLElement) => number;
+
+  /**
+   * ARIA role of collapsible element
+   */
+  role?: string;
+
+  /**
+   * You must provide a single JSX child element to this component and that element cannot be a \<React.Fragment\>
+   */
+  children: React.ReactElement;
+
+  /**
+   * Callback fired before the component expands
+   */
+  onEnter?: () => void;
+
+  /**
+   * Callback fired after the component starts to expand
+   */
+  onEntering?: () => void;
+
+  /**
+   * Callback fired after the component has expanded
+   */
+  onEntered?: () => void;
+
+  /**
+   * Callback fired before the component collapses
+   */
+  onExit?: () => void;
+
+  /**
+   * Callback fired after the component starts to collapse
+   */
+  onExiting?: () => void;
+
+  /**
+   * Callback fired after the component has collapsed
+   */
+  onExited?: () => void;
+}

package/src/components/Collapse/Collapse.tsx

@@ -0,0 +1,130 @@
+import { useMemo, forwardRef, cloneElement } from "react";
+import classNames from "classnames";
+import Transition, {
+  TransitionStatus,
+  ENTERED,
+  ENTERING,
+  EXITED,
+  EXITING,
+} from "react-transition-group/Transition";
+import transitionEndListener from "../../utils/transitionEndListener";
+import createChainedFunction from "../../utils/createChainedFunction";
+import triggerBrowserReflow from "../../utils/triggerBrowserReflow";
+import getDefaultDimensionValue from "../../utils/getDefaultDimensionValue";
+import { CollapseProps } from "./Collapse.props";
+
+const collapseStyles = {
+  [EXITED]: "collapse",
+  [EXITING]: "collapsing",
+  [ENTERING]: "expanding",
+  [ENTERED]: "collapse show",
+};
+
+const Collapse = forwardRef<Transition<any>, CollapseProps>(
+  (
+    {
+      dimension = "height",
+      panelIn = false,
+      getDimensionValue = getDefaultDimensionValue,
+      timeout = 300,
+      onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      className,
+      children,
+      role,
+      ...rest
+    },
+    ref
+  ) => {
+    /* Compute dimension */
+    const computedDimension =
+      typeof dimension === "function" ? dimension() : dimension;
+
+    /* -- Expanding -- */
+    const handleEnter = useMemo(
+      () =>
+        createChainedFunction((elem: HTMLElement) => {
+          elem.style[computedDimension] = "0";
+          elem.style.transitionDuration = `${timeout + 50}ms`;
+        }, onEnter),
+      [computedDimension, onEnter, timeout]
+    );
+
+    const handleEntering = useMemo(
+      () =>
+        createChainedFunction((elem: HTMLElement) => {
+          const scroll =
+            `scroll${computedDimension[0].toUpperCase()}${computedDimension.slice(
+              1
+            )}` as keyof HTMLElement;
+          elem.style[computedDimension] = `${elem[scroll]}px`;
+          elem.style.transitionDuration = `${timeout + 50}ms`;
+        }, onEntering),
+      [computedDimension, onEntering, timeout]
+    );
+
+    const handleEntered = useMemo(
+      () =>
+        createChainedFunction((elem: HTMLElement) => {
+          elem.style[computedDimension] = "none";
+          elem.style.transitionDuration = `${timeout + 50}ms`;
+        }, onEntered),
+      [computedDimension, onEntered, timeout]
+    );
+
+    /* -- Collapsing -- */
+    const handleExit = useMemo(
+      () =>
+        createChainedFunction((elem: HTMLElement) => {
+          elem.style[computedDimension] = `${getDimensionValue(
+            computedDimension,
+            elem
+          )}px`;
+          triggerBrowserReflow(elem);
+          elem.style.transitionDuration = `${timeout + 50}ms`;
+        }, onExit),
+      [onExit, getDimensionValue, computedDimension, timeout]
+    );
+
+    const handleExiting = useMemo(
+      () =>
+        createChainedFunction((elem: HTMLElement) => {
+          elem.style[computedDimension] = "0px";
+          elem.style.transitionDuration = `${timeout + 50}ms`;
+        }, onExiting),
+      [computedDimension, onExiting, timeout]
+    );
+
+    return (
+      <Transition
+        nodeRef={ref}
+        addEndListener={transitionEndListener}
+        {...rest}
+        aria-expanded={role ? panelIn : null}
+        onEnter={handleEnter}
+        onEntering={handleEntering}
+        onEntered={handleEntered}
+        onExit={handleExit}
+        onExiting={handleExiting}
+        in={panelIn}
+      >
+        {(state: TransitionStatus, innerProps: Record<string, unknown>) => {
+          return cloneElement(children, {
+            ...innerProps,
+            className: classNames(
+              className,
+              children.props.className,
+              collapseStyles[state],
+              computedDimension === "width" && "collapse-horizontal"
+            ),
+          });
+        }}
+      </Transition>
+    );
+  }
+);
+
+export default Collapse;

package/src/components/Collapse/index.ts

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

package/src/components/ContextMenu/ContextMenu.args.ts

@@ -0,0 +1,62 @@
+import { ContextMenuProps } from "./ContextMenu.props";
+
+const basic: ContextMenuProps = {
+  links: [
+    {
+      label: "Link One",
+      url: "http://www.google.com",
+    },
+    {
+      label: "Link Two",
+      url: "http://www.google.com",
+    },
+    {
+      label: "Link Three",
+      url: "http://www.google.com",
+    },
+    {
+      label: "Link Four",
+      url: "http://www.google.com",
+    },
+    {
+      label: "Link Five Is Much Longer",
+      url: "http://www.google.com",
+    },
+  ],
+};
+
+const withsection: ContextMenuProps = {
+  links: [
+    {
+      label: "Link One",
+      url: "http://www.google.com",
+    },
+    {
+      label: "Link Two",
+      url: "http://www.google.com",
+    },
+    {
+      endsection: true,
+      label: "Link Three Ends A Section",
+      url: "http://www.google.com",
+    },
+    {
+      label: "Link Four",
+      url: "http://www.google.com",
+    },
+    {
+      label: "Link Five Is Much Longer",
+      url: "http://www.google.com",
+    },
+  ],
+};
+
+/**
+ * Sample prop definitions for ContextMenus's enumerable properties (imported in stories and test)
+ */
+const ContextMenuArgs = {
+  basic,
+  withsection,
+};
+
+export default ContextMenuArgs;

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

@@ -0,0 +1,28 @@
+interface LinkProps {
+  /**
+   * Specify whether this link marks the end of a section
+   */
+  endsection?: boolean;
+
+  /**
+   * Specify the label for the the Context Menu's link
+   */
+  label?: Required<string>;
+
+  /**
+   * Specify the url for the Context Menu's link
+   */
+  url?: Required<string>;
+}
+
+export interface ContextMenuProps {
+  /**
+   * Specify an optional className to be added to your Context Menu component.
+   */
+  className?: string;
+
+  /**
+   * Specify the links to be displayed in the Context Menu
+   */
+  links?: Required<Array<LinkProps>>;
+}