@vincentgraul/react-components 1.0.39 → 1.0.40

package/src/mount-react-hook/mount-react-hook.tsx

@@ -0,0 +1,28 @@
+import React, { ComponentType } from "react";
+import { render } from "@testing-library/react";
+import { MountedHook } from "./mount-react-hook.types";
+
+/**
+ * React hook to mount a hook in an unit test.
+ * @public
+ * @param Component - The component to be tested.
+ * @param props - Props passed to the component.
+ * @returns The component, the value it returns and a function to unmount the component.
+ */
+export const mountReactHook = (
+  Component: ComponentType,
+  props: ObjectLiteral = {},
+): MountedHook => {
+  let value: ObjectLiteral | Primitive = null;
+
+  const { container, unmount } = render(
+    <Component {...props}>
+      {(hookValue: ObjectLiteral | Primitive) => {
+        value = hookValue;
+        return null;
+      }}
+    </Component>,
+  );
+
+  return { container, unmount, value };
+};

package/src/mount-react-hook/mount-react-hook.types.ts

@@ -0,0 +1,5 @@
+export type MountedHook = {
+  container: HTMLElement;
+  unmount: () => void;
+  value: ObjectLiteral | Primitive;
+};

package/src/pagination/index.ts

@@ -0,0 +1,2 @@
+export * from "./pagination";
+export * from "./pagination.types";

package/src/pagination/pagination.module.css

@@ -0,0 +1,31 @@
+.container {
+  --hover-background-color: lightgrey;
+  --hover-text-color: black;
+  --selected-background-color: black;
+  --selected-text-color: white;
+
+  display: flex;
+}
+
+.item {
+  border-style: solid;
+  border-width: 1px 1px 1px 0;
+  padding: 0.5rem 1rem 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &:first-child {
+    border-width: 1px 1px 1px 1px;
+  }
+
+  &:hover:not(.selected) {
+    background-color: var(--hover-background-color);
+    color: var(--hover-text-color);
+  }
+
+  &.selected {
+    background-color: var(--selected-background-color);
+    color: var(--selected-text-color);
+  }
+}

package/src/pagination/pagination.tsx

@@ -0,0 +1,90 @@
+import React, { CSSProperties, ReactNode } from "react";
+import clsx from "clsx";
+import styles from "./pagination.module.css";
+import { PaginationData, PaginationColors } from "..";
+
+export enum ArrowPosition {
+  LEFT,
+  RIGHT,
+}
+
+type Props = PaginationData & {
+  colors?: PaginationColors;
+  renderSingleArrow?: (position: ArrowPosition) => ReactNode;
+  renderDoubleArrow?: (position: ArrowPosition) => ReactNode;
+};
+
+/**
+ * React component used to display a pagination (with numbers).
+ * @public
+ * @param props - An object which contains:
+ * - properties inherited from the Pagination interface in usePagination hook
+ * - some properties to customise the rendering
+ * @returns A React component.
+ */
+export const Pagination = ({
+  page,
+  total,
+  items,
+  colors,
+  goToFirst,
+  goToLeft,
+  goToRight,
+  goToLast,
+  goToPage,
+  renderSingleArrow,
+  renderDoubleArrow,
+}: Props) => {
+  const CSSVariables = {
+    "--hover-background-color": colors?.hover.background,
+    "--hover-text-color": colors?.hover.text,
+    "--selected-background-color": colors?.selected.background,
+    "--selected-text-color": colors?.selected.text,
+  } as CSSProperties;
+
+  return (
+    <div className={styles.container} style={CSSVariables}>
+      {page > 1 && (
+        <>
+          {renderDoubleArrow && (
+            <div className={styles.item} onClick={() => goToFirst()}>
+              {renderDoubleArrow(ArrowPosition.LEFT)}
+            </div>
+          )}
+
+          {renderSingleArrow && (
+            <div className={styles.item} onClick={() => goToLeft()}>
+              {renderSingleArrow(ArrowPosition.LEFT)}
+            </div>
+          )}
+        </>
+      )}
+
+      {items.map((currentPage: number, index: number) => (
+        <div
+          className={clsx(styles.item, currentPage === page && styles.selected)}
+          key={index}
+          onClick={() => goToPage(currentPage)}
+        >
+          {currentPage}
+        </div>
+      ))}
+
+      {page < total && (
+        <>
+          {renderSingleArrow && (
+            <div className={styles.item} onClick={() => goToRight()}>
+              {renderSingleArrow(ArrowPosition.RIGHT)}
+            </div>
+          )}
+
+          {renderDoubleArrow && (
+            <div className={styles.item} onClick={() => goToLast()}>
+              {renderDoubleArrow(ArrowPosition.RIGHT)}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};

package/src/pagination/pagination.types.ts

@@ -0,0 +1,4 @@
+export type PaginationColors = {
+  hover: { background: string; text: string };
+  selected: { background: string; text: string };
+};

package/src/select/icons/ArrowBottom.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgArrowBottom = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 18" {...props}>
+    <path
+      fill="#171D27"
+      fillRule="nonzero"
+      d="m17.202 17.352 13.46-13.577a2.224 2.224 0 0 0 0-3.127 2.179 2.179 0 0 0-3.1 0l-11.91 12.014L3.742.648a2.18 2.18 0 0 0-3.1 0 2.225 2.225 0 0 0 0 3.127l13.46 13.578a2.175 2.175 0 0 0 3.1 0Z"
+    />
+  </svg>
+);
+export default SvgArrowBottom;

package/src/select/icons/index.ts

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

package/src/select/index.ts

@@ -0,0 +1,2 @@
+export * from "./select";
+export * from "./select.types";

package/src/select/select.module.css

@@ -0,0 +1,54 @@
+.container {
+  width: fit-content;
+}
+
+.selected-option-container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  padding: 10px;
+  background-color: white;
+  border-radius: 5px;
+}
+
+.selected-option-text {
+  padding-right: 10px;
+  border-right: 1px solid black;
+}
+
+.selected-option-arrow {
+  width: 15px;
+  margin-left: 10px;
+}
+
+.options-list {
+  width: 100%;
+  list-style: none;
+  padding: 0;
+  margin: 10px 0 0 0;
+  user-select: none;
+  background-color: white;
+  border-radius: 5px;
+}
+
+.option {
+  padding: 10px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #ecf0f1;
+
+    &:first-child {
+      border-radius: 5px 5px 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 5px 5px;
+    }
+
+    &:only-child {
+      border-radius: 5px;
+    }
+  }
+}

package/src/select/select.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useRef, useState } from "react";
+import styles from "./select.module.css";
+import { SelectOptionWithoutId, SelectOption } from "./select.types";
+import { useOutsideAlerter } from "..";
+import { ArrowBottom } from "./icons";
+
+type Props = {
+  options: SelectOptionWithoutId[];
+  selectedValue?: string;
+  onChange?: (option: SelectOption) => void;
+};
+
+export const Select = ({ options: optionsProps, selectedValue, onChange }: Props) => {
+  const [options, setOptions] = useState<SelectOption[]>(null);
+  const [isListVisible, setListVisibility] = useState<boolean>(false);
+  const [selectedOption, setSelectedOption] = useState<SelectOption>(null);
+  const ref = useRef(null);
+  const { hasClickedOutside, onReset: onResetOutsideAlerter } = useOutsideAlerter(ref);
+
+  const handleSelectedOptionClick = () => {
+    onResetOutsideAlerter();
+    setListVisibility(!isListVisible);
+  };
+
+  const handleOptionClick = (option: SelectOption) => {
+    setSelectedOption(option);
+    setListVisibility(false);
+
+    if (onChange) {
+      onChange(option);
+    }
+  };
+
+  useEffect(() => {
+    setOptions(
+      optionsProps.map((option: SelectOptionWithoutId, index: number) => ({
+        ...option,
+        id: index,
+      })),
+    );
+  }, [optionsProps]);
+
+  useEffect(() => {
+    if (options && !selectedOption) {
+      setSelectedOption(
+        selectedValue ? options.find((option) => option.value === selectedValue) : options[0],
+      );
+    }
+  }, [options]);
+
+  useEffect(() => {
+    if (hasClickedOutside) {
+      setListVisibility(false);
+    }
+  }, [hasClickedOutside]);
+
+  if (!options || !selectedOption) {
+    return null;
+  }
+
+  return (
+    <div className={styles.container} ref={ref}>
+      <div className={styles["selected-option-container"]} onClick={handleSelectedOptionClick}>
+        <span className={styles["selected-option-text"]}>{selectedOption.label}</span>
+        <ArrowBottom className={styles["selected-option-arrow"]} />
+      </div>
+
+      {isListVisible && (
+        <ul className={styles["options-list"]}>
+          {options
+            .filter((option: SelectOption) => option.id !== selectedOption.id)
+            .map((option: SelectOption) => (
+              <li
+                className={styles.option}
+                key={option.id}
+                onClick={() => handleOptionClick(option)}
+              >
+                {option.label}
+              </li>
+            ))}
+        </ul>
+      )}
+    </div>
+  );
+};

package/src/select/select.types.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+export type SelectOption = {
+  id: number;
+  label: string | ReactNode;
+  value: string;
+};
+
+export type SelectOptionWithoutId = Omit<SelectOption, "id">;

package/src/table/index.ts

@@ -0,0 +1,2 @@
+export * from "./table";
+export * from "./table.types";

package/src/table/table.module.css

@@ -0,0 +1,33 @@
+.container {
+  display: flex;
+  flex-flow: column;
+}
+
+.main {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+
+.tbody {
+  user-select: text;
+  tr:last-child {
+    border: none;
+  }
+}
+
+.th {
+  padding: 2rem 1rem 1rem 0;
+  word-wrap: break-word;
+  white-space: nowrap;
+}
+
+.tr {
+  text-align: center;
+  border-bottom: 2px solid black;
+}
+
+.td {
+  padding: 2rem 1rem 1rem 0;
+  word-wrap: break-word;
+}

package/src/table/table.tsx

@@ -0,0 +1,83 @@
+import React, { ReactNode, PropsWithChildren } from "react";
+import styles from "./table.module.css";
+import { Column } from "./table.types";
+
+type Props<T> = {
+  columns: Column[];
+  records: T[];
+  renderHeader?: () => ReactNode;
+  renderFooter?: () => ReactNode;
+  renderColumnsRow?: (columns: ReactNode) => ReactNode;
+  renderColumnsCell?: (column: Column, key: string) => ReactNode;
+  renderRecordsRow?: (cells: ReactNode, key: string) => ReactNode;
+  renderRecordsCell?: (cell: Primitive, key: string) => ReactNode;
+  renderRecordsEmptyCell?: (key: string) => ReactNode;
+  renderNoRecords?: () => ReactNode;
+};
+
+/**
+ * React component used to display a data table.
+ * @public
+ * @param props - An Object which contains:
+ * - columns: the table columns
+ * - records: the table records
+ * - some properties to customise the rendering
+ * @returns A React component.
+ */
+export const Table = <T,>({
+  columns,
+  records,
+  renderHeader = () => null,
+  renderFooter = () => null,
+  renderColumnsRow = (columns: ReactNode) => <tr>{columns}</tr>,
+  renderColumnsCell = (column: Column, key: string) => <Th key={key}>{column.name}</Th>,
+  renderRecordsRow = (cells: ReactNode, key: string) => <Tr key={key}>{cells}</Tr>,
+  renderRecordsCell = (cell: Primitive, key: string) => <Td key={key}>{cell}</Td>,
+  renderRecordsEmptyCell = (key: string) => <Td key={key}>X</Td>,
+  renderNoRecords = () => null,
+}: Props<T>) => {
+  const displayColumns = () =>
+    renderColumnsRow(
+      columns.map((column: Column, index: number) => renderColumnsCell(column, `column-${index}`)),
+    );
+
+  const displayRows = () => {
+    const columnNames: string[] = columns.map((column: Column) => column.name);
+
+    return records.map((record: T, rowIndex: number) => {
+      const cells: Primitive[] = columnNames.map((name: string) => (record as ObjectLiteral)[name]);
+
+      return renderRecordsRow(
+        cells.map((cell: Primitive, cellIndex: number) =>
+          cell
+            ? renderRecordsCell(cell, `cell-${cellIndex}`)
+            : renderRecordsEmptyCell(`cell-${cellIndex}`),
+        ),
+        `row-${rowIndex}`,
+      );
+    });
+  };
+
+  return (
+    <div className={styles.container}>
+      {renderHeader()}
+
+      {records.length === 0 ? (
+        renderNoRecords()
+      ) : (
+        <>
+          <table className={styles.main}>
+            <thead>{displayColumns()}</thead>
+            <tbody className={styles.tbody}>{displayRows()}</tbody>
+          </table>
+        </>
+      )}
+
+      {renderFooter()}
+    </div>
+  );
+};
+
+export const Th = ({ children }: PropsWithChildren) => <th className={styles.th}>{children}</th>;
+export const Tr = ({ children }: PropsWithChildren) => <tr className={styles.tr}>{children}</tr>;
+export const Td = ({ children }: PropsWithChildren) => <th className={styles.td}>{children}</th>;

package/src/table/table.types.ts

@@ -0,0 +1,5 @@
+export type Column = {
+  name: string;
+  label: string;
+  [field: string]: any;
+};

package/src/use-breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export * from "./use-breadcrumb";
+export * from "./use-breadcrumb.types";

package/src/use-breadcrumb/use-breadcrumb.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import { BreadcrumbType, BreadcrumbElementType } from "./use-breadcrumb.types";
+
+export const useBreadcrumb = ({
+  url = new URL(location.href),
+  mapping,
+}: BreadcrumbType): BreadcrumbElementType[] => {
+  const [elements, setElements] = useState<BreadcrumbElementType[]>([]);
+
+  const prepareElements = (paths: string[]) => {
+    let previousPath: string = "";
+    paths.shift();
+
+    return paths.map((path: string) => {
+      let label: string = path;
+      const url = `${previousPath}/${path}`;
+      previousPath = url;
+
+      if (mapping) {
+        const value = mapping.find((value) => value.url === path);
+        label = value ? value.label : path;
+      }
+
+      return { label, url };
+    });
+  };
+
+  useEffect(() => {
+    const paths: string[] = url.pathname.split("/");
+
+    setElements(prepareElements(paths));
+  }, []);
+
+  return elements;
+};

package/src/use-breadcrumb/use-breadcrumb.types.ts

@@ -0,0 +1,12 @@
+export type BreadcrumbElementType = {
+  label: string;
+  url: string;
+};
+
+export type BreadcrumbType = {
+  url?: URL;
+  mapping?: {
+    url: string;
+    label: string;
+  }[];
+};

package/src/use-match-device/use-match-device.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import UAParser from "ua-parser-js";
+import { Device } from "./use-match-device.types";
+
+/**
+ * React hook to detect the device (mobile, tablet or desktop) based on the user agent.
+ * @public
+ * @param UA - The user agent.
+ * @returns An object with multiple properties (isMobile, isTablet...) used to detect the device.
+ */
+export const useMatchDevice = (UA: string): Device => {
+  const isClientSide: boolean = typeof window !== "undefined";
+
+  const compute = () => {
+    const parser = new UAParser.UAParser(UA);
+    const { type } = parser.getDevice();
+
+    const device: Device = {
+      isMobile: type === "mobile",
+      isTablet: type === "tablet",
+      isMobileOrTablet: false,
+      isDesktop: !type,
+    };
+
+    device.isMobileOrTablet = device.isMobile || device.isTablet;
+
+    return device;
+  };
+
+  if (!isClientSide) {
+    return compute();
+  }
+
+  const [device, setDevice] = useState<Device>(compute());
+
+  useEffect(() => {
+    setDevice(compute());
+  }, [UA]);
+
+  return device;
+};

package/src/use-match-device/use-match-device.types.ts

@@ -0,0 +1,6 @@
+export type Device = {
+  isMobile: boolean;
+  isTablet: boolean;
+  isMobileOrTablet: boolean;
+  isDesktop: boolean;
+};

package/src/use-match-resolution/use-match-resolution.ts

@@ -0,0 +1,72 @@
+import { useEffect, useState } from "react";
+import { Breakpoints, MatchResolution, Resolution } from "./use-match-resolution.types";
+import { useMatchDevice } from "..";
+
+export const defaultBreakpoints: Breakpoints = {
+  desktop: "(min-width: 1281px)",
+  laptop: "(min-width: 1025px) and (max-width: 1280px)",
+  laptopOrUpper: "(min-width: 1025px)",
+  laptopOrLower: "(max-width: 1280px)",
+  tablet: "(min-width: 768px) and (max-width: 1024px)",
+  tabletOrUpper: "(min-width: 768px)",
+  tabletOrLower: "(max-width: 1024px)",
+  largeMobile: "(min-width: 481px) and (max-width: 767px)",
+  largeMobileOrUpper: "(min-width: 481px)",
+  largeMobileOrLower: "(max-width: 767px)",
+  mobile: "(min-width: 320px) and (max-width: 480px)",
+  portrait: "(orientation: portrait)",
+  landscape: "(orientation: landscape)",
+};
+
+/**
+ * React hook to detect the resolution (desktop, laptop, tablet, mobile...).
+ * @public
+ * @param breakpoints - List of breakpoints (used for determine when a resolution is a "desktop", a "laptop" etc.).
+ * @param UA - The user agent (used for determine the resolution in case of SSR).
+ * @returns An object with three properties:
+ * - resolution: object with multiple properties (isDesktop, isLaptop...) used for know the current resolution
+ * - breakpoints: the breakpoints passed as parameters
+ * - match: function used to detect the current resolution with a custom breakpoint
+ */
+export const useMatchResolution = (
+  breakpoints: Breakpoints = defaultBreakpoints,
+  UA: string = "",
+): MatchResolution => {
+  const isClientSide: boolean = typeof window !== "undefined";
+  const { isDesktop, isMobile } = useMatchDevice(UA);
+
+  const match = (query: string): boolean => isClientSide && window.matchMedia(query).matches;
+
+  const compute = (): Resolution => ({
+    isDesktop: isClientSide ? match(breakpoints.desktop) : isDesktop,
+    isLaptop: isClientSide ? match(breakpoints.laptop) : isDesktop,
+    isLaptopOrUpper: isClientSide ? match(breakpoints.laptopOrUpper) : isDesktop,
+    isLaptopOrLower: isClientSide ? match(breakpoints.laptopOrLower) : false,
+    isTablet: isClientSide ? match(breakpoints.tablet) : isMobile,
+    isTabletOrUpper: isClientSide ? match(breakpoints.tabletOrUpper) : false,
+    isTabletOrLower: isClientSide ? match(breakpoints.tabletOrLower) : isMobile,
+    isLargeMobile: isClientSide ? match(breakpoints.largeMobile) : isMobile,
+    isLargeMobileOrUpper: isClientSide ? match(breakpoints.largeMobileOrUpper) : false,
+    isLargeMobileOrLower: isClientSide ? match(breakpoints.largeMobileOrLower) : isMobile,
+    isMobile: isClientSide ? match(breakpoints.mobile) : isMobile,
+    isPortrait: isClientSide ? match(breakpoints.portrait) : false,
+    isLandscape: isClientSide ? match(breakpoints.landscape) : false,
+  });
+
+  const [resolution, setResolution] = useState<Resolution>(compute());
+
+  useEffect(() => {
+    const onResize = () => setResolution(compute());
+
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    setResolution(compute());
+  }, [breakpoints]);
+
+  return { resolution, breakpoints, match };
+};

package/src/use-match-resolution/use-match-resolution.types.ts

@@ -0,0 +1,37 @@
+export type Breakpoints = {
+  desktop: string;
+  laptop: string;
+  laptopOrUpper: string;
+  laptopOrLower: string;
+  tablet: string;
+  tabletOrUpper: string;
+  tabletOrLower: string;
+  largeMobile: string;
+  largeMobileOrUpper: string;
+  largeMobileOrLower: string;
+  mobile: string;
+  portrait: string;
+  landscape: string;
+};
+
+export type Resolution = {
+  isDesktop: boolean;
+  isLaptop: boolean;
+  isLaptopOrUpper: boolean;
+  isLaptopOrLower: boolean;
+  isTablet: boolean;
+  isTabletOrUpper: boolean;
+  isTabletOrLower: boolean;
+  isLargeMobile: boolean;
+  isLargeMobileOrUpper: boolean;
+  isLargeMobileOrLower: boolean;
+  isMobile: boolean;
+  isPortrait: boolean;
+  isLandscape: boolean;
+};
+
+export type MatchResolution = {
+  resolution: Resolution;
+  breakpoints: Breakpoints;
+  match: (query: string) => boolean;
+};