meticulous-ui 1.0.1 â 1.0.3
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 +74 -0
- package/dist/_virtual/react-jsx-runtime.production.min.js +5 -0
- package/dist/_virtual/react-jsx-runtime.production.min.js.map +1 -0
- package/dist/components/Icons/ChevronLeft/ChevronLeft.js.map +1 -1
- package/dist/components/Icons/ChevronRight/ChevronRight.js.map +1 -1
- package/dist/components/Pagination/Pagination.js +4 -28
- package/dist/components/Pagination/Pagination.js.map +1 -1
- package/dist/components/Pagination/helpers.js +9 -1
- package/dist/components/Pagination/helpers.js.map +1 -1
- package/dist/node_modules/react/cjs/react-jsx-runtime.development.js +553 -194
- package/dist/node_modules/react/cjs/react-jsx-runtime.development.js.map +1 -1
- package/dist/node_modules/react/cjs/react-jsx-runtime.production.min.js +29 -0
- package/dist/node_modules/react/cjs/react-jsx-runtime.production.min.js.map +1 -0
- package/dist/node_modules/react/jsx-runtime.js +3 -3
- package/dist/node_modules/react/jsx-runtime.js.map +1 -1
- package/package.json +8 -4
- package/dist/_virtual/react-jsx-runtime.production.js +0 -5
- package/dist/_virtual/react-jsx-runtime.production.js.map +0 -1
- package/dist/node_modules/react/cjs/react-jsx-runtime.production.js +0 -36
- package/dist/node_modules/react/cjs/react-jsx-runtime.production.js.map +0 -1
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# meticulous-ui
|
|
2
|
+
|
|
3
|
+
A lightweight, modern React component library designed for elegance and precision â¨
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## đ Installation
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
npm install meticulous-ui
|
|
12
|
+
# or
|
|
13
|
+
yarn add meticulous-ui
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## 𧊠Usage
|
|
18
|
+
|
|
19
|
+
```jsx
|
|
20
|
+
|
|
21
|
+
import React from "react";
|
|
22
|
+
import { Pagination } from "meticulous-ui";
|
|
23
|
+
|
|
24
|
+
function App() {
|
|
25
|
+
return (
|
|
26
|
+
<div>
|
|
27
|
+
<h2>Example with Pagination</h2>
|
|
28
|
+
<Pagination totalPages={10} currentPage={1} />
|
|
29
|
+
</div>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export default App;
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## đĻ Components
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
| Component | Description |
|
|
42
|
+
| -------------- | ------------------------------------- |
|
|
43
|
+
| `Pagination` | Fully responsive pagination component |
|
|
44
|
+
| `ChevronLeft` | Left navigation icon |
|
|
45
|
+
| `ChevronRight` | Right navigation icon |
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## đą Features
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
âī¸ Built with React + Styled Components
|
|
54
|
+
đ¨ Zero external CSS dependencies
|
|
55
|
+
𧹠Easy to extend and customize
|
|
56
|
+
đĒļ Small bundle size
|
|
57
|
+
đĻ ESM + CJS support out of the box
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## đ ī¸ Build Setup (for contributors)
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
# install dependencies
|
|
66
|
+
npm install
|
|
67
|
+
|
|
68
|
+
# run development build
|
|
69
|
+
npm run dev
|
|
70
|
+
|
|
71
|
+
# build for production (dist/)
|
|
72
|
+
npm run build
|
|
73
|
+
|
|
74
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"react-jsx-runtime.production.min.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChevronLeft.js","sources":["../../../../src/components/Icons/ChevronLeft/ChevronLeft.jsx"],"sourcesContent":["// Libraries\nimport styled from 'styled-components';\n\n// constants\nimport { GREY } from '../../../colors';\n\nconst Image = styled.img`\n display: inline-block;\n vertical-align: middle;\n fill: ${({ color }) => color};\n`;\n\nconst ChevronLeft = (props) => {\n const {color, size} = props;\n\n return (\n <Image\n {...props}\n color={color || GREY}\n src
|
|
1
|
+
{"version":3,"file":"ChevronLeft.js","sources":["../../../../src/components/Icons/ChevronLeft/ChevronLeft.jsx"],"sourcesContent":["// Libraries\nimport styled from 'styled-components';\n\n// constants\nimport { GREY } from '../../../colors';\n\nconst Image = styled.img`\n display: inline-block;\n vertical-align: middle;\n fill: ${({ color }) => color};\n`;\n\nconst ChevronLeft = (props) => {\n const { color, size } = props;\n\n return (\n <Image\n {...props}\n color={color || GREY}\n src='https://www.svgrepo.com/show/533659/chevron-left.svg'\n alt='Chevron Left'\n width={size}\n height={size}\n />\n );\n};\n\nexport default ChevronLeft;\n"],"names":["Image","styled","color","ChevronLeft","props","size","jsx","GREY"],"mappings":";;;AAMA,MAAMA,IAAQC,EAAO;AAAA;AAAA;AAAA,UAGX,CAAC,EAAE,OAAAC,EAAA,MAAYA,CAAK;AAAA,GAGxBC,IAAc,CAACC,MAAU;AAC7B,QAAM,EAAE,OAAAF,GAAO,MAAAG,EAAA,IAASD;AAExB,SACEE,gBAAAA,EAAAA;AAAAA,IAACN;AAAA,IAAA;AAAA,MACE,GAAGI;AAAA,MACJ,OAAOF,KAASK;AAAA,MAChB,KAAI;AAAA,MACJ,KAAI;AAAA,MACJ,OAAOF;AAAA,MACP,QAAQA;AAAA,IAAA;AAAA,EAAA;AAGd;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChevronRight.js","sources":["../../../../src/components/Icons/ChevronRight/ChevronRight.jsx"],"sourcesContent":["// Libraries\nimport styled from 'styled-components';\n\n// constants\nimport { GREY } from '../../../colors';\n\nconst Image = styled.img`\n display: inline-block;\n vertical-align: middle;\n fill: ${({ color }) => color};\n`;\n\nconst ChevronRight = (props) => {\n const {color, size} = props;\n\n return (\n <Image\n {...props}\n color={color || GREY}\n src
|
|
1
|
+
{"version":3,"file":"ChevronRight.js","sources":["../../../../src/components/Icons/ChevronRight/ChevronRight.jsx"],"sourcesContent":["// Libraries\nimport styled from 'styled-components';\n\n// constants\nimport { GREY } from '../../../colors';\n\nconst Image = styled.img`\n display: inline-block;\n vertical-align: middle;\n fill: ${({ color }) => color};\n`;\n\nconst ChevronRight = (props) => {\n const { color, size } = props;\n\n return (\n <Image\n {...props}\n color={color || GREY}\n src='https://www.svgrepo.com/show/533661/chevron-right.svg'\n alt='Chevron Right'\n width={size}\n height={size}\n />\n );\n};\n\nexport default ChevronRight;\n"],"names":["Image","styled","color","ChevronRight","props","size","jsx","GREY"],"mappings":";;;AAMA,MAAMA,IAAQC,EAAO;AAAA;AAAA;AAAA,UAGX,CAAC,EAAE,OAAAC,EAAA,MAAYA,CAAK;AAAA,GAGxBC,IAAe,CAACC,MAAU;AAC9B,QAAM,EAAE,OAAAF,GAAO,MAAAG,EAAA,IAASD;AAExB,SACEE,gBAAAA,EAAAA;AAAAA,IAACN;AAAA,IAAA;AAAA,MACE,GAAGI;AAAA,MACJ,OAAOF,KAASK;AAAA,MAChB,KAAI;AAAA,MACJ,KAAI;AAAA,MACJ,OAAOF;AAAA,MACP,QAAQA;AAAA,IAAA;AAAA,EAAA;AAGd;"}
|
|
@@ -13,45 +13,21 @@ const R = ({ pageNumber: i, setPageNumber: x, totalPages: n }) => {
|
|
|
13
13
|
f(1, n + 1).map(o(i, x)),
|
|
14
14
|
/* @__PURE__ */ c.jsx(h, { onClick: j })
|
|
15
15
|
] }) : n < 10 || i < 4 || i > n - 3 && i <= n ? /* @__PURE__ */ c.jsxs(s, { children: [
|
|
16
|
-
/* @__PURE__ */ c.jsx(
|
|
17
|
-
k,
|
|
18
|
-
{
|
|
19
|
-
size: 20,
|
|
20
|
-
onClick: j
|
|
21
|
-
}
|
|
22
|
-
),
|
|
16
|
+
/* @__PURE__ */ c.jsx(k, { size: 20, onClick: j }),
|
|
23
17
|
f(1, 5).map(o(i, x)),
|
|
24
18
|
C(),
|
|
25
19
|
[n - 3, n - 2, n - 1, n].map(
|
|
26
20
|
o(i, x)
|
|
27
21
|
),
|
|
28
|
-
/* @__PURE__ */ c.jsx(
|
|
29
|
-
h,
|
|
30
|
-
{
|
|
31
|
-
size: 20,
|
|
32
|
-
onClick: d
|
|
33
|
-
}
|
|
34
|
-
)
|
|
22
|
+
/* @__PURE__ */ c.jsx(h, { size: 20, onClick: d })
|
|
35
23
|
] }) : /* @__PURE__ */ c.jsxs(s, { children: [
|
|
36
|
-
/* @__PURE__ */ c.jsx(
|
|
37
|
-
k,
|
|
38
|
-
{
|
|
39
|
-
size: 20,
|
|
40
|
-
onClick: j
|
|
41
|
-
}
|
|
42
|
-
),
|
|
24
|
+
/* @__PURE__ */ c.jsx(k, { size: 20, onClick: j }),
|
|
43
25
|
f(1, 3).map(o(i, x)),
|
|
44
26
|
C(),
|
|
45
27
|
[i - 1, i, i + 1].map(o(i, x)),
|
|
46
28
|
C(),
|
|
47
29
|
[n - 1, n].map(o(i, x)),
|
|
48
|
-
/* @__PURE__ */ c.jsx(
|
|
49
|
-
h,
|
|
50
|
-
{
|
|
51
|
-
size: 20,
|
|
52
|
-
onClick: d
|
|
53
|
-
}
|
|
54
|
-
)
|
|
30
|
+
/* @__PURE__ */ c.jsx(h, { size: 20, onClick: d })
|
|
55
31
|
] });
|
|
56
32
|
};
|
|
57
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={setPrevPage} />\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
|
|
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={setPrevPage} />\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,SAASJ,EAAA,CAAa;AAAA,IAC3CK,EAAO,GAAGN,IAAa,CAAC,EAAE,IAAIO,EAAcT,GAAYC,CAAa,CAAC;AAAA,IACvEK,gBAAAA,EAAAA,IAACI,GAAA,EAAsB,SAASP,EAAA,CAAa;AAAA,EAAA,GAC/C,IAKFD,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;"}
|
|
@@ -4,7 +4,15 @@ const l = (n, s) => (e) => {
|
|
|
4
4
|
const c = () => {
|
|
5
5
|
s(e);
|
|
6
6
|
};
|
|
7
|
-
return /* @__PURE__ */ r.jsx(
|
|
7
|
+
return /* @__PURE__ */ r.jsx(
|
|
8
|
+
i,
|
|
9
|
+
{
|
|
10
|
+
"data-testid": n === e ? "current-page" : `test-${e}`,
|
|
11
|
+
isSelected: n === e,
|
|
12
|
+
onClick: c,
|
|
13
|
+
children: e
|
|
14
|
+
}
|
|
15
|
+
);
|
|
8
16
|
}, x = () => /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
|
|
9
17
|
/* @__PURE__ */ r.jsx(t, { children: "." }),
|
|
10
18
|
/* @__PURE__ */ r.jsx(t, { children: "." }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sources":["../../../src/components/Pagination/helpers.jsx"],"sourcesContent":["import { Page, P } from './styles';\n\nexport const renderPageNum = (selected, setPageNumber) => (page) => {\n const clickHandler = () => {\n setPageNumber(page);\n };\n\n return (\n <Page
|
|
1
|
+
{"version":3,"file":"helpers.js","sources":["../../../src/components/Pagination/helpers.jsx"],"sourcesContent":["import { Page, P } from './styles';\n\nexport const renderPageNum = (selected, setPageNumber) => (page) => {\n const clickHandler = () => {\n setPageNumber(page);\n };\n\n return (\n <Page\n data-testid={selected === page ? 'current-page' : `test-${page}`}\n isSelected={selected === page}\n onClick={clickHandler}\n >\n {page}\n </Page>\n );\n};\n\nexport const renderThreeDots = () => (\n <>\n <P>.</P>\n <P>.</P>\n <P>.</P>\n </>\n);\n"],"names":["renderPageNum","selected","setPageNumber","page","clickHandler","jsx","Page","renderThreeDots","jsxs","Fragment","P"],"mappings":";;AAEO,MAAMA,IAAgB,CAACC,GAAUC,MAAkB,CAACC,MAAS;AAClE,QAAMC,IAAe,MAAM;AACzB,IAAAF,EAAcC,CAAI;AAAA,EACpB;AAEA,SACEE,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAaL,MAAaE,IAAO,iBAAiB,QAAQA,CAAI;AAAA,MAC9D,YAAYF,MAAaE;AAAA,MACzB,SAASC;AAAA,MAER,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaI,IAAkB,MAC7BC,gBAAAA,EAAAA,KAAAC,EAAAA,UAAA,EACE,UAAA;AAAA,EAAAJ,gBAAAA,EAAAA,IAACK,KAAE,UAAA,IAAA,CAAC;AAAA,EACJL,gBAAAA,EAAAA,IAACK,KAAE,UAAA,IAAA,CAAC;AAAA,EACJL,gBAAAA,EAAAA,IAACK,KAAE,UAAA,IAAA,CAAC;AAAA,EAAA,CACN;"}
|