@appcorp/app-corp-vista 0.2.36 → 0.2.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/organisms/vista-product-overview-v3/product-form.d.ts +11 -0
  2. package/organisms/vista-product-overview-v3/product-form.js +44 -0
  3. package/organisms/vista-product-overview-v3/product-slider.d.ts +10 -0
  4. package/organisms/vista-product-overview-v3/product-slider.js +74 -0
  5. package/organisms/vista-product-overview-v3/vista-product-overview-v3.js +4 -93
  6. package/package.json +1 -1
package/organisms/vista-product-overview-v3/product-form.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { FC } from "react";
2
+ import { VistaProductOverviewV3Variant } from "../../type/vista-product-overview-type";
3
+ interface Props {
4
+ helpInfo: boolean;
5
+ variants?: VistaProductOverviewV3Variant[];
6
+ guaranteeInfo?: boolean;
7
+ ctaLabel: string;
8
+ handleCtaOnClick: () => void;
9
+ }
10
+ export declare const ProductForm: FC<Props>;
11
+ export {};
package/organisms/vista-product-overview-v3/product-form.js ADDED
@@ -0,0 +1,44 @@
1
+ 'use client';
2
+ "use strict";
3
+ var __importDefault = (this && this.__importDefault) || function (mod) {
4
+ return (mod && mod.__esModule) ? mod : { "default": mod };
5
+ };
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.ProductForm = void 0;
8
+ var react_1 = __importDefault(require("react"));
9
+ var react_2 = require("@headlessui/react");
10
+ var outline_1 = require("@heroicons/react/24/outline");
11
+ var solid_1 = require("@heroicons/react/20/solid");
12
+ var vista_button_v1_1 = require("../../molecules/vista-button-v1/vista-button-v1");
13
+ var vista_button_type_1 = require("../../type/vista-button-type");
14
+ var ProductForm = function (_a) {
15
+ var ctaLabel = _a.ctaLabel, _b = _a.guaranteeInfo, guaranteeInfo = _b === void 0 ? false : _b, handleCtaOnClick = _a.handleCtaOnClick, helpInfo = _a.helpInfo, _c = _a.variants, variants = _c === void 0 ? [] : _c;
16
+ return (react_1.default.createElement("div", { className: "mt-10 lg:col-start-1 lg:row-start-2 lg:max-w-lg lg:self-start" },
17
+ react_1.default.createElement("section", { "aria-labelledby": "options-heading" },
18
+ react_1.default.createElement("h2", { id: "options-heading", className: "sr-only" }, "Product options"),
19
+ react_1.default.createElement("form", null,
20
+ react_1.default.createElement("div", { className: "sm:flex sm:justify-between" },
21
+ react_1.default.createElement("fieldset", { className: 'flex flex-col gap-4' }, variants.length > 1 && variants
22
+ .filter(function (_a) {
23
+ var enabled = _a.enabled;
24
+ return enabled;
25
+ })
26
+ .sort(function (a, b) { return a.order - b.order; })
27
+ .map(function (item) { return (react_1.default.createElement("div", { key: item.title },
28
+ react_1.default.createElement("legend", { className: "block text-sm font-medium text-gray-700" }, item.title),
29
+ react_1.default.createElement(react_2.RadioGroup, { className: "mt-1 grid grid-cols-1 gap-4 sm:grid-cols-2", onChange: function (val) { return item.handleOnSelect(val); }, value: item.items[item.selectedItem] }, item.items.map(function (item) { return (react_1.default.createElement(react_2.Radio, { "aria-description": item.description, "aria-label": item.title, as: "div", className: "group relative block cursor-pointer rounded-lg border border-gray-300 p-4 focus:outline-hidden data-focus:ring-2 data-focus:ring-primary", key: item.title, value: item },
30
+ react_1.default.createElement("p", { className: "text-base font-medium text-primary" }, item.title),
31
+ react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, item.description),
32
+ react_1.default.createElement("div", { "aria-hidden": "true", className: "pointer-events-none absolute -inset-px rounded-lg border-2 border-transparent group-data-checked:border-primary group-data-focus:border" }))); })))); }))),
33
+ helpInfo && (react_1.default.createElement("div", { className: "mt-4" },
34
+ react_1.default.createElement("a", { href: "#", className: "group inline-flex text-sm text-gray-500 hover:text-gray-700" },
35
+ react_1.default.createElement("span", null, "What size should I buy?"),
36
+ 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" })))),
37
+ react_1.default.createElement("div", { className: "mt-10" },
38
+ react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { className: 'w-full py-4', handleOnClick: handleCtaOnClick, label: ctaLabel, size: vista_button_type_1.VISTA_BUTTON_SIZE.XL, variant: vista_button_type_1.VISTA_BUTTON_VARIANT.PRIMARY })),
39
+ guaranteeInfo && (react_1.default.createElement("div", { className: "mt-6 text-center" },
40
+ react_1.default.createElement("a", { href: "#", className: "group inline-flex text-base font-medium" },
41
+ 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" }),
42
+ react_1.default.createElement("span", { className: "text-gray-500 hover:text-gray-700" }, "Lifetime Guarantee"))))))));
43
+ };
44
+ exports.ProductForm = ProductForm;
package/organisms/vista-product-overview-v3/product-slider.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import Image from "next/image";
2
+ import { FC } from "react";
3
+ interface Image {
4
+ url: string;
5
+ alt: string;
6
+ }
7
+ export declare const ProductSlider: FC<{
8
+ images: Image[];
9
+ }>;
10
+ export {};
package/organisms/vista-product-overview-v3/product-slider.js ADDED
@@ -0,0 +1,74 @@
1
+ 'use client';
2
+ "use strict";
3
+ var __assign = (this && this.__assign) || function () {
4
+ __assign = Object.assign || function(t) {
5
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
6
+ s = arguments[i];
7
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
8
+ t[p] = s[p];
9
+ }
10
+ return t;
11
+ };
12
+ return __assign.apply(this, arguments);
13
+ };
14
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
15
+ if (k2 === undefined) k2 = k;
16
+ var desc = Object.getOwnPropertyDescriptor(m, k);
17
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
18
+ desc = { enumerable: true, get: function() { return m[k]; } };
19
+ }
20
+ Object.defineProperty(o, k2, desc);
21
+ }) : (function(o, m, k, k2) {
22
+ if (k2 === undefined) k2 = k;
23
+ o[k2] = m[k];
24
+ }));
25
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
26
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
27
+ }) : function(o, v) {
28
+ o["default"] = v;
29
+ });
30
+ var __importStar = (this && this.__importStar) || (function () {
31
+ var ownKeys = function(o) {
32
+ ownKeys = Object.getOwnPropertyNames || function (o) {
33
+ var ar = [];
34
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
35
+ return ar;
36
+ };
37
+ return ownKeys(o);
38
+ };
39
+ return function (mod) {
40
+ if (mod && mod.__esModule) return mod;
41
+ var result = {};
42
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
43
+ __setModuleDefault(result, mod);
44
+ return result;
45
+ };
46
+ })();
47
+ var __importDefault = (this && this.__importDefault) || function (mod) {
48
+ return (mod && mod.__esModule) ? mod : { "default": mod };
49
+ };
50
+ Object.defineProperty(exports, "__esModule", { value: true });
51
+ exports.ProductSlider = void 0;
52
+ var dynamic_1 = __importDefault(require("next/dynamic"));
53
+ var image_1 = __importDefault(require("next/image"));
54
+ var react_1 = __importDefault(require("react"));
55
+ var DynamicReactSlick = (0, dynamic_1.default)(function () { return Promise.resolve().then(function () { return __importStar(require('react-slick')); }); }, {
56
+ loading: function () { return react_1.default.createElement("p", null, "Loading..."); },
57
+ ssr: false,
58
+ });
59
+ var ProductSlider = function (_a) {
60
+ var images = _a.images;
61
+ var slickConfig = {
62
+ dots: true,
63
+ infinite: (images === null || images === void 0 ? void 0 : images.length) === 1 ? false : true,
64
+ slidesToScroll: 1,
65
+ slidesToShow: 1,
66
+ speed: 500,
67
+ };
68
+ return (react_1.default.createElement("div", { className: 'mt-10 lg:max-w-lg lg:self-center' },
69
+ react_1.default.createElement(DynamicReactSlick, __assign({}, slickConfig), images.map(function (_a, ind) {
70
+ var url = _a.url, alt = _a.alt;
71
+ return (react_1.default.createElement(image_1.default, { key: ind, alt: alt, className: 'aspect-square w-full rounded-lg object-cover', sizes: '50vw', height: 100, src: url, width: 150 }));
72
+ }))));
73
+ };
74
+ exports.ProductSlider = ProductSlider;
package/organisms/vista-product-overview-v3/vista-product-overview-v3.js CHANGED
@@ -1,77 +1,18 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
- if (k2 === undefined) k2 = k;
15
- var desc = Object.getOwnPropertyDescriptor(m, k);
16
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
- desc = { enumerable: true, get: function() { return m[k]; } };
18
- }
19
- Object.defineProperty(o, k2, desc);
20
- }) : (function(o, m, k, k2) {
21
- if (k2 === undefined) k2 = k;
22
- o[k2] = m[k];
23
- }));
24
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
- Object.defineProperty(o, "default", { enumerable: true, value: v });
26
- }) : function(o, v) {
27
- o["default"] = v;
28
- });
29
- var __importStar = (this && this.__importStar) || (function () {
30
- var ownKeys = function(o) {
31
- ownKeys = Object.getOwnPropertyNames || function (o) {
32
- var ar = [];
33
- for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
34
- return ar;
35
- };
36
- return ownKeys(o);
37
- };
38
- return function (mod) {
39
- if (mod && mod.__esModule) return mod;
40
- var result = {};
41
- if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
42
- __setModuleDefault(result, mod);
43
- return result;
44
- };
45
- })();
46
2
  var __importDefault = (this && this.__importDefault) || function (mod) {
47
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
48
4
  };
49
5
  Object.defineProperty(exports, "__esModule", { value: true });
50
6
  exports.VistaProductOverviewV3 = void 0;
51
7
  var react_1 = __importDefault(require("react"));
52
- var dynamic_1 = __importDefault(require("next/dynamic"));
53
- var image_1 = __importDefault(require("next/image"));
54
8
  var solid_1 = require("@heroicons/react/20/solid");
55
- var react_2 = require("@headlessui/react");
56
- var outline_1 = require("@heroicons/react/24/outline");
57
9
  var class_names_1 = require("../../utils/class-names");
58
- var vista_button_v1_1 = require("../../molecules/vista-button-v1/vista-button-v1");
59
- var vista_button_type_1 = require("../../type/vista-button-type");
10
+ var product_slider_1 = require("./product-slider");
11
+ var product_form_1 = require("./product-form");
60
12
  // import "slick-carousel/slick/slick.css";
61
13
  // import "slick-carousel/slick/slick-theme.css";
62
- var DynamicReactSlick = (0, dynamic_1.default)(function () { return Promise.resolve().then(function () { return __importStar(require('react-slick')); }); }, {
63
- loading: function () { return react_1.default.createElement("p", null, "Loading..."); },
64
- ssr: false,
65
- });
66
14
  var VistaProductOverviewV3 = function (_a) {
67
15
  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;
68
- var slickConfig = {
69
- dots: true,
70
- infinite: (images === null || images === void 0 ? void 0 : images.length) === 1 ? false : true,
71
- slidesToScroll: 1,
72
- slidesToShow: 1,
73
- speed: 500,
74
- };
75
16
  return (react_1.default.createElement("div", { className: "bg-white" },
76
17
  react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-20 lg:grid lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8" },
77
18
  react_1.default.createElement("div", { className: "lg:max-w-lg lg:self-end" },
@@ -115,37 +56,7 @@ var VistaProductOverviewV3 = function (_a) {
115
56
  icon,
116
57
  react_1.default.createElement("p", { className: "ml-2 text-sm text-gray-500" }, label)));
117
58
  })),
118
- react_1.default.createElement("div", { className: "mt-10 lg:col-start-1 lg:row-start-2 lg:max-w-lg lg:self-start" },
119
- react_1.default.createElement("section", { "aria-labelledby": "options-heading" },
120
- react_1.default.createElement("h2", { id: "options-heading", className: "sr-only" }, "Product options"),
121
- react_1.default.createElement("form", null,
122
- react_1.default.createElement("div", { className: "sm:flex sm:justify-between" },
123
- react_1.default.createElement("fieldset", { className: 'flex flex-col gap-4' }, variants.length > 1 && variants
124
- .filter(function (_a) {
125
- var enabled = _a.enabled;
126
- return enabled;
127
- })
128
- .sort(function (a, b) { return a.order - b.order; })
129
- .map(function (item) { return (react_1.default.createElement("div", { key: item.title },
130
- react_1.default.createElement("legend", { className: "block text-sm font-medium text-gray-700" }, item.title),
131
- react_1.default.createElement(react_2.RadioGroup, { className: "mt-1 grid grid-cols-1 gap-4 sm:grid-cols-2", onChange: function (val) { return item.handleOnSelect(val); }, value: item.items[item.selectedItem] }, item.items.map(function (item) { return (react_1.default.createElement(react_2.Radio, { "aria-description": item.description, "aria-label": item.title, as: "div", className: "group relative block cursor-pointer rounded-lg border border-gray-300 p-4 focus:outline-hidden data-focus:ring-2 data-focus:ring-primary", key: item.title, value: item },
132
- react_1.default.createElement("p", { className: "text-base font-medium text-primary" }, item.title),
133
- react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, item.description),
134
- react_1.default.createElement("div", { "aria-hidden": "true", className: "pointer-events-none absolute -inset-px rounded-lg border-2 border-transparent group-data-checked:border-primary group-data-focus:border" }))); })))); }))),
135
- helpInfo && (react_1.default.createElement("div", { className: "mt-4" },
136
- react_1.default.createElement("a", { href: "#", className: "group inline-flex text-sm text-gray-500 hover:text-gray-700" },
137
- react_1.default.createElement("span", null, "What size should I buy?"),
138
- 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" })))),
139
- react_1.default.createElement("div", { className: "mt-10" },
140
- react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { className: 'w-full py-4', handleOnClick: handleCtaOnClick, label: ctaLabel, size: vista_button_type_1.VISTA_BUTTON_SIZE.XL, variant: vista_button_type_1.VISTA_BUTTON_VARIANT.PRIMARY })),
141
- guaranteeInfo && (react_1.default.createElement("div", { className: "mt-6 text-center" },
142
- react_1.default.createElement("a", { href: "#", className: "group inline-flex text-base font-medium" },
143
- 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" }),
144
- react_1.default.createElement("span", { className: "text-gray-500 hover:text-gray-700" }, "Lifetime Guarantee")))))))),
145
- react_1.default.createElement("div", { className: 'mt-10 lg:max-w-lg lg:self-center' },
146
- react_1.default.createElement(DynamicReactSlick, __assign({}, slickConfig), images.map(function (_a, ind) {
147
- var url = _a.url, alt = _a.alt;
148
- return (react_1.default.createElement(image_1.default, { key: ind, alt: alt, className: 'aspect-square w-full rounded-lg object-cover', sizes: '50vw', height: 100, src: url, width: 150 }));
149
- }))))));
59
+ react_1.default.createElement(product_form_1.ProductForm, { variants: variants, helpInfo: helpInfo, guaranteeInfo: guaranteeInfo, handleCtaOnClick: handleCtaOnClick, ctaLabel: ctaLabel })),
60
+ react_1.default.createElement(product_slider_1.ProductSlider, { images: images }))));
150
61
  };
151
62
  exports.VistaProductOverviewV3 = VistaProductOverviewV3;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appcorp/app-corp-vista",
3
- "version": "0.2.36",
3
+ "version": "0.2.38",
4
4
  "scripts": {
5
5
  "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib",
6
6
  "build:next": "next build",