Followed excellent tutorial by https://medium.com/@tomasz.fiechowski/…

…building-a-react-components-library-2e116df187b5
fwestling · Jul 21, 2020 · d02001a · d02001a
commit d02001a
Show file tree

Hide file tree

Showing 22 changed files with 15,325 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [["module-resolver", { "root": ["./src"] }]]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+node_modules
diff --git a/dist-docs/build/bundle.ad4e90f4.js b/dist-docs/build/bundle.ad4e90f4.js
diff --git a/dist-docs/build/bundle.ad4e90f4.js.LICENSE.txt b/dist-docs/build/bundle.ad4e90f4.js.LICENSE.txt
@@ -0,0 +1,63 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+ * @overview es6-promise - a tiny implementation of Promises/A+.
+ * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
+ * @license   Licensed under MIT license
+ *            See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
+ * @version   v4.2.8+1e68dce6
+ */
+
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
+/*!
+ * regjsgen 0.5.2
+ * Copyright 2014-2020 Benjamin Tan <https://ofcr.se/>
+ * Available under the MIT license <https://github.com/bnjmnt4n/regjsgen/blob/master/LICENSE-MIT.txt>
+ */
+
+/*! https://mths.be/regenerate v1.4.1 by @mathias | MIT license */
+
+/**
+ * A better abstraction over CSS.
+ *
+ * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
+ * @website https://github.com/cssinjs/jss
+ * @license MIT
+ */
+
+/** @license React v0.19.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
diff --git a/dist-docs/index.html b/dist-docs/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>React Components Library</title>
+  </head>
+  <body>
+    <div id="rsg-root"></div>
+    <script src="build/bundle.ad4e90f4.js"></script>
+  </body>
+</html>
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  setupFilesAfterEnv: ["./src/setupTests.js"],
+};
diff --git a/lib/index.es.js b/lib/index.es.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
+
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
+    }
+  }));
+}
+
+function _templateObject3() {
+  var data = _taggedTemplateLiteral(["\n  background: #5cdb95;\n  color: #05385b;\n"]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n  border: none;\n  border-radius: 5px;\n  padding: 10px 20px;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n  text-transform: uppercase;\n  font-size: 1.5em;\n  font-weight: bold;\n  letter-spacing: 4px;\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var font = css(_templateObject());
+var shape = css(_templateObject2());
+var primaryColors = css(_templateObject3());
+
+function _templateObject$1() {
+  var data = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n"]);
+
+  _templateObject$1 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var Wrapper = styled.button(_templateObject$1(), font, primaryColors, shape);
+
+var Button = function Button(_ref) {
+  var text = _ref.text,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    onClick: onClick
+  }, text);
+};
+
+export { Button };
diff --git a/lib/index.es.min.js b/lib/index.es.min.js
diff --git a/lib/index.js b/lib/index.js
@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = _interopDefault(require('react'));
+var styled = _interopDefault(require('@emotion/styled'));
+var core = require('@emotion/core');
+
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
+    }
+  }));
+}
+
+function _templateObject3() {
+  var data = _taggedTemplateLiteral(["\n  background: #5cdb95;\n  color: #05385b;\n"]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n  border: none;\n  border-radius: 5px;\n  padding: 10px 20px;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n  text-transform: uppercase;\n  font-size: 1.5em;\n  font-weight: bold;\n  letter-spacing: 4px;\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var font = core.css(_templateObject());
+var shape = core.css(_templateObject2());
+var primaryColors = core.css(_templateObject3());
+
+function _templateObject$1() {
+  var data = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n"]);
+
+  _templateObject$1 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var Wrapper = styled.button(_templateObject$1(), font, primaryColors, shape);
+
+var Button = function Button(_ref) {
+  var text = _ref.text,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    onClick: onClick
+  }, text);
+};
+
+exports.Button = Button;
diff --git a/lib/index.min.js b/lib/index.min.js
diff --git a/lib/index.umd.js b/lib/index.umd.js
@@ -0,0 +1,78 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@emotion/styled'), require('@emotion/core')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@emotion/styled', '@emotion/core'], factory) :
+  (global = global || self, factory(global.westreact = {}, global.React, global.styled, global.core));
+}(this, (function (exports, React, styled, core) { 'use strict';
+
+  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
+  styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
+
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
+
+  function _templateObject3() {
+    var data = _taggedTemplateLiteral(["\n  background: #5cdb95;\n  color: #05385b;\n"]);
+
+    _templateObject3 = function _templateObject3() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject2() {
+    var data = _taggedTemplateLiteral(["\n  border: none;\n  border-radius: 5px;\n  padding: 10px 20px;\n"]);
+
+    _templateObject2 = function _templateObject2() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject() {
+    var data = _taggedTemplateLiteral(["\n  text-transform: uppercase;\n  font-size: 1.5em;\n  font-weight: bold;\n  letter-spacing: 4px;\n"]);
+
+    _templateObject = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+  var font = core.css(_templateObject());
+  var shape = core.css(_templateObject2());
+  var primaryColors = core.css(_templateObject3());
+
+  function _templateObject$1() {
+    var data = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n"]);
+
+    _templateObject$1 = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+  var Wrapper = styled.button(_templateObject$1(), font, primaryColors, shape);
+
+  var Button = function Button(_ref) {
+    var text = _ref.text,
+        onClick = _ref.onClick;
+    return /*#__PURE__*/React.createElement(Wrapper, {
+      onClick: onClick
+    }, text);
+  };
+
+  exports.Button = Button;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
diff --git a/lib/index.umd.min.js b/lib/index.umd.min.js