@cashub/ui 0.4.1 → 0.5.0

package/billing/__stories__/SectionHeader.stories.js-bak

@@ -0,0 +1,68 @@
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+import {
+  PDFViewer,
+  Document,
+  Page,
+  View,
+  StyleSheet,
+  Font,
+} from '@react-pdf/renderer';
+import BillingSectionHeader from '../SectionHeader';
+import BillingHeader3 from '../Header3';
+import NanumGothicBold from '../../assets/font/nanumGothic/NanumGothic-Bold.ttf';
+import NanumGothicExtraBold from '../../assets/font/nanumGothic/NanumGothic-ExtraBold.ttf';
+import NanumGothicRegular from '../../assets/font/nanumGothic/NanumGothic-Regular.ttf';
+
+export default {
+  title: 'billing/BillingSectionHeader',
+  component: BillingSectionHeader,
+  subComponent: {
+    BillingHeader3,
+  },
+  argTypes: {
+    children: {
+      description: 'A BillingHeader3 component must be passed in.',
+    },
+    inline: { description: 'Style variant' },
+  },
+};
+
+export const Default = (args) => {
+  const theme = useContext(ThemeContext);
+  Font.register({
+    family: 'Nanum Gothic',
+    fonts: [
+      { src: NanumGothicBold },
+      { src: NanumGothicExtraBold },
+      { src: NanumGothicRegular },
+    ],
+  });
+  const styles = StyleSheet.create({
+    page: {
+      family: 'Nanum Gothic',
+      color: '#ffffff',
+      backgroundColor: theme.bgColor2,
+      padding: 8,
+    },
+  });
+
+  return (
+    <PDFViewer style={{ width: '100%' }}>
+      <Document>
+        <Page size='A4' style={styles.page}>
+          <View>
+            <BillingSectionHeader {...args}>
+              <BillingHeader3>BillingHeader3</BillingHeader3>
+              <BillingHeader3>BillingHeader3</BillingHeader3>
+            </BillingSectionHeader>
+          </View>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+};
+
+Default.args = {
+  inline: false,
+};

package/callout/Callout.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+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 Callout = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: var(--spacing);\n  border-radius: var(--border-radius);\n  background: var(--color-background4);\n  margin-bottom: var(--spacing);\n"])));
+
+var Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+
+var Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 2;\n"])));
+
+var Title = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: var(--font-h3);\n  font-weight: 500;\n  color: var(--font-on-background);\n  margin-bottom: var(--border-radius);\n"])));
+
+var Description = _styledComponents.default.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: var(--font-body1);\n  line-height: 1.5;\n  color: var(--font-on-mute);\n  padding-right: var(--spacing);\n  font-weight: 400;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])));
+
+var Action = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: center;\n"])));
+
+var _default = Object.assign(Callout, {
+  Body: Body,
+  Content: Content,
+  Title: Title,
+  Description: Description,
+  Action: Action
+});
+
+exports.default = _default;

package/callout/index.js

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

package/chart/BarChart.js

@@ -0,0 +1,130 @@
+"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/chart/customTooltip"));
+
+var _padEmptyChartBar = _interopRequireDefault(require("../utils/chart/padEmptyChartBar"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var BarChart = function BarChart(_ref) {
+  var _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 300 : _ref$height,
+      data = _ref.data,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? {} : _ref$options;
+  var 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);
+  var customOptions = (0, _react.useMemo)(function () {
+    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
+    };
+  }, [options]);
+  var defaultOptions = (0, _react.useMemo)(function () {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      aspectRatio: 1,
+      plugins: {
+        padEmptyChartBar: {
+          maxBarNumber: customOptions.maxBarNumber
+        },
+        legend: {
+          position: "bottom",
+          display: customOptions.showLegend
+        },
+        tooltip: {
+          enabled: false,
+          intersect: false,
+          filter: function filter(context) {
+            return !customOptions.onlyFirstTooltips || context.datasetIndex === 0 && context.label !== "null";
+          },
+          callbacks: {
+            title: function title(context) {
+              return context[0] ? context[0].label.match(/(.{1,20})/g) : "";
+            },
+            label: function label(context) {
+              var label = context.dataset.data[context.dataIndex];
+
+              if (context.dataset.customLabel) {
+                return context.dataset.customLabel[context.dataIndex].toString();
+              }
+
+              return label.toString();
+            },
+            labelTextColor: function labelTextColor() {
+              return theme.fontOnPrimary;
+            }
+          }
+        }
+      },
+      scales: {
+        x: {
+          stacked: customOptions.stacked,
+          grid: {
+            display: false,
+            drawBorder: false
+          },
+          ticks: {
+            minRotation: customOptions.rotateLabel ? 15 : 0,
+            callback: function callback(value) {
+              var label = this.getLabelForValue(value);
+              return label && label.length > 11 ? "".concat(label.substr(0, 11), "...") : label;
+            }
+          }
+        },
+        y: {
+          beginAtZero: true,
+          suggestedMax: customOptions.suggestedMax,
+          grid: {
+            display: false,
+            drawBorder: false
+          },
+          ticks: {
+            callback: function callback(value) {
+              if (value % 1 === 0) {
+                return value;
+              }
+
+              return null;
+            }
+          }
+        }
+      }
+    };
+  }, [customOptions, theme.fontOnPrimary]);
+  console.log("defaultOptions", defaultOptions);
+  var Chart = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Bar, {
+      height: height,
+      data: data,
+      options: defaultOptions,
+      plugins: [_padEmptyChartBar.default]
+    });
+  }, [height, data, defaultOptions]);
+  return Chart;
+};
+
+var _default = BarChart;
+exports.default = _default;

package/chart/DoughnutChart.js

@@ -0,0 +1,59 @@
+"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/chart/customTooltip"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var DoughnutChart = function DoughnutChart(_ref) {
+  var _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 300 : _ref$height,
+      data = _ref.data;
+  var 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);
+  var defaultOptions = (0, _react.useMemo)(function () {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      aspectRatio: 1,
+      plugins: {
+        legend: {
+          position: "bottom",
+          labels: {
+            padding: 24
+          }
+        },
+        tooltip: {
+          enabled: false
+        }
+      }
+    };
+  }, []);
+  var Chart = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Doughnut, {
+      height: height,
+      data: data,
+      options: defaultOptions
+    });
+  }, [height, data, defaultOptions]);
+  return Chart;
+};
+
+var _default = DoughnutChart;
+exports.default = _default;

package/chart/LineChart.js

@@ -0,0 +1,121 @@
+"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/chart/customTooltip"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var LineChart = function LineChart(_ref) {
+  var _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 300 : _ref$height,
+      data = _ref.data,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? {} : _ref$options;
+  var 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);
+  var customOptions = (0, _react.useMemo)(function () {
+    return {
+      suggestedMax: options.suggestedMax ? options.suggestedMax : 10,
+      tooltipTitlePrefix: "",
+      tooltipLabelPrefix: ""
+    };
+  }, [options]);
+
+  if (options.tooltips) {
+    var tooltipsOptions = options.tooltips;
+    customOptions.tooltipTitlePrefix = tooltipsOptions.titlePrefix || "";
+    customOptions.tooltipLabelPrefix = tooltipsOptions.labelPrefix || "";
+  }
+
+  var defaultOptions = (0, _react.useMemo)(function () {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      aspectRatio: 1,
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          enabled: false,
+          intersect: false,
+          filter: function filter(context) {
+            return context.datasetIndex === 0 && context.label !== "null";
+          },
+          callbacks: {
+            title: function title(context) {
+              var content = context[0] ? context[0].label.match(/(.{1,20})/g) : "";
+              return "".concat(customOptions.tooltipTitlePrefix).concat(content);
+            },
+            label: function label(context) {
+              var content = context.dataset.data[context.dataIndex].toString();
+              return "".concat(customOptions.tooltipLabelPrefix).concat(content);
+            },
+            labelColor: function labelColor(context) {
+              var borderColor = context.dataset.borderColor;
+              return {
+                borderColor: borderColor,
+                backgroundColor: borderColor
+              };
+            },
+            labelTextColor: function labelTextColor() {
+              return theme.fontOnPrimary;
+            }
+          }
+        }
+      },
+      scales: {
+        x: {
+          grid: {
+            display: false,
+            drawBorder: false
+          }
+        },
+        y: {
+          beginAtZero: true,
+          suggestedMax: customOptions.suggestedMax,
+          grid: {
+            display: false,
+            drawBorder: false
+          },
+          ticks: {
+            callback: function callback(value) {
+              if (value % 1 === 0) {
+                return value;
+              }
+
+              return null;
+            }
+          }
+        }
+      }
+    };
+  }, [customOptions, theme.fontOnPrimary]);
+  var Chart = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Line, {
+      height: height,
+      data: data,
+      options: defaultOptions
+    });
+  }, [height, data, defaultOptions]);
+  return Chart;
+};
+
+var _default = LineChart;
+exports.default = _default;

package/chart/SingleBarChart.js

@@ -0,0 +1,31 @@
+"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"));
+
+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 SingleBarChart = _styledComponents.default.div.attrs(function () {
+  return {
+    primary: true
+  };
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 1rem;\n  border-radius: var(--border-radius);\n  background: var(--color-background3);\n\n  &::before {\n    position: absolute;\n    content: \"\";\n    width: ", "%;\n    border-radius: var(--border-radius);\n    top: 0;\n    bottom: 0;\n\n    ", "\n  }\n\n  ", "\n"])), function (_ref) {
+  var percentage = _ref.percentage;
+  return percentage;
+}, _backgroundColor.default, function (_ref2) {
+  var marginTop = _ref2.marginTop;
+  return marginTop && "margin-top: var(--spacing-s)";
+});
+
+var _default = SingleBarChart;
+exports.default = _default;

package/chart/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BarChart", {
+  enumerable: true,
+  get: function get() {
+    return _BarChart.default;
+  }
+});
+Object.defineProperty(exports, "DoughnutChart", {
+  enumerable: true,
+  get: function get() {
+    return _DoughnutChart.default;
+  }
+});
+Object.defineProperty(exports, "LineChart", {
+  enumerable: true,
+  get: function get() {
+    return _LineChart.default;
+  }
+});
+Object.defineProperty(exports, "SingleBarChart", {
+  enumerable: true,
+  get: function get() {
+    return _SingleBarChart.default;
+  }
+});
+
+var _BarChart = _interopRequireDefault(require("./BarChart"));
+
+var _DoughnutChart = _interopRequireDefault(require("./DoughnutChart"));
+
+var _LineChart = _interopRequireDefault(require("./LineChart"));
+
+var _SingleBarChart = _interopRequireDefault(require("./SingleBarChart"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/container/FlexContainer.js

@@ -0,0 +1,25 @@
+"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 FlexContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n\n  ", ";\n\n  ", ";\n"])), function (_ref) {
+  var marginBottom = _ref.marginBottom;
+  return marginBottom && 'margin-bottom: var(--spacing-l)';
+}, function (_ref2) {
+  var wrap = _ref2.wrap;
+  return wrap && 'flex-wrap: wrap';
+});
+
+var _default = FlexContainer;
+exports.default = _default;

package/container/index.js

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