@nimbus-ds/pagination 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +45 -0
  3. package/dist/index.d.ts +22 -0
  4. package/dist/index.js +1 -0
  5. package/package.json +35 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,16 @@
1
+ # Changelog
2
+
3
+ The Pagination component allows us to navigate between a very large list of entries.
4
+
5
+ ## 2022-12-20 `1.0.0`
6
+
7
+ ### 📚 3rd party library updates
8
+
9
+ - Added `webpack@5.74.0`. ([#68](https://github.com/TiendaNube/nimbus-design-system/pull/68) by [@juniorconquista](https://github.com/juniorconquista))
10
+
11
+ ### 🎉 New features
12
+
13
+ - Added `activePage`, `pageCount`, `showNumbers` and `onPageChange` properties to the component API. ([#68](https://github.com/TiendaNube/nimbus-design-system/pull/68) by [@juniorconquista](https://github.com/juniorconquista))
14
+ - Added stories to the component. ([#68](https://github.com/TiendaNube/nimbus-design-system/pull/68) by [@juniorconquista](https://github.com/juniorconquista))
15
+ - Created new `usePagination` hook. ([#68](https://github.com/TiendaNube/nimbus-design-system/pull/68) by [@juniorconquista](https://github.com/juniorconquista))
16
+ - Added `activePage`, `pageCount` and `siblingCount` properties to the hook `usePagination`.([#68](https://github.com/TiendaNube/nimbus-design-system/pull/68) by [@juniorconquista](https://github.com/juniorconquista))
package/README.md ADDED
@@ -0,0 +1,45 @@
1
+ # `@nimbus-ds/pagination`
2
+
3
+ [![@nimbus-ds/pagination](https://img.shields.io/npm/v/@nimbus-ds/pagination?label=%40nimbus-ds%2Fpagination)](https://www.npmjs.com/package/@nimbus-ds/pagination)
4
+
5
+ The Pagination component allows us to navigate between a very large list of entries.
6
+
7
+ ## Installation
8
+
9
+ ```sh
10
+ $ yarn add @nimbus-ds/pagination
11
+ # or
12
+ $ npm install @nimbus-ds/pagination
13
+ ```
14
+
15
+ ### Component Anatomy
16
+
17
+ The component consists of a selector with optional numbers and arrows.
18
+
19
+ ## Guidelines
20
+
21
+ We use the component when we have a very large list of entries, to navigate within the same context, allowing quick access between the first or last page of the list, in addition to giving visibility to the total number of existing pages.
22
+
23
+ ### Pagination on desktop
24
+
25
+ On the desktop, its use is recommended on pages with a high number of entries, where vertical navigation becomes very dense and difficult.
26
+
27
+ ### Pagination on mobile
28
+
29
+ It is recommended that its use on mobile be avoided, in which case it is preferable to use InfinteScroll, which allows us to load content on demand as the user reaches the end of the page, making navigation more fluid and uninterrupted. In case this alternative is technically unfeasible or the number of entries is too large, we can use pagination, but the component must respect the minimum resolution width of 360 pixels.
30
+
31
+ ### Use of numerators
32
+
33
+ The use of numerators is optional, in contexts where we don't have enough space and the number of pages is not that big, we can only use the arrows to navigate between pages.
34
+
35
+ ### Recommendation for use
36
+
37
+ - Browse a sales list
38
+ - Browse a list of products
39
+ - Browse a list of contacts
40
+
41
+ ## Usage
42
+
43
+ View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/pagination).
44
+
45
+ <img alt="Nimbus" style="margin-bottom: 30px;" src="https://tiendanube.github.io/design-system-nimbus/static/media/nimbus-logo.ab60bd79.png" height="30" />
package/dist/index.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ // Generated by dts-bundle-generator v7.1.0
2
+
3
+ import React from 'react';
4
+ import { HTMLAttributes } from 'react';
5
+
6
+ export interface PaginationProps extends HTMLAttributes<HTMLElement> {
7
+ /** Active page */
8
+ activePage: number;
9
+ /** Page count */
10
+ pageCount: number;
11
+ /** Function to be passed on actioning the dismiss button */
12
+ onPageChange: (page: number) => void;
13
+ /** Determines if the alert is shown or not */
14
+ showNumbers?: boolean;
15
+ }
16
+ export declare const Pagination: React.FC<PaginationProps>;
17
+
18
+ export {
19
+ Pagination as default,
20
+ };
21
+
22
+ export {};
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ !function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react"),require("@nimbus-ds/styles"),require("@tiendanube/icons"),require("@nimbus-ds/skeleton")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/styles","@tiendanube/icons","@nimbus-ds/skeleton"],n):"object"==typeof exports?exports["@nimbus-ds/pagination"]=n(require("react"),require("@nimbus-ds/styles"),require("@tiendanube/icons"),require("@nimbus-ds/skeleton")):e["@nimbus-ds/pagination"]=n(e.react,e["@nimbus-ds/styles"],e["@tiendanube/icons"],e["@nimbus-ds/skeleton"])}(self,((e,n,r,t)=>(()=>{"use strict";var o={179:(e,n,r)=>{r.d(n,{Z:()=>a});var t=r(70),o=r.n(t)()((function(e){return e[1]}));o.push([e.id,":root {\n --g6qx2k0: #deeffe;\n --g6qx2k1: #7abcf7;\n --g6qx2k2: #006bc8;\n --g6qx2k3: #004e93;\n --g6qx2k4: #003e74;\n --g6qx2k5: #002c53;\n --g6qx2k6: #000e19;\n --g6qx2k7: #defef2;\n --g6qx2k8: #7af7c7;\n --g6qx2k9: #00c87b;\n --g6qx2ka: #00935b;\n --g6qx2kb: #007447;\n --g6qx2kc: #005333;\n --g6qx2kd: #001910;\n --g6qx2ke: #fef2de;\n --g6qx2kf: #f7c77a;\n --g6qx2kg: #c87b00;\n --g6qx2kh: #935b00;\n --g6qx2ki: #744700;\n --g6qx2kj: #533300;\n --g6qx2kk: #191000;\n --g6qx2kl: #fedede;\n --g6qx2km: #f77a7c;\n --g6qx2kn: #c80003;\n --g6qx2ko: #930002;\n --g6qx2kp: #740002;\n --g6qx2kq: #530001;\n --g6qx2kr: #190000;\n --g6qx2ks: #ffffff;\n --g6qx2kt: #fafafa;\n --g6qx2ku: #e7e8e9;\n --g6qx2kv: #cfd1d2;\n --g6qx2kw: #b7babc;\n --g6qx2kx: #a0a3a6;\n --g6qx2ky: #8a8d90;\n --g6qx2kz: #5e6163;\n --g6qx2k10: #343537;\n --g6qx2k11: #0a0a0a;\n --g6qx2k12: CentraNube, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', arial, sans-serif;\n --g6qx2k13: 0.75rem;\n --g6qx2k14: 0.875rem;\n --g6qx2k15: 1rem;\n --g6qx2k16: 2rem;\n --g6qx2k17: 1.5rem;\n --g6qx2k18: 1.25rem;\n --g6qx2k19: 1.125rem;\n --g6qx2k1a: 1rem;\n --g6qx2k1b: 0.875rem;\n --g6qx2k1c: 400;\n --g6qx2k1d: 500;\n --g6qx2k1e: 700;\n --g6qx2k1f: 0.875rem;\n --g6qx2k1g: 1.125rem;\n --g6qx2k1h: 1.25rem;\n --g6qx2k1i: 2.75rem;\n --g6qx2k1j: 2rem;\n --g6qx2k1k: 1.75rem;\n --g6qx2k1l: 1.5rem;\n --g6qx2k1m: 1.25rem;\n --g6qx2k1n: 1.125rem;\n --g6qx2k1o: 0px 2px 1px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.25);\n --g6qx2k1p: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 3px 10px rgba(0, 0, 0, 0.1);\n --g6qx2k1q: 0px 20px 20px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.04);\n --g6qx2k1r: 0.25rem;\n --g6qx2k1s: 0.5rem;\n --g6qx2k1t: 1rem;\n --g6qx2k1u: 1.5rem;\n --g6qx2k1v: 2rem;\n --g6qx2k1w: 2.5rem;\n --g6qx2k1x: 3rem;\n --g6qx2k1y: 3.5rem;\n --g6qx2k1z: 4rem;\n --g6qx2k20: 4.5rem;\n --g6qx2k21: 5rem;\n --g6qx2k22: 0.125rem;\n --g6qx2k23: 0.25rem;\n --g6qx2k24: 0.5rem;\n --g6qx2k25: 0.75rem;\n --g6qx2k26: 1rem;\n --g6qx2k27: 1.25rem;\n --g6qx2k28: 1.5rem;\n --g6qx2k29: 1.75rem;\n --g6qx2k2a: 2rem;\n --g6qx2k2b: 2.25rem;\n --g6qx2k2c: 2.5rem;\n --g6qx2k2d: 2.75rem;\n --g6qx2k2e: 3rem;\n --g6qx2k2f: 3.5rem;\n --g6qx2k2g: 4rem;\n --g6qx2k2h: 4.5rem;\n --g6qx2k2i: 5rem;\n --g6qx2k2j: 0.125rem;\n --g6qx2k2k: 0.375rem;\n --g6qx2k2l: 0.625rem;\n --g6qx2k2m: 0.875rem;\n --g6qx2k2n: 1.125rem;\n --g6qx2k2o: 300ms;\n --g6qx2k2p: 150ms;\n --g6qx2k2q: 450ms;\n --g6qx2k2r: 600ms;\n --g6qx2k2s: 0px;\n --g6qx2k2t: 672px;\n --g6qx2k2u: 1024px;\n --g6qx2k2v: 0 0 0 3px #7abcf7;\n}\n._1pga1rd0 {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--g6qx2k1s) var(--g6qx2k1t);\n height: 2.125rem;\n width: fit-content;\n gap: var(--g6qx2k1r);\n font-weight: var(--g6qx2k1d);\n line-height: var(--g6qx2k1g);\n font-size: var(--g6qx2k14);\n font-family: var(--g6qx2k12);\n color: var(--g6qx2k10);\n border-radius: 0.5rem;\n box-sizing: border-box;\n border-width: 0.063rem;\n border-style: solid;\n border-color: var(--g6qx2kw);\n cursor: pointer;\n transition: all var(--g6qx2k2p) ease;\n}\n._1pga1rd0:disabled {\n color: var(--g6qx2kz);\n cursor: not-allowed;\n}\n._1pga1rd0:focus {\n box-shadow: var(--g6qx2k2v);\n}\n._1pga1rd1 {\n background: var(--g6qx2k2);\n border-color: var(--g6qx2k2);\n color: var(--g6qx2ks);\n}\n._1pga1rd1:hover {\n background: var(--g6qx2k3);\n border-color: var(--g6qx2k3);\n}\n._1pga1rd1:active {\n background: var(--g6qx2k4);\n border-color: var(--g6qx2k4);\n}\n._1pga1rd1:disabled {\n background: var(--g6qx2ku);\n border-color: var(--g6qx2k1);\n}\n._1pga1rd1:focus {\n border-color: var(--g6qx2k3);\n}\n._1pga1rd2 {\n background: var(--g6qx2kn);\n border-color: var(--g6qx2kn);\n color: var(--g6qx2ks);\n}\n._1pga1rd2:hover {\n background: var(--g6qx2ko);\n border-color: var(--g6qx2ko);\n}\n._1pga1rd2:active {\n background: var(--g6qx2kp);\n border-color: var(--g6qx2kp);\n}\n._1pga1rd2:disabled {\n background: var(--g6qx2ku);\n border-color: var(--g6qx2km);\n}\n._1pga1rd2:focus {\n border-color: var(--g6qx2ko);\n}\n._1pga1rd3 {\n background: var(--g6qx2kt);\n border-color: var(--g6qx2kw);\n color: var(--g6qx2k10);\n}\n._1pga1rd3:hover {\n background-color: var(--g6qx2kv);\n border-color: var(--g6qx2kx);\n}\n._1pga1rd3:active {\n background-color: var(--g6qx2kw);\n border-color: var(--g6qx2ky);\n}\n._1pga1rd3:disabled {\n background: var(--g6qx2ku);\n border-color: var(--g6qx2kv);\n}\n._1pga1rd3:focus {\n border-color: var(--g6qx2k2);\n}\n._1pga1rd4 {\n background: transparent;\n border-color: transparent;\n color: var(--g6qx2k10);\n}\n._1pga1rd4:hover {\n background-color: var(--g6qx2kt);\n border-color: var(--g6qx2kx);\n}\n._1pga1rd4:active {\n background-color: var(--g6qx2kv);\n border-color: var(--g6qx2ky);\n}\n._1pga1rd4:disabled {\n color: var(--g6qx2kz);\n background: transparent;\n border-color: transparent;\n}\n",""]);const a=o},586:(e,n,r)=>{r.d(n,{Z:()=>a});var t=r(70),o=r.n(t)()((function(e){return e[1]}));o.push([e.id,":root {\n --g6qx2k0: #deeffe;\n --g6qx2k1: #7abcf7;\n --g6qx2k2: #006bc8;\n --g6qx2k3: #004e93;\n --g6qx2k4: #003e74;\n --g6qx2k5: #002c53;\n --g6qx2k6: #000e19;\n --g6qx2k7: #defef2;\n --g6qx2k8: #7af7c7;\n --g6qx2k9: #00c87b;\n --g6qx2ka: #00935b;\n --g6qx2kb: #007447;\n --g6qx2kc: #005333;\n --g6qx2kd: #001910;\n --g6qx2ke: #fef2de;\n --g6qx2kf: #f7c77a;\n --g6qx2kg: #c87b00;\n --g6qx2kh: #935b00;\n --g6qx2ki: #744700;\n --g6qx2kj: #533300;\n --g6qx2kk: #191000;\n --g6qx2kl: #fedede;\n --g6qx2km: #f77a7c;\n --g6qx2kn: #c80003;\n --g6qx2ko: #930002;\n --g6qx2kp: #740002;\n --g6qx2kq: #530001;\n --g6qx2kr: #190000;\n --g6qx2ks: #ffffff;\n --g6qx2kt: #fafafa;\n --g6qx2ku: #e7e8e9;\n --g6qx2kv: #cfd1d2;\n --g6qx2kw: #b7babc;\n --g6qx2kx: #a0a3a6;\n --g6qx2ky: #8a8d90;\n --g6qx2kz: #5e6163;\n --g6qx2k10: #343537;\n --g6qx2k11: #0a0a0a;\n --g6qx2k12: CentraNube, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', arial, sans-serif;\n --g6qx2k13: 0.75rem;\n --g6qx2k14: 0.875rem;\n --g6qx2k15: 1rem;\n --g6qx2k16: 2rem;\n --g6qx2k17: 1.5rem;\n --g6qx2k18: 1.25rem;\n --g6qx2k19: 1.125rem;\n --g6qx2k1a: 1rem;\n --g6qx2k1b: 0.875rem;\n --g6qx2k1c: 400;\n --g6qx2k1d: 500;\n --g6qx2k1e: 700;\n --g6qx2k1f: 0.875rem;\n --g6qx2k1g: 1.125rem;\n --g6qx2k1h: 1.25rem;\n --g6qx2k1i: 2.75rem;\n --g6qx2k1j: 2rem;\n --g6qx2k1k: 1.75rem;\n --g6qx2k1l: 1.5rem;\n --g6qx2k1m: 1.25rem;\n --g6qx2k1n: 1.125rem;\n --g6qx2k1o: 0px 2px 1px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.25);\n --g6qx2k1p: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 3px 10px rgba(0, 0, 0, 0.1);\n --g6qx2k1q: 0px 20px 20px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.04);\n --g6qx2k1r: 0.25rem;\n --g6qx2k1s: 0.5rem;\n --g6qx2k1t: 1rem;\n --g6qx2k1u: 1.5rem;\n --g6qx2k1v: 2rem;\n --g6qx2k1w: 2.5rem;\n --g6qx2k1x: 3rem;\n --g6qx2k1y: 3.5rem;\n --g6qx2k1z: 4rem;\n --g6qx2k20: 4.5rem;\n --g6qx2k21: 5rem;\n --g6qx2k22: 0.125rem;\n --g6qx2k23: 0.25rem;\n --g6qx2k24: 0.5rem;\n --g6qx2k25: 0.75rem;\n --g6qx2k26: 1rem;\n --g6qx2k27: 1.25rem;\n --g6qx2k28: 1.5rem;\n --g6qx2k29: 1.75rem;\n --g6qx2k2a: 2rem;\n --g6qx2k2b: 2.25rem;\n --g6qx2k2c: 2.5rem;\n --g6qx2k2d: 2.75rem;\n --g6qx2k2e: 3rem;\n --g6qx2k2f: 3.5rem;\n --g6qx2k2g: 4rem;\n --g6qx2k2h: 4.5rem;\n --g6qx2k2i: 5rem;\n --g6qx2k2j: 0.125rem;\n --g6qx2k2k: 0.375rem;\n --g6qx2k2l: 0.625rem;\n --g6qx2k2m: 0.875rem;\n --g6qx2k2n: 1.125rem;\n --g6qx2k2o: 300ms;\n --g6qx2k2p: 150ms;\n --g6qx2k2q: 450ms;\n --g6qx2k2r: 600ms;\n --g6qx2k2s: 0px;\n --g6qx2k2t: 672px;\n --g6qx2k2u: 1024px;\n --g6qx2k2v: 0 0 0 3px #7abcf7;\n}\n._1ng3paj0 {\n display: flex;\n list-style-type: none;\n padding: 0;\n gap: var(--g6qx2k1r);\n}\n",""]);const a=o},70:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var r=e(n);return n[2]?"@media ".concat(n[2]," {").concat(r,"}"):r})).join("")},n.i=function(e,r,t){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(t)for(var a=0;a<this.length;a++){var i=this[a][0];null!=i&&(o[i]=!0)}for(var c=0;c<e.length;c++){var u=[].concat(e[c]);t&&o[u[0]]||(r&&(u[2]?u[2]="".concat(r," and ").concat(u[2]):u[2]=r),n.push(u))}},n}},788:(e,n,r)=>{r.r(n),r.d(n,{default:()=>c});var t=r(191),o=r.n(t),a=r(179),i={insert:"head",singleton:!1};o()(a.Z,i);const c=a.Z.locals||{}},332:(e,n,r)=>{r.r(n),r.d(n,{default:()=>c});var t=r(191),o=r.n(t),a=r(586),i={insert:"head",singleton:!1};o()(a.Z,i);const c=a.Z.locals||{}},191:(e,n,r)=>{var t,o=function(){return void 0===t&&(t=Boolean(window&&document&&document.all&&!window.atob)),t},a=function(){var e={};return function(n){if(void 0===e[n]){var r=document.querySelector(n);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}e[n]=r}return e[n]}}(),i=[];function c(e){for(var n=-1,r=0;r<i.length;r++)if(i[r].identifier===e){n=r;break}return n}function u(e,n){for(var r={},t=[],o=0;o<e.length;o++){var a=e[o],u=n.base?a[0]+n.base:a[0],g=r[u]||0,l="".concat(u," ").concat(g);r[u]=g+1;var s=c(l),f={css:a[1],media:a[2],sourceMap:a[3]};-1!==s?(i[s].references++,i[s].updater(f)):i.push({identifier:l,updater:k(f,n),references:1}),t.push(l)}return t}function g(e){var n=document.createElement("style"),t=e.attributes||{};if(void 0===t.nonce){var o=r.nc;o&&(t.nonce=o)}if(Object.keys(t).forEach((function(e){n.setAttribute(e,t[e])})),"function"==typeof e.insert)e.insert(n);else{var i=a(e.insert||"head");if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(n)}return n}var l,s=(l=[],function(e,n){return l[e]=n,l.filter(Boolean).join("\n")});function f(e,n,r,t){var o=r?"":t.media?"@media ".concat(t.media," {").concat(t.css,"}"):t.css;if(e.styleSheet)e.styleSheet.cssText=s(n,o);else{var a=document.createTextNode(o),i=e.childNodes;i[n]&&e.removeChild(i[n]),i.length?e.insertBefore(a,i[n]):e.appendChild(a)}}function d(e,n,r){var t=r.css,o=r.media,a=r.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),a&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}var x=null,p=0;function k(e,n){var r,t,o;if(n.singleton){var a=p++;r=x||(x=g(n)),t=f.bind(null,r,a,!1),o=f.bind(null,r,a,!0)}else r=g(n),t=d.bind(null,r,n),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(r)};return t(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;t(e=n)}else o()}}e.exports=function(e,n){(n=n||{}).singleton||"boolean"==typeof n.singleton||(n.singleton=o());var r=u(e=e||[],n);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var t=0;t<r.length;t++){var o=c(r[t]);i[o].references--}for(var a=u(e,n),g=0;g<r.length;g++){var l=c(r[g]);0===i[l].references&&(i[l].updater(),i.splice(l,1))}r=a}}}},18:(e,n,r)=>{Object.defineProperty(n,"__esModule",{value:!0}),n.Button=void 0;const t=r(15).__importDefault(r(156)),o=r(990),a=r(929),i=({className:e,style:n,appearance:r="neutral",children:a,...i})=>t.default.createElement("button",{type:"button",...i,className:o.button.classnames.appearance[r]},a);n.Button=i,i.Skeleton=a.ButtonSkeleton,i.displayName="Button"},665:(e,n,r)=>{Object.defineProperty(n,"__esModule",{value:!0}),n.ButtonSkeleton=void 0;const t=r(15).__importDefault(r(156)),o=r(678),a=({width:e,"data-testid":n})=>t.default.createElement(o.Skeleton,{width:e??"4.75rem",height:"2.125rem",borderRadius:"0.5rem","data-testid":n});n.ButtonSkeleton=a,a.displayName="Button.Skeleton"},256:(e,n,r)=>{Object.defineProperty(n,"__esModule",{value:!0}),n.ButtonSkeleton=void 0;const t=r(665);var o=r(665);Object.defineProperty(n,"ButtonSkeleton",{enumerable:!0,get:function(){return o.ButtonSkeleton}}),n.default=t.ButtonSkeleton},929:(e,n,r)=>{Object.defineProperty(n,"__esModule",{value:!0});r(15).__exportStar(r(256),n)},398:(e,n,r)=>{Object.defineProperty(n,"__esModule",{value:!0}),n.Button=void 0;const t=r(18);r(788);var o=r(18);Object.defineProperty(n,"Button",{enumerable:!0,get:function(){return o.Button}}),n.default=t.Button},943:(e,n,r)=>{Object.defineProperty(n,"__esModule",{value:!0}),n.Pagination=void 0;const t=r(15).__importDefault(r(156)),o=r(990),a=r(948),i=r(398),c=r(612),u=r(390),g=({className:e,style:n,showNumbers:r=!0,activePage:g,pageCount:l,onPageChange:s,...f})=>{const d=(0,c.usePagination)({activePage:g,pageCount:l});return t.default.createElement("ul",{...f,className:o.pagination.classnames.container},t.default.createElement("li",null,t.default.createElement(i.Button,{"data-testid":"button-pagination-prev",appearance:"transparent",onClick:()=>s(Number(g-1)),disabled:1===g},t.default.createElement(a.ChevronLeftIcon,null))),r&&d?.map(((e,n)=>t.default.createElement("li",{key:(0,u.generateKey)(e,n)},e===c.DOTS&&t.default.createElement(i.Button,{"data-testid":"button-pagination-page-dots",appearance:"transparent",disabled:!0},e),e!==c.DOTS&&t.default.createElement(i.Button,{"data-testid":`button-pagination-page-${e}`,onClick:()=>s(Number(e)),appearance:e===g?"primary":"transparent"},e)))),t.default.createElement("li",null,t.default.createElement(i.Button,{"data-testid":"button-pagination-next",appearance:"transparent",onClick:()=>s(Number(g+1)),disabled:g>=l},t.default.createElement(a.ChevronRightIcon,null))))};n.Pagination=g,g.displayName="Pagination"},612:(e,n,r)=>{Object.defineProperty(n,"__esModule",{value:!0}),n.DOTS=n.usePagination=void 0;var t=r(391);Object.defineProperty(n,"usePagination",{enumerable:!0,get:function(){return t.usePagination}}),Object.defineProperty(n,"DOTS",{enumerable:!0,get:function(){return t.DOTS}})},391:(e,n,r)=>{Object.defineProperty(n,"__esModule",{value:!0}),n.DOTS=n.usePagination=void 0;var t=r(571);Object.defineProperty(n,"usePagination",{enumerable:!0,get:function(){return t.usePagination}});var o=r(422);Object.defineProperty(n,"DOTS",{enumerable:!0,get:function(){return o.DOTS}})},422:(e,n)=>{Object.defineProperty(n,"__esModule",{value:!0}),n.range=n.DOTS=void 0,n.DOTS="...";n.range=(e,n)=>{const r=n-e+1;return Array.from({length:r},((n,r)=>r+e))}},571:(e,n,r)=>{Object.defineProperty(n,"__esModule",{value:!0}),n.usePagination=void 0;const t=r(156),o=r(422);n.usePagination=({pageCount:e,siblingCount:n=1,activePage:r})=>(0,t.useMemo)((()=>{const t=e;if(n+5>=t)return(0,o.range)(1,t);const a=Math.max(r-n,1),i=Math.min(r+n,t),c=a>2,u=i<t-2,g=t;if(!c&&u){const e=4*n;return[...(0,o.range)(1,e),o.DOTS,t]}if(c&&!u){const e=4*n,r=(0,o.range)(t-e+1,t);return[1,o.DOTS,...r]}if(c&&u){const e=(0,o.range)(a,i);return[1,o.DOTS,...e,o.DOTS,g]}return[]}),[e,n,r])},390:(e,n)=>{Object.defineProperty(n,"__esModule",{value:!0}),n.generateKey=void 0;n.generateKey=(e,n)=>`${e}-${n}`},15:(e,n,r)=>{r.r(n),r.d(n,{__assign:()=>a,__asyncDelegator:()=>y,__asyncGenerator:()=>v,__asyncValues:()=>h,__await:()=>b,__awaiter:()=>l,__classPrivateFieldGet:()=>j,__classPrivateFieldIn:()=>T,__classPrivateFieldSet:()=>S,__createBinding:()=>f,__decorate:()=>c,__exportStar:()=>d,__extends:()=>o,__generator:()=>s,__importDefault:()=>P,__importStar:()=>O,__makeTemplateObject:()=>_,__metadata:()=>g,__param:()=>u,__read:()=>p,__rest:()=>i,__spread:()=>k,__spreadArray:()=>m,__spreadArrays:()=>q,__values:()=>x});var t=function(e,n){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}||function(e,n){for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])},t(e,n)};function o(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}var a=function(){return a=Object.assign||function(e){for(var n,r=1,t=arguments.length;r<t;r++)for(var o in n=arguments[r])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},a.apply(this,arguments)};function i(e,n){var r={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.indexOf(t)<0&&(r[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(e);o<t.length;o++)n.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(e,t[o])&&(r[t[o]]=e[t[o]])}return r}function c(e,n,r,t){var o,a=arguments.length,i=a<3?n:null===t?t=Object.getOwnPropertyDescriptor(n,r):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,n,r,t);else for(var c=e.length-1;c>=0;c--)(o=e[c])&&(i=(a<3?o(i):a>3?o(n,r,i):o(n,r))||i);return a>3&&i&&Object.defineProperty(n,r,i),i}function u(e,n){return function(r,t){n(r,t,e)}}function g(e,n){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,n)}function l(e,n,r,t){return new(r||(r=Promise))((function(o,a){function i(e){try{u(t.next(e))}catch(e){a(e)}}function c(e){try{u(t.throw(e))}catch(e){a(e)}}function u(e){var n;e.done?o(e.value):(n=e.value,n instanceof r?n:new r((function(e){e(n)}))).then(i,c)}u((t=t.apply(e,n||[])).next())}))}function s(e,n){var r,t,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(a){return function(c){return function(a){if(r)throw new TypeError("Generator is already executing.");for(;i;)try{if(r=1,t&&(o=2&a[0]?t.return:a[0]?t.throw||((o=t.return)&&o.call(t),0):t.next)&&!(o=o.call(t,a[1])).done)return o;switch(t=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,t=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(6===a[0]&&i.label<o[1]){i.label=o[1],o=a;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(a);break}o[2]&&i.ops.pop(),i.trys.pop();continue}a=n.call(e,i)}catch(e){a=[6,e],t=0}finally{r=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,c])}}}var f=Object.create?function(e,n,r,t){void 0===t&&(t=r);var o=Object.getOwnPropertyDescriptor(n,r);o&&!("get"in o?!n.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return n[r]}}),Object.defineProperty(e,t,o)}:function(e,n,r,t){void 0===t&&(t=r),e[t]=n[r]};function d(e,n){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(n,r)||f(n,e,r)}function x(e){var n="function"==typeof Symbol&&Symbol.iterator,r=n&&e[n],t=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&t>=e.length&&(e=void 0),{value:e&&e[t++],done:!e}}};throw new TypeError(n?"Object is not iterable.":"Symbol.iterator is not defined.")}function p(e,n){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var t,o,a=r.call(e),i=[];try{for(;(void 0===n||n-- >0)&&!(t=a.next()).done;)i.push(t.value)}catch(e){o={error:e}}finally{try{t&&!t.done&&(r=a.return)&&r.call(a)}finally{if(o)throw o.error}}return i}function k(){for(var e=[],n=0;n<arguments.length;n++)e=e.concat(p(arguments[n]));return e}function q(){for(var e=0,n=0,r=arguments.length;n<r;n++)e+=arguments[n].length;var t=Array(e),o=0;for(n=0;n<r;n++)for(var a=arguments[n],i=0,c=a.length;i<c;i++,o++)t[o]=a[i];return t}function m(e,n,r){if(r||2===arguments.length)for(var t,o=0,a=n.length;o<a;o++)!t&&o in n||(t||(t=Array.prototype.slice.call(n,0,o)),t[o]=n[o]);return e.concat(t||Array.prototype.slice.call(n))}function b(e){return this instanceof b?(this.v=e,this):new b(e)}function v(e,n,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,o=r.apply(e,n||[]),a=[];return t={},i("next"),i("throw"),i("return"),t[Symbol.asyncIterator]=function(){return this},t;function i(e){o[e]&&(t[e]=function(n){return new Promise((function(r,t){a.push([e,n,r,t])>1||c(e,n)}))})}function c(e,n){try{(r=o[e](n)).value instanceof b?Promise.resolve(r.value.v).then(u,g):l(a[0][2],r)}catch(e){l(a[0][3],e)}var r}function u(e){c("next",e)}function g(e){c("throw",e)}function l(e,n){e(n),a.shift(),a.length&&c(a[0][0],a[0][1])}}function y(e){var n,r;return n={},t("next"),t("throw",(function(e){throw e})),t("return"),n[Symbol.iterator]=function(){return this},n;function t(t,o){n[t]=e[t]?function(n){return(r=!r)?{value:b(e[t](n)),done:"return"===t}:o?o(n):n}:o}}function h(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,r=e[Symbol.asyncIterator];return r?r.call(e):(e=x(e),n={},t("next"),t("throw"),t("return"),n[Symbol.asyncIterator]=function(){return this},n);function t(r){n[r]=e[r]&&function(n){return new Promise((function(t,o){(function(e,n,r,t){Promise.resolve(t).then((function(n){e({value:n,done:r})}),n)})(t,o,(n=e[r](n)).done,n.value)}))}}}function _(e,n){return Object.defineProperty?Object.defineProperty(e,"raw",{value:n}):e.raw=n,e}var w=Object.create?function(e,n){Object.defineProperty(e,"default",{enumerable:!0,value:n})}:function(e,n){e.default=n};function O(e){if(e&&e.__esModule)return e;var n={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&f(n,e,r);return w(n,e),n}function P(e){return e&&e.__esModule?e:{default:e}}function j(e,n,r,t){if("a"===r&&!t)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof n?e!==n||!t:!n.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?t:"a"===r?t.call(e):t?t.value:n.get(e)}function S(e,n,r,t,o){if("m"===t)throw new TypeError("Private method is not writable");if("a"===t&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof n?e!==n||!o:!n.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===t?o.call(e,r):o?o.value=r:n.set(e,r),r}function T(e,n){if(null===n||"object"!=typeof n&&"function"!=typeof n)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?n===e:e.has(n)}},678:e=>{e.exports=t},990:e=>{e.exports=n},948:e=>{e.exports=r},156:n=>{n.exports=e}},a={};function i(e){var n=a[e];if(void 0!==n)return n.exports;var r=a[e]={id:e,exports:{}};return o[e](r,r.exports,i),r.exports}i.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return i.d(n,{a:n}),n},i.d=(e,n)=>{for(var r in n)i.o(n,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},i.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.nc=void 0;var c={};return(()=>{var e=c;Object.defineProperty(e,"__esModule",{value:!0}),e.Pagination=void 0;const n=i(943);i(332);var r=i(943);Object.defineProperty(e,"Pagination",{enumerable:!0,get:function(){return r.Pagination}}),e.default=n.Pagination})(),c})()));
package/package.json ADDED
@@ -0,0 +1,35 @@
1
+ {
2
+ "name": "@nimbus-ds/pagination",
3
+ "version": "1.0.0",
4
+ "license": "MIT",
5
+ "main": "dist/index.js",
6
+ "files": [
7
+ "dist",
8
+ "README.md"
9
+ ],
10
+ "sideEffects": false,
11
+ "scripts": {
12
+ "build": "webpack",
13
+ "clean": "rm -rf dist",
14
+ "version": "yarn version"
15
+ },
16
+ "dependencies": {
17
+ "@nimbus-ds/button": "^1.6.0",
18
+ "@nimbus-ds/styles": "^5.3.0"
19
+ },
20
+ "peerDependencies": {
21
+ "react": "^16.8 || ^17.0 || ^18.0",
22
+ "react-dom": "^16.8 || ^17.0 || ^18.0"
23
+ },
24
+ "homepage": "https://nimbus.nuvemshop.com.br/documentation",
25
+ "repository": {
26
+ "type": "git",
27
+ "url": "git+https://github.com/TiendaNube/nimbus-design-system.git"
28
+ },
29
+ "bugs": {
30
+ "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
31
+ },
32
+ "devDependencies": {
33
+ "webpack": "^5.74.0"
34
+ }
35
+ }