meticulous-ui 1.0.3 â 1.0.5
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.
- package/README.md +17 -13
- package/dist/components/Pagination/Pagination.js +11 -11
- package/dist/components/Pagination/Pagination.js.map +1 -1
- package/dist/components/Pagination/styles.js +2 -2
- package/dist/components/Pagination/styles.js.map +1 -1
- package/package.json +18 -3
- package/dist/components/Pagination/index.js +0 -5
- package/dist/components/Pagination/index.js.map +0 -1
package/README.md
CHANGED
|
@@ -7,56 +7,60 @@ A lightweight, modern React component library designed for elegance and precisio
|
|
|
7
7
|
## đ Installation
|
|
8
8
|
|
|
9
9
|
```
|
|
10
|
-
|
|
11
10
|
npm install meticulous-ui
|
|
11
|
+
```
|
|
12
|
+
|
|
12
13
|
# or
|
|
13
|
-
yarn add meticulous-ui
|
|
14
14
|
|
|
15
|
+
```
|
|
16
|
+
yarn add meticulous-ui
|
|
15
17
|
```
|
|
16
18
|
|
|
17
19
|
## 𧊠Usage
|
|
18
20
|
|
|
19
21
|
```jsx
|
|
20
|
-
|
|
21
|
-
import
|
|
22
|
-
import { Pagination } from "meticulous-ui";
|
|
22
|
+
import { useState } from 'react';
|
|
23
|
+
import Pagination from 'meticulous-ui/components/Pagination';
|
|
23
24
|
|
|
24
25
|
function App() {
|
|
26
|
+
const [pageNumber, setPageNumber] = useState(1);
|
|
27
|
+
|
|
25
28
|
return (
|
|
26
29
|
<div>
|
|
27
30
|
<h2>Example with Pagination</h2>
|
|
28
|
-
<Pagination totalPages={10}
|
|
31
|
+
<Pagination totalPages={10} pageNumber={pageNumber} setPageNumber={setPageNumber} />
|
|
29
32
|
</div>
|
|
30
33
|
);
|
|
31
34
|
}
|
|
32
35
|
|
|
33
36
|
export default App;
|
|
34
|
-
|
|
35
37
|
```
|
|
36
38
|
|
|
37
39
|
## đĻ Components
|
|
38
40
|
|
|
39
|
-
```
|
|
40
|
-
|
|
41
41
|
| Component | Description |
|
|
42
42
|
| -------------- | ------------------------------------- |
|
|
43
43
|
| `Pagination` | Fully responsive pagination component |
|
|
44
44
|
| `ChevronLeft` | Left navigation icon |
|
|
45
45
|
| `ChevronRight` | Right navigation icon |
|
|
46
46
|
|
|
47
|
+
## Demo
|
|
48
|
+
|
|
49
|
+
```
|
|
50
|
+
https://xe3110.github.io/meticulous-ui/
|
|
47
51
|
```
|
|
48
52
|
|
|
49
53
|
## đą Features
|
|
50
54
|
|
|
51
|
-
```
|
|
52
|
-
|
|
53
55
|
âī¸ Built with React + Styled Components
|
|
56
|
+
|
|
54
57
|
đ¨ Zero external CSS dependencies
|
|
58
|
+
|
|
55
59
|
𧹠Easy to extend and customize
|
|
60
|
+
|
|
56
61
|
đĒļ Small bundle size
|
|
57
|
-
đĻ ESM + CJS support out of the box
|
|
58
62
|
|
|
59
|
-
|
|
63
|
+
đĻ ESM + CJS support out of the box
|
|
60
64
|
|
|
61
65
|
## đ ī¸ Build Setup (for contributors)
|
|
62
66
|
|
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
import { j as c } from "../../_virtual/jsx-runtime.js";
|
|
2
2
|
import f from "../../node_modules/lodash-es/range.js";
|
|
3
3
|
import { renderPageNum as o, renderThreeDots as C } from "./helpers.js";
|
|
4
|
-
import { AllPages as
|
|
4
|
+
import { AllPages as k, ClickableChevronLeft as h, ClickableChevronRight as d } from "./styles.js";
|
|
5
5
|
const R = ({ pageNumber: i, setPageNumber: x, totalPages: n }) => {
|
|
6
6
|
const j = () => {
|
|
7
7
|
i > 1 && x(i - 1);
|
|
8
|
-
},
|
|
8
|
+
}, s = () => {
|
|
9
9
|
i < n && x(i + 1);
|
|
10
10
|
};
|
|
11
|
-
return n <= 7 ? /* @__PURE__ */ c.jsxs(
|
|
12
|
-
/* @__PURE__ */ c.jsx(
|
|
11
|
+
return n <= 7 ? /* @__PURE__ */ c.jsxs(k, { children: [
|
|
12
|
+
/* @__PURE__ */ c.jsx(h, { size: 20, onClick: j }),
|
|
13
13
|
f(1, n + 1).map(o(i, x)),
|
|
14
|
-
/* @__PURE__ */ c.jsx(
|
|
15
|
-
] }) : n < 10 || i < 4 || i > n - 3 && i <= n ? /* @__PURE__ */ c.jsxs(
|
|
16
|
-
/* @__PURE__ */ c.jsx(
|
|
14
|
+
/* @__PURE__ */ c.jsx(d, { size: 20, onClick: s })
|
|
15
|
+
] }) : n < 10 || i < 4 || i > n - 3 && i <= n ? /* @__PURE__ */ c.jsxs(k, { children: [
|
|
16
|
+
/* @__PURE__ */ c.jsx(h, { size: 20, onClick: j }),
|
|
17
17
|
f(1, 5).map(o(i, x)),
|
|
18
18
|
C(),
|
|
19
19
|
[n - 3, n - 2, n - 1, n].map(
|
|
20
20
|
o(i, x)
|
|
21
21
|
),
|
|
22
|
-
/* @__PURE__ */ c.jsx(
|
|
23
|
-
] }) : /* @__PURE__ */ c.jsxs(
|
|
24
|
-
/* @__PURE__ */ c.jsx(
|
|
22
|
+
/* @__PURE__ */ c.jsx(d, { size: 20, onClick: s })
|
|
23
|
+
] }) : /* @__PURE__ */ c.jsxs(k, { children: [
|
|
24
|
+
/* @__PURE__ */ c.jsx(h, { size: 20, onClick: j }),
|
|
25
25
|
f(1, 3).map(o(i, x)),
|
|
26
26
|
C(),
|
|
27
27
|
[i - 1, i, i + 1].map(o(i, x)),
|
|
28
28
|
C(),
|
|
29
29
|
[n - 1, n].map(o(i, x)),
|
|
30
|
-
/* @__PURE__ */ c.jsx(
|
|
30
|
+
/* @__PURE__ */ c.jsx(d, { size: 20, onClick: s })
|
|
31
31
|
] });
|
|
32
32
|
};
|
|
33
33
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.jsx"],"sourcesContent":["// Libraries\nimport _range from 'lodash-es/range';\n\n// helpers\nimport { renderThreeDots, renderPageNum } from './helpers.jsx';\n\n// styles\nimport { AllPages, ClickableChevronLeft, ClickableChevronRight } from './styles';\n\nconst Pagination = ({ pageNumber, setPageNumber, totalPages }) => {\n const setPrevPage = () => {\n if (pageNumber > 1) {\n setPageNumber(pageNumber - 1);\n }\n };\n\n const setNextPage = () => {\n if (pageNumber < totalPages) {\n setPageNumber(pageNumber + 1);\n }\n };\n\n if (totalPages <= 7) {\n return (\n <AllPages>\n <ClickableChevronLeft onClick={setPrevPage} />\n {_range(1, totalPages + 1).map(renderPageNum(pageNumber, setPageNumber))}\n <ClickableChevronRight onClick={
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.jsx"],"sourcesContent":["// Libraries\nimport _range from 'lodash-es/range';\n\n// helpers\nimport { renderThreeDots, renderPageNum } from './helpers.jsx';\n\n// styles\nimport { AllPages, ClickableChevronLeft, ClickableChevronRight } from './styles';\n\nconst Pagination = ({ pageNumber, setPageNumber, totalPages }) => {\n const setPrevPage = () => {\n if (pageNumber > 1) {\n setPageNumber(pageNumber - 1);\n }\n };\n\n const setNextPage = () => {\n if (pageNumber < totalPages) {\n setPageNumber(pageNumber + 1);\n }\n };\n\n if (totalPages <= 7) {\n return (\n <AllPages>\n <ClickableChevronLeft size={20} onClick={setPrevPage} />\n {_range(1, totalPages + 1).map(renderPageNum(pageNumber, setPageNumber))}\n <ClickableChevronRight size={20} onClick={setNextPage} />\n </AllPages>\n );\n }\n\n if (\n totalPages < 10 ||\n pageNumber < 4 ||\n (pageNumber > totalPages - 3 && pageNumber <= totalPages)\n ) {\n return (\n <AllPages>\n <ClickableChevronLeft size={20} onClick={setPrevPage} />\n {_range(1, 5).map(renderPageNum(pageNumber, setPageNumber))}\n {renderThreeDots()}\n {[totalPages - 3, totalPages - 2, totalPages - 1, totalPages].map(\n renderPageNum(pageNumber, setPageNumber)\n )}\n <ClickableChevronRight size={20} onClick={setNextPage} />\n </AllPages>\n );\n }\n\n return (\n <AllPages>\n <ClickableChevronLeft size={20} onClick={setPrevPage} />\n {_range(1, 3).map(renderPageNum(pageNumber, setPageNumber))}\n {renderThreeDots()}\n {[pageNumber - 1, pageNumber, pageNumber + 1].map(renderPageNum(pageNumber, setPageNumber))}\n {renderThreeDots()}\n {[totalPages - 1, totalPages].map(renderPageNum(pageNumber, setPageNumber))}\n <ClickableChevronRight size={20} onClick={setNextPage} />\n </AllPages>\n );\n};\n\nexport default Pagination;\n"],"names":["Pagination","pageNumber","setPageNumber","totalPages","setPrevPage","setNextPage","AllPages","jsx","ClickableChevronLeft","_range","renderPageNum","ClickableChevronRight","renderThreeDots"],"mappings":";;;;AASA,MAAMA,IAAa,CAAC,EAAE,YAAAC,GAAY,eAAAC,GAAe,YAAAC,QAAiB;AAChE,QAAMC,IAAc,MAAM;AACxB,IAAIH,IAAa,KACfC,EAAcD,IAAa,CAAC;AAAA,EAEhC,GAEMI,IAAc,MAAM;AACxB,IAAIJ,IAAaE,KACfD,EAAcD,IAAa,CAAC;AAAA,EAEhC;AAEA,SAAIE,KAAc,2BAEbG,GAAA,EACC,UAAA;AAAA,IAAAC,gBAAAA,EAAAA,IAACC,GAAA,EAAqB,MAAM,IAAI,SAASJ,GAAa;AAAA,IACrDK,EAAO,GAAGN,IAAa,CAAC,EAAE,IAAIO,EAAcT,GAAYC,CAAa,CAAC;AAAA,IACvEK,gBAAAA,EAAAA,IAACI,GAAA,EAAsB,MAAM,IAAI,SAASN,EAAA,CAAa;AAAA,EAAA,GACzD,IAKFF,IAAa,MACbF,IAAa,KACZA,IAAaE,IAAa,KAAKF,KAAcE,2BAG3CG,GAAA,EACC,UAAA;AAAA,IAAAC,gBAAAA,EAAAA,IAACC,GAAA,EAAqB,MAAM,IAAI,SAASJ,GAAa;AAAA,IACrDK,EAAO,GAAG,CAAC,EAAE,IAAIC,EAAcT,GAAYC,CAAa,CAAC;AAAA,IACzDU,EAAA;AAAA,IACA,CAACT,IAAa,GAAGA,IAAa,GAAGA,IAAa,GAAGA,CAAU,EAAE;AAAA,MAC5DO,EAAcT,GAAYC,CAAa;AAAA,IAAA;AAAA,IAEzCK,gBAAAA,EAAAA,IAACI,GAAA,EAAsB,MAAM,IAAI,SAASN,EAAA,CAAa;AAAA,EAAA,GACzD,2BAKDC,GAAA,EACC,UAAA;AAAA,IAAAC,gBAAAA,EAAAA,IAACC,GAAA,EAAqB,MAAM,IAAI,SAASJ,GAAa;AAAA,IACrDK,EAAO,GAAG,CAAC,EAAE,IAAIC,EAAcT,GAAYC,CAAa,CAAC;AAAA,IACzDU,EAAA;AAAA,IACA,CAACX,IAAa,GAAGA,GAAYA,IAAa,CAAC,EAAE,IAAIS,EAAcT,GAAYC,CAAa,CAAC;AAAA,IACzFU,EAAA;AAAA,IACA,CAACT,IAAa,GAAGA,CAAU,EAAE,IAAIO,EAAcT,GAAYC,CAAa,CAAC;AAAA,IAC1EK,gBAAAA,EAAAA,IAACI,GAAA,EAAsB,MAAM,IAAI,SAASN,EAAA,CAAa;AAAA,EAAA,GACzD;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../src/components/Pagination/styles.js"],"sourcesContent":["// Libraries\nimport styled, { css } from 'styled-components';\n\n// Icons\nimport ChevronLeft from '../Icons/ChevronLeft';\nimport ChevronRight from '../Icons/ChevronRight';\n\n// constants\nimport { GREY, TEAL, WHITE } from '../../colors';\n\nexport const AllPages = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.6rem;\n min-width:
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../src/components/Pagination/styles.js"],"sourcesContent":["// Libraries\nimport styled, { css } from 'styled-components';\n\n// Icons\nimport ChevronLeft from '../Icons/ChevronLeft';\nimport ChevronRight from '../Icons/ChevronRight';\n\n// constants\nimport { GREY, TEAL, WHITE } from '../../colors';\n\nexport const AllPages = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.6rem;\n min-width: 100%;\n width: 100%;\n`;\n\nexport const Page = styled.div`\n height: 3rem;\n width: 3rem;\n border-radius: 50%;\n padding-top: 0.6rem;\n text-align: center;\n font-size: 1.4rem;\n ${({ isSelected }) =>\n isSelected\n ? css`\n cursor: auto;\n color: ${WHITE};\n background-color: ${TEAL};\n `\n : css`\n cursor: pointer;\n color: ${GREY};\n `}\n`;\n\nexport const P = styled.p`\n color: ${GREY};\n`;\n\nexport const ClickableChevronLeft = styled(ChevronLeft)`\n cursor: pointer;\n`;\n\nexport const ClickableChevronRight = styled(ChevronRight)`\n cursor: pointer;\n`;\n"],"names":["AllPages","styled","Page","isSelected","css","WHITE","TEAL","GREY","P","ClickableChevronLeft","ChevronLeft","ClickableChevronRight","ChevronRight"],"mappings":";;;;AAUY,MAACA,IAAWC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASlBC,IAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOvB,CAAC,EAAE,YAAAE,EAAU,MACbA,IACIC;AAAAA;AAAAA,mBAEWC,CAAK;AAAA,8BACMC,CAAI;AAAA,YAE1BF;AAAAA;AAAAA,mBAEWG,CAAI;AAAA,SACd;AAAA,GAGIC,IAAIP,EAAO;AAAA,WACbM,CAAI;AAAA,GAGFE,IAAuBR,EAAOS,CAAW;AAAA;AAAA,GAIzCC,IAAwBV,EAAOW,CAAY;AAAA;AAAA;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "meticulous-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -15,16 +15,31 @@
|
|
|
15
15
|
},
|
|
16
16
|
"keywords": [
|
|
17
17
|
"react",
|
|
18
|
-
"components",
|
|
19
18
|
"ui",
|
|
19
|
+
"icons",
|
|
20
|
+
"components",
|
|
21
|
+
"pagination",
|
|
20
22
|
"meticulous-ui"
|
|
21
23
|
],
|
|
22
24
|
"scripts": {
|
|
25
|
+
"dev": "vite",
|
|
23
26
|
"build": "vite build",
|
|
24
|
-
"format": "npx prettier --write ."
|
|
27
|
+
"format": "npx prettier --write .",
|
|
28
|
+
"publish:latest": "npm run build && npm publish --access public",
|
|
29
|
+
"storybook": "storybook dev -p 6006",
|
|
30
|
+
"build-storybook": "storybook build",
|
|
31
|
+
"deploy-storybook": "gh-pages -d storybook-static"
|
|
25
32
|
},
|
|
26
33
|
"dependencies": {
|
|
27
34
|
"@vitejs/plugin-react": "^5.0.4",
|
|
28
35
|
"lodash-es": "^4.17.21"
|
|
36
|
+
},
|
|
37
|
+
"devDependencies": {
|
|
38
|
+
"@storybook/addon-docs": "^9.1.10",
|
|
39
|
+
"@storybook/react-vite": "^9.1.10",
|
|
40
|
+
"eslint-plugin-storybook": "^9.1.10",
|
|
41
|
+
"gh-pages": "^6.3.0",
|
|
42
|
+
"prop-types": "^15.8.1",
|
|
43
|
+
"storybook": "^9.1.10"
|
|
29
44
|
}
|
|
30
45
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|