@ilo-org/react 0.7.8 → 0.8.1

package/src/components/Textarea/Textarea.tsx

@@ -1,67 +1,52 @@
-import { FC } from "react";
-import classNames from "classnames";
+import React from "react";
+import classnames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { TextareaProps } from "./Textarea.props";
-import { Fieldset } from "../Fieldset";
-import { FormElement } from "../FormElement";
+import { TextareaProps, LabelledTextareaProps } from "./Textarea.props";
+import FormControl, { useFormControl } from "../FormControl/FormControl";
 
-const Textarea: FC<TextareaProps> = ({
-  callback,
-  disabled = false,
-  error,
-  helper,
-  id,
-  label,
-  maxlength,
-  minlength,
-  name,
-  placeholder,
-  required,
-  spellcheck,
-  tooltip,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--textarea`;
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ error, className, name, id, ...props }, ref) => {
+    const { prefix } = useGlobalSettings();
+    const formControlCtx = useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
 
-  const TextareaClasses = classNames("", {
-    [baseClass]: true,
-    [`error`]: error,
-  });
+    const baseClass = `${prefix}--textarea`;
+    const errorClass = `${baseClass}__error`;
 
-  /**
-   * On change, if there is a callback, call it
-   */
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    if (callback) {
-      callback(e);
-    }
-  };
+    const textAreaClass = classnames(baseClass, className, {
+      [errorClass]: error,
+    });
+
+    return (
+      <textarea
+        ref={ref}
+        className={textAreaClass}
+        name={name}
+        id={id ? id : name}
+        aria-describedby={ariaDescribedBy}
+        {...props}
+      />
+    );
+  }
+);
+
+const LabelledTextarea = React.forwardRef<
+  HTMLTextAreaElement,
+  LabelledTextareaProps
+>((props, ref) => {
+  const { style, inputStyle, className, ...rest } = props;
+  const fieldId = props.id ? props.id : props.name;
 
   return (
-    <Fieldset>
-      <FormElement
-        elemid={name as any}
-        label={label}
-        helper={helper as any}
-        error={error as any}
-        required={required as any}
-        tooltip={tooltip}
-      >
-        <textarea
-          id={id}
-          name={name}
-          onChange={handleChange}
-          disabled={disabled}
-          placeholder={placeholder}
-          required={required as any}
-          className={TextareaClasses}
-          maxLength={maxlength}
-          minLength={minlength}
-          spellCheck={spellcheck}
-        />
-      </FormElement>
-    </Fieldset>
+    <FormControl
+      fieldId={fieldId}
+      style={style}
+      className={className}
+      {...rest}
+    >
+      <Textarea ref={ref} style={inputStyle} {...rest} />
+    </FormControl>
   );
-};
+});
 
-export default Textarea;
+export default LabelledTextarea;

package/src/components/Textarea/index.ts

@@ -1 +1,3 @@
 export { default as Textarea } from "./Textarea";
+export type { TextareaProps } from "./Textarea.props";
+export { default as TextareaArgs } from "./Textarea.args";

package/src/components/Toggle/Toggle.args.ts

@@ -0,0 +1,62 @@
+import { LabelledToggleProps } from "./Toggle.props";
+
+export const Default: LabelledToggleProps = {
+  defaultChecked: false,
+  errorMessage: "Invalid option",
+  name: "my-toggle",
+  size: "medium",
+  label: "Show details",
+  labelPlacement: "end",
+  labelSize: "small",
+};
+
+export const Checked: LabelledToggleProps = {
+  ...Default,
+  defaultChecked: true,
+};
+
+export const Disabled: LabelledToggleProps = {
+  ...Default,
+  disabled: true,
+};
+
+export const Helper: LabelledToggleProps = {
+  ...Default,
+  helper: "This is a helper text",
+};
+
+export const Tooltip: LabelledToggleProps = {
+  ...Helper,
+  tooltip: "This is a tooltip",
+};
+
+export const Error: LabelledToggleProps = {
+  ...Default,
+  error: true,
+};
+
+export const DefaultChecked: LabelledToggleProps = {
+  ...Default,
+  defaultChecked: true,
+};
+
+export const Controlled: LabelledToggleProps = {
+  ...Default,
+  onClick: () => console.log("clicked"),
+  checked: true,
+};
+
+export const Large: LabelledToggleProps = {
+  ...Default,
+  size: "large",
+};
+
+export const Medium: LabelledToggleProps = {
+  ...Default,
+  size: "medium",
+};
+
+export const Small: LabelledToggleProps = {
+  ...Default,
+  size: "small",
+};

package/src/components/Toggle/Toggle.props.ts

@@ -0,0 +1,27 @@
+import { FormFieldProps } from "../../types";
+import { LabelledFormFieldProps } from "../../types";
+
+export interface ToggleProps extends FormFieldProps<HTMLInputElement> {
+  /**
+   * Specify the size of your Toggle. Defaults to "medium".
+   */
+  size?: "large" | "medium" | "small";
+
+  /**
+   * Specify whether your Toggle is checked by default. Defaults to false.
+   *
+   */
+  defaultChecked?: boolean;
+
+  /**
+   * Specify whether your Toggle is checked. Defaults to undefined.
+   */
+  checked?: boolean;
+
+  /**
+   * OnClick handler for the input element.
+   */
+  onClick?: (event: React.MouseEvent<HTMLInputElement>) => any;
+}
+
+export type LabelledToggleProps = LabelledFormFieldProps<ToggleProps>;

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,85 @@
+import { Ref, forwardRef } from "react";
+import { ToggleProps } from "./Toggle.props";
+import { LabelledToggleProps } from "./Toggle.props";
+import { useGlobalSettings } from "../../hooks";
+import classnames from "classnames";
+import FormControl, { useFormControl } from "../FormControl/FormControl";
+
+const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
+  (
+    {
+      size = "medium",
+      error = false,
+      disabled = false,
+      defaultChecked = false,
+      required = false,
+      id,
+      name,
+      onChange,
+      onBlur,
+      onClick,
+      checked,
+      className,
+    },
+    ref
+  ) => {
+    const { prefix } = useGlobalSettings();
+    const formControlCtx = useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
+
+    const hasError = !disabled && !!error;
+
+    const baseClass = `${prefix}--input--toggle`;
+    const sliderClass = `${baseClass}--slider`;
+
+    const toggleClass = classnames(
+      baseClass,
+      className,
+      `${baseClass}__size__${size}`,
+      [
+        { [`${baseClass}__error`]: hasError },
+        { [`${baseClass}__disabled`]: disabled },
+      ]
+    );
+
+    return (
+      <div className={toggleClass}>
+        <input
+          ref={ref} // Forwarded ref applied here
+          checked={checked}
+          disabled={disabled}
+          defaultChecked={defaultChecked}
+          name={name}
+          id={id ? id : name}
+          type="checkbox"
+          role="switch"
+          required={required}
+          onChange={onChange}
+          onBlur={onBlur}
+          onClick={onClick}
+          aria-describedby={ariaDescribedBy}
+        />
+        <span className={sliderClass} />
+      </div>
+    );
+  }
+);
+
+const LabelledToggle = forwardRef(
+  (props: LabelledToggleProps, ref: Ref<HTMLInputElement>) => {
+    const fieldId = props.id ? props.id : props.name;
+    const { style, inputStyle, className, ...rest } = props;
+    return (
+      <FormControl
+        fieldId={fieldId}
+        style={style}
+        className={className}
+        {...rest}
+      >
+        <Toggle ref={ref} style={inputStyle} {...rest} />
+      </FormControl>
+    );
+  }
+);
+
+export default LabelledToggle;

package/src/components/Toggle/index.ts

@@ -0,0 +1,3 @@
+export { default as Toggle } from "./Toggle";
+export type { ToggleProps } from "./Toggle.props";
+export * as ToggleArgs from "./Toggle.args";

package/src/components/Tooltip/Tooltip.props.ts

@@ -11,6 +11,11 @@ export interface TooltipProps {
    */
   icon?: boolean;
 
+  /**
+   * Set the id of the tooltip
+   */
+  id?: string;
+
   /**
    * Set the label for the tooltip
    */

package/src/components/Tooltip/Tooltip.tsx

@@ -10,6 +10,7 @@ const Tooltip: FC<TooltipProps> = ({
   icon,
   label,
   theme,
+  id,
 }) => {
   const { prefix } = useGlobalSettings();
   const baseClass = `${prefix}--tooltip`;
@@ -127,6 +128,7 @@ const Tooltip: FC<TooltipProps> = ({
       onFocus={handleOnMouseOver}
       onMouseOut={handleOnMouseOut}
       onBlur={handleOnMouseOut}
+      id={id}
     >
       {!icon && <>{children}</>}
       <span className={tooltipClasses} style={style} ref={tooltipRef}>

package/src/components/index.ts

@@ -4,9 +4,9 @@ export {
   AccordionItem,
   AccordionPanel,
 } from "./Accordion";
+export { Form } from "./Form";
 export { Collapse } from "./Collapse";
 export { Empty } from "./Empty";
-export { FormGroup } from "./FormGroup";
 export { Image } from "./Image";
 export { Loading } from "./Loading";
 export { Radio } from "./Radio";
@@ -15,7 +15,6 @@ export { Button } from "./Button";
 export { ContextMenu } from "./ContextMenu";
 export { Fieldset } from "./Fieldset";
 export { GlobalProvider } from "./GlobalProvider";
-export { Input } from "./Input";
 export { Notification } from "./Notification";
 export { ReadMore } from "./ReadMore";
 export { Textarea } from "./Textarea";
@@ -29,15 +28,12 @@ export { RichText } from "./RichText";
 export { Tooltip } from "./Tooltip";
 export { Checkbox } from "./Checkbox";
 export { DatePicker } from "./DatePicker";
-export { Form } from "./Form";
 export { Hero } from "./Hero";
 export { LinkList } from "./LinkList";
 export { Pagination } from "./Pagination";
 export { SearchField } from "./SearchField";
 export { Video } from "./Video";
-export { ChoiceGroup } from "./ChoiceGroup";
 export { Dropdown } from "./Dropdown";
-export { FormElement } from "./FormElement";
 export { Icon } from "./Icon";
 export { List } from "./List";
 export { Profile } from "./Profile";

package/src/hooks/usePrevious.ts

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from "react";
+
+// This code was shamelessly borrowed from the blog post
+// "How to access previous props or state with React Hooks" by
+// Ohans Emmanuel, published on LogRocket May 11, 2023
+// https://blog.logrocket.com/accessing-previous-props-state-react-hooks/
+
+export function usePrevious<T>(value: T) {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value; //assign the value of ref to the argument
+  }, [value]); //this code will run when the value of 'value' changes
+  return ref.current; //in the end, return the current ref value.
+}
+export default usePrevious;

package/src/types/forms.args.ts

@@ -0,0 +1,288 @@
+// This annoying file has to exist because at the present time, react-docgen-typescript can't generate argTypes for
+// components that use forwardRef. So we have to create the argTypes manually. This only regards Form elements for the time being.
+
+export const formFieldArgTypes = (element: string) => ({
+  className: {
+    description:
+      "The className of the Component. Passed to the outermost element.",
+    control: {
+      type: "text",
+    },
+    table: {
+      type: {
+        summary: "string | undefined",
+      },
+    },
+  },
+  disabled: {
+    description: "Whether the Component is disabled",
+    control: {
+      type: "boolean",
+    },
+    table: {
+      defaultValue: { summary: "false" },
+      type: {
+        summary: "boolean | undefined",
+      },
+    },
+  },
+  error: {
+    description: "Whether the Component has an error",
+    control: {
+      type: "boolean",
+    },
+    table: {
+      defaultValue: { summary: "false" },
+      type: {
+        summary: "boolean | undefined",
+      },
+    },
+  },
+  id: {
+    description:
+      "The id attribute of the underlying form element. This will be the same as `name` if not set",
+    control: {
+      type: "text",
+    },
+    table: {
+      type: {
+        summary: "string | undefined",
+      },
+    },
+  },
+  inputStyle: {
+    description: "Inline styles for the input",
+    control: {
+      type: "object",
+    },
+    table: {
+      type: {
+        summary: "React.CSSProperties | undefined",
+      },
+    },
+  },
+  name: {
+    description:
+      "The name of the Component. This is required and should be unique",
+    control: {
+      type: "text",
+    },
+    type: {
+      required: true,
+      name: "other" as const,
+      value: "string",
+    },
+    table: {
+      type: {
+        summary: "string",
+      },
+    },
+  },
+  onBlur: {
+    description: "The onBlur handler of the Component",
+    control: {
+      type: "function",
+    },
+    table: {
+      type: {
+        summary: `(event: React.FocusEvent<${element}>) => any`,
+      },
+    },
+  },
+  onChange: {
+    description: "The onChange handler of the Component",
+    control: {
+      type: "function",
+    },
+    table: {
+      type: {
+        summary: `(event: React.ChangeEvent<${element}>) => any`,
+      },
+    },
+  },
+  required: {
+    description: "Whether the Component is required",
+    control: {
+      type: "boolean",
+    },
+    table: {
+      type: {
+        summary: "boolean | undefined",
+      },
+      defaultValue: { summary: false },
+    },
+  },
+});
+
+export const choiceFieldArgTypes = (element: string) => ({
+  ...formFieldArgTypes(element),
+  defaultChecked: {
+    description: "Whether the Component is checked by default when it loads",
+    control: {
+      type: "boolean",
+    },
+    table: {
+      type: {
+        summary: "boolean | undefined",
+      },
+    },
+  },
+  checked: {
+    description: "Whether the Component is checked",
+    control: {
+      type: "boolean",
+    },
+    table: {
+      defaultValue: { summary: "false" },
+      type: {
+        summary: "boolean | undefined",
+      },
+    },
+  },
+  value: {
+    description: "The value of the Component",
+    control: {
+      type: "text",
+    },
+    table: {
+      type: {
+        summary: "string | undefined",
+      },
+    },
+  },
+});
+
+export const formControlArgTypes = {
+  className: {
+    description:
+      "The className of the Component. Passed to the outermost element.",
+    control: {
+      type: "text",
+    },
+    table: {
+      type: {
+        summary: "string | undefined",
+      },
+    },
+  },
+  disabled: {
+    description: "Whether the Component is disabled",
+    control: {
+      type: "boolean",
+    },
+    table: {
+      defaultValue: { summary: "false" },
+      type: {
+        summary: "boolean | undefined",
+      },
+    },
+  },
+  error: {
+    description: "Whether the Component has an error",
+    control: {
+      type: "boolean",
+    },
+    table: {
+      defaultValue: { summary: "false" },
+      type: {
+        summary: "boolean | undefined",
+      },
+    },
+  },
+  errorMessage: {
+    description: "The error message to display in case of an error",
+    control: {
+      type: "text",
+    },
+    table: {
+      type: {
+        summary: "string | undefined",
+      },
+    },
+  },
+  label: {
+    description: "The label of the Component. This is required.",
+    control: {
+      type: "text",
+    },
+    type: {
+      required: true,
+      name: "other" as const,
+      value: "string",
+    },
+    table: {
+      type: {
+        summary: "string | undefined",
+      },
+    },
+  },
+  labelSize: {
+    description: "The size of the label",
+    defaultValue: "medium",
+    control: "select",
+    options: ["small", "medium", "large"],
+    table: {
+      defaultValue: { summary: "medium" },
+      type: {
+        name: "enum",
+        summary: "small | medium | large",
+      },
+    },
+  },
+  labelPlacement: {
+    description: "The placement of the label",
+    defaultValue: "start",
+    control: "select",
+    options: ["top", "start", "bottom", "end"],
+    table: {
+      defaultValue: { summary: "start" },
+      type: {
+        name: "enum",
+        summary: "top | start | bottom | end",
+      },
+    },
+  },
+  helper: {
+    description: "Helper text to display with the label",
+    control: {
+      type: "text",
+    },
+    table: {
+      type: {
+        summary: "string | undefined",
+      },
+    },
+  },
+  style: {
+    description: "Inline styles for the outermost element of the Component",
+    control: {
+      type: "object",
+    },
+    table: {
+      type: {
+        summary: "React.CSSProperties | undefined",
+      },
+    },
+  },
+  tooltip: {
+    description: "Optional text to render in a tooltip",
+    control: {
+      type: "text",
+    },
+    table: {
+      type: {
+        summary: "string | undefined",
+      },
+    },
+  },
+};
+
+export const labelledFormFieldArgTypes = (element: string) => ({
+  ...formControlArgTypes,
+  ...formFieldArgTypes(element),
+});
+
+export const labelledChoiceFieldArgTypes = (element: string) => ({
+  ...formControlArgTypes,
+  ...choiceFieldArgTypes(element),
+});