@open-tender/store 0.5.0 → 0.5.1

package/dist/esm/utils/themeCloud.js

@@ -0,0 +1,190 @@
+import { __assign } from "tslib";
+export var remsToPixels = function (rems, ratio) {
+    var pixels = parseFloat(rems.replace('rem', '')) * 10;
+    var adjustedPixels = pixels * ratio;
+    var noZeroes = parseFloat(adjustedPixels.toFixed(2)).toString();
+    return noZeroes === '0' ? '0' : "".concat(noZeroes, "px");
+};
+export var remsToNumber = function (rems) {
+    return parseInt((parseFloat(rems.replace('rem', '')) * 10).toString(), 10);
+};
+var makeLineHeight = function (lineHeight, fontSize, ratio) {
+    var size = parseInt(fontSize.replace('px', ''));
+    return "".concat((ratio * parseFloat(lineHeight.toString()) * size).toFixed(3), "px");
+};
+var makeLineHeights = function (sizes, lineHeight, ratio) {
+    return Object.entries(sizes).reduce(function (obj, _a) {
+        var _b;
+        var size = _a[0], fontSize = _a[1];
+        return __assign(__assign({}, obj), (_b = {}, _b[size] = makeLineHeight(lineHeight, fontSize, ratio), _b));
+    }, {});
+};
+var fontSizesToPixels = function (object, ratio) {
+    return Object.entries(object).reduce(function (obj, _a) {
+        var _b;
+        var key = _a[0], value = _a[1];
+        return __assign(__assign({}, obj), (_b = {}, _b[key] = remsToPixels(value, ratio), _b));
+    }, {});
+};
+var layoutToPixels = function (object, ratio) {
+    return Object.entries(object).reduce(function (obj, _a) {
+        var _b;
+        var key = _a[0], value = _a[1];
+        return __assign(__assign({}, obj), (_b = {}, _b[key] = remsToPixels(value, ratio), _b));
+    }, {});
+};
+var paddingToPixels = function (padding, ratio) {
+    var _a = padding.split(' '), top = _a[0], horizontal = _a[1], bottom = _a[2];
+    var topPx = remsToPixels(top, ratio);
+    var horizontalPx = remsToPixels(horizontal, ratio);
+    var bottomPx = remsToPixels(bottom, ratio);
+    return "".concat(topPx, " ").concat(horizontalPx, " ").concat(bottomPx);
+};
+var buttonToPixels = function (button, ratio) {
+    return __assign(__assign({}, button), { borderRadius: remsToPixels(button.borderRadius, ratio), borderWidth: remsToPixels(button.borderWidth, ratio), borderWidthApp: button.borderWidthApp
+            ? remsToPixels(button.borderWidthApp, ratio)
+            : remsToPixels(button.borderWidth, ratio), fontSize: button.fontSize ? remsToPixels(button.fontSize, ratio) : null, letterSpacing: button.letterSpacing
+            ? remsToPixels(button.letterSpacing, ratio)
+            : null, padding: button.padding ? paddingToPixels(button.padding, ratio) : null });
+};
+var buttonLargeToPixels = function (button, ratio) {
+    var largeButton = buttonToPixels(button, ratio);
+    return __assign(__assign({}, largeButton), { subtitleFontSizeMobile: button.subtitleFontSizeMobile
+            ? remsToPixels(button.subtitleFontSizeMobile, ratio)
+            : null, subtitleMarginTopMobile: button.subtitleMarginTopMobile
+            ? remsToPixels(button.subtitleMarginTopMobile, ratio)
+            : null, titleFontSizeMobile: button.titleFontSizeMobile
+            ? remsToPixels(button.titleFontSizeMobile, ratio)
+            : null, titleMarginLeftMobile: button.titleMarginLeftMobile
+            ? remsToPixels(button.titleMarginLeftMobile, ratio)
+            : null });
+};
+var makeButtons = function (buttons, ratio) {
+    var sizes = Object.entries(buttons.sizes).reduce(function (obj, _a) {
+        var _b;
+        var key = _a[0], value = _a[1];
+        return __assign(__assign({}, obj), (_b = {}, _b[key] = key === 'large'
+            ? buttonLargeToPixels(value, ratio)
+            : buttonToPixels(value, ratio), _b));
+    }, {});
+    return __assign(__assign({}, buttons), { sizes: sizes });
+};
+var makeFont = function (font, sizes, ratio) {
+    var fontStyle = __assign(__assign({}, font), { letterSpacing: remsToPixels(font.letterSpacing, ratio), lineHeights: makeLineHeights(sizes, font.lineHeight, ratio) });
+    if (!font.fontSize) {
+        return fontStyle;
+    }
+    var fontSize = remsToPixels(font.fontSize, ratio);
+    var lineHeight = makeLineHeight(font.lineHeight, fontSize, ratio);
+    return __assign(__assign({}, fontStyle), { fontSize: fontSize, lineHeight: lineHeight });
+};
+var makeFonts = function (fonts, lineHeight, ratio) {
+    var sizes = fontSizesToPixels(fonts.sizes, ratio);
+    var lineHeights = makeLineHeights(sizes, lineHeight, ratio);
+    var headline = makeFont(fonts.headline, sizes, ratio);
+    var headings = makeFont(fonts.headings, sizes, ratio);
+    var body = makeFont(fonts.body, sizes, ratio);
+    var preface = makeFont(fonts.preface, sizes, ratio);
+    return __assign(__assign({}, fonts), { headline: headline, headings: headings, body: body, preface: preface, sizes: sizes, lineHeights: lineHeights });
+};
+var makeBorder = function (border, ratio) {
+    return __assign(__assign({}, border), { radius: remsToPixels(border.radius, ratio), radiusSmall: remsToPixels(border.radiusSmall, ratio), width: remsToPixels(border.width, ratio), widthApp: remsToPixels(border.widthApp, ratio) });
+};
+var makeLabel = function (label, ratio) {
+    var _a = label.padding.split(' '), vertical = _a[0], horizontal = _a[1];
+    return {
+        fontSize: remsToPixels(label.fontSize, ratio),
+        fontSizeMobile: remsToPixels(label.fontSizeMobile, ratio),
+        left: remsToPixels(label.left, ratio),
+        offset: remsToPixels(label.offset, ratio),
+        padding: "".concat(remsToPixels(vertical, ratio), " ").concat(remsToPixels(horizontal, ratio)),
+        top: remsToPixels(label.top, ratio)
+    };
+};
+var makeInputs = function (inputs, ratio) {
+    var _a = inputs.padding.split(' '), vertical = _a[0], horizontal = _a[1];
+    return __assign(__assign({}, inputs), { borderWidth: remsToPixels(inputs.borderWidth, ratio), borderWidthApp: remsToPixels(inputs.borderWidthApp, ratio), fontSize: remsToPixels(inputs.fontSize, ratio), fontSizeMobile: remsToPixels(inputs.fontSizeMobile, ratio), iconLeft: remsToPixels(inputs.iconLeft, ratio), iconPadding: remsToPixels(inputs.iconPadding, ratio), label: makeLabel(inputs.label, ratio), letterSpacing: remsToPixels(inputs.letterSpacing, ratio), lineHeight: makeLineHeight(inputs.lineHeight, inputs.fontSize, ratio), lineHeightMobile: makeLineHeight(inputs.lineHeight, inputs.fontSizeMobile, ratio), padding: "".concat(remsToPixels(vertical, ratio), " ").concat(remsToPixels(horizontal, ratio)), paddingBottom: remsToPixels(inputs.paddingBottom, ratio), paddingBottomActive: remsToPixels(inputs.paddingBottomActive, ratio), paddingHorizontal: remsToPixels(inputs.paddingHorizontal, ratio), paddingTop: remsToPixels(inputs.paddingTop, ratio), paddingTopActive: remsToPixels(inputs.paddingTopActive, ratio), paddingVertical: remsToPixels(inputs.paddingVertical, ratio), radius: remsToPixels(inputs.radius, ratio), selectPaddingBottom: remsToPixels(inputs.selectPaddingBottom, ratio), selectSize: remsToPixels(inputs.selectSize, ratio), selectSizeMobile: remsToPixels(inputs.selectSizeMobile, ratio) });
+};
+var makeCounts = function (counts, ratio) {
+    var alerts = counts.alerts, quantity = counts.quantity;
+    return {
+        alerts: __assign(__assign({}, alerts), { borderWidth: remsToPixels(alerts.borderWidth, ratio), borderWidthApp: remsToPixels(alerts.borderWidthApp, ratio), fontSize: remsToPixels(alerts.fontSize, ratio), fontSizeMobile: remsToPixels(alerts.fontSizeMobile, ratio), paddingBottom: remsToPixels(alerts.paddingBottom, ratio), paddingTop: remsToPixels(alerts.paddingTop, ratio) }),
+        quantity: __assign(__assign({}, quantity), { fontSize: remsToPixels(quantity.fontSize, ratio), fontSizeMobile: remsToPixels(quantity.fontSizeMobile, ratio), paddingBottom: remsToPixels(quantity.paddingBottom, ratio), paddingTop: remsToPixels(quantity.paddingTop, ratio) })
+    };
+};
+var makeCards = function (cards, ratio) {
+    var box = cards.default, form = cards.form, menuItem = cards.menuItem, modifier = cards.modifier;
+    return {
+        default: __assign(__assign({}, box), { borderRadius: remsToPixels(box.borderRadius, ratio), borderWidth: remsToPixels(box.borderWidth, ratio), borderWidthApp: remsToPixels(box.borderWidthApp, ratio) }),
+        form: __assign(__assign({}, form), { borderRadius: remsToPixels(form.borderRadius, ratio), borderWidth: remsToPixels(form.borderWidth, ratio), borderWidthApp: remsToPixels(form.borderWidthApp, ratio) }),
+        menuItem: __assign(__assign({}, menuItem), { borderRadius: remsToPixels(menuItem.borderRadius, ratio), borderWidth: remsToPixels(menuItem.borderWidth, ratio), borderWidthApp: remsToPixels(menuItem.borderWidthApp, ratio) }),
+        modifier: __assign(__assign({}, modifier), { borderRadius: remsToPixels(modifier.borderRadius, ratio), borderWidth: remsToPixels(modifier.borderWidth, ratio), borderWidthApp: remsToPixels(modifier.borderWidthApp, ratio) })
+    };
+};
+var makeItem = function (item, ratio) {
+    return __assign(__assign({}, item), { imageMaxHeight: remsToPixels(item.imageMaxHeight, ratio), imageMinHeight: remsToPixels(item.imageMinHeight, ratio), imagePadding: remsToPixels(item.imagePadding, ratio), maxWidth: remsToPixels(item.maxWidth, ratio), padding: remsToPixels(item.padding, ratio) });
+};
+var makeItems = function (item, ratio) {
+    var desktop = item.desktop, mobile = item.mobile;
+    return {
+        desktop: makeItem(desktop, ratio),
+        mobile: makeItem(mobile, ratio)
+    };
+};
+var makeWelcome = function (welcome, ratio) {
+    var titleSize = remsToPixels(welcome.titleSize, ratio);
+    var subtitleSize = remsToPixels(welcome.subtitleSize, ratio);
+    return {
+        textAlign: welcome.textAlign,
+        marginTop: remsToPixels(welcome.marginTop, ratio),
+        marginBottom: remsToPixels(welcome.marginBottom, ratio),
+        titleMarginLeft: remsToPixels(welcome.titleMarginLeft, ratio),
+        titleSize: titleSize,
+        titleLineHeight: makeLineHeight(welcome.titleLineHeight, titleSize, ratio),
+        subtitleSize: subtitleSize,
+        subtitleLineHeight: makeLineHeight(welcome.subtitleLineHeight, subtitleSize, ratio),
+        subtitleMarginTop: remsToPixels(welcome.subtitleMarginTop, ratio)
+    };
+};
+var makeWelcomes = function (welcomes, ratio) {
+    var desktop = welcomes.desktop, mobile = welcomes.mobile;
+    return {
+        desktop: makeWelcome(desktop, ratio),
+        mobile: makeWelcome(mobile, ratio)
+    };
+};
+var DEFAULT_WIDTH = 390;
+var DEFAULT_HEIGHT = 844;
+var makeRatio = function (width, height) {
+    return (width * height) / (DEFAULT_WIDTH * DEFAULT_HEIGHT);
+};
+export var decorateTheme = function (theme, dimensions, responsive) {
+    if (responsive === void 0) { responsive = true; }
+    var width = dimensions.width, height = dimensions.height;
+    var ratio = responsive ? makeRatio(width, height) : 1.0;
+    var border = makeBorder(theme.border, ratio);
+    var buttons = makeButtons(theme.buttons, ratio);
+    var cards = makeCards(theme.cards, ratio);
+    var counts = makeCounts(theme.counts, ratio);
+    var fonts = makeFonts(theme.fonts, theme.lineHeight, ratio);
+    var inputs = makeInputs(theme.inputs, ratio);
+    var item = makeItems(theme.item, ratio);
+    var layout = layoutToPixels(theme.layout, ratio);
+    var lineHeight = makeLineHeight(theme.lineHeight, fonts.sizes.main, ratio);
+    var welcome = makeWelcomes(theme.welcome, ratio);
+    return __assign(__assign({}, theme), { border: border, buttons: buttons, cards: cards, counts: counts, fonts: fonts, inputs: inputs, item: item, lineHeight: lineHeight, layout: layout, welcome: welcome });
+};
+export function hexToRgbA(hex, opacity) {
+    var c;
+    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+        c = hex.substring(1).split('');
+        if (c.length === 3) {
+            c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+        }
+        c = '0x' + c.join('');
+        return ('rgba(' +
+            [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') +
+            ",".concat(opacity, ")"));
+    }
+    return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-tender/store",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "A library of hooks, reducers, utility functions, and types for use with Open Tender applications that utilize our in-store POS API",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",