@appcorp/app-corp-vista 0.2.26 → 0.2.28

package/organisms/vista-hero-v13/slider-content.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { VistaHeroV13Item } from "../../type/vista-hero-type";
+export declare const SliderContent: FC<VistaHeroV13Item>;

package/organisms/vista-hero-v13/slider-content.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SliderContent = void 0;
+var react_1 = __importDefault(require("react"));
+var SliderContent = function (_a) {
+    var description = _a.description, heading = _a.heading, subTitle = _a.subTitle, subTitleUrl = _a.subTitleUrl;
+    return (react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-6 lg:px-8" },
+        react_1.default.createElement("div", { className: "mx-auto max-w-2xl py-32 sm:py-48 lg:py-56" },
+            react_1.default.createElement("div", { className: "hidden sm:mb-8 sm:flex sm:justify-center" },
+                react_1.default.createElement("div", { className: "relative rounded-full px-3 py-1 text-sm/6 text-gray-400 ring-1 ring-white/10 hover:ring-white/20" },
+                    subTitle,
+                    ' ',
+                    react_1.default.createElement("a", { href: subTitleUrl, className: "font-semibold text-white" },
+                        react_1.default.createElement("span", { "aria-hidden": "true", className: "absolute inset-0" }),
+                        "Read more ",
+                        react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192")))),
+            react_1.default.createElement("div", { className: "text-center" },
+                react_1.default.createElement("h1", { className: "text-5xl font-semibold tracking-tight text-balance text-white sm:text-7xl" }, heading),
+                react_1.default.createElement("p", { className: "mt-8 text-lg font-medium text-pretty text-gray-400 sm:text-xl/8" }, description),
+                react_1.default.createElement("div", { className: "mt-10 flex items-center justify-center gap-x-6" },
+                    react_1.default.createElement("a", { href: "#", className: "rounded-md bg-primary px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" }, "Get started"),
+                    react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-white" },
+                        "Learn more ",
+                        react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192")))))));
+};
+exports.SliderContent = SliderContent;

package/organisms/vista-hero-v13/vista-hero-v13.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { VistaHeroV13Props } from '../../type/vista-hero-type';
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+export declare const VistaHeroV13: FC<VistaHeroV13Props>;

package/organisms/vista-hero-v13/vista-hero-v13.js

@@ -0,0 +1,63 @@
+"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.VistaHeroV13 = void 0;
+var react_1 = __importDefault(require("react"));
+var react_slick_1 = __importDefault(require("react-slick"));
+require("slick-carousel/slick/slick.css");
+require("slick-carousel/slick/slick-theme.css");
+var VistaHeroV13 = function (_a) {
+    var items = _a.items;
+    var settings = {
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        initialSlide: 1,
+    };
+    return (react_1.default.createElement("div", { className: "slider-container overflow-x-hidden border border-red-500 w-full" },
+        react_1.default.createElement(react_slick_1.default, __assign({}, settings), items.map(function (item) { return (react_1.default.createElement("div", { key: item.heading, className: "" },
+            react_1.default.createElement("div", { className: "relative isolate overflow-hidden pt-14" },
+                react_1.default.createElement("img", { alt: item.bannerAlt, src: item.bannerSrc, className: "absolute inset-0 -z-10 size-full object-cover" }),
+                react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" },
+                    react_1.default.createElement("div", { style: {
+                            clipPath: 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                        }, className: "relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-primary to-secondary opacity-20 sm:left-[calc(50%-30rem)] sm:w-288.75" })),
+                react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-6 lg:px-8 z-10" },
+                    react_1.default.createElement("div", { className: "mx-auto max-w-2xl py-32 sm:py-48 lg:py-56" },
+                        item.subTitle && item.subTitleUrl ? (react_1.default.createElement("div", { className: "hidden sm:mb-8 sm:flex sm:justify-center" },
+                            react_1.default.createElement("div", { className: "relative rounded-full px-3 py-1 text-sm/6 text-gray-400 ring-1 ring-white/10 hover:ring-white/20" },
+                                item.subTitle,
+                                " ",
+                                ' ',
+                                react_1.default.createElement("a", { href: item.subTitleUrl, className: "font-semibold text-white" },
+                                    react_1.default.createElement("span", { "aria-hidden": "true", className: "absolute inset-0" }),
+                                    "Read more ",
+                                    react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192"))))) : (react_1.default.createElement("div", { className: 'min-h-16' })),
+                        react_1.default.createElement("div", { className: "text-center" },
+                            react_1.default.createElement("h1", { className: "text-5xl font-semibold tracking-tight text-balance text-white sm:text-7xl" }, item.heading),
+                            react_1.default.createElement("p", { className: "mt-8 text-lg font-medium text-pretty text-gray-400 sm:text-xl/8" }, item.description),
+                            react_1.default.createElement("div", { className: "mt-10 flex items-center justify-center gap-x-6" },
+                                react_1.default.createElement("a", { href: "#", className: "rounded-md bg-primary px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" }, "Get started"),
+                                react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-white" },
+                                    "Learn more ",
+                                    react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192")))))),
+                react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" },
+                    react_1.default.createElement("div", { style: {
+                            clipPath: 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                        }, className: "relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-primary to-secondary opacity-20 sm:left-[calc(50%+36rem)] sm:w-288.75" }))))); }))));
+};
+exports.VistaHeroV13 = VistaHeroV13;

package/organisms/vista-product-list-v5/vista-product-list-v5.js

@@ -17,7 +17,7 @@ var VistaProductListV5 = function (_a) {
             })
                 .sort(function (a, b) { return a.order - b.order; })
                 .map(function (_a) {
-                var id = _a.id, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, name = _a.name, color = _a.color, price = _a.price, href = _a.href;
+                var color = _a.color, ctaLabel = _a.ctaLabel, handleOnClick = _a.handleOnClick, id = _a.id, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, name = _a.name, price = _a.price;
                 return (react_1.default.createElement("div", { key: id },
                     react_1.default.createElement("div", { className: "relative" },
                         react_1.default.createElement("div", { className: "relative h-72 w-full overflow-hidden rounded-lg" },
@@ -29,8 +29,8 @@ var VistaProductListV5 = function (_a) {
                             react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-x-0 bottom-0 h-48 bg-linear-to-t from-primary opacity-50" }),
                             price && (react_1.default.createElement("p", { className: "relative text-lg font-semibold text-white" }, price)))),
                     react_1.default.createElement("div", { className: "mt-6" },
-                        react_1.default.createElement("a", { href: href, className: "relative flex items-center justify-center rounded-md border border-transparent bg-primary/30 px-8 py-2 text-sm font-medium text-gray-900 hover:bg-primary/40" },
-                            "Add to bag",
+                        react_1.default.createElement("button", { onClick: handleOnClick, className: "relative flex w-full items-center justify-center rounded-md border border-transparent bg-primary/30 px-8 py-2 text-sm font-medium text-gray-900 hover:bg-primary/40" },
+                            ctaLabel,
                             react_1.default.createElement("span", { className: "sr-only" },
                                 ", ",
                                 name)))));

package/organisms/vista-product-overview-v3/vista-product-overview-v3.js

@@ -63,7 +63,7 @@ var DynamicReactSlick = (0, dynamic_1.default)(function () { return Promise.reso
     ssr: false,
 });
 var VistaProductOverviewV3 = function (_a) {
-    var averageReview = _a.averageReview, breadcrumbs = _a.breadcrumbs, description = _a.description, _b = _a.guaranteeInfo, guaranteeInfo = _b === void 0 ? false : _b, _c = _a.helpInfo, helpInfo = _c === void 0 ? false : _c, _d = _a.highlights, highlights = _d === void 0 ? [] : _d, images = _a.images, name = _a.name, price = _a.price, totalCountReview = _a.totalCountReview, _e = _a.variants, variants = _e === void 0 ? [] : _e;
+    var averageReview = _a.averageReview, breadcrumbs = _a.breadcrumbs, ctaLabel = _a.ctaLabel, description = _a.description, _b = _a.guaranteeInfo, guaranteeInfo = _b === void 0 ? false : _b, handleCtaOnClick = _a.handleCtaOnClick, _c = _a.helpInfo, helpInfo = _c === void 0 ? false : _c, _d = _a.highlights, highlights = _d === void 0 ? [] : _d, images = _a.images, name = _a.name, price = _a.price, totalCountReview = _a.totalCountReview, _e = _a.variants, variants = _e === void 0 ? [] : _e;
     var slickConfig = {
         dots: true,
         infinite: (images === null || images === void 0 ? void 0 : images.length) === 1 ? false : true,
@@ -136,7 +136,7 @@ var VistaProductOverviewV3 = function (_a) {
                                     react_1.default.createElement("span", null, "What size should I buy?"),
                                     react_1.default.createElement(solid_1.QuestionMarkCircleIcon, { "aria-hidden": "true", className: "ml-2 size-5 shrink-0 text-gray-400 group-hover:text-gray-500" })))),
                             react_1.default.createElement("div", { className: "mt-10" },
-                                react_1.default.createElement("button", { type: "submit", className: "flex w-full items-center justify-center rounded-md border border-transparent bg-primary px-8 py-3 text-base font-medium text-white hover:bg-primary/80 focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-gray-50 focus:outline-hidden" }, "Add to bag")),
+                                react_1.default.createElement("button", { type: "submit", className: "flex w-full items-center justify-center rounded-md border border-transparent bg-primary px-8 py-3 text-base font-medium text-white hover:bg-primary/80 focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-gray-50 focus:outline-hidden", onClick: handleCtaOnClick }, ctaLabel)),
                             guaranteeInfo && (react_1.default.createElement("div", { className: "mt-6 text-center" },
                                 react_1.default.createElement("a", { href: "#", className: "group inline-flex text-base font-medium" },
                                     react_1.default.createElement(outline_1.ShieldCheckIcon, { "aria-hidden": "true", className: "mr-2 size-6 shrink-0 text-gray-400 group-hover:text-gray-500" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/app-corp-vista",
-  "version": "0.2.26",
+  "version": "0.2.28",
   "scripts": {
     "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib",
     "build:next": "next build",
@@ -86,7 +86,7 @@
     "react-photo-view": "^1.2.7",
     "react-slick": "^0.30.3",
     "react-tooltip": "^5.28.1",
-    "slick-carousel": "^1",
+    "slick-carousel": "^1.8.1",
     "storybook": "^8",
     "swr": "^2.3.0",
     "tailwindcss": "^4",

package/type/vista-hero-type.d.ts

@@ -0,0 +1,11 @@
+export interface VistaHeroV13Item {
+    bannerSrc: string;
+    bannerAlt: string;
+    subTitle?: string;
+    subTitleUrl?: string;
+    heading: string;
+    description: string;
+}
+export interface VistaHeroV13Props {
+    items: VistaHeroV13Item[];
+}

package/type/vista-hero-type.js

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

package/type/vista-product-list-type.d.ts

@@ -21,8 +21,9 @@ export interface VistaProductListV4Props {
 }
 export interface VistaProductListV5Item {
     color?: string;
+    ctaLabel?: string;
     enabled: boolean;
-    href: string;
+    handleOnClick: () => void;
     id: string;
     imageAlt: string;
     imageSrc: string;

package/type/vista-product-overview-type.d.ts

@@ -38,6 +38,8 @@ export interface VistaProductOverviewV3Image {
 export interface VistaProductOverviewV3Props {
     averageReview?: number;
     breadcrumbs: VistaProductOverviewV3BreadcrumbItem[];
+    ctaLabel: string;
+    handleCtaOnClick: () => void;
     description: string;
     guaranteeInfo?: boolean;
     helpInfo?: boolean;