@flodesk/grain 1.0.3 → 1.1.1

package/es/base-styles.css

@@ -0,0 +1,18 @@
+:root {
+  --base: 15px;
+  --ratio: calc(0.2vw + 2px);
+
+  --grn-text-sm: 13px;
+  --grn-text-md: var(--base);
+  --grn-text-lg: calc(var(--grn-text-md) + var(--ratio));
+  --grn-text-xl: calc(var(--grn-text-lg) + var(--ratio));
+  --grn-text-xxl: calc(var(--grn-text-xl) + var(--ratio));
+
+  --grn-weight-normal: 400;
+  --grn-weight-bold: 600;
+}
+
+* {
+  letter-spacing: calc(1.3px - 0.07em);
+  line-height: calc(5px + 1em);
+}

package/es/components/another-test-component/index.js

@@ -0,0 +1,5 @@
+import React from "react";
+export var AnotherTestComponent = function AnotherTestComponent(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("h1", null, children);
+};

package/{src → es}/components/index.js

@@ -1,2 +1,3 @@
 export { TestComponent } from "./test-component";
 export { AnotherTestComponent } from "./another-test-component";
+export { Text } from "./text";

package/es/components/test-component/index.js

@@ -0,0 +1,5 @@
+import React from "react";
+export var TestComponent = function TestComponent(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("button", null, children);
+};

package/es/components/text/index.js

@@ -0,0 +1,33 @@
+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 PropTypes from 'prop-types';
+import React from "react";
+import styled from "@emotion/styled";
+var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  font-size: var(--grn-text-", ");\n  font-weight: var(--grn-weight-", ");\n"])), function (p) {
+  return p.size;
+}, function (p) {
+  return p.weight;
+});
+export var Text = function Text(_ref) {
+  var children = _ref.children,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    size: size,
+    weight: weight
+  }, children);
+};
+var sizes = ['sm', 'md', 'lg', 'xl', 'xxl'];
+var weights = ['normal', 'bold'];
+Text.propTypes = {
+  size: PropTypes.oneOf(sizes),
+  weight: PropTypes.oneOf(weights)
+};

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

@@ -0,0 +1,49 @@
+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;
+}

package/es/index.js

@@ -0,0 +1 @@
+export * from "./components";

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@flodesk/grain",
-  "version": "1.0.3",
+  "version": "1.1.1",
   "description": "Flodesk design system",
-  "module": "src/index.js",
-  "main": "src/index.js",
+  "module": "es/index.js",
   "author": "Flodesk",
   "license": "UNLICENSED",
   "scripts": {
@@ -12,28 +11,40 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "build:es": "del es/* && cross-env NODE_ENV=production babel --config-file ./babel.config.es.js --out-dir es --copy-files src"
   },
   "publishConfig": {
     "access": "public"
   },
   "files": [
-    "src"
+    "es"
   ],
   "dependencies": {
-    "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "core-js": "^3.22.8",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
   "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/plugin-transform-runtime": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
     "@mdx-js/loader": "^2.1.1",
     "@next/mdx": "^12.1.6",
-    "next": "12.1.6",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/gitlab": "^9.3.1",
     "@semantic-release/npm": "^9.0.1",
+    "cross-env": "^7.0.3",
+    "del-cli": "^4.0.1",
     "eslint": "8.16.0",
     "eslint-config-next": "12.1.6",
-    "semantic-release": "^19.0.2",
-    "react-live": "^3.1.0"
+    "next": "12.1.6",
+    "react-live": "^3.1.0",
+    "semantic-release": "^19.0.2"
   }
 }

package/src/components/another-test-component/index.jsx

@@ -1,5 +0,0 @@
-import React from "react"
-
-export const AnotherTestComponent = ({ children }) => (
-  <h1>{children}</h1>
-)

package/src/components/test-component/index.jsx

@@ -1,5 +0,0 @@
-import React from "react"
-
-export const TestComponent = ({ children }) => (
-  <button>{children}</button>
-)

package/src/index.js

@@ -1 +0,0 @@
-export * from "./components";