@appcorp/kismaa-web-ui 0.2.52 → 0.2.54

package/molecules/user-card/props.js

@@ -28,4 +28,11 @@ exports.userCardData = {
     handleButtonClick: function () { return void 0; },
     handleCardClick: function () { return void 0; },
     username: 'Psychic2200202',
+    loggedInUser: {
+        firstName: 'Hello',
+        avatarUrl: '',
+        route: '',
+    },
+    isFavorite: true,
+    handleIsFavorite: function () { return void 0; },
 };

package/molecules/user-card/type.d.ts

@@ -1,3 +1,4 @@
+import { LoggedInUser } from '../../organisms/navbar/type';
 import { PSYCHIC_ONLINE_STATUS } from '@appcorp/kismaa-utils';
 export interface UserCardProps {
     imageAlt: string;
@@ -20,4 +21,7 @@ export interface UserCardProps {
     originalPrice: number;
     setIsHovered: (b: boolean) => void;
     username: string;
+    isFavorite: boolean;
+    loggedInUser: LoggedInUser | null;
+    handleIsFavorite: (id: string) => void;
 }

package/molecules/user-card/user-card.js

@@ -14,10 +14,9 @@ var typography_1 = require("../typography");
 var badge_1 = require("../badge");
 var type_1 = require("../badge/type");
 var ratings_1 = require("../ratings");
+var solid_1 = require("@heroicons/react/24/solid");
 var UserCard = function (_a) {
-    var badges = _a.badges, description = _a.description, handleButtonClick = _a.handleButtonClick, handleCardClick = _a.handleCardClick, id = _a.id, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, isHovered = _a.isHovered, name = _a.name, onlineStatus = _a.onlineStatus, 
-    // originalPrice,
-    price = _a.price, rating = _a.rating, setIsHovered = _a.setIsHovered, username = _a.username;
+    var badges = _a.badges, description = _a.description, handleButtonClick = _a.handleButtonClick, handleCardClick = _a.handleCardClick, handleIsFavorite = _a.handleIsFavorite, id = _a.id, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, isFavorite = _a.isFavorite, isHovered = _a.isHovered, loggedInUser = _a.loggedInUser, name = _a.name, onlineStatus = _a.onlineStatus, price = _a.price, rating = _a.rating, setIsHovered = _a.setIsHovered, username = _a.username;
     return (react_1.default.createElement("div", { className: "w-full overflow-hidden rounded-xl shadow-[0px_5px_16px_0px_#0000001A] hover:cursor-pointer lg:max-w-[415px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: function (e) {
             e.stopPropagation();
             handleCardClick(username);
@@ -36,7 +35,7 @@ var UserCard = function (_a) {
                                     e.stopPropagation();
                                     handleButtonClick(id);
                                 } }))))))),
-        react_1.default.createElement("div", { className: "p-4 text-center" },
+        react_1.default.createElement("div", { className: "relative p-4 text-center" },
             react_1.default.createElement("div", { className: "mb-2" },
                 react_1.default.createElement(typography_1.Typography, { variant: typography_1.TYPOGRAPHY_VARIANTS.H3 }, name)),
             !!description && (react_1.default.createElement("div", { className: "mb-2 min-h-5 text-gray-500" },
@@ -52,6 +51,15 @@ var UserCard = function (_a) {
                         price.current,
                         " for ",
                         price.duration,
-                        "min"))))));
+                        "min")),
+                (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.firstName) && (react_1.default.createElement("div", { className: "absolute right-4 bottom-4 z-10 cursor-pointer" }, isFavorite ? (react_1.default.createElement("div", { onClick: function (e) {
+                        e.stopPropagation();
+                        handleIsFavorite(id);
+                    } },
+                    react_1.default.createElement(solid_1.HeartIcon, { className: "h-8 w-8 text-red-500" }))) : (react_1.default.createElement("div", { onClick: function (e) {
+                        e.stopPropagation();
+                        handleIsFavorite(id);
+                    } },
+                    react_1.default.createElement(solid_1.HeartIcon, { className: "h-8 w-8 text-gray-500" })))))))));
 };
 exports.UserCard = UserCard;

package/organisms/navbar/mobile-menu.js

@@ -9,7 +9,6 @@ var molecules_1 = require("../../molecules");
 var image_1 = __importDefault(require("next/image"));
 var react_1 = __importDefault(require("react"));
 var atoms_1 = require("../../atoms");
-var intro_user_1 = require("./intro-user");
 var MobileMenu = function (_a) {
     var headerActions = _a.headerActions, isMobileMenuOpen = _a.isMobileMenuOpen, loggedInUser = _a.loggedInUser, navLinks = _a.navLinks, toggleMobileMenu = _a.toggleMobileMenu, homeLink = _a.homeLink;
     return (react_1.default.createElement("div", null, isMobileMenuOpen && (react_1.default.createElement("div", { className: "col-span-2 max-h-90 overflow-y-scroll bg-purple-200/90 lg:hidden" },
@@ -27,8 +26,7 @@ var MobileMenu = function (_a) {
                 react_1.default.createElement(link_1.default, { href: navLinks[2].href, className: "flex cursor-pointer flex-row items-center justify-start gap-4", onClick: toggleMobileMenu },
                     react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.SUBH3 }, navLinks[2].label))),
             react_1.default.createElement("div", null, loggedInUser ? (react_1.default.createElement("div", { className: "flex flex-col items-end justify-center" },
-                react_1.default.createElement(intro_user_1.IntroUser, { label: loggedInUser.firstName }),
-                react_1.default.createElement(link_1.default, { href: homeLink, className: "flex items-center gap-2" }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_1.default.createElement(image_1.default, { src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, alt: loggedInUser.firstName, height: 32, width: 32, className: "h-8 w-8 rounded-full" })) : (react_1.default.createElement(atoms_1.UserIcon, { className: "h-8 w-8 rounded-full" }))))) : (react_1.default.createElement("div", { className: "flex flex-col items-center gap-2" }, headerActions
+                react_1.default.createElement(link_1.default, { href: homeLink, className: "flex items-center gap-2" }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_1.default.createElement(image_1.default, { src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, alt: loggedInUser.firstName, height: 36, width: 36, className: "h-9 w-9 rounded-full" })) : (react_1.default.createElement(atoms_1.UserIcon, { className: "h-9 w-9 rounded-full" }))))) : (react_1.default.createElement("div", { className: "flex flex-col items-center gap-2" }, headerActions
                 .filter(function (_a) {
                 var enabled = _a.enabled;
                 return enabled;

package/organisms/navbar/navbar.js

@@ -15,7 +15,6 @@ var mega_menu_1 = require("../mega-menu");
 var header_pointer_icon_1 = require("../../atoms/header-pointer-icon");
 var user_icon_1 = require("../../atoms/user-icon");
 var react_2 = require("@headlessui/react");
-var intro_user_1 = require("./intro-user");
 var mobile_menu_1 = require("./mobile-menu");
 var Navbar = function (_a) {
     var _b, _c;
@@ -52,13 +51,11 @@ var Navbar = function (_a) {
                         (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.route) &&
                             (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) &&
                             !((_b = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) === null || _b === void 0 ? void 0 : _b.length) && (react_1.default.createElement("div", { className: "flex flex-col items-end justify-center" },
-                            react_1.default.createElement(intro_user_1.IntroUser, { label: loggedInUser.firstName }),
-                            react_1.default.createElement(link_1.default, { href: loggedInUser.route }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_1.default.createElement(image_1.default, { alt: loggedInUser.firstName, className: "h-8 w-8 cursor-pointer rounded-full", height: 32, src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, width: 32 })) : (react_1.default.createElement(user_icon_1.UserIcon, { className: "h-8 w-8 cursor-pointer rounded-full" }))))),
+                            react_1.default.createElement(link_1.default, { href: loggedInUser.route }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_1.default.createElement(image_1.default, { alt: loggedInUser.firstName, className: "h-9 w-9 cursor-pointer rounded-full", height: 36, src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, width: 36 })) : (react_1.default.createElement(user_icon_1.UserIcon, { className: "h-9 w-9 cursor-pointer rounded-full" }))))),
                         (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) &&
                             (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems.length) > 0 && (react_1.default.createElement(react_2.Popover, { className: "relative" },
                             react_1.default.createElement("div", { className: "flex flex-col items-end justify-start" },
-                                react_1.default.createElement(intro_user_1.IntroUser, { label: loggedInUser.firstName }),
-                                react_1.default.createElement(react_2.PopoverButton, null, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_1.default.createElement(image_1.default, { alt: loggedInUser.firstName, className: "h-8 w-8 cursor-pointer rounded-full", height: 32, src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, width: 32 })) : (react_1.default.createElement(user_icon_1.UserIcon, { className: "h-8 w-8 cursor-pointer rounded-full" })))),
+                                react_1.default.createElement(react_2.PopoverButton, null, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl) ? (react_1.default.createElement(image_1.default, { alt: loggedInUser.firstName, className: "h-9 w-9 cursor-pointer rounded-full", height: 36, src: loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.avatarUrl, width: 36 })) : (react_1.default.createElement(user_icon_1.UserIcon, { className: "h-9 w-9 cursor-pointer rounded-full" })))),
                             react_1.default.createElement(react_2.PopoverPanel, { transition: true, className: "absolute left-1/2 z-10 mt-2 flex w-screen max-w-min -translate-x-1/2 bg-transparent px-4 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" },
                                 react_1.default.createElement("div", { className: "w-56 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" }, (_c = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.menuItems) === null || _c === void 0 ? void 0 : _c.map(function (_a) {
                                     var label = _a.label, handleOnClick = _a.handleOnClick;

package/organisms/user-cards-grid/props.js

@@ -37,6 +37,9 @@ exports.userCardGridData = [
         setIsHovered: function () { return void 0; },
         handleCardClick: function (v) { return console.log('card', v); },
         username: 'Psychic222000',
+        handleIsFavorite: function () { return void 0; },
+        loggedInUser: null,
+        isFavorite: false,
     },
     {
         id: '2',
@@ -61,6 +64,9 @@ exports.userCardGridData = [
         setIsHovered: function () { return void 0; },
         handleCardClick: function () { return void 0; },
         username: 'Psychic222020',
+        handleIsFavorite: function () { return void 0; },
+        loggedInUser: null,
+        isFavorite: false,
     },
     {
         id: '3',
@@ -85,6 +91,9 @@ exports.userCardGridData = [
         setIsHovered: function () { return void 0; },
         handleCardClick: function () { return void 0; },
         username: 'Psychic222002',
+        handleIsFavorite: function () { return void 0; },
+        loggedInUser: null,
+        isFavorite: false,
     },
     {
         id: '4',
@@ -108,6 +117,9 @@ exports.userCardGridData = [
         setIsHovered: function () { return void 0; },
         handleCardClick: function () { return void 0; },
         username: 'Psychic2220012',
+        handleIsFavorite: function () { return void 0; },
+        loggedInUser: null,
+        isFavorite: true,
     },
     {
         id: '5',
@@ -131,6 +143,9 @@ exports.userCardGridData = [
         setIsHovered: function () { return void 0; },
         handleCardClick: function () { return void 0; },
         username: 'Psychic222004',
+        handleIsFavorite: function () { return void 0; },
+        loggedInUser: null,
+        isFavorite: true,
     },
     {
         id: '6',
@@ -155,6 +170,9 @@ exports.userCardGridData = [
         setIsHovered: function () { return void 0; },
         handleCardClick: function () { return void 0; },
         username: 'Psychic222300',
+        handleIsFavorite: function () { return void 0; },
+        loggedInUser: null,
+        isFavorite: true,
     },
     {
         id: '7',
@@ -179,6 +197,9 @@ exports.userCardGridData = [
         setIsHovered: function () { return void 0; },
         handleCardClick: function () { return void 0; },
         username: 'Psychic222023',
+        handleIsFavorite: function () { return void 0; },
+        loggedInUser: null,
+        isFavorite: true,
     },
     {
         id: '8',
@@ -203,6 +224,9 @@ exports.userCardGridData = [
         setIsHovered: function () { return void 0; },
         handleCardClick: function () { return void 0; },
         username: 'Psychic2220330',
+        handleIsFavorite: function () { return void 0; },
+        loggedInUser: null,
+        isFavorite: true,
     },
     {
         id: '9',
@@ -227,6 +251,9 @@ exports.userCardGridData = [
         setIsHovered: function () { return void 0; },
         handleCardClick: function () { return void 0; },
         username: 'Psychic222040',
+        handleIsFavorite: function () { return void 0; },
+        loggedInUser: null,
+        isFavorite: false,
     },
     {
         id: '10',
@@ -251,6 +278,9 @@ exports.userCardGridData = [
         setIsHovered: function () { return void 0; },
         handleCardClick: function () { return void 0; },
         username: 'Psychic222050',
+        handleIsFavorite: function () { return void 0; },
+        loggedInUser: null,
+        isFavorite: false,
     },
 ];
 exports.userGridData = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/kismaa-web-ui",
-  "version": "0.2.52",
+  "version": "0.2.54",
   "source": "src/index.ts",
   "main": "lib/main.js",
   "module": "lib/module.js",
@@ -45,8 +45,8 @@
   },
   "devDependencies": {
     "@appcorp/app-corp-designs": "^0.4.92",
-    "@appcorp/app-corp-vista": "^0.3.14",
-    "@appcorp/kismaa-utils": "^0.2.50",
+    "@appcorp/app-corp-vista": "^0.3.20",
+    "@appcorp/kismaa-utils": "^0.2.53",
     "@chromatic-com/storybook": "3.2.6",
     "@headlessui/react": "^2",
     "@headlessui/tailwindcss": "^0",
@@ -55,7 +55,7 @@
     "@mdx-js/react": "^3",
     "@next/eslint-plugin-next": "^15",
     "@next/mdx": "^15",
-    "@react-pakistan/util-functions": "^1.24.50",
+    "@react-pakistan/util-functions": "^1.24.53",
     "@storybook/addon-essentials": "^8",
     "@storybook/addon-interactions": "^8",
     "@storybook/addon-links": "^8",

package/organisms/navbar/intro-user.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-interface Props {
-    label: string;
-}
-export declare const IntroUser: FC<Props>;
-export {};

package/organisms/navbar/intro-user.js

@@ -1,15 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IntroUser = void 0;
-var react_1 = __importDefault(require("react"));
-var IntroUser = function (_a) {
-    var label = _a.label;
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("p", { className: "text-xs" },
-            "Welcome, ",
-            label)));
-};
-exports.IntroUser = IntroUser;