@vincentgraul/react-components 1.0.40 → 1.0.41

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

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

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

package/src/pagination/index.ts

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

package/src/pagination/pagination.module.css

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

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

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

package/src/select/icons/ArrowBottom.tsx

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

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

package/src/select/index.ts

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

package/src/select/select.module.css

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

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

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

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

package/src/table/table.module.css

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

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

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

package/src/use-breadcrumb/index.ts

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

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

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

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

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

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

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

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

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

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

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

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

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