@vincentgraul/react-components 1.0.3 → 1.0.5

package/package.json

@@ -1,7 +1,70 @@
 {
   "name": "@vincentgraul/react-components",
-  "version": "1.0.3",
-  "main": "./build/bundle.js",
+  "version": "1.0.5",
+  "main": "build/esm/src/index.js",
+  "module": "build/cjs/src/index.js",
+  "exports": {
+    "./match-device": {
+      "import": "./build/esm/src/match-device/useMatchDevice.js",
+      "require": "./build/cjs/src/match-device/useMatchDevice.js"
+    },
+    "./match-resolution": {
+      "import": "./build/esm/src/match-resolution/useMatchResolution.js",
+      "require": "./build/cjs/src/match-resolution/useMatchResolution.js"
+    },
+    "./mount-react-hook": {
+      "import": "./build/esm/src/mount-react-hook/mountReactHook.js",
+      "require": "./build/cjs/src/mount-react-hook/mountReactHook.js"
+    },
+    "./numbered-pagination": {
+      "import": "./build/esm/src/numbered-pagination/NumberedPagination.js",
+      "require": "./build/cjs/src/numbered-pagination/NumberedPagination.js"
+    },
+    "./pagination": {
+      "import": "./build/esm/src/pagination/pagination.js",
+      "require": "./build/cjs/src/pagination/pagination.js"
+    },
+    "./scroll-to": {
+      "import": "./build/esm/src/scroll-to/useScrollTo.js",
+      "require": "./build/cjs/src/scroll-to/useScrollTo.js"
+    },
+    "./table": {
+      "import": "./build/esm/src/table/table.js",
+      "require": "./build/cjs/src/table/table.js"
+    },
+    "./visible": {
+      "import": "./build/esm/src/visible/useVisible.js",
+      "require": "./build/cjs/src/visible/useVisible.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "match-device": [
+        "build/esm/src/match-device/useMatchDevice.d.ts"
+      ],
+      "match-resolution": [
+        "build/esm/src/match-resolution/useMatchResolution.d.ts"
+      ],
+      "mount-react-hook": [
+        "build/esm/src/mount-react-hook/mountReactHook.d.ts"
+      ],
+      "numberedPagination": [
+        "build/esm/src/numbered-pagination/NumberedPagination.d.ts"
+      ],
+      "pagination": [
+        "build/esm/src/pagination/usePagination.d.ts"
+      ],
+      "scroll-to": [
+        "build/esm/src/scroll-to/useScrollTo.d.ts"
+      ],
+      "table": [
+        "build/esm/src/table/Table.d.ts"
+      ],
+      "visible": [
+        "build/esm/src/visible/useVisible.d.ts"
+      ]
+    }
+  },
   "license": "GNU GPLV3",
   "repository": "https://github.com/vincentgraul/react-components.git",
   "files": [
@@ -20,18 +83,18 @@
     }
   ],
   "scripts": {
-    "build:dev": "webpack",
-    "build:prod": "npm run lint && webpack",
+    "build:dev": "rollup -c",
+    "build:prod": "npm run lint && npm run build:dev",
     "storybook": "build-storybook && start-storybook -p 6006",
     "test": "jest",
     "doc": "typedoc",
     "lint": "eslint src"
   },
   "dependencies": {
-    "@testing-library/react": "^13.3.0",
-    "@types/react": "^18.0.15",
+    "@testing-library/react": "^13.4.0",
+    "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "@types/styled-components": "^5.1.25",
+    "@types/styled-components": "^5.1.26",
     "@types/ua-parser-js": "^0.7.36",
     "@vincentgraul/types": "^1.0.0",
     "intersection-observer": "^0.12.2",
@@ -41,27 +104,25 @@
     "ua-parser-js": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@types/jest": "^28.1.6",
-    "@typescript-eslint/eslint-plugin": "^5.31.0",
-    "@typescript-eslint/parser": "^5.31.0",
-    "babel-loader": "^8.2.5",
-    "eslint": "^8.21.0",
+    "@rollup/plugin-typescript": "^8.5.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/react": "^6.5.12",
+    "@types/jest": "^29.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.38.0",
+    "@typescript-eslint/parser": "^5.38.0",
+    "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
     "prettier": "^2.7.1",
-    "ts-jest": "^28.0.7",
-    "typedoc": "^0.23.10",
-    "typescript": "^4.7.4",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
-    "ts-loader": "^9.3.1",
-    "webpack-node-externals": "^3.0.0"
+    "rollup": "^2.79.1",
+    "ts-jest": "^29.0.2",
+    "typedoc": "^0.23.15",
+    "typescript": "^4.8.3"
   }
 }

package/build/index.d.ts

@@ -1,8 +0,0 @@
-export * as useMatchDevice from "./match-device/useMatchDevice";
-export * as useMatchResolution from "./match-resolution/useMatchResolution";
-export * as useMountReactHook from "./mount-react-hook/mountReactHook";
-export * as NumberedPagination from "./numbered-pagination/NumberedPagination";
-export * as usePagination from "./pagination/usePagination";
-export * as useScrollTo from "./scroll-to/useScrollTo";
-export * as Table from "./table/Table";
-export * as useVisible from "./visible/useVisible";

package/build/index.js

@@ -1,36 +0,0 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("react-components",[],t):"object"==typeof exports?exports["react-components"]=t():e["react-components"]=t()}(this,(()=>(()=>{"use strict";var e={n:t=>{var r=t&&t.__esModule?()=>t.default:()=>t;return e.d(r,{a:r}),r},d:(t,r)=>{for(var a in r)e.o(r,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:r[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{NumberedPagination:()=>n,Table:()=>s,useMatchDevice:()=>r,useMatchResolution:()=>a,useMountReactHook:()=>o,usePagination:()=>i,useScrollTo:()=>l,useVisible:()=>c});var r={};e.r(r),e.d(r,{default:()=>b});var a={};e.r(a),e.d(a,{default:()=>w,defaultBreakpoints:()=>g});var o={};e.r(o),e.d(o,{default:()=>x});var n={};e.r(n),e.d(n,{ArrowPosition:()=>T,default:()=>y});var i={};e.r(i),e.d(i,{default:()=>O});var l={};e.r(l),e.d(l,{default:()=>L});var s={};e.r(s),e.d(s,{Td:()=>F,Th:()=>S,Tr:()=>C,default:()=>k});var c={};e.r(c),e.d(c,{default:()=>U});const d=require("react");var m=e.n(d);const p=require("ua-parser-js");var u=e.n(p);function b(e){const t="undefined"!=typeof window,r=()=>{const t=new(u().UAParser)(e),{type:r}=t.getDevice(),a={isMobile:"mobile"===r,isTablet:"tablet"===r,isMobileOrTablet:!1,isDesktop:!r};return a.isMobileOrTablet=a.isMobile||a.isTablet,a};if(!t)return r();const[a,o]=(0,d.useState)(r());return(0,d.useEffect)((()=>{o(r())}),[e]),a}const g={desktop:"(min-width: 1281px)",laptop:"(min-width: 1025px) and (max-width: 1280px)",laptopOrUpper:"(min-width: 1025px)",laptopOrLower:"(max-width: 1280px)",tablet:"(min-width: 768px) and (max-width: 1024px)",tabletOrUpper:"(min-width: 768px)",tabletOrLower:"(max-width: 1024px)",largeMobile:"(min-width: 481px) and (max-width: 767px)",largeMobileOrUpper:"(min-width: 481px)",largeMobileOrLower:"(max-width: 767px)",mobile:"(min-width: 320px) and (max-width: 480px)",portrait:"(orientation: portrait)",landscape:"(orientation: landscape)"};function w(e=g,t=""){const r="undefined"!=typeof window,{isDesktop:a,isMobile:o}=b(t),n=e=>r&&window.matchMedia(e).matches,i=()=>({isDesktop:r?n(e.desktop):a,isLaptop:r?n(e.laptop):a,isLaptopOrUpper:r?n(e.laptopOrUpper):a,isLaptopOrLower:!!r&&n(e.laptopOrLower),isTablet:r?n(e.tablet):o,isTabletOrUpper:!!r&&n(e.tabletOrUpper),isTabletOrLower:r?n(e.tabletOrLower):o,isLargeMobile:r?n(e.largeMobile):o,isLargeMobileOrUpper:!!r&&n(e.largeMobileOrUpper),isLargeMobileOrLower:r?n(e.largeMobileOrLower):o,isMobile:r?n(e.mobile):o,isPortrait:!!r&&n(e.portrait),isLandscape:!!r&&n(e.landscape)}),[l,s]=(0,d.useState)(i());return(0,d.useEffect)((()=>{const e=()=>s(i());return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),(0,d.useEffect)((()=>{s(i())}),[e]),{resolution:l,breakpoints:e,match:n}}const f=require("@testing-library/react");function x(e,t={}){let r=null;const{container:a,unmount:o}=(0,f.render)(m().createElement(e,Object.assign({},t),(e=>(r=e,null))));return{container:a,unmount:o,value:r}}const h=require("styled-components");var T,E=e.n(h);function y(e){const{page:t,total:r,items:a,goToFirst:o,goToLeft:n,goToRight:i,goToLast:l,goToPage:s,renderSingleArrow:c,renderDoubleArrow:d,className:p=""}=e;return m().createElement(M,{className:`${p} pagination`},t>1&&m().createElement(m().Fragment,null,d&&m().createElement(v,{className:"pagination-item pagination-item-arrow pagination-item-double-arrow",onClick:()=>o()},d(T.LEFT)),c&&m().createElement(v,{className:"pagination-item pagination-item-arrow pagination-item-single-arrow",onClick:()=>n()},c(T.LEFT))),a.map(((t,r)=>m().createElement(v,{className:"pagination-item pagination-item-number "+(t===e.page?"selected":""),key:r,onClick:()=>s(t)},t))),t<r&&m().createElement(m().Fragment,null,c&&m().createElement(v,{className:"pagination-item pagination-item-arrow pagination-item-single-arrow",onClick:()=>i()},c(T.RIGHT)),d&&m().createElement(v,{className:"pagination-item pagination-item-arrow pagination-item-double-arrow",onClick:()=>l()},d(T.RIGHT))))}!function(e){e[e.LEFT=0]="LEFT",e[e.RIGHT=1]="RIGHT"}(T||(T={}));const M=E().div`
-  display: flex;
-`,v=E().div`
-  &:first-child {
-    border-width: 1px 1px 1px 1px;
-  }
-  background-color:
-  border-style: solid;
-  border-width: 1px 1px 1px 0;
-  padding: 0.5rem 1rem 0.5rem 1rem;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-`;function O(e){const{totalRecords:t,itemNeighbours:r=2,minItems:a=5,maxRecordsPerPage:o=10}=e,[n,i]=(0,d.useState)(e.page),[l,s]=(0,d.useState)(0),[c,m]=(0,d.useState)([]);(0,d.useEffect)((()=>{s(Math.ceil(t/o))}),[t,o]),(0,d.useEffect)((()=>{m((()=>{const e=[],t=Math.max(1,Math.min(n-r,l+1-a)),o=Math.min(l,Math.max(a,n+r));for(let r=t;r<=o;r++)e.push(r);return e})())}),[n,l,r,a]);const p=e=>{const t=Math.max(1,Math.min(e,l));i(t)};return{page:n,total:l,items:c,maxRecordsPerPage:o,goToPage:p,goToFirst:()=>{p(1)},goToLeft:()=>{p(n-1)},goToRight:()=>{p(n+1)},goToLast:()=>{p(l)}}}function L(e){return"undefined"==typeof window?{scrollToTop:()=>null}:{scrollToTop:()=>{e.current&&window.scrollTo(0,e.current.offsetTop)}}}function k(e){const{columns:t,records:r,renderHeader:a=(()=>null),renderFooter:o=(()=>null),renderColumnsRow:n=(e=>m().createElement("tr",{className:"table-main-columns-row"},e)),renderColumnsCell:i=((e,t)=>m().createElement(S,{className:"table-main-columns-cell",key:t},e.name)),renderRecordsRow:l=((e,t)=>m().createElement(C,{className:"table-main-records-row",key:t},e)),renderRecordsCell:s=((e,t)=>m().createElement(F,{className:"table-main-records-cell",key:t},e)),renderRecordsEmptyCell:c=(e=>m().createElement(F,{className:"table-main-records-cell",key:e},"X")),renderNoRecords:d=(()=>null),className:p=""}=e;return m().createElement(N,{className:`table ${p}`},a(),0===r.length?d():m().createElement(m().Fragment,null,m().createElement(R,{className:"table-main"},m().createElement("thead",{className:"table-main-columns"},n(t.map(((e,t)=>i(e,`column-${t}`))))),m().createElement(P,{className:"table-main-records"},(()=>{const e=t.map((e=>e.name));return r.map(((t,r)=>{const a=e.map((e=>t[e]));return l(a.map(((e,t)=>e?s(e,`cell-${t}`):c(`cell-${t}`))),`row-${r}`)}))})()))),o())}const N=E().div`
-  display: flex;
-  flex-flow: column;
-`,R=E().table`
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-`,P=E().tbody`
-  user-select: text;
-  tr:last-child {
-    border: none;
-  }
-`,S=E().th`
-  padding: 2rem 1rem 1rem 0;
-  word-wrap: break-word;
-  white-space: nowrap;
-`,C=E().tr`
-  text-align: center;
-  border-bottom: 2px solid black;
-`,F=E().td`
-  padding: 2rem 1rem 1rem 0;
-  word-wrap: break-word;
-`;function U(e){const[t,r]=(0,d.useState)(!1);return(0,d.useEffect)((()=>{const t=new IntersectionObserver((([e])=>(e=>{r(e.isIntersecting)})(e)));return e&&e.current&&t.observe(e.current),()=>{e&&e.current&&t.unobserve(e.current)}}),[e]),t}return t})()));