@cashub/ui-elv 1.0.0

package/badge/BadgeFillTriangle.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _colorOnBackground = _interopRequireDefault(require("../styles/mixin/colorOnBackground"));
+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 fillColor = (0, _styledComponents.css)`
+  ${_ref => {
+  let {
+    primary
+  } = _ref;
+  return primary && 'fill: var(--color-primary);';
+}}
+
+  ${_ref2 => {
+  let {
+    success
+  } = _ref2;
+  return success && 'fill: var(--color-success);';
+}}
+
+  ${_ref3 => {
+  let {
+    warning
+  } = _ref3;
+  return warning && 'fill: var(--color-warning);';
+}}
+
+  ${_ref4 => {
+  let {
+    danger
+  } = _ref4;
+  return danger && 'fill: var(--color-danger);';
+}}
+
+  ${_ref5 => {
+  let {
+    grey
+  } = _ref5;
+  return grey && 'fill: var(--color-grey);';
+}}
+`;
+const Wrapper = _styledComponents.default.span`
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 2rem;
+  width: 2rem;
+  font-size: 1rem;
+  margin: 0;
+  color: var(--font-on-background);
+
+  ${_colorOnBackground.default}
+
+  ${_ref6 => {
+  let {
+    extraSmall
+  } = _ref6;
+  return extraSmall && 'height: 1rem; width: 1rem; font-size: 0.62rem;';
+}}
+
+  ${_ref7 => {
+  let {
+    small
+  } = _ref7;
+  return small && 'height: 1.5rem; width: 1.5rem;';
+}}
+
+  ${_ref8 => {
+  let {
+    large
+  } = _ref8;
+  return large && 'height: 3rem; width: 3rem; font-size: 1.75rem;';
+}}
+`;
+const TriangleSvg = _styledComponents.default.svg`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+`;
+const TrianglePath = _styledComponents.default.path`
+  ${fillColor}
+`;
+const Content = _styledComponents.default.span`
+  position: relative;
+  display: inline-flex;
+  transform: translateY(0.2rem);
+
+  ${_ref9 => {
+  let {
+    extraSmall
+  } = _ref9;
+  return extraSmall && 'transform: translateY(0.1rem);';
+}}
+
+  ${_ref10 => {
+  let {
+    small
+  } = _ref10;
+  return small && 'transform: translateY(0.15rem);';
+}}
+
+  ${_ref11 => {
+  let {
+    large
+  } = _ref11;
+  return large && 'transform: translateY(0.3rem);';
+}}
+`;
+const TRIANGLE_PATH = 'M12 2 C12.7 2 13.3 2.4 13.7 3 L22 18 C22.8 19.5 21.7 21 20 21 H4 C2.3 21 1.2 19.5 2 18 L10.3 3 C10.7 2.4 11.3 2 12 2Z';
+const BadgeFillTriangle = /*#__PURE__*/(0, _react.forwardRef)((_ref12, ref) => {
+  let {
+    children,
+    primary = true,
+    ...rest
+  } = _ref12;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    ref: ref,
+    primary: primary,
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TriangleSvg, {
+      viewBox: "1.7 2 20.6 19",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TrianglePath, {
+        primary: primary,
+        ...rest,
+        d: TRIANGLE_PATH
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+      ...rest,
+      children: children
+    })]
+  });
+});
+BadgeFillTriangle.displayName = 'BadgeFillTriangle';
+var _default = exports.default = BadgeFillTriangle;

package/badge/BadgeWithText.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BadgeWithText = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    children: children
+  });
+};
+const Wrapper = _styledComponents.default.span`
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: var(--spacing-s);
+
+  :not(:last-child) {
+    margin-right: var(--spacing-s);
+  }
+
+  > :first-child {
+    margin-right: var(--spacing-xs);
+  }
+`;
+var _default = exports.default = BadgeWithText;

package/badge/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function () {
+    return _Badge.default;
+  }
+});
+Object.defineProperty(exports, "BadgeDot", {
+  enumerable: true,
+  get: function () {
+    return _BadgeDot.default;
+  }
+});
+Object.defineProperty(exports, "BadgeFill", {
+  enumerable: true,
+  get: function () {
+    return _BadgeFill.default;
+  }
+});
+Object.defineProperty(exports, "BadgeFillTriangle", {
+  enumerable: true,
+  get: function () {
+    return _BadgeFillTriangle.default;
+  }
+});
+Object.defineProperty(exports, "BadgeWithText", {
+  enumerable: true,
+  get: function () {
+    return _BadgeWithText.default;
+  }
+});
+var _Badge = _interopRequireDefault(require("./Badge"));
+var _BadgeDot = _interopRequireDefault(require("./BadgeDot"));
+var _BadgeFill = _interopRequireDefault(require("./BadgeFill"));
+var _BadgeFillTriangle = _interopRequireDefault(require("./BadgeFillTriangle"));
+var _BadgeWithText = _interopRequireDefault(require("./BadgeWithText"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/billing/BarChart.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _renderer = require("@react-pdf/renderer");
+var _jsxRuntime = require("react/jsx-runtime");
+const BillingBarChart = _ref => {
+  let {
+    theme,
+    percentage,
+    success,
+    warning,
+    danger
+  } = _ref;
+  const styles = {
+    chart: {
+      position: 'relative',
+      width: '100%',
+      height: 16,
+      borderRadius: 16,
+      backgroundColor: theme.bgColor3,
+      marginTop: 8
+    },
+    bar: {
+      position: 'absolute',
+      width: `${percentage}%`,
+      borderRadius: 16,
+      top: 0,
+      bottom: 0,
+      backgroundColor: theme.colorPrimary
+    }
+  };
+  if (success) {
+    styles.bar.backgroundColor = theme.colorSuccess;
+  }
+  if (warning) {
+    styles.bar.backgroundColor = theme.colorWarning;
+  }
+  if (danger) {
+    styles.bar.backgroundColor = theme.colorDanger;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
+    style: styles.chart,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
+      style: styles.bar
+    })
+  });
+};
+var _default = exports.default = BillingBarChart;

package/billing/Grid.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BillingGrid = exports.BillingColumn = void 0;
+var _renderer = require("@react-pdf/renderer");
+var _jsxRuntime = require("react/jsx-runtime");
+const BillingGrid = _ref => {
+  let {
+    children
+  } = _ref;
+  const styles = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    margin: '0 -8'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
+    style: styles,
+    children: children
+  });
+};
+exports.BillingGrid = BillingGrid;
+const BillingColumn = _ref2 => {
+  let {
+    children,
+    flex
+  } = _ref2;
+  const styles = {
+    padding: '0 8',
+    width: '50%'
+  };
+  if (flex) {
+    styles.display = 'flex';
+    styles.alignContent = 'stretch';
+    styles.alignItems = 'stretch';
+    styles.flexDirection = 'column';
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
+    style: styles,
+    children: children
+  });
+};
+exports.BillingColumn = BillingColumn;

package/billing/Header2.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _renderer = require("@react-pdf/renderer");
+var _jsxRuntime = require("react/jsx-runtime");
+const BillingHeader2 = _ref => {
+  let {
+    children
+  } = _ref;
+  const styles = {
+    fontSize: 20,
+    wordBreak: 'break-word',
+    textAlign: 'center',
+    margin: 0,
+    marginBottom: 12
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.Text, {
+    style: styles,
+    children: children
+  });
+};
+var _default = exports.default = BillingHeader2;

package/billing/Header3.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _renderer = require("@react-pdf/renderer");
+var _jsxRuntime = require("react/jsx-runtime");
+const BillingHeader3 = _ref => {
+  let {
+    children,
+    fontWeightNormal,
+    noMarginBottom,
+    paddingBottom
+  } = _ref;
+  const styles = {
+    fontSize: 14,
+    lineHeight: 1.25,
+    wordBreak: 'break-word',
+    fontWeight: 'bold',
+    marginBottom: 8
+  };
+  if (fontWeightNormal) {
+    styles.fontWeight = 'normal';
+  }
+  if (noMarginBottom) {
+    styles.marginBottom = 0;
+  }
+  if (paddingBottom) {
+    styles.paddingBottom = 8;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.Text, {
+    style: styles,
+    children: children
+  });
+};
+var _default = exports.default = BillingHeader3;

package/billing/Paragraph.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _renderer = require("@react-pdf/renderer");
+var _jsxRuntime = require("react/jsx-runtime");
+const BillingParagraph = _ref => {
+  let {
+    children,
+    marginRight,
+    justifyContentBetween
+  } = _ref;
+  const styles = {
+    margin: 0,
+    display: 'flex',
+    flexDirection: 'row',
+    wordBreak: 'break-word',
+    overflowWrap: 'break-word'
+  };
+  if (marginRight) {
+    styles.marginRight = 16;
+  }
+  if (justifyContentBetween) {
+    styles.justifyContent = 'space-between';
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
+    style: styles,
+    children: children
+  });
+};
+var _default = exports.default = BillingParagraph;

package/billing/ParagraphGroup.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _renderer = require("@react-pdf/renderer");
+var _jsxRuntime = require("react/jsx-runtime");
+const BillingParagraphGroup = _ref => {
+  let {
+    children
+  } = _ref;
+  const styles = {
+    display: 'flex',
+    flexDirection: 'row'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
+    style: styles,
+    children: children
+  });
+};
+var _default = exports.default = BillingParagraphGroup;

package/billing/ParagraphText.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _renderer = require("@react-pdf/renderer");
+var _jsxRuntime = require("react/jsx-runtime");
+const BillingParagraphText = _ref => {
+  let {
+    children,
+    fontWeightBold
+  } = _ref;
+  const styles = {
+    fontSize: 12,
+    lineHeight: 1.5
+  };
+  if (fontWeightBold) {
+    styles.fontWeight = 'bold';
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.Text, {
+    style: styles,
+    children: children
+  });
+};
+var _default = exports.default = BillingParagraphText;

package/billing/Section.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _renderer = require("@react-pdf/renderer");
+var _jsxRuntime = require("react/jsx-runtime");
+const BillingSection = _ref => {
+  let {
+    children,
+    theme,
+    backgroundReverse,
+    noPadding,
+    noMarginBottom,
+    paddingS,
+    marginBottomS,
+    flexGrow
+  } = _ref;
+  const styles = {
+    backgroundColor: theme.bgColor1,
+    borderRadius: 16,
+    color: theme.fontOnBg,
+    padding: 12,
+    marginBottom: 16
+  };
+  if (backgroundReverse) {
+    styles.backgroundColor = theme.bgColor2;
+  }
+  if (noPadding) {
+    styles.padding = 0;
+  }
+  if (noMarginBottom) {
+    styles.marginBottom = 0;
+  }
+  if (paddingS) {
+    styles.padding = 8;
+  }
+  if (marginBottomS) {
+    styles.marginBottom = 12;
+  }
+  if (flexGrow) {
+    styles.flexGrow = 1;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
+    style: styles,
+    children: children
+  });
+};
+var _default = exports.default = BillingSection;

package/billing/SectionBody.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _renderer = require("@react-pdf/renderer");
+var _jsxRuntime = require("react/jsx-runtime");
+const BillingSectionBody = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
+    children: children
+  });
+};
+var _default = exports.default = BillingSectionBody;

package/billing/SectionHeader.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _renderer = require("@react-pdf/renderer");
+var _jsxRuntime = require("react/jsx-runtime");
+const BillingSectionHeader = _ref => {
+  let {
+    children,
+    inline
+  } = _ref;
+  const styles = {};
+  if (inline) {
+    styles.display = 'flex';
+    styles.justifyContent = 'space-between';
+    styles.flexDirection = 'row';
+    styles.alignItems = 'center';
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
+    style: styles,
+    children: children
+  });
+};
+var _default = exports.default = BillingSectionHeader;

package/billing/__stories__/BarChart.stories.js_bak

@@ -0,0 +1,46 @@
+import { useContext } from 'react';
+import { Document, Page, PDFViewer, StyleSheet } from '@react-pdf/renderer';
+import { ThemeContext } from 'styled-components';
+import BillingBarChart from '../BarChart';
+
+export default {
+  title: 'billing/BillingBarChart',
+  component: BillingBarChart,
+  argTypes: {
+    theme: { description: 'Provide theme styles for components to use' },
+    percentage: {
+      description: 'Affects the width of the bar, the maximum value is 100',
+    },
+    success: { description: 'Affects the backgroundColor of the bar' },
+    warning: { description: 'Affects the backgroundColor of the bar' },
+    danger: { description: 'Affects the backgroundColor of the bar' },
+  },
+};
+
+export const Default = (args) => {
+  const theme = useContext(ThemeContext);
+
+  const styles = StyleSheet.create({
+    page: {
+      backgroundColor: theme.bgColor2,
+      padding: 8,
+    },
+  });
+
+  return (
+    <PDFViewer showToolbar={false}>
+      <Document>
+        <Page size='A4' style={styles.page}>
+          <BillingBarChart {...args} theme={theme} marginTop />
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+};
+
+Default.args = {
+  success: true,
+  warning: false,
+  danger: false,
+  percentage: 100,
+};

package/billing/__stories__/Grid.stories.js_bak

@@ -0,0 +1,57 @@
+import {
+  PDFViewer,
+  Document,
+  Page,
+  StyleSheet,
+  Text,
+  Font,
+} from '@react-pdf/renderer';
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+import { BillingGrid, BillingColumn } from '../Grid';
+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/BillingGrid',
+  component: BillingGrid,
+  subComponent: BillingColumn,
+  argTypes: {
+    children: { description: 'A BillingColumn component must be passed in.' },
+  },
+};
+
+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: {
+      fontFamily: 'Nanum Gothic',
+      color: '#ffffff',
+      backgroundColor: theme.bgColor2,
+      padding: 8,
+    },
+  });
+  return (
+    <PDFViewer style={{ width: '100%' }}>
+      <Document>
+        <Page size='A4' style={styles.page}>
+          <BillingGrid {...args}>
+            <BillingColumn>
+              <Text>children content</Text>
+            </BillingColumn>
+          </BillingGrid>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+};