@vincentgraul/react-components 1.0.40 → 1.0.41

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

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

package/src/use-outside-alerter/index.ts

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

package/src/use-outside-alerter/use-outside-alerter.tsx

@@ -1,29 +0,0 @@
-import { useEffect, RefObject, useState } from "react";
-import { OutsideAlerter } from "./use-outside-alerter.types";
-
-export const useOutsideAlerter = (ref: RefObject<HTMLElement>): OutsideAlerter => {
-  const [hasClickedOutside, setClickedOutside] = useState<boolean>(false);
-
-  const handleOnReset = () => {
-    setClickedOutside(false);
-  };
-
-  useEffect(() => {
-    const handleOnClickOutside = (event: MouseEvent) => {
-      if (event.target && ref.current) {
-        const value: boolean = !ref.current.contains(event.target as Node);
-
-        if (value !== hasClickedOutside) {
-          setClickedOutside(value);
-        }
-      }
-    };
-
-    document.addEventListener("mousedown", handleOnClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleOnClickOutside);
-    };
-  }, [ref, hasClickedOutside]);
-
-  return { hasClickedOutside, onReset: handleOnReset };
-};

package/src/use-outside-alerter/use-outside-alerter.types.ts

@@ -1,4 +0,0 @@
-export type OutsideAlerter = {
-  hasClickedOutside: boolean;
-  onReset: () => void;
-};

package/src/use-pagination/index.ts

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

package/src/use-pagination/use-pagination.ts

@@ -1,86 +0,0 @@
-import { useEffect, useState } from "react";
-import { PaginationData } from "./use-pagination.types";
-
-type Props = {
-  page: number;
-  totalRecords: number;
-  maxRecordsPerPage?: number;
-  itemNeighbours?: number;
-  minItems?: number;
-};
-
-/**
- * React hook to manage pagination.
- * @public
- * @param props - An object which multiple properties:
- * - page: the current page
- * - totalRecords: the total number of records
- * - maxRecordsPerPage: the maximum number of records displayed per page
- * - itemNeighbours: the maximum number of items (page indicator) beside the current item
- * - minItems: the minimum of items (page indicator)
- * @returns An object with multiples properties:
- * - page: the current page
- * - total: the total number of pages
- * - items: an array of numbers (represents the page indicators)
- * - maxRecordsPerPage: the maximum number of records displayed per page
- * - some functions to change the page (goToPage, goToFirst...)
- */
-export const usePagination = (props: Props): PaginationData => {
-  const { totalRecords, itemNeighbours = 2, minItems = 5, maxRecordsPerPage = 10 } = props;
-  const [page, setPage] = useState<number>(props.page);
-  const [total, setTotal] = useState<number>(0);
-  const [items, setItems] = useState<number[]>([]);
-
-  const generateItems = () => {
-    const items: number[] = [];
-    const from: number = Math.max(1, Math.min(page - itemNeighbours, total + 1 - minItems));
-    const to: number = Math.min(total, Math.max(minItems, page + itemNeighbours));
-
-    for (let i = from; i <= to; i++) {
-      items.push(i);
-    }
-
-    return items;
-  };
-
-  useEffect(() => {
-    setTotal(Math.ceil(totalRecords / maxRecordsPerPage));
-  }, [totalRecords, maxRecordsPerPage]);
-
-  useEffect(() => {
-    setItems(generateItems());
-  }, [page, total, itemNeighbours, minItems]);
-
-  const goToPage = (page: number) => {
-    const currentPage: number = Math.max(1, Math.min(page, total));
-    setPage(currentPage);
-  };
-
-  const goToFirst = () => {
-    goToPage(1);
-  };
-
-  const goToLeft = () => {
-    goToPage(page - 1);
-  };
-
-  const goToRight = () => {
-    goToPage(page + 1);
-  };
-
-  const goToLast = () => {
-    goToPage(total);
-  };
-
-  return {
-    page,
-    total,
-    items,
-    maxRecordsPerPage,
-    goToPage,
-    goToFirst,
-    goToLeft,
-    goToRight,
-    goToLast,
-  };
-};

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

@@ -1,11 +0,0 @@
-export type PaginationData = {
-  page: number;
-  total: number;
-  items: number[];
-  maxRecordsPerPage: number;
-  goToPage: (page: number) => void;
-  goToFirst: () => void;
-  goToLeft: () => void;
-  goToRight: () => void;
-  goToLast: () => void;
-};

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

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

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

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

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

package/src/use-visible/index.ts

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

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

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

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

package/src/wizard/wizard.tsx

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

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

package/stories/breadcrumb/breadcrumb.stories.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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