@ilo-org/react 0.13.0 → 0.14.1

package/lib/cjs/ListCtx-14aa546f.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-const ListContext = React.createContext({});
-const ListItemContext = React.createContext({});
-
-exports.ListContext = ListContext;
-exports.ListItemContext = ListItemContext;

package/lib/esm/ListCtx-da435fdf.js

@@ -1,6 +0,0 @@
-import { createContext } from 'react';
-
-const ListContext = createContext({});
-const ListItemContext = createContext({});
-
-export { ListContext as L, ListItemContext as a };

package/lib/types/react/src/components/List/ListCtx.d.ts

@@ -1,4 +0,0 @@
-import { ListContextProps } from "./List.props";
-import { ListItemContextProps } from "./ListItem.props";
-export declare const ListContext: import("react").Context<ListContextProps>;
-export declare const ListItemContext: import("react").Context<ListItemContextProps>;

package/rollup.config.mjs

@@ -1,70 +0,0 @@
-import commonjs from "@rollup/plugin-commonjs";
-import json from "@rollup/plugin-json";
-import resolve from "@rollup/plugin-node-resolve";
-import { createRequire } from "node:module";
-import del from "rollup-plugin-delete";
-import livereload from "rollup-plugin-livereload";
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import typescript from "rollup-plugin-typescript2";
-import multiInput from "rollup-plugin-multi-input";
-
-const require = createRequire(import.meta.url);
-const packageJson = require("./package.json");
-
-const config = {
-  input: [
-    "src/index.ts",
-    "src/components/**/index.ts",
-    "src/components/**/*.tsx",
-    "src/hooks/*.ts",
-    "src/utils/*.ts",
-  ],
-  external: [
-    ...Object.keys(packageJson.dependencies),
-    ...Object.keys(packageJson.devDependencies),
-  ],
-  output: [
-    {
-      dir: "lib/esm",
-      format: "esm",
-    },
-    {
-      dir: "lib/cjs",
-      format: "cjs",
-    },
-  ],
-};
-
-const basePlugins = [
-  resolve(),
-  commonjs(),
-  json(),
-  multiInput.default({ relative: "src/" }),
-  typescript({
-    baseUrl: "./src",
-    useTsconfigDeclarationDir: true,
-    tsconfig: "./tsconfig.build.json",
-  }),
-  peerDepsExternal(),
-];
-
-export default function (commandLineArgs) {
-  let plugins;
-
-  // For production
-  if (!commandLineArgs.configDevelop) {
-    plugins = [...basePlugins, del({ targets: "lib/*" })];
-  }
-
-  // for development
-  if (commandLineArgs.configDevelop) {
-    plugins = [
-      ...basePlugins,
-      del({ targets: "lib/*", runOnce: true }),
-      livereload(),
-    ];
-  }
-
-  config.plugins = plugins;
-  return config;
-}

package/src/components/Accordion/Accordion.args.ts

@@ -1,16 +0,0 @@
-import { AccordionProps } from "./Accordion.props";
-
-const large: AccordionProps = {
-  onButtonClick: (e) => {
-    console.log(e.target);
-  },
-  allowMultipleExpanded: true,
-  defaultAccordionsExpanded: ["l1", "l2"],
-  children: undefined,
-};
-
-/**
- * Sample prop definitions for Accordions's enumerable properties (imported in stories and tests).
- */
-
-export { large };

package/src/components/Accordion/Accordion.props.ts

@@ -1,41 +0,0 @@
-import { Dispatch, MouseEvent, ReactElement, SetStateAction } from "react";
-export { default as AccordionItem } from "./AccordionItem";
-import { getUpdatedItems } from "@ilo-org/utils";
-import { AccordionItemProps } from "./AccordionItem.props";
-
-export interface AccordionProps {
-  /**
-   * Specify the content of your Accordion.
-   */
-  children?:
-    | ReactElement<AccordionItemProps>
-    | Array<ReactElement<AccordionItemProps>>;
-
-  /**
-   * Callback to onButtonClick event;
-   */
-  onButtonClick?: (e: MouseEvent<HTMLButtonElement>, i: any) => void;
-
-  /**
-   * Allow multiple accordions to be expanded at once, default value is false
-   */
-  allowMultipleExpanded?: boolean;
-
-  /**
-   * Default accordions expanded on first load
-   */
-  defaultAccordionsExpanded?: string[];
-
-  /**
-   * Specify an optional className to be added to your accordion.
-   */
-  className?: string;
-}
-
-export interface AccordionContextProps {
-  activeItems: string[];
-  getUpdatedItems: typeof getUpdatedItems;
-  setActiveItems: Dispatch<SetStateAction<string[]>>;
-  allowMultipleExpanded: boolean;
-  onButtonClick?: (e: MouseEvent<HTMLButtonElement>, i: any) => void;
-}

package/src/components/Accordion/Accordion.tsx

@@ -1,62 +0,0 @@
-import { getUpdatedItems } from "@ilo-org/utils";
-import classNames from "classnames";
-import { Children, FC, ReactElement, useEffect, useState } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { checkArrayDuplicates } from "../../utils/checkArrayDuplicates";
-import { AccordionProps } from "./Accordion.props";
-import { AccordionContext } from "./AccordionCtx";
-
-const Accordion: FC<AccordionProps> = ({
-  children,
-  allowMultipleExpanded = false,
-  onButtonClick,
-  defaultAccordionsExpanded = [],
-  className,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--accordion`;
-  const [activeItems, setActiveItems] = useState<string[]>([]);
-
-  const accordionClasses = classNames(className, {
-    [baseClass]: true,
-  });
-
-  const defaultAccordionsExpandedString = JSON.stringify(
-    defaultAccordionsExpanded
-  );
-
-  useEffect(() => {
-    const expandedOnLoad = allowMultipleExpanded
-      ? defaultAccordionsExpanded
-      : defaultAccordionsExpanded.length > 0
-      ? [defaultAccordionsExpanded[0]]
-      : defaultAccordionsExpanded;
-    setActiveItems(expandedOnLoad);
-  }, [defaultAccordionsExpandedString, allowMultipleExpanded]); //eslint-disable-line react-hooks/exhaustive-deps
-
-  if (children) {
-    const ids: string[] = [];
-    Children.forEach(children, (child: ReactElement) => {
-      ids.push(child.props.id);
-    });
-    if (checkArrayDuplicates(ids)) {
-      console.warn("Warning: Accordion items must have unique ids.");
-    }
-  }
-
-  return (
-    <AccordionContext.Provider
-      value={{
-        activeItems,
-        setActiveItems,
-        getUpdatedItems,
-        allowMultipleExpanded,
-        onButtonClick,
-      }}
-    >
-      <ul className={accordionClasses}>{children}</ul>
-    </AccordionContext.Provider>
-  );
-};
-
-export default Accordion;

package/src/components/Accordion/AccordionButton.props.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from "react";
-
-export default interface AccordionButtonProps {
-  /**
-   * Specify the content of your Button.
-   */
-  children: ReactNode;
-
-  /**
-   * Specify an optional className to be added to your Button.
-   */
-  className?: string;
-}

package/src/components/Accordion/AccordionButton.tsx

@@ -1,58 +0,0 @@
-import classNames from "classnames";
-import { FC, MouseEvent, useContext } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { default as AccordionButtonProps } from "./AccordionButton.props";
-import { AccordionContext, AccordionItemContext } from "./AccordionCtx";
-
-const AccordionButton: FC<AccordionButtonProps> = ({
-  children,
-  className,
-  ...rest
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--accordion--button`;
-
-  const {
-    activeItems,
-    setActiveItems,
-    getUpdatedItems,
-    allowMultipleExpanded,
-    onButtonClick,
-  } = useContext(AccordionContext);
-  const { id } = useContext(AccordionItemContext);
-  const open = activeItems.indexOf(id) > -1;
-
-  const accordionButtonClasses = classNames(className, {
-    [baseClass]: true,
-  });
-
-  /**
-   * On click, get id of clicked item, and set that item in state to 'open', all others to 'closed'
-   */
-  const handleClick = (e: MouseEvent<HTMLButtonElement>, id: string) => {
-    setActiveItems(
-      getUpdatedItems({ id, itemStatuses: activeItems, allowMultipleExpanded })
-    );
-    if (onButtonClick) {
-      onButtonClick(e, id);
-    }
-    e.currentTarget.blur();
-  };
-
-  return (
-    <div className={`${prefix}--h3`}>
-      <button
-        className={accordionButtonClasses}
-        aria-expanded={open}
-        onClick={(e) => handleClick(e, id)}
-        aria-controls={`panel-${id}`}
-        id={`button-${id}`}
-        {...rest}
-      >
-        {children}
-      </button>
-    </div>
-  );
-};
-
-export default AccordionButton;

package/src/components/Accordion/AccordionCtx.ts

@@ -1,9 +0,0 @@
-import { createContext } from "react";
-import { AccordionContextProps } from "./Accordion.props";
-import { AccordionItemContextProps } from "./AccordionItem.props";
-
-export const AccordionContext = createContext({} as AccordionContextProps);
-
-export const AccordionItemContext = createContext(
-  {} as AccordionItemContextProps
-);

package/src/components/Accordion/AccordionItem.props.ts

@@ -1,25 +0,0 @@
-import { ReactNode } from "react";
-
-export interface AccordionItemContextProps {
-  /**
-   * The accordion item's unique id.
-   */
-  id: string;
-}
-
-export interface AccordionItemProps {
-  /**
-   * Specify the id of the accordion item.
-   */
-  id: string;
-
-  /**
-   * Specify the content of your Button.
-   */
-  children: ReactNode;
-
-  /**
-   * Specify an optional className to be added to your Button.
-   */
-  className?: string;
-}

package/src/components/Accordion/AccordionItem.tsx

@@ -1,27 +0,0 @@
-import classNames from "classnames";
-import { FC } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { AccordionItemContext } from "./AccordionCtx";
-import { AccordionItemProps } from "./AccordionItem.props";
-
-const AccordionItem: FC<AccordionItemProps> = ({
-  children,
-  id,
-  className,
-  ...rest
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--accordion--item`;
-  const accordionItemClasses = classNames(className, {
-    [baseClass]: true,
-  });
-  return (
-    <AccordionItemContext.Provider value={{ id }}>
-      <li className={accordionItemClasses} {...rest}>
-        {children}
-      </li>
-    </AccordionItemContext.Provider>
-  );
-};
-
-export default AccordionItem;

package/src/components/Accordion/AccordionPanel.props.ts

@@ -1,25 +0,0 @@
-import { ReactNode } from "react";
-
-export default interface AccordionPanelProps {
-  /**
-   * Specify the content of your Button.
-   */
-  children: ReactNode;
-
-  /**
-   * Specify an optional className to be added to your Button.
-   */
-  className?: string;
-
-  /**
-   * 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;
-
-  /**
-   * Allows the AccordionPanel to be scrollable by default
-   */
-  scroll?: boolean;
-}

package/src/components/Accordion/AccordionPanel.tsx

@@ -1,46 +0,0 @@
-import classNames from "classnames";
-import { FC, useContext, useLayoutEffect, useRef, useState } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { AccordionContext, AccordionItemContext } from "./AccordionCtx";
-import { default as AccordionPanelProps } from "./AccordionPanel.props";
-
-const AccordionPanel: FC<AccordionPanelProps> = ({
-  children,
-  className,
-  scroll,
-  ...rest
-}) => {
-  const { activeItems } = useContext(AccordionContext);
-  const { id } = useContext(AccordionItemContext);
-  const [panelHeight, setPanelHeight] = useState(0);
-  const open = activeItems.indexOf(id) > -1;
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--accordion--panel`;
-
-  const accordionaPanelClasses = classNames(className, baseClass, {
-    [`${baseClass}__scroll`]: scroll,
-    [`${baseClass}--open`]: open,
-  });
-
-  const ref = useRef<HTMLInputElement>();
-
-  useLayoutEffect(() => {
-    ref.current && setPanelHeight(ref.current.scrollHeight);
-  });
-
-  return (
-    <div
-      className={accordionaPanelClasses}
-      id={`panel-${id}`}
-      aria-labelledby={`button-${id}`}
-      role="region"
-      ref={ref as any}
-      style={{ ["--height" as any]: `${panelHeight}px` }}
-      {...rest}
-    >
-      <div className={`${prefix}--accordion--innerpanel`}>{children}</div>
-    </div>
-  );
-};
-
-export default AccordionPanel;

package/src/components/Accordion/index.ts

@@ -1,4 +0,0 @@
-export { default as AccordionButton } from "./AccordionButton";
-export { default as AccordionPanel } from "./AccordionPanel";
-export { default as AccordionItem } from "./AccordionItem";
-export { default as Accordion } from "./Accordion";

package/src/components/Breadcrumb/Breadcrumb.args.ts

@@ -1,61 +0,0 @@
-import { BreadcrumbProps } from "./Breadcrumb.props";
-
-const basic: BreadcrumbProps = {
-  home: {
-    indented: false,
-    label: "Home",
-    url: "/",
-  },
-  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/",
-    },
-  ],
-};
-
-const fiveLinks: BreadcrumbProps = {
-  home: {
-    indented: false,
-    label: "Home",
-    url: "/",
-  },
-  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",
-      url: "https://www.ilo.org/",
-    },
-  ],
-};
-
-const BreadcrumbArgs = { basic, fiveLinks };
-
-export default BreadcrumbArgs;

package/src/components/Breadcrumb/Breadcrumb.props.ts

@@ -1,13 +0,0 @@
-import { LinkProps } from "../LinkList/LinkList.props";
-
-export interface BreadcrumbProps {
-  /**
-   * Specify the HOME link in the Breadcrumb
-   */
-  home: Required<LinkProps>;
-
-  /**
-   * Specify the links to be displayed in the Breadcrumb
-   */
-  links: Required<Array<LinkProps>>;
-}

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,82 +0,0 @@
-import { FC, useState, useEffect } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import classnames from "classnames";
-import { BreadcrumbProps } from "./Breadcrumb.props";
-import { ContextMenu } from "../ContextMenu";
-
-const Breadcrumb: FC<BreadcrumbProps> = ({ home, links }) => {
-  const { prefix } = useGlobalSettings();
-
-  const [showContextMenu, enableContextMenu] = useState(false);
-  const [toggleMenuOpen, setContextMenuToggleOpen] = useState(false);
-
-  const handleScreenResize = () => {
-    enableContextMenu(window.innerWidth <= 1024); // turn on context menu when screen is resized to a smaller size
-  };
-
-  useEffect(() => {
-    window.addEventListener("resize", handleScreenResize);
-    handleScreenResize();
-
-    return () => {
-      window.removeEventListener("resize", handleScreenResize);
-    };
-  }, []);
-
-  const handleContextMenuToggle = () => {
-    setContextMenuToggleOpen(!toggleMenuOpen);
-  };
-
-  const showContext = links.length > 4 || showContextMenu ? true : false;
-
-  const baseClass = `${prefix}--breadcrumb`;
-  const BreadcrumbClasses = classnames(baseClass);
-
-  const lastLink = links[links.length - 1];
-  const menuLinks = links.slice(0, -1);
-
-  return (
-    <nav
-      className={`${BreadcrumbClasses} ${showContext ? " contextmenu" : ""}`}
-    >
-      <ol className={`${baseClass}--items`}>
-        <li className={`${baseClass}--item home`}>
-          <a className={`${baseClass}--link`} href={home.url}>
-            <span className={`${baseClass}--link--label`}>{home.label}</span>
-          </a>
-        </li>
-        <li
-          className={`${baseClass}--item--context`}
-          onClick={handleContextMenuToggle}
-        >
-          <ul
-            className={`${baseClass}--items context--menu ${
-              toggleMenuOpen ? " open" : ""
-            }`}
-          >
-            {showContext && <ContextMenu links={menuLinks}></ContextMenu>}
-            {!showContext &&
-              menuLinks.map((link, index) => (
-                <li className={`${baseClass}--item`} key={index}>
-                  <a href={link.url} className={`${baseClass}--link`}>
-                    <span className={`${baseClass}--link--label`}>
-                      {link.label}
-                    </span>
-                  </a>
-                </li>
-              ))}
-          </ul>
-        </li>
-        <li className={`${baseClass}--item final`}>
-          <a className={`${baseClass}--link`} href={lastLink.url}>
-            <span className={`${baseClass}--link--label`}>
-              {lastLink.label}
-            </span>
-          </a>
-        </li>
-      </ol>
-    </nav>
-  );
-};
-
-export default Breadcrumb;

package/src/components/Breadcrumb/index.ts

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

package/src/components/Button/Button.args.ts

@@ -1,35 +0,0 @@
-import { ButtonProps } from "./Button.props";
-
-const primary: ButtonProps = {
-  type: "primary",
-  label: "Primary",
-  size: "medium",
-  name: "primary",
-};
-const secondary: ButtonProps = {
-  type: "secondary",
-  label: "Secondary",
-  name: "secondary",
-};
-const tertiary: ButtonProps = {
-  type: "tertiary",
-  label: "Tertiary",
-  name: "tertiary",
-};
-const alert: ButtonProps = { type: "alert", label: "Alert", name: "alert" };
-const icon: ButtonProps = { type: "primary", label: "Icon", icon: "close" };
-const disabled: ButtonProps = {
-  type: "primary",
-  label: "Disabled",
-  disabled: true,
-};
-const link: ButtonProps = {
-  type: "primary",
-  icon: "arrowright",
-  iconPosition: "right",
-  label: "Visit ilo.org",
-  url: "https://www.ilo.org",
-  target: "__blank",
-};
-
-export default { primary, secondary, tertiary, alert, icon, disabled, link };