@vincentgraul/react-components 1.0.38 → 1.0.40

package/src/country-selector/icons/index.ts

@@ -0,0 +1,223 @@
+export { default as Ad } from "./Ad";
+export { default as Ae } from "./Ae";
+export { default as Af } from "./Af";
+export { default as Ag } from "./Ag";
+export { default as Ai } from "./Ai";
+export { default as Al } from "./Al";
+export { default as Am } from "./Am";
+export { default as Ao } from "./Ao";
+export { default as Ar } from "./Ar";
+export { default as As } from "./As";
+export { default as At } from "./At";
+export { default as Au } from "./Au";
+export { default as Aw } from "./Aw";
+export { default as Az } from "./Az";
+export { default as Ba } from "./Ba";
+export { default as Bb } from "./Bb";
+export { default as Bd } from "./Bd";
+export { default as Be } from "./Be";
+export { default as Bf } from "./Bf";
+export { default as Bg } from "./Bg";
+export { default as Bh } from "./Bh";
+export { default as Bi } from "./Bi";
+export { default as Bj } from "./Bj";
+export { default as Bm } from "./Bm";
+export { default as Bo } from "./Bo";
+export { default as Br } from "./Br";
+export { default as Bs } from "./Bs";
+export { default as Bt } from "./Bt";
+export { default as Bw } from "./Bw";
+export { default as By } from "./By";
+export { default as Bz } from "./Bz";
+export { default as Ca } from "./Ca";
+export { default as Cd } from "./Cd";
+export { default as Cf } from "./Cf";
+export { default as Cg } from "./Cg";
+export { default as Ch } from "./Ch";
+export { default as Ci } from "./Ci";
+export { default as Ck } from "./Ck";
+export { default as Cl } from "./Cl";
+export { default as Cm } from "./Cm";
+export { default as Cn } from "./Cn";
+export { default as Co } from "./Co";
+export { default as Cr } from "./Cr";
+export { default as Cu } from "./Cu";
+export { default as Cv } from "./Cv";
+export { default as Cw } from "./Cw";
+export { default as Cy } from "./Cy";
+export { default as Cz } from "./Cz";
+export { default as De } from "./De";
+export { default as Dj } from "./Dj";
+export { default as Dk } from "./Dk";
+export { default as Dm } from "./Dm";
+export { default as Do } from "./Do";
+export { default as Dz } from "./Dz";
+export { default as Ec } from "./Ec";
+export { default as Ee } from "./Ee";
+export { default as Eg } from "./Eg";
+export { default as Er } from "./Er";
+export { default as Es } from "./Es";
+export { default as Et } from "./Et";
+export { default as Fi } from "./Fi";
+export { default as Fj } from "./Fj";
+export { default as Fk } from "./Fk";
+export { default as Fm } from "./Fm";
+export { default as Fo } from "./Fo";
+export { default as Fr } from "./Fr";
+export { default as Ga } from "./Ga";
+export { default as Gb } from "./Gb";
+export { default as Gd } from "./Gd";
+export { default as Ge } from "./Ge";
+export { default as Gg } from "./Gg";
+export { default as Gh } from "./Gh";
+export { default as Gi } from "./Gi";
+export { default as Gl } from "./Gl";
+export { default as Gm } from "./Gm";
+export { default as Gn } from "./Gn";
+export { default as Gq } from "./Gq";
+export { default as Gr } from "./Gr";
+export { default as Gt } from "./Gt";
+export { default as Gu } from "./Gu";
+export { default as Gw } from "./Gw";
+export { default as Hk } from "./Hk";
+export { default as Hn } from "./Hn";
+export { default as Hr } from "./Hr";
+export { default as Ht } from "./Ht";
+export { default as Hu } from "./Hu";
+export { default as Id } from "./Id";
+export { default as Ie } from "./Ie";
+export { default as Il } from "./Il";
+export { default as Im } from "./Im";
+export { default as In } from "./In";
+export { default as Io } from "./Io";
+export { default as Iq } from "./Iq";
+export { default as Ir } from "./Ir";
+export { default as Is } from "./Is";
+export { default as It } from "./It";
+export { default as Je } from "./Je";
+export { default as Jm } from "./Jm";
+export { default as Jo } from "./Jo";
+export { default as Jp } from "./Jp";
+export { default as Ke } from "./Ke";
+export { default as Kg } from "./Kg";
+export { default as Kh } from "./Kh";
+export { default as Ki } from "./Ki";
+export { default as Km } from "./Km";
+export { default as Kn } from "./Kn";
+export { default as Kp } from "./Kp";
+export { default as Kr } from "./Kr";
+export { default as Kw } from "./Kw";
+export { default as Ky } from "./Ky";
+export { default as Kz } from "./Kz";
+export { default as La } from "./La";
+export { default as Lb } from "./Lb";
+export { default as Li } from "./Li";
+export { default as Lk } from "./Lk";
+export { default as Lr } from "./Lr";
+export { default as Ls } from "./Ls";
+export { default as Lt } from "./Lt";
+export { default as Lu } from "./Lu";
+export { default as Lv } from "./Lv";
+export { default as Ly } from "./Ly";
+export { default as Ma } from "./Ma";
+export { default as Mc } from "./Mc";
+export { default as Md } from "./Md";
+export { default as Me } from "./Me";
+export { default as Mg } from "./Mg";
+export { default as Mh } from "./Mh";
+export { default as Mk } from "./Mk";
+export { default as Ml } from "./Ml";
+export { default as Mm } from "./Mm";
+export { default as Mn } from "./Mn";
+export { default as Mo } from "./Mo";
+export { default as Mp } from "./Mp";
+export { default as Mq } from "./Mq";
+export { default as Mr } from "./Mr";
+export { default as Ms } from "./Ms";
+export { default as Mt } from "./Mt";
+export { default as Mu } from "./Mu";
+export { default as Mv } from "./Mv";
+export { default as Mw } from "./Mw";
+export { default as Mx } from "./Mx";
+export { default as My } from "./My";
+export { default as Mz } from "./Mz";
+export { default as Na } from "./Na";
+export { default as Nato } from "./Nato";
+export { default as Ne } from "./Ne";
+export { default as Nf } from "./Nf";
+export { default as Ng } from "./Ng";
+export { default as Ni } from "./Ni";
+export { default as Nl } from "./Nl";
+export { default as No } from "./No";
+export { default as Np } from "./Np";
+export { default as Nr } from "./Nr";
+export { default as Nu } from "./Nu";
+export { default as Nz } from "./Nz";
+export { default as Om } from "./Om";
+export { default as Pa } from "./Pa";
+export { default as Pe } from "./Pe";
+export { default as Pf } from "./Pf";
+export { default as Pg } from "./Pg";
+export { default as Ph } from "./Ph";
+export { default as Pk } from "./Pk";
+export { default as Pl } from "./Pl";
+export { default as Pn } from "./Pn";
+export { default as Pr } from "./Pr";
+export { default as Ps } from "./Ps";
+export { default as Pt } from "./Pt";
+export { default as Pw } from "./Pw";
+export { default as Py } from "./Py";
+export { default as Qa } from "./Qa";
+export { default as Ro } from "./Ro";
+export { default as Rs } from "./Rs";
+export { default as Ru } from "./Ru";
+export { default as Rw } from "./Rw";
+export { default as Sa } from "./Sa";
+export { default as Sb } from "./Sb";
+export { default as Sc } from "./Sc";
+export { default as Sd } from "./Sd";
+export { default as Se } from "./Se";
+export { default as Sg } from "./Sg";
+export { default as Si } from "./Si";
+export { default as Sk } from "./Sk";
+export { default as Sl } from "./Sl";
+export { default as Sm } from "./Sm";
+export { default as Sn } from "./Sn";
+export { default as So } from "./So";
+export { default as Sq } from "./Sq";
+export { default as Sr } from "./Sr";
+export { default as Ss } from "./Ss";
+export { default as St } from "./St";
+export { default as Sv } from "./Sv";
+export { default as Sx } from "./Sx";
+export { default as Sy } from "./Sy";
+export { default as Sz } from "./Sz";
+export { default as Tc } from "./Tc";
+export { default as Td } from "./Td";
+export { default as Tg } from "./Tg";
+export { default as Th } from "./Th";
+export { default as Tibet } from "./Tibet";
+export { default as Tj } from "./Tj";
+export { default as Tk } from "./Tk";
+export { default as Tm } from "./Tm";
+export { default as Tn } from "./Tn";
+export { default as To } from "./To";
+export { default as Tr } from "./Tr";
+export { default as Tt } from "./Tt";
+export { default as Tv } from "./Tv";
+export { default as Tw } from "./Tw";
+export { default as Tz } from "./Tz";
+export { default as Ua } from "./Ua";
+export { default as Ug } from "./Ug";
+export { default as Us } from "./Us";
+export { default as Uy } from "./Uy";
+export { default as Uz } from "./Uz";
+export { default as Ve } from "./Ve";
+export { default as Vi } from "./Vi";
+export { default as Vn } from "./Vn";
+export { default as Vu } from "./Vu";
+export { default as Ws } from "./Ws";
+export { default as Ye } from "./Ye";
+export { default as Za } from "./Za";
+export { default as Zm } from "./Zm";
+export { default as Zw } from "./Zw";

package/src/country-selector/index.ts

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

package/src/index.ts

@@ -0,0 +1,17 @@
+export * from "./breadcrumb";
+export * from "./use-breadcrumb";
+export * from "./country-selector";
+export * from "./input";
+export * from "./loader";
+export * from "./use-match-device";
+export * from "./use-match-resolution";
+export * from "./modal";
+export * from "./mount-react-hook";
+export * from "./pagination";
+export * from "./use-outside-alerter";
+export * from "./use-pagination";
+export * from "./use-scroll-to";
+export * from "./select";
+export * from "./table";
+export * from "./use-visible";
+export * from "./wizard";

package/src/input/index.ts

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

package/src/input/input.module.css

@@ -0,0 +1,71 @@
+.container {
+  --success-color: green;
+  --warning-color: orange;
+  --error-color: red;
+  --focus-color: blue;
+
+  position: relative;
+}
+
+.input-container {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+}
+
+.input {
+  padding: 10px;
+  width: 100%;
+  border: 0;
+  background-color: transparent;
+  outline: none;
+  z-index: 1;
+  color: black;
+
+  &:focus + .fieldset {
+    border-width: 2px;
+
+    &:not(:global(.success), :global(.warning), :global(.error)) {
+      border-color: var(--focus-color);
+    }
+  }
+}
+
+.fieldset {
+  border: 1px solid black;
+  border-radius: 5px;
+  position: absolute;
+  inset: -8.5px 0 0;
+  font-size: 15px;
+  margin: 0;
+
+  :global(&.success) {
+    border-color: var(--success-color);
+    color: var(--success-color);
+  }
+
+  :global(&.warning) {
+    border-color: var(--warning-color);
+    color: var(--warning-color);
+  }
+
+  :global(&.error) {
+    border-color: var(--error-color);
+    color: var(--error-color);
+  }
+}
+
+.legend {
+  padding: 0 5px;
+}
+
+.message-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 5px;
+}
+
+.message {
+  font-size: 14px;
+}

package/src/input/input.tsx

@@ -0,0 +1,38 @@
+import React, { CSSProperties } from "react";
+import clsx from "clsx";
+import { InputType, InputColors, InputStatus } from "./input.types";
+import styles from "./input.module.css";
+
+type Props = Exclude<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+  label: string;
+  type: InputType;
+  colors?: InputColors;
+  status?: InputStatus;
+  message?: string;
+};
+
+export const Input = ({ label, message, colors, status, ...rest }: Props) => {
+  const CSSVariables = {
+    "--success-color": colors?.success,
+    "--warning-color": colors?.warning,
+    "--error-color": colors?.error,
+    "--focus-color": colors?.focus,
+  } as CSSProperties;
+
+  return (
+    <div className={styles.container} style={CSSVariables}>
+      <div className={styles["input-container"]}>
+        <input className={clsx(styles.input, status)} {...rest} />
+        <fieldset className={clsx(styles.fieldset, status)}>
+          <legend className={styles.legend}>{label}</legend>
+        </fieldset>
+      </div>
+
+      {message && (
+        <div className={styles["message-container"]}>
+          <span className={styles.message}>{message}</span>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/input/input.types.ts

@@ -0,0 +1,10 @@
+export type InputType = "text" | "password";
+
+export type InputColors = {
+  focus: string;
+  success: string;
+  error: string;
+  warning: string;
+};
+
+export type InputStatus = "success" | "warning" | "error";

package/src/loader/index.ts

@@ -0,0 +1 @@
+export * from "./loader";

package/src/loader/loader.module.css

@@ -0,0 +1,40 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  overflow-y: auto;
+  z-index: 2;
+}
+
+.container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 50%;
+  color: #f9fbff;
+}
+
+.image-container {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+
+@keyframes loading {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.image {
+  animation: loading 3s linear infinite;
+  margin-bottom: 2rem;
+}

package/src/loader/loader.tsx

@@ -0,0 +1,30 @@
+import React, { ReactNode } from "react";
+import styles from "./loader.module.css";
+
+type LoaderProps = {
+  children: ReactNode;
+};
+
+type LoaderWithImageProps = {
+  src: string;
+  text: string;
+};
+
+export const Loader = (props: LoaderProps | LoaderWithImageProps) => {
+  const Root = ({ children }: LoaderProps) => (
+    <div className={styles.overlay}>
+      <div className={styles.container}>{children}</div>
+    </div>
+  );
+
+  const LoaderWithImage = ({ src, text }: LoaderWithImageProps) => (
+    <Root>
+      <div className={styles["image-container"]}>
+        <img className={styles.image} src={src} alt="loader-image"></img>
+        <span>{text}</span>
+      </div>
+    </Root>
+  );
+
+  return "children" in props ? Root(props) : LoaderWithImage(props);
+};

package/src/modal/index.ts

@@ -0,0 +1 @@
+export * from "./modal";

package/src/modal/modal.module.css

@@ -0,0 +1,22 @@
+.container {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  background-color: #f9fbff;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  z-index: 1;
+  margin: 5rem 0 5rem 0;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  overflow-y: auto;
+  z-index: 1;
+}

package/src/modal/modal.tsx

@@ -0,0 +1,27 @@
+import React, { ReactNode, useEffect, useRef } from "react";
+import styles from "./modal.module.css";
+import { useOutsideAlerter } from "..";
+
+type Props = {
+  children: ReactNode;
+  onClickedOutside?: () => void;
+};
+
+export const Modal = ({ children, onClickedOutside }: Props) => {
+  const ref = useRef(null);
+  const { hasClickedOutside } = useOutsideAlerter(ref);
+
+  useEffect(() => {
+    if (onClickedOutside && hasClickedOutside) {
+      onClickedOutside();
+    }
+  }, [hasClickedOutside]);
+
+  return (
+    <div className={styles.overlay}>
+      <div className={styles.container} ref={ref}>
+        {children}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from "./mount-react-hook";
+export * from "./mount-react-hook.types";

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 };
+};