@flodesk/grain 1.5.1 → 2.1.0

package/README.md

@@ -1,34 +1,35 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Grain design system
 
-## Getting Started
+## Installation
 
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
+```
+npm install @flodesk/grain
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+### Add base styles
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+`base.css` contains all Grain global styles. Import it in the highest component possible so that it's accessible everywhere in the UI.
 
-## Learn More
+```js
+import "@flodesk/grain/es/styles/base.css";
+```
 
-To learn more about Next.js, take a look at the following resources:
+## Usage
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+### Component usage
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+```jsx
+import { Text, Button, Input } from "@flodesk/grain";
 
-## Deploy on Vercel
+<Text>Content</Text>;
+```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### CSS variable usage
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+```css
+.dashboard-header {
+  font-size: var(--grn-text-xl);
+  margin-bottom: var(--grn-space-l);
+  color: var(--grn-color-bodyDimmed);
+}
+```

package/es/components/box/index.js

@@ -0,0 +1,102 @@
+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";
+
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import { getBorder, getColor, getSpace } from '../../utilities';
+import PropTypes from "prop-types";
+import React from "react";
+import { cssVars } from '../../variables';
+import styled from "@emotion/styled";
+import { types } from '../../types';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n  ", ";\n    \n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n"])), function (p) {
+  return getBorder(p.borderSide, p.borderWidth, p.borderColor);
+}, function (p) {
+  return p.paddingTop && "padding-top: ".concat(getSpace(p.paddingTop));
+}, function (p) {
+  return p.paddingBottom && "padding-bottom: ".concat(getSpace(p.paddingBottom));
+}, function (p) {
+  return p.paddingLeft && "padding-left: ".concat(getSpace(p.paddingLeft));
+}, function (p) {
+  return p.paddingRight && "padding-right: ".concat(getSpace(p.paddingRight));
+}, function (p) {
+  return p.marginTop && "margin-top: ".concat(getSpace(p.marginTop));
+}, function (p) {
+  return p.marginBottom && "margin-bottom: ".concat(getSpace(p.marginBottom));
+}, function (p) {
+  return p.marginLeft && "margin-left: ".concat(getSpace(p.marginLeft));
+}, function (p) {
+  return p.marginRight && "margin-right: ".concat(getSpace(p.marginRight));
+}, function (p) {
+  return getColor(p.color);
+}, function (p) {
+  return getColor(p.backgroundColor);
+}, function (p) {
+  return getSpace(p.width);
+}, function (p) {
+  return getSpace(p.height);
+});
+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,
+      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;
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    backgroundColor: backgroundColor,
+    color: color,
+    borderSide: borderSide,
+    borderWidth: borderWidth,
+    borderColor: borderColor,
+    width: width,
+    height: height,
+    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
+  }, children);
+};
+Box.propTypes = {
+  color: types.color,
+  borderSide: types.side,
+  width: types.space,
+  height: types.space,
+  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
+};

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}

@@ -26,7 +26,9 @@
 }
 
 :root {
-  --grn-color-grey8: hsl(0 0% 7%);
+  --grey8-HSL: 0 0% 7%;
+
+  --grn-color-grey8: hsl(var(--grey8-HSL));
   --grn-color-grey7: hsl(0 0% 20%);
   --grn-color-grey6: hsl(0 0% 32%);
   --grn-color-grey5: hsl(0 0% 44%);
@@ -35,12 +37,18 @@
   --grn-color-grey2: hsl(0 0% 87%);
   --grn-color-grey1: hsl(0 0% 96%);
 
+  --grn-color-blue: hsl(218 74% 54%);
+  --grn-color-red: hsl(6 66% 65%);
+
   --grn-color-body: var(--grn-color-grey8);
-  --grn-color-bodyDimmed: hsl(0 0% 7% / 50%);
-  --grn-color-primary: var(--grn-color-grey8);
+  --grn-color-bodyDimmed: hsl(var(--grey8-HSL) / 50%);
+  --grn-color-accent: var(--grn-color-grey8);
   --grn-color-backgroundSecondary: hsl(0 0% 100%);
   --grn-color-background: var(--grn-color-grey1);
-  --grn-color-border: hsl(0 0% 7% / 9%);
+  --grn-color-overlay: hsl(var(--grey8-HSL) / 7%);
+  --grn-color-border: hsl(var(--grey8-HSL) / 9%);
+  --grn-color-selection: var(--grn-color-blue);
+  --grn-color-danger: var(--grn-color-red);
 }
 
 * {

package/es/types/index.js

@@ -0,0 +1,9 @@
+import PropTypes from "prop-types";
+import { cssVars } from "../variables";
+export var types = {
+  color: PropTypes.oneOfType([PropTypes.oneOf(cssVars.colors), PropTypes.string]),
+  space: PropTypes.oneOfType([PropTypes.oneOf(cssVars.spaces), PropTypes.number, PropTypes.string]),
+  side: PropTypes.oneOf(["all", "left", "right", "top", "bottom", "x", "y"]),
+  textSize: PropTypes.oneOfType([PropTypes.oneOf(cssVars.textSizes), PropTypes.number, PropTypes.string]),
+  weight: PropTypes.oneOf(cssVars.weights)
+};

package/es/utilities/index.js

@@ -1,29 +1,63 @@
 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 { cssVars, grnPrefix } 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 (cssVars.colors.includes(color)) {
     return getCssVar("color", color);
   }
 
   return color;
 };
 export var getTextSize = function getTextSize(size) {
-  if (cssVarOptions.textSizes.includes(size)) {
+  if (cssVars.textSizes.includes(size)) {
     return getCssVar("text", size);
   }
 
   return size;
 };
 export var getWeight = function getWeight(weight) {
-  if (cssVarOptions.weights.includes(weight)) {
+  if (cssVars.weights.includes(weight)) {
     return getCssVar("weight", weight);
   }
+};
+export var getSpace = function getSpace(space) {
+  if (isNaN(space)) {
+    if (cssVars.spaces.includes(space)) {
+      return getCssVar("space", space);
+    }
+
+    return space;
+  }
+
+  return u(space);
+};
+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

@@ -31,10 +31,11 @@ for (var step = 1; step < greysAmount + 1; step++) {
 
 export var grnPrefix = "--grn-";
 export var greys = greysArray.reverse();
-export var semanticColors = ["body", "bodyDimmed", "primary", "backgroundSecondary", "background", "border"];
-export var cssVarOptions = {
+export var semanticColors = ["body", "bodyDimmed", "accent", "backgroundSecondary", "background", "overlay", "border", "selection", "danger"];
+export var baseColors = ["blue", "red"];
+export var cssVars = {
   textSizes: ["s", "m", "l", "xl", "xxl"],
   spaces: ["xs", "s", "m", "l", "xl", "xxl"],
   weights: ["normal", "medium", "semiBold"],
-  colors: [].concat(_toConsumableArray(greys), semanticColors)
+  colors: [].concat(_toConsumableArray(greys), baseColors, semanticColors)
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "1.5.1",
+  "version": "2.1.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;
-};