@vincentgraul/react-components 1.0.40 → 1.0.41

package/stories/table/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/table/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/table/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/table/table.stories.tsx

@@ -1,219 +0,0 @@
-import { useState, useEffect, PropsWithChildren } from "react";
-import { Table, Column, Th, Td, Tr, usePagination, Pagination, ArrowPosition } from "../../src";
-
-export default {
-  title: "Table",
-  component: Table,
-};
-
-const columns: Column[] = [
-  { name: "firstname", label: "Firstname" },
-  { name: "lastname", label: "Lastname" },
-  { name: "age", label: "Age" },
-  { name: "sex", label: "Sex" },
-];
-
-const records = [
-  { lastname: "Dupont", firstname: "Jean", sex: "M", age: 28 },
-  { firstname: "Bernard", lastname: "Durant", age: 43, sex: "M" },
-];
-
-export const Basic = () => {
-  return <Table columns={columns} records={records} />;
-};
-
-export const WithUnknownColumn = () => {
-  const records = [
-    { lastname: "Dupont", firstname: "Jean", city: "Paris", sex: "M", age: 28 },
-    { firstname: "Bernard", lastname: "Durant", age: 43, sex: "M", country: "France" },
-  ];
-
-  return <Table columns={columns} records={records} />;
-};
-
-export const WithCustomColumnsRow = () => {
-  return (
-    <Table columns={columns} records={records} renderColumnsRow={(columns) => <Tr>{columns}</Tr>} />
-  );
-};
-
-export const WithCustomColumnsCell = () => {
-  return (
-    <Table
-      columns={columns}
-      records={records}
-      renderColumnsCell={(columns, key) => <Th key={key}>- {columns.name} -</Th>}
-    />
-  );
-};
-
-export const WithCustomRecordsRow = () => {
-  return (
-    <Table
-      columns={columns}
-      records={records}
-      renderRecordsRow={(cells, key) => <Tr key={key}>{cells}</Tr>}
-    />
-  );
-};
-
-export const WithCustomRecordsCell = () => {
-  return (
-    <Table
-      columns={columns}
-      records={records}
-      renderRecordsCell={(cell, key) => <Th key={key}>* {cell} *</Th>}
-    />
-  );
-};
-
-export const WithDefaultRecordsEmptyCell = () => {
-  const records = [
-    { lastname: "Dupont", firstname: "Jean", age: 28 },
-    { lastname: "Durant", age: 43, sex: "M" },
-  ];
-
-  return <Table columns={columns} records={records} />;
-};
-
-export const WithCustomRecordsEmptyCell = () => {
-  const records = [
-    { lastname: "Dupont", firstname: "Jean", age: 28 },
-    { lastname: "Durant", age: 43, sex: "M" },
-  ];
-
-  return (
-    <Table
-      columns={columns}
-      records={records}
-      renderRecordsEmptyCell={(key: string) => <Td key={key}>-</Td>}
-    />
-  );
-};
-
-export const WithHeader = () => {
-  return (
-    <Table
-      columns={columns}
-      records={records}
-      renderHeader={() => (
-        <div
-          style={{
-            backgroundColor: "black",
-            color: "white",
-            marginBottom: "2vw",
-            padding: "0.2vw 1.5vw",
-          }}
-        >
-          Users data
-        </div>
-      )}
-    />
-  );
-};
-
-export const WithFooter = () => {
-  return (
-    <Table
-      columns={columns}
-      records={records}
-      renderFooter={() => (
-        <div
-          style={{
-            backgroundColor: "black",
-            color: "white",
-            marginTop: "2vw",
-            padding: "0.2vw 1.5vw",
-          }}
-        >
-          Total: {records.length} records
-        </div>
-      )}
-    />
-  );
-};
-
-export const WithNoRecords = () => {
-  const Block = ({ children }: PropsWithChildren) => (
-    <div style={{ backgroundColor: "black", color: "white", padding: "0.2vw 1.5vw" }}>
-      {children}
-    </div>
-  );
-
-  return (
-    <Table
-      columns={columns}
-      records={[]}
-      renderHeader={() => <Block>Users data</Block>}
-      renderFooter={() => <Block>Coypright 1990 - 2021</Block>}
-      renderNoRecords={() => <div style={{ margin: "2vw 0", textAlign: "center" }}>No data</div>}
-    />
-  );
-};
-
-export const Advanced = () => {
-  const [advancedTotalRecords, setAdvancedTotalRecords] = useState(records);
-  const [advancedRecords, setAdvancedRecords] = useState<typeof records>([]);
-  const pagination = usePagination({ page: 1, totalRecords: advancedTotalRecords.length });
-
-  const handleAddRecord = () => {
-    setAdvancedTotalRecords([...advancedTotalRecords, advancedTotalRecords[0]]);
-  };
-
-  useEffect(() => {
-    const offset = (pagination.page - 1) * pagination.maxRecordsPerPage;
-    setAdvancedRecords(advancedTotalRecords.slice(offset, offset + pagination.maxRecordsPerPage));
-  }, [advancedTotalRecords, pagination.page]);
-
-  const Block = ({ children }: PropsWithChildren) => (
-    <div
-      style={{ backgroundColor: "black", color: "white", padding: "1vw 0", textAlign: "center" }}
-    >
-      {children}
-    </div>
-  );
-
-  return (
-    <Table
-      columns={columns}
-      records={advancedRecords}
-      renderHeader={() => (
-        <Block>
-          <button
-            style={{ backgroundColor: "white", border: "none", width: "5vw", cursor: "pointer" }}
-            onClick={handleAddRecord}
-          >
-            Add
-          </button>
-        </Block>
-      )}
-      renderFooter={() => (
-        <Block>
-          <Pagination
-            {...pagination}
-            renderSingleArrow={(position: ArrowPosition) => (
-              <img
-                style={{ minWidth: 0, minHeight: 0, width: "0.5rem" }}
-                src={
-                  position === ArrowPosition.LEFT
-                    ? require("./assets/single-left-arrow.svg")
-                    : require("./assets/single-right-arrow.svg")
-                }
-              />
-            )}
-            renderDoubleArrow={(position: ArrowPosition) => (
-              <img
-                style={{ minWidth: 0, minHeight: 0, width: "0.8rem" }}
-                src={
-                  position === ArrowPosition.LEFT
-                    ? require("./assets/double-left-arrow.svg")
-                    : require("./assets/double-right-arrow.svg")
-                }
-              />
-            )}
-          />
-        </Block>
-      )}
-    />
-  );
-};

package/stories/use-match-device/use-match-device.stories.tsx

@@ -1,22 +0,0 @@
-import { useMatchDevice, Device } from "../../src";
-
-export default {
-  title: "useMatchDevice",
-  component: useMatchDevice,
-};
-
-export const Basic = () => {
-  const device: Device = useMatchDevice(navigator.userAgent);
-
-  return (
-    <div>
-      <p>Device informations (based on user agent):</p>
-      <ul>
-        <li>{`isMobile: ${device.isMobile}`}</li>
-        <li>{`isTablet: ${device.isTablet}`}</li>
-        <li>{`isMobileOrTablet: ${device.isMobileOrTablet}`}</li>
-        <li>{`isDesktop: ${device.isDesktop}`}</li>
-      </ul>
-    </div>
-  );
-};

package/stories/use-match-resolution/use-match-resolution.stories.tsx

@@ -1,31 +0,0 @@
-import { useMatchResolution } from "../../src";
-
-export default {
-  title: "useMatchResolution",
-  component: useMatchResolution,
-};
-
-export const Basic = () => {
-  const { resolution } = useMatchResolution();
-
-  return (
-    <div>
-      <p>Screen resolutions:</p>
-      <ul>
-        <li>{`isDesktop: ${resolution.isDesktop}`}</li>
-        <li>{`isLaptop: ${resolution.isLaptop}`}</li>
-        <li>{`isLaptopOrUpper: ${resolution.isLaptopOrUpper}`}</li>
-        <li>{`isLaptopOrLower: ${resolution.isLaptopOrLower}`}</li>
-        <li>{`isTablet: ${resolution.isTablet}`}</li>
-        <li>{`isTabletOrUpper: ${resolution.isTabletOrUpper}`}</li>
-        <li>{`isTabletOrLower: ${resolution.isTabletOrLower}`}</li>
-        <li>{`isLargeMobile: ${resolution.isLargeMobile}`}</li>
-        <li>{`isLargeMobileOrUpper: ${resolution.isLargeMobileOrUpper}`}</li>
-        <li>{`isLargeMobileOrLower: ${resolution.isLargeMobileOrLower}`}</li>
-        <li>{`isMobile: ${resolution.isMobile}`}</li>
-        <li>{`isPortrait: ${resolution.isPortrait}`}</li>
-        <li>{`isLandscape: ${resolution.isLandscape}`}</li>
-      </ul>
-    </div>
-  );
-};

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

@@ -1,19 +0,0 @@
-import { useRef } from "react";
-import { useOutsideAlerter } from "../../src";
-
-export default {
-  title: "useOutsideAlerter",
-  component: useOutsideAlerter,
-};
-
-export const Basic = () => {
-  const ref = useRef(null);
-  const { hasClickedOutside } = useOutsideAlerter(ref);
-
-  return (
-    <div>
-      <p>Has clicked outside: {hasClickedOutside.toString()}</p>
-      <p ref={ref}>Click on the text</p>
-    </div>
-  );
-};

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

@@ -1,74 +0,0 @@
-import { useRef } from "react";
-import { useScrollTo } from "../../src";
-
-export default {
-  title: "useScrollTo",
-  component: useScrollTo,
-};
-
-export const Basic = () => {
-  const elementRef = useRef(null);
-  const { scrollToTop } = useScrollTo(elementRef);
-
-  return (
-    <div>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et tortor rutrum,
-        sollicitudin neque eu, mollis mi. Mauris mollis neque eu purus volutpat, sed sollicitudin
-        risus placerat. Proin ornare magna in nisi ullamcorper, a pharetra velit ultricies. Ut
-        tincidunt tellus et ex elementum scelerisque. Integer faucibus, erat nec pellentesque
-        commodo, ligula turpis egestas lacus, at sagittis quam ante non ex. Morbi cursus, turpis
-        auctor tempus venenatis, leo sem lacinia enim, tristique semper urna diam sed magna. Cras
-        vitae tortor est. Cras vitae mattis sapien. Mauris hendrerit mollis egestas. Nulla augue
-        eros, vestibulum in mollis et, ultricies at sem. Vivamus sed pretium elit, id vestibulum
-        justo. Nam sed quam ex. Nam convallis augue et lorem accumsan, molestie bibendum erat
-        bibendum. Morbi varius, dui sed viverra eleifend, nunc mauris rhoncus ligula, non feugiat
-        sem urna sit amet metus. Sed in ante nisl. Vestibulum ac risus ipsum. Duis quis lacus magna.
-        Maecenas at justo neque. Quisque posuere mi quis fringilla dapibus. Nulla non lorem
-        consectetur, egestas est in, semper arcu. Praesent et nunc non nisl tincidunt dignissim.
-        Curabitur porta purus non porttitor viverra. Suspendisse potenti. Pellentesque id leo in
-        metus tempor cursus. Donec in ultrices ligula, in facilisis lacus. Cras eros tellus, ornare
-        pulvinar congue eu, viverra nec ipsum. Proin laoreet arcu ac imperdiet pretium. Mauris
-        placerat pulvinar mauris, ac convallis enim semper ac. Aenean et mi eget velit egestas
-        commodo a nec metus. Curabitur in mi quis lacus tempus aliquet. Aliquam imperdiet, lorem a
-        sagittis lobortis, nisi purus accumsan orci, in euismod magna quam sit amet turpis. Etiam
-        quam diam, consectetur id fermentum at, rhoncus eget est. Sed gravida, magna in sollicitudin
-        semper, neque risus dapibus dui, sed semper augue lorem eget nulla. Cras et pretium mi, quis
-        auctor massa. Nulla convallis ipsum nunc, a maximus sem porta ac. Class aptent taciti
-        sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sed dui nec
-        ex sodales viverra. Sed vehicula ornare urna, a hendrerit ante tristique vel.
-      </p>
-
-      <p ref={elementRef}>Scroll to !</p>
-
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et tortor rutrum,
-        sollicitudin neque eu, mollis mi. Mauris mollis neque eu purus volutpat, sed sollicitudin
-        risus placerat. Proin ornare magna in nisi ullamcorper, a pharetra velit ultricies. Ut
-        tincidunt tellus et ex elementum scelerisque. Integer faucibus, erat nec pellentesque
-        commodo, ligula turpis egestas lacus, at sagittis quam ante non ex. Morbi cursus, turpis
-        auctor tempus venenatis, leo sem lacinia enim, tristique semper urna diam sed magna. Cras
-        vitae tortor est. Cras vitae mattis sapien. Mauris hendrerit mollis egestas. Nulla augue
-        eros, vestibulum in mollis et, ultricies at sem. Vivamus sed pretium elit, id vestibulum
-        justo. Nam sed quam ex. Nam convallis augue et lorem accumsan, molestie bibendum erat
-        bibendum. Morbi varius, dui sed viverra eleifend, nunc mauris rhoncus ligula, non feugiat
-        sem urna sit amet metus. Sed in ante nisl. Vestibulum ac risus ipsum. Duis quis lacus magna.
-        Maecenas at justo neque. Quisque posuere mi quis fringilla dapibus. Nulla non lorem
-        consectetur, egestas est in, semper arcu. Praesent et nunc non nisl tincidunt dignissim.
-        Curabitur porta purus non porttitor viverra. Suspendisse potenti. Pellentesque id leo in
-        metus tempor cursus. Donec in ultrices ligula, in facilisis lacus. Cras eros tellus, ornare
-        pulvinar congue eu, viverra nec ipsum. Proin laoreet arcu ac imperdiet pretium. Mauris
-        placerat pulvinar mauris, ac convallis enim semper ac. Aenean et mi eget velit egestas
-        commodo a nec metus. Curabitur in mi quis lacus tempus aliquet. Aliquam imperdiet, lorem a
-        sagittis lobortis, nisi purus accumsan orci, in euismod magna quam sit amet turpis. Etiam
-        quam diam, consectetur id fermentum at, rhoncus eget est. Sed gravida, magna in sollicitudin
-        semper, neque risus dapibus dui, sed semper augue lorem eget nulla. Cras et pretium mi, quis
-        auctor massa. Nulla convallis ipsum nunc, a maximus sem porta ac. Class aptent taciti
-        sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sed dui nec
-        ex sodales viverra. Sed vehicula ornare urna, a hendrerit ante tristique vel.
-      </p>
-
-      <button onClick={scrollToTop}>Scroll to</button>
-    </div>
-  );
-};

package/stories/use-visible/use-visible.stories.tsx

@@ -1,71 +0,0 @@
-import { useRef } from "react";
-import { useVisible } from "../../src";
-
-export default {
-  title: "useVisible",
-  component: useVisible,
-};
-
-export const Basic = () => {
-  const elementRef = useRef(null);
-  const isVisible = useVisible(elementRef);
-
-  return (
-    <div>
-      <p
-        style={{ position: "fixed", fontWeight: "bold", color: "red", zIndex: 2 }}
-      >{`Title is visible: ${isVisible}`}</p>
-      <h1 ref={elementRef}>Title</h1>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et tortor rutrum,
-        sollicitudin neque eu, mollis mi. Mauris mollis neque eu purus volutpat, sed sollicitudin
-        risus placerat. Proin ornare magna in nisi ullamcorper, a pharetra velit ultricies. Ut
-        tincidunt tellus et ex elementum scelerisque. Integer faucibus, erat nec pellentesque
-        commodo, ligula turpis egestas lacus, at sagittis quam ante non ex. Morbi cursus, turpis
-        auctor tempus venenatis, leo sem lacinia enim, tristique semper urna diam sed magna. Cras
-        vitae tortor est. Cras vitae mattis sapien. Mauris hendrerit mollis egestas. Nulla augue
-        eros, vestibulum in mollis et, ultricies at sem. Vivamus sed pretium elit, id vestibulum
-        justo. Nam sed quam ex. Nam convallis augue et lorem accumsan, molestie bibendum erat
-        bibendum. Morbi varius, dui sed viverra eleifend, nunc mauris rhoncus ligula, non feugiat
-        sem urna sit amet metus. Sed in ante nisl. Vestibulum ac risus ipsum. Duis quis lacus magna.
-        Maecenas at justo neque. Quisque posuere mi quis fringilla dapibus. Nulla non lorem
-        consectetur, egestas est in, semper arcu. Praesent et nunc non nisl tincidunt dignissim.
-        Curabitur porta purus non porttitor viverra. Suspendisse potenti. Pellentesque id leo in
-        metus tempor cursus. Donec in ultrices ligula, in facilisis lacus. Cras eros tellus, ornare
-        pulvinar congue eu, viverra nec ipsum. Proin laoreet arcu ac imperdiet pretium. Mauris
-        placerat pulvinar mauris, ac convallis enim semper ac. Aenean et mi eget velit egestas
-        commodo a nec metus. Curabitur in mi quis lacus tempus aliquet. Aliquam imperdiet, lorem a
-        sagittis lobortis, nisi purus accumsan orci, in euismod magna quam sit amet turpis. Etiam
-        quam diam, consectetur id fermentum at, rhoncus eget est. Sed gravida, magna in sollicitudin
-        semper, neque risus dapibus dui, sed semper augue lorem eget nulla. Cras et pretium mi, quis
-        auctor massa. Nulla convallis ipsum nunc, a maximus sem porta ac. Class aptent taciti
-        sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sed dui nec
-        ex sodales viverra. Sed vehicula ornare urna, a hendrerit ante tristique vel. Lorem ipsum
-        dolor sit amet, consectetur adipiscing elit. Praesent et tortor rutrum, sollicitudin neque
-        eu, mollis mi. Mauris mollis neque eu purus volutpat, sed sollicitudin risus placerat. Proin
-        ornare magna in nisi ullamcorper, a pharetra velit ultricies. Ut tincidunt tellus et ex
-        elementum scelerisque. Integer faucibus, erat nec pellentesque commodo, ligula turpis
-        egestas lacus, at sagittis quam ante non ex. Morbi cursus, turpis auctor tempus venenatis,
-        leo sem lacinia enim, tristique semper urna diam sed magna. Cras vitae tortor est. Cras
-        vitae mattis sapien. Mauris hendrerit mollis egestas. Nulla augue eros, vestibulum in mollis
-        et, ultricies at sem. Vivamus sed pretium elit, id vestibulum justo. Nam sed quam ex. Nam
-        convallis augue et lorem accumsan, molestie bibendum erat bibendum. Morbi varius, dui sed
-        viverra eleifend, nunc mauris rhoncus ligula, non feugiat sem urna sit amet metus. Sed in
-        ante nisl. Vestibulum ac risus ipsum. Duis quis lacus magna. Maecenas at justo neque.
-        Quisque posuere mi quis fringilla dapibus. Nulla non lorem consectetur, egestas est in,
-        semper arcu. Praesent et nunc non nisl tincidunt dignissim. Curabitur porta purus non
-        porttitor viverra. Suspendisse potenti. Pellentesque id leo in metus tempor cursus. Donec in
-        ultrices ligula, in facilisis lacus. Cras eros tellus, ornare pulvinar congue eu, viverra
-        nec ipsum. Proin laoreet arcu ac imperdiet pretium. Mauris placerat pulvinar mauris, ac
-        convallis enim semper ac. Aenean et mi eget velit egestas commodo a nec metus. Curabitur in
-        mi quis lacus tempus aliquet. Aliquam imperdiet, lorem a sagittis lobortis, nisi purus
-        accumsan orci, in euismod magna quam sit amet turpis. Etiam quam diam, consectetur id
-        fermentum at, rhoncus eget est. Sed gravida, magna in sollicitudin semper, neque risus
-        dapibus dui, sed semper augue lorem eget nulla. Cras et pretium mi, quis auctor massa. Nulla
-        convallis ipsum nunc, a maximus sem porta ac. Class aptent taciti sociosqu ad litora
-        torquent per conubia nostra, per inceptos himenaeos. Praesent sed dui nec ex sodales
-        viverra. Sed vehicula ornare urna, a hendrerit ante tristique vel.
-      </p>
-    </div>
-  );
-};

package/stories/wizard/wizard.stories.tsx

@@ -1,35 +0,0 @@
-import { Wizard } from "../../src";
-
-export default {
-  title: "Wizard",
-  component: Wizard,
-};
-
-export const Basic = () => {
-  return (
-    <Wizard
-      step={10}
-      renderHeader={() => <h1>My wizard</h1>}
-      renderFooter={({ previousStep, nextStep }) => (
-        <div>
-          <button onClick={previousStep}>previous</button>
-          <button onClick={nextStep}>next</button>
-        </div>
-      )}
-    >
-      <div>
-        <h2>Step 1</h2>
-        <p>Welcome to the first step</p>
-      </div>
-
-      <div>
-        <h2>Step 2</h2>
-      </div>
-
-      <div>
-        <h2>Step 3</h2>
-        <p>Welcome to the last step</p>
-      </div>
-    </Wizard>
-  );
-};

package/tests/pagination/use-pagination.test.ts

@@ -1,23 +0,0 @@
-import { usePagination, mountReactHook } from "../../src";
-
-describe("usePagination", () => {
-  const Pagination = (props: ObjectLiteral) =>
-    props.children(
-      usePagination({
-        page: 1,
-        totalRecords: 15,
-        maxRecordsPerPage: 10,
-        itemNeighbours: 2,
-        minItems: 5,
-      }),
-    );
-
-  it("should return correct values", () => {
-    const { value } = mountReactHook(Pagination);
-
-    expect(value.page).toBe(1);
-    expect(value.total).toBe(2);
-    expect(value.items).toEqual([1, 2]);
-    expect(value.maxRecordsPerPage).toBe(10);
-  });
-});

package/tests/setup.js

@@ -1,23 +0,0 @@
-window.IntersectionObserver = class IntersectionObserver {
-  observe() {
-    return null;
-  }
-
-  unobserve() {
-    return null;
-  }
-};
-
-Object.defineProperty(window, "matchMedia", {
-  writable: true,
-  value: jest.fn().mockImplementation((query) => ({
-    matches: query,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});

package/tests/use-match-resolution/use-match-resolution.test.ts

@@ -1,32 +0,0 @@
-import useMatchResolution from "../../src/match-resolution/use-match-resolution";
-import mountReactHook from "../../src/mount-react-hook/mount-react-hook";
-
-describe("useMatchResolution", () => {
-  let addResizeListener: jest.SpyInstance;
-  let removeResizeListener: jest.SpyInstance;
-
-  const MatchResolution = (props: ObjectLiteral) => props.children(useMatchResolution());
-
-  beforeAll(() => {
-    addResizeListener = jest.spyOn(window, "addEventListener");
-    removeResizeListener = jest.spyOn(window, "removeEventListener");
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("should add 'resize' event when component is mounted", () => {
-    mountReactHook(MatchResolution);
-
-    expect(addResizeListener).toHaveBeenCalledWith("resize", expect.any(Function));
-  });
-
-  it("should remove 'resize' event when component is unmounted", () => {
-    const { unmount } = mountReactHook(MatchResolution);
-
-    unmount();
-
-    expect(removeResizeListener).toHaveBeenCalledWith("resize", expect.any(Function));
-  });
-});

package/tests/use-visible/use-visible.test.tsx

@@ -1,53 +0,0 @@
-import React, { ForwardedRef, forwardRef, RefObject } from "react";
-import ObjectLiteral from "@vincentgraul/types/src/ObjectLiteral";
-import useVisible from "../../src/visible/use-visible";
-import mountReactHook from "../../src/mount-react-hook/mount-react-hook";
-
-describe("useVisible", () => {
-  let observeSpy: jest.SpyInstance;
-  let unobserveSpy: jest.SpyInstance;
-
-  const Visible = forwardRef((props: ObjectLiteral, ref: ForwardedRef<HTMLElement>) =>
-    props.children(useVisible(ref as RefObject<HTMLElement>)),
-  );
-
-  beforeAll(() => {
-    observeSpy = jest.spyOn(window.IntersectionObserver.prototype, "observe");
-    unobserveSpy = jest.spyOn(window.IntersectionObserver.prototype, "unobserve");
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("should observe when element exists", () => {
-    const ref = { current: <div>Test</div> };
-
-    mountReactHook(Visible, { ref, options: { once: true } });
-
-    expect(observeSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it("should not observe element when element doesn't exists", () => {
-    mountReactHook(Visible, { options: { once: true } });
-
-    expect(observeSpy).toHaveBeenCalledTimes(0);
-  });
-
-  it("should unobserve when element exists", () => {
-    const ref = { current: <div>Test</div> };
-    const { unmount } = mountReactHook(Visible, { ref, options: { once: true } });
-
-    unmount();
-
-    expect(unobserveSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it("should not unobserve when element doesn't exists", () => {
-    const { unmount } = mountReactHook(Visible, { options: { once: true } });
-
-    unmount();
-
-    expect(unobserveSpy).toHaveBeenCalledTimes(0);
-  });
-});

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2015",
-    "module": "ESNext",
-    "outDir": "dist",
-    "moduleResolution": "Node",
-    "jsx": "react-jsx",
-    "declaration": true,
-    "declarationMap": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "removeComments": true,
-    "resolveJsonModule": true
-  },
-  "include": ["src", "types.d.ts"]
-}