@thryveai/theme-interfaces 1.4.8-beta4 → 1.4.8-beta5

package/admin-theme-template.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdminThemeTemplate = exports.AdminTemplateInputTypes = void 0;
+exports.AdminTemplateInputTypes = {
+    checkbox: 'checkbox',
+    collapsableObject: 'collapsableObject',
+    color: 'color',
+    dropdown: 'dropdown',
+    inputChar: 'inputChar',
+    inputNumber: 'inputChar',
+    multiDropdown: 'multiDropdown',
+    nullObject: 'nullObject',
+    object: 'object',
+    string: 'string'
+};
+var buttonGenerator = function (buttonName) { return ({
+    title: buttonName + " Button",
+    description: "Settings for the " + buttonName + " button",
+    type: exports.AdminTemplateInputTypes.collapsableObject,
+    value: {
+        borderRadius: {
+            title: 'Border Radius',
+            locationInTheme: "data.buttons." + buttonName + ".borderRadius",
+            type: exports.AdminTemplateInputTypes.string
+        },
+        fontWeight: {
+            title: 'Font Weight',
+            locationInTheme: "data.buttons." + buttonName + ".fontWeight",
+            type: exports.AdminTemplateInputTypes.string
+        },
+        textTransform: {
+            title: 'Text Transform',
+            locationInTheme: "data.buttons." + buttonName + ".textTransform",
+            type: exports.AdminTemplateInputTypes.string
+        },
+        static: buttonStateGenerator('static', "data.buttons." + buttonName),
+        hover: buttonStateGenerator('hover', "data.buttons." + buttonName),
+        clicked: buttonStateGenerator('clicked', "data.buttons." + buttonName),
+        disabled: buttonStateGenerator('disabled', "data.buttons." + buttonName),
+    }
+}); };
+var buttonStateGenerator = function (stateName, buttonLocation) { return ({
+    title: stateName + " Colors",
+    description: "How the button will look in " + stateName + " state",
+    type: exports.AdminTemplateInputTypes.collapsableObject,
+    value: {
+        bgColor: {
+            title: 'Background',
+            locationInTheme: buttonLocation + "." + stateName + ".bgColor",
+            type: exports.AdminTemplateInputTypes.color,
+        },
+        borderColor: {
+            title: 'Border Color',
+            locationInTheme: buttonLocation + "." + stateName + ".borderColor",
+            type: exports.AdminTemplateInputTypes.color,
+        },
+        color: {
+            title: 'Text Color',
+            locationInTheme: buttonLocation + "." + stateName + ".color",
+            type: exports.AdminTemplateInputTypes.color,
+        },
+        iconColor: {
+            title: 'Icon Color (if any)',
+            locationInTheme: buttonLocation + "." + stateName + ".iconColor",
+            type: exports.AdminTemplateInputTypes.color,
+        },
+    }
+}); };
+var colorGenerator = function (colorName, colorLocation) { return ({
+    title: colorName,
+    locationInTheme: colorLocation + "." + colorName,
+    type: exports.AdminTemplateInputTypes.color,
+}); };
+exports.AdminThemeTemplate = {
+    colors: {
+        title: 'Colors',
+        description: 'Change your themes colors',
+        helpLink: 'https://mi9retail.atlassian.net/wiki/spaces/FDS/pages/1594065051/Storefront+configuration+-+from+theme+repo',
+        type: exports.AdminTemplateInputTypes.collapsableObject,
+        value: {
+            brandColors: {
+                title: 'Brand Colors',
+                description: 'Change your themes colors',
+                type: exports.AdminTemplateInputTypes.collapsableObject,
+                value: {
+                    primary1: colorGenerator('primary1', 'data.colors.brandColors'),
+                    primary2: colorGenerator('primary2', 'data.colors.brandColors'),
+                    primary3: colorGenerator('primary3', 'data.colors.brandColors'),
+                    primary4: colorGenerator('primary4', 'data.colors.brandColors'),
+                    primary5: colorGenerator('primary5', 'data.colors.brandColors'),
+                    secondary1: colorGenerator('secondary1', 'data.colors.brandColors'),
+                    secondary2: colorGenerator('secondary2', 'data.colors.brandColors'),
+                    secondary3: colorGenerator('secondary3', 'data.colors.brandColors'),
+                    secondary4: colorGenerator('secondary4', 'data.colors.brandColors'),
+                    secondary5: colorGenerator('secondary5', 'data.colors.brandColors'),
+                    tertiary1: colorGenerator('tertiary1', 'data.colors.brandColors'),
+                    tertiary2: colorGenerator('tertiary2', 'data.colors.brandColors'),
+                    tertiary3: colorGenerator('tertiary3', 'data.colors.brandColors'),
+                    tertiary4: colorGenerator('tertiary4', 'data.colors.brandColors'),
+                    tertiary5: colorGenerator('tertiary5', 'data.colors.brandColors'),
+                }
+            },
+            uiColors: {
+                title: 'UI Colors',
+                description: 'Change your themes colors',
+                type: exports.AdminTemplateInputTypes.collapsableObject,
+                value: {
+                    success: colorGenerator('success', 'data.colors.uiColors'),
+                    successDark: colorGenerator('successDark', 'data.colors.uiColors'),
+                    successLight: colorGenerator('successLight', 'data.colors.uiColors'),
+                    warn: colorGenerator('warn', 'data.colors.uiColors'),
+                    warnDark: colorGenerator('warnDark', 'data.colors.uiColors'),
+                    warnLight: colorGenerator('warnLight', 'data.colors.uiColors'),
+                    alert: colorGenerator('alert', 'data.colors.uiColors'),
+                    alertDark: colorGenerator('alertDark', 'data.colors.uiColors'),
+                    alertLight: colorGenerator('alertLight', 'data.colors.uiColors'),
+                    greyscale1: colorGenerator('greyscale1', 'data.colors.uiColors'),
+                    greyscale2: colorGenerator('greyscale2', 'data.colors.uiColors'),
+                    greyscale3: colorGenerator('greyscale3', 'data.colors.uiColors'),
+                    greyscale4: colorGenerator('greyscale4', 'data.colors.uiColors'),
+                    greyscale5: colorGenerator('greyscale5', 'data.colors.uiColors'),
+                    greyscale6: colorGenerator('greyscale6', 'data.colors.uiColors'),
+                    greyscale7: colorGenerator('greyscale7', 'data.colors.uiColors'),
+                    promotion1: colorGenerator('promotion1', 'data.colors.uiColors'),
+                    promotion2: colorGenerator('promotion2', 'data.colors.uiColors'),
+                }
+            }
+        }
+    },
+    buttons: {
+        title: 'Buttons',
+        description: 'Change your themes buttons',
+        helpLink: 'https://mi9retail.atlassian.net/wiki/spaces/FDS/pages/1594065051/Storefront+configuration+-+from+theme+repo',
+        type: exports.AdminTemplateInputTypes.collapsableObject,
+        value: {
+            globalThemeBorderRadius: {
+                title: 'Global Theme Border Radius',
+                description: 'The br for the whole site',
+                locationInTheme: 'data.buttons.globalThemeBorderRadius',
+                type: exports.AdminTemplateInputTypes.string,
+            },
+            globalThemeFontWeight: {
+                title: 'Global Theme Font Weight',
+                description: 'The font weight for the whole site',
+                locationInTheme: 'data.buttons.globalThemeFontWeight',
+                type: exports.AdminTemplateInputTypes.string,
+            },
+            globalThemeFontFamily: {
+                title: 'Global Theme Font Family',
+                description: 'The font family for the whole site',
+                locationInTheme: 'data.buttons.globalThemeFontFamily',
+                type: exports.AdminTemplateInputTypes.string,
+            },
+            iconPosition: {
+                title: 'Button Icon Position',
+                description: 'Which side of the button should the icon appear',
+                locationInTheme: 'data.buttons.iconPosition',
+                type: exports.AdminTemplateInputTypes.dropdown,
+                options: ['left', 'right']
+            },
+            primary: buttonGenerator('primary'),
+            primaryLight: buttonGenerator('primaryLight'),
+            secondary: buttonGenerator('secondary'),
+            secondaryLight: buttonGenerator('secondaryLight'),
+            checkout: buttonGenerator('checkout'),
+            filterSort: {
+                title: 'Filter Sort',
+                description: 'Colors for the filter sort buttons',
+                type: exports.AdminTemplateInputTypes.collapsableObject,
+                value: {
+                    color: colorGenerator('color', 'data.buttons.filterSort'),
+                    hoverColor: colorGenerator('hoverColor', 'data.buttons.filterSort')
+                }
+            },
+        }
+    }
+};
+exports.default = exports.AdminThemeTemplate;

package/index.d.ts

@@ -3,9 +3,10 @@ import { IIconsObject, PaymentTypesLogos, PaymentCards, IconNames, IconNamesToFi
 import { ITheme, IThemeScripts, IThemeImages, IThemeMetadata, IThemeFavicons, IThemeLogoPosition, IThemeLogoHeightsProps, IThemeLogoHeights, ISTSThemeInterface, IThemeFavicon, IThemeMetadataItem, IThemeInterface, IGlobalTheme, IColors, IInitializedEmptyTheme, IThemeAnimationConfettiPlaces, IThemeGlobalAnimations, IThemeAnimationsConfettiPlacesTypes, IThemeAnimationsConfettiProps, IEmbeddedFont, IEmbeddedFontSource } from "./theme.interfaces";
 import { IDefaultTheme, IDefaultThemeScripts, IDefaultThemeImages, IDefaultThemeMetadata, IDefaultThemeFavicons, IDefaultThemeLogoPosition, IDefaultThemeLogoHeightsProps, IDefaultThemeLogoHeights, ISTSDefaultThemeInterface, IDefaultThemeFavicon, IDefaultThemeMetadataItem, IDefaultThemeInterface, IGlobalDefaultTheme, IDefaultColors, IInitializedEmptyDefaultTheme, IDefaultThemeAnimationConfettiPlaces, IDefaultThemeGlobalAnimations, IDefaultThemeAnimationsConfettiPlacesTypes, IDefaultThemeAnimationsConfettiProps, IDefaultEmbeddedFont, IDefaultEmbeddedFontSource } from "./default-theme.interface";
 import AdminSettingsTemplate from "./admin-settings-template";
+import AdminThemeTemplate, { AdminTemplateInputTypes } from "./admin-theme-template";
 import defaultConfig from "./default.config";
 export { IDefaultTheme, IDefaultThemeScripts, IDefaultThemeImages, IDefaultThemeMetadata, IDefaultThemeFavicons, IDefaultThemeLogoPosition, IDefaultThemeLogoHeightsProps, IDefaultThemeLogoHeights, ISTSDefaultThemeInterface, IDefaultThemeFavicon, IDefaultThemeMetadataItem, IDefaultThemeInterface, IGlobalDefaultTheme, IDefaultColors, IInitializedEmptyDefaultTheme, IDefaultThemeAnimationConfettiPlaces, IDefaultThemeGlobalAnimations, IDefaultThemeAnimationsConfettiPlacesTypes, IDefaultThemeAnimationsConfettiProps, IDefaultEmbeddedFont, IDefaultEmbeddedFontSource, ITheme, IThemeScripts, IThemeImages, IThemeMetadata, IThemeFavicons, IThemeLogoPosition, IThemeLogoHeightsProps, IThemeLogoHeights, ISTSThemeInterface, IThemeFavicon, IThemeMetadataItem, IThemeInterface, IGlobalTheme, IColors, IInitializedEmptyTheme, IThemeAnimationConfettiPlaces, IThemeGlobalAnimations, IThemeAnimationsConfettiPlacesTypes, IThemeAnimationsConfettiProps, IEmbeddedFont, IEmbeddedFontSource, };
 export { IIconsObject, PaymentTypesLogos, PaymentCards, IconNames, IconNamesToFiles, };
 export { IRetailerSettings, ISecondTierAuthorization, IFlippConfig, IFlippConfigV2, IFlippScriptUrls, IAllSettings, ISMSConfig, IDefaultRetailerSettings, ICtaButtons, IAddressesSettings, IAccountPageSettings, ILayoutSettings, ILoggingLevel, IDefaultSearchParams, IDefaultStoreLocation, IDefaultCounty, IRetailerCountry, IRestrictMapPlaces, IValidationType, INutritionZone, IFooterTypes, IRegistrationFieldTypes, IRegistrationFieldNames, IValidateLength, IValidateDateRange, IRegistrationField, ICheckoutValidation, ISearchPreviewVisibility, IPaymentCards, IGlobalAnimations, ILayoutAnimationsConfetti, IGlobalCheckoutProps, IAddressIntegration, IAddressFinderType, };
-export { AdminSettingsTemplate };
+export { AdminSettingsTemplate, AdminThemeTemplate, AdminTemplateInputTypes };
 export { defaultConfig };

package/index.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultConfig = exports.AdminSettingsTemplate = exports.IconNamesToFiles = void 0;
+exports.defaultConfig = exports.AdminTemplateInputTypes = exports.AdminThemeTemplate = exports.AdminSettingsTemplate = exports.IconNamesToFiles = void 0;
 var icons_interfaces_1 = require("./icons.interfaces");
 Object.defineProperty(exports, "IconNamesToFiles", { enumerable: true, get: function () { return icons_interfaces_1.IconNamesToFiles; } });
 var admin_settings_template_1 = require("./admin-settings-template");
 exports.AdminSettingsTemplate = admin_settings_template_1.default;
+var admin_theme_template_1 = require("./admin-theme-template");
+exports.AdminThemeTemplate = admin_theme_template_1.default;
+Object.defineProperty(exports, "AdminTemplateInputTypes", { enumerable: true, get: function () { return admin_theme_template_1.AdminTemplateInputTypes; } });
 var default_config_1 = require("./default.config");
 exports.defaultConfig = default_config_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thryveai/theme-interfaces",
-  "version": "1.4.8-beta4",
+  "version": "1.4.8-beta5",
   "description": "Shared Interfaces for all ThryveAi storefront retailer themes.",
   "scripts": {
     "build": "tsc",
@@ -11,4 +11,4 @@
   "devDependencies": {
     "typescript": "4.3.5"
   }
-}
+}