@agilant/toga-blox 1.0.9 → 1.0.11

package/dist/components/Page/ViewPageTemplate.stories.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { withStoryBook } from "../../hoc";
+import Hero from "../Hero/Hero";
+import PageSection from "../PageSection/PageSection";
+import Badge from "../Badge/Badge";
+import Text from "../Text/Text";
+import Image from "../Image/Image";
+import Input from "../Input/Input";
+import Nav from "../Nav/Nav";
+import Card from "../Card/Card";
+import FormButton from "../FormButton";
+import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
+import ViewTemplatePage from "./ViewPageTemplate";
+import Footer from "../Footer/Footer";
+import GenericList from "../GenericList/GenericList";
+import { DUMMYCOMPASSNAVDATA } from "../Nav/DUMMYNAVDATA.json";
+import { DUMMYCOMPASSPRODUCTDATA } from "../Card/DUMMYPRODUCTDATA.json";
+import TableDataDummy from "./TableDataDummy";
+import Header from "../Header/Header";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+// Wrap your component with the HOC
+const StorybookViewTemplatePage = withStoryBook(ViewTemplatePage);
+export default {
+    title: "Page/ViewPageTemplate",
+    component: ViewTemplatePage,
+    argTypes: {
+        children: {
+            control: {
+                disable: true,
+            },
+            description: "nodes that can be passed to the component",
+        },
+    },
+    tags: ["autodocs"],
+};
+const Template = (args) => (_jsx(StorybookViewTemplatePage, { ...args, storybookStyle: {
+        backgroundColor: args.bgColor,
+    } }));
+export const DefaultView = Template.bind({});
+DefaultView.args = {
+    children: (_jsx("div", { className: "min-h-96 flex items-center justify-center", children: _jsx(PageSection, { children: _jsx(_Fragment, { children: "Default page" }) }, "pageSectionTwo") })),
+};
+export const ViewWithHeroAndCardsWithGlassHeader = Template.bind({});
+ViewWithHeroAndCardsWithGlassHeader.args = {
+    children: [
+        //the div acts as a spacer for the header because the header is fixed
+        _jsx("div", { className: "h-16" }, "spacer"),
+        _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { mobileLeft: true, hasIcons: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, hasMobileMenu: true, logoBorderRadius: true, logoHoverColor: "hover:bg-blue-500", backgroundColor: "bg-gray-500", bottomBorderColor: "border-black", mobileOpenIcon: getFontAwesomeIcon("hamburger"), mobileCloseIcon: getFontAwesomeIcon("x"), mobileMenuBackground: "bg-blue-500", hasMobileIcons: true, hasMobileNavItems: true, hasMobileBadge: false, hasMobileSearchBar: true, hasAnimatedHamburgerButton: true, icons: _jsx(_Fragment, {}), badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "hover:text-blue-500", borderColor: "border-none", mobileIcon: getFontAwesomeIcon("phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) }), logo: _jsx(Image, { src: "../../../assets/Logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(Nav, { navData: DUMMYCOMPASSNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "none", parentHoverFontColor: "text-black", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "rounded", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "bg-white", submenuHoverBackground: "hover:bg-blue-500", submenuHoverBorderStyle: "top-bottom", submenuHoverBorderColor: "border-blue-500", includeSubmenuImages: true, mobileBreakpoint: "extraLarge", accordionParentStyle: "rounded p-2 w-full border-b-2 border-b-blue-700 text-black", accordionExpandedStyle: "pl-2 py-3" }), input: _jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "border-gray-500", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "bg-white", additionalClasses: "bg-blue-500", button: _jsx(FormButton, { icon: getFontAwesomeIcon("search"), backgroundColor: "bg-blue-500", hoverBackground: "hover:bg-black", hoverFontColor: "hover:text-white", additionalClasses: "h-full w-8 justify-center", shape: "none" }), inputWidth: "w-full" }) }) }, "header"),
+        _jsx(Hero, { textAlignment: "center", background: "image" }, "hero"),
+        _jsx(PageSection, { sectionContainerClasses: "flex flex-col w-full h-full bg-slate-100 p-6\n      justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "unordered", hasVirtualization: false, containerClasses: "w-full h-[100%] grid grid-cols-4 gap-y-12 gap-x-8 max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center", renderItem: (item) => (_jsx(Card, { containerClasses: "w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: { ...item, title: "" } }) }, item.id)) }) }, "pageSectionOne"),
+    ],
+};
+export const ViewWithTable = Template.bind({});
+ViewWithTable.args = {
+    children: [
+        _jsx(Hero, { textAlignment: "center", background: "gradient" }, "hero"),
+        _jsx(PageSection, { children: _jsx(TableDataDummy, {}) }, "pageSectionFour"),
+    ],
+};
+export const ViewWithTableAndTitle = Template.bind({});
+ViewWithTableAndTitle.args = {
+    children: [
+        _jsx(Hero, { textAlignment: "left", background: "gradient" }, "hero"),
+        _jsx(PageSection, { children: _jsx(Text, { size: "text-2xl", color: "text-black", text: "Staff", fontFamily: "", tag: "h1", additionalClasses: "font-bold" }) }, "37"),
+        _jsx(PageSection, { children: _jsx(TableDataDummy, {}) }, "pageSectionFive"),
+    ],
+};
+export const CompassPageView = Template.bind({});
+CompassPageView.args = {
+    children: [
+        _jsxs("div", { children: [_jsx("div", { className: "h-16" }), _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { mobileLeft: true, icons: _jsx(_Fragment, {}), hasIcons: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, hasMobileMenu: true, hasAnimatedHamburgerButton: true, logoBorderRadius: true, logoHoverColor: "hover:bg-green-500", backgroundColor: "bg-gray-500", bottomBorderColor: "border-green-500", mobileOpenIcon: getFontAwesomeIcon("hamburger"), mobileCloseIcon: getFontAwesomeIcon("x"), mobileMenuBackground: "bg-green-500", hasMobileIcons: true, hasMobileNavItems: true, hasMobileBadge: false, hasMobileSearchBar: true, badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "hover:text-green-500", borderColor: "border-none", mobileIcon: getFontAwesomeIcon("phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) }), logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(Nav, { navData: DUMMYCOMPASSNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "none", parentHoverFontColor: "text-black", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "rounded", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "bg-white", submenuHoverBackground: "hover:bg-green-500", submenuHoverBorderStyle: "top-bottom", submenuHoverBorderColor: "border-green-500", includeSubmenuImages: true, mobileBreakpoint: "extraLarge", accordionParentStyle: "rounded p-2 w-full border-b-2 border-b-teal-700 text-black", accordionExpandedStyle: "pl-2 py-3" }), input: _jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "border-gray-500", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "bg-white", additionalClasses: "bg-blue-500", button: _jsx(FormButton, { icon: getFontAwesomeIcon("search"), backgroundColor: "bg-green-500", hoverBackground: "hover:bg-black", hoverFontColor: "hover:text-white", additionalClasses: "h-full w-8 justify-center", shape: "none" }), inputWidth: "w-full" }) }) }), _jsx(Hero, { textAlignment: "left", background: "image", src: "../../../assets/compass-tech-hero-bg.png", text: _jsx(Text, { size: "text-2xl", color: "text-white", fontFamily: "font-serif", text: "Equip your team with exactly what they need", tag: "h1", additionalClasses: "w-3/4 max-sm:text-xl max-sm:w-3/4" }) }, "hero"), _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n      justify-center items-center h-[100%]", children: _jsx(Text, { size: "text-2xl", color: "text-black", fontFamily: "font-serif", text: "Kits", tag: "h2", additionalClasses: "my-4  max-sm:text-xl" }) }, "pageSection"), _jsx(PageSection, { sectionContainerClasses: "flex flex-col w-full h-full bg-slate-100 p-6\n      justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, hasVirtualization: false, listType: "unordered", containerClasses: "w-full grid grid-cols-4 gap-y-12 gap-x-8 max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center", renderItem: (item) => (_jsx(Card, { containerClasses: "w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: { ...item, title: "" } }) }, item.id)) }) }, "pageSectionOne"), _jsxs(PageSection, { sectionContainerClasses: "flex w-full bg-yellow-400 flex p-6 justify-center items-center h-[100%] mt-6 max-sm:flex-col", children: [_jsx(Text, { size: "text-xl", color: "text-black", fontFamily: "font-serif", text: "Help us improve your experience:", tag: "h2", additionalClasses: "p-6 max-sm:p-2 max-sm:text-lg" }), _jsx(FormButton, { text: _jsx(Text, { size: "", color: "", text: "Take the Survey!", fontFamily: "" }), backgroundColor: "bg-green-500", shape: "rounded", borderColor: "border-none", hoverBackground: "hover:bg-green-500", hoverFontColor: "hover:text-green-500", hoverBorderColor: "hover:border-green-500", hoverUnderline: true, onClick: () => alert("Button clicked!"), as: "a" })] }), _jsx(Footer, { logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Compass Logo.", background: false, additionalClasses: " w-40 p-2" }), title: _jsx(Text, { size: "text-xl", color: "", text: "Compass Website", fontFamily: "", tag: "h2", additionalClasses: "font-bold uppercase pl-2 mt-2" }), slogan: _jsx(Text, { size: "text-md", color: "", text: "Great slogan goes here.", fontFamily: "", tag: "p", additionalClasses: "pl-2" }), copyRightText: _jsx(Text, { size: "md", color: "text-black", text: "Copyright \u00A9 2024 - All right reserved by Generic Company", fontFamily: "", additionalClasses: "text-center" }), socialTitle: _jsx(Text, { size: "md", color: "text-black", text: "Connect", fontFamily: "", additionalClasses: "font-bold uppercase w-full" }), contactTitle: _jsx(Text, { size: "md", color: "text-black", text: "Contact Us:", fontFamily: "", additionalClasses: "font-bold uppercase" }), logoBorderRadius: true, hasNavItems: true, hasSocial: true, logoHoverColor: "hover:bg-green-500", backgroundColor: "bg-green-500", accordionGap: "gap-1", copyRightTextPlacement: "center", socialPlacement: "center", accordionParentStyle: "border-b border-black p-2 w-full", accordionExpandedStyle: "pl-3 py-3" })] }, "randomNumberOne"),
+    ],
+};

package/dist/components/Page/ViewPageTemplate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Page/ViewPageTemplate.test.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, beforeEach, test, it } from "vitest";
+import ViewTemplatePage from "./ViewPageTemplate";
+import Hero from "../Hero/Hero";
+import PageSection from "../PageSection/PageSection";
+import Badge from "../Badge/Badge";
+import Text from "../Text/Text";
+import Image from "../Image/Image";
+import Nav from "../Nav/Nav";
+import Card from "../Card/Card";
+import FormButton from "../FormButton";
+import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
+import Footer from "../Footer/Footer";
+import { DUMMYICONCOMPASSDATA } from "../Header/DUMMYICONDATA.json";
+import { DUMMYCOMPASSNAVDATA } from "../Nav/DUMMYNAVDATA.json";
+import { DUMMYCOMPASSPRODUCTDATA } from "../Card/DUMMYPRODUCTDATA.json";
+import Header from "../Header/Header";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import GenericList from "../GenericList/GenericList";
+describe("<ViewTemplatePage />", () => {
+    it("renders with default background color", () => {
+        const { container } = render(_jsx(ViewTemplatePage, { children: _jsx("p", { children: "Content goes here" }) }));
+        // Check if the default background color is applied
+        expect(container.firstChild).toHaveClass("bg-gray-100");
+    });
+    it("renders with custom background color", () => {
+        const customBgColor = "bg-red-500";
+        const { container } = render(_jsx(ViewTemplatePage, { bgColor: customBgColor, children: _jsx("p", { children: "Content goes here" }) }));
+        // Check if the custom background color is applied
+        expect(container.firstChild).toHaveClass(customBgColor);
+    });
+    it("renders children correctly", () => {
+        const { getByText } = render(_jsx(ViewTemplatePage, { children: _jsx("p", { children: "Test child content" }) }));
+        // Check if the child content is rendered
+        expect(getByText("Test child content")).toBeInTheDocument();
+    });
+});
+describe("<ViewTemplatePage />", () => {
+    beforeEach(() => {
+        render(_jsxs(ViewTemplatePage, { children: ["children: [ ", _jsx("div", { className: "h-16" }), ",", _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { hasIcons: true, iconsData: DUMMYICONCOMPASSDATA, logoBorderRadius: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, logoHoverColor: "green", backgroundColor: "gray", bottomBorderColor: "green", badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "green", borderColor: "none", mobileIcon: getFontAwesomeIcon("phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "sm", color: "primary", fontFamily: "serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "xs", color: "primary", fontFamily: "serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) }), logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(Nav, { navData: DUMMYCOMPASSNAVDATA, navBackgroundColor: "#FFFFF", parentHoverBackground: "none", parentHoverFontColor: "black", parentHoverUnderline: true, parentHoverBorderColor: "none", parentShape: "cornered", parentBackground: "none", parentBorderColor: "none", submenuBackgroundColor: "white", submenuHoverBackground: "green", submenuHoverBorderStyle: "top-bottom", submenuHoverBorderColor: "green", includeSubmenuImages: true, mobileBreakpoint: "extraLarge", accordionParentStyle: "cornered p-2 w-full border-b-2 border-b-teal-700 text-black", accordionExpandedStyle: "pl-2 py-3" }) }) }), ",", _jsx(Hero, { textAlignment: "right", background: "image", src: "../../../assets/compass-tech-hero-bg.png", text: _jsx(Text, { size: "xxxl", color: "white", fontFamily: "serif", text: "Equip your team with exactly what they need", tag: "h1", additionalClasses: "text-left w-3/4 max-xl:text-xl max-lg:text-xl max-md:hidden" }) }, "hero"), ",", _jsx("div", { "data-testid": "kits-header-section", children: _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n\t\t\t\tjustify-center items-center h-[100%]", children: _jsx(Text, { size: "xxxl", color: "black", fontFamily: "serif", text: "Kits", tag: "h2", additionalClasses: "my-8" }) }, "pageSection") }), ",", _jsx("div", { "data-testid": "kits-cards-section", children: _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n\t\t\tjustify-center items-center h-[100%]", children: _jsx(_Fragment, { children: _jsx("div", { className: "w-3/4 grid grid-cols-4 gap-8 h-[100%] max-xl:gap-1 max-lg:grid-cols-2 max-lg:gap-y-24 max-lg:justify-items-center", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "w-3/4", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: item }) }, item.id)) }) }) }) }, "pageSection") }), ",", _jsx("div", { "data-testid": "survey-section", children: _jsxs(PageSection, { sectionContainerClasses: "w-full bg-yellow-400 flex p-6\n\t\t\t\tjustify-center items-center h-[100%] mt-6", children: [_jsx(Text, { size: "xl", color: "black", fontFamily: "serif", text: "Equip your team with exactly what they need", tag: "h1", additionalClasses: "mr-8" }), _jsx(FormButton, { text: _jsx(Text, { size: "", color: "", text: "Take the Survey!", fontFamily: "" }), shape: "semiRounded", borderColor: "none", hoverBackground: "green", hoverFontColor: "green", hoverBorderColor: "green", hoverUnderline: true, onClick: () => alert("Button clicked!"), as: "a" })] }) }), ",", _jsx(Footer, { logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Compass Logo.", background: false, additionalClasses: " w-40 p-2" }), title: _jsx(Text, { size: "xl", color: "", text: "Compass Website", fontFamily: "", tag: "h2", additionalClasses: "font-bold uppercase pl-2 mt-2 max-md:text-sm" }), slogan: _jsx(Text, { size: "md", color: "", text: "Great slogan goes here.", fontFamily: "", tag: "p", additionalClasses: "pl-2" }), copyRightText: _jsx(Text, { size: "md", color: "black", text: "Copyright \u00A9 2024 - All right reserved by Generic Company", fontFamily: "", additionalClasses: "text-center" }), socialTitle: _jsx(Text, { size: "md", color: "black", text: "Connect", fontFamily: "", additionalClasses: "font-bold uppercase w-full" }), contactTitle: _jsx(Text, { size: "md", color: "black", text: "Contact Us:", fontFamily: "", additionalClasses: "font-bold uppercase" }), logoBorderRadius: true, hasNavItems: true, hasSocial: true, logoHoverColor: "green", backgroundColor: "green", accordionGap: "gap-1", copyRightTextPlacement: "center", socialPlacement: "center", accordionParentStyle: "border-b border-black p-2 w-full", accordionExpandedStyle: "pl-3 py-3" }), ", ]"] }));
+    });
+    test("renders header on page", () => {
+        const header = screen.getByTestId("header");
+        expect(header).toBeInTheDocument();
+    });
+    test("renders hero on page", () => {
+        const hero = screen.getByTestId("image-background-hero");
+        expect(hero).toBeInTheDocument();
+    });
+    test("renders hero on page", () => {
+        const hero = screen.getByTestId("image-background-hero");
+        expect(hero).toBeInTheDocument();
+    });
+    test("renders kits header on page", () => {
+        const kitsHeading = screen.getByTestId("kits-header-section");
+        expect(kitsHeading).toBeInTheDocument();
+    });
+    test("renders cards section on page", () => {
+        const kitsCards = screen.getByTestId("kits-cards-section");
+        expect(kitsCards).toBeInTheDocument();
+    });
+    test("renders survey section on page", () => {
+        const surveySection = screen.getByTestId("survey-section");
+        expect(surveySection).toBeInTheDocument();
+    });
+    test("renders footer on page", () => {
+        const footer = screen.getByTestId("footer");
+        expect(footer).toBeInTheDocument();
+    });
+});

package/{src/components/Page/ViewPageTemplate.types.ts → dist/components/Page/ViewPageTemplate.types.d.ts}

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
-
 export interface ViewPageTemplateTypes {
-	children: ReactNode;
-	bgColor?: string;
+    children: ReactNode;
+    bgColor?: string;
 }

package/dist/components/Page/ViewPageTemplate.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Page/index.js

@@ -0,0 +1,2 @@
+export { default } from "./ViewPageTemplate";
+export * from "./ViewPageTemplate.types";

package/dist/components/PageSection/PageSection.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PageSectionTypes } from ".";
+declare const Section: React.FC<PageSectionTypes>;
+export default Section;

package/dist/components/PageSection/PageSection.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Section = ({ children, sectionContainerClasses, }) => {
+    return (_jsx("section", { className: `${sectionContainerClasses}`, "data-testid": "section", children: children }));
+};
+export default Section;

package/dist/components/PageSection/PageSection.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const HorizontalCardsSection: any;
+export declare const CompassCardsSection: any;

package/dist/components/PageSection/PageSection.stories.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Section from ".";
+import Card from "../Card/Card";
+import Text from "../Text/Text";
+import GenericList from "../GenericList/GenericList";
+import { DUMMYPRODUCTDATA, DUMMYCOMPASSPRODUCTDATA, } from "../../components/Card/DUMMYPRODUCTDATA.json";
+import HorizontalCardTemplate from "../Card/templates/HorizontalCardTemplate";
+import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
+export default {
+    title: "Components/Section",
+    component: Section,
+    argTypes: {
+        children: {
+            control: {
+                type: "none",
+            },
+        },
+        sectionContainerClasses: {
+            control: {
+                type: "none",
+            },
+        },
+    },
+};
+const Template = (args) => _jsx(Section, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    sectionContainerClasses: " flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-4  my-20 lg:max-h-view-page  max-h-fit  min-h-fit overflow-scroll px-4",
+    children: (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-red-400 p-4", children: "Content 1" }), _jsx("div", { className: "bg-green-400 p-4", children: "Content 2" }), _jsx("div", { className: "bg-blue-400 p-4", children: "Content 3" })] })),
+};
+export const HorizontalCardsSection = Template.bind({});
+HorizontalCardsSection.args = {
+    sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6 justify-center items-center",
+    children: (_jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12" }), _jsx(GenericList, { data: DUMMYPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "flex mb-6 max-sm:w-1/2 max-sm:flex-col overflow-hidden", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(HorizontalCardTemplate, { data: item }) }, item.id)) })] })),
+};
+export const CompassCardsSection = Template.bind({});
+CompassCardsSection.args = {
+    sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6 justify-center items-center h-[100%]",
+    children: (_jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12" }), _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", containerClasses: "w-full grid grid-cols-4 gap-y-12 gap-x-8 h-full max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center", renderItem: (item) => (_jsx(Card, { containerClasses: "w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: item }) }, item.id)) })] })),
+};

package/{src/components/PageSection/PageSection.types.ts → dist/components/PageSection/PageSection.types.d.ts}

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
-
 export interface PageSectionTypes {
-	children: ReactNode;
-	sectionContainerClasses?: string;
+    children: ReactNode;
+    sectionContainerClasses?: string;
 }

package/dist/components/PageSection/PageSection.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/PageSection/PageSections.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/PageSection/PageSections.test.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, it, expect, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Section from "./PageSection";
+import Text from "../Text/Text";
+import Card from "../Card/Card";
+import GenericList from "../GenericList/GenericList";
+import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
+import { DUMMYCOMPASSPRODUCTDATA } from "../../components/Card/DUMMYPRODUCTDATA.json";
+describe("<Section />", () => {
+    beforeEach(() => {
+        render(_jsx(Section, { sectionContainerClasses: "flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-4  my-20 lg:max-h-view-page  max-h-fit  min-h-fit overflow-scroll px-4", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "bg-red-400 p-4", children: "Content 1" }), _jsx("div", { className: "bg-green-400 p-4", children: "Content 2" }), _jsx("div", { className: "bg-blue-400 p-4", children: "Content 3" })] }) }));
+    });
+    it("renders children content", () => {
+        const { getByText } = render(_jsx(Section, { children: _jsx("div", { children: "Test Child" }) }));
+        expect(getByText("Test Child")).toBeInTheDocument();
+    });
+    it("displays children in a horizontal row", () => {
+        const section = screen.getByTestId("section");
+        expect(section).toHaveClass("flex-row");
+    });
+});
+describe("<Section /> with compass cards", () => {
+    it("displays correct cards", () => {
+        render(_jsx(Section, { sectionContainerClasses: "flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-4  my-20 lg:max-h-view-page max-h-fit  min-h-fit overflow-scroll px-4", children: _jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12" }), _jsx("div", { className: "grid grid-cols-4 gap-8 h-[100%] max-xl:gap-1 max-lg:grid-cols-2 max-lg:gap-y-24 max-lg:justify-items-center", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "w-3/4", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: item }) })) }) })] }) }));
+        const cards = screen.queryAllByTestId("card");
+        expect(cards.length).toBe(16);
+        expect(cards[0]).toHaveTextContent("Compass Sales Lenovo TP X13 Yoga G3 Laptop");
+        expect(cards[3]).toHaveTextContent("Exec RoadWarrior");
+    });
+});

package/dist/components/PageSection/index.js

@@ -0,0 +1,2 @@
+export { default } from "./PageSection";
+export * from "./PageSection.types";

package/dist/components/SearchInput/SearchInput.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SearchInputProps } from "./SearchInput.types";
+declare const SearchInput: React.FC<SearchInputProps>;
+export default SearchInput;

package/dist/components/SearchInput/SearchInput.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import FormButton from "../FormButton/FormButton";
+const SearchInput = ({ label, inputName, inputType, hasPlaceholder, placeholder, inputTextSize, inputShape, backgroundColor, inputWidth, inputBorderClasses, buttonClasses, buttonText, buttonIcon, buttonIconClasses, containerClasses, onButtonClick, role, ariaLabel, }) => {
+    const [inputValue, setInputValue] = useState("");
+    const handleInputChange = (e) => {
+        setInputValue(e.target.value);
+    };
+    const handleButtonClick = (event) => {
+        event.preventDefault();
+        if (event.currentTarget instanceof HTMLButtonElement) {
+            onButtonClick(inputValue);
+        }
+    };
+    return (_jsx("div", { className: containerClasses, role: role, "aria-label": ariaLabel, children: _jsxs("form", { className: "w-full", children: [_jsx("label", { htmlFor: inputName, className: `sr-only`, children: label }), _jsx("div", { className: "flex w-full", children: _jsxs("div", { className: "flex w-full", children: [_jsx("input", { type: inputType, placeholder: hasPlaceholder ? placeholder : undefined, name: inputName, id: inputName, value: inputValue, onChange: handleInputChange, className: `flex p-2 ${inputTextSize} ${inputShape} ${backgroundColor} ${inputWidth} ${inputBorderClasses}` }), _jsx("div", { className: `flex items-center justify-center h-full`, children: _jsx(FormButton, { text: buttonText, icon: buttonIcon, iconClasses: buttonIconClasses, as: "button", additionalClasses: buttonClasses, onClick: handleButtonClick }) })] }) })] }) }));
+};
+export default SearchInput;

package/dist/components/SearchInput/SearchInput.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const CommerceSearchInput: any;
+export declare const WithIconButton: any;
+export declare const WithoutButton: any;
+export declare const CustomizedButton: any;
+export declare const DisabledInput: any;

package/dist/components/SearchInput/SearchInput.stories.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SearchInput from "./SearchInput";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+export default {
+    title: "Components/SearchInput",
+    component: SearchInput,
+    tags: ["autodocs"],
+    argTypes: {
+        onButtonClick: { control: "none", table: { disable: true } },
+        inputType: { control: "none", table: { disable: true } },
+        inputName: { control: "none", table: { disable: true } },
+        placeholder: { control: "none" },
+        hasPlaceholder: { control: "none" },
+        inputTextSize: { control: "none" },
+        inputShape: { control: "none" },
+        backgroundColor: { control: "none" },
+        inputWidth: { control: "none" },
+        inputBorderClasses: { control: "none" },
+        buttonText: { control: "none", table: { disable: true } },
+        buttonIcon: { control: "none", table: { disable: true } },
+        buttonIconClasses: { control: "none" },
+        buttonClasses: { control: "none" },
+        containerClasses: { control: "none" },
+    },
+    parameters: { layout: "centered" },
+};
+const Template = (args) => _jsx(SearchInput, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    inputType: "text",
+    inputName: "default",
+    hasPlaceholder: true,
+    placeholder: "Type something...",
+    inputTextSize: "text-base",
+    inputShape: "rounded-md",
+    backgroundColor: "bg-white",
+    inputWidth: "w-80",
+    inputBorderClasses: "border border-gray-300",
+    buttonText: _jsx("span", { children: "Search" }),
+    buttonClasses: "bg-blue-500 text-white px-4 py-2 rounded-md",
+    buttonIcon: getFontAwesomeIcon("search"),
+    buttonIconClasses: "text-white",
+    containerClasses: "flex items-center space-x-2",
+    onButtonClick: (value) => alert(`Button clicked with input: ${value}`),
+};
+export const CommerceSearchInput = Template.bind({});
+CommerceSearchInput.args = {
+    inputType: "search",
+    inputName: "commerceSearch",
+    hasPlaceholder: true,
+    placeholder: "Search for product...",
+    inputTextSize: "text-sm",
+    inputShape: "",
+    backgroundColor: "bg-gray-50",
+    inputWidth: "w-full",
+    inputBorderClasses: "border border-gray-300 focus:outline-none rounded-l-md",
+    buttonIcon: getFontAwesomeIcon("search"),
+    buttonIconClasses: "text-white",
+    buttonClasses: "bg-teal-600 p-2 rounded-r-md hover:bg-teal-700",
+    containerClasses: "flex items-center shadow-sm overflow-hidden",
+    onButtonClick: (value) => console.log(`Searching for: ${value}`),
+};
+export const WithIconButton = Template.bind({});
+WithIconButton.args = {
+    inputType: "search",
+    inputName: "searchIcon",
+    hasPlaceholder: true,
+    placeholder: "Search...",
+    inputTextSize: "text-md",
+    inputShape: "rounded-full",
+    backgroundColor: "bg-gray-50",
+    inputWidth: "w-64",
+    inputBorderClasses: "border border-gray-400",
+    buttonIcon: getFontAwesomeIcon("magnifying-glass"),
+    buttonIconClasses: "text-blue-500",
+    buttonClasses: "p-2",
+    containerClasses: "flex items-center",
+    onButtonClick: (value) => console.log(`Searching for: ${value}`),
+};
+export const WithoutButton = Template.bind({});
+WithoutButton.args = {
+    inputType: "text",
+    inputName: "withoutButton",
+    hasPlaceholder: true,
+    placeholder: "No button here...",
+    inputTextSize: "text-sm",
+    inputShape: "rounded",
+    backgroundColor: "bg-gray-100",
+    inputWidth: "w-full",
+    inputBorderClasses: "border border-gray-300",
+    containerClasses: "flex items-center",
+    onButtonClick: () => { },
+};
+export const CustomizedButton = Template.bind({});
+CustomizedButton.args = {
+    inputType: "text",
+    inputName: "customButton",
+    hasPlaceholder: true,
+    placeholder: "Enter your query...",
+    inputTextSize: "text-lg",
+    inputShape: "rounded-lg",
+    backgroundColor: "bg-white",
+    inputWidth: "w-96",
+    inputBorderClasses: "border border-blue-500",
+    buttonText: (_jsxs("span", { className: "flex items-center space-x-1", children: [getFontAwesomeIcon("arrow-right"), _jsx("span", { children: "Go" })] })),
+    buttonClasses: "bg-green-600 text-white hover:bg-green-700 transition-colors rounded-full px-5 py-2",
+    buttonIcon: null,
+    containerClasses: "flex items-center space-x-3",
+    onButtonClick: (value) => alert(`Navigating with: ${value}`),
+};
+export const DisabledInput = Template.bind({});
+DisabledInput.args = {
+    inputType: "text",
+    inputName: "disabledInput",
+    hasPlaceholder: true,
+    placeholder: "Disabled...",
+    inputTextSize: "text-sm",
+    inputShape: "rounded",
+    backgroundColor: "bg-gray-200",
+    inputWidth: "w-72",
+    inputBorderClasses: "border border-gray-400 cursor-not-allowed",
+    buttonText: _jsx("span", { children: "Disabled" }),
+    buttonClasses: "bg-gray-500 text-gray-300 px-4 py-2 rounded",
+    buttonIcon: getFontAwesomeIcon("ban"),
+    buttonIconClasses: "text-gray-400",
+    containerClasses: "flex items-center",
+    onButtonClick: () => alert("Button is disabled."),
+};

package/dist/components/SearchInput/SearchInput.types.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export interface SearchInputProps {
+    onChange?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    value?: string;
+    label: React.ReactNode;
+    role?: string;
+    ariaLabel?: string;
+    inputType: string;
+    inputName: string;
+    hasPlaceholder: boolean;
+    placeholder: string;
+    containerClasses?: string;
+    inputTextSize?: string;
+    inputWidth?: string;
+    inputShape?: string;
+    borderColor?: string;
+    backgroundColor?: string;
+    inputBorderClasses?: string;
+    additionalClasses?: string;
+    buttonText?: JSX.Element;
+    buttonClasses?: string;
+    buttonIcon?: JSX.Element | null;
+    buttonIconClasses?: string;
+    onButtonClick: (inputValue: string) => void;
+}

package/dist/components/SearchInput/SearchInput.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SliderProps } from "./Slider.types";
+declare const Slider: React.FC<SliderProps>;
+export default Slider;

package/dist/components/Slider/Slider.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+const Slider = ({ min, max, step, minValue, maxValue, onMinChange, onMaxChange, additionalClasses = "", containerClasses = "p-8 border rounded-lg shadow-md bg-white max-w-lg", title = "Range", titleClasses = "text-xl text-black mb-4 font-bold", minLabel = "Min Value", maxLabel = "Max Value", labelClasses = "text-sm text-gray-500", inputClasses = "mt-2 text-lg font-semibold text-gray-900 border border-gray-300 rounded px-2 py-1 text-center w-20", sliderClasses = "relative w-full h-2 bg-gray-300 rounded", rangeClasses = "absolute h-2 bg-teal-500 rounded", thumbClasses = "absolute w-6 h-6 bg-white border-2 border-teal-500 rounded-full cursor-pointer", onAddSection, }) => {
+    const [minThumbValue, setMinThumbValue] = useState(minValue);
+    const [maxThumbValue, setMaxThumbValue] = useState(maxValue);
+    const sliderRef = useRef(null);
+    const isDragging = useRef(null);
+    const getPercentage = (value) => ((value - min) / (max - min)) * 100;
+    const handleMinChange = (value) => {
+        if (value <= maxThumbValue && value >= min) {
+            setMinThumbValue(value);
+            onMinChange(value);
+        }
+    };
+    const handleMaxChange = (value) => {
+        if (value >= minThumbValue && value <= max) {
+            setMaxThumbValue(value);
+            onMaxChange(value);
+        }
+    };
+    const handlePointerMove = (event) => {
+        if (sliderRef.current && isDragging.current) {
+            const sliderRect = sliderRef.current.getBoundingClientRect();
+            const sliderWidth = sliderRect.width;
+            const clickX = event.clientX - sliderRect.left;
+            const newValue = min + (clickX / sliderWidth) * (max - min);
+            if (isDragging.current === "min") {
+                handleMinChange(Math.round(newValue / step) * step);
+            }
+            else if (isDragging.current === "max") {
+                handleMaxChange(Math.round(newValue / step) * step);
+            }
+        }
+    };
+    const handlePointerUp = () => {
+        isDragging.current = null;
+    };
+    const handlePointerDown = (thumb) => {
+        isDragging.current = thumb;
+    };
+    return (_jsxs("div", { className: `${containerClasses} ${additionalClasses}`, children: [_jsx("h3", { className: titleClasses, children: title }), _jsx("hr", { className: "border-gray-300 mb-6" }), _jsxs("div", { className: "flex justify-between gap-4 mb-6", children: [_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("span", { className: labelClasses, children: minLabel }), _jsx("input", { type: "number", value: minThumbValue, onChange: (e) => handleMinChange(Number(e.target.value)), className: inputClasses })] }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("span", { className: labelClasses, children: maxLabel }), _jsx("input", { type: "number", value: maxThumbValue, onChange: (e) => handleMaxChange(Number(e.target.value)), className: inputClasses })] })] }), _jsxs("div", { className: sliderClasses, ref: sliderRef, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, onPointerLeave: handlePointerUp, children: [_jsx("div", { className: rangeClasses, style: {
+                            left: `${getPercentage(minThumbValue)}%`,
+                            right: `${100 - getPercentage(maxThumbValue)}%`,
+                        } }), _jsx("div", { className: thumbClasses, style: {
+                            left: `${getPercentage(minThumbValue)}%`,
+                            transform: "translate(-50%, -50%)",
+                            top: "50%",
+                            zIndex: 5,
+                        }, onPointerDown: () => handlePointerDown("min") }), _jsx("div", { className: thumbClasses, style: {
+                            left: `${getPercentage(maxThumbValue)}%`,
+                            transform: "translate(-50%, -50%)",
+                            top: "50%",
+                            zIndex: 4,
+                        }, onPointerDown: () => handlePointerDown("max") })] }), onAddSection && (_jsx("button", { onClick: onAddSection, className: "mt-4 text-blue-500", children: "Add Section" }))] }));
+};
+export default Slider;

package/dist/components/Slider/Slider.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const TemperatureRange: any;
+export declare const PriceRange: any;