@gem-sdk/plugin-quick-view 1.0.0

package/README.md

@@ -0,0 +1 @@
+# GemX Plugin

package/dist/cjs/components/QuickView.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var components = require('@gem-sdk/components');
+var core = require('@gem-sdk/core');
+var react = require('react');
+
+const ModalContent = () => {
+    const product = core.useProduct();
+    const { data, isLoading: loading, error } = core.useProductQuery(product?.id);
+    if (loading)
+        return (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("svg", { className: "my-20 mx-auto h-8 w-8 animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
+    if (error)
+        return jsxRuntime.jsx("p", { className: "py-20 text-center font-semibold", children: "Something went wrong" });
+    return (jsxRuntime.jsx(core.ProductProvider, { product: data, children: jsxRuntime.jsxs(components.Row, { setting: {
+                responsive: {
+                    desktop: '50fr 50fr',
+                    mobile: '100fr',
+                },
+            }, children: [jsxRuntime.jsx(components.Col, { children: jsxRuntime.jsx(components.ProductImages, {}) }), jsxRuntime.jsxs(components.Col, { children: [jsxRuntime.jsx(components.ProductTitle, { setting: {
+                                htmlTag: 'p',
+                            }, styles: {
+                                typography: {
+                                    type: 'heading-3',
+                                },
+                            } }), jsxRuntime.jsxs(components.Row, { setting: {
+                                responsive: {
+                                    desktop: 'minmax(max-content, auto) 1fr',
+                                },
+                            }, children: [jsxRuntime.jsx(components.Col, { children: jsxRuntime.jsx(components.ProductPrice, { styles: {
+                                            typography: {
+                                                type: 'subheading-2',
+                                            },
+                                        }, setting: {
+                                            priceType: 'regular',
+                                        } }) }), jsxRuntime.jsx(components.Col, { children: jsxRuntime.jsx(components.ProductPrice, { styles: {
+                                            typography: {
+                                                type: 'paragraph-2',
+                                            },
+                                        }, setting: {
+                                            priceType: 'compare',
+                                        } }) })] }), jsxRuntime.jsx(components.ProductVariants, {}), jsxRuntime.jsx(components.ProductQuantity, {}), jsxRuntime.jsx(components.ProductButton, { setting: { actionEffect: 'open-cart-drawer' } })] })] }) }));
+};
+const ProductQuickView = ({ setting }) => {
+    const [open, setOpen] = react.useState(false);
+    const plugins = core.usePluginEnable();
+    if (!plugins?.includes('quick-view')) {
+        return null;
+    }
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { "aria-hidden": true, role: "button", "aria-label": "Quick view", onClick: () => setOpen((prev) => !prev), children: setting?.label }), jsxRuntime.jsx(components.Modal, { setting: { open }, closeOnClickOutside: true, onClose: () => setOpen((prev) => !prev), children: jsxRuntime.jsx(ModalContent, {}) })] }));
+};
+ProductQuickView.defaultProps = {
+    setting: { label: 'Quick View' },
+};
+
+exports.default = ProductQuickView;

package/dist/cjs/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var QuickView = require('./components/QuickView.js');
+var index = require('./setting/index.js');
+
+
+
+exports.default = QuickView.default;
+exports.builderSetting = index.default;

package/dist/cjs/setting/QuickView.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const config = {
+    tag: 'QuickView',
+    label: 'Product Quick View',
+};
+
+exports.default = config;

package/dist/cjs/setting/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var QuickView = require('./QuickView.js');
+
+var index = { QuickView: QuickView.default };
+
+exports.default = index;

package/dist/esm/components/QuickView.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Modal, Row, Col, ProductImages, ProductTitle, ProductPrice, ProductVariants, ProductQuantity, ProductButton } from '@gem-sdk/components';
+import { usePluginEnable, useProduct, useProductQuery, ProductProvider } from '@gem-sdk/core';
+import { useState } from 'react';
+
+const ModalContent = () => {
+    const product = useProduct();
+    const { data, isLoading: loading, error } = useProductQuery(product?.id);
+    if (loading)
+        return (jsx("div", { children: jsxs("svg", { className: "my-20 mx-auto h-8 w-8 animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
+    if (error)
+        return jsx("p", { className: "py-20 text-center font-semibold", children: "Something went wrong" });
+    return (jsx(ProductProvider, { product: data, children: jsxs(Row, { setting: {
+                responsive: {
+                    desktop: '50fr 50fr',
+                    mobile: '100fr',
+                },
+            }, children: [jsx(Col, { children: jsx(ProductImages, {}) }), jsxs(Col, { children: [jsx(ProductTitle, { setting: {
+                                htmlTag: 'p',
+                            }, styles: {
+                                typography: {
+                                    type: 'heading-3',
+                                },
+                            } }), jsxs(Row, { setting: {
+                                responsive: {
+                                    desktop: 'minmax(max-content, auto) 1fr',
+                                },
+                            }, children: [jsx(Col, { children: jsx(ProductPrice, { styles: {
+                                            typography: {
+                                                type: 'subheading-2',
+                                            },
+                                        }, setting: {
+                                            priceType: 'regular',
+                                        } }) }), jsx(Col, { children: jsx(ProductPrice, { styles: {
+                                            typography: {
+                                                type: 'paragraph-2',
+                                            },
+                                        }, setting: {
+                                            priceType: 'compare',
+                                        } }) })] }), jsx(ProductVariants, {}), jsx(ProductQuantity, {}), jsx(ProductButton, { setting: { actionEffect: 'open-cart-drawer' } })] })] }) }));
+};
+const ProductQuickView = ({ setting }) => {
+    const [open, setOpen] = useState(false);
+    const plugins = usePluginEnable();
+    if (!plugins?.includes('quick-view')) {
+        return null;
+    }
+    return (jsxs("div", { children: [jsx("div", { "aria-hidden": true, role: "button", "aria-label": "Quick view", onClick: () => setOpen((prev) => !prev), children: setting?.label }), jsx(Modal, { setting: { open }, closeOnClickOutside: true, onClose: () => setOpen((prev) => !prev), children: jsx(ModalContent, {}) })] }));
+};
+ProductQuickView.defaultProps = {
+    setting: { label: 'Quick View' },
+};
+
+export { ProductQuickView as default };

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+import ProductQuickView from './components/QuickView.js';
+export { default } from './components/QuickView.js';
+export { default as builderSetting } from './setting/index.js';

package/dist/esm/setting/QuickView.js

@@ -0,0 +1,6 @@
+const config = {
+    tag: 'QuickView',
+    label: 'Product Quick View',
+};
+
+export { config as default };

package/dist/esm/setting/index.js

@@ -0,0 +1,5 @@
+import config from './QuickView.js';
+
+var index = { QuickView: config };
+
+export { index as default };

package/dist/types/index.d.ts

@@ -0,0 +1,13 @@
+import * as _gem_sdk_core from '@gem-sdk/core';
+import { BaseProps } from '@gem-sdk/core';
+
+type ProductQuickViewProps = BaseProps<{
+    label?: React.ReactNode;
+}>;
+declare const ProductQuickView: React.FC<ProductQuickViewProps>;
+
+declare const _default: {
+    QuickView: _gem_sdk_core.ComponentSetting<ProductQuickViewProps>;
+};
+
+export { _default as builderSetting, ProductQuickView as default };

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@gem-sdk/plugin-quick-view",
+  "version": "1.0.0",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "dist/cjs/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "cleanup": "rimraf es dist lib",
+    "prebuild": "yarn cleanup",
+    "pre:publish": "node ./../../helpers/convert-publish.js -p",
+    "post:publish": "node ./../../helpers/convert-publish.js",
+    "watch": "rollup -c ./../../helpers/rollup.config.mjs -w",
+    "build": "rollup -c ./../../helpers/rollup.config.mjs --environment NODE_ENV:production",
+    "lint": "eslint ./src --ext .tsx,.ts",
+    "type-check": "yarn tsc --noEmit",
+    "test": "jest -c ./../../helpers/jest.config.ts"
+  },
+  "devDependencies": {
+    "@gem-sdk/components": "*",
+    "@gem-sdk/core": "*",
+    "@gem-sdk/styles": "*"
+  },
+  "peerDependencies": {
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
+  },
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  }
+}