@cashub/ui 0.4.1 → 0.5.0

package/select/SelectedMultiple.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _fa = require("react-icons/fa");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var SelectedMultiple = function SelectedMultiple(_ref) {
+  var content = _ref.content,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Selected, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      onClick: onClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaTimes, {})
+    }), content]
+  });
+};
+
+var Selected = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  background: var(--color-background4);\n  border-radius: var(--border-radius-l);\n  padding: 0.25rem calc(var(--spacing-xs) + 4px);\n  margin: 4px 10px 4px 0;\n  color: var(--font-on-primary);\n  font-weight: var(--font-normal);\n  word-break: break-all;\n\n  > span {\n    display: flex;\n    align-items: center;\n\n    > svg {\n      margin-right: var(--spacing-xs);\n      color: var(--font-on-primary);\n    }\n  }\n"])));
+
+var _default = SelectedMultiple;
+exports.default = _default;

package/select/SelectedSingle.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var SelectedSingle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: var(--font-on-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+
+SelectedSingle.displayName = 'SelectedSingle';
+var _default = SelectedSingle;
+exports.default = _default;

package/select/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _Select.default;
+  }
+});
+
+var _Select = _interopRequireDefault(require("./Select"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/services/api/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.callApi = void 0;
+
+var _react = require("react");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Create axios instance for set default config
+var numberOfAjaxCallPending = 0;
+
+var callApi = _axios.default.create({
+  baseURL: '/api'
+});
+
+exports.callApi = callApi;
+
+var AxiosInterceptor = function AxiosInterceptor(_ref) {
+  var onBeforeSend = _ref.onBeforeSend,
+      onDone = _ref.onDone,
+      onAllDone = _ref.onAllDone;
+  var countAjaxCall = (0, _react.useCallback)(function () {
+    if (numberOfAjaxCallPending > 0) {
+      numberOfAjaxCallPending--;
+    }
+
+    if (numberOfAjaxCallPending === 0) {
+      onAllDone();
+    }
+  }, [onAllDone]);
+  (0, _react.useEffect)(function () {
+    var requestInterceptor = callApi.interceptors.request.use(function (config) {
+      if (config.global !== false) {
+        numberOfAjaxCallPending++;
+      }
+
+      if (typeof onBeforeSend === 'function') {
+        return onBeforeSend(config);
+      }
+
+      return config;
+    }, function (error) {
+      countAjaxCall();
+      return Promise.reject(error);
+    });
+    var responseInterceptor = callApi.interceptors.response.use(function (response) {
+      if (!response) return response;
+      countAjaxCall();
+
+      if (typeof onDone === 'function') {
+        return onDone(response);
+      }
+
+      return response;
+    }, function (error) {
+      countAjaxCall();
+      return Promise.reject(error);
+    });
+    return function () {
+      callApi.interceptors.request.eject(requestInterceptor);
+      callApi.interceptors.response.eject(responseInterceptor);
+    };
+  }, [onBeforeSend, onDone, countAjaxCall]);
+  return null;
+};
+
+var _default = AxiosInterceptor;
+exports.default = _default;

package/styles/header.style.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var headerStyle = {
+  height: '64px'
+};
+var _default = headerStyle;
+exports.default = _default;

package/styles/sidebar.style.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var sidebarStyle = {
+  close: {
+    width: '72px',
+    height: '100%'
+  },
+  open: {
+    width: '316px',
+    height: '100%'
+  }
+};
+var _default = sidebarStyle;
+exports.default = _default;

package/styles/theme/dark.theme.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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; }
+
+// Currently, some style is all same for all viewport size
+// Common color style
+var colorStyle = {
+  colorWhite: "#ffffff",
+  colorDark: "#000000",
+  colorGrey: "#5b5f6f",
+  colorPrimary: "#597EF7",
+  colorSuccess: "#11D8CD",
+  colorWarning: "#FFCA7A",
+  colorDanger: "#F495A1",
+  colorHover: "rgba(89, 126, 247, 0.2)",
+  colorActive: "rgba(89, 126, 247, 0.2)",
+  scrollBarColor: "rgba(89, 126, 247, 0.3)",
+  bgColor1: "#13142e",
+  bgColor2: "#222143",
+  bgColor3: "#2d2c4c",
+  bgColor4: "#2d2a5d",
+  backdropBg: "rgba(0, 0, 0, 0.5)"
+}; // Common font style
+
+var fontStyle = {
+  fontH1: "2.25rem",
+  fontH2: "1.5rem",
+  fontH3: "1.25rem",
+  fontBody1: "1rem",
+  fontBody2: "0.875rem",
+  fontButton: "0.875rem",
+  fontCaption: "0.75rem",
+  fontFamily: "Helvetica",
+  fontWeightNormal: "400",
+  fontWeightBold: "bold",
+  fontOnPrimary: colorStyle.colorWhite,
+  fontOnSuccess: colorStyle.colorWhite,
+  fontOnWarning: colorStyle.colorWhite,
+  fontOnDanger: colorStyle.colorWhite,
+  fontOnBg: colorStyle.colorWhite,
+  fontMutedColor: "rgba(255, 255, 255, 0.5)"
+}; // Theme stylesheet
+
+var darkTheme = {
+  desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
+    boxShadow: "0px 0px 8px rgba(91, 95, 111, 0.5)",
+    borderColor: "#5b5f6f",
+    borderWidth: "1px",
+    borderRadiusS: "0.5rem",
+    borderRadius: "1rem",
+    borderRadiusL: "2rem",
+    borderRadiusRound: "50%",
+    spacerXS: "0.5rem",
+    spacerS: "1rem",
+    spacer: "1.5rem",
+    spacerL: "2rem"
+  }),
+  tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
+    boxShadow: "0px 0px 8px rgba(91, 95, 111, 0.5)",
+    borderColor: "#5b5f6f",
+    borderWidth: "1px",
+    borderRadiusS: "0.5rem",
+    borderRadius: "1rem",
+    borderRadiusL: "2rem",
+    borderRadiusRound: "50%",
+    spacerXS: "0.5rem",
+    spacerS: "0.75rem",
+    spacer: "1rem",
+    spacerL: "1.25rem"
+  }),
+  mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
+    boxShadow: "0px 0px 8px rgba(91, 95, 111, 0.5)",
+    borderColor: "#5b5f6f",
+    borderWidth: "1px",
+    borderRadiusS: "0.5rem",
+    borderRadius: "1rem",
+    borderRadiusL: "2rem",
+    borderRadiusRound: "50%",
+    spacerXS: "0.5rem",
+    spacerS: "0.75rem",
+    spacer: "1rem",
+    spacerL: "1.25rem"
+  })
+};
+var _default = darkTheme;
+exports.default = _default;

package/styles/theme/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _dark = _interopRequireDefault(require("./dark.theme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var themes = {
+  dark: _dark.default
+};
+var _default = themes;
+exports.default = _default;

package/table/ImageBox.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Logo = _interopRequireDefault(require("./Logo"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var ImageBox = function ImageBox(_ref) {
+  var image = _ref.image,
+      text = _ref.text;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo.default, {
+      image: image,
+      alt: "".concat(text, "'s pic"),
+      round: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Text, {
+      children: text
+    })]
+  });
+};
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > figure {\n    flex: 0 0 auto;\n    margin-right: var(--spacing-xs);\n  }\n"])));
+
+var Text = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+
+var _default = ImageBox;
+exports.default = _default;

package/table/Logo.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ImageFluid = _interopRequireDefault(require("../image/ImageFluid"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Logo = function Logo(_ref) {
+  var image = _ref.image,
+      round = _ref.round,
+      alt = _ref.alt;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Figure, {
+    round: round,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageFluid.default, {
+      crossOrigin: "anonymous",
+      src: image,
+      alt: alt
+    })
+  });
+};
+
+var Figure = _styledComponents.default.figure(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 32px;\n  height: 32px;\n  border-radius: ", ";\n  overflow: hidden;\n"])), function (_ref2) {
+  var round = _ref2.round;
+  return round ? "var(--border-radius-round)" : "var(--border-radius-s)";
+});
+
+var _default = Logo;
+exports.default = _default;

package/table/PermissionTable.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var PermissionTable = _styledComponents.default.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  vertical-align: middle;\n  table-layout: fixed;\n  border: 0;\n"])));
+
+var TH = _styledComponents.default.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: var(--spacing) 0;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n  font-weight: var(--font-bold);\n\n  ", "\n  ", "\n"])), function (_ref) {
+  var clickable = _ref.clickable;
+  return clickable && "cursor: pointer;";
+}, function (_ref2) {
+  var alignCenter = _ref2.alignCenter;
+  return alignCenter && "text-align: center;";
+});
+
+var TD = _styledComponents.default.td(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: var(--spacing) 0;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n\n  &:nth-child(even) {\n    background: var(--color-background1);\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref3) {
+  var clickable = _ref3.clickable;
+  return clickable && "cursor: pointer;";
+}, function (_ref4) {
+  var alignCenter = _ref4.alignCenter;
+  return alignCenter && "text-align: center;";
+}, function (_ref5) {
+  var bold = _ref5.bold;
+  return bold && "font-weight: var(--font-bold);";
+});
+
+var _default = Object.assign(PermissionTable, {
+  TH: TH,
+  TD: TD
+});
+
+exports.default = _default;