@flodesk/grain 1.6.0 → 2.2.0

package/README.md

@@ -8,10 +8,10 @@ npm install @flodesk/grain
 
 ### Add base styles
 
-`base-styles.css` contains all Grain global styles. Import it in the highest component possible so that it's accessible everywhere in the UI.
+`base.css` contains all Grain global styles. Import it in the highest component possible so that it's accessible everywhere in the UI.
 
 ```js
-import "@flodesk/grain/es/base-styles.css";
+import "@flodesk/grain/es/styles/base.css";
 ```
 
 ## Usage

package/es/components/box/index.js

@@ -0,0 +1,149 @@
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+var _excluded = ["children", "color", "backgroundColor", "borderSide", "borderWidth", "borderColor", "width", "height", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right"];
+
+var _templateObject;
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.assign.js";
+import { getBorder, getColor, getRadius, getSpace } from '../../utilities';
+import React from "react";
+import styled from "@emotion/styled";
+import { types } from '../../types';
+
+var getSpaceCss = function getSpaceCss(propertyName, propertyValue) {
+  if (propertyValue || propertyValue === 0) {
+    return "".concat(propertyName, ": ").concat(getSpace(propertyValue));
+  }
+};
+
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n    \n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n"])), function (p) {
+  return getBorder(p.borderSide, p.borderWidth, p.borderColor);
+}, function (p) {
+  return getSpaceCss('padding-top', p.paddingTop);
+}, function (p) {
+  return getSpaceCss('padding-bottom', p.paddingBottom);
+}, function (p) {
+  return getSpaceCss('padding-left', p.paddingLeft);
+}, function (p) {
+  return getSpaceCss('padding-right', p.paddingRight);
+}, function (p) {
+  return getSpaceCss('margin-top', p.marginTop);
+}, function (p) {
+  return getSpaceCss('margin-bottom', p.marginBottom);
+}, function (p) {
+  return getSpaceCss('margin-left', p.marginLeft);
+}, function (p) {
+  return getSpaceCss('margin-right', p.marginRight);
+}, function (p) {
+  return getSpaceCss('top', p.top);
+}, function (p) {
+  return getSpaceCss('bottom', p.bottom);
+}, function (p) {
+  return getSpaceCss('left', p.left);
+}, function (p) {
+  return getSpaceCss('right', p.right);
+}, function (p) {
+  return p.position && "position: ".concat(p.position);
+}, function (p) {
+  return getColor(p.color);
+}, function (p) {
+  return getColor(p.backgroundColor);
+}, function (p) {
+  return getSpace(p.width);
+}, function (p) {
+  return getSpace(p.height);
+}, function (p) {
+  return getRadius(p.radius);
+});
+export var Box = function Box(_ref) {
+  var children = _ref.children,
+      color = _ref.color,
+      backgroundColor = _ref.backgroundColor,
+      borderSide = _ref.borderSide,
+      borderWidth = _ref.borderWidth,
+      borderColor = _ref.borderColor,
+      width = _ref.width,
+      height = _ref.height,
+      radius = _ref.radius,
+      padding = _ref.padding,
+      paddingTop = _ref.paddingTop,
+      paddingBottom = _ref.paddingBottom,
+      paddingLeft = _ref.paddingLeft,
+      paddingRight = _ref.paddingRight,
+      paddingX = _ref.paddingX,
+      paddingY = _ref.paddingY,
+      margin = _ref.margin,
+      marginTop = _ref.marginTop,
+      marginBottom = _ref.marginBottom,
+      marginLeft = _ref.marginLeft,
+      marginRight = _ref.marginRight,
+      marginX = _ref.marginX,
+      marginY = _ref.marginY,
+      position = _ref.position,
+      top = _ref.top,
+      bottom = _ref.bottom,
+      left = _ref.left,
+      right = _ref.right,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
+    backgroundColor: backgroundColor,
+    color: color,
+    borderSide: borderSide,
+    borderWidth: borderWidth,
+    borderColor: borderColor,
+    width: width,
+    height: height,
+    radius: radius,
+    paddingTop: padding || paddingY || paddingTop,
+    paddingBottom: padding || paddingY || paddingBottom,
+    paddingLeft: padding || paddingX || paddingLeft,
+    paddingRight: padding || paddingX || paddingRight,
+    marginTop: margin || marginY || marginTop,
+    marginBottom: margin || marginY || marginBottom,
+    marginLeft: margin || marginX || marginLeft,
+    marginRight: margin || marginX || marginRight,
+    position: position,
+    top: top,
+    bottom: bottom,
+    left: left,
+    right: right
+  }, props), children);
+};
+Box.propTypes = {
+  color: types.color,
+  borderSide: types.side,
+  width: types.space,
+  height: types.space,
+  radius: types.radius,
+  padding: types.space,
+  paddingTop: types.space,
+  paddingBottom: types.space,
+  paddingLeft: types.space,
+  paddingRight: types.space,
+  paddingX: types.space,
+  paddingY: types.space,
+  margin: types.space,
+  marginTop: types.space,
+  marginBottom: types.space,
+  marginLeft: types.space,
+  marginRight: types.space,
+  marginX: types.space,
+  marginY: types.space,
+  position: types.position,
+  top: types.space,
+  bottom: types.space,
+  left: types.space,
+  right: types.space
+};

package/es/components/index.js

@@ -1 +1,2 @@
-export { Text } from "./text";
+export { Text } from "./text";
+export { Box } from "./box";

package/es/components/text/index.js

@@ -7,10 +7,9 @@ var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 import { getColor, getTextSize, getWeight } from '../../utilities';
-import PropTypes from 'prop-types';
 import React from "react";
-import { cssVarOptions } from '../../variables';
 import styled from "@emotion/styled";
+import { types } from '../../types';
 var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n"])), function (p) {
   return getTextSize(p.size);
 }, function (p) {
@@ -32,7 +31,7 @@ export var Text = function Text(_ref) {
   }, children);
 };
 Text.propTypes = {
-  size: PropTypes.oneOf(cssVarOptions.textSizes),
-  weight: PropTypes.oneOf(cssVarOptions.weights),
-  color: PropTypes.oneOfType([PropTypes.oneOf(cssVarOptions.weights), PropTypes.string])
+  size: types.textSize,
+  weight: types.weight,
+  color: types.color
 };

package/es/{base-styles.css → styles/base.css}

@@ -25,6 +25,12 @@
   --grn-space-xxl: calc(var(--grn-unit) * 7);
 }
 
+:root {
+  --grn-radius-s: calc(var(--grn-unit) / 2);
+  --grn-radius-m: calc(var(--grn-unit) / 1.33);
+  --grn-radius-l: calc(var(--grn-unit) * 1.25);
+}
+
 :root {
   --grey8-HSL: 0 0% 7%;
 

package/es/types/index.js

@@ -0,0 +1,12 @@
+import "core-js/modules/es.object.keys.js";
+import PropTypes from "prop-types";
+import { vars } from "../variables";
+export var types = {
+  color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
+  space: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string]),
+  side: PropTypes.oneOf(["all", "left", "right", "top", "bottom", "x", "y"]),
+  radius: PropTypes.oneOf(["s", "m", "l"]),
+  position: PropTypes.oneOf(["static", "relative", "fixed", "absolute", "sticky"]),
+  textSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.textSizes)), PropTypes.number, PropTypes.string]),
+  weight: PropTypes.oneOf(Object.keys(vars.weights))
+};

package/es/utilities/index.js

@@ -1,29 +1,68 @@
 import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.string.includes.js";
-import { cssVarOptions, grnPrefix } from "../variables";
+import { grnPrefix, vars } from "../variables";
 export var getCssVarCore = function getCssVarCore(type, value) {
   return "".concat(grnPrefix).concat(type, "-").concat(value);
 };
 export var getCssVar = function getCssVar(type, value) {
   return "var(".concat(getCssVarCore(type, value), ")");
 };
+
+var u = function u(amount) {
+  return "calc(var(--grn-unit) * ".concat(amount, ")");
+};
+
 export var getColor = function getColor(color) {
-  if (cssVarOptions.colors.includes(color)) {
+  if (color in vars.colors) {
     return getCssVar("color", color);
   }
 
   return color;
 };
 export var getTextSize = function getTextSize(size) {
-  if (cssVarOptions.textSizes.includes(size)) {
+  if (size in vars.textSizes) {
     return getCssVar("text", size);
   }
 
   return size;
 };
 export var getWeight = function getWeight(weight) {
-  if (cssVarOptions.weights.includes(weight)) {
+  if (weight in vars.weights) {
     return getCssVar("weight", weight);
   }
+};
+export var getRadius = function getRadius(radius) {
+  if (radius in vars.radiuses) {
+    return getCssVar("radius", radius);
+  }
+};
+export var getSpace = function getSpace(space) {
+  if (isNaN(space)) {
+    if (space in vars.spaces) {
+      return getCssVar("space", space);
+    }
+
+    return space;
+  }
+
+  if (space === 0) return space;
+  return u(space);
+};
+console.log("getSpace", getSpace(0));
+export var getBorder = function getBorder(borderSide) {
+  var borderWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "1px";
+  var borderColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "border";
+  var w = getSpace(borderWidth);
+  var borderSideStyles = {
+    x: "0 ".concat(w),
+    y: "".concat(w, " 0"),
+    all: "".concat(w),
+    top: "".concat(w, " 0 0 0"),
+    right: "0 ".concat(w, " 0 0"),
+    bottom: "0 0 ".concat(w, " 0"),
+    left: "0 0 0 ".concat(w)
+  };
+
+  if (borderSide in borderSideStyles) {
+    return "\n      border-style: solid;\n      border-width: ".concat(borderSideStyles[borderSide], ";\n      border-color: ").concat(getColor(borderColor), ";\n    ");
+  }
 };

package/es/variables/index.js

@@ -1,41 +1,70 @@
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-import "core-js/modules/es.array.reverse.js";
-import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.array.filter.js";
 import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.symbol.iterator.js";
-import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.string.iterator.js";
-import "core-js/modules/web.dom-collections.iterator.js";
-import "core-js/modules/es.array.from.js";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.regexp.exec.js";
-var greysAmount = 8;
-var greysArray = [];
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.define-properties.js";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-for (var step = 1; step < greysAmount + 1; step++) {
-  greysArray.push("grey" + step);
-}
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 export var grnPrefix = "--grn-";
-export var greys = greysArray.reverse();
-export var semanticColors = ["body", "bodyDimmed", "accent", "backgroundSecondary", "background", "overlay", "border", "selection", "danger"];
-export var baseColors = ["blue", "red"];
-export var cssVarOptions = {
-  textSizes: ["s", "m", "l", "xl", "xxl"],
-  spaces: ["xs", "s", "m", "l", "xl", "xxl"],
-  weights: ["normal", "medium", "semiBold"],
-  colors: [].concat(_toConsumableArray(greys), baseColors, semanticColors)
+export var greys = {
+  grey8: "grey8",
+  grey7: "grey7",
+  grey6: "grey6",
+  grey5: "grey5",
+  grey4: "grey4",
+  grey3: "grey3",
+  grey2: "grey2",
+  grey1: "grey1"
+};
+export var semanticColors = {
+  body: "body",
+  bodyDimmed: "bodyDimmed",
+  accent: "accent",
+  backgroundSecondary: "backgroundSecondary",
+  background: "background",
+  overlay: "overlay",
+  border: "border",
+  selection: "selection",
+  danger: "danger"
+};
+export var baseColors = {
+  blue: "blue",
+  red: "red"
+};
+export var vars = {
+  textSizes: {
+    s: "s",
+    m: "m",
+    l: "l",
+    xl: "xl",
+    xxl: "xxl"
+  },
+  spaces: {
+    xs: "xs",
+    s: "s",
+    m: "m",
+    l: "l",
+    xl: "xl",
+    xxl: "xxl"
+  },
+  weights: {
+    normal: "normal",
+    medium: "medium",
+    semiBold: "semiBold"
+  },
+  radiuses: {
+    s: "s",
+    m: "m",
+    l: "l"
+  },
+  colors: _objectSpread(_objectSpread(_objectSpread({}, greys), baseColors), semanticColors)
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "1.6.0",
+  "version": "2.2.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",

package/es/hooks/use-window-size.js

@@ -1,67 +0,0 @@
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.symbol.iterator.js";
-import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.string.iterator.js";
-import "core-js/modules/web.dom-collections.iterator.js";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.array.from.js";
-import "core-js/modules/es.regexp.exec.js";
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-import { useEffect, useState } from "react";
-export function useWindowSize() {
-  var _useState = useState({
-    width: undefined,
-    height: undefined
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      windowSize = _useState2[0],
-      setWindowSize = _useState2[1];
-
-  useEffect(function () {
-    function handleResize() {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-    }
-
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return function () {
-      return window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  return windowSize;
-}
-export var useComputedStyle = function useComputedStyle(ref, property) {
-  var _useState3 = useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      computedValue = _useState4[0],
-      setComputedValue = _useState4[1];
-
-  var windowSize = useWindowSize();
-  useEffect(function () {
-    if (typeof window !== "undefined") {
-      var getStyle = function getStyle(style) {
-        return window.getComputedStyle(ref.current).getPropertyValue(style);
-      };
-
-      setComputedValue(getStyle(property));
-    }
-  }, [windowSize]);
-  return computedValue;
-};