@vincentgraul/react-components 1.0.38 → 1.0.40

package/stories/table/table.stories.tsx

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+{
+  "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"]
+}

package/typedoc.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": "./src",
+  "entryPointStrategy": "Expand",
+  "exclude": "**/*+(.test|.stories).+(ts|tsx)",
+  "out": "doc"
+}

package/types.d.ts

@@ -0,0 +1,5 @@
+import("@vincentgraul/types/svg");
+
+declare type ObjectLiteral = import("@vincentgraul/types/object-literal");
+declare type Primitive = import("@vincentgraul/types/primitive");
+declare module "*.css";

package/build/country-selector/CountrySelector.d.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from "react";
-interface Props {
-    languages: string[];
-    value?: string;
-    onChange?: (option: Option) => void;
-    flagWidth?: string;
-    className?: string;
-}
-interface Option {
-    value: string;
-    label: ReactNode;
-}
-export default function CountrySelector(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=CountrySelector.d.ts.map

package/build/country-selector/CountrySelector.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CountrySelector.d.ts","sourceRoot":"","sources":["../../src/country-selector/CountrySelector.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAK9D,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,MAAM;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,KAAK,2CAyCnD"}