@appcorp/kismaa-web-ui 0.1.86 → 0.1.87

package/atoms/calendar-icon.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IconProps } from './facebook-icon';
+export declare const CalendarIcon: FC<IconProps>;

package/atoms/calendar-icon.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var CalendarIcon = function (_a) {
+    var className = _a.className;
+    return (react_1.default.createElement("svg", { className: className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { d: "M15.8333 3.33337H4.16667C3.24619 3.33337 2.5 4.07957 2.5 5.00004V16.6667C2.5 17.5872 3.24619 18.3334 4.16667 18.3334H15.8333C16.7538 18.3334 17.5 17.5872 17.5 16.6667V5.00004C17.5 4.07957 16.7538 3.33337 15.8333 3.33337Z", stroke: "#8492A7", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        react_1.default.createElement("path", { d: "M13.334 1.66663V4.99996", stroke: "#8492A7", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        react_1.default.createElement("path", { d: "M6.66602 1.66663V4.99996", stroke: "#8492A7", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        react_1.default.createElement("path", { d: "M2.5 8.33337H17.5", stroke: "#8492A7", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+};
+exports.CalendarIcon = CalendarIcon;

package/atoms/clock-icon.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IconProps } from './facebook-icon';
+export declare const CalendarIcon: FC<IconProps>;

package/atoms/clock-icon.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var CalendarIcon = function (_a) {
+    var className = _a.className;
+    return (react_1.default.createElement("svg", { className: className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("g", { "clip-path": "url(#clip0_942_16779)" },
+            react_1.default.createElement("path", { d: "M9.99935 18.3333C14.6017 18.3333 18.3327 14.6023 18.3327 9.99996C18.3327 5.39759 14.6017 1.66663 9.99935 1.66663C5.39698 1.66663 1.66602 5.39759 1.66602 9.99996C1.66602 14.6023 5.39698 18.3333 9.99935 18.3333Z", stroke: "#8492A7", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+            react_1.default.createElement("path", { d: "M10 5V10L13.3333 11.6667", stroke: "#8492A7", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })),
+        react_1.default.createElement("defs", null,
+            react_1.default.createElement("clipPath", { id: "clip0_942_16779" },
+                react_1.default.createElement("rect", { width: "20", height: "20", fill: "white" })))));
+};
+exports.CalendarIcon = CalendarIcon;

package/molecules/blog-list/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { BlogItemsProps } from '../../organisms';
+export declare const BlogList: FC<{
+    items: BlogItemsProps[];
+}>;

package/molecules/blog-list/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlogList = void 0;
+var react_1 = __importDefault(require("react"));
+var image_1 = __importDefault(require("next/image"));
+var calendar_icon_1 = require("../../atoms/calendar-icon");
+var util_functions_1 = require("@react-pakistan/util-functions");
+var outline_1 = require("@heroicons/react/24/outline");
+var BlogList = function (_a) {
+    var items = _a.items;
+    return (react_1.default.createElement("div", { className: "flex flex-col gap-8" }, items.map(function (d) { return (react_1.default.createElement("div", { key: d.id, className: "flex cursor-pointer flex-row gap-4 rounded-lg bg-gray-100 p-4 shadow-md" },
+        react_1.default.createElement("div", { className: "relative h-50 w-80 rounded-lg shadow-xl" },
+            react_1.default.createElement(image_1.default, { alt: d.title, className: "rounded-lg", fill: true, height: 0, objectFit: "cover", priority: true, sizes: "20vw", src: d.banner, width: 0 })),
+        react_1.default.createElement("div", { className: "flex w-full flex-col justify-center gap-4" },
+            react_1.default.createElement("div", { className: "flex flex-row items-start justify-start gap-8" },
+                react_1.default.createElement("div", { className: "flex flex-row items-center gap-2" },
+                    react_1.default.createElement(calendar_icon_1.CalendarIcon, { className: "size-4" }),
+                    react_1.default.createElement("p", { className: "text-gray-500" }, (0, util_functions_1.formatDate)(d.date, util_functions_1.DATE_FORMATS.DAY_DD_MM_YY_COMPACT))),
+                react_1.default.createElement("div", { className: "flex flex-row items-center gap-2" },
+                    react_1.default.createElement(outline_1.ClockIcon, { className: "size-5", stroke: "var(--color-gray-500)" }),
+                    react_1.default.createElement("p", { className: "text-gray-500" }, d.readTime))),
+            react_1.default.createElement("p", { className: "font-secondary text-xl font-bold" }, d.title),
+            react_1.default.createElement("p", { className: "text-md text-gray-500" }, (0, util_functions_1.truncateText)(d.excerpt, 100))))); })));
+};
+exports.BlogList = BlogList;

package/molecules/blog-search/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BlogSearch: () => React.JSX.Element;

package/molecules/blog-search/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlogSearch = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = require("../button");
+var BlogSearch = function () {
+    return (react_1.default.createElement("div", { className: "mb-8 grid grid-cols-5" },
+        react_1.default.createElement("input", { className: "col-span-3 border-0 bg-gray-100", placeholder: "keyword..." }),
+        react_1.default.createElement("div", { className: "col-span-2" },
+            react_1.default.createElement(button_1.Button, { label: "Search", type: button_1.BUTTON_TYPES.QUATERNARY, size: button_1.BUTTON_SIZES.SM }))));
+};
+exports.BlogSearch = BlogSearch;

package/molecules/blog-side-bar/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BlogSideBar: () => React.JSX.Element;

package/molecules/blog-side-bar/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlogSideBar = void 0;
+var react_1 = __importDefault(require("react"));
+var blog_search_1 = require("../blog-search");
+var blog_side_bar_section_1 = require("../blog-side-bar-section");
+var BlogSideBar = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(blog_side_bar_section_1.BlogSideBarSection, { heading: "Search Anything" }),
+        react_1.default.createElement(blog_search_1.BlogSearch, null),
+        react_1.default.createElement(blog_side_bar_section_1.BlogSideBarSection, { heading: "Recent Post" })));
+};
+exports.BlogSideBar = BlogSideBar;

package/molecules/blog-side-bar-section/index.d.ts

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

package/molecules/blog-side-bar-section/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlogSideBarSection = void 0;
+var react_1 = __importDefault(require("react"));
+var BlogSideBarSection = function (_a) {
+    var heading = _a.heading;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("p", { className: "font-secondary text-lg font-bold" }, heading),
+        react_1.default.createElement("hr", { className: "my-4 border border-gray-300" })));
+};
+exports.BlogSideBarSection = BlogSideBarSection;

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

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

package/organisms/blog-section/blog-section.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlogSection = void 0;
+var react_1 = __importDefault(require("react"));
+var section_header_1 = require("../section-header");
+var blog_list_1 = require("../../molecules/blog-list");
+var blog_side_bar_1 = require("../../molecules/blog-side-bar");
+var molecules_1 = require("../../molecules");
+var BlogSection = function (_a) {
+    var breadcrumbs = _a.breadcrumbs, sectionHeading = _a.sectionHeading, items = _a.items;
+    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: "grid grid-cols-12 gap-16 pt-8" },
+                react_1.default.createElement("div", { className: "col-span-8" },
+                    react_1.default.createElement(blog_list_1.BlogList, { items: items }),
+                    react_1.default.createElement("div", { className: "flex justify-center" },
+                        react_1.default.createElement("div", { className: "max-w-50 py-8" },
+                            react_1.default.createElement(molecules_1.Button, { type: molecules_1.BUTTON_TYPES.QUATERNARY, label: "Load More", size: molecules_1.BUTTON_SIZES.MD })))),
+                react_1.default.createElement("div", { className: "col-span-4" },
+                    react_1.default.createElement(blog_side_bar_1.BlogSideBar, null))))));
+};
+exports.BlogSection = BlogSection;

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

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

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

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

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

package/organisms/blog-section/props.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blogSectionData = void 0;
+exports.blogSectionData = {
+    sectionHeading: 'Blogs',
+    breadcrumbs: {
+        items: [{ label: 'Blog', route: '/blog', isActive: false }],
+    },
+    items: [
+        {
+            id: 'item-1',
+            banner: 'https://media.istockphoto.com/id/887987150/photo/blogging-woman-reading-blog.jpg?s=612x612&w=0&k=20&c=7SScR_Y4n7U3k5kBviYm3VwEmW4vmbngDUa0we429GA=',
+            date: new Date().toISOString(),
+            readTime: '3 mins',
+            title: '3 Interviewing Tips That Can Help You Find Right Candidate',
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas.',
+        },
+        {
+            id: 'item-2',
+            banner: 'https://media.istockphoto.com/id/887987150/photo/blogging-woman-reading-blog.jpg?s=612x612&w=0&k=20&c=7SScR_Y4n7U3k5kBviYm3VwEmW4vmbngDUa0we429GA=',
+            date: new Date().toISOString(),
+            readTime: '3 mins',
+            title: '3 Interviewing Tips That Can Help You Find Right Candidate',
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas. Morbi amet, lorem tristique In laoreet morbi morbi lorem maecenas.',
+        },
+    ],
+};

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

@@ -0,0 +1,14 @@
+import { BreadcrumbsProps } from '../../molecules/breadcrumbs';
+export interface BlogItemsProps {
+    banner: string;
+    date: string;
+    excerpt: string;
+    id: string;
+    readTime: string;
+    title: string;
+}
+export interface BlogSectionProps {
+    sectionHeading: string;
+    items: BlogItemsProps[];
+    breadcrumbs: BreadcrumbsProps;
+}

package/organisms/blog-section/type.js

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

package/organisms/index.d.ts

@@ -5,6 +5,8 @@ export * from './advisors-section';
 export * from './attribute-card';
 export * from './attributes-section';
 export * from './banner';
+export * from './banner-slider';
+export * from './blog-section';
 export * from './core-values-section';
 export * from './cta-banner';
 export * from './customer-reviews';
@@ -17,7 +19,9 @@ export * from './horoscope-cards-grid';
 export * from './horoscope-details';
 export * from './horoscope-details-section';
 export * from './horoscope-section';
+export * from './mega-menu';
 export * from './navbar';
+export * from './not-found';
 export * from './onboarding-step-card';
 export * from './onboarding-steps';
 export * from './our-mission';
@@ -30,6 +34,3 @@ export * from './user-cards-grid';
 export * from './user-detail-banner';
 export * from './user-details';
 export * from './users-list-explore';
-export * from './not-found';
-export * from './banner-slider';
-export * from './mega-menu';

package/organisms/index.js

@@ -21,6 +21,8 @@ __exportStar(require("./advisors-section"), exports);
 __exportStar(require("./attribute-card"), exports);
 __exportStar(require("./attributes-section"), exports);
 __exportStar(require("./banner"), exports);
+__exportStar(require("./banner-slider"), exports);
+__exportStar(require("./blog-section"), exports);
 __exportStar(require("./core-values-section"), exports);
 __exportStar(require("./cta-banner"), exports);
 __exportStar(require("./customer-reviews"), exports);
@@ -33,7 +35,9 @@ __exportStar(require("./horoscope-cards-grid"), exports);
 __exportStar(require("./horoscope-details"), exports);
 __exportStar(require("./horoscope-details-section"), exports);
 __exportStar(require("./horoscope-section"), exports);
+__exportStar(require("./mega-menu"), exports);
 __exportStar(require("./navbar"), exports);
+__exportStar(require("./not-found"), exports);
 __exportStar(require("./onboarding-step-card"), exports);
 __exportStar(require("./onboarding-steps"), exports);
 __exportStar(require("./our-mission"), exports);
@@ -46,6 +50,3 @@ __exportStar(require("./user-cards-grid"), exports);
 __exportStar(require("./user-detail-banner"), exports);
 __exportStar(require("./user-details"), exports);
 __exportStar(require("./users-list-explore"), exports);
-__exportStar(require("./not-found"), exports);
-__exportStar(require("./banner-slider"), exports);
-__exportStar(require("./mega-menu"), exports);

package/package.json

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

package/templates/blog-page/blog-page.d.ts

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

package/templates/blog-page/blog-page.js

@@ -0,0 +1,32 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlogPage = void 0;
+var organisms_1 = require("../../organisms");
+var react_1 = __importDefault(require("react"));
+var disclaimer_1 = require("../../molecules/disclaimer/disclaimer");
+var BlogPage = function (_a) {
+    var banner = _a.banner, blogSection = _a.blogSection, ctaBanner = _a.ctaBanner, footer = _a.footer, getAppBanner = _a.getAppBanner, navbar = _a.navbar;
+    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(organisms_1.BlogSection, __assign({}, blogSection)),
+        react_1.default.createElement(organisms_1.GetAppBanner, __assign({}, getAppBanner)),
+        react_1.default.createElement(organisms_1.CtaBanner, __assign({}, ctaBanner)),
+        react_1.default.createElement(organisms_1.Footer, __assign({}, footer)),
+        react_1.default.createElement(disclaimer_1.Disclaimer, { id: "" })));
+};
+exports.BlogPage = BlogPage;

package/templates/blog-page/index.d.ts

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

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

package/templates/blog-page/props.d.ts

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

package/templates/blog-page/props.js

@@ -0,0 +1,29 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blogPageData = void 0;
+var props_1 = require("../../organisms/navbar/props");
+var props_2 = require("../../organisms/banner/props");
+var organisms_1 = require("../../organisms");
+var props_3 = require("../../organisms/get-app-banner/props");
+var props_4 = require("../../organisms/cta-banner/props");
+var props_5 = require("../../organisms/footer/props");
+var props_6 = require("../../organisms/blog-section/props");
+exports.blogPageData = {
+    navbar: __assign({}, props_1.navbarData),
+    banner: __assign(__assign({}, props_2.bannerData), { type: organisms_1.BANNER_TYPES.HEADER }),
+    blogSection: __assign({}, props_6.blogSectionData),
+    getAppBanner: __assign({}, props_3.getAppBannerData),
+    ctaBanner: __assign({}, props_4.ctaBannerData),
+    footer: __assign({}, props_5.footerData),
+};

package/templates/blog-page/type.d.ts

@@ -0,0 +1,9 @@
+import { BannerProps, BlogSectionProps, CtaBannerProps, FooterProps, GetAppProps, NavbarProps } from '../../organisms';
+export interface BlogPageProps {
+    navbar: NavbarProps;
+    banner: BannerProps;
+    blogSection: BlogSectionProps;
+    getAppBanner: GetAppProps;
+    ctaBanner: CtaBannerProps;
+    footer: FooterProps;
+}

package/templates/blog-page/type.js

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