@gridui/pagination 0.0.0-stage → 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.
- package/README.md +7 -2
- package/dist/index.d.ts +9 -0
- package/dist/index.js +167 -0
- package/dist/index.js.map +7 -0
- package/dist/pagination/pagination.d.ts +26 -0
- package/dist/pagination/range.d.ts +8 -0
- package/dist/styles.css +77 -0
- package/package.json +49 -3
package/README.md
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @gridui/pagination
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Core family. Public API: `Pagination`, `PaginationLabels`, `PaginationProps`.
|
|
4
|
+
|
|
5
|
+
Import components from `@gridui/pagination` and load `@gridui/pagination/styles.css` after Theme.
|
|
6
|
+
Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.
|
|
7
|
+
|
|
8
|
+
See [component ownership](../../docs/component-ownership.md) and [release history](.changeset/history/).
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author WMXPY
|
|
3
|
+
* @package Pagination
|
|
4
|
+
* @namespace Root
|
|
5
|
+
* @description Index
|
|
6
|
+
*/
|
|
7
|
+
export type { PaginationLabels } from "./pagination/pagination";
|
|
8
|
+
export type { PaginationProps } from "./pagination/pagination";
|
|
9
|
+
export { Pagination } from "./pagination/pagination";
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
// src/pagination/range.ts
|
|
2
|
+
var paginationRange = (page, pageCount, compact = false) => {
|
|
3
|
+
if (!Number.isSafeInteger(pageCount) || pageCount < 0 || !Number.isSafeInteger(page) || page < 1) {
|
|
4
|
+
throw new RangeError("Pagination requires a positive integer page and a non-negative integer pageCount.");
|
|
5
|
+
}
|
|
6
|
+
if (pageCount === 0) {
|
|
7
|
+
return [];
|
|
8
|
+
}
|
|
9
|
+
if (pageCount <= (compact ? 5 : 7)) {
|
|
10
|
+
return Array.from({ length: pageCount }, (_, index) => {
|
|
11
|
+
return index + 1;
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
const current = Math.min(page, pageCount);
|
|
15
|
+
if (compact) {
|
|
16
|
+
const positions = [
|
|
17
|
+
.../* @__PURE__ */ new Set([
|
|
18
|
+
1,
|
|
19
|
+
current,
|
|
20
|
+
pageCount
|
|
21
|
+
])
|
|
22
|
+
];
|
|
23
|
+
const entries2 = [];
|
|
24
|
+
for (const [
|
|
25
|
+
index,
|
|
26
|
+
position
|
|
27
|
+
] of positions.entries()) {
|
|
28
|
+
if (index > 0 && position - positions[index - 1] > 1) {
|
|
29
|
+
entries2.push(position <= current ? "start-ellipsis" : "end-ellipsis");
|
|
30
|
+
}
|
|
31
|
+
entries2.push(position);
|
|
32
|
+
}
|
|
33
|
+
return entries2;
|
|
34
|
+
}
|
|
35
|
+
const start = Math.max(2, Math.min(current - 1, pageCount - 4));
|
|
36
|
+
const end = Math.min(pageCount - 1, Math.max(current + 1, 5));
|
|
37
|
+
const entries = [1];
|
|
38
|
+
if (start === 3) {
|
|
39
|
+
entries.push(2);
|
|
40
|
+
} else if (start > 3) {
|
|
41
|
+
entries.push("start-ellipsis");
|
|
42
|
+
}
|
|
43
|
+
for (let index = start; index <= end; index++) {
|
|
44
|
+
entries.push(index);
|
|
45
|
+
}
|
|
46
|
+
if (end === pageCount - 2) {
|
|
47
|
+
entries.push(pageCount - 1);
|
|
48
|
+
} else if (end < pageCount - 2) {
|
|
49
|
+
entries.push("end-ellipsis");
|
|
50
|
+
}
|
|
51
|
+
entries.push(pageCount);
|
|
52
|
+
return entries;
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
// src/pagination/pagination.tsx
|
|
56
|
+
import { Button, ButtonLink } from "@gridui/button";
|
|
57
|
+
import { cn } from "@gridui/style-utils";
|
|
58
|
+
import { ChevronLeft, ChevronRight, Ellipsis } from "lucide-react";
|
|
59
|
+
import { Fragment } from "react";
|
|
60
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
61
|
+
var Pagination = (props) => {
|
|
62
|
+
const { page, pageCount, labels, onPageChange, getPageHref, className, ...restProps } = props;
|
|
63
|
+
const entries = paginationRange(page, pageCount);
|
|
64
|
+
const compactEntries = paginationRange(page, pageCount, true);
|
|
65
|
+
const current = Math.max(1, Math.min(page, pageCount));
|
|
66
|
+
const control = (target, label, children, disabled, active = false) => {
|
|
67
|
+
const shared = {
|
|
68
|
+
"aria-label": label,
|
|
69
|
+
"aria-current": active ? "page" : void 0,
|
|
70
|
+
variant: active ? "secondary" : "quiet",
|
|
71
|
+
layout: "icon",
|
|
72
|
+
className: typeof children === "number" ? "h-auto min-h-11 w-auto min-w-11 px-gridui-8 whitespace-nowrap" : void 0
|
|
73
|
+
};
|
|
74
|
+
if (getPageHref && !disabled) {
|
|
75
|
+
return /* @__PURE__ */ jsx(
|
|
76
|
+
ButtonLink,
|
|
77
|
+
{
|
|
78
|
+
...shared,
|
|
79
|
+
href: getPageHref(target),
|
|
80
|
+
children
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
return /* @__PURE__ */ jsx(
|
|
85
|
+
Button,
|
|
86
|
+
{
|
|
87
|
+
...shared,
|
|
88
|
+
disabled,
|
|
89
|
+
onClick: () => {
|
|
90
|
+
if (target !== current) {
|
|
91
|
+
onPageChange?.(target);
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
children
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
};
|
|
98
|
+
const renderEntry = (entry, entryClassName) => {
|
|
99
|
+
return /* @__PURE__ */ jsx(
|
|
100
|
+
"li",
|
|
101
|
+
{
|
|
102
|
+
className: entryClassName,
|
|
103
|
+
children: typeof entry === "number" ? control(entry, labels.page(entry), entry, false, entry === current) : /* @__PURE__ */ jsx(
|
|
104
|
+
"span",
|
|
105
|
+
{
|
|
106
|
+
role: "img",
|
|
107
|
+
className: "inline-flex min-h-11 min-w-11 items-center justify-center text-muted",
|
|
108
|
+
"aria-label": labels.ellipsis,
|
|
109
|
+
children: /* @__PURE__ */ jsx(
|
|
110
|
+
Ellipsis,
|
|
111
|
+
{
|
|
112
|
+
"aria-hidden": "true"
|
|
113
|
+
}
|
|
114
|
+
)
|
|
115
|
+
}
|
|
116
|
+
)
|
|
117
|
+
}
|
|
118
|
+
);
|
|
119
|
+
};
|
|
120
|
+
return /* @__PURE__ */ jsx(
|
|
121
|
+
"nav",
|
|
122
|
+
{
|
|
123
|
+
...restProps,
|
|
124
|
+
"aria-label": labels.navigation,
|
|
125
|
+
className: cn("min-w-0", className),
|
|
126
|
+
children: /* @__PURE__ */ jsxs(
|
|
127
|
+
"ul",
|
|
128
|
+
{
|
|
129
|
+
className: "m-0 flex list-none flex-wrap items-center gap-0 p-0 md:gap-gridui-4",
|
|
130
|
+
children: [
|
|
131
|
+
/* @__PURE__ */ jsx("li", { children: control(current - 1, labels.previous, /* @__PURE__ */ jsx(
|
|
132
|
+
ChevronLeft,
|
|
133
|
+
{
|
|
134
|
+
className: "rtl:rotate-180",
|
|
135
|
+
"aria-hidden": "true"
|
|
136
|
+
}
|
|
137
|
+
), pageCount === 0 || current === 1) }),
|
|
138
|
+
entries.map((entry) => {
|
|
139
|
+
return /* @__PURE__ */ jsxs(
|
|
140
|
+
Fragment,
|
|
141
|
+
{
|
|
142
|
+
children: [
|
|
143
|
+
entry === pageCount && compactEntries.includes("end-ellipsis") && !entries.includes("end-ellipsis") && renderEntry("end-ellipsis", "md:hidden"),
|
|
144
|
+
renderEntry(entry, compactEntries.includes(entry) ? void 0 : "hidden md:block"),
|
|
145
|
+
entry === 1 && compactEntries.includes("start-ellipsis") && !entries.includes("start-ellipsis") && renderEntry("start-ellipsis", "md:hidden")
|
|
146
|
+
]
|
|
147
|
+
},
|
|
148
|
+
entry
|
|
149
|
+
);
|
|
150
|
+
}),
|
|
151
|
+
/* @__PURE__ */ jsx("li", { children: control(current + 1, labels.next, /* @__PURE__ */ jsx(
|
|
152
|
+
ChevronRight,
|
|
153
|
+
{
|
|
154
|
+
className: "rtl:rotate-180",
|
|
155
|
+
"aria-hidden": "true"
|
|
156
|
+
}
|
|
157
|
+
), pageCount === 0 || current >= pageCount) })
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
)
|
|
161
|
+
}
|
|
162
|
+
);
|
|
163
|
+
};
|
|
164
|
+
export {
|
|
165
|
+
Pagination
|
|
166
|
+
};
|
|
167
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/pagination/range.ts", "../src/pagination/pagination.tsx"],
|
|
4
|
+
"sourcesContent": ["/**\n * @author WMXPY\n * @package Pagination\n * @namespace Pagination\n * @description Range\n */\n\nexport type PaginationEntry = number | \"start-ellipsis\" | \"end-ellipsis\";\n\nexport const paginationRange = (page: number, pageCount: number, compact = false): PaginationEntry[] => {\n if (!Number.isSafeInteger(pageCount) || pageCount < 0 || !Number.isSafeInteger(page) || page < 1) {\n throw new RangeError(\"Pagination requires a positive integer page and a non-negative integer pageCount.\");\n }\n if (pageCount === 0) {\n return [];\n }\n if (pageCount <= (compact ? 5 : 7)) {\n return Array.from({ length: pageCount }, (_, index) => {\n return index + 1;\n });\n }\n const current = Math.min(page, pageCount);\n if (compact) {\n const positions = [\n ...new Set([\n 1,\n current,\n pageCount,\n ]),\n ];\n const entries: PaginationEntry[] = [];\n for (const [\n index,\n position,\n ] of positions.entries()) {\n if (index > 0 && position - positions[index - 1]! > 1) {\n entries.push(position <= current ? \"start-ellipsis\" : \"end-ellipsis\");\n }\n entries.push(position);\n }\n return entries;\n }\n const start = Math.max(2, Math.min(current - 1, pageCount - 4));\n const end = Math.min(pageCount - 1, Math.max(current + 1, 5));\n const entries: PaginationEntry[] = [1];\n if (start === 3) {\n entries.push(2);\n } else if (start > 3) {\n entries.push(\"start-ellipsis\");\n }\n for (let index = start; index <= end; index++) { entries.push(index); }\n if (end === pageCount - 2) {\n entries.push(pageCount - 1);\n } else if (end < pageCount - 2) {\n entries.push(\"end-ellipsis\");\n }\n entries.push(pageCount);\n return entries;\n};\n", "/**\n * @author WMXPY\n * @package Pagination\n * @namespace Pagination\n * @description Pagination\n */\n\nimport { type PaginationEntry, paginationRange } from \"./range\";\nimport { Button, ButtonLink } from \"@gridui/button\";\nimport { cn } from \"@gridui/style-utils\";\nimport { ChevronLeft, ChevronRight, Ellipsis } from \"lucide-react\";\nimport { type ComponentPropsWithRef, type FC, Fragment, type ReactNode } from \"react\";\n\nexport type PaginationLabels = {\n readonly navigation: string;\n readonly previous: string;\n readonly next: string;\n readonly page: (page: number) => string;\n readonly ellipsis: string;\n};\n\nexport type PaginationProps = Omit<ComponentPropsWithRef<\"nav\">, \"children\" | \"aria-label\"> & {\n readonly page: number;\n readonly pageCount: number;\n readonly labels: PaginationLabels;\n} & ({\n readonly onPageChange: (page: number) => void;\n readonly getPageHref?: never;\n} | {\n readonly getPageHref: (page: number) => string;\n readonly onPageChange?: never;\n});\n\nexport const Pagination: FC<PaginationProps> = (props: PaginationProps) => {\n const { page, pageCount, labels, onPageChange, getPageHref, className, ...restProps } = props;\n const entries = paginationRange(page, pageCount);\n const compactEntries = paginationRange(page, pageCount, true);\n const current = Math.max(1, Math.min(page, pageCount));\n const control = (target: number, label: string, children: ReactNode, disabled: boolean, active = false) => {\n const shared = {\n \"aria-label\": label,\n \"aria-current\": active ? \"page\" as const : undefined,\n variant: active ? \"secondary\" as const : \"quiet\" as const,\n layout: \"icon\" as const,\n className: typeof children === \"number\" ? \"h-auto min-h-11 w-auto min-w-11 px-gridui-8 whitespace-nowrap\" : undefined,\n };\n if (getPageHref && !disabled) {\n return (<ButtonLink\n {...shared}\n href={getPageHref(target)}\n >\n {children}\n </ButtonLink>);\n }\n return (<Button\n {...shared}\n disabled={disabled}\n onClick={() => {\n if (target !== current) {\n onPageChange?.(target);\n }\n }}\n >\n {children}\n </Button>);\n };\n const renderEntry = (entry: PaginationEntry, entryClassName?: string) => {\n return (<li\n className={entryClassName}\n >\n {typeof entry === \"number\"\n ? control(entry, labels.page(entry), entry, false, entry === current)\n : (<span\n role=\"img\"\n className=\"inline-flex min-h-11 min-w-11 items-center justify-center text-muted\"\n aria-label={labels.ellipsis}\n >\n <Ellipsis\n aria-hidden=\"true\"\n />\n </span>)}\n </li>);\n };\n return (<nav\n {...restProps}\n aria-label={labels.navigation}\n className={cn(\"min-w-0\", className)}\n >\n <ul\n className=\"m-0 flex list-none flex-wrap items-center gap-0 p-0 md:gap-gridui-4\"\n >\n <li>\n {control(current - 1, labels.previous, (<ChevronLeft\n className=\"rtl:rotate-180\"\n aria-hidden=\"true\"\n />), pageCount === 0 || current === 1)}\n </li>\n {entries.map(entry => {\n return (<Fragment\n key={entry}\n >\n {entry === pageCount && compactEntries.includes(\"end-ellipsis\") && !entries.includes(\"end-ellipsis\")\n && renderEntry(\"end-ellipsis\", \"md:hidden\")}\n {renderEntry(entry, compactEntries.includes(entry) ? undefined : \"hidden md:block\")}\n {entry === 1 && compactEntries.includes(\"start-ellipsis\") && !entries.includes(\"start-ellipsis\")\n && renderEntry(\"start-ellipsis\", \"md:hidden\")}\n </Fragment>);\n })}\n <li>\n {control(current + 1, labels.next, (<ChevronRight\n className=\"rtl:rotate-180\"\n aria-hidden=\"true\"\n />), pageCount === 0 || current >= pageCount)}\n </li>\n </ul>\n </nav>);\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["entries"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author WMXPY
|
|
3
|
+
* @package Pagination
|
|
4
|
+
* @namespace Pagination
|
|
5
|
+
* @description Pagination
|
|
6
|
+
*/
|
|
7
|
+
import { type ComponentPropsWithRef, type FC } from "react";
|
|
8
|
+
export type PaginationLabels = {
|
|
9
|
+
readonly navigation: string;
|
|
10
|
+
readonly previous: string;
|
|
11
|
+
readonly next: string;
|
|
12
|
+
readonly page: (page: number) => string;
|
|
13
|
+
readonly ellipsis: string;
|
|
14
|
+
};
|
|
15
|
+
export type PaginationProps = Omit<ComponentPropsWithRef<"nav">, "children" | "aria-label"> & {
|
|
16
|
+
readonly page: number;
|
|
17
|
+
readonly pageCount: number;
|
|
18
|
+
readonly labels: PaginationLabels;
|
|
19
|
+
} & ({
|
|
20
|
+
readonly onPageChange: (page: number) => void;
|
|
21
|
+
readonly getPageHref?: never;
|
|
22
|
+
} | {
|
|
23
|
+
readonly getPageHref: (page: number) => string;
|
|
24
|
+
readonly onPageChange?: never;
|
|
25
|
+
});
|
|
26
|
+
export declare const Pagination: FC<PaginationProps>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author WMXPY
|
|
3
|
+
* @package Pagination
|
|
4
|
+
* @namespace Pagination
|
|
5
|
+
* @description Range
|
|
6
|
+
*/
|
|
7
|
+
export type PaginationEntry = number | "start-ellipsis" | "end-ellipsis";
|
|
8
|
+
export declare const paginationRange: (page: number, pageCount: number, compact?: boolean) => PaginationEntry[];
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer theme, base, components, utilities;
|
|
3
|
+
@layer theme {
|
|
4
|
+
:root, :host {
|
|
5
|
+
--spacing: 0.25rem;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
@layer utilities {
|
|
9
|
+
.m-0 {
|
|
10
|
+
margin: 0px;
|
|
11
|
+
}
|
|
12
|
+
.flex {
|
|
13
|
+
display: flex;
|
|
14
|
+
}
|
|
15
|
+
.hidden {
|
|
16
|
+
display: none;
|
|
17
|
+
}
|
|
18
|
+
.inline-flex {
|
|
19
|
+
display: inline-flex;
|
|
20
|
+
}
|
|
21
|
+
.h-auto {
|
|
22
|
+
height: auto;
|
|
23
|
+
}
|
|
24
|
+
.min-h-11 {
|
|
25
|
+
min-height: calc(var(--spacing) * 11);
|
|
26
|
+
}
|
|
27
|
+
.w-auto {
|
|
28
|
+
width: auto;
|
|
29
|
+
}
|
|
30
|
+
.min-w-0 {
|
|
31
|
+
min-width: 0px;
|
|
32
|
+
}
|
|
33
|
+
.min-w-11 {
|
|
34
|
+
min-width: calc(var(--spacing) * 11);
|
|
35
|
+
}
|
|
36
|
+
.list-none {
|
|
37
|
+
list-style-type: none;
|
|
38
|
+
}
|
|
39
|
+
.flex-wrap {
|
|
40
|
+
flex-wrap: wrap;
|
|
41
|
+
}
|
|
42
|
+
.items-center {
|
|
43
|
+
align-items: center;
|
|
44
|
+
}
|
|
45
|
+
.justify-center {
|
|
46
|
+
justify-content: center;
|
|
47
|
+
}
|
|
48
|
+
.gap-0 {
|
|
49
|
+
gap: 0px;
|
|
50
|
+
}
|
|
51
|
+
.p-0 {
|
|
52
|
+
padding: 0px;
|
|
53
|
+
}
|
|
54
|
+
.px-gridui-8 {
|
|
55
|
+
padding-inline: var(--gridui-space-8);
|
|
56
|
+
}
|
|
57
|
+
.whitespace-nowrap {
|
|
58
|
+
white-space: nowrap;
|
|
59
|
+
}
|
|
60
|
+
.text-muted {
|
|
61
|
+
color: var(--gridui-muted);
|
|
62
|
+
}
|
|
63
|
+
@media (width >= 48rem) {
|
|
64
|
+
.md\:block {
|
|
65
|
+
display: block;
|
|
66
|
+
}
|
|
67
|
+
.md\:hidden {
|
|
68
|
+
display: none;
|
|
69
|
+
}
|
|
70
|
+
.md\:gap-gridui-4 {
|
|
71
|
+
gap: var(--gridui-space-4);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
.rtl\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
|
|
75
|
+
rotate: 180deg;
|
|
76
|
+
}
|
|
77
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,52 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gridui/pagination",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "GridUI React pagination",
|
|
5
|
+
"license": "UNLICENSED",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist",
|
|
9
|
+
"README.md"
|
|
10
|
+
],
|
|
11
|
+
"sideEffects": [
|
|
12
|
+
"**/*.css"
|
|
13
|
+
],
|
|
14
|
+
"exports": {
|
|
15
|
+
".": {
|
|
16
|
+
"types": "./dist/index.d.ts",
|
|
17
|
+
"import": "./dist/index.js"
|
|
18
|
+
},
|
|
19
|
+
"./styles.css": "./dist/styles.css"
|
|
20
|
+
},
|
|
21
|
+
"publishConfig": {
|
|
22
|
+
"access": "public"
|
|
23
|
+
},
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"react": "^19.2.0",
|
|
26
|
+
"react-dom": "^19.2.0"
|
|
27
|
+
},
|
|
28
|
+
"dependencies": {
|
|
29
|
+
"@gridui/button": "^2.1.1",
|
|
30
|
+
"@gridui/style-utils": "^2.1.2",
|
|
31
|
+
"@gridui/theme": "^2.1.2",
|
|
32
|
+
"lucide-react": "1.62.0"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@gridui-internal/configuration": "0.0.0",
|
|
36
|
+
"@jest/globals": "30.5.2",
|
|
37
|
+
"@types/jest": "30.0.0",
|
|
38
|
+
"@types/node": "26.6.5",
|
|
39
|
+
"@types/react": "19.3.0",
|
|
40
|
+
"@types/react-dom": "19.3.0",
|
|
41
|
+
"jest": "30.5.2",
|
|
42
|
+
"react": "19.3.1",
|
|
43
|
+
"react-dom": "19.3.1",
|
|
44
|
+
"typescript": "6.0.3"
|
|
45
|
+
},
|
|
46
|
+
"scripts": {
|
|
47
|
+
"build": "node ../../scripts/compilation/package.ts",
|
|
48
|
+
"compile": "tsc --project tsconfig.json",
|
|
49
|
+
"test": "jest",
|
|
50
|
+
"coverage": "jest --coverage"
|
|
51
|
+
}
|
|
6
52
|
}
|