@vincentgraul/react-components 1.0.38 → 1.0.40

package/src/use-scroll-to/use-scroll-to.tsx

@@ -0,0 +1,25 @@
+import { RefObject } from "react";
+import { ScrollEvents } from "./use-scroll-to.types";
+
+/**
+ * React hook to scroll to an element.
+ * @public
+ * @param target - The target where we want to scroll.
+ * @returns An object which contains:
+ * - scrollToTop: function used to scroll to the top of the element
+ */
+export const useScrollTo = (target: RefObject<HTMLElement>): ScrollEvents => {
+  const isClientSide: boolean = typeof window !== "undefined";
+
+  if (!isClientSide) {
+    return { scrollToTop: () => null };
+  }
+
+  const scrollToTop = (): void => {
+    if (target.current) {
+      window.scrollTo(0, target.current.offsetTop);
+    }
+  };
+
+  return { scrollToTop };
+};

package/src/use-scroll-to/use-scroll-to.types.ts

@@ -0,0 +1,3 @@
+export type ScrollEvents = {
+  scrollToTop: () => void;
+};

package/src/use-visible/index.ts

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

package/src/use-visible/use-visible.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState, RefObject } from "react";
+
+/**
+ * React hook to know if an element is visible.
+ * @public
+ * @param target - The target where you want to identify its visibility.
+ * @returns The visibility of the target.
+ */
+export const useVisible = (target: RefObject<HTMLElement>): boolean => {
+  const [isVisible, setVisibility] = useState<boolean>(false);
+
+  const handleObserver = (entry: IntersectionObserverEntry) => {
+    setVisibility(entry.isIntersecting);
+  };
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => handleObserver(entry));
+
+    if (target && target.current) {
+      observer.observe(target.current);
+    }
+
+    return () => {
+      if (target && target.current) {
+        observer.unobserve(target.current);
+      }
+    };
+  }, [target]);
+
+  return isVisible;
+};

package/src/wizard/index.ts

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

package/src/wizard/wizard.tsx

@@ -0,0 +1,44 @@
+import React, { ReactElement, useEffect, useState } from "react";
+import { StepProps } from "./wizard.types";
+
+type Props = {
+  children: ReactElement[];
+  step?: number;
+  renderHeader?: (props: StepProps) => ReactElement;
+  renderFooter?: (props: StepProps) => ReactElement;
+};
+
+export const Wizard = (props: Props) => {
+  const { children, renderHeader, renderFooter } = props;
+  const [step, setStep] = useState(1);
+  const totalSteps = React.Children.count(children);
+  const [isFirstPage, setFirstPage] = useState(false);
+  const [isLastPage, setLastPage] = useState(false);
+
+  useEffect(() => {
+    if (props.step <= totalSteps) setStep(props.step);
+  }, [props.step]);
+
+  useEffect(() => {
+    setFirstPage(step === 1);
+    setLastPage(step === totalSteps);
+  }, [step]);
+
+  const currentPage: ReactElement = React.Children.toArray(children)[step - 1] as ReactElement;
+
+  const nextStep = () => {
+    if (step < totalSteps) setStep(step + 1);
+  };
+
+  const previousStep = () => {
+    if (step > 1) setStep(step - 1);
+  };
+
+  return (
+    <div>
+      {renderHeader({ step, previousStep, nextStep, isFirstPage, isLastPage })}
+      {React.cloneElement(currentPage)}
+      {renderFooter({ step, previousStep, nextStep, isFirstPage, isLastPage })}
+    </div>
+  );
+};

package/src/wizard/wizard.types.ts

@@ -0,0 +1,7 @@
+export type StepProps = {
+  step: number;
+  previousStep: () => void;
+  nextStep: () => void;
+  isFirstPage: boolean;
+  isLastPage: boolean;
+};

package/stories/breadcrumb/breadcrumb.stories.tsx

@@ -0,0 +1,21 @@
+import { useBreadcrumb, Breadcrumb } from "../../src";
+
+export default {
+  title: "useBreadcrumb",
+  component: useBreadcrumb,
+};
+
+export const Basic = () => {
+  return (
+    <Breadcrumb
+      url={
+        new URL(
+          "https://stackoverflow.com/questions/39334400/how-to-split-url-to-get-url-path-in-javascript?value=3&name=5",
+        )
+      }
+      onClick={(element) => {
+        console.log(element);
+      }}
+    ></Breadcrumb>
+  );
+};

package/stories/country-selector/country-selector.stories.tsx

@@ -0,0 +1,14 @@
+import { CountrySelector } from "../../src";
+
+export default {
+  title: "CountrySelector",
+  component: CountrySelector,
+};
+
+export const Basic = () => {
+  return <CountrySelector languages={["fr", "ye", "vu", "uz"]} />;
+};
+
+export const WithValue = () => {
+  return <CountrySelector value="vu" languages={["fr", "ye", "vu", "uz"]} />;
+};

package/stories/input/input.stories.tsx

@@ -0,0 +1,42 @@
+import { Input } from "../../src";
+
+export default {
+  title: "Input",
+  component: Input,
+};
+
+export const Basic = () => {
+  return (
+    <Input
+      name="firstname"
+      type="text"
+      label="firstname"
+      autoComplete="off"
+      colors={{
+        error: "red",
+        focus: "blue",
+        success: "green",
+        warning: "orange",
+      }}
+    />
+  );
+};
+
+export const WithMessage = () => {
+  return (
+    <Input
+      name="firstname"
+      type="text"
+      label="firstname"
+      message="firstname error"
+      status="error"
+      autoComplete="off"
+      colors={{
+        error: "red",
+        focus: "blue",
+        success: "green",
+        warning: "orange",
+      }}
+    />
+  );
+};

package/stories/loader/assets/white-loader.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="98px" height="102px" viewBox="0 0 98 102" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>loader</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-13" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="loader" transform="translate(-26.000000, -21.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="spinner-of-dots" transform="translate(73.323621, 72.737597) rotate(-134.000000) translate(-73.323621, -72.737597) translate(23.323621, 20.237597)">
+                <path d="M22.9250569,73.8797267 C20.3230068,73.8797267 18.1118451,74.790205 16.2906606,76.6111617 C14.4701595,78.433713 13.5592255,80.6444191 13.5592255,83.2464692 C13.5592255,85.8487472 14.4694761,88.0594533 16.2906606,89.8820046 C18.1125285,91.7029613 20.3236902,92.6134396 22.9250569,92.6134396 C25.4833713,92.6134396 27.6833713,91.7029613 29.5264237,89.8820046 C31.3687927,88.0617312 32.2899772,85.8487472 32.2899772,83.2464692 C32.2899772,80.6444191 31.3690205,78.4353075 29.5264237,76.6111617 C27.6831435,74.7917995 25.4833713,73.8797267 22.9250569,73.8797267 Z" id="Path"></path>
+                <path d="M20.8439636,54.109795 C20.8439636,51.2482916 19.8255125,48.7993166 17.7874715,46.7596811 C15.7496583,44.7218679 13.2995444,43.7031891 10.438041,43.7031891 C7.57630979,43.7031891 5.12665148,44.7220957 3.08861048,46.7596811 C1.05102506,48.7977221 0.0323462415,51.2473804 0.0323462415,54.109795 C0.0323462415,56.9708428 1.05079727,59.4193622 3.08861048,61.4578588 C5.12665148,63.4963554 7.57630979,64.515262 10.438041,64.515262 C13.2995444,64.515262 15.7496583,63.4963554 17.7874715,61.4578588 C19.8255125,59.4207289 20.8439636,56.9708428 20.8439636,54.109795 Z" id="Path"></path>
+                <path d="M81.1968109,30.1776765 C82.6264237,30.1776765 83.853303,29.667426 84.8708428,28.6489749 C85.8897494,27.6296128 86.4002278,26.404328 86.4002278,24.9738041 C86.4002278,23.5425968 85.8897494,22.3182232 84.8708428,21.2995444 C83.8526196,20.2801822 82.6264237,19.7708428 81.1968109,19.7708428 C79.7656036,19.7708428 78.5400911,20.2810934 77.5211845,21.2995444 C76.5029613,22.318451 75.9933941,23.5425968 75.9933941,24.9738041 C75.9933941,26.4050114 76.5029613,27.6296128 77.5211845,28.6489749 C78.5400911,29.6683371 79.7656036,30.1776765 81.1968109,30.1776765 Z" id="Path"></path>
+                <path d="M22.9257403,13.5280182 C19.7601367,13.5280182 17.0612756,14.6446469 14.828246,16.877221 C12.5949886,19.109795 11.4790433,21.8088838 11.4790433,24.9738041 C11.4790433,28.1398633 12.5949886,30.8378132 14.828246,33.0712984 C17.061959,35.3045558 19.76082,36.4209567 22.9257403,36.4209567 C26.0906606,36.4209567 28.7897494,35.3038724 31.0223235,33.0712984 C33.2548975,30.8378132 34.3715262,28.13918 34.3715262,24.9738041 C34.3715262,21.8088838 33.2548975,19.109795 31.0223235,16.877221 C28.7897494,14.6446469 26.0906606,13.5280182 22.9257403,13.5280182 Z" id="Path"></path>
+                <path d="M98.1056948,49.6867882 C96.8920273,48.4726651 95.4179954,47.866287 93.6842825,47.866287 C91.9489749,47.866287 90.4749431,48.4726651 89.2612756,49.6867882 C88.0482916,50.9009112 87.4419134,52.3753986 87.4419134,54.1107062 C87.4419134,55.8441913 88.0482916,57.3207289 89.2612756,58.5321185 C90.4756264,59.746697 91.9489749,60.3530752 93.6842825,60.3530752 C95.4179954,60.3530752 96.8929385,59.746697 98.1056948,58.5321185 C99.3202733,57.3193622 99.9259681,55.8441913 99.9259681,54.1107062 C99.9259681,52.3763098 99.3211845,50.9015945 98.1056948,49.6867882 Z" id="Path"></path>
+                <path d="M81.1968109,75.961959 C79.201139,75.961959 77.4886105,76.6767654 76.0574032,78.1079727 C74.6277904,79.5375854 73.9120729,81.2510251 73.9120729,83.246697 C73.9120729,85.2407745 74.6277904,86.9542141 76.0574032,88.3856492 C77.4886105,89.8166287 79.2013667,90.5307517 81.1968109,90.5307517 C83.1908884,90.5307517 84.9034169,89.815262 86.3346241,88.3856492 C87.7658314,86.9544419 88.4808656,85.2416856 88.4808656,83.246697 C88.4808656,81.2510251 87.7658314,79.5394077 86.3346241,78.1079727 C84.9036446,76.6765376 83.1908884,75.961959 81.1968109,75.961959 Z" id="Path"></path>
+                <path d="M52.06082,87.4070615 C49.7628702,87.4070615 47.8006834,88.2216401 46.1738041,89.847836 C44.5485194,91.4740319 43.7353075,93.4350797 43.7353075,95.7332574 C43.7353075,98.0314351 44.5476082,99.9927107 46.1738041,101.618679 C47.8006834,103.244875 49.761959,104.05877 52.06082,104.05877 C54.3589977,104.05877 56.3202733,103.244875 57.9464692,101.618679 C59.5726651,99.9927107 60.3856492,98.0314351 60.3856492,95.7332574 C60.3856492,93.4350797 59.5726651,91.4740319 57.9464692,89.847836 C56.3202733,88.2216401 54.3589977,87.4070615 52.06082,87.4070615 Z" id="Path"></path>
+                <path d="M52.06082,0 C48.5927107,0 45.6430524,1.21343964 43.2148064,3.64145786 C40.7872437,6.06970387 39.5733485,9.01867882 39.5733485,12.4870159 C39.5733485,15.9555809 40.7867882,18.9031891 43.2148064,21.3316629 C45.6430524,23.7592255 48.5920273,24.9733485 52.06082,24.9733485 C55.5305239,24.9733485 58.4781321,23.7599089 60.905467,21.3316629 C63.3328018,18.904328 64.546697,15.9555809 64.546697,12.4870159 C64.546697,9.01890661 63.3328018,6.07061503 60.905467,3.64145786 C58.4781321,1.21412301 55.5305239,0 52.06082,0 Z" id="Path"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/stories/loader/loader.stories.tsx

@@ -0,0 +1,12 @@
+import { Loader } from "../../src";
+
+export default {
+  title: "Loader",
+  component: Loader,
+};
+
+export const Basic = () => <Loader>In progress...</Loader>;
+
+export const WithImage = () => (
+  <Loader src="../../stories/assets/loader/white-loader.svg" text="In progress..." />
+);

package/stories/modal/modal.stories.tsx

@@ -0,0 +1,21 @@
+import { useState } from "react";
+import { Modal } from "../../src";
+
+export default {
+  title: "Modal",
+  component: Modal,
+};
+
+export const Basic = () => {
+  const [isOpen, setOpen] = useState<boolean>(false);
+  return (
+    <div>
+      <button onClick={() => setOpen(true)}>Click</button>
+      {isOpen && (
+        <Modal onClickedOutside={() => setOpen(false)}>
+          <h1>Bienvenue</h1>
+        </Modal>
+      )}
+    </div>
+  );
+};

package/stories/pagination/assets/double-left-arrow.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="44" height="44" viewBox="228 227 44 44" xml:space="preserve">
+<desc>Created with Fabric.js 4.6.0</desc>
+<defs>
+</defs>
+<g transform="matrix(-1 0 0 1 256.5 249.65)" id="owGTspzSba8jfBa7HBr0v"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-9, -15.65)" d="M 17.3523845 17.2019001 L 3.77482194 30.6618545 C 2.91112496 31.5185123 1.51078835 31.5185123 0.647510672 30.6618545 C -0.215836891 29.8059588 -0.215836891 28.4177782 0.647510672 27.5619518 L 12.6615574 15.6519488 L 0.647860092 3.74236142 C -0.21548747 2.8861193 -0.21548747 1.49807731 0.647860092 0.642181593 C 1.51120765 -0.214060531 2.91147438 -0.214060531 3.77517136 0.642181593 L 17.3527339 14.1023438 C 17.7844077 14.5304995 18 15.0910509 18 15.6518795 C 18 16.2129851 17.7839884 16.7739522 17.3523845 17.2019001 Z" stroke-linecap="round" />
+</g>
+<g transform="matrix(-1 0 0 1 243.5 249.65)" id="vGdk0Ujh0hJIq-DT8PVot"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-9, -15.65)" d="M 17.3523845 17.2019001 L 3.77482194 30.6618545 C 2.91112496 31.5185123 1.51078835 31.5185123 0.647510672 30.6618545 C -0.215836891 29.8059588 -0.215836891 28.4177782 0.647510672 27.5619518 L 12.6615574 15.6519488 L 0.647860092 3.74236142 C -0.21548747 2.8861193 -0.21548747 1.49807731 0.647860092 0.642181593 C 1.51120765 -0.214060531 2.91147438 -0.214060531 3.77517136 0.642181593 L 17.3527339 14.1023438 C 17.7844077 14.5304995 18 15.0910509 18 15.6518795 C 18 16.2129851 17.7839884 16.7739522 17.3523845 17.2019001 Z" stroke-linecap="round" />
+</g>
+</svg>

package/stories/pagination/assets/double-right-arrow.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="44" height="44" viewBox="228 227 44 44" xml:space="preserve">
+<desc>Created with Fabric.js 4.6.0</desc>
+<defs>
+</defs>
+<g transform="matrix(1 0 0 1 243.5 249.65)" id="W9YXztRPzeX53cvyfGAaY"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-9, -15.65)" d="M 17.3523845 17.2019001 L 3.77482194 30.6618545 C 2.91112496 31.5185123 1.51078835 31.5185123 0.647510672 30.6618545 C -0.215836891 29.8059588 -0.215836891 28.4177782 0.647510672 27.5619518 L 12.6615574 15.6519488 L 0.647860092 3.74236142 C -0.21548747 2.8861193 -0.21548747 1.49807731 0.647860092 0.642181593 C 1.51120765 -0.214060531 2.91147438 -0.214060531 3.77517136 0.642181593 L 17.3527339 14.1023438 C 17.7844077 14.5304995 18 15.0910509 18 15.6518795 C 18 16.2129851 17.7839884 16.7739522 17.3523845 17.2019001 Z" stroke-linecap="round" />
+</g>
+<g transform="matrix(1 0 0 1 256.5 249.65)" id="FLRMreggRPo2fwdIwByo4"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-9, -15.65)" d="M 17.3523845 17.2019001 L 3.77482194 30.6618545 C 2.91112496 31.5185123 1.51078835 31.5185123 0.647510672 30.6618545 C -0.215836891 29.8059588 -0.215836891 28.4177782 0.647510672 27.5619518 L 12.6615574 15.6519488 L 0.647860092 3.74236142 C -0.21548747 2.8861193 -0.21548747 1.49807731 0.647860092 0.642181593 C 1.51120765 -0.214060531 2.91147438 -0.214060531 3.77517136 0.642181593 L 17.3527339 14.1023438 C 17.7844077 14.5304995 18 15.0910509 18 15.6518795 C 18 16.2129851 17.7839884 16.7739522 17.3523845 17.2019001 Z" stroke-linecap="round" />
+</g>
+</svg>

package/stories/pagination/assets/single-left-arrow.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="30" height="43" viewBox="235 228 30 43" xml:space="preserve">
+<desc>Created with Fabric.js 4.6.0</desc>
+<defs>
+</defs>
+<g transform="matrix(-1 0 0 1 250 250)" id="pu0cgsJQk_zRNHFs5F4jS"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-9, -15.65)" d="M 17.3523845 17.2019001 L 3.77482194 30.6618545 C 2.91112496 31.5185123 1.51078835 31.5185123 0.647510672 30.6618545 C -0.215836891 29.8059588 -0.215836891 28.4177782 0.647510672 27.5619518 L 12.6615574 15.6519488 L 0.647860092 3.74236142 C -0.21548747 2.8861193 -0.21548747 1.49807731 0.647860092 0.642181593 C 1.51120765 -0.214060531 2.91147438 -0.214060531 3.77517136 0.642181593 L 17.3527339 14.1023438 C 17.7844077 14.5304995 18 15.0910509 18 15.6518795 C 18 16.2129851 17.7839884 16.7739522 17.3523845 17.2019001 Z" stroke-linecap="round" />
+</g>
+</svg>

package/stories/pagination/assets/single-right-arrow.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="30" height="43" viewBox="235 228 30 43" xml:space="preserve">
+<desc>Created with Fabric.js 4.6.0</desc>
+<defs>
+</defs>
+<g transform="matrix(1 0 0 1 250 250)" id="5cVC0zuSDvMfcCq1Pt2kU"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-9, -15.65)" d="M 17.3523845 17.2019001 L 3.77482194 30.6618545 C 2.91112496 31.5185123 1.51078835 31.5185123 0.647510672 30.6618545 C -0.215836891 29.8059588 -0.215836891 28.4177782 0.647510672 27.5619518 L 12.6615574 15.6519488 L 0.647860092 3.74236142 C -0.21548747 2.8861193 -0.21548747 1.49807731 0.647860092 0.642181593 C 1.51120765 -0.214060531 2.91147438 -0.214060531 3.77517136 0.642181593 L 17.3527339 14.1023438 C 17.7844077 14.5304995 18 15.0910509 18 15.6518795 C 18 16.2129851 17.7839884 16.7739522 17.3523845 17.2019001 Z" stroke-linecap="round" />
+</g>
+</svg>

package/stories/pagination/pagination.stories.tsx

@@ -0,0 +1,89 @@
+import { usePagination, Pagination, ArrowPosition } from "../../src";
+
+export default {
+  title: "Pagination",
+  component: Pagination,
+};
+
+export const Basic = () => {
+  const pagination = usePagination({ page: 1, totalRecords: 15 });
+  return <Pagination {...pagination} />;
+};
+
+export const WithOnePage = () => {
+  const pagination = usePagination({ page: 1, totalRecords: 5 });
+  return <Pagination {...pagination} />;
+};
+
+export const WithMultiplePages = () => {
+  const pagination = usePagination({ page: 1, totalRecords: 150 });
+  return <Pagination {...pagination} />;
+};
+
+export const WithSingleArrow = () => {
+  const pagination = usePagination({ page: 1, totalRecords: 150 });
+
+  return (
+    <Pagination
+      {...pagination}
+      renderSingleArrow={(position: ArrowPosition) => (position === ArrowPosition.LEFT ? "<" : ">")}
+    />
+  );
+};
+
+export const WithMultipleArrow = () => {
+  const pagination = usePagination({ page: 1, totalRecords: 150 });
+
+  return (
+    <Pagination
+      {...pagination}
+      renderDoubleArrow={(position: ArrowPosition) =>
+        position === ArrowPosition.LEFT ? "<<" : ">>"
+      }
+    />
+  );
+};
+
+export const WithSingleAndMultipleArrows = () => {
+  const pagination = usePagination({ page: 1, totalRecords: 150 });
+
+  return (
+    <Pagination
+      {...pagination}
+      renderSingleArrow={(position: ArrowPosition) => (position === ArrowPosition.LEFT ? "<" : ">")}
+      renderDoubleArrow={(position: ArrowPosition) =>
+        position === ArrowPosition.LEFT ? "<<" : ">>"
+      }
+    />
+  );
+};
+
+export const WithSingleAndMultipleArrowsImage = () => {
+  const pagination = usePagination({ page: 1, totalRecords: 150 });
+
+  return (
+    <Pagination
+      {...pagination}
+      renderSingleArrow={(position: ArrowPosition) => (
+        <img
+          style={{ minWidth: 0, minHeight: 0, width: "0.5rem" }}
+          src={
+            position === ArrowPosition.LEFT
+              ? "./assets/single-left-arrow.svg"
+              : "./assets/single-right-arrow.svg"
+          }
+        />
+      )}
+      renderDoubleArrow={(position: ArrowPosition) => (
+        <img
+          style={{ minWidth: 0, minHeight: 0, width: "0.8rem" }}
+          src={
+            position === ArrowPosition.LEFT
+              ? "./assets/double-left-arrow.svg"
+              : "./assets/double-right-arrow.svg"
+          }
+        />
+      )}
+    />
+  );
+};

package/stories/select/select.stories.tsx

@@ -0,0 +1,33 @@
+import { Select } from "../../src";
+
+export default {
+  title: "Select",
+  component: Select,
+};
+
+export const Basic = () => {
+  return (
+    <Select
+      options={[
+        { label: "France", value: "fr" },
+        { label: "England", value: "en" },
+        { label: "Italy", value: "it" },
+        { label: "Scotland", value: "sc" },
+      ]}
+    />
+  );
+};
+
+export const WithSelectedOption = () => {
+  return (
+    <Select
+      selectedValue="it"
+      options={[
+        { label: "France", value: "fr" },
+        { label: "England", value: "en" },
+        { label: "Italy", value: "it" },
+        { label: "Scotland", value: "sc" },
+      ]}
+    />
+  );
+};

package/stories/table/assets/double-left-arrow.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="44" height="44" viewBox="228 227 44 44" xml:space="preserve">
+<desc>Created with Fabric.js 4.6.0</desc>
+<defs>
+</defs>
+<g transform="matrix(-1 0 0 1 256.5 249.65)" id="owGTspzSba8jfBa7HBr0v"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-9, -15.65)" d="M 17.3523845 17.2019001 L 3.77482194 30.6618545 C 2.91112496 31.5185123 1.51078835 31.5185123 0.647510672 30.6618545 C -0.215836891 29.8059588 -0.215836891 28.4177782 0.647510672 27.5619518 L 12.6615574 15.6519488 L 0.647860092 3.74236142 C -0.21548747 2.8861193 -0.21548747 1.49807731 0.647860092 0.642181593 C 1.51120765 -0.214060531 2.91147438 -0.214060531 3.77517136 0.642181593 L 17.3527339 14.1023438 C 17.7844077 14.5304995 18 15.0910509 18 15.6518795 C 18 16.2129851 17.7839884 16.7739522 17.3523845 17.2019001 Z" stroke-linecap="round" />
+</g>
+<g transform="matrix(-1 0 0 1 243.5 249.65)" id="vGdk0Ujh0hJIq-DT8PVot"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-9, -15.65)" d="M 17.3523845 17.2019001 L 3.77482194 30.6618545 C 2.91112496 31.5185123 1.51078835 31.5185123 0.647510672 30.6618545 C -0.215836891 29.8059588 -0.215836891 28.4177782 0.647510672 27.5619518 L 12.6615574 15.6519488 L 0.647860092 3.74236142 C -0.21548747 2.8861193 -0.21548747 1.49807731 0.647860092 0.642181593 C 1.51120765 -0.214060531 2.91147438 -0.214060531 3.77517136 0.642181593 L 17.3527339 14.1023438 C 17.7844077 14.5304995 18 15.0910509 18 15.6518795 C 18 16.2129851 17.7839884 16.7739522 17.3523845 17.2019001 Z" stroke-linecap="round" />
+</g>
+</svg>

package/stories/table/assets/double-right-arrow.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="44" height="44" viewBox="228 227 44 44" xml:space="preserve">
+<desc>Created with Fabric.js 4.6.0</desc>
+<defs>
+</defs>
+<g transform="matrix(1 0 0 1 243.5 249.65)" id="W9YXztRPzeX53cvyfGAaY"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-9, -15.65)" d="M 17.3523845 17.2019001 L 3.77482194 30.6618545 C 2.91112496 31.5185123 1.51078835 31.5185123 0.647510672 30.6618545 C -0.215836891 29.8059588 -0.215836891 28.4177782 0.647510672 27.5619518 L 12.6615574 15.6519488 L 0.647860092 3.74236142 C -0.21548747 2.8861193 -0.21548747 1.49807731 0.647860092 0.642181593 C 1.51120765 -0.214060531 2.91147438 -0.214060531 3.77517136 0.642181593 L 17.3527339 14.1023438 C 17.7844077 14.5304995 18 15.0910509 18 15.6518795 C 18 16.2129851 17.7839884 16.7739522 17.3523845 17.2019001 Z" stroke-linecap="round" />
+</g>
+<g transform="matrix(1 0 0 1 256.5 249.65)" id="FLRMreggRPo2fwdIwByo4"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-9, -15.65)" d="M 17.3523845 17.2019001 L 3.77482194 30.6618545 C 2.91112496 31.5185123 1.51078835 31.5185123 0.647510672 30.6618545 C -0.215836891 29.8059588 -0.215836891 28.4177782 0.647510672 27.5619518 L 12.6615574 15.6519488 L 0.647860092 3.74236142 C -0.21548747 2.8861193 -0.21548747 1.49807731 0.647860092 0.642181593 C 1.51120765 -0.214060531 2.91147438 -0.214060531 3.77517136 0.642181593 L 17.3527339 14.1023438 C 17.7844077 14.5304995 18 15.0910509 18 15.6518795 C 18 16.2129851 17.7839884 16.7739522 17.3523845 17.2019001 Z" stroke-linecap="round" />
+</g>
+</svg>

package/stories/table/assets/single-left-arrow.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="30" height="43" viewBox="235 228 30 43" xml:space="preserve">
+<desc>Created with Fabric.js 4.6.0</desc>
+<defs>
+</defs>
+<g transform="matrix(-1 0 0 1 250 250)" id="pu0cgsJQk_zRNHFs5F4jS"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-9, -15.65)" d="M 17.3523845 17.2019001 L 3.77482194 30.6618545 C 2.91112496 31.5185123 1.51078835 31.5185123 0.647510672 30.6618545 C -0.215836891 29.8059588 -0.215836891 28.4177782 0.647510672 27.5619518 L 12.6615574 15.6519488 L 0.647860092 3.74236142 C -0.21548747 2.8861193 -0.21548747 1.49807731 0.647860092 0.642181593 C 1.51120765 -0.214060531 2.91147438 -0.214060531 3.77517136 0.642181593 L 17.3527339 14.1023438 C 17.7844077 14.5304995 18 15.0910509 18 15.6518795 C 18 16.2129851 17.7839884 16.7739522 17.3523845 17.2019001 Z" stroke-linecap="round" />
+</g>
+</svg>

package/stories/table/assets/single-right-arrow.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="30" height="43" viewBox="235 228 30 43" xml:space="preserve">
+<desc>Created with Fabric.js 4.6.0</desc>
+<defs>
+</defs>
+<g transform="matrix(1 0 0 1 250 250)" id="5cVC0zuSDvMfcCq1Pt2kU"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-9, -15.65)" d="M 17.3523845 17.2019001 L 3.77482194 30.6618545 C 2.91112496 31.5185123 1.51078835 31.5185123 0.647510672 30.6618545 C -0.215836891 29.8059588 -0.215836891 28.4177782 0.647510672 27.5619518 L 12.6615574 15.6519488 L 0.647860092 3.74236142 C -0.21548747 2.8861193 -0.21548747 1.49807731 0.647860092 0.642181593 C 1.51120765 -0.214060531 2.91147438 -0.214060531 3.77517136 0.642181593 L 17.3527339 14.1023438 C 17.7844077 14.5304995 18 15.0910509 18 15.6518795 C 18 16.2129851 17.7839884 16.7739522 17.3523845 17.2019001 Z" stroke-linecap="round" />
+</g>
+</svg>