Merge pull request #25 from afc-org/dev-master

Fix: solve npm bugs

.babelrc.json

@@ -0,0 +1,25 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    ["@babel/plugin-proposal-decorators", {"decoratorsBeforeExport": true}],
+    "@babel/plugin-proposal-do-expressions",
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-function-bind",
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-json-strings",
+    "@babel/plugin-proposal-logical-assignment-operators",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-optional-chaining",
+    ["@babel/plugin-proposal-pipeline-operator", {"proposal": "fsharp"}],
+    "@babel/plugin-proposal-throw-expressions",
+    "@babel/plugin-syntax-class-properties",
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta"
+  ]
+}

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+package-lock.json

README.md

@@ -1,6 +1,6 @@
 # @afc-org/react-tailwind
 
-![version](https://img.shields.io/badge/version-0.1.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) <a href="https://github.com/afc-org/react-tailwind/issues?q=is%3Aopen+is%3Aissue" target="_blank">![GitHub issues open](https://img.shields.io/github/issues/@afc-org/react-tailwind.svg)</a> <a href="https://github.com/afc-org/react-tailwind?q=is%3Aissue+is%3Aclosed" target="_blank">![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/@afc-org/react-tailwind.svg)</a>
+![version](https://img.shields.io/badge/version-0.1.1-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) <a href="https://github.com/afc-org/react-tailwind/issues?q=is%3Aopen+is%3Aissue" target="_blank">![GitHub issues open](https://img.shields.io/github/issues/@afc-org/react-tailwind.svg)</a> <a href="https://github.com/afc-org/react-tailwind?q=is%3Aissue+is%3Aclosed" target="_blank">![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/@afc-org/react-tailwind.svg)</a>
 
 <div align="center"><img src="./assets/logos/reactjs-tailwind-logo.png" alt="@afc-org/react-tailwind" width="300"/></div>
 

dist/Alert.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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; }
+
+var colorSchemes = {
+  black: "bg-black text-gray-200 border-gray-900",
+  white: "bg-white text-gray-600 border-gray-100",
+  gray: "bg-gray-200 text-gray-800 border-gray-300",
+  red: "bg-red-200 text-red-800 border-red-300",
+  orange: "bg-orange-200 text-orange-800 border-orange-300",
+  yellow: "bg-yellow-200 text-yellow-800 border-yellow-300",
+  green: "bg-green-200 text-green-800 border-green-300",
+  teal: "bg-teal-200 text-teal-800 border-teal-300",
+  blue: "bg-blue-200 text-blue-800 border-blue-300",
+  indigo: "bg-indigo-200 text-indigo-800 border-indigo-300",
+  purple: "bg-purple-200 text-purple-800 border-purple-300",
+  pink: "bg-pink-200 text-pink-800 border-pink-300"
+};
+
+var Alert = function Alert(_ref) {
+  var controlled = _ref.controlled,
+      color = _ref.color,
+      icon = _ref.icon,
+      children = _ref.children;
+
+  var _React$useState = _react["default"].useState(true),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      show = _React$useState2[0],
+      setShow = _React$useState2[1];
+
+  var closeAlert = function closeAlert() {
+    setShow(false);
+  };
+
+  if (!show) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("px-5 py-3 border border-solid rounded relative mb-4", colorSchemes[color])
+  }, icon !== "" ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: "text-xl inline-block mr-5 align-middle"
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: icon
+  })) : null, icon ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: "inline-block align-middle mr-8"
+  }, children) : children, controlled ? null : /*#__PURE__*/_react["default"].createElement("button", {
+    className: "absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 outline-none focus:outline-none opacity-50 px-5 py-3 hover:opacity-75 hover:text-black",
+    onClick: closeAlert
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "\xD7")));
+};
+
+Alert.defaultProps = {
+  controlled: false,
+  color: "pink",
+  icon: ""
+};
+Alert.propTypes = {
+  // if set to false, then a closing button will be rendered so that the alert can be closed
+  // if set to true, then the closing button will not be rendered
+  controlled: _propTypes["default"].bool,
+  // set the background, border and text color for the alert
+  color: _propTypes["default"].oneOf(["black", "white", "gray", "red", "orange", "yellow", "green", "teal", "blue", "indigo", "purple", "pink"]),
+  // adds a font icon to the left of the message
+  // for example, if you have included into your project font-awesome free
+  // you could send "fa fa-heart"
+  icon: _propTypes["default"].string,
+  children: _propTypes["default"].node.isRequired
+};
+var _default = Alert;
+exports["default"] = _default;

dist/Button.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+var colorSchemes = {
+  black: "bg-black border border-solid border-gray-900 hover:bg-gray-900 hover:border-gray-800 active:bg-gray-900 active:border-gray-800 text-white",
+  white: "bg-white border border-solid border-gray-100 hover:bg-gray-100 hover:border-gray-200 active:bg-gray-100 active:border-gray-200 text-black",
+  gray: "bg-gray-600 border border-solid border-gray-600 hover:bg-gray-700 hover:border-gray-800 active:bg-gray-700 active:border-gray-800 text-white",
+  red: "bg-red-600 border border-solid border-red-600 hover:bg-red-700 hover:border-red-800 active:bg-red-700 active:border-red-800 text-white",
+  orange: "bg-orange-600 border border-solid border-orange-600 hover:bg-orange-700 hover:border-orange-800 active:bg-orange-700 active:border-orange-800 text-white",
+  yellow: "bg-yellow-600 border border-solid border-yellow-600 hover:bg-yellow-700 hover:border-yellow-800 active:bg-yellow-700 active:border-yellow-800 text-white",
+  green: "bg-green-600 border border-solid border-green-600 hover:bg-green-700 hover:border-green-800 active:bg-green-700 active:border-green-800 text-white",
+  teal: "bg-teal-600 border border-solid border-teal-600 hover:bg-teal-700 hover:border-teal-800 active:bg-teal-700 active:border-teal-800 text-white",
+  blue: "bg-blue-600 border border-solid border-blue-600 hover:bg-blue-700 hover:border-blue-800 active:bg-blue-700 active:border-blue-800 text-white",
+  indigo: "bg-indigo-600 border border-solid border-indigo-600 hover:bg-indigo-700 hover:border-indigo-800 active:bg-indigo-700 active:border-indigo-800 text-white",
+  purple: "bg-purple-600 border border-solid border-purple-600 hover:bg-purple-700 hover:border-purple-800 active:bg-purple-700 active:border-purple-800 text-white",
+  pink: "bg-pink-600 border border-solid border-pink-600 hover:bg-pink-700 hover:border-pink-800 active:bg-pink-700 active:border-pink-800 text-white"
+};
+
+var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var color = _ref.color,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["color", "children"]);
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", _extends({}, rest, {
+    className: (0, _classnames["default"])("rounded font-normal outline-none focus:outline-none align-middle text-base px-3 py-2 leading-tight", colorSchemes[color])
+  }), children));
+});
+
+Button.defaultProps = {
+  color: "pink"
+};
+Button.propTypes = {
+  // set the background, border and text color
+  color: _propTypes["default"].oneOf(["black", "white", "gray", "red", "orange", "yellow", "green", "teal", "blue", "indigo", "purple", "pink"]),
+  children: _propTypes["default"].node
+};
+var _default = Button;
+exports["default"] = _default;

dist/Dropdown.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _core = require("@popperjs/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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; }
+
+var Dropdown = function Dropdown(_ref) {
+  var controlled = _ref.controlled,
+      placement = _ref.placement,
+      children = _ref.children;
+
+  var _React$useState = _react["default"].useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      show = _React$useState2[0],
+      setShow = _React$useState2[1];
+
+  if (controlled) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "relative"
+    }, children);
+  } else {
+    var toggleDropdown = function toggleDropdown() {
+      if (!show) {
+        (0, _core.createPopper)(togglerRef.current, menuRef.current, {
+          placement: placement
+        });
+      }
+
+      setShow(!show);
+    };
+
+    var togglerRef = /*#__PURE__*/_react["default"].createRef();
+
+    var menuRef = /*#__PURE__*/_react["default"].createRef();
+
+    var toggler = /*#__PURE__*/_react["default"].cloneElement(children[0], {
+      onClick: function onClick() {
+        return toggleDropdown();
+      },
+      ref: togglerRef
+    });
+
+    var menu = /*#__PURE__*/_react["default"].cloneElement(children[1], {
+      show: show,
+      ref: menuRef
+    });
+
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "relative"
+    }, toggler, menu));
+  }
+};
+
+Dropdown.defaultProps = {
+  placement: "bottom",
+  controlled: false
+};
+Dropdown.propTypes = {
+  // where the Dropdown should be rendered
+  // NOTE: if there is no place for the dropdown to be rendered
+  //    on the choosen placement, PopperJS will rendered it
+  //    where it has place
+  placement: _propTypes["default"].oneOf(["top", "bottom", "left", "right"]),
+  // if you want to controll the open/close of the DropdownMenu yourself
+  controlled: _propTypes["default"].bool,
+  // when using the uncontrolled version
+  // you need to send exactly two children
+  // - DropdownToggle
+  // and
+  // - DropdownMenu
+  // if you fail to do so, an error will be thrown
+  children: _propTypes["default"].node.isRequired
+};
+var _default = Dropdown;
+exports["default"] = _default;

dist/DropdownItem.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+var DropdownItem = function DropdownItem(_ref) {
+  var divider = _ref.divider,
+      children = _ref.children,
+      disabled = _ref.disabled,
+      rest = _objectWithoutProperties(_ref, ["divider", "children", "disabled"]);
+
+  if (divider) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "h-0 my-2 border border-solid border-t-0 border-gray-900 opacity-25"
+    });
+  }
+
+  var classes = (0, _classnames["default"])("block w-full py-1 px-6 clear-both font-normal whitespace-no-wrap bg-transparent border-0 hover:opacity-75 cursor-pointer", {
+    "text-gray-400 pointer-events-none": disabled
+  });
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("a", _extends({}, rest, {
+    className: classes
+  }), children));
+};
+
+DropdownItem.defaultProps = {
+  divider: false,
+  disabled: false,
+  children: null
+};
+DropdownItem.propTypes = {
+  // this will make the component to be rendered as a divider line
+  divider: _propTypes["default"].bool,
+  // this will make the component to not be clickable
+  disabled: _propTypes["default"].bool,
+  children: _propTypes["default"].node
+};
+var _default = DropdownItem;
+exports["default"] = _default;