diff --git a/.babelrc.json b/.babelrc.json new file mode 100644 index 0000000..26cd960 --- /dev/null +++ b/.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" + ] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5e52727 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/node_modules +package-lock.json diff --git a/README.md b/README.md index 6c879bd..a7856cc 100755 --- a/README.md +++ b/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) ![GitHub issues open](https://img.shields.io/github/issues/@afc-org/react-tailwind.svg) ![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/@afc-org/react-tailwind.svg) +![version](https://img.shields.io/badge/version-0.1.1-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) ![GitHub issues open](https://img.shields.io/github/issues/@afc-org/react-tailwind.svg) ![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/@afc-org/react-tailwind.svg)
@afc-org/react-tailwind
diff --git a/dist/Alert.js b/dist/Alert.js new file mode 100644 index 0000000..13ed235 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/dist/Button.js b/dist/Button.js new file mode 100644 index 0000000..6a4240c --- /dev/null +++ b/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; \ No newline at end of file diff --git a/dist/Dropdown.js b/dist/Dropdown.js new file mode 100644 index 0000000..8688283 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/dist/DropdownItem.js b/dist/DropdownItem.js new file mode 100644 index 0000000..cff2ef2 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/dist/DropdownMenu.js b/dist/DropdownMenu.js new file mode 100644 index 0000000..fa5c108 --- /dev/null +++ b/dist/DropdownMenu.js @@ -0,0 +1,68 @@ +"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 }; } + +var margins = { + top: "mb-1", + bottom: "mt-1", + left: "mr-1", + right: "ml-1" +}; +var colorSchemes = { + black: "bg-black border-gray-900 text-white", + white: "bg-white border-gray-100 text-gray-100", + gray: "bg-gray-500 border-gray-600 text-white", + red: "bg-red-500 border-gray-600 text-white", + orange: "bg-orange-500 border-orange-600 text-white", + yellow: "bg-yellow-500 border-yellow-600 text-white", + green: "bg-green-500 border-green-600 text-white", + teal: "bg-teal-500 border-teal-600 text-white", + blue: "bg-blue-500 border-blue-600 text-white", + indigo: "bg-indigo-500 border-indigo-600 text-white", + purple: "bg-purple-500 border-purple-600 text-white", + pink: "bg-pink-500 border-pink-600 text-white" +}; + +var DropdownMenu = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) { + var placement = _ref.placement, + show = _ref.show, + children = _ref.children, + color = _ref.color; + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", { + ref: ref, + className: (0, _classnames["default"])("absolute left-0 z-50 py-2 text-base text-left list-none border border-solid rounded", colorSchemes[color], margins[placement], { + hidden: !show, + block: show + }) + }, children)); +}); + +DropdownMenu.defaultProps = { + show: false, + placement: "top", + color: "white" +}; +DropdownMenu.propTypes = { + // make the menu hidden or visible + show: _propTypes["default"].bool, + // where the DropdownMenu should be rendered + // NOTE: if there is no place for the dropdown menu to be rendered + // on the choosen placement, PopperJS will rendered it + // where it has place + placement: _propTypes["default"].oneOf(["top", "bottom", "left", "right"]), + // set the background + color: _propTypes["default"].oneOf(["black", "white", "gray", "red", "orange", "yellow", "green", "teal", "blue", "indigo", "purple", "pink"]) +}; +var _default = DropdownMenu; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/DropdownToggle.js b/dist/DropdownToggle.js new file mode 100644 index 0000000..958b816 --- /dev/null +++ b/dist/DropdownToggle.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 text-white active:bg-gray-900", + white: "bg-white text-black active:bg-gray-100", + gray: "bg-gray-500 text-white active:bg-gray-600", + red: "bg-red-500 text-white active:bg-red-600", + orange: "bg-orange-500 text-white active:bg-orange-600", + yellow: "bg-yellow-500 text-white active:bg-yellow-600", + green: "bg-green-500 text-white active:bg-green-600", + teal: "bg-teal-500 text-white active:bg-teal-600", + blue: "bg-blue-500 text-white active:bg-blue-600", + indigo: "bg-indigo-500 text-white active:bg-indigo-600", + purple: "bg-purple-500 text-white active:bg-purple-600", + pink: "bg-pink-500 text-white active:bg-pink-600" +}; + +var DropdownToggle = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) { + var children = _ref.children, + color = _ref.color, + rest = _objectWithoutProperties(_ref, ["children", "color"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", _extends({}, rest, { + ref: ref, + 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)); +}); + +DropdownToggle.defaultProps = { + color: "pink" +}; +DropdownToggle.propTypes = { + // set the background + color: _propTypes["default"].oneOf(["black", "white", "gray", "red", "orange", "yellow", "green", "teal", "blue", "indigo", "purple", "pink"]) +}; +var _default = DropdownToggle; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/Modal.js b/dist/Modal.js new file mode 100644 index 0000000..8e370c5 --- /dev/null +++ b/dist/Modal.js @@ -0,0 +1,89 @@ +"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 _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(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; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +var Modal = /*#__PURE__*/function (_React$Component) { + _inherits(Modal, _React$Component); + + var _super = _createSuper(Modal); + + function Modal() { + _classCallCheck(this, Modal); + + return _super.apply(this, arguments); + } + + _createClass(Modal, [{ + key: "render", + value: function render() { + var _this$props = this.props, + children = _this$props.children, + show = _this$props.show, + rest = _objectWithoutProperties(_this$props, ["children", "show"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({ + className: (0, _classnames["default"])({ + hidden: !show + }, { + "opacity-100": show + }, "opacity-0 z-50 fixed top-0 left-0 w-full h-full overflow-hidden outline-none focus:outline-none transition-opacity duration-75 ease-linear") + }, rest), children), /*#__PURE__*/_react["default"].createElement("div", { + className: (0, _classnames["default"])({ + hidden: !show + }, "opacity-50 fixed inset-0 z-40 bg-black") + })); + } + }]); + + return Modal; +}(_react["default"].Component); + +Modal.defaultProps = { + show: false +}; +Modal.propTypes = { + // send true to it to open the modal + show: _propTypes["default"].bool, + children: _propTypes["default"].node +}; +var _default = Modal; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/ModalBody.js b/dist/ModalBody.js new file mode 100644 index 0000000..047f6c2 --- /dev/null +++ b/dist/ModalBody.js @@ -0,0 +1,34 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +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 ModalBody = function ModalBody(_ref) { + var children = _ref.children, + rest = _objectWithoutProperties(_ref, ["children"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({}, rest, { + className: "relative flex-auto p-4" + }), children)); +}; + +ModalBody.defaultProps = {}; +ModalBody.propTypes = { + children: _propTypes["default"].node +}; +var _default = ModalBody; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/ModalContent.js b/dist/ModalContent.js new file mode 100644 index 0000000..73fc47e --- /dev/null +++ b/dist/ModalContent.js @@ -0,0 +1,34 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +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 ModalContent = function ModalContent(_ref) { + var children = _ref.children, + rest = _objectWithoutProperties(_ref, ["children"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({}, rest, { + className: "relative flex flex-col w-full pointer-events-auto bg-white border border-solid border-gray-600 rounded outline-none focus:outline-none" + }), children)); +}; + +ModalContent.defaultProps = {}; +ModalContent.propTypes = { + children: _propTypes["default"].node +}; +var _default = ModalContent; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/ModalDialog.js b/dist/ModalDialog.js new file mode 100644 index 0000000..8c6277b --- /dev/null +++ b/dist/ModalDialog.js @@ -0,0 +1,48 @@ +"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 sizeSchemes = { + sm: "sm:max-w-xs", + lg: "md:max-w-screen-md", + xl: "md:max-w-screen-md lg:max-w-screen-lg", + "default": "sm:max-w-screen-sm" +}; + +var ModalDialog = function ModalDialog(_ref) { + var children = _ref.children, + size = _ref.size, + rest = _objectWithoutProperties(_ref, ["children", "size"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({}, rest, { + className: (0, _classnames["default"])("transition-transform duration-300 ease-out relative w-auto m-2 pointer-events-none sm:my-8 sm:mx-auto", sizeSchemes[size]) + }), children)); +}; + +ModalDialog.defaultProps = { + size: "default" +}; +ModalDialog.propTypes = { + // size of the modal + size: _propTypes["default"].oneOf(["sm", "lg", "xl", "default"]), + children: _propTypes["default"].node +}; +var _default = ModalDialog; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/ModalFooter.js b/dist/ModalFooter.js new file mode 100644 index 0000000..d44ba7c --- /dev/null +++ b/dist/ModalFooter.js @@ -0,0 +1,34 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +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 ModalFooter = function ModalFooter(_ref) { + var children = _ref.children, + rest = _objectWithoutProperties(_ref, ["children"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({}, rest, { + className: "flex flex-wrap items-center justify-end p-3 border-t border-solid border-gray-300 rounded-b" + }), children)); +}; + +ModalFooter.defaultProps = {}; +ModalFooter.propTypes = { + children: _propTypes["default"].node +}; +var _default = ModalFooter; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/ModalHead.js b/dist/ModalHead.js new file mode 100644 index 0000000..613b664 --- /dev/null +++ b/dist/ModalHead.js @@ -0,0 +1,34 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +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 ModalHead = function ModalHead(_ref) { + var children = _ref.children, + rest = _objectWithoutProperties(_ref, ["children"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({}, rest, { + className: "flex items-start justify-between p-4 border-b border-solid border-gray-300 rounded-t" + }), children)); +}; + +ModalHead.defaultProps = {}; +ModalHead.propTypes = { + children: _propTypes["default"].node +}; +var _default = ModalHead; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/ModalTitle.js b/dist/ModalTitle.js new file mode 100644 index 0000000..33bb7ab --- /dev/null +++ b/dist/ModalTitle.js @@ -0,0 +1,34 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +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 ModalTitle = function ModalTitle(_ref) { + var children = _ref.children, + rest = _objectWithoutProperties(_ref, ["children"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("h5", _extends({}, rest, { + className: "leading-normal" + }), children)); +}; + +ModalTitle.defaultProps = {}; +ModalTitle.propTypes = { + children: _propTypes["default"].node +}; +var _default = ModalTitle; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/Navbar.js b/dist/Navbar.js new file mode 100644 index 0000000..1a09ccd --- /dev/null +++ b/dist/Navbar.js @@ -0,0 +1,66 @@ +"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 text-white", + white: "bg-white text-black", + gray: "bg-gray-600 text-white", + red: "bg-red-600 text-white", + orange: "bg-orange-600 text-white", + yellow: "bg-yellow-600 text-white", + green: "bg-green-600 text-white", + teal: "bg-teal-600 text-white", + blue: "bg-blue-600 text-white", + indigo: "bg-indigo-600 text-white", + purple: "bg-purple-600 text-white", + pink: "bg-pink-600 text-white" +}; + +var Navbar = function Navbar(_ref) { + var children = _ref.children, + color = _ref.color, + menu = _ref.menu, + rest = _objectWithoutProperties(_ref, ["children", "color", "menu"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("nav", _extends({}, rest, { + className: (0, _classnames["default"])(colorSchemes[color], { + "mb-3": !menu + }, { + rounded: menu + }, "flex flex-wrap items-center justify-between px-4 py-2") + }), children)); +}; + +Navbar.defaultProps = { + color: "pink", + menu: false +}; +Navbar.propTypes = { + // if you do not want to use this component as a navbar, + // but as a small menu someplace in your page, + // you can add the menu prop on it + menu: _propTypes["default"].bool, + // set the background 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 = Navbar; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/NavbarBrand.js b/dist/NavbarBrand.js new file mode 100644 index 0000000..da42f99 --- /dev/null +++ b/dist/NavbarBrand.js @@ -0,0 +1,34 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +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 NavbarBrand = function NavbarBrand(_ref) { + var children = _ref.children, + rest = _objectWithoutProperties(_ref, ["children"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("a", _extends({}, rest, { + className: "text-xl inline-block mr-4 py-1 leading-relaxed whitespace-no-wrap cursor-pointer" + }), children)); +}; + +NavbarBrand.defaultProps = {}; +NavbarBrand.propTypes = { + children: _propTypes["default"].node +}; +var _default = NavbarBrand; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/NavbarCollapse.js b/dist/NavbarCollapse.js new file mode 100644 index 0000000..3596b1e --- /dev/null +++ b/dist/NavbarCollapse.js @@ -0,0 +1,131 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +var _classnames2 = _interopRequireDefault(require("classnames")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(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; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +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; } + +var expanSchemes = { + sm: "sm:flex sm:w-auto", + md: "md:flex md:w-auto", + lg: "lg:flex lg:w-auto", + xl: "xl:flex xl:w-auto" +}; + +var NavbarCollapse = /*#__PURE__*/function (_React$Component) { + _inherits(NavbarCollapse, _React$Component); + + var _super = _createSuper(NavbarCollapse); + + function NavbarCollapse(props) { + var _this; + + _classCallCheck(this, NavbarCollapse); + + _this = _super.call(this, props); + + _defineProperty(_assertThisInitialized(_this), "toggleCollapse", function () { + var show = _this.state.show; + + _this.setState({ + show: !show + }); + }); + + _this.state = { + show: _this.props.show + }; + return _this; + } + + _createClass(NavbarCollapse, [{ + key: "componentDidMount", + value: function componentDidMount() { + var _this$props = this.props, + toggler = _this$props.toggler, + controlled = _this$props.controlled; + var element = document.querySelector(toggler); + + if (!controlled) { + element.addEventListener("click", this.toggleCollapse); + } + } + }, { + key: "render", + value: function render() { + var stateShow = this.state.show; + + var _this$props2 = this.props, + children = _this$props2.children, + expand = _this$props2.expand, + propsShow = _this$props2.show, + controlled = _this$props2.controlled, + rest = _objectWithoutProperties(_this$props2, ["children", "expand", "show", "controlled"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({}, rest, { + className: (0, _classnames2["default"])(_defineProperty({}, expanSchemes[expand], expand), { + hidden: controlled && !propsShow || !controlled && !stateShow + }, "flex-grow items-center w-full") + }), children)); + } + }]); + + return NavbarCollapse; +}(_react["default"].Component); + +NavbarCollapse.defaultProps = { + show: false, + controlled: false +}; +NavbarCollapse.propTypes = { + // if you want to controll yourself the opening and closing of the collapse + show: _propTypes["default"].bool, + controlled: _propTypes["default"].bool, + // for controlled version, + // you need to pass this so that the component can be opnened and closed + // it has to come like "#toggler-id", where toggler-id can be any string + toggler: _propTypes["default"].string, + // on which breakpoint should collapse be hidden + expand: _propTypes["default"].oneOf(["sm", "md", "lg", "xl"]), + children: _propTypes["default"].node +}; +var _default = NavbarCollapse; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/NavbarContainer.js b/dist/NavbarContainer.js new file mode 100644 index 0000000..40e0648 --- /dev/null +++ b/dist/NavbarContainer.js @@ -0,0 +1,49 @@ +"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 sizeSchemes = { + sm: "w-full px-4 mx-auto xl:max-w-screen-xl lg:max-w-screen-lg md:max-w-screen-md sm:max-w-screen-sm", + md: "w-full px-4 mx-auto xl:max-w-screen-xl lg:max-w-screen-lg md:max-w-screen-md", + lg: "w-full px-4 mx-auto xl:max-w-screen-xl lg:max-w-screen-lg", + xl: "w-full px-4 mx-auto xl:max-w-screen-xl", + fluid: "w-full px-4 mx-auto" +}; + +var NavbarContainer = function NavbarContainer(_ref) { + var children = _ref.children, + size = _ref.size, + rest = _objectWithoutProperties(_ref, ["children", "size"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({}, rest, { + className: (0, _classnames["default"])(sizeSchemes[size], "container px-4 mx-auto flex flex-wrap items-center justify-between") + }), children)); +}; + +NavbarContainer.defaultProps = { + size: "fluid" +}; +NavbarContainer.propTypes = { + // set how large should the container be + size: _propTypes["default"].oneOf(["sm", "md", "lg", "xl", "fluid"]), + children: _propTypes["default"].node +}; +var _default = NavbarContainer; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/NavbarItem.js b/dist/NavbarItem.js new file mode 100644 index 0000000..c943b66 --- /dev/null +++ b/dist/NavbarItem.js @@ -0,0 +1,30 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +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 NavbarItem = function NavbarItem(_ref) { + var children = _ref.children, + rest = _objectWithoutProperties(_ref, ["children"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", rest, children)); +}; + +NavbarItem.defaultProps = {}; +NavbarItem.propTypes = { + children: _propTypes["default"].node +}; +var _default = NavbarItem; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/NavbarLink.js b/dist/NavbarLink.js new file mode 100644 index 0000000..8134584 --- /dev/null +++ b/dist/NavbarLink.js @@ -0,0 +1,51 @@ +"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 NavbarLink = function NavbarLink(_ref) { + var children = _ref.children, + active = _ref.active, + disabled = _ref.disabled, + rest = _objectWithoutProperties(_ref, ["children", "active", "disabled"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("a", _extends({}, rest, { + className: (0, _classnames["default"])({ + "opacity-100": active + }, { + "opacity-50 pointer-events-none": disabled + }, { + "opacity-75": !active && !disabled + }, "hover:opacity-100 block py-2 px-2 bg-transparent no-underline cursor-pointer") + }), children)); +}; + +NavbarLink.defaultProps = { + active: false, + disabled: false +}; +NavbarLink.propTypes = { + // for active state + active: _propTypes["default"].bool, + // for disabled state + disabled: _propTypes["default"].bool, + children: _propTypes["default"].node +}; +var _default = NavbarLink; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/NavbarNav.js b/dist/NavbarNav.js new file mode 100644 index 0000000..4071a09 --- /dev/null +++ b/dist/NavbarNav.js @@ -0,0 +1,48 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +var _classnames2 = _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 _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; } + +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 expanSchemes = { + sm: "sm:flex-row", + md: "md:flex-row", + lg: "lg:flex-row", + xl: "xl:flex-row" +}; + +var NavbarNav = function NavbarNav(_ref) { + var children = _ref.children, + expand = _ref.expand, + rest = _objectWithoutProperties(_ref, ["children", "expand"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("ul", _extends({}, rest, { + className: (0, _classnames2["default"])(_defineProperty({}, expanSchemes[expand], expand), "flex flex-col list-none pl-0 mb-0") + }), children)); +}; + +NavbarNav.defaultProps = {}; +NavbarNav.propTypes = { + // from which breakpoint should the items be set in row (inline) + expand: _propTypes["default"].oneOf(["sm", "md", "lg", "xl"]), + children: _propTypes["default"].node +}; +var _default = NavbarNav; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/NavbarToggler.js b/dist/NavbarToggler.js new file mode 100644 index 0000000..5402734 --- /dev/null +++ b/dist/NavbarToggler.js @@ -0,0 +1,48 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +var _classnames2 = _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 _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; } + +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 expanSchemes = { + sm: "sm:hidden", + md: "md:hidden", + lg: "lg:hidden", + xl: "xl:hidden" +}; + +var NavbarToggler = function NavbarToggler(_ref) { + var children = _ref.children, + expand = _ref.expand, + rest = _objectWithoutProperties(_ref, ["children", "expand"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", _extends({}, rest, { + className: (0, _classnames2["default"])(_defineProperty({}, expanSchemes[expand], expand), "cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-gray-400 rounded bg-transparent block outline-none focus:outline-none text-gray-300 opacity-50") + }), children)); +}; + +NavbarToggler.defaultProps = {}; +NavbarToggler.propTypes = { + // from which breakpoint should toggler be hidden + expand: _propTypes["default"].oneOf(["sm", "md", "lg", "xl"]), + children: _propTypes["default"].node +}; +var _default = NavbarToggler; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/Popover.js b/dist/Popover.js new file mode 100644 index 0000000..64cb2e0 --- /dev/null +++ b/dist/Popover.js @@ -0,0 +1,158 @@ +"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")); + +var _core = require("@popperjs/core"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +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; } + +var placementSchemes = { + top: "mb-3", + bottom: "mt-3", + right: "ml-3", + left: "mr-3" +}; + +var Popover = /*#__PURE__*/function (_React$Component) { + _inherits(Popover, _React$Component); + + var _super = _createSuper(Popover); + + function Popover(props) { + var _this; + + _classCallCheck(this, Popover); + + _this = _super.call(this, props); + + _defineProperty(_assertThisInitialized(_this), "popperRef", /*#__PURE__*/_react["default"].createRef()); + + _defineProperty(_assertThisInitialized(_this), "popper", void 0); + + _defineProperty(_assertThisInitialized(_this), "togglePopper", function (element) { + var show = _this.state.show; + var placement = _this.props.placement; + + if (!show) { + _this.popper = (0, _core.createPopper)(element, _this.popperRef.current, { + placement: placement + }); + } + + _this.setState({ + show: !show, + placement: _this.popper.state.placement + }); + }); + + var _placement = _this.props.placement; + _this.state = { + show: false, + placement: _placement + }; + return _this; + } + + _createClass(Popover, [{ + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + var _this$props = this.props, + target = _this$props.target, + controlled = _this$props.controlled, + placement = _this$props.placement; + var element = document.querySelector(target); + + if (controlled) { + this.popper = (0, _core.createPopper)(element, this.popperRef.current, { + placement: placement + }); + } else { + element.addEventListener("click", function () { + return _this2.togglePopper(element); + }); + } + } + }, { + key: "render", + value: function render() { + var _this$state = this.state, + stateShow = _this$state.show, + placement = _this$state.placement; + var _this$props2 = this.props, + children = _this$props2.children, + propsShow = _this$props2.show, + controlled = _this$props2.controlled; + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", { + className: (0, _classnames["default"])({ + hidden: controlled && !propsShow || !controlled && !stateShow + }), + ref: this.popperRef + }, /*#__PURE__*/_react["default"].createElement("div", { + className: (0, _classnames["default"])("border-0 block z-50 font-normal leading-normal text-sm text-left no-underline break-words rounded bg-white border border-solid border-gray-400", placementSchemes[placement]), + style: { + maxWidth: "276px" + } + }, children))); + } + }]); + + return Popover; +}(_react["default"].Component); + +Popover.defaultProps = { + placement: "top", + controlled: false, + show: false +}; +Popover.propTypes = { + // target is the ID of the element we want the popover to be associated to + target: _propTypes["default"].string, + // where the Popover should be rendered + // NOTE: if there is no place for the popover 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 popover yourself + // and decide when to show it, and when to close it + // but you will still need to pass the target element + show: _propTypes["default"].bool, + controlled: _propTypes["default"].bool, + children: _propTypes["default"].node +}; +var _default = Popover; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/PopoverBody.js b/dist/PopoverBody.js new file mode 100644 index 0000000..b41e883 --- /dev/null +++ b/dist/PopoverBody.js @@ -0,0 +1,26 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +var PopoverBody = function PopoverBody(_ref) { + var children = _ref.children; + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", { + className: "py-2 px-3 text-gray-900" + }, children)); +}; + +PopoverBody.defaultProps = {}; +PopoverBody.propTypes = { + children: _propTypes["default"].node +}; +var _default = PopoverBody; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/PopoverHead.js b/dist/PopoverHead.js new file mode 100644 index 0000000..50497cf --- /dev/null +++ b/dist/PopoverHead.js @@ -0,0 +1,26 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +var PopoverHead = function PopoverHead(_ref) { + var children = _ref.children; + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("h3", { + className: "font-medium leading-tight py-2 px-3 mb-0 border-b border-solid border-gray-200 rounded-t text-base bg-gray-100" + }, children)); +}; + +PopoverHead.defaultProps = {}; +PopoverHead.propTypes = { + children: _propTypes["default"].node +}; +var _default = PopoverHead; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/TabContainer.js b/dist/TabContainer.js new file mode 100644 index 0000000..ac2c1ab --- /dev/null +++ b/dist/TabContainer.js @@ -0,0 +1,118 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +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; } + +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; } + +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 TabContainer = function TabContainer(_ref) { + var children = _ref.children, + color = _ref.color, + controlled = _ref.controlled, + rest = _objectWithoutProperties(_ref, ["children", "color", "controlled"]); + + var _React$useState = _react["default"].useState(function () { + var newChildren = []; + children.forEach(function (child, index) { + var grandChild = child.props.children; + var targetTabContent = grandChild.props.target; + + var props = _objectSpread(_objectSpread({}, grandChild.props), {}, { + color: color + }); + + if (!controlled) { + props.onClick = function () { + return toggleTabs(targetTabContent); + }; + } + + newChildren.push( /*#__PURE__*/_react["default"].cloneElement(child, { + children: /*#__PURE__*/_react["default"].cloneElement(grandChild, props), + key: index + })); + }); + return newChildren; + }), + _React$useState2 = _slicedToArray(_React$useState, 2), + newChildren = _React$useState2[0], + setNewChildren = _React$useState2[1]; + + if (controlled) { + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("ul", _extends({}, rest, { + className: "flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row" + }), children)); + } + + var toggleTabs = function toggleTabs(tabContentId) { + var tabContent = document.querySelector(tabContentId); + var newChildren = []; + children.forEach(function (child, index) { + var grandChild = child.props.children; + var targetTabContent = grandChild.props.target; + document.querySelector(targetTabContent).classList.add("hidden"); + document.querySelector(targetTabContent).classList.remove("block"); + newChildren.push( /*#__PURE__*/_react["default"].cloneElement(child, { + children: /*#__PURE__*/_react["default"].cloneElement(grandChild, { + color: color, + active: tabContentId === targetTabContent, + onClick: function onClick() { + return toggleTabs(targetTabContent); + } + }), + key: index + })); + }); + setNewChildren(newChildren); + tabContent.classList.add("block"); + tabContent.classList.remove("hidden"); + }; + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("ul", _extends({}, rest, { + className: "flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row" + }), newChildren)); +}; + +TabContainer.defaultProps = { + color: "pink", + controlled: false +}; +TabContainer.propTypes = { + // if you want to controll the behavior yourself + controlled: _propTypes["default"].bool, + // set the background, border and text color for the tab-link + color: _propTypes["default"].oneOf(["black", "white", "gray", "red", "orange", "yellow", "green", "teal", "blue", "indigo", "purple", "pink"]), + children: _propTypes["default"].node +}; +var _default = TabContainer; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/TabContent.js b/dist/TabContent.js new file mode 100644 index 0000000..b43f5c1 --- /dev/null +++ b/dist/TabContent.js @@ -0,0 +1,47 @@ +"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 TabContent = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) { + var children = _ref.children, + id = _ref.id, + active = _ref.active, + rest = _objectWithoutProperties(_ref, ["children", "id", "active"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({}, rest, { + id: id, + className: (0, _classnames["default"])({ + hidden: !active + }, { + block: active + }) + }), children)); +}); + +TabContent.defaultProps = { + active: false +}; +TabContent.propTypes = { + show: _propTypes["default"].bool, + id: _propTypes["default"].string.isRequired, + children: _propTypes["default"].node +}; +var _default = TabContent; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/TabItem.js b/dist/TabItem.js new file mode 100644 index 0000000..a9ec47e --- /dev/null +++ b/dist/TabItem.js @@ -0,0 +1,34 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +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 TabItem = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) { + var children = _ref.children, + rest = _objectWithoutProperties(_ref, ["children"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", _extends({}, rest, { + className: "-mb-px mr-2 last:mr-0 flex-auto text-center" + }), children)); +}); + +TabItem.defaultProps = {}; +TabItem.propTypes = { + children: _propTypes["default"].node +}; +var _default = TabItem; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/TabLink.js b/dist/TabLink.js new file mode 100644 index 0000000..0c63171 --- /dev/null +++ b/dist/TabLink.js @@ -0,0 +1,152 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +var _classnames4 = _interopRequireDefault(require("classnames")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(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 _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; } + +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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +var colorSchemes = { + "default": { + black: "bg-white text-black", + white: "bg-black text-white", + gray: "bg-white text-gray-600", + red: "bg-white text-red-600", + orange: "bg-white text-orange-600", + yellow: "bg-white text-yellow-600", + green: "bg-white text-green-600", + teal: "bg-white text-teal-600", + blue: "bg-white text-blue-600", + indigo: "bg-white text-indigo-600", + purple: "bg-white text-purple-600", + pink: "bg-white text-pink-600" + }, + active: { + black: "bg-black text-white", + white: "bg-white text-black", + gray: "text-white bg-gray-600", + red: "text-white bg-red-600", + orange: "text-white bg-orange-600", + yellow: "text-white bg-yellow-600", + green: "text-white bg-green-600", + teal: "text-white bg-teal-600", + blue: "text-white bg-blue-600", + indigo: "text-white bg-indigo-600", + purple: "text-white bg-purple-600", + pink: "text-white bg-pink-600" + }, + disabled: { + black: "bg-gray-700 text-gray-100", + white: "bg-gray-200 text-gray-400", + gray: "text-gray-100 bg-gray-400", + red: "text-gray-100 bg-red-400", + orange: "text-gray-100 bg-orange-400", + yellow: "text-gray-100 bg-yellow-400", + green: "text-gray-100 bg-green-400", + teal: "text-gray-100 bg-teal-400", + blue: "text-gray-100 bg-blue-400", + indigo: "text-gray-100 bg-indigo-400", + purple: "text-gray-100 bg-purple-400", + pink: "text-gray-100 bg-pink-400" + } +}; + +var TabLink = /*#__PURE__*/function (_React$Component) { + _inherits(TabLink, _React$Component); + + var _super = _createSuper(TabLink); + + function TabLink() { + _classCallCheck(this, TabLink); + + return _super.apply(this, arguments); + } + + _createClass(TabLink, [{ + key: "componentDidMount", + value: function componentDidMount() { + var _this$props = this.props, + target = _this$props.target, + active = _this$props.active; + + if (active) { + var tabContent = document.querySelector(target); + tabContent.classList.add("block"); + tabContent.classList.remove("hidden"); + } + } + }, { + key: "render", + value: function render() { + var _this$props2 = this.props, + children = _this$props2.children, + disabled = _this$props2.disabled, + active = _this$props2.active, + color = _this$props2.color, + target = _this$props2.target, + rest = _objectWithoutProperties(_this$props2, ["children", "disabled", "active", "color", "target"]); + + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("a", _extends({}, rest, { + className: (0, _classnames4["default"])(_defineProperty({}, colorSchemes["default"][color], !active && !disabled), _defineProperty({}, colorSchemes.active[color], active && !disabled), _defineProperty({}, colorSchemes.disabled[color], disabled), { + "pointer-events-none": disabled + }, "block py-2 px-4 no-underline rounded cursor-pointer shadow-lg") + }), children)); + } + }]); + + return TabLink; +}(_react["default"].Component); + +TabLink.defaultProps = { + disabled: false, + active: false, + color: "white" +}; +TabLink.propTypes = { + disabled: _propTypes["default"].bool, + active: _propTypes["default"].bool, + // set the background, border and text color for the tab-link + color: _propTypes["default"].oneOf(["black", "white", "gray", "red", "orange", "yellow", "green", "teal", "blue", "indigo", "purple", "pink"]), + // the tab-content that will be displayed by pressing this tab-link + target: _propTypes["default"].string.isRequired, + children: _propTypes["default"].node +}; +var _default = TabLink; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/Tooltip.js b/dist/Tooltip.js new file mode 100644 index 0000000..5ba3fc5 --- /dev/null +++ b/dist/Tooltip.js @@ -0,0 +1,166 @@ +"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")); + +var _core = require("@popperjs/core"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +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; } + +var placementSchemes = { + top: "mb-3", + bottom: "mt-3", + right: "ml-3", + left: "mr-3" +}; + +var Tooltip = /*#__PURE__*/function (_React$Component) { + _inherits(Tooltip, _React$Component); + + var _super = _createSuper(Tooltip); + + function Tooltip(props) { + var _this; + + _classCallCheck(this, Tooltip); + + _this = _super.call(this, props); + + _defineProperty(_assertThisInitialized(_this), "popperRef", /*#__PURE__*/_react["default"].createRef()); + + _defineProperty(_assertThisInitialized(_this), "popper", void 0); + + _defineProperty(_assertThisInitialized(_this), "togglePopper", function (element) { + var show = _this.state.show; + var placement = _this.props.placement; + + if (!show) { + _this.popper = (0, _core.createPopper)(element, _this.popperRef.current, { + placement: placement + }); + } + + _this.setState({ + show: !show, + placement: _this.popper.state.placement + }); + }); + + var _placement = _this.props.placement; + _this.state = { + show: false, + placement: _placement + }; + return _this; + } + + _createClass(Tooltip, [{ + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + var _this$props = this.props, + target = _this$props.target, + controlled = _this$props.controlled, + placement = _this$props.placement; + var element = document.querySelector(target); + + if (controlled) { + this.popper = (0, _core.createPopper)(element, this.popperRef.current, { + placement: placement + }); + } else { + element.addEventListener("mouseenter", function () { + return _this2.togglePopper(element); + }); + element.addEventListener("mouseleave", function () { + return _this2.togglePopper(element); + }); + } + } + }, { + key: "render", + value: function render() { + var _this$state = this.state, + stateShow = _this$state.show, + placement = _this$state.placement; + var _this$props2 = this.props, + children = _this$props2.children, + propsShow = _this$props2.show, + controlled = _this$props2.controlled; + return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", { + className: (0, _classnames["default"])({ + hidden: controlled && !propsShow || !controlled && !stateShow + }), + ref: this.popperRef + }, /*#__PURE__*/_react["default"].createElement("div", { + className: (0, _classnames["default"])("border-0 block z-50 font-normal leading-normal text-sm text-left no-underline break-words rounded", placementSchemes[placement]), + style: { + maxWidth: "276px" + } + }, /*#__PURE__*/_react["default"].createElement("div", { + className: "py-1 px-2 text-center rounded text-white bg-black", + style: { + maxWidth: "200px" + } + }, children)))); + } + }]); + + return Tooltip; +}(_react["default"].Component); + +Tooltip.defaultProps = { + placement: "top", + controlled: false, + show: false +}; +Tooltip.propTypes = { + // target is the ID of the element we want the tooltip to be associated to + target: _propTypes["default"].string, + // where the Tooltip should be rendered + // NOTE: if there is no place for the tooltip 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 tooltip yourself + // and decide when to show it, and when to close it + // but you will still need to pass the target element + show: _propTypes["default"].bool, + controlled: _propTypes["default"].bool, + children: _propTypes["default"].node +}; +var _default = Tooltip; +exports["default"] = _default; \ No newline at end of file diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..2e9c583 --- /dev/null +++ b/dist/index.js @@ -0,0 +1,239 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +Object.defineProperty(exports, "Alert", { + enumerable: true, + get: function get() { + return _Alert["default"]; + } +}); +Object.defineProperty(exports, "Button", { + enumerable: true, + get: function get() { + return _Button["default"]; + } +}); +Object.defineProperty(exports, "Dropdown", { + enumerable: true, + get: function get() { + return _Dropdown["default"]; + } +}); +Object.defineProperty(exports, "DropdownItem", { + enumerable: true, + get: function get() { + return _DropdownItem["default"]; + } +}); +Object.defineProperty(exports, "DropdownMenu", { + enumerable: true, + get: function get() { + return _DropdownMenu["default"]; + } +}); +Object.defineProperty(exports, "DropdownToggle", { + enumerable: true, + get: function get() { + return _DropdownToggle["default"]; + } +}); +Object.defineProperty(exports, "Modal", { + enumerable: true, + get: function get() { + return _Modal["default"]; + } +}); +Object.defineProperty(exports, "ModalBody", { + enumerable: true, + get: function get() { + return _ModalBody["default"]; + } +}); +Object.defineProperty(exports, "ModalContent", { + enumerable: true, + get: function get() { + return _ModalContent["default"]; + } +}); +Object.defineProperty(exports, "ModalDialog", { + enumerable: true, + get: function get() { + return _ModalDialog["default"]; + } +}); +Object.defineProperty(exports, "ModalFooter", { + enumerable: true, + get: function get() { + return _ModalFooter["default"]; + } +}); +Object.defineProperty(exports, "ModalHead", { + enumerable: true, + get: function get() { + return _ModalHead["default"]; + } +}); +Object.defineProperty(exports, "ModalTitle", { + enumerable: true, + get: function get() { + return _ModalTitle["default"]; + } +}); +Object.defineProperty(exports, "Navbar", { + enumerable: true, + get: function get() { + return _Navbar["default"]; + } +}); +Object.defineProperty(exports, "NavbarBrand", { + enumerable: true, + get: function get() { + return _NavbarBrand["default"]; + } +}); +Object.defineProperty(exports, "NavbarCollapse", { + enumerable: true, + get: function get() { + return _NavbarCollapse["default"]; + } +}); +Object.defineProperty(exports, "NavbarContainer", { + enumerable: true, + get: function get() { + return _NavbarContainer["default"]; + } +}); +Object.defineProperty(exports, "NavbarItem", { + enumerable: true, + get: function get() { + return _NavbarItem["default"]; + } +}); +Object.defineProperty(exports, "NavbarLink", { + enumerable: true, + get: function get() { + return _NavbarLink["default"]; + } +}); +Object.defineProperty(exports, "NavbarNav", { + enumerable: true, + get: function get() { + return _NavbarNav["default"]; + } +}); +Object.defineProperty(exports, "NavbarToggler", { + enumerable: true, + get: function get() { + return _NavbarToggler["default"]; + } +}); +Object.defineProperty(exports, "Popover", { + enumerable: true, + get: function get() { + return _Popover["default"]; + } +}); +Object.defineProperty(exports, "PopoverHead", { + enumerable: true, + get: function get() { + return _PopoverHead["default"]; + } +}); +Object.defineProperty(exports, "PopoverBody", { + enumerable: true, + get: function get() { + return _PopoverBody["default"]; + } +}); +Object.defineProperty(exports, "TabContainer", { + enumerable: true, + get: function get() { + return _TabContainer["default"]; + } +}); +Object.defineProperty(exports, "TabContent", { + enumerable: true, + get: function get() { + return _TabContent["default"]; + } +}); +Object.defineProperty(exports, "TabItem", { + enumerable: true, + get: function get() { + return _TabItem["default"]; + } +}); +Object.defineProperty(exports, "TabLink", { + enumerable: true, + get: function get() { + return _TabLink["default"]; + } +}); +Object.defineProperty(exports, "Tooltip", { + enumerable: true, + get: function get() { + return _Tooltip["default"]; + } +}); + +var _Alert = _interopRequireDefault(require("./Alert.js")); + +var _Button = _interopRequireDefault(require("./Button.js")); + +var _Dropdown = _interopRequireDefault(require("./Dropdown.js")); + +var _DropdownItem = _interopRequireDefault(require("./DropdownItem.js")); + +var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu.js")); + +var _DropdownToggle = _interopRequireDefault(require("./DropdownToggle.js")); + +var _Modal = _interopRequireDefault(require("./Modal.js")); + +var _ModalBody = _interopRequireDefault(require("./ModalBody.js")); + +var _ModalContent = _interopRequireDefault(require("./ModalContent.js")); + +var _ModalDialog = _interopRequireDefault(require("./ModalDialog.js")); + +var _ModalFooter = _interopRequireDefault(require("./ModalFooter.js")); + +var _ModalHead = _interopRequireDefault(require("./ModalHead.js")); + +var _ModalTitle = _interopRequireDefault(require("./ModalTitle.js")); + +var _Navbar = _interopRequireDefault(require("./Navbar.js")); + +var _NavbarBrand = _interopRequireDefault(require("./NavbarBrand.js")); + +var _NavbarCollapse = _interopRequireDefault(require("./NavbarCollapse.js")); + +var _NavbarContainer = _interopRequireDefault(require("./NavbarContainer.js")); + +var _NavbarItem = _interopRequireDefault(require("./NavbarItem.js")); + +var _NavbarLink = _interopRequireDefault(require("./NavbarLink.js")); + +var _NavbarNav = _interopRequireDefault(require("./NavbarNav.js")); + +var _NavbarToggler = _interopRequireDefault(require("./NavbarToggler.js")); + +var _Popover = _interopRequireDefault(require("./Popover.js")); + +var _PopoverHead = _interopRequireDefault(require("./PopoverHead.js")); + +var _PopoverBody = _interopRequireDefault(require("./PopoverBody.js")); + +var _TabContainer = _interopRequireDefault(require("./TabContainer.js")); + +var _TabContent = _interopRequireDefault(require("./TabContent.js")); + +var _TabItem = _interopRequireDefault(require("./TabItem.js")); + +var _TabLink = _interopRequireDefault(require("./TabLink.js")); + +var _Tooltip = _interopRequireDefault(require("./Tooltip.js")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } \ No newline at end of file diff --git a/package.json b/package.json index 1937072..64520a4 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { "name": "@afc-org/react-tailwind", - "version": "0.1.0", + "version": "0.1.1", "description": "Dynamic components for Tailwindcss and ReactJS", - "main": "./src/index.js", + "main": "./dist/index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "build": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && babel src --out-dir dist" }, "repository": { "type": "git", @@ -46,5 +47,28 @@ "prop-types": "15.7.2", "react": "16.13.1", "tailwindcss": "1.3.3" + }, + "devDependencies": { + "@babel/cli": "7.10.1", + "@babel/core": "7.10.2", + "@babel/plugin-proposal-class-properties": "7.10.1", + "@babel/plugin-proposal-decorators": "7.10.1", + "@babel/plugin-proposal-do-expressions": "7.10.1", + "@babel/plugin-proposal-export-default-from": "7.10.1", + "@babel/plugin-proposal-export-namespace-from": "7.10.1", + "@babel/plugin-proposal-function-bind": "7.10.1", + "@babel/plugin-proposal-function-sent": "7.10.1", + "@babel/plugin-proposal-json-strings": "7.10.1", + "@babel/plugin-proposal-logical-assignment-operators": "7.10.1", + "@babel/plugin-proposal-nullish-coalescing-operator": "7.10.1", + "@babel/plugin-proposal-numeric-separator": "7.10.1", + "@babel/plugin-proposal-optional-chaining": "7.10.1", + "@babel/plugin-proposal-pipeline-operator": "7.10.1", + "@babel/plugin-proposal-throw-expressions": "7.10.1", + "@babel/plugin-syntax-class-properties": "7.10.1", + "@babel/plugin-syntax-dynamic-import": "7.8.3", + "@babel/plugin-syntax-import-meta": "7.10.1", + "@babel/preset-env": "7.10.2", + "@babel/preset-react": "7.10.1" } }