design-system-simplefi
Version:
Design System for SimpleFi Applications
251 lines (235 loc) • 10.7 kB
JavaScript
import { css } from 'styled-components';
import { memoizeWith, identity, unless, pipe, map, join, curry, path, apply, concat, isEmpty, any } from 'ramda';
import { isString, list, hasPath, isNumber, isNotUndefined } from 'ramda-adjunct';
import numeral from '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.
***************************************************************************** */
var __assign = function() {
__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 __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 = memoizeWith(identity, unless(isString, function (px) { return px / BASE_FONT_SIZE + "rem"; }));
// pxToRem :: (number | string)... -> string
var pxToRem = pipe(list, map(convertValueToRem), join(' '));
// getColor :: Color -> Props -> string
// Color - any key of 'ColorTypes' (src/theme/colors.enums.ts)
// Props - styled-components props object
var getColor = curry(function (color, _a) {
var theme = _a.theme;
return path(['colors', color], theme);
});
// getFontFamily :: Family -> Props -> string
// Family - any key of 'family' (src/theme/typography.ts)
// Props - styled-components props object
var getFontFamily = curry(function (family, _a) {
var theme = _a.theme;
return 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 = curry(function (weight, _a) {
var theme = _a.theme;
return 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 = curry(function (size, _a) {
var theme = _a.theme;
return 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 = curry(function (size, _a) {
var theme = _a.theme;
return path(['typography', 'lineHeight', size], theme);
});
// getBorderRadius :: Props -> string
// Props - styled-components props object
var getBorderRadius = pipe(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 = curry(function (type, _a) {
var variant = _a.variant, color = _a.color, theme = _a.theme;
if (hasPath(['buttons', variant, color], theme)) {
return 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 path(['buttons', variant, 'primary', type], theme);
});
// getLinkStyle :: Type -> Props -> string
// Type - type of color / decoration
// Props - styled-components props object
var getLinkStyle = curry(function (type, _a) {
var color = _a.color, theme = _a.theme;
if (hasPath(['typography', 'links', color], theme)) {
return 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 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 = curry(function (element, _a) {
var theme = _a.theme;
return path(['depths', element], theme);
});
// getSpace:: Size -> Props -> string
// Size - any key of 'space' (src/theme/space.ts)
// Props - styled-components props object
var getSpace = curry(function (size, _a) {
var theme = _a.theme;
return pipe(path(['space', size]), pxToRem)(theme);
});
var abbreviateNumber = function (value) {
return numeral(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 = 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 = pipe(getPaddingSpace, apply(pxToRem), concat('padding: '));
var calculateSpacingValue = function (direction, generic) {
return pxToRem(BASE_LINE_HEIGHT * (isNumber(direction) ? direction : generic));
};
// createSpacing :: Kind -> Value -> string | string[]
// Kind - 'margin' or 'padding'
// Value - number or 'none' or object
var createSpacing = curry(function (kind, value) {
if (value === undefined || isEmpty(value)) {
return undefined;
}
if (value === 'none') {
return kind + ": 0;";
}
if (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 (any(isNotUndefined, [vertical, top])) {
result.push(kind + "-top: " + calculateSpacingValue(top, vertical) + ";");
}
if (any(isNotUndefined, [vertical, bottom])) {
result.push(kind + "-bottom: " + calculateSpacingValue(bottom, vertical) + ";");
}
if (any(isNotUndefined, [horizontal, left])) {
result.push(kind + "-left: " + calculateSpacingValue(left, horizontal) + ";");
}
if (any(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 css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n"])), createMarginSpacing(margin), createPaddingSpacing(padding));
};
var templateObject_1;
export { BASE_FONT_SIZE as B, PaddingTypes as P, SpaceSizes as S, __makeTemplateObject as _, __assign as a, createPadding as b, createSpacings as c, __rest as d, getColor as e, getFontFamily as f, getSpace as g, getFontWeight as h, createMarginSpacing as i, getLineHeight as j, getFontSize as k, getButtonColor as l, createPaddingSpacing as m, getBorderRadius as n, getLinkStyle as o, pxToRem as p, __spreadArray as q, Padbox_enums as r, shortenAddress as s, constants as t, createSpacing as u, getDepth as v, abbreviateNumber as w, BASE_LINE_HEIGHT as x };