@ilo-org/react 0.14.0 → 0.15.0

package/src/components/Checkbox/Checkbox.tsx

@@ -1,94 +0,0 @@
-import React, { useEffect, forwardRef } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { CheckboxProps, LabelledCheckboxProps } from "./Checkbox.props";
-import { useFieldsetError } from "../Fieldset/Fieldset";
-import FormControl, { useFormControl } from "../FormControl/FormControl";
-import usePrevious from "../../hooks/usePrevious";
-
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const {
-    onChange,
-    onBlur,
-    disabled = false,
-    error,
-    id,
-    name,
-    required,
-    defaultChecked = false,
-    checked,
-    value,
-  } = props;
-
-  const { prefix } = useGlobalSettings();
-  const { setHasError } = useFieldsetError();
-  const formControlCtx = useFormControl();
-  const { ariaDescribedBy } = formControlCtx;
-
-  const baseClass = `${prefix}--checkbox`;
-  const errorClass = `${baseClass}__error`;
-
-  const CheckboxClasses = classNames(baseClass, {
-    [errorClass]: error,
-  });
-
-  const prevError = usePrevious(error);
-
-  useEffect(() => {
-    if (error !== prevError) {
-      setHasError(!!error);
-    }
-  }, [error, prevError, setHasError]);
-
-  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}
-      required={required}
-      type="checkbox"
-      className={CheckboxClasses}
-      defaultChecked={defaultChecked}
-      aria-describedby={ariaDescribedBy}
-      checked={checked}
-      value={value}
-    />
-  );
-});
-
-const LabelledCheckbox = forwardRef<HTMLInputElement, LabelledCheckboxProps>(
-  (props, ref) => {
-    const fieldId = props.id ? props.id : props.name;
-    const {
-      style,
-      inputStyle,
-      className,
-      labelPlacement = "end",
-      labelSize = "small",
-      ...rest
-    } = props;
-    return (
-      <FormControl
-        fieldId={fieldId}
-        style={style}
-        className={className}
-        labelPlacement={labelPlacement}
-        labelSize={labelSize}
-        {...rest}
-      >
-        <Checkbox ref={ref} style={inputStyle} {...rest} />
-      </FormControl>
-    );
-  }
-);
-
-export default LabelledCheckbox;

package/src/components/Checkbox/index.ts

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

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

@@ -1,92 +0,0 @@
-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

@@ -1,130 +0,0 @@
-import classNames from "classnames";
-import { cloneElement, forwardRef, useMemo } from "react";
-import Transition, {
-  ENTERED,
-  ENTERING,
-  EXITED,
-  EXITING,
-  TransitionStatus,
-} from "react-transition-group/Transition";
-import createChainedFunction from "../../utils/createChainedFunction";
-import getDefaultDimensionValue from "../../utils/getDefaultDimensionValue";
-import transitionEndListener from "../../utils/transitionEndListener";
-import triggerBrowserReflow from "../../utils/triggerBrowserReflow";
-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

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

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

@@ -1,62 +0,0 @@
-import { ContextMenuProps } from "./ContextMenu.props";
-
-const basic: ContextMenuProps = {
-  links: [
-    {
-      label: "Link One",
-      url: "https://www.ilo.org",
-    },
-    {
-      label: "Link Two",
-      url: "https://www.ilo.org",
-    },
-    {
-      label: "Link Three",
-      url: "https://www.ilo.org",
-    },
-    {
-      label: "Link Four",
-      url: "https://www.ilo.org",
-    },
-    {
-      label: "Link Five Is Much Longer",
-      url: "https://www.ilo.org",
-    },
-  ],
-};
-
-const withsection: ContextMenuProps = {
-  links: [
-    {
-      label: "Link One",
-      url: "https://www.ilo.org",
-    },
-    {
-      label: "Link Two",
-      url: "https://www.ilo.org",
-    },
-    {
-      endsection: true,
-      label: "Link Three Ends A Section",
-      url: "https://www.ilo.org",
-    },
-    {
-      label: "Link Four",
-      url: "https://www.ilo.org",
-    },
-    {
-      label: "Link Five Is Much Longer",
-      url: "https://www.ilo.org",
-    },
-  ],
-};
-
-/**
- * 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.ts

@@ -1,28 +0,0 @@
-export 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>>;
-}

package/src/components/ContextMenu/ContextMenu.tsx

@@ -1,32 +0,0 @@
-import { FC } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { ContextMenuProps } from "./ContextMenu.props";
-
-const ContextMenu: FC<ContextMenuProps> = ({ className, links }) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--context-menu`;
-  const contextMenuClasses = classNames(className, {
-    [baseClass]: true,
-  });
-
-  return (
-    <ul className={contextMenuClasses}>
-      {links &&
-        links.map((link, i) => (
-          <li
-            className={`${baseClass}--item ${
-              link.endsection ? "endsection" : ""
-            }`}
-            key={`${baseClass}--item-${i}`}
-          >
-            <a href={link.url} className={`${baseClass}--link`}>
-              <span className={`${baseClass}--label`}>{link.label}</span>
-            </a>
-          </li>
-        ))}
-    </ul>
-  );
-};
-
-export default ContextMenu;

package/src/components/ContextMenu/index.ts

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

package/src/components/Credit/Credit.args.ts

@@ -1,14 +0,0 @@
-import { CreditProps } from "./Credit.props";
-
-const credit: CreditProps = {
-  credit: "Copyright © 2022 Firstname Lastname",
-};
-
-/**
- * Sample prop definitions for Credit's enumerable properties (imported in stories and test)
- */
-const CreditArgs = {
-  credit,
-};
-
-export default CreditArgs;

package/src/components/Credit/Credit.props.ts

@@ -1,11 +0,0 @@
-export interface CreditProps {
-  /**
-   * Specify an optional className to be added to your empty component.
-   */
-  className?: string;
-
-  /**
-   * Specify the credit text
-   */
-  credit?: string;
-}

package/src/components/Credit/Credit.tsx

@@ -1,41 +0,0 @@
-import { FC, useState } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { CreditProps } from "./Credit.props";
-
-const Credit: FC<CreditProps> = ({ className, credit }) => {
-  const [showcredit, showCredit] = useState(false);
-
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--credit`;
-  const creditClasses = classNames(className, {
-    [baseClass]: true,
-    ["show"]: showcredit,
-  });
-
-  /**
-   * Show credit tooltip
-   */
-  const showCreditTip = () => {
-    showCredit(true);
-  };
-
-  /**
-   * Hide credit tooltip
-   */
-  const hideCreditTip = () => {
-    showCredit(false);
-  };
-
-  return (
-    <span
-      className={creditClasses}
-      onMouseEnter={showCreditTip}
-      onMouseLeave={hideCreditTip}
-    >
-      <span className={`${baseClass}--label`}>{credit}</span>
-    </span>
-  );
-};
-
-export default Credit;

package/src/components/Credit/index.ts

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

package/src/components/DatePicker/DatePicker.args.ts

@@ -1,56 +0,0 @@
-import { DatePickerProps } from "./DatePicker.props";
-
-const basic: DatePickerProps = {
-  id: "datepicker",
-  disabled: false,
-  error: false,
-  name: "datepicker",
-  placeholder: "MM/DD/YYYY",
-  required: false,
-};
-
-const hashelper: DatePickerProps = {
-  id: "datepicker",
-  disabled: false,
-  error: false,
-  name: "datepicker",
-  placeholder: "MM/DD/YYYY",
-  required: false,
-};
-
-const haserror: DatePickerProps = {
-  id: "datepicker",
-  disabled: false,
-  error: true,
-  name: "datepicker",
-  placeholder: "MM/DD/YYYY",
-  required: false,
-};
-
-const hastooltip: DatePickerProps = {
-  id: "datepicker",
-  disabled: false,
-  error: false,
-  name: "datepicker",
-  placeholder: "MM/DD/YYYY",
-  required: false,
-};
-
-const hasrange: DatePickerProps = {
-  id: "datepicker",
-  disabled: false,
-  error: false,
-  name: "datepicker",
-  placeholder: "MM/DD/YYYY",
-  required: false,
-};
-
-const DatePickerArgs = {
-  basic,
-  hasrange,
-  hashelper,
-  haserror,
-  hastooltip,
-};
-
-export default DatePickerArgs;

package/src/components/DatePicker/DatePicker.props.ts

@@ -1,26 +0,0 @@
-import { FormFieldProps } from "../../types";
-import { LabelledFormFieldProps } from "../../types";
-
-export interface DatePickerProps extends FormFieldProps<HTMLInputElement> {
-  /**
-   * The latest date to accept
-   */
-  max?: string | number;
-
-  /**
-   * The earliest date to accept.
-   */
-  min?: string | number;
-
-  /**
-   * The granularity of the date picker
-   */
-  step?: number;
-
-  /**
-   * Specify an optional className to be added to your DatePicker component.
-   */
-  placeholder?: string;
-}
-
-export type LabelledDatePickerProps = LabelledFormFieldProps<DatePickerProps>;

package/src/components/DatePicker/DatePicker.tsx

@@ -1,80 +0,0 @@
-import { forwardRef } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import FormControl, { useFormControl } from "../FormControl/FormControl";
-import { DatePickerProps, LabelledDatePickerProps } from "./DatePicker.props";
-
-const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
-  (props, ref) => {
-    const {
-      onChange,
-      onBlur,
-      disabled = false,
-      error,
-      id,
-      name,
-      placeholder,
-      required,
-      max,
-      min,
-      step,
-    } = props;
-
-    const { prefix } = useGlobalSettings();
-    const formControlCtx = useFormControl();
-    const { ariaDescribedBy } = formControlCtx;
-
-    const inputClass = `${prefix}--input`;
-    const baseClass = `${prefix}--datepicker`;
-
-    const datePickerClasses = classNames(inputClass, baseClass, {
-      [`error`]: error,
-    });
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (onChange) {
-        onChange(e);
-      }
-    };
-
-    return (
-      <input
-        ref={ref}
-        type="date"
-        id={id ? id : name}
-        name={name}
-        onChange={handleChange}
-        onBlur={onBlur}
-        disabled={disabled}
-        placeholder={placeholder}
-        required={required}
-        className={datePickerClasses}
-        max={max}
-        min={min}
-        step={step}
-        aria-describedby={ariaDescribedBy}
-      />
-    );
-  }
-);
-
-const LabelledDatePicker = forwardRef<
-  HTMLInputElement,
-  LabelledDatePickerProps
->((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}
-    >
-      <DatePicker ref={ref} style={inputStyle} {...rest} />
-    </FormControl>
-  );
-});
-
-export default LabelledDatePicker;

package/src/components/DatePicker/index.ts

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