@cashub/ui 0.48.28 → 0.49.0-beta.0

package/dist/chart/LineChart.js

@@ -0,0 +1,146 @@
+"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 _yAxisTopTitlePlugin = _interopRequireDefault(require("./utils/yAxisTopTitlePlugin"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LineChart = _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
+    } = options;
+    return {
+      suggestedMax: options.suggestedMax ? options.suggestedMax : 10,
+      tooltipTitlePrefix: '',
+      tooltipLabelPrefix: '',
+      tooltipLabelPostfix: '',
+      showLegend: options.showLegend === undefined ? false : options.showLegend,
+      yAxisTopTitle: yAxisTopTitle ? yAxisTopTitle : ''
+    };
+  }, [options]);
+  if (options.tooltips) {
+    const tooltipsOptions = options.tooltips;
+    customOptions.tooltipTitlePrefix = tooltipsOptions.titlePrefix || '';
+    customOptions.tooltipLabelPrefix = tooltipsOptions.labelPrefix || '';
+    customOptions.tooltipLabelPostfix = tooltipsOptions.labelPostfix || '';
+  }
+  const defaultOptions = (0, _react.useMemo)(() => {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      aspectRatio: 1,
+      interaction: {
+        mode: 'nearest',
+        intersect: false
+      },
+      plugins: {
+        legend: {
+          display: customOptions.showLegend
+        },
+        tooltip: {
+          enabled: false,
+          intersect: false,
+          filter(context) {
+            return context.label !== 'null';
+          },
+          callbacks: {
+            title(context) {
+              const content = context[0] ? context[0].label.match(/(.{1,20})/g) : '';
+              return `${customOptions.tooltipTitlePrefix}${content}`;
+            },
+            label(context) {
+              const datasetLabel = context.dataset.label || '';
+              const tooltipLabel = context.dataset.tooltipLabels?.[context.dataIndex];
+              if (tooltipLabel !== undefined) {
+                return datasetLabel ? `${datasetLabel}: ${tooltipLabel}` : `${tooltipLabel}`;
+              }
+              const content = context.dataset.data[context.dataIndex].toString();
+              return datasetLabel ? `${datasetLabel}: ${customOptions.tooltipLabelPrefix}${content}${customOptions.tooltipLabelPostfix}` : `${customOptions.tooltipLabelPrefix}${content}${customOptions.tooltipLabelPostfix}`;
+            },
+            labelColor(context) {
+              const {
+                borderColor
+              } = context.dataset;
+              return {
+                borderColor,
+                backgroundColor: borderColor
+              };
+            },
+            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: {
+          grid: {
+            display: false,
+            drawBorder: false
+          }
+        },
+        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.Line, {
+    height: height,
+    data: data,
+    options: defaultOptions,
+    plugins: [_yAxisTopTitlePlugin.default],
+    ...props
+  });
+};
+var _default = exports.default = LineChart;

package/dist/chart/SingleBarChart.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _backgroundColor = _interopRequireDefault(require("../styles/mixin/backgroundColor"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SingleBarChart = _styledComponents.default.div.attrs(() => ({
+  primary: true
+}))`
+  position: relative;
+  width: 100%;
+  height: 1rem;
+  border-radius: var(--border-radius);
+  background: var(--color-background3);
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: ${_ref => {
+  let {
+    percentage
+  } = _ref;
+  return percentage;
+}}%;
+    border-radius: var(--border-radius);
+    top: 0;
+    bottom: 0;
+
+    ${_backgroundColor.default}
+  }
+
+  ${_ref2 => {
+  let {
+    marginTop
+  } = _ref2;
+  return marginTop && 'margin-top: var(--spacing-s)';
+}}
+`;
+var _default = exports.default = SingleBarChart;

package/dist/chart/utils/centerTextPlugin.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactChartjs = require("react-chartjs-2");
+const centerTextPlugin = {
+  id: 'centerText',
+  beforeDraw: chart => {
+    const {
+      options,
+      data
+    } = chart.config;
+    const config = options.plugins.centerText;
+    if (!config || !config.display) {
+      return;
+    }
+    const {
+      ctx,
+      chartArea: {
+        top,
+        width,
+        height
+      }
+    } = chart;
+    ctx.save();
+
+    // calculate center position
+    const centerX = width / 2;
+    const centerY = height / 2 + top;
+
+    // font settings
+    const {
+      font,
+      color
+    } = _reactChartjs.defaults;
+    const {
+      family,
+      size,
+      lineHeight
+    } = font;
+    const offset = size * lineHeight / 2;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillStyle = color;
+    const {
+      title
+    } = config;
+    if (title) {
+      ctx.font = `bold ${size}px ${family}`;
+      ctx.fillText(title, centerX, centerY - offset);
+    }
+    const total = data.datasets[0].data.reduce((total, current) => {
+      return total + current;
+    }, 0);
+    ctx.font = `${size}px ${family}`;
+    ctx.fillText(total.toLocaleString(), centerX, centerY + (title ? offset : 0));
+    ctx.restore();
+  }
+};
+var _default = exports.default = centerTextPlugin;

package/dist/chart/utils/customTooltip.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const customTooltip = theme => {
+  // optimize: render in react way
+  return function (context) {
+    // Tooltip Element
+    let tooltipEl = document.getElementById('chartjs-tooltip');
+
+    // Create element on first render
+    if (!tooltipEl) {
+      tooltipEl = document.createElement('div');
+      tooltipEl.id = 'chartjs-tooltip';
+      tooltipEl.innerHTML = '<table></table>';
+      document.body.appendChild(tooltipEl);
+    }
+
+    // Hide tooltip, if no tooltip or no data
+    const tooltipModel = context.tooltip;
+    if (!tooltipModel || !tooltipModel.dataPoints || !tooltipModel.dataPoints[0] || tooltipModel.opacity === 0) {
+      tooltipEl.style.display = 'none';
+      return;
+    }
+
+    // Set caret Position
+    tooltipEl.classList.remove('above', 'below', 'no-transform');
+    if (tooltipModel.yAlign) {
+      tooltipEl.classList.add(tooltipModel.yAlign);
+    } else {
+      tooltipEl.classList.add('no-transform');
+    }
+
+    // Set Text
+    if (tooltipModel.body) {
+      const titleLines = tooltipModel.title || [];
+      const bodyLines = tooltipModel.body.map(bodyItem => {
+        return bodyItem.lines || [];
+      });
+      let innerHtml = '<thead>';
+      titleLines.forEach(title => {
+        innerHtml += `<tr><th>${title}</th></tr>`;
+      });
+      innerHtml += '</thead><tbody>';
+      bodyLines.forEach(body => {
+        if (Array.isArray(body)) {
+          body.forEach(line => {
+            innerHtml += `<tr><td>${line}</td></tr>`;
+          });
+        } else {
+          innerHtml += `<tr><td>${body}</td></tr>`;
+        }
+      });
+      innerHtml += '</tbody>';
+      const tableRoot = tooltipEl.querySelector('table');
+      tableRoot.innerHTML = innerHtml;
+    }
+
+    // `this` will be the overall tooltip
+    const position = context.chart.canvas.getBoundingClientRect();
+
+    // Display, position, and set styles for font
+    tooltipEl.style.fontFamily = theme.fontFamily;
+    tooltipEl.style.fontSize = theme.fontBody1;
+    tooltipEl.style.display = 'block';
+    tooltipEl.style.position = 'absolute';
+    tooltipEl.style.boxShadow = theme.boxShadow;
+    [tooltipEl.style.color] = tooltipModel.labelTextColors;
+    tooltipEl.style.background = tooltipModel.labelColors[0].backgroundColor;
+    tooltipEl.style.borderRadius = theme.borderRadius;
+    tooltipEl.style.textAlign = 'center';
+    tooltipEl.style.padding = `${theme.spacerXS} ${theme.spacerS}`;
+    tooltipEl.style.pointerEvents = 'none';
+
+    // determine position is left or right
+    if (tooltipModel.caretX + tooltipEl.offsetWidth <= this._chart.width) {
+      tooltipEl.style.borderTopLeftRadius = 0;
+      tooltipEl.style.left = `${position.left + window.pageXOffset + tooltipModel.caretX + 8}px`;
+    } else {
+      tooltipEl.style.borderTopRightRadius = 0;
+      tooltipEl.style.left = `${position.left + window.pageXOffset + tooltipModel.caretX - tooltipModel.width - 16 * 2}px`;
+    }
+
+    // determine position is top or bottom
+    if (tooltipModel.caretY + tooltipEl.offsetHeight <= this._chart.height) {
+      tooltipEl.style.top = `${position.top + window.pageYOffset + tooltipModel.caretY + 8}px`;
+    } else {
+      tooltipEl.style.top = `${position.top + window.pageYOffset + tooltipModel.caretY - tooltipModel.width - 16 * 2}px`;
+    }
+  };
+};
+var _default = exports.default = customTooltip;

package/dist/chart/utils/htmlLegendPlugin.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactChartjs = require("react-chartjs-2");
+const htmlLegendPlugin = {
+  id: 'htmlLegend',
+  afterUpdate(chart, args, options) {
+    const ul = getOrCreateLegendList(chart, options.containerID);
+
+    // Remove old legend items
+    while (ul.firstChild) {
+      ul.firstChild.remove();
+    }
+
+    // Reuse the built-in legendItems generator
+    const items = chart.options.plugins.legend.labels.generateLabels(chart);
+    items.forEach(item => {
+      const li = document.createElement('li');
+      li.style.alignItems = 'center';
+      li.style.cursor = 'pointer';
+      li.style.display = 'flex';
+      li.style.flexDirection = 'row';
+      li.style.marginLeft = '16px';
+      li.style.marginTop = '16px';
+      li.style.color = _reactChartjs.defaults.color;
+      const [dataset] = chart.data.datasets;
+      const description = dataset.descriptions ? dataset.descriptions[item.index] : '';
+      if (description) {
+        li.setAttribute('data-tooltip', description);
+        li.classList.add('custom-legend-tooltip');
+      }
+      li.onclick = () => {
+        const {
+          type
+        } = chart.config;
+        if (type === 'pie' || type === 'doughnut') {
+          // Pie and doughnut charts only have a single dataset and visibility is per item
+          chart.toggleDataVisibility(item.index);
+        } else {
+          chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
+        }
+        chart.update();
+      };
+
+      // Color box
+      const boxSpan = document.createElement('span');
+      boxSpan.style.background = item.fillStyle;
+      boxSpan.style.borderColor = item.strokeStyle;
+      boxSpan.style.borderWidth = `${item.lineWidth}px`;
+      boxSpan.style.borderStyle = 'solid';
+      boxSpan.style.display = 'inline-block';
+      boxSpan.style.height = '16px';
+      boxSpan.style.marginRight = '8px';
+      boxSpan.style.width = '32px';
+
+      // Text
+      const textContainer = document.createElement('p');
+      textContainer.style.color = item.fontColor;
+      textContainer.style.margin = 0;
+      textContainer.style.padding = 0;
+      textContainer.style.wordBreak = 'break-all';
+      textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
+      const text = document.createTextNode(item.text);
+      textContainer.appendChild(text);
+      li.appendChild(boxSpan);
+      li.appendChild(textContainer);
+      ul.appendChild(li);
+    });
+  }
+};
+const getOrCreateLegendList = (chart, id) => {
+  const legendContainer = document.getElementById(id);
+  let listContainer = legendContainer.querySelector('ul');
+  if (!listContainer) {
+    listContainer = document.createElement('ul');
+    listContainer.style.display = 'flex';
+    listContainer.style.flexDirection = 'row';
+    listContainer.style.flexWrap = 'wrap';
+    listContainer.style.justifyContent = 'center';
+    listContainer.style.margin = 0;
+    listContainer.style.padding = 0;
+    legendContainer.appendChild(listContainer);
+  }
+  return listContainer;
+};
+var _default = exports.default = htmlLegendPlugin;

package/dist/chart/utils/yAxisTopTitlePlugin.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactChartjs = require("react-chartjs-2");
+const yAxisTopTitlePlugin = {
+  id: 'yAxisTopTitle',
+  afterDraw(chart) {
+    const {
+      options
+    } = chart.config;
+    const config = options.plugins.yAxisTopTitle;
+    if (!config || !config.title) {
+      return;
+    }
+    const {
+      title
+    } = config;
+    const {
+      ctx,
+      chartArea,
+      scales
+    } = chart;
+    const yScale = scales.y;
+    if (!yScale) {
+      return;
+    }
+    ctx.save();
+    const {
+      font,
+      color
+    } = _reactChartjs.defaults;
+    const {
+      family,
+      size
+    } = font;
+    ctx.font = `bold ${size}px ${family}`;
+    ctx.fillStyle = color;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    const x = yScale.left;
+    const y = chartArea.top - 24;
+    ctx.fillText(title, x, y);
+    ctx.restore();
+  }
+};
+var _default = exports.default = yAxisTopTitlePlugin;

package/dist/container/FlexContainer.js

@@ -0,0 +1,40 @@
+"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 FlexContainer = _styledComponents.default.div`
+  display: flex;
+
+  ${_ref => {
+  let {
+    marginBottom
+  } = _ref;
+  return marginBottom && 'margin-bottom: var(--spacing-l)';
+}};
+
+  ${_ref2 => {
+  let {
+    wrap
+  } = _ref2;
+  return wrap && 'flex-wrap: wrap';
+}};
+
+  ${_ref3 => {
+  let {
+    alignCenter
+  } = _ref3;
+  return alignCenter && 'align-items: center;';
+}}
+
+  ${_ref4 => {
+  let {
+    spaceBetween
+  } = _ref4;
+  return spaceBetween && 'justify-content: space-between;';
+}}
+`;
+var _default = exports.default = FlexContainer;

package/dist/cropper/Cropper.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+require("cropperjs/dist/cropper.css");
+var _cropperjs = _interopRequireDefault(require("cropperjs"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CropperWrapper = _ref => {
+  let {
+    src,
+    alt = 'picture',
+    width,
+    height,
+    cropBoxResizable = false,
+    onInitialized,
+    dragMode = 'move'
+  } = _ref;
+  const imageRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const node = imageRef.current;
+    if (node !== null) {
+      const cropper = new _cropperjs.default(node, {
+        dragMode,
+        viewMode: 1,
+        initialAspectRatio: 9 / 16,
+        background: true,
+        cropBoxResizable,
+        data: {
+          width,
+          height
+        }
+      });
+      if (onInitialized) {
+        onInitialized(cropper);
+      }
+    }
+    return () => {
+      node?.cropper?.destroy();
+    };
+  }, [onInitialized, dragMode, width, height, cropBoxResizable]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: src,
+      alt: alt,
+      ref: imageRef,
+      crossOrigin: "anonymous"
+    })
+  });
+};
+var _default = exports.default = CropperWrapper;