design-system-simplefi
Version:
Design System for SimpleFi Applications
283 lines (264 loc) • 11.7 kB
JavaScript
;
var styled = require('styled-components');
var ramda = require('ramda');
var ramdaAdjunct = require('ramda-adjunct');
var numeral = require('numeral');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var numeral__default = /*#__PURE__*/_interopDefaultLegacy(numeral);
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
exports.__assign = function() {
exports.__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return exports.__assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
}
var BASE_FONT_SIZE = 16;
var BASE_LINE_HEIGHT = BASE_FONT_SIZE * 1.25;
var constants = /*#__PURE__*/Object.freeze({
__proto__: null,
BASE_FONT_SIZE: BASE_FONT_SIZE,
BASE_LINE_HEIGHT: BASE_LINE_HEIGHT
});
var convertValueToRem = ramda.memoizeWith(ramda.identity, ramda.unless(ramdaAdjunct.isString, function (px) { return px / BASE_FONT_SIZE + "rem"; }));
// pxToRem :: (number | string)... -> string
var pxToRem = ramda.pipe(ramdaAdjunct.list, ramda.map(convertValueToRem), ramda.join(' '));
// getColor :: Color -> Props -> string
// Color - any key of 'ColorTypes' (src/theme/colors.enums.ts)
// Props - styled-components props object
var getColor = ramda.curry(function (color, _a) {
var theme = _a.theme;
return ramda.path(['colors', color], theme);
});
// getFontFamily :: Family -> Props -> string
// Family - any key of 'family' (src/theme/typography.ts)
// Props - styled-components props object
var getFontFamily = ramda.curry(function (family, _a) {
var theme = _a.theme;
return ramda.path(['typography', 'family', family], theme);
});
// getFontWeight :: Weight -> Props -> number
// Weight - any key of 'weight' (src/theme/typography.ts)
// Props - styled-components props object
var getFontWeight = ramda.curry(function (weight, _a) {
var theme = _a.theme;
return ramda.path(['typography', 'weight', weight], theme);
});
// getFontSize :: Size -> Props -> string
// Size - any key of 'size' (src/theme/typography.ts)
// Props - styled-components props object
var getFontSize = ramda.curry(function (size, _a) {
var theme = _a.theme;
return ramda.path(['typography', 'size', size], theme);
});
// getLineHeight :: Size -> Props -> string
// Size - any key of 'lineHeight' (src/theme/typography.ts)
// Props - styled-components props object
var getLineHeight = ramda.curry(function (size, _a) {
var theme = _a.theme;
return ramda.path(['typography', 'lineHeight', size], theme);
});
// getBorderRadius :: Props -> string
// Props - styled-components props object
var getBorderRadius = ramda.pipe(ramda.path(['theme', 'borderRadius']), function (radius) { return radius + "px"; });
// getButtonColor :: Type -> Props -> string
// Type - type of color (src/theme/buttons.ts)
// Props - styled-components props object
var getButtonColor = ramda.curry(function (type, _a) {
var variant = _a.variant, color = _a.color, theme = _a.theme;
if (ramdaAdjunct.hasPath(['buttons', variant, color], theme)) {
return ramda.path(['buttons', variant, color, type], theme);
}
// eslint-disable-next-line no-console
console.warn("Desired color variant (variant: \"" + variant + "\", color: \"" + color + "\") is not currently implemented. Using \"primary\" color instead.");
return ramda.path(['buttons', variant, 'primary', type], theme);
});
// getLinkStyle :: Type -> Props -> string
// Type - type of color / decoration
// Props - styled-components props object
var getLinkStyle = ramda.curry(function (type, _a) {
var color = _a.color, theme = _a.theme;
if (ramdaAdjunct.hasPath(['typography', 'links', color], theme)) {
return ramda.path(['typography', 'links', color, type], theme);
}
// eslint-disable-next-line no-console
console.warn("Desired color variant (color: \"" + color + "\") is not currently implemented. Using \"primary\" color instead.");
return ramda.path(['typography', 'links', 'primary', type], theme);
});
// getDepth :: Element -> Props -> string
// Element - any key of 'depth' (src/theme/depths.ts)
// Props - styled-components props object
var getDepth = ramda.curry(function (element, _a) {
var theme = _a.theme;
return ramda.path(['depths', element], theme);
});
// getSpace:: Size -> Props -> string
// Size - any key of 'space' (src/theme/space.ts)
// Props - styled-components props object
var getSpace = ramda.curry(function (size, _a) {
var theme = _a.theme;
return ramda.pipe(ramda.path(['space', size]), pxToRem)(theme);
});
var abbreviateNumber = function (value) {
return numeral__default['default'](value).format('0.[00]a').toUpperCase();
};
var shortenAddress = function (address, chars) {
if (chars === void 0) { chars = 4; }
if (address.length < 10)
return address;
return address.slice(0, chars) + "..." + address.slice(-chars);
};
var SpaceSizes = {
none: 'none',
xxs: 'xxs',
xs: 'xs',
sm: 'sm',
md: 'md',
mdPlus: 'mdPlus',
lg: 'lg',
lgPlus: 'lgPlus',
xl: 'xl',
xlPlus: 'xlPlus',
xxl: 'xxl',
};
var PaddingTypes = {
squish: 'squish',
stretch: 'stretch',
square: 'square',
horizontal: 'horizontal',
vertial: 'vertical',
};
var Padbox_enums = /*#__PURE__*/Object.freeze({
__proto__: null,
PaddingTypes: PaddingTypes
});
var getPaddingSpace = function (_a) {
var _b = _a.paddingSize, paddingSize = _b === void 0 ? SpaceSizes.none : _b, _c = _a.paddingType, paddingType = _c === void 0 ? PaddingTypes.square : _c, theme = _a.theme;
var sizeValue = ramda.path(['space', paddingSize], theme);
switch (paddingType) {
case PaddingTypes.squish:
return [sizeValue / 2, sizeValue];
case PaddingTypes.stretch:
return [sizeValue, sizeValue / 2];
case PaddingTypes.horizontal:
return [0, sizeValue];
case PaddingTypes.vertial:
return [sizeValue, 0];
case PaddingTypes.square:
default:
return [sizeValue];
}
};
// createPadding :: Object -> string
// Object - { paddingSize: keyof typeof space; paddingType: keyof typeof paddingTypes; theme: DefaultTheme; }
var createPadding = ramda.pipe(getPaddingSpace, ramda.apply(pxToRem), ramda.concat('padding: '));
var calculateSpacingValue = function (direction, generic) {
return pxToRem(BASE_LINE_HEIGHT * (ramdaAdjunct.isNumber(direction) ? direction : generic));
};
// createSpacing :: Kind -> Value -> string | string[]
// Kind - 'margin' or 'padding'
// Value - number or 'none' or object
var createSpacing = ramda.curry(function (kind, value) {
if (value === undefined || ramda.isEmpty(value)) {
return undefined;
}
if (value === 'none') {
return kind + ": 0;";
}
if (ramdaAdjunct.isNumber(value)) {
return kind + ": " + pxToRem(BASE_LINE_HEIGHT * value) + ";";
}
var vertical = value.vertical, horizontal = value.horizontal, top = value.top, right = value.right, bottom = value.bottom, left = value.left;
var result = [];
if (ramda.any(ramdaAdjunct.isNotUndefined, [vertical, top])) {
result.push(kind + "-top: " + calculateSpacingValue(top, vertical) + ";");
}
if (ramda.any(ramdaAdjunct.isNotUndefined, [vertical, bottom])) {
result.push(kind + "-bottom: " + calculateSpacingValue(bottom, vertical) + ";");
}
if (ramda.any(ramdaAdjunct.isNotUndefined, [horizontal, left])) {
result.push(kind + "-left: " + calculateSpacingValue(left, horizontal) + ";");
}
if (ramda.any(ramdaAdjunct.isNotUndefined, [horizontal, right])) {
result.push(kind + "-right: " + calculateSpacingValue(right, horizontal) + ";");
}
return result;
});
// createMarginSpacing :: Value -> string | string[]
// Value - number or 'none' or object
var createMarginSpacing = createSpacing('margin');
// createPaddingSpacing :: Value -> string | string[]
// Value - number or 'none' or object
var createPaddingSpacing = createSpacing('padding');
// createSpacings :: Object -> string
// Object - {margin: number or 'none' or object, padding: number or 'none' or object }
var createSpacings = function (_a) {
var margin = _a.margin, padding = _a.padding;
return styled.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n"])), createMarginSpacing(margin), createPaddingSpacing(padding));
};
var templateObject_1;
exports.BASE_FONT_SIZE = BASE_FONT_SIZE;
exports.BASE_LINE_HEIGHT = BASE_LINE_HEIGHT;
exports.Padbox_enums = Padbox_enums;
exports.PaddingTypes = PaddingTypes;
exports.SpaceSizes = SpaceSizes;
exports.__makeTemplateObject = __makeTemplateObject;
exports.__rest = __rest;
exports.__spreadArray = __spreadArray;
exports.abbreviateNumber = abbreviateNumber;
exports.constants = constants;
exports.createMarginSpacing = createMarginSpacing;
exports.createPadding = createPadding;
exports.createPaddingSpacing = createPaddingSpacing;
exports.createSpacing = createSpacing;
exports.createSpacings = createSpacings;
exports.getBorderRadius = getBorderRadius;
exports.getButtonColor = getButtonColor;
exports.getColor = getColor;
exports.getDepth = getDepth;
exports.getFontFamily = getFontFamily;
exports.getFontSize = getFontSize;
exports.getFontWeight = getFontWeight;
exports.getLineHeight = getLineHeight;
exports.getLinkStyle = getLinkStyle;
exports.getSpace = getSpace;
exports.pxToRem = pxToRem;
exports.shortenAddress = shortenAddress;