@threekit-tools/treble 0.0.19 → 0.0.23

package/dist/components/Drawer/drawer.styles.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = exports.Header = exports.Wrapper = exports.Background = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.Background = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n  width: 100vw;\n  background: #33333377;\n\n  opacity: ", ";\n  transition: all ", ";\n\n  position: fixed;\n  top: 0;\n  left: 0;\n"], ["\n  height: 100vh;\n  width: 100vw;\n  background: #33333377;\n\n  opacity: ", ";\n  transition: all ", ";\n\n  position: fixed;\n  top: 0;\n  left: 0;\n"])), function (props) { return (props.show ? 1 : 0); }, function (props) { return props.transitionDuration; });
-exports.Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 400px;\n  height: 100vh;\n  background: #fff;\n  border-radius: ", ";\n  opacity: 1;\n\n  transform: translateX(", ");\n  transition: all ", ";\n\n  position: absolute;\n  top: 0;\n  right: 0;\n"], ["\n  min-width: 400px;\n  height: 100vh;\n  background: #fff;\n  border-radius: ", ";\n  opacity: 1;\n\n  transform: translateX(", ");\n  transition: all ", ";\n\n  position: absolute;\n  top: 0;\n  right: 0;\n"])), function (props) { return props.theme.borderRadius; }, function (props) { return (props.show ? '0%' : '100%'); }, function (props) { return props.transitionDuration; });
+exports.Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 400px;\n  height: 100vh;\n  background: #fff;\n  border-radius: ", ";\n  opacity: 1;\n  z-index: 10;\n\n  transform: translateX(", ");\n  transition: all ", ";\n\n  position: absolute;\n  top: 0;\n  right: 0;\n"], ["\n  min-width: 400px;\n  height: 100vh;\n  background: #fff;\n  border-radius: ", ";\n  opacity: 1;\n  z-index: 10;\n\n  transform: translateX(", ");\n  transition: all ", ";\n\n  position: absolute;\n  top: 0;\n  right: 0;\n"])), function (props) { return props.theme.borderRadius; }, function (props) { return (props.show ? '0%' : '100%'); }, function (props) { return props.transitionDuration; });
 exports.Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-family: ", ";\n  padding: 20px;\n\n  & > div {\n    /* height: max-content;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%); */\n  }\n\n  & > div:nth-child(2) {\n    cursor: pointer;\n    height: 20px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-family: ", ";\n  padding: 20px;\n\n  & > div {\n    /* height: max-content;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%); */\n  }\n\n  & > div:nth-child(2) {\n    cursor: pointer;\n    height: 20px;\n  }\n"])), function (props) { return props.theme.fontFamily; });
 exports.Content = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n"], ["\n  font-family: ", ";\n"])), function (props) { return props.theme.fontFamily; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/Modal/modal.styles.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = exports.Header = exports.Wrapper = exports.Background = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.Background = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n  width: 100vw;\n  background: #33333377;\n\n  position: fixed;\n  top: 0;\n  left: 0;\n"], ["\n  height: 100vh;\n  width: 100vw;\n  background: #33333377;\n\n  position: fixed;\n  top: 0;\n  left: 0;\n"])));
-exports.Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 400px;\n  max-width: 100%;\n  min-height: 200px;\n  opacity: 1;\n  overflow: scroll;\n  background: #fff;\n  border-radius: ", ";\n\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"], ["\n  min-width: 400px;\n  max-width: 100%;\n  min-height: 200px;\n  opacity: 1;\n  overflow: scroll;\n  background: #fff;\n  border-radius: ", ";\n\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), function (props) { return props.theme.borderRadius; });
+exports.Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 400px;\n  max-width: 100%;\n  min-height: 200px;\n  opacity: 1;\n  overflow: scroll;\n  z-index: 10;\n  background: #fff;\n  border-radius: ", ";\n\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"], ["\n  min-width: 400px;\n  max-width: 100%;\n  min-height: 200px;\n  opacity: 1;\n  overflow: scroll;\n  z-index: 10;\n  background: #fff;\n  border-radius: ", ";\n\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), function (props) { return props.theme.borderRadius; });
 exports.Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-family: ", ";\n\n  & > div:nth-child(2) {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-family: ", ";\n\n  & > div:nth-child(2) {\n    cursor: pointer;\n  }\n"])), function (props) { return props.theme.fontFamily; });
 exports.Content = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n"], ["\n  font-family: ", ";\n"])), function (props) { return props.theme.fontFamily; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/ProductLayout/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ProductLayoutProps {
+    products: string | Array<string> | Record<string, string>;
+}
+declare const ProductLayout: React.FC<ProductLayoutProps>;
+export default ProductLayout;

package/dist/components/ProductLayout/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ProductLayout = function (props) {
+    return react_1.default.createElement(react_1.default.Fragment, null, props.children);
+};
+exports.default = ProductLayout;

package/dist/components/ProductLoader/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/// <reference types="webpack-env" />
+import { ThreekitProviderProps } from '../ThreekitProvider';
+interface IProducts {
+    ctx: __WebpackModuleApi.RequireContext;
+}
+interface ProductLoaderProps extends Omit<ThreekitProviderProps, 'children'> {
+    productId?: string;
+    products: IProducts;
+}
+export default function ProductLoader(props: ProductLoaderProps): JSX.Element | null;
+export {};

package/dist/components/ProductLoader/index.js

@@ -0,0 +1,90 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ThreekitProvider_1 = __importDefault(require("../ThreekitProvider"));
+var utils_1 = require("../../utils");
+var productAssetId = {};
+var productComponents = [];
+var productToComponentMap = {};
+function ProductLoader(props) {
+    var productId = props.productId, products = props.products, credentials = props.credentials, playerConfig = props.playerConfig, theme = props.theme, threekitEnv = props.threekitEnv;
+    if (!products)
+        return null;
+    if (!productComponents.length) {
+        products.ctx.keys().forEach(function (fileName) {
+            if (!fileName.includes('product.js'))
+                return;
+            if (fileName.includes('].product.js'))
+                return;
+            productComponents.push(products.ctx(fileName).default);
+        });
+        react_1.Children.forEach(Object.values(productComponents).map(function (el) { return el({}); }), function (jsx, i) {
+            var _a;
+            if (!jsx)
+                return;
+            if (jsx.type.name !== 'ProductLayout')
+                return;
+            if (!jsx.props.products)
+                return;
+            var products;
+            if (Array.isArray(jsx.props.products))
+                products = jsx.props.products.reduce(function (output, id) {
+                    var _a;
+                    return Object.assign(output, (_a = {}, _a[id] = id, _a));
+                }, {});
+            else if (typeof jsx.props.products === 'string') {
+                var prdStr = jsx.props.products;
+                products = (_a = {}, _a[prdStr] = prdStr, _a);
+            }
+            else {
+                products = jsx.props.products;
+            }
+            Object.entries(products).forEach(function (_a) {
+                var key = _a[0], assetId = _a[1];
+                productAssetId[key] = assetId;
+                productToComponentMap[key] = i;
+            });
+        });
+    }
+    var params = (0, utils_1.getParams)();
+    var id = productId;
+    if (!id && params['tkProduct']) {
+        id = Object.keys(productToComponentMap).find(function (el) { return params['tkProduct'] === el; });
+    }
+    if (!id)
+        return null;
+    var Product = productComponents[productToComponentMap[id]];
+    if (!Product)
+        return null;
+    var assetId = productAssetId[id];
+    var env = threekitEnv || 'preview';
+    var preppedCredentials = Object.assign({}, credentials);
+    preppedCredentials[env] = Object.assign(preppedCredentials[env], {
+        assetId: assetId,
+    });
+    return (react_1.default.createElement(ThreekitProvider_1.default, { credentials: preppedCredentials, playerConfig: Object.assign({}, playerConfig), theme: theme },
+        react_1.default.createElement(Product, null)));
+}
+exports.default = ProductLoader;

package/dist/index.d.ts

@@ -35,4 +35,8 @@ import Zoom from './components/Zoom';
 import Snapshots from './components/Snapshots';
 import Wishlist from './components/Wishlist';
 import Share from './components/Share';
-export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, };
+import icons from './icons';
+export * from './icons';
+import ProductLoader from './components/ProductLoader';
+import ProductLayout from './components/ProductLayout';
+export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, ProductLoader, ProductLayout, };

package/dist/index.js

@@ -1,9 +1,19 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurator = exports.useAttribute = void 0;
+exports.ProductLayout = exports.ProductLoader = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurator = exports.useAttribute = void 0;
 //  Hooks
 var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
 exports.useAttribute = useAttribute_1.default;
@@ -87,3 +97,12 @@ var Wishlist_1 = __importDefault(require("./components/Wishlist"));
 exports.Wishlist = Wishlist_1.default;
 var Share_1 = __importDefault(require("./components/Share"));
 exports.Share = Share_1.default;
+//  Icons
+var icons_1 = __importDefault(require("./icons"));
+exports.icons = icons_1.default;
+__exportStar(require("./icons"), exports);
+//  Products - Multi-configurtors
+var ProductLoader_1 = __importDefault(require("./components/ProductLoader"));
+exports.ProductLoader = ProductLoader_1.default;
+var ProductLayout_1 = __importDefault(require("./components/ProductLayout"));
+exports.ProductLayout = ProductLayout_1.default;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.19",
+  "version": "0.0.23",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [
-    "dist"
+    "dist",
+    "tailwind-presets.js"
   ],
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -43,6 +44,7 @@
     "@types/react-dom": ">=17.0.9",
     "@types/redux-logger": "^3.0.9",
     "@types/styled-components": "^5.1.15",
+    "@types/webpack-env": "^1.16.3",
     "babel-loader": "^8.2.2",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2",

package/tailwind-presets.js

@@ -0,0 +1,82 @@
+// eslint-disable-next-line
+const plugin = require('tailwindcss/plugin');
+
+// eslint-disable-next-line
+module.exports = {
+  purge: ['./public/index.html', './src/**/*.{js,jsx,ts,tsx}'],
+  mode: 'jit',
+  variants: {},
+  theme: {
+    extend: {
+      colors: {
+        primary: '#1890ff',
+      },
+      height: { 50: '12rem' },
+      width: { 50: '12rem' },
+      minWidth: {
+        11: '2.75rem',
+      },
+      boxShadow: {
+        trbl: '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
+        wishlist: '0px 4px 16px rgba(0, 0, 0, 0.16)',
+      },
+    },
+  },
+  corePlugins: {
+    // preflight: false,
+  },
+  plugins: [
+    plugin(function ({ addComponents, theme }) {
+      const tooltip = {
+        '.trbl-tooltip': {
+          paddingBottom: `${theme('spacing.2')}`,
+          width: 'max-content',
+          borderRadius: theme('borderRadius.sm'),
+          position: 'relative',
+          top: '-100%',
+          left: '50%',
+          transform: 'translate(-50%, -100%)',
+          color: 'white',
+        },
+        '.trbl-tooltip-triangle': {
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-around',
+
+          '& > div': {
+            width: `${theme('spacing.0')}`,
+            height: `${theme('spacing.0')}`,
+            borderLeft: '8px solid transparent',
+            borderRight: '8px solid transparent',
+            borderTop: '8px solid rgba(0, 0, 0, 0.6)',
+            overflow: 'hidden',
+            pointerEvents: 'none',
+          },
+        },
+      };
+
+      addComponents(tooltip);
+    }),
+    plugin(function ({ addComponents, theme }) {
+      const widgetBtn = {
+        '.trbl-wgt-btn': {
+          borderRadius: `${theme('borderRadius.full')}`,
+          height: '40px',
+          width: '40px',
+          border: 'none',
+          color: '#000',
+          background: 'rgba(251,251,251,0.5)',
+          overflow: 'hidden',
+          cursor: 'pointer',
+          transition: 'all 0.16s ease-in-out',
+          '&:hover': {
+            background: 'rgba(240,240,240,0.75)',
+            boxShadow: '0px 0px 4px rgb(0 0 0 / 25%)',
+          },
+        },
+      };
+
+      addComponents(widgetBtn);
+    }),
+  ],
+};