@appcorp/app-corp-vista 0.2.25 → 0.2.27

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,2 +1,3 @@
1
- import React from 'react';
2
- export declare const VistaFeatureV2: () => React.JSX.Element;
1
+ import { FC } from 'react';
2
+ import { VistaFeatureV2Props } from '../../type/vista-feature-type';
3
+ export declare const VistaFeatureV2: FC<VistaFeatureV2Props>;
@@ -5,39 +5,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.VistaFeatureV2 = void 0;
7
7
  var react_1 = __importDefault(require("react"));
8
- var solid_1 = require("@heroicons/react/20/solid");
9
- var features = [
10
- {
11
- name: 'Push to deploy.',
12
- description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
13
- icon: solid_1.CloudArrowUpIcon,
14
- },
15
- {
16
- name: 'SSL certificates.',
17
- description: 'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.',
18
- icon: solid_1.LockClosedIcon,
19
- },
20
- {
21
- name: 'Database backups.',
22
- description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
23
- icon: solid_1.ServerIcon,
24
- },
25
- ];
26
- var VistaFeatureV2 = function () {
27
- return (react_1.default.createElement("div", { className: "overflow-hidden bg-white py-24 sm:py-32" },
8
+ var image_1 = __importDefault(require("next/image"));
9
+ var VistaFeatureV2 = function (_a) {
10
+ var description = _a.description, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, items = _a.items, _b = _a.revert, revert = _b === void 0 ? false : _b, subTitle = _a.subTitle, title = _a.title;
11
+ return (react_1.default.createElement("div", { className: "overflow-hidden bg-white py-20 sm:py-32" },
28
12
  react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-6 lg:px-8" },
29
13
  react_1.default.createElement("div", { className: "mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2" },
30
- react_1.default.createElement("div", { className: "lg:pt-4 lg:pr-8" },
14
+ react_1.default.createElement("div", { className: "lg:pt-4 lg:pr-8 w-full ".concat(revert ? 'order-2' : 'order-1') },
31
15
  react_1.default.createElement("div", { className: "lg:max-w-lg" },
32
- react_1.default.createElement("h2", { className: "text-base/7 font-semibold text-indigo-600" }, "Deploy faster"),
33
- react_1.default.createElement("p", { className: "mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl" }, "A better workflow"),
34
- react_1.default.createElement("p", { className: "mt-6 text-lg/8 text-gray-700" }, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione."),
35
- react_1.default.createElement("dl", { className: "mt-10 max-w-xl space-y-8 text-base/7 text-gray-600 lg:max-w-none" }, features.map(function (feature) { return (react_1.default.createElement("div", { key: feature.name, className: "relative pl-9" },
36
- react_1.default.createElement("dt", { className: "inline font-semibold text-gray-900" },
37
- react_1.default.createElement(feature.icon, { "aria-hidden": "true", className: "absolute top-1 left-1 size-5 text-indigo-600" }),
38
- feature.name),
39
- ' ',
40
- react_1.default.createElement("dd", { className: "inline" }, feature.description))); })))),
41
- react_1.default.createElement("img", { alt: "Product screenshot", src: "https://tailwindcss.com/plus-assets/img/component-images/project-app-screenshot.png", width: 2432, height: 1442, className: "w-3xl max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-228 md:-ml-4 lg:-ml-0" })))));
16
+ react_1.default.createElement("h2", { className: "text-base/7 font-semibold text-primary" }, subTitle),
17
+ react_1.default.createElement("p", { className: "mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl" }, title),
18
+ react_1.default.createElement("p", { className: "mt-6 text-lg/8 text-gray-700" }, description),
19
+ react_1.default.createElement("dl", { className: "mt-10 max-w-xl space-y-8 text-base/7 text-gray-600 lg:max-w-none" }, items.map(function (feature) { return (react_1.default.createElement("div", { key: feature.name, className: "flex flex-row gap-2" },
20
+ react_1.default.createElement("div", { className: "size-5 ".concat(revert ? 'order-1' : 'order-2') },
21
+ react_1.default.createElement(feature.icon, { "aria-hidden": "true", className: "size-5 text-primary mt-1" })),
22
+ react_1.default.createElement("p", { className: "".concat(revert ? 'order-1' : 'order-2') },
23
+ react_1.default.createElement("span", { className: 'font-semibold text-gray-900' },
24
+ feature.name,
25
+ ' '),
26
+ react_1.default.createElement("span", { className: "inline" }, feature.description)))); })))),
27
+ react_1.default.createElement(image_1.default, { alt: imageAlt, className: "w-3xl max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-228 md:-ml-4 lg:-ml-0 ".concat(revert ? 'order-1 lg:-ml-80' : 'order-2'), height: 1442, src: imageSrc, width: 232 })))));
42
28
  };
43
29
  exports.VistaFeatureV2 = VistaFeatureV2;
@@ -17,7 +17,7 @@ var VistaProductListV5 = function (_a) {
17
17
  })
18
18
  .sort(function (a, b) { return a.order - b.order; })
19
19
  .map(function (_a) {
20
- var id = _a.id, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, name = _a.name, color = _a.color, price = _a.price, href = _a.href;
20
+ 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;
21
21
  return (react_1.default.createElement("div", { key: id },
22
22
  react_1.default.createElement("div", { className: "relative" },
23
23
  react_1.default.createElement("div", { className: "relative h-72 w-full overflow-hidden rounded-lg" },
@@ -29,8 +29,8 @@ var VistaProductListV5 = function (_a) {
29
29
  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" }),
30
30
  price && (react_1.default.createElement("p", { className: "relative text-lg font-semibold text-white" }, price)))),
31
31
  react_1.default.createElement("div", { className: "mt-6" },
32
- 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" },
33
- "Add to bag",
32
+ 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" },
33
+ ctaLabel,
34
34
  react_1.default.createElement("span", { className: "sr-only" },
35
35
  ", ",
36
36
  name)))));
@@ -63,7 +63,7 @@ var DynamicReactSlick = (0, dynamic_1.default)(function () { return Promise.reso
63
63
  ssr: false,
64
64
  });
65
65
  var VistaProductOverviewV3 = function (_a) {
66
- 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;
66
+ 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;
67
67
  var slickConfig = {
68
68
  dots: true,
69
69
  infinite: (images === null || images === void 0 ? void 0 : images.length) === 1 ? false : true,
@@ -136,7 +136,7 @@ var VistaProductOverviewV3 = function (_a) {
136
136
  react_1.default.createElement("span", null, "What size should I buy?"),
137
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
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")),
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", onClick: handleCtaOnClick }, ctaLabel)),
140
140
  guaranteeInfo && (react_1.default.createElement("div", { className: "mt-6 text-center" },
141
141
  react_1.default.createElement("a", { href: "#", className: "group inline-flex text-base font-medium" },
142
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" }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appcorp/app-corp-vista",
3
- "version": "0.2.25",
3
+ "version": "0.2.27",
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",
@@ -43,7 +43,7 @@
43
43
  "@react-jvectormap/core": "^1.0.4",
44
44
  "@react-jvectormap/world": "^1.1.2",
45
45
  "@react-pakistan/react-icon-collection": "^3.5.0",
46
- "@react-pakistan/util-functions": "^1.24.14",
46
+ "@react-pakistan/util-functions": "^1.24.22",
47
47
  "@remixicon/react": "^4.6.0",
48
48
  "@storybook/addon-essentials": "^8",
49
49
  "@storybook/addon-interactions": "^8",
@@ -1,8 +1,20 @@
1
+ import { ForwardRefExoticComponent, SVGProps } from "react";
1
2
  export interface VistaFeatureV1Props {
2
3
  id: string;
3
4
  }
5
+ export interface VistaFeatureV2Item {
6
+ name: string;
7
+ description: string;
8
+ icon: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref">>;
9
+ }
4
10
  export interface VistaFeatureV2Props {
5
- id: string;
11
+ description: string;
12
+ imageAlt: string;
13
+ imageSrc: string;
14
+ items: VistaFeatureV2Item[];
15
+ revert?: boolean;
16
+ subTitle: string;
17
+ title: string;
6
18
  }
7
19
  export interface VistaFeatureV3Props {
8
20
  id: string;
@@ -21,8 +21,9 @@ export interface VistaProductListV4Props {
21
21
  }
22
22
  export interface VistaProductListV5Item {
23
23
  color?: string;
24
+ ctaLabel?: string;
24
25
  enabled: boolean;
25
- href: string;
26
+ handleOnClick: () => void;
26
27
  id: string;
27
28
  imageAlt: string;
28
29
  imageSrc: string;
@@ -38,6 +38,8 @@ export interface VistaProductOverviewV3Image {
38
38
  export interface VistaProductOverviewV3Props {
39
39
  averageReview?: number;
40
40
  breadcrumbs: VistaProductOverviewV3BreadcrumbItem[];
41
+ ctaLabel: string;
42
+ handleCtaOnClick: () => void;
41
43
  description: string;
42
44
  guaranteeInfo?: boolean;
43
45
  helpInfo?: boolean;