@cashub/ui 0.48.28 → 0.49.0-beta.0

package/dist/button/Button.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _backgroundColor = _interopRequireDefault(require("../styles/mixin/backgroundColor"));
+var _colorOnBackground = _interopRequireDefault(require("../styles/mixin/colorOnBackground"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Button = _styledComponents.default.button.attrs(() => ({
+  primary: true
+}))`
+  display: flex;
+  align-items: center;
+  border: none;
+  font-size: var(--font-button);
+  line-height: var(--font-body1);
+  cursor: ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 'no-drop' : 'pointer';
+}};
+  border-radius: var(--border-radius-l);
+  padding: 10px var(--spacing-s);
+  text-transform: uppercase;
+
+  > svg {
+    margin-right: calc(var(--spacing-s) - 0.25rem);
+    font-size: var(--font-body1);
+  }
+
+  &:hover {
+    ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return !disabled && (0, _styledComponents.css)`
+          transition: 0.3s;
+          box-shadow: var(--box-shadow);
+          opacity: 0.9;
+        `;
+}}
+  }
+
+  ${_backgroundColor.default}
+  ${_colorOnBackground.default}
+
+  ${_ref3 => {
+  let {
+    secondary
+  } = _ref3;
+  return secondary && (0, _styledComponents.css)`
+      background: var(--color-background2);
+      color: var(--font-on-background);
+    `;
+}}
+
+  ${_ref4 => {
+  let {
+    reverse
+  } = _ref4;
+  return reverse && (0, _styledComponents.css)`
+      background: var(--color-background1);
+      color: var(--font-on-background);
+    `;
+}}
+
+  ${_ref5 => {
+  let {
+    disabled
+  } = _ref5;
+  return disabled && (0, _styledComponents.css)`
+      opacity: 0.5;
+    `;
+}}
+
+  ${_ref6 => {
+  let {
+    iconOnly
+  } = _ref6;
+  return iconOnly && (0, _styledComponents.css)`
+      padding: 10px;
+
+      > svg {
+        margin-right: 0;
+      }
+    `;
+}}
+
+  ${_ref7 => {
+  let {
+    fullWidth
+  } = _ref7;
+  return fullWidth && 'width: 100%;';
+}}
+
+  ${_ref8 => {
+  let {
+    alignCenter
+  } = _ref8;
+  return alignCenter && 'justify-content: center;';
+}}
+
+  ${_ref9 => {
+  let {
+    filterFocus
+  } = _ref9;
+  return filterFocus && (0, _styledComponents.css)`
+      border: 2px solid var(--color-danger);
+    `;
+}}
+
+  ${_ref10 => {
+  let {
+    variant,
+    selected
+  } = _ref10;
+  return variant === 'outline' && (0, _styledComponents.css)`
+      background: ${selected ? 'var(--color-primary)' : 'transparent'};
+      color: ${selected ? 'var(--font-on-primary)' : 'var(--color-primary)'};
+      border: 1px solid var(--color-primary);
+      padding: 4px var(--spacing-s);
+      text-transform: none;
+
+      &:hover {
+        box-shadow: none;
+      }
+    `;
+}}
+
+  ${_ref11 => {
+  let {
+    variant
+  } = _ref11;
+  return variant === 'link' && (0, _styledComponents.css)`
+      font-size: var(--font-body1);
+      background: transparent;
+      color: var(--color-primary);
+      border: none;
+      padding: 0;
+      text-decoration: underline;
+      text-transform: none;
+      &:hover {
+        opacity: 0.8;
+        box-shadow: none;
+      }
+    `;
+}}
+`;
+var _default = exports.default = Button;

package/dist/button/ButtonGroup.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ButtonGroup = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+
+  > button:not(:first-child),
+  *:not(:first-child) {
+    margin-left: var(--spacing-s);
+  }
+
+  ${_ref => {
+  let {
+    alignCenter
+  } = _ref;
+  return alignCenter && 'justify-content: center;';
+}}
+
+  ${_ref2 => {
+  let {
+    alignRight
+  } = _ref2;
+  return alignRight && 'justify-content: flex-end;';
+}}
+
+  ${_ref3 => {
+  let {
+    marginBottom
+  } = _ref3;
+  return marginBottom && 'margin-bottom: var(--spacing);';
+}}
+
+  ${_ref4 => {
+  let {
+    vertical
+  } = _ref4;
+  return vertical && `
+    flex-direction: column;
+
+    > button,
+    > * {
+      margin-left: 0 !important;
+      margin-bottom: var(--spacing-s);
+    }
+  `;
+}}
+
+  ${_ref5 => {
+  let {
+    height100
+  } = _ref5;
+  return height100 && 'height: 100%;';
+}}
+`;
+var _default = exports.default = ButtonGroup;

package/dist/button/IconButton.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const IconButton = _styledComponents.default.div.attrs(() => ({
+  role: 'button'
+}))`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  transition: 0.3s;
+  position: relative;
+  border-radius: var(--border-radius-l);
+  color: ${_ref => {
+  let {
+    disabled,
+    onHeader
+  } = _ref;
+  if (disabled) return 'var(--color-grey)';
+  if (onHeader) return 'var(--color-icon-header)';
+  return 'var(--font-on-background)';
+}};
+  cursor: ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled ? 'no-drop' : 'pointer';
+}};
+  margin: auto;
+  ${_ref3 => {
+  let {
+    size
+  } = _ref3;
+  return size === 'small' && (0, _styledComponents.css)`
+      width: 32px;
+      height: 32px;
+    `;
+}}
+  &:hover {
+    ${_ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  return !disabled && 'background: var(--color-hover)';
+}}
+  }
+  > svg {
+    font-size: 1.5rem;
+    ${_ref5 => {
+  let {
+    size
+  } = _ref5;
+  return size === 'small' && 'font-size: 1rem;';
+}}
+    ${_ref6 => {
+  let {
+    size
+  } = _ref6;
+  return size === 'large' && 'font-size: 2rem;';
+}}
+  }
+`;
+var _default = exports.default = IconButton;

package/dist/button/ScrollToTopButton.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _md = require("react-icons/md");
+var _Button = _interopRequireDefault(require("./Button"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ScrollToTopButton = () => {
+  const [$display, setDisplay] = (0, _react.useState)(false);
+  const toggleVisible = () => {
+    const scrolled = window.pageYOffset;
+    scrolled === 0 ? setDisplay(false) : setDisplay(true);
+  };
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  };
+  (0, _react.useEffect)(() => {
+    window.addEventListener('scroll', toggleVisible);
+    return () => {
+      window.removeEventListener('scroll', toggleVisible);
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledScrollToTopButton, {
+    onClick: scrollToTop,
+    $display: $display,
+    iconOnly: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdOutlineArrowBackIosNew, {})
+  });
+};
+const StyledScrollToTopButton = (0, _styledComponents.default)(_Button.default)`
+  position: fixed;
+  bottom: var(--spacing);
+  right: var(--spacing);
+  display: ${_ref => {
+  let {
+    $display
+  } = _ref;
+  return $display ? 'flex' : 'none';
+}};
+  z-index: 30;
+
+  > svg {
+    transform: rotate(90deg);
+  }
+`;
+var _default = exports.default = ScrollToTopButton;

package/dist/callout/Callout.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Callout = _styledComponents.default.div`
+  padding: var(--spacing);
+  border-radius: var(--border-radius);
+  background: var(--color-background3);
+  margin-bottom: var(--spacing);
+`;
+const Body = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+`;
+const Content = _styledComponents.default.div`
+  flex: 2;
+`;
+const Title = _styledComponents.default.h3`
+  font-size: var(--font-h3);
+  font-weight: 500;
+  color: var(--font-on-background);
+  margin-bottom: var(--border-radius);
+`;
+const Description = _styledComponents.default.p`
+  font-size: var(--font-body1);
+  line-height: 1.5;
+  color: var(--font-on-mute);
+  padding-right: var(--spacing);
+  font-weight: 400;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const Action = _styledComponents.default.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+`;
+var _default = exports.default = Object.assign(Callout, {
+  Body,
+  Content,
+  Title,
+  Description,
+  Action
+});

package/dist/chart/BarChart.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = require("styled-components");
+var _reactChartjs = require("react-chartjs-2");
+var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
+var _padEmptyChartBar = _interopRequireDefault(require("./utils/padEmptyChartBar"));
+var _yAxisTopTitlePlugin = _interopRequireDefault(require("./utils/yAxisTopTitlePlugin"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BarChart = _ref => {
+  let {
+    height = 300,
+    data,
+    options = {},
+    ...props
+  } = _ref;
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
+
+  // fix: read value from theme
+  _reactChartjs.defaults.font.family = theme.fontFamily;
+  _reactChartjs.defaults.font.size = 16;
+  _reactChartjs.defaults.color = theme.fontOnBg;
+  _reactChartjs.defaults.plugins.tooltip.external = (0, _customTooltip.default)(theme);
+  const customOptions = (0, _react.useMemo)(() => {
+    const {
+      yAxisTopTitle,
+      tooltips = {}
+    } = options;
+    return {
+      onlyFirstTooltips: options.onlyFirstTooltips === undefined ? true : options.onlyFirstTooltips,
+      maxBarNumber: options.maxBarNumber === undefined ? 5 : options.maxBarNumber,
+      stacked: options.stacked === undefined ? true : options.stacked,
+      suggestedMax: options.suggestedMax === undefined ? 10 : options.suggestedMax,
+      showLegend: options.showLegend === undefined ? false : options.showLegend,
+      rotateLabel: options.rotateLabel === undefined ? true : options.rotateLabel,
+      yAxisTopTitle: yAxisTopTitle ? yAxisTopTitle : '',
+      tooltipLabelPostfix: tooltips.labelPostfix || ''
+    };
+  }, [options]);
+  const defaultOptions = (0, _react.useMemo)(() => {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      aspectRatio: 1,
+      interaction: {
+        mode: 'nearest',
+        intersect: false
+      },
+      plugins: {
+        padEmptyChartBar: {
+          maxBarNumber: customOptions.maxBarNumber
+        },
+        legend: {
+          position: 'bottom',
+          display: customOptions.showLegend
+        },
+        tooltip: {
+          enabled: false,
+          intersect: false,
+          filter(context) {
+            return !customOptions.onlyFirstTooltips || context.datasetIndex === 0 && context.label !== 'null';
+          },
+          callbacks: {
+            title(context) {
+              return context[0] ? context[0].label.match(/(.{1,20})/g) : '';
+            },
+            label(context) {
+              const tooltipLabel = context.dataset.tooltipLabels?.[context.dataIndex];
+              if (tooltipLabel !== undefined) {
+                return `${context.dataset.label}: ${tooltipLabel}`;
+              }
+              const label = context.dataset.data[context.dataIndex];
+              if (context.dataset.customLabel) {
+                return context.dataset.customLabel[context.dataIndex].toString();
+              }
+              return `${context.dataset.label}: ${label.toString()}${customOptions.tooltipLabelPostfix}`;
+            },
+            labelTextColor(context) {
+              const {
+                color
+              } = context.dataset;
+              if (!color) {
+                return theme.fontOnPrimary;
+              }
+              if (color && Array.isArray(color)) {
+                return color[context.dataIndex % color.length];
+              }
+              return color;
+            }
+          }
+        },
+        yAxisTopTitle: {
+          title: customOptions.yAxisTopTitle
+        }
+      },
+      scales: {
+        x: {
+          stacked: customOptions.stacked,
+          grid: {
+            display: false,
+            drawBorder: false
+          },
+          ticks: {
+            minRotation: customOptions.rotateLabel ? 15 : 0,
+            callback(value) {
+              const label = this.getLabelForValue(value);
+              return label && label.length > 11 ? `${label.substr(0, 11)}...` : label;
+            }
+          }
+        },
+        y: {
+          beginAtZero: true,
+          suggestedMax: customOptions.suggestedMax,
+          grid: {
+            display: false,
+            drawBorder: false
+          },
+          ticks: {
+            callback(value) {
+              if (value % 1 === 0) {
+                return value;
+              }
+              return null;
+            }
+          }
+        }
+      },
+      layout: {
+        padding: {
+          top: 32
+        }
+      }
+    };
+  }, [customOptions, theme.fontOnPrimary]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Bar, {
+    height: height,
+    data: data,
+    options: defaultOptions,
+    plugins: [_padEmptyChartBar.default, _yAxisTopTitlePlugin.default],
+    ...props
+  });
+};
+var _default = exports.default = BarChart;

package/dist/chart/DoughnutChart.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _reactChartjs = require("react-chartjs-2");
+var _lodash = _interopRequireDefault(require("lodash.uniqueid"));
+var _htmlLegendPlugin = _interopRequireDefault(require("./utils/htmlLegendPlugin"));
+var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
+var _centerTextPlugin = _interopRequireDefault(require("./utils/centerTextPlugin"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const DoughnutChart = _ref => {
+  let {
+    height = 300,
+    data,
+    showCenterText = false,
+    centerTextTitle,
+    ...props
+  } = _ref;
+  const [legendContainerId] = (0, _react.useState)((0, _lodash.default)('legend-container-'));
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
+
+  // fix: read value from theme
+  _reactChartjs.defaults.font.family = theme.fontFamily;
+  _reactChartjs.defaults.font.size = 16;
+  _reactChartjs.defaults.color = theme.fontOnBg;
+  _reactChartjs.defaults.plugins.tooltip.external = (0, _customTooltip.default)(theme);
+  const defaultOptions = (0, _react.useMemo)(() => {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      aspectRatio: 1,
+      plugins: {
+        htmlLegend: {
+          containerID: legendContainerId
+        },
+        legend: {
+          display: false
+        },
+        tooltip: {
+          enabled: false,
+          callbacks: {
+            title(context) {
+              return context[0] ? context[0].label.match(/(.{1,20})/g) : '';
+            },
+            label(context) {
+              const label = context.dataset.data[context.dataIndex];
+              if (context.dataset.customLabel) {
+                return context.dataset.customLabel[context.dataIndex].toString();
+              }
+              return label.toString();
+            },
+            labelTextColor(context) {
+              const {
+                color
+              } = context.dataset;
+              if (!color) {
+                return theme.fontOnPrimary;
+              }
+              if (color && Array.isArray(color)) {
+                return color[context.dataIndex % color.length];
+              }
+              return color;
+            }
+          }
+        },
+        centerText: {
+          display: showCenterText,
+          title: centerTextTitle
+        }
+      }
+    };
+  }, [legendContainerId, theme.fontOnPrimary, showCenterText, centerTextTitle]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Doughnut, {
+        height: height,
+        data: data,
+        options: defaultOptions,
+        plugins: [_htmlLegendPlugin.default, _centerTextPlugin.default],
+        ...props
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LegendWrapper, {
+      id: legendContainerId
+    })]
+  });
+};
+const LegendWrapper = _styledComponents.default.div`
+  .custom-legend-tooltip {
+    position: relative;
+  }
+
+  .custom-legend-tooltip:hover::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    top: calc(1rem + var(--spacing-xs));
+    left: 50%;
+    transform: translateX(-50%);
+    border: 1px solid var(--border-color);
+    color: var(--font-on-background);
+    background: var(--color-background2);
+    box-shadow: var(--box-shadow);
+    border-radius: calc(var(--border-radius) / 2);
+    padding: var(--spacing-xs);
+    font-size: var(--font-body1);
+    font-weight: var(--font-normal);
+    text-align: center;
+    width: max-content;
+    max-width: 50vw;
+  }
+`;
+var _default = exports.default = DoughnutChart;