@appcorp/app-corp-vista 0.2.9 → 0.2.12
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.
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
'use client';
|
|
2
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
|
+
};
|
|
3
14
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
15
|
if (k2 === undefined) k2 = k;
|
|
5
16
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -33,33 +44,33 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
33
44
|
return result;
|
|
34
45
|
};
|
|
35
46
|
})();
|
|
47
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
48
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
49
|
+
};
|
|
36
50
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
51
|
exports.VistaProductOverviewV3 = void 0;
|
|
38
|
-
var react_1 =
|
|
52
|
+
var react_1 = __importDefault(require("react"));
|
|
53
|
+
var dynamic_1 = __importDefault(require("next/dynamic"));
|
|
54
|
+
var image_1 = __importDefault(require("next/image"));
|
|
39
55
|
var solid_1 = require("@heroicons/react/20/solid");
|
|
40
56
|
var react_2 = require("@headlessui/react");
|
|
41
57
|
var outline_1 = require("@heroicons/react/24/outline");
|
|
42
58
|
var class_names_1 = require("../../utils/class-names");
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
imageAlt: 'Model wearing light green backpack with black canvas straps and front zipper pouch.',
|
|
50
|
-
breadcrumbs: [
|
|
51
|
-
{ id: 1, name: 'Travel', href: '#' },
|
|
52
|
-
{ id: 2, name: 'Bags', href: '#' },
|
|
53
|
-
],
|
|
54
|
-
sizes: [
|
|
55
|
-
{ name: '18L', description: 'Perfect for a reasonable amount of snacks.' },
|
|
56
|
-
{ name: '20L', description: 'Enough room for a serious amount of snacks.' },
|
|
57
|
-
],
|
|
58
|
-
};
|
|
59
|
-
var reviews = { average: 4, totalCount: 1624 };
|
|
59
|
+
// import "slick-carousel/slick/slick.css";
|
|
60
|
+
// import "slick-carousel/slick/slick-theme.css";
|
|
61
|
+
var DynamicReactSlick = (0, dynamic_1.default)(function () { return Promise.resolve().then(function () { return __importStar(require('react-slick')); }); }, {
|
|
62
|
+
loading: function () { return react_1.default.createElement("p", null, "Loading..."); },
|
|
63
|
+
ssr: false,
|
|
64
|
+
});
|
|
60
65
|
var VistaProductOverviewV3 = function (_a) {
|
|
61
|
-
var breadcrumbs = _a.breadcrumbs, name = _a.name, price = _a.price,
|
|
62
|
-
var
|
|
66
|
+
var averageReview = _a.averageReview, breadcrumbs = _a.breadcrumbs, description = _a.description, _b = _a.highlights, highlights = _b === void 0 ? [] : _b, images = _a.images, name = _a.name, price = _a.price, totalCountReview = _a.totalCountReview, _c = _a.variants, variants = _c === void 0 ? [] : _c;
|
|
67
|
+
var slickConfig = {
|
|
68
|
+
dots: true,
|
|
69
|
+
infinite: (images === null || images === void 0 ? void 0 : images.length) === 1 ? false : true,
|
|
70
|
+
speed: 500,
|
|
71
|
+
slidesToShow: 1,
|
|
72
|
+
slidesToScroll: 1,
|
|
73
|
+
};
|
|
63
74
|
return (react_1.default.createElement("div", { className: "bg-white" },
|
|
64
75
|
react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:grid lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8" },
|
|
65
76
|
react_1.default.createElement("div", { className: "lg:max-w-lg lg:self-end" },
|
|
@@ -69,53 +80,71 @@ var VistaProductOverviewV3 = function (_a) {
|
|
|
69
80
|
return (react_1.default.createElement("li", { key: id },
|
|
70
81
|
react_1.default.createElement("div", { className: "flex items-center text-sm" },
|
|
71
82
|
react_1.default.createElement("a", { href: route, className: "font-medium text-gray-500 hover:text-gray-900" }, label),
|
|
72
|
-
breadcrumbIdx !==
|
|
83
|
+
breadcrumbIdx !== breadcrumbs.length - 1 ? (react_1.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", className: "ml-2 size-5 shrink-0 text-gray-300" },
|
|
73
84
|
react_1.default.createElement("path", { d: "M5.555 17.776l8-16 .894.448-8 16-.894-.448z" }))) : null)));
|
|
74
85
|
}))),
|
|
75
86
|
react_1.default.createElement("div", { className: "mt-4" },
|
|
76
|
-
react_1.default.createElement("h1", { className: "text-3xl font-bold tracking-tight text-
|
|
87
|
+
react_1.default.createElement("h1", { className: "text-3xl font-bold tracking-tight text-primary sm:text-4xl" }, name)),
|
|
77
88
|
react_1.default.createElement("section", { "aria-labelledby": "information-heading", className: "mt-4" },
|
|
78
89
|
react_1.default.createElement("h2", { id: "information-heading", className: "sr-only" }, "Product information"),
|
|
79
90
|
react_1.default.createElement("div", { className: "flex items-center" },
|
|
80
|
-
react_1.default.createElement("p", { className: "text-lg text-
|
|
81
|
-
react_1.default.createElement("div", { className: "ml-4 border-l border-gray-300 pl-4" },
|
|
91
|
+
price && (react_1.default.createElement("p", { className: "text-lg text-primary sm:text-xl" }, price)),
|
|
92
|
+
averageReview && (react_1.default.createElement("div", { className: "ml-4 border-l border-gray-300 pl-4" },
|
|
82
93
|
react_1.default.createElement("h2", { className: "sr-only" }, "Reviews"),
|
|
83
94
|
react_1.default.createElement("div", { className: "flex items-center" },
|
|
84
95
|
react_1.default.createElement("div", null,
|
|
85
|
-
react_1.default.createElement("div", { className: "flex items-center" }, [0, 1, 2, 3, 4].map(function (rating) { return (react_1.default.createElement(solid_1.StarIcon, { key: rating, "aria-hidden": "true", className: (0, class_names_1.classNames)(
|
|
96
|
+
react_1.default.createElement("div", { className: "flex items-center" }, [0, 1, 2, 3, 4].map(function (rating) { return (react_1.default.createElement(solid_1.StarIcon, { key: rating, "aria-hidden": "true", className: (0, class_names_1.classNames)(averageReview > rating ? 'text-yellow-400' : 'text-gray-300', 'size-5 shrink-0') })); })),
|
|
86
97
|
react_1.default.createElement("p", { className: "sr-only" },
|
|
87
|
-
|
|
98
|
+
averageReview,
|
|
88
99
|
" out of 5 stars")),
|
|
89
100
|
react_1.default.createElement("p", { className: "ml-2 text-sm text-gray-500" },
|
|
90
|
-
|
|
91
|
-
" reviews")))),
|
|
101
|
+
totalCountReview,
|
|
102
|
+
" reviews"))))),
|
|
92
103
|
react_1.default.createElement("div", { className: "mt-4 space-y-6" },
|
|
93
|
-
react_1.default.createElement("p", { className: "text-base text-gray-500" },
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
react_1.default.createElement("
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
104
|
+
react_1.default.createElement("p", { className: "text-base text-gray-500" }, description)),
|
|
105
|
+
highlights.length > 1 && highlights
|
|
106
|
+
.filter(function (_a) {
|
|
107
|
+
var enabled = _a.enabled;
|
|
108
|
+
return enabled;
|
|
109
|
+
})
|
|
110
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
111
|
+
.map(function (_a) {
|
|
112
|
+
var id = _a.id, icon = _a.icon, label = _a.label;
|
|
113
|
+
return (react_1.default.createElement("div", { key: id, className: "mt-6 flex items-center" },
|
|
114
|
+
icon,
|
|
115
|
+
react_1.default.createElement("p", { className: "ml-2 text-sm text-gray-500" }, label)));
|
|
116
|
+
})),
|
|
117
|
+
react_1.default.createElement("div", { className: "mt-10 lg:col-start-1 lg:row-start-2 lg:max-w-lg lg:self-start" },
|
|
118
|
+
react_1.default.createElement("section", { "aria-labelledby": "options-heading" },
|
|
119
|
+
react_1.default.createElement("h2", { id: "options-heading", className: "sr-only" }, "Product options"),
|
|
120
|
+
react_1.default.createElement("form", null,
|
|
121
|
+
react_1.default.createElement("div", { className: "sm:flex sm:justify-between" },
|
|
122
|
+
react_1.default.createElement("fieldset", { className: 'flex flex-col gap-4' }, variants.length > 1 && variants
|
|
123
|
+
.filter(function (_a) {
|
|
124
|
+
var enabled = _a.enabled;
|
|
125
|
+
return enabled;
|
|
126
|
+
})
|
|
127
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
128
|
+
.map(function (item) { return (react_1.default.createElement("div", { key: item.title },
|
|
129
|
+
react_1.default.createElement("legend", { className: "block text-sm font-medium text-gray-700" }, item.title),
|
|
130
|
+
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 },
|
|
131
|
+
react_1.default.createElement("p", { className: "text-base font-medium text-primary" }, item.title),
|
|
132
|
+
react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, item.description),
|
|
133
|
+
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" }))); })))); }))),
|
|
134
|
+
react_1.default.createElement("div", { className: "mt-4" },
|
|
135
|
+
react_1.default.createElement("a", { href: "#", className: "group inline-flex text-sm text-gray-500 hover:text-gray-700" },
|
|
136
|
+
react_1.default.createElement("span", null, "What size should I buy?"),
|
|
137
|
+
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" }))),
|
|
138
|
+
react_1.default.createElement("div", { className: "mt-10" },
|
|
139
|
+
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")),
|
|
140
|
+
react_1.default.createElement("div", { className: "mt-6 text-center" },
|
|
141
|
+
react_1.default.createElement("a", { href: "#", className: "group inline-flex text-base font-medium" },
|
|
142
|
+
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" }),
|
|
143
|
+
react_1.default.createElement("span", { className: "text-gray-500 hover:text-gray-700" }, "Lifetime Guarantee"))))))),
|
|
144
|
+
react_1.default.createElement("div", { className: 'mt-10 lg:max-w-lg lg:self-center' },
|
|
145
|
+
react_1.default.createElement(DynamicReactSlick, __assign({}, slickConfig), images.map(function (_a, ind) {
|
|
146
|
+
var url = _a.url, alt = _a.alt;
|
|
147
|
+
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 }));
|
|
148
|
+
}))))));
|
|
120
149
|
};
|
|
121
150
|
exports.VistaProductOverviewV3 = VistaProductOverviewV3;
|
package/package.json
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
1
2
|
export interface VistaProductOverviewV1Props {
|
|
2
3
|
id: string;
|
|
3
4
|
}
|
|
@@ -11,9 +12,11 @@ export interface VistaProductOverviewV3BreadcrumbItem {
|
|
|
11
12
|
}
|
|
12
13
|
export interface VistaProductOverviewV3Variant {
|
|
13
14
|
enabled: boolean;
|
|
15
|
+
handleOnSelect: (item: VistaProductOverviewV3VariantItem) => void;
|
|
16
|
+
items: VistaProductOverviewV3VariantItem[];
|
|
14
17
|
order: number;
|
|
18
|
+
selectedItem: number;
|
|
15
19
|
title: string;
|
|
16
|
-
items: VistaProductOverviewV3VariantItem[];
|
|
17
20
|
}
|
|
18
21
|
export interface VistaProductOverviewV3VariantItem {
|
|
19
22
|
description: string;
|
|
@@ -21,11 +24,27 @@ export interface VistaProductOverviewV3VariantItem {
|
|
|
21
24
|
order: number;
|
|
22
25
|
title: string;
|
|
23
26
|
}
|
|
27
|
+
export interface VistaProductOverviewV3Highlight {
|
|
28
|
+
enabled: boolean;
|
|
29
|
+
icon: ReactNode;
|
|
30
|
+
id: string;
|
|
31
|
+
label: string;
|
|
32
|
+
order: number;
|
|
33
|
+
}
|
|
34
|
+
export interface VistaProductOverviewV3Image {
|
|
35
|
+
alt: string;
|
|
36
|
+
url: string;
|
|
37
|
+
}
|
|
24
38
|
export interface VistaProductOverviewV3Props {
|
|
39
|
+
averageReview?: number;
|
|
25
40
|
breadcrumbs: VistaProductOverviewV3BreadcrumbItem[];
|
|
41
|
+
description: string;
|
|
42
|
+
highlights?: VistaProductOverviewV3Highlight[];
|
|
43
|
+
images: VistaProductOverviewV3Image[];
|
|
26
44
|
name: string;
|
|
27
|
-
price
|
|
28
|
-
|
|
45
|
+
price?: string;
|
|
46
|
+
totalCountReview?: number;
|
|
47
|
+
variants?: VistaProductOverviewV3Variant[];
|
|
29
48
|
}
|
|
30
49
|
export interface VistaProductOverviewV4Props {
|
|
31
50
|
id: string;
|