@appcorp/kismaa-web-ui 0.2.97 → 0.2.99
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/molecules/badge-list/badge-list.d.ts +3 -0
- package/molecules/badge-list/badge-list.js +8 -0
- package/molecules/badge-list/index.d.ts +2 -0
- package/molecules/badge-list/index.js +2 -0
- package/molecules/badge-list/type.d.ts +3 -0
- package/molecules/badge-list/type.js +1 -0
- package/molecules/index.d.ts +1 -0
- package/molecules/index.js +1 -0
- package/organisms/contact-section/kismaa-text-area.js +1 -1
- package/organisms/contact-section/kismaa-text-input.js +1 -1
- package/organisms/pagination/pagination.js +1 -4
- package/organisms/review-section/props.js +34 -36
- package/organisms/review-section/review-section.js +14 -8
- package/organisms/review-section/type.d.ts +8 -2
- package/package.json +4 -4
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export var BadgeList = function (_a) {
|
|
3
|
+
var items = _a.items;
|
|
4
|
+
if (!items || items.length === 0) {
|
|
5
|
+
return null;
|
|
6
|
+
}
|
|
7
|
+
return (React.createElement("div", { className: "flex flex-wrap gap-2" }, items.map(function (item) { return (React.createElement("span", { key: item, className: "inline-flex items-center rounded-full bg-purple-100 px-3 py-1 text-xs font-medium text-purple-800" }, item)); })));
|
|
8
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/molecules/index.d.ts
CHANGED
package/molecules/index.js
CHANGED
|
@@ -7,5 +7,5 @@ export var KismaaTextArea = function (_a) {
|
|
|
7
7
|
return handleOnChange(id, e.target.value);
|
|
8
8
|
}, placeholder: placeholder, required: required, "aria-required": required, "aria-invalid": !!error, "aria-describedby": error ? "".concat(id, "-error") : undefined, rows: 10, value: value }),
|
|
9
9
|
required && (React.createElement("span", { "aria-hidden": "true", className: "absolute top-6 right-3 text-red-500 select-none" }, "*"))),
|
|
10
|
-
error && (React.createElement("p", { id: "".concat(id, "-error"), className: "mt-
|
|
10
|
+
error && (React.createElement("p", { id: "".concat(id, "-error"), className: "mt-1 text-sm text-red-600" }, error))));
|
|
11
11
|
};
|
|
@@ -7,5 +7,5 @@ export var KismaaTextInput = function (_a) {
|
|
|
7
7
|
return handleOnChange(id, e.target.value);
|
|
8
8
|
}, placeholder: placeholder, required: required, type: type, value: value, "aria-required": required, "aria-invalid": !!error, "aria-describedby": error ? "".concat(id, "-error") : undefined }),
|
|
9
9
|
required && (React.createElement("span", { "aria-hidden": "true", className: "absolute top-1/2 right-3 -translate-y-1/2 text-red-500 select-none" }, "*"))),
|
|
10
|
-
error && (React.createElement("p", { id: "".concat(id, "-error"), className: "mt-
|
|
10
|
+
error && (React.createElement("p", { id: "".concat(id, "-error"), className: "mt-1 text-sm text-red-600" }, error))));
|
|
11
11
|
};
|
|
@@ -3,13 +3,10 @@ import { ArrowLeftIcon } from '../../atoms/arrow-left-icon';
|
|
|
3
3
|
import { ArrowRightIcon } from '../../atoms/arrow-right-icon';
|
|
4
4
|
import { Button, BUTTON_SIZES, BUTTON_TYPES } from '../../molecules';
|
|
5
5
|
export var Pagination = function (_a) {
|
|
6
|
-
var currentPage = _a.currentPage, totalPages = _a.totalPages,
|
|
7
|
-
var pageNumbers = Array.from({ length: totalPages }, function (_, index) { return index + 1; });
|
|
6
|
+
var currentPage = _a.currentPage, totalPages = _a.totalPages, onPrevious = _a.onPrevious, onNext = _a.onNext;
|
|
8
7
|
var renderButton = function (label, isDisabled, onClick, type, iconPrefix, iconSuffix) { return (React.createElement(Button, { label: label, disabled: isDisabled, handleOnClick: onClick, type: type, size: BUTTON_SIZES.SM, iconPrefix: iconPrefix, iconSuffix: iconSuffix })); };
|
|
9
|
-
var renderPageButton = function (number) { return (React.createElement(Button, { key: number, type: currentPage === number ? BUTTON_TYPES.PRIMARY : BUTTON_TYPES.TERTIARY, size: BUTTON_SIZES.SM, label: String(number), outlined: currentPage === number, handleOnClick: function () { return onPageChange(number); } })); };
|
|
10
8
|
return (React.createElement("div", { className: "flex items-center justify-center space-x-2", "aria-label": "Pagination" },
|
|
11
9
|
React.createElement("div", { className: "w-fit" }, renderButton('Prev', currentPage === 1, onPrevious, currentPage === 1 ? BUTTON_TYPES.TERTIARY : BUTTON_TYPES.PRIMARY, React.createElement(ArrowLeftIcon, { className: "size-3", fill: "currentColor" }))),
|
|
12
|
-
React.createElement("div", { className: "hidden sm:flex sm:items-center sm:space-x-2" }, pageNumbers.map(renderPageButton)),
|
|
13
10
|
React.createElement("div", { className: "w-fit" }, renderButton('Next', currentPage === totalPages, onNext, currentPage === totalPages
|
|
14
11
|
? BUTTON_TYPES.TERTIARY
|
|
15
12
|
: BUTTON_TYPES.QUATERNARY, undefined, React.createElement(ArrowRightIcon, { className: "size-3", fill: "currentColor" })))));
|
|
@@ -10,40 +10,38 @@ export var reviewSectionData = {
|
|
|
10
10
|
{ rating: 2, count: 199 },
|
|
11
11
|
{ rating: 1, count: 147 },
|
|
12
12
|
],
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
// ],
|
|
48
|
-
items: [],
|
|
13
|
+
items: [
|
|
14
|
+
{
|
|
15
|
+
id: '1',
|
|
16
|
+
rating: 5,
|
|
17
|
+
content: 'This is the bag of my dreams. I took it on my last vacation and was able to fit an absurd amount of snacks for the many long and hungry flights.',
|
|
18
|
+
name: 'Emily Selman',
|
|
19
|
+
time: '2 weeks ago',
|
|
20
|
+
avatar: 'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80',
|
|
21
|
+
strengths: ['Durable', 'Lightweight'],
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
id: '2',
|
|
25
|
+
rating: 5,
|
|
26
|
+
content: 'Before getting the Ruck Snack, I struggled my whole life with pulverized snacks, endless crumbs, and other heartbreaking snack catastrophes. Now, I can stow my snacks with confidence and style!',
|
|
27
|
+
name: 'Hector Gibbons',
|
|
28
|
+
time: '1 month ago',
|
|
29
|
+
avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80',
|
|
30
|
+
strengths: ['Durable', 'Spacious'],
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
id: '3',
|
|
34
|
+
rating: 4,
|
|
35
|
+
content: 'I love how versatile this bag is. It can hold anything ranging from cookies that come in trays to cookies that come in tins.',
|
|
36
|
+
name: 'Mark Edwards',
|
|
37
|
+
time: '3 months ago',
|
|
38
|
+
avatar: 'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixqx=oilqXxSqey&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
|
39
|
+
strengths: ['Durable'],
|
|
40
|
+
},
|
|
41
|
+
],
|
|
42
|
+
currentPage: 1,
|
|
43
|
+
totalPages: 3,
|
|
44
|
+
onPageChange: function (page) { return console.log('Page changed to:', page); },
|
|
45
|
+
onPrevious: function () { return console.log('Previous page'); },
|
|
46
|
+
onNext: function () { return console.log('Next page'); },
|
|
49
47
|
};
|
|
@@ -2,6 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { StarIcon } from '@heroicons/react/20/solid';
|
|
3
3
|
import { ReviewOptions } from './review-options';
|
|
4
4
|
import { Ratings } from '../../molecules/ratings';
|
|
5
|
+
import { BadgeList } from '../../molecules/badge-list';
|
|
6
|
+
import { Pagination } from '../pagination/pagination';
|
|
5
7
|
function classNames() {
|
|
6
8
|
var classes = [];
|
|
7
9
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
@@ -10,11 +12,11 @@ function classNames() {
|
|
|
10
12
|
return classes.filter(Boolean).join(' ');
|
|
11
13
|
}
|
|
12
14
|
export var ReviewSection = function (_a) {
|
|
13
|
-
var average = _a.average, counts = _a.counts, handleSelectRating = _a.handleSelectRating, items = _a.items, selectedRating = _a.selectedRating, totalCount = _a.totalCount;
|
|
15
|
+
var average = _a.average, counts = _a.counts, handleSelectRating = _a.handleSelectRating, items = _a.items, selectedRating = _a.selectedRating, totalCount = _a.totalCount, currentPage = _a.currentPage, totalPages = _a.totalPages, onPageChange = _a.onPageChange, onPrevious = _a.onPrevious, onNext = _a.onNext;
|
|
14
16
|
return (React.createElement("div", { className: "bg-gray-100" },
|
|
15
17
|
React.createElement("div", { className: "mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:grid lg:max-w-7xl lg:grid-cols-12 lg:gap-x-8 lg:px-8 lg:py-32" },
|
|
16
18
|
React.createElement("div", { className: "lg:col-span-4" },
|
|
17
|
-
React.createElement("h2", { className: "text-2xl font-bold tracking-tight text-gray-900" }, "Reviews"),
|
|
19
|
+
React.createElement("h2", { className: "text-2xl font-bold tracking-tight text-gray-900" }, "Reading Reviews"),
|
|
18
20
|
React.createElement("div", { className: "mt-3 flex items-center" },
|
|
19
21
|
React.createElement("div", { className: "flex flex-row" },
|
|
20
22
|
React.createElement("div", { className: "flex items-center" },
|
|
@@ -49,13 +51,15 @@ export var ReviewSection = function (_a) {
|
|
|
49
51
|
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" })),
|
|
50
52
|
React.createElement("h3", { className: "mt-2 text-sm font-medium text-gray-900" }, "No reviews yet"),
|
|
51
53
|
React.createElement("p", { className: "mt-1 text-sm text-gray-500" }, "Be the first to share your experience."))) : (React.createElement("div", { className: "flow-root" },
|
|
52
|
-
React.createElement("div", { className: "divide-y divide-gray-200" }, items.
|
|
54
|
+
React.createElement("div", { className: "divide-y divide-gray-200" }, items.map(function (review) { return (React.createElement("div", { key: review.id, className: "py-6" },
|
|
53
55
|
React.createElement("div", { className: "flex items-center" },
|
|
54
56
|
React.createElement("img", { alt: review.name, src: review.avatar, className: "size-12 rounded-full" }),
|
|
55
|
-
React.createElement("div", { className: "ml-4" },
|
|
56
|
-
React.createElement("div", { className: "flex flex-row gap-4" },
|
|
57
|
-
React.createElement("
|
|
58
|
-
|
|
57
|
+
React.createElement("div", { className: "ml-4 w-full" },
|
|
58
|
+
React.createElement("div", { className: "flex flex-row items-center justify-between gap-4" },
|
|
59
|
+
React.createElement("div", { className: "flex flex-row gap-4" },
|
|
60
|
+
React.createElement("h4", { className: "text-sm font-bold text-gray-900" }, review.name),
|
|
61
|
+
React.createElement("time", { className: "text-sm text-gray-500" }, review.time)),
|
|
62
|
+
React.createElement(BadgeList, { items: review.strengths })),
|
|
59
63
|
React.createElement("div", { className: "mt-1 flex items-center" }, [0, 1, 2, 3, 4].map(function (rating) { return (React.createElement(StarIcon, { key: rating, "aria-hidden": "true", className: classNames(review.rating > rating
|
|
60
64
|
? 'text-yellow-400'
|
|
61
65
|
: 'text-gray-300', 'size-5 shrink-0') })); })),
|
|
@@ -63,5 +67,7 @@ export var ReviewSection = function (_a) {
|
|
|
63
67
|
review.rating,
|
|
64
68
|
" out of 5 stars"))),
|
|
65
69
|
React.createElement("div", null,
|
|
66
|
-
React.createElement("p", { className: "mt-4 space-y-6 text-base text-gray-600 italic" }, review.content)))); }))))
|
|
70
|
+
React.createElement("p", { className: "mt-4 space-y-6 text-base text-gray-600 italic" }, review.content)))); })))),
|
|
71
|
+
items.length > 0 && (React.createElement("div", { className: "mt-12 flex justify-end" },
|
|
72
|
+
React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, onPrevious: onPrevious, onNext: onNext }))))))));
|
|
67
73
|
};
|
|
@@ -8,13 +8,19 @@ export interface ReviewItem {
|
|
|
8
8
|
id: string;
|
|
9
9
|
name: string;
|
|
10
10
|
rating: number;
|
|
11
|
+
strengths: string[];
|
|
11
12
|
time: string;
|
|
12
13
|
}
|
|
13
14
|
export interface ReviewSectionProps {
|
|
14
15
|
average: number;
|
|
15
|
-
totalCount: number;
|
|
16
16
|
counts: ReviewCountItem[];
|
|
17
|
+
currentPage: number;
|
|
18
|
+
handleSelectRating: (rating: number) => void;
|
|
17
19
|
items: ReviewItem[];
|
|
20
|
+
onNext: () => void;
|
|
21
|
+
onPageChange: (page: number) => void;
|
|
22
|
+
onPrevious: () => void;
|
|
18
23
|
selectedRating: number;
|
|
19
|
-
|
|
24
|
+
totalCount: number;
|
|
25
|
+
totalPages: number;
|
|
20
26
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@appcorp/kismaa-web-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.99",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "lib/main.js",
|
|
6
6
|
"module": "lib/module.js",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@appcorp/app-corp-vista": "^0.3.
|
|
48
|
-
"@appcorp/kismaa-utils": "^0.2.
|
|
47
|
+
"@appcorp/app-corp-vista": "^0.3.84",
|
|
48
|
+
"@appcorp/kismaa-utils": "^0.2.92",
|
|
49
49
|
"@chromatic-com/storybook": "^4.1.2",
|
|
50
50
|
"@headlessui/react": "^2",
|
|
51
51
|
"@headlessui/tailwindcss": "^0",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@next/eslint-plugin-next": "^15",
|
|
56
56
|
"@next/mdx": "^15",
|
|
57
57
|
"@popperjs/core": "^2.11.8",
|
|
58
|
-
"@react-pakistan/util-functions": "^1.24.
|
|
58
|
+
"@react-pakistan/util-functions": "^1.24.98",
|
|
59
59
|
"@storybook/addon-docs": "^10",
|
|
60
60
|
"@storybook/addon-links": "^10",
|
|
61
61
|
"@storybook/addon-onboarding": "^10",
|