@ilo-org/react 0.7.7 → 0.8.0

package/src/components/NumberPicker/NumberPicker.tsx

@@ -1,65 +1,82 @@
-import { FC } from "react";
+import React from "react";
 import classNames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { NumberPickerProps } from "./NumberPicker.props";
-import { Fieldset } from "../Fieldset";
-import { FormElement } from "../FormElement";
+import FormControl, { useFormControl } from "../FormControl/FormControl";
+import {
+  NumberPickerProps,
+  LabelledNumberPickerProps,
+} from "./NumberPicker.props";
 
-const NumberPicker: FC<NumberPickerProps> = ({
-  callback,
-  disabled = false,
-  error,
-  helper,
-  id,
-  label,
-  name,
-  placeholder,
-  required,
-  tooltip,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--numberpicker`;
+const NumberPicker = React.forwardRef<HTMLInputElement, NumberPickerProps>(
+  (
+    {
+      onChange,
+      onBlur,
+      disabled = false,
+      error,
+      id,
+      name,
+      placeholder,
+      required,
+    },
+    ref
+  ) => {
+    const { prefix } = useGlobalSettings();
+    const formControlCtx = useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
 
-  const NumberPickerClasses = classNames("", {
-    [baseClass]: true,
-    [`error`]: error,
-  });
+    const inputClass = `${prefix}--input`;
+    const baseClass = `${prefix}--numberpicker`;
 
-  /**
-   * On change, if there is a callback, call it
-   */
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (callback) {
-      callback(e);
-    }
-  };
+    const hasError = !disabled && !!error;
+
+    const numberPickerClasses = classNames(inputClass, baseClass, {
+      error: hasError,
+    });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (onChange) {
+        onChange(e);
+      }
+    };
+
+    return (
+      <input
+        ref={ref}
+        id={id ? id : name}
+        name={name}
+        onChange={handleChange}
+        onBlur={onBlur}
+        disabled={disabled}
+        placeholder={placeholder}
+        required={required}
+        type="number"
+        className={numberPickerClasses}
+        pattern="[0-9]*"
+        inputMode="numeric"
+        aria-describedby={ariaDescribedBy}
+      />
+    );
+  }
+);
+
+const LabelledNumberPicker = React.forwardRef<
+  HTMLInputElement,
+  LabelledNumberPickerProps
+>((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}
-        type={"text"}
-      >
-        <input
-          id={id ? id : name}
-          name={name}
-          onChange={handleChange}
-          disabled={disabled}
-          placeholder={placeholder}
-          required={required as any}
-          type={"text"}
-          className={`${NumberPickerClasses} ${prefix}--input`}
-          pattern="[0-9]*"
-          inputMode="numeric"
-        />
-      </FormElement>
-    </Fieldset>
+    <FormControl
+      fieldId={fieldId}
+      style={style}
+      className={className}
+      {...rest}
+    >
+      <NumberPicker ref={ref} style={inputStyle} {...rest} />
+    </FormControl>
   );
-};
+});
 
-export default NumberPicker;
+export default LabelledNumberPicker;

package/src/components/Radio/Radio.args.ts

@@ -1,14 +1,8 @@
 import { RadioProps } from "./Radio.props";
 
 const basic: RadioProps = {
-  callback: () => {},
-  disabled: false,
-  error: "",
-  helper: "",
-  label: "Radio Field Label",
+  className: "Radio",
   name: "radio",
-  required: false,
-  value: "radio",
 };
 
 /**

package/src/components/Radio/Radio.props.ts

@@ -1,14 +1,6 @@
-export interface RadioProps {
-  callback?: (e: React.ChangeEvent<HTMLInputElement>) => any;
-  className?: string;
-  disabled?: boolean;
-  error?: string;
-  helper?: string;
-  id?: string;
-  label?: string;
-  name: string;
-  required?: boolean;
-  tooltip?: string;
-  value: string;
-  selected?: string;
-}
+import { ChoiceFieldProps } from "../../types";
+import { LabelledFormFieldProps } from "../../types";
+
+export type RadioProps = ChoiceFieldProps<HTMLInputElement>;
+
+export type LabelledRadioProps = LabelledFormFieldProps<RadioProps>;

package/src/components/Radio/Radio.tsx

@@ -1,61 +1,99 @@
-import { FC } from "react";
+import React, { useEffect } from "react";
 import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { RadioProps } from "./Radio.props";
-import { FormElement } from "../FormElement";
-
-const Radio: FC<RadioProps> = ({
-  callback,
-  disabled = false,
-  error,
-  helper,
-  id,
-  label,
-  name,
-  required,
-  selected,
-  tooltip,
-  value,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--radio`;
-
-  const RadioClasses = classNames("", {
-    [baseClass]: true,
-    [`error`]: error,
-  });
-
-  /**
-   * On change, if there is a callback, call it
-   */
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (callback) {
-      callback(e);
-    }
-  };
-
-  return (
-    <FormElement
-      elemid={id as any}
-      label={label}
-      helper={helper as any}
-      error={error as any}
-      required={required as any}
-      tooltip={tooltip}
-    >
+import { useGlobalSettings } from "../../hooks";
+import { LabelledRadioProps, RadioProps } from "./Radio.props";
+import { useFieldsetError } from "../Fieldset/Fieldset";
+import FormControl, { useFormControl } from "../FormControl/FormControl";
+import usePrevious from "../../hooks/usePrevious";
+
+const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  (
+    {
+      onChange,
+      onBlur,
+      disabled = false,
+      error,
+      id,
+      name,
+      required,
+      checked,
+      defaultChecked = false,
+      value,
+    },
+    ref
+  ) => {
+    const { prefix } = useGlobalSettings();
+    const { setHasError } = useFieldsetError();
+    const formControlCtx = useFormControl();
+    const prevError = usePrevious(error);
+
+    useEffect(() => {
+      if (error !== prevError) {
+        setHasError(!!error);
+      }
+    }, [error, prevError, setHasError]);
+
+    const { ariaDescribedBy } = formControlCtx;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      console.log(e.target.value);
+      if (onChange) {
+        onChange(e);
+      }
+    };
+
+    const baseClass = `${prefix}--radio`;
+    const errorClass = `${baseClass}__error`;
+
+    const RadioClasses = classNames(baseClass, {
+      [errorClass]: error,
+    });
+
+    return (
       <input
-        id={id}
+        ref={ref}
+        id={id ? id : name}
         name={name}
         onChange={handleChange}
+        onBlur={onBlur}
         disabled={disabled}
-        required={required as any}
-        type={"radio"}
+        required={required}
+        type="radio"
         className={RadioClasses}
-        checked={selected === value}
+        defaultChecked={defaultChecked}
+        aria-describedby={ariaDescribedBy}
+        checked={checked}
         value={value}
       />
-    </FormElement>
-  );
-};
+    );
+  }
+);
+
+const LabelledRadio = React.forwardRef<HTMLInputElement, LabelledRadioProps>(
+  (props, ref) => {
+    const {
+      style,
+      inputStyle,
+      className,
+      labelPlacement = "end",
+      labelSize = "small",
+      ...rest
+    } = props;
+    const fieldId = props.id ? props.id : props.name;
+
+    return (
+      <FormControl
+        fieldId={fieldId}
+        style={style}
+        className={className}
+        labelPlacement={labelPlacement}
+        labelSize={labelSize}
+        {...rest}
+      >
+        <Radio ref={ref} style={inputStyle} {...rest} />
+      </FormControl>
+    );
+  }
+);
 
-export default Radio;
+export default LabelledRadio;

package/src/components/Radio/index.ts

@@ -1 +1,2 @@
 export { default as Radio } from "./Radio";
+export { default as RadioArgs } from "./Radio.args";

package/src/components/TextInput/TextInput.args.ts

@@ -0,0 +1,75 @@
+import { LabelledTextInputProps } from "./TextInput.props";
+
+export const basic: LabelledTextInputProps = {
+  disabled: false,
+  errorMessage: "This is an error message",
+  error: false,
+  style: { width: "100%" },
+  id: "text-input",
+  label: "Insert your name here",
+  labelPlacement: "top",
+  labelSize: "medium",
+  name: "text",
+  placeholder: "This is a text field",
+  required: false,
+  type: "text",
+};
+
+export const isdisabled: LabelledTextInputProps = {
+  ...basic,
+  disabled: true,
+  placeholder: "Disabled Text Field",
+};
+
+export const hashelper: LabelledTextInputProps = {
+  ...basic,
+  placeholder: "This has a helper text",
+};
+
+export const haserror: LabelledTextInputProps = {
+  ...basic,
+  placeholder: "This has an error",
+  error: true,
+};
+
+export const hastooltip: LabelledTextInputProps = {
+  ...basic,
+  placeholder: "This has an tooltip",
+  tooltip: "This is a tooltip",
+};
+
+export const email: LabelledTextInputProps = {
+  ...basic,
+  label: "Enter your email address",
+  placeholder: "my@email.com",
+  type: "email",
+  id: "email-input",
+};
+
+export const password: LabelledTextInputProps = {
+  ...basic,
+  label: "Enter your password",
+  placeholder: "Must be 8 digits long",
+  type: "password",
+  id: "password-input",
+};
+
+export const telephone: LabelledTextInputProps = {
+  ...basic,
+  name: "tel",
+  label: "Enter your telephone number",
+  placeholder: "###-###-####",
+  required: false,
+  type: "tel",
+  pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}",
+};
+
+export const url: LabelledTextInputProps = {
+  ...basic,
+  label: "Enter website address",
+  id: "url-input",
+  name: "url",
+  placeholder: "https://www.example.com",
+  required: false,
+  type: "url",
+};

package/src/components/TextInput/TextInput.props.ts

@@ -0,0 +1,20 @@
+import { FormFieldProps, TextInputTypes } from "../../types";
+import { LabelledFormFieldProps } from "../../types";
+export interface TextInputProps extends FormFieldProps<HTMLInputElement> {
+  /**
+   * Optional pattern attribute for phone numbers, zip codes, etc.
+   */
+  pattern?: string;
+
+  /**
+   * Specify an optional className to be added to your Input component.
+   */
+  placeholder?: string;
+
+  /**
+   * The input's type.
+   */
+  type: TextInputTypes;
+}
+
+export type LabelledTextInputProps = LabelledFormFieldProps<TextInputProps>;

package/src/components/TextInput/TextInput.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { TextInputProps, LabelledTextInputProps } from "./TextInput.props";
+import FormControl, { useFormControl } from "../FormControl/FormControl";
+
+const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
+  (
+    {
+      onChange,
+      onBlur,
+      error,
+      id,
+      name,
+      placeholder,
+      required,
+      pattern,
+      disabled = false,
+      type = "text",
+    },
+    ref
+  ) => {
+    const { prefix } = useGlobalSettings();
+    const formControlCtx = useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
+
+    const baseClass = `${prefix}--text-input`;
+
+    const inputClass = classNames(baseClass, {
+      [`${baseClass}__error`]: error,
+    });
+
+    return (
+      <input
+        ref={ref}
+        id={id ? id : name}
+        name={name}
+        onChange={onChange}
+        onBlur={onBlur}
+        disabled={disabled}
+        placeholder={placeholder}
+        required={required}
+        type={type}
+        className={inputClass}
+        pattern={pattern}
+        aria-describedby={ariaDescribedBy}
+      />
+    );
+  }
+);
+
+const LabelledTextInput = React.forwardRef<
+  HTMLInputElement,
+  LabelledTextInputProps
+>((props, ref) => {
+  const { style, inputStyle, className, ...rest } = props;
+  const fieldId = props.id ? props.id : props.name;
+
+  return (
+    <FormControl
+      fieldId={fieldId}
+      style={style}
+      className={className}
+      {...rest}
+    >
+      <TextInput ref={ref} style={inputStyle} {...rest} />
+    </FormControl>
+  );
+});
+
+export default LabelledTextInput;

package/src/components/TextInput/index.ts

@@ -0,0 +1,2 @@
+export { default as TextInput } from "./TextInput";
+export * as TextInputArgs from "./TextInput.args";

package/src/components/Textarea/Textarea.args.ts

@@ -1,52 +1,34 @@
-import { TextareaProps } from "./Textarea.props";
+import { LabelledTextareaProps, TextareaProps } from "./Textarea.props";
 
-const basic: TextareaProps = {
-  disabled: false,
-  label: "Textarea",
-  name: "textarea",
-  placeholder: "Textarea",
-  required: false,
-  spellcheck: false,
-};
+const placeholder =
+  "It was a cold day in April and the clocks were striking thirteen....";
 
-const hashelper: TextareaProps = {
+export const basic: LabelledTextareaProps = {
+  id: "textarea",
   disabled: false,
-  helper: "This one has helper text",
-  label: "Textarea",
   name: "textarea",
-  placeholder: "Textarea",
+  placeholder,
   required: false,
   spellcheck: false,
+  label: "Insert your life story here",
+  labelPlacement: "top" as const,
+  labelSize: "medium" as const,
+  style: { width: "100%" },
+  errorMessage: "This is an error message",
 };
 
-const haserror: TextareaProps = {
-  disabled: false,
-  error: "This one has an error",
-  label: "Textarea",
-  name: "textarea",
-  placeholder: "Textarea",
-  required: false,
-  spellcheck: false,
+export const haserror: TextareaProps = {
+  ...basic,
+  error: true,
 };
 
-const hastooltip: TextareaProps = {
-  disabled: false,
-  label: "Textarea",
-  name: "textarea",
-  placeholder: "Textarea",
-  required: false,
-  spellcheck: false,
-  tooltip: "This is the tooltip",
+export const disabled: TextareaProps = {
+  ...basic,
+  disabled: true,
 };
 
-/**
- * Sample prop definitions Textarea's enumerable properties (imported in stories and test)
- */
-const TextareaArgs = {
+export default {
   basic,
-  hashelper,
   haserror,
-  hastooltip,
+  disabled,
 };
-
-export default TextareaArgs;

package/src/components/Textarea/Textarea.props.ts

@@ -1,38 +1,20 @@
-export interface TextareaProps {
+import { FormFieldProps } from "../../types";
+import { LabelledFormFieldProps } from "../../types";
+export interface TextareaProps extends FormFieldProps<HTMLTextAreaElement> {
   /**
    * The Textarea's onChange callback.
    */
-  callback?: (e: React.ChangeEvent<HTMLTextAreaElement>) => any;
+  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => any;
 
   /**
-   * Specify an optional className to be added to your Textarea.
-   */
-  className?: string;
-
-  /**
-   * Is the Textarea disabled?
-   */
-  disabled?: boolean;
-
-  /**
-   * Does the Textarea have an error?
-   */
-  error?: string;
-
-  /**
-   * The Textarea's helper text
-   */
-  helper?: string;
-
-  /**
-   * The Textarea's id attribute
-   */
-  id?: string;
+   * Activate automatic spelling correction and processing of text substitutions
+   **/
+  autocorrect?: "on" | "off";
 
   /**
-   * Does this Textarea have a label?
-   */
-  label: string;
+   *  The id of the form element the Textarea belongs to if it's not nested inside the form.
+   **/
+  form?: string;
 
   /**
    * The Textarea's maxlength
@@ -44,30 +26,20 @@ export interface TextareaProps {
    */
   minlength?: number;
 
-  /**
-   * The Textarea's name attribute
-   */
-  name?: Required<string>;
-
   /**
    * Specify an optional className to be added to your Textarea component.
    */
   placeholder?: string;
 
   /**
-   * Specify whether this Textarea is required
-   */
-  required?: boolean;
-
-  /**
-   * Specify whether this Textarea employs browser-based spellcheck
-   */
-  spellcheck?: boolean;
+   * Specifies whether the textarea is subject to spellchecking by the underlying browser/OS
+   **/
+  spellcheck?: boolean | "default";
 
   /**
-   * Does this Textarea have a tooltip?
-   */
-  tooltip?: string;
-
-  type?: never;
+   *  How the control should wrap the value for submission.
+   **/
+  wrap?: "hard" | "soft" | "off";
 }
+
+export type LabelledTextareaProps = LabelledFormFieldProps<TextareaProps>;