@appcorp/kismaa-web-ui 0.2.32 → 0.2.34

package/molecules/horoscope-shimmer-card/horoscope-shimmer-card.d.ts

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

package/molecules/horoscope-shimmer-card/horoscope-shimmer-card.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HoroscopeShimmerCard = void 0;
+// molecules/horoscope-card/HoroscopeCardShimmer.tsx
+var react_1 = __importDefault(require("react"));
+var shimmer_1 = require("../shimmer");
+var horoscope_card_1 = require("../horoscope-card");
+var sizeMap = (_a = {},
+    _a[horoscope_card_1.HOROSCOPE_CARD_SIZES.MD] = 'mb-8 mt-5',
+    _a[horoscope_card_1.HOROSCOPE_CARD_SIZES.SM] = 'my-3',
+    _a);
+var HoroscopeShimmerCard = function (_a) {
+    var _b = _a.cardSize, cardSize = _b === void 0 ? horoscope_card_1.HOROSCOPE_CARD_SIZES.MD : _b;
+    return (react_1.default.createElement("div", { className: "group w-full overflow-hidden rounded-xl" },
+        react_1.default.createElement("div", { className: "h-60 w-full p-8" },
+            react_1.default.createElement(shimmer_1.Shimmer, { className: "h-full w-full rounded-xl" })),
+        react_1.default.createElement("div", { className: "text-center ".concat(sizeMap[cardSize]) },
+            react_1.default.createElement(shimmer_1.Shimmer, { className: "mx-auto h-5 w-24 rounded-md" }))));
+};
+exports.HoroscopeShimmerCard = HoroscopeShimmerCard;

package/molecules/horoscope-shimmer-card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './horoscope-shimmer-card';
+export * from './type';

package/molecules/horoscope-shimmer-card/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("./horoscope-shimmer-card"), exports);
+__exportStar(require("./type"), exports);

package/molecules/horoscope-shimmer-card/type.d.ts

@@ -0,0 +1,4 @@
+import { HOROSCOPE_CARD_SIZES } from '../horoscope-card';
+export interface ShimmerCardProps {
+    cardSize?: HOROSCOPE_CARD_SIZES;
+}

package/molecules/horoscope-shimmer-card/type.js

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

package/molecules/index.d.ts

@@ -11,3 +11,6 @@ export * from './stat-card';
 export * from './theme-switch/theme-switch';
 export * from './typography';
 export * from './user-card';
+export * from './shimmer';
+export * from './horoscope-shimmer-card';
+export * from './user-card-shimmer';

package/molecules/index.js

@@ -27,3 +27,6 @@ __exportStar(require("./stat-card"), exports);
 __exportStar(require("./theme-switch/theme-switch"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./user-card"), exports);
+__exportStar(require("./shimmer"), exports);
+__exportStar(require("./horoscope-shimmer-card"), exports);
+__exportStar(require("./user-card-shimmer"), exports);

package/molecules/shimmer/index.d.ts

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

package/molecules/shimmer/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("./shimmer"), exports);
+__exportStar(require("./type"), exports);

package/molecules/shimmer/shimmer.d.ts

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

package/molecules/shimmer/shimmer.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Shimmer = void 0;
+var react_1 = __importDefault(require("react"));
+var Shimmer = function (_a) {
+    var className = _a.className;
+    return (react_1.default.createElement("div", { className: "animate-pulse rounded-md bg-gray-200 ".concat(className) }));
+};
+exports.Shimmer = Shimmer;

package/molecules/shimmer/type.d.ts

@@ -0,0 +1,3 @@
+export interface ShimmerProps {
+    className?: string;
+}

package/molecules/shimmer/type.js

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

package/molecules/user-card-shimmer/index.d.ts

@@ -0,0 +1 @@
+export * from './user-card-shimmer';

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

@@ -0,0 +1,17 @@
+"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("./user-card-shimmer"), exports);

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

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const UserCardShimmer: FC;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserCardShimmer = void 0;
+var react_1 = __importDefault(require("react"));
+var shimmer_1 = require("../shimmer");
+var UserCardShimmer = function () {
+    return (react_1.default.createElement("div", { className: "w-full overflow-hidden rounded-xl shadow-[0px_5px_16px_0px_#0000001A] lg:max-w-[415px]" },
+        react_1.default.createElement("div", { className: "relative overflow-hidden rounded-xl" },
+            react_1.default.createElement("div", { className: "relative pb-[76%]" },
+                react_1.default.createElement(shimmer_1.Shimmer, { className: "absolute inset-0 h-full w-full" }))),
+        react_1.default.createElement("div", { className: "p-4 text-center" },
+            react_1.default.createElement("div", { className: "mb-2 flex justify-center" },
+                react_1.default.createElement(shimmer_1.Shimmer, { className: "h-6 w-32" })),
+            react_1.default.createElement("div", { className: "mb-2 flex justify-center" },
+                react_1.default.createElement(shimmer_1.Shimmer, { className: "h-4 w-48" })),
+            react_1.default.createElement("div", { className: "mt-2 flex w-full flex-wrap justify-center gap-1.5" },
+                react_1.default.createElement(shimmer_1.Shimmer, { className: "h-6 w-16 rounded-full" }),
+                react_1.default.createElement(shimmer_1.Shimmer, { className: "h-6 w-16 rounded-full" })),
+            react_1.default.createElement("div", { className: "my-5 flex justify-center" },
+                react_1.default.createElement(shimmer_1.Shimmer, { className: "h-5 w-24" })),
+            react_1.default.createElement("div", { className: "flex justify-center gap-2.5" },
+                react_1.default.createElement(shimmer_1.Shimmer, { className: "h-6 w-32" })))));
+};
+exports.UserCardShimmer = UserCardShimmer;

package/organisms/advisors-section/advisors-section.js

@@ -8,10 +8,10 @@ var react_1 = __importDefault(require("react"));
 var section_header_1 = require("../section-header");
 var user_cards_grid_1 = require("../user-cards-grid");
 var AdvisorsSection = function (_a) {
-    var buttonLabel = _a.buttonLabel, cardItems = _a.cardItems, cardsLimit = _a.cardsLimit, heading = _a.heading, handleOnClick = _a.handleOnClick, subheading = _a.subheading;
+    var buttonLabel = _a.buttonLabel, cardItems = _a.cardItems, cardsLimit = _a.cardsLimit, heading = _a.heading, handleOnClick = _a.handleOnClick, subheading = _a.subheading, _b = _a.loading, loading = _b === void 0 ? false : _b;
     return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement(section_header_1.SectionHeader, { btnText: buttonLabel, handleButtonClick: handleOnClick, heading: heading, renderCtaButton: cardItems.length > cardsLimit, subheading: subheading }),
-            react_1.default.createElement(user_cards_grid_1.UserCardsGrid, { cardItems: cardItems, cardsLimit: cardsLimit }))));
+            react_1.default.createElement(user_cards_grid_1.UserCardsGrid, { cardItems: cardItems, cardsLimit: cardsLimit, loading: loading }))));
 };
 exports.AdvisorsSection = AdvisorsSection;

package/organisms/advisors-section/props.js

@@ -9,4 +9,5 @@ exports.advisorsSectionData = {
     cardItems: props_1.userCardGridData,
     cardsLimit: 6,
     handleOnClick: function () { return console.log('Button clicked!'); },
+    loading: false,
 };

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

@@ -6,4 +6,5 @@ export interface AdvisorsSectionProps {
     handleOnClick: () => void;
     heading: string;
     subheading: string;
+    loading: boolean;
 }

package/organisms/horoscope-cards-grid/horoscope-cards-grid.js

@@ -38,8 +38,8 @@ var react_1 = __importStar(require("react"));
 var molecules_1 = require("../../molecules");
 var type_1 = require("./type");
 var HoroscopeCardsGrid = function (_a) {
-    var cardItems = _a.cardItems, _b = _a.cardLimit, cardLimit = _b === void 0 ? type_1.HOROSCOPE_CARDS_LIMITS.SEVEN : _b, cardSize = _a.cardSize;
-    var _c = (0, react_1.useState)(false), isSmallDesktop = _c[0], setIsSmallDesktop = _c[1];
+    var cardItems = _a.cardItems, _b = _a.cardLimit, cardLimit = _b === void 0 ? type_1.HOROSCOPE_CARDS_LIMITS.FIVE : _b, cardSize = _a.cardSize, _c = _a.loading, loading = _c === void 0 ? false : _c;
+    var _d = (0, react_1.useState)(false), isSmallDesktop = _d[0], setIsSmallDesktop = _d[1];
     (0, react_1.useEffect)(function () {
         var handleResize = function () {
             setIsSmallDesktop(window.innerWidth >= 1020 && window.innerWidth < 1400);
@@ -51,7 +51,7 @@ var HoroscopeCardsGrid = function (_a) {
     var gridClassName = (0, react_1.useMemo)(function () {
         var baseClass = 'grid gap-4';
         if (cardSize === molecules_1.HOROSCOPE_CARD_SIZES.SM) {
-            return "".concat(baseClass, " grid-cols-2 sm:grid-cols-3 md:grid-cols-4 ").concat(isSmallDesktop ? 'lg:grid-cols-5' : 'lg:grid-cols-7');
+            return "".concat(baseClass, " grid-cols-2 sm:grid-cols-3 md:grid-cols-4 ").concat(isSmallDesktop ? 'lg:grid-cols-5' : 'lg:grid-cols-5');
         }
         return "".concat(baseClass, " grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8");
     }, [cardSize, isSmallDesktop]);
@@ -61,6 +61,9 @@ var HoroscopeCardsGrid = function (_a) {
     var slicedCardItems = (0, react_1.useMemo)(function () {
         return cardItems === null || cardItems === void 0 ? void 0 : cardItems.slice(0, cardLimit);
     }, [cardItems, cardLimit]);
+    if (loading)
+        return (react_1.default.createElement("div", { className: gridClassName }, Array.from({ length: cardLimit }).map(function (_, index) { return (react_1.default.createElement("div", { key: index, className: cardClassName },
+            react_1.default.createElement(molecules_1.HoroscopeShimmerCard, { cardSize: cardSize }))); })));
     return (react_1.default.createElement("div", { className: gridClassName }, slicedCardItems === null || slicedCardItems === void 0 ? void 0 : slicedCardItems.map(function (card, index) { return (react_1.default.createElement("div", { key: index, className: cardClassName },
         react_1.default.createElement(molecules_1.HoroscopeCard, { cardHeading: card.cardHeading, cardIcon: card.cardIcon, handleCardOnClick: card.handleCardOnClick, cardSize: cardSize }))); })));
 };

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

@@ -65,6 +65,7 @@ exports.horoscopeCardsGridData = {
             handleCardOnClick: function () { return console.log('GEMINI'); },
         },
     ],
-    cardLimit: 12,
+    cardLimit: 5,
     cardSize: molecules_1.HOROSCOPE_CARD_SIZES.MD,
+    loading: false,
 };

package/organisms/horoscope-cards-grid/type.d.ts

@@ -8,4 +8,5 @@ export interface HoroscopeCardsGridProps {
     cardItems: HoroscopeCardProps[];
     cardLimit: HOROSCOPE_CARDS_LIMITS;
     cardSize: HOROSCOPE_CARD_SIZES;
+    loading: boolean;
 }

package/organisms/horoscope-section/horoscope-section.js

@@ -8,11 +8,11 @@ var react_1 = __importDefault(require("react"));
 var section_header_1 = require("../section-header");
 var horoscope_cards_grid_1 = require("../horoscope-cards-grid");
 var HoroscopeSection = function (_a) {
-    var breadcrumbs = _a.breadcrumbs, cardItems = _a.cardItems, cardLimit = _a.cardLimit, cardSize = _a.cardSize, sectionHeading = _a.sectionHeading;
+    var breadcrumbs = _a.breadcrumbs, cardItems = _a.cardItems, cardLimit = _a.cardLimit, cardSize = _a.cardSize, sectionHeading = _a.sectionHeading, loading = _a.loading;
     return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement(section_header_1.SectionHeader, { heading: sectionHeading, subheading: "", renderCtaButton: false, handleButtonClick: function () { return null; }, btnText: "", breadcrumbs: breadcrumbs }),
             react_1.default.createElement("div", { className: "mt-9" },
-                react_1.default.createElement(horoscope_cards_grid_1.HoroscopeCardsGrid, { cardItems: cardItems, cardLimit: cardLimit, cardSize: cardSize })))));
+                react_1.default.createElement(horoscope_cards_grid_1.HoroscopeCardsGrid, { cardItems: cardItems, cardLimit: cardLimit, cardSize: cardSize, loading: loading })))));
 };
 exports.HoroscopeSection = HoroscopeSection;

package/organisms/horoscope-section/props.js

@@ -10,4 +10,5 @@ exports.horoscopeSectionData = {
     breadcrumbs: {
         items: [{ label: 'Hororscope', route: '/horoscope', isActive: false }],
     },
+    loading: false,
 };

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

@@ -7,4 +7,5 @@ export interface HoroscopeSectionProps {
     cardItems: HoroscopeCardProps[];
     cardLimit: HOROSCOPE_CARDS_LIMITS;
     cardSize: HOROSCOPE_CARD_SIZES;
+    loading: boolean;
 }

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

@@ -256,4 +256,5 @@ exports.userCardGridData = [
 exports.userGridData = {
     cardItems: exports.userCardGridData,
     cardsLimit: 6,
+    loading: false,
 };

package/organisms/user-cards-grid/type.d.ts

@@ -7,4 +7,5 @@ export declare enum USER_CARD_LIMITS {
 export interface UserGridProps {
     cardItems: UserCardProps[];
     cardsLimit: USER_CARD_LIMITS;
+    loading: boolean;
 }

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

@@ -47,9 +47,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserCardsGrid = void 0;
 var react_1 = __importStar(require("react"));
 var user_card_1 = require("../../molecules/user-card/user-card");
+var user_card_shimmer_1 = require("../../molecules/user-card-shimmer");
 var UserCardsGrid = function (_a) {
     var _b;
-    var cardItems = _a.cardItems, _c = _a.cardsLimit, cardsLimit = _c === void 0 ? 6 : _c;
+    var cardItems = _a.cardItems, _c = _a.cardsLimit, cardsLimit = _c === void 0 ? 6 : _c, loading = _a.loading;
     var _d = (0, react_1.useState)(false), isTablet = _d[0], setIsTablet = _d[1];
     (0, react_1.useEffect)(function () {
         var handleResize = function () {
@@ -62,6 +63,9 @@ var UserCardsGrid = function (_a) {
     var filteredCardItems = isTablet && cardsLimit === 3
         ? (_b = cardItems === null || cardItems === void 0 ? void 0 : cardItems.slice(0, cardsLimit)) === null || _b === void 0 ? void 0 : _b.filter(function (_, index) { return index !== 2; })
         : cardItems === null || cardItems === void 0 ? void 0 : cardItems.slice(0, cardsLimit);
+    if (loading)
+        return (react_1.default.createElement("div", { className: "mt-10" },
+            react_1.default.createElement("div", { className: "grid gap-10 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3" }, Array.from({ length: cardsLimit }).map(function (_, index) { return (react_1.default.createElement(user_card_shimmer_1.UserCardShimmer, { key: index })); }))));
     return (react_1.default.createElement("div", { className: "mt-10" },
         react_1.default.createElement("div", { className: "grid gap-10 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3" }, filteredCardItems === null || filteredCardItems === void 0 ? void 0 : filteredCardItems.map(function (userData) { return (react_1.default.createElement(user_card_1.UserCard, __assign({ key: userData.id }, userData))); }))));
 };

package/organisms/users-list-explore/props.js

@@ -27,4 +27,5 @@ exports.userListExploreData = {
     onPrevious: function () { return void 0; },
     subheading: 'Getting started with Kismaa is quick, easy, and free. Start with a 14 day free trial, and end with countless happy patients.',
     totalPages: 3,
+    loading: false,
 };

package/organisms/users-list-explore/type.d.ts

@@ -19,4 +19,5 @@ export type UsersListExploreProps = {
     onPrevious: () => void;
     subheading: string;
     totalPages: number;
+    loading: boolean;
 };

package/organisms/users-list-explore/users-list-explore.js

@@ -9,11 +9,11 @@ var section_header_1 = require("../section-header");
 var user_cards_grid_1 = require("../user-cards-grid");
 var pagination_1 = require("../pagination/pagination");
 var UsersListExplore = function (_a) {
-    var badgeText = _a.badgeText, breadcrumbs = _a.breadcrumbs, btnIcon = _a.btnIcon, btnOutlined = _a.btnOutlined, btnText = _a.btnText, btnType = _a.btnType, cardItems = _a.cardItems, cardsLimit = _a.cardsLimit, currentPage = _a.currentPage, handleButtonClick = _a.handleButtonClick, heading = _a.heading, numberOfFilters = _a.numberOfFilters, onNext = _a.onNext, onPageChange = _a.onPageChange, onPrevious = _a.onPrevious, subheading = _a.subheading, totalPages = _a.totalPages;
+    var badgeText = _a.badgeText, breadcrumbs = _a.breadcrumbs, btnIcon = _a.btnIcon, btnOutlined = _a.btnOutlined, btnText = _a.btnText, btnType = _a.btnType, cardItems = _a.cardItems, cardsLimit = _a.cardsLimit, currentPage = _a.currentPage, handleButtonClick = _a.handleButtonClick, heading = _a.heading, numberOfFilters = _a.numberOfFilters, onNext = _a.onNext, onPageChange = _a.onPageChange, onPrevious = _a.onPrevious, subheading = _a.subheading, totalPages = _a.totalPages, loading = _a.loading;
     return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
         react_1.default.createElement("div", { className: "kismaa-container" },
             react_1.default.createElement(section_header_1.SectionHeader, { badgeText: badgeText, breadcrumbs: breadcrumbs, btnIcon: btnIcon, btnOutlined: btnOutlined, btnText: btnText, btnType: btnType, handleButtonClick: handleButtonClick, heading: heading, numberOfFilters: numberOfFilters, renderCtaButton: true, subheading: subheading }),
-            react_1.default.createElement(user_cards_grid_1.UserCardsGrid, { cardItems: cardItems, cardsLimit: cardsLimit }),
+            react_1.default.createElement(user_cards_grid_1.UserCardsGrid, { cardItems: cardItems, cardsLimit: cardsLimit, loading: loading }),
             react_1.default.createElement("div", { className: "mt-12" },
                 react_1.default.createElement(pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, onPrevious: onPrevious, onNext: onNext })))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/kismaa-web-ui",
-  "version": "0.2.32",
+  "version": "0.2.34",
   "source": "src/index.ts",
   "main": "lib/main.js",
   "module": "lib/module.js",