@appcorp/kismaa-web-ui 0.2.77 → 0.2.80

package/organisms/review-section/index.d.ts

@@ -0,0 +1,2 @@
+export * from './review-section';
+export * from './type';

package/organisms/review-section/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./review-section"), exports);
+__exportStar(require("./type"), exports);

package/organisms/review-section/props.d.ts

@@ -0,0 +1,2 @@
+import { ReviewSectionProps } from './type';
+export declare const reviewSectionData: ReviewSectionProps;

package/organisms/review-section/props.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reviewSectionData = void 0;
+exports.reviewSectionData = {
+    selectedRating: 5,
+    handleSelectRating: function (rating) { return console.log(rating); },
+    average: 4,
+    totalCount: 1624,
+    counts: [
+        { rating: 5, count: 1019 },
+        { rating: 4, count: 162 },
+        { rating: 3, count: 97 },
+        { rating: 2, count: 199 },
+        { rating: 1, count: 147 },
+    ],
+    items: [
+        {
+            id: '1',
+            rating: 5,
+            content: "\n          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.\n        ",
+            name: 'Emily Selman',
+            avatar: 'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80',
+        },
+        {
+            id: '2',
+            rating: 5,
+            content: "\n        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!\n        ",
+            name: 'Hector Gibbons',
+            avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80',
+        },
+        {
+            id: '3',
+            rating: 4,
+            content: "\n        I love how versatile this bag is. It can hold anything ranging from cookies that come in trays to cookies that come in tins.\n        ",
+            name: 'Mark Edwards',
+            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',
+        },
+    ],
+};

package/organisms/review-section/review-options.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface ReviewOptionsProps {
+    selectedRating: number;
+    handleSelectRating: (rating: number) => void;
+}
+export declare const ReviewOptions: FC<ReviewOptionsProps>;
+export {};

package/organisms/review-section/review-options.js

@@ -0,0 +1,113 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReviewOptions = void 0;
+var react_1 = require("@headlessui/react");
+var react_2 = __importStar(require("react"));
+var react_popper_1 = require("react-popper");
+var ReviewOptions = function (_a) {
+    var selectedRating = _a.selectedRating, handleSelectRating = _a.handleSelectRating;
+    var _b = (0, react_2.useState)(null), parentElement = _b[0], setParentElement = _b[1];
+    var _c = (0, react_2.useState)(null), dropdown = _c[0], setDropdown = _c[1];
+    var _d = (0, react_2.useState)([0, 8]), offset = _d[0], setOffset = _d[1];
+    (0, react_2.useEffect)(function () {
+        var calculateOffset = function () {
+            if (typeof window === 'undefined')
+                return [0, 8];
+            var w = window.innerWidth;
+            if (w >= 1536)
+                return [0, 10]; // 2xl
+            if (w >= 1280)
+                return [0, 10]; // xl
+            if (w >= 1024)
+                return [0, 10]; // lg
+            if (w >= 768)
+                return [0, 8]; // md
+            if (w >= 640)
+                return [0, 6]; // sm
+            return [0, 6]; // xs / mobile
+        };
+        setOffset(calculateOffset());
+        var handleResize = function () {
+            setOffset(calculateOffset());
+        };
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    var _e = (0, react_popper_1.usePopper)(parentElement, dropdown, {
+        placement: 'bottom-end',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: offset,
+                },
+            },
+            {
+                name: 'preventOverflow',
+                options: { boundary: undefined },
+            },
+            {
+                name: 'flip',
+                options: { fallbackPlacements: ['top-end'] },
+            },
+        ],
+    }), avatarStyles = _e.styles, avatarAttributes = _e.attributes;
+    return (react_2.default.createElement(react_1.Popover, { className: "relative" },
+        react_2.default.createElement("div", { className: "flex flex-col items-end justify-start" },
+            react_2.default.createElement(react_1.PopoverButton, { ref: setParentElement },
+                react_2.default.createElement("div", { className: "bg-secondary rounded-lg px-4 py-2 text-white" },
+                    selectedRating,
+                    " stars reviews"))),
+        react_2.default.createElement(react_1.PopoverPanel, __assign({ transition: true, className: "z-10 w-56 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in", ref: setDropdown, style: avatarStyles.popper }, avatarAttributes.popper),
+            react_2.default.createElement("div", { className: "w-full shrink rounded-xl bg-white p-4 text-sm/6 font-semibold text-gray-900 shadow-lg outline-1 outline-gray-900/5 dark:bg-gray-800 dark:text-white dark:shadow-none dark:outline dark:-outline-offset-1 dark:outline-white/10" }, [5, 4, 3, 2, 1].map(function (star) { return (react_2.default.createElement("div", { className: "cursor-pointer rounded-md p-1 hover:bg-gray-100", key: star, onClick: function () { return handleSelectRating(star); } },
+                react_2.default.createElement("p", { key: star, className: "" },
+                    star,
+                    " star",
+                    star > 1 ? 's' : '',
+                    " reviews"))); })))));
+};
+exports.ReviewOptions = ReviewOptions;

package/organisms/review-section/review-section.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ReviewSectionProps } from './type';
+export declare const ReviewSection: FC<ReviewSectionProps>;

package/organisms/review-section/review-section.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReviewSection = void 0;
+var react_1 = __importDefault(require("react"));
+var solid_1 = require("@heroicons/react/20/solid");
+var review_options_1 = require("./review-options");
+function classNames() {
+    var classes = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classes[_i] = arguments[_i];
+    }
+    return classes.filter(Boolean).join(' ');
+}
+var ReviewSection = function (_a) {
+    var average = _a.average, counts = _a.counts, handleSelectRating = _a.handleSelectRating, items = _a.items, selectedRating = _a.selectedRating, totalCount = _a.totalCount;
+    return (react_1.default.createElement("div", { className: "bg-white" },
+        react_1.default.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" },
+            react_1.default.createElement("div", { className: "lg:col-span-4" },
+                react_1.default.createElement("h2", { className: "text-2xl font-bold tracking-tight text-gray-900" }, "Customer Reviews"),
+                react_1.default.createElement("div", { className: "mt-3 flex items-center" },
+                    react_1.default.createElement("div", { className: "flex flex-row" },
+                        react_1.default.createElement("div", { className: "flex items-center" }, [0, 1, 2, 3, 4].map(function (rating) { return (react_1.default.createElement(solid_1.StarIcon, { key: rating, "aria-hidden": "true", className: classNames(average > rating ? 'text-yellow-400' : 'text-gray-300', 'size-5 shrink-0') })); })),
+                        react_1.default.createElement("p", { className: "ml-2 text-sm text-gray-900" },
+                            average,
+                            " out of 5 stars,"),
+                        react_1.default.createElement("p", { className: "sr-only" },
+                            average,
+                            " out of 5 stars")),
+                    react_1.default.createElement("p", { className: "ml-2 text-sm text-gray-900" },
+                        "based on ",
+                        totalCount,
+                        " reviews")),
+                react_1.default.createElement("div", { className: "mt-6" },
+                    react_1.default.createElement("h3", { className: "sr-only" }, "Review data"),
+                    react_1.default.createElement("dl", { className: "space-y-3" }, counts.map(function (count) { return (react_1.default.createElement("div", { key: count.rating, className: "flex items-center text-sm" },
+                        react_1.default.createElement("dt", { className: "flex flex-1 items-center" },
+                            react_1.default.createElement("p", { className: "w-3 font-medium text-gray-900" },
+                                count.rating,
+                                react_1.default.createElement("span", { className: "sr-only" }, " star reviews")),
+                            react_1.default.createElement("div", { "aria-hidden": "true", className: "ml-1 flex flex-1 items-center" },
+                                react_1.default.createElement(solid_1.StarIcon, { "aria-hidden": "true", className: classNames(count.count > 0 ? 'text-yellow-400' : 'text-gray-300', 'size-5 shrink-0') }),
+                                react_1.default.createElement("div", { className: "relative ml-3 flex-1" },
+                                    react_1.default.createElement("div", { className: "h-3 rounded-full border border-gray-200 bg-gray-100" }),
+                                    count.count > 0 ? (react_1.default.createElement("div", { style: {
+                                            width: "calc(".concat(count.count, " / ").concat(totalCount, " * 100%)"),
+                                        }, className: "absolute inset-y-0 rounded-full border border-yellow-400 bg-yellow-400" })) : null))),
+                        react_1.default.createElement("dd", { className: "ml-3 w-10 text-right text-sm text-gray-900 tabular-nums" },
+                            Math.round((count.count / totalCount) * 100),
+                            "%"))); })))),
+            react_1.default.createElement("div", { className: "mt-16 lg:col-span-7 lg:col-start-6 lg:mt-0" },
+                react_1.default.createElement("h3", { className: "sr-only" }, "Recent reviews"),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(review_options_1.ReviewOptions, { selectedRating: selectedRating, handleSelectRating: handleSelectRating }),
+                    react_1.default.createElement("div", { className: "flow-root" },
+                        react_1.default.createElement("div", { className: "divide-y divide-gray-200" }, items.map(function (review) { return (react_1.default.createElement("div", { key: review.id, className: "py-6" },
+                            react_1.default.createElement("div", { className: "flex items-center" },
+                                react_1.default.createElement("img", { alt: "".concat(review.name, "."), src: review.avatar, className: "size-12 rounded-full" }),
+                                react_1.default.createElement("div", { className: "ml-4" },
+                                    react_1.default.createElement("h4", { className: "text-sm font-bold text-gray-900" }, review.name),
+                                    react_1.default.createElement("div", { className: "mt-1 flex items-center" }, [0, 1, 2, 3, 4].map(function (rating) { return (react_1.default.createElement(solid_1.StarIcon, { key: rating, "aria-hidden": "true", className: classNames(review.rating > rating
+                                            ? 'text-yellow-400'
+                                            : 'text-gray-300', 'size-5 shrink-0') })); })),
+                                    react_1.default.createElement("p", { className: "sr-only" },
+                                        review.rating,
+                                        " out of 5 stars"))),
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement("p", { className: "mt-4 space-y-6 text-base text-gray-600 italic" }, review.content)))); }))))))));
+};
+exports.ReviewSection = ReviewSection;

package/organisms/review-section/type.d.ts

@@ -0,0 +1,19 @@
+export interface ReviewCountItem {
+    count: number;
+    rating: number;
+}
+export interface ReviewItem {
+    avatar: string;
+    content: string;
+    id: string;
+    name: string;
+    rating: number;
+}
+export interface ReviewSectionProps {
+    average: number;
+    totalCount: number;
+    counts: ReviewCountItem[];
+    items: ReviewItem[];
+    selectedRating: number;
+    handleSelectRating: (rating: number) => void;
+}

package/organisms/review-section/type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/kismaa-web-ui",
-  "version": "0.2.77",
+  "version": "0.2.80",
   "source": "src/index.ts",
   "main": "lib/main.js",
   "module": "lib/module.js",
@@ -44,8 +44,8 @@
     }
   },
   "devDependencies": {
-    "@appcorp/app-corp-vista": "^0.3.46",
-    "@appcorp/kismaa-utils": "^0.2.64",
+    "@appcorp/app-corp-vista": "^0.3.47",
+    "@appcorp/kismaa-utils": "^0.2.79",
     "@chromatic-com/storybook": "^4",
     "@headlessui/react": "^2",
     "@headlessui/tailwindcss": "^0",
@@ -55,7 +55,7 @@
     "@next/eslint-plugin-next": "^15",
     "@next/mdx": "^15",
     "@popperjs/core": "^2.11.8",
-    "@react-pakistan/util-functions": "^1.24.57",
+    "@react-pakistan/util-functions": "^1.24.60",
     "@storybook/addon-docs": "^9",
     "@storybook/addon-links": "^9",
     "@storybook/addon-onboarding": "^9",

package/templates/user-detail-page/user-detail-page.js

@@ -19,12 +19,15 @@ var user_details_1 = require("../../organisms/user-details/user-details");
 var organisms_1 = require("../../organisms");
 var react_1 = __importDefault(require("react"));
 var disclaimer_1 = require("../../molecules/disclaimer/disclaimer");
+var review_section_1 = require("../../organisms/review-section");
+var props_1 = require("../../organisms/review-section/props");
 var UserDetailPage = function (_a) {
     var advisorSection = _a.advisorSection, banner = _a.banner, ctaBanner = _a.ctaBanner, footer = _a.footer, getAppBanner = _a.getAppBanner, navbar = _a.navbar, userDetails = _a.userDetails;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(organisms_1.Navbar, __assign({}, navbar)),
         react_1.default.createElement(organisms_1.Banner, __assign({}, banner)),
         react_1.default.createElement(user_details_1.UserDetails, __assign({}, userDetails)),
+        react_1.default.createElement(review_section_1.ReviewSection, __assign({}, props_1.reviewSectionData)),
         react_1.default.createElement(organisms_1.AdvisorsSection, __assign({}, advisorSection)),
         react_1.default.createElement(organisms_1.GetAppBanner, __assign({}, getAppBanner)),
         react_1.default.createElement(organisms_1.CtaBanner, __assign({}, ctaBanner)),