@cashub/ui-elv 1.0.1 → 1.0.3

package/esm/badge/BadgeFill.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import backgroundColor from '../styles/mixin/backgroundColor';
+import colorOnBackground from '../styles/mixin/colorOnBackground';
+const BadgeFill = styled.span.attrs(() => ({
+  primary: true
+}))`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  width: auto;
+  border-radius: var(--border-radius-l);
+  font-size: 1rem;
+  padding: 0.5rem;
+  margin: 0;
+  color: var(--font-on-background);
+
+  ${backgroundColor}
+  ${colorOnBackground}
+
+  ${_ref => {
+  let {
+    extraSmall
+  } = _ref;
+  return extraSmall && 'font-size: 0.75rem; padding: 0.125rem;';
+}}
+
+  ${_ref2 => {
+  let {
+    small
+  } = _ref2;
+  return small && 'font-size: 1rem; padding: 0.25rem;';
+}}
+
+  ${_ref3 => {
+  let {
+    large
+  } = _ref3;
+  return large && 'font-size: 2rem;';
+}}
+`;
+export default BadgeFill;

package/esm/badge/BadgeFillTriangle.js

@@ -0,0 +1,138 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import colorOnBackground from '../styles/mixin/colorOnBackground';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const fillColor = 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 = styled.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}
+
+  ${_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 = styled.svg`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+`;
+const TrianglePath = styled.path`
+  ${fillColor}
+`;
+const Content = styled.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__*/forwardRef((_ref12, ref) => {
+  let {
+    children,
+    primary = true,
+    ...rest
+  } = _ref12;
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    ref: ref,
+    primary: primary,
+    ...rest,
+    children: [/*#__PURE__*/_jsx(TriangleSvg, {
+      viewBox: "1.7 2 20.6 19",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /*#__PURE__*/_jsx(TrianglePath, {
+        primary: primary,
+        ...rest,
+        d: TRIANGLE_PATH
+      })
+    }), /*#__PURE__*/_jsx(Content, {
+      ...rest,
+      children: children
+    })]
+  });
+});
+BadgeFillTriangle.displayName = 'BadgeFillTriangle';
+export default BadgeFillTriangle;

package/esm/badge/BadgeWithText.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BadgeWithText = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Wrapper, {
+    children: children
+  });
+};
+const Wrapper = styled.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);
+  }
+`;
+export default BadgeWithText;

package/esm/badge/index.js

@@ -0,0 +1,5 @@
+export { default as Badge } from './Badge';
+export { default as BadgeDot } from './BadgeDot';
+export { default as BadgeFill } from './BadgeFill';
+export { default as BadgeFillTriangle } from './BadgeFillTriangle';
+export { default as BadgeWithText } from './BadgeWithText';

package/esm/billing/BarChart.js

@@ -0,0 +1,45 @@
+import { View } from '@react-pdf/renderer';
+import { jsx as _jsx } from "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__*/_jsx(View, {
+    style: styles.chart,
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.bar
+    })
+  });
+};
+export default BillingBarChart;

package/esm/billing/Grid.js

@@ -0,0 +1,38 @@
+import { View } from '@react-pdf/renderer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BillingGrid = _ref => {
+  let {
+    children
+  } = _ref;
+  const styles = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    margin: '0 -8'
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: styles,
+    children: children
+  });
+};
+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__*/_jsx(View, {
+    style: styles,
+    children: children
+  });
+};
+export { BillingGrid, BillingColumn };

package/esm/billing/Header2.js

@@ -0,0 +1,19 @@
+import { Text } from '@react-pdf/renderer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BillingHeader2 = _ref => {
+  let {
+    children
+  } = _ref;
+  const styles = {
+    fontSize: 20,
+    wordBreak: 'break-word',
+    textAlign: 'center',
+    margin: 0,
+    marginBottom: 12
+  };
+  return /*#__PURE__*/_jsx(Text, {
+    style: styles,
+    children: children
+  });
+};
+export default BillingHeader2;

package/esm/billing/Header3.js

@@ -0,0 +1,31 @@
+import { Text } from '@react-pdf/renderer';
+import { jsx as _jsx } from "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__*/_jsx(Text, {
+    style: styles,
+    children: children
+  });
+};
+export default BillingHeader3;

package/esm/billing/Paragraph.js

@@ -0,0 +1,27 @@
+import { View } from '@react-pdf/renderer';
+import { jsx as _jsx } from "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__*/_jsx(View, {
+    style: styles,
+    children: children
+  });
+};
+export default BillingParagraph;

package/esm/billing/ParagraphGroup.js

@@ -0,0 +1,16 @@
+import { View } from '@react-pdf/renderer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BillingParagraphGroup = _ref => {
+  let {
+    children
+  } = _ref;
+  const styles = {
+    display: 'flex',
+    flexDirection: 'row'
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: styles,
+    children: children
+  });
+};
+export default BillingParagraphGroup;

package/esm/billing/ParagraphText.js

@@ -0,0 +1,20 @@
+import { Text } from '@react-pdf/renderer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BillingParagraphText = _ref => {
+  let {
+    children,
+    fontWeightBold
+  } = _ref;
+  const styles = {
+    fontSize: 12,
+    lineHeight: 1.5
+  };
+  if (fontWeightBold) {
+    styles.fontWeight = 'bold';
+  }
+  return /*#__PURE__*/_jsx(Text, {
+    style: styles,
+    children: children
+  });
+};
+export default BillingParagraphText;

package/esm/billing/Section.js

@@ -0,0 +1,44 @@
+import { View } from '@react-pdf/renderer';
+import { jsx as _jsx } from "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__*/_jsx(View, {
+    style: styles,
+    children: children
+  });
+};
+export default BillingSection;

package/esm/billing/SectionBody.js

@@ -0,0 +1,11 @@
+import { View } from '@react-pdf/renderer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BillingSectionBody = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(View, {
+    children: children
+  });
+};
+export default BillingSectionBody;

package/esm/billing/SectionHeader.js

@@ -0,0 +1,20 @@
+import { View } from '@react-pdf/renderer';
+import { jsx as _jsx } from "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__*/_jsx(View, {
+    style: styles,
+    children: children
+  });
+};
+export default BillingSectionHeader;

package/esm/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/esm/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>
+  );
+};

package/esm/billing/__stories__/Header2.stories.js_bak

@@ -0,0 +1,62 @@
+import {
+  Document,
+  Page,
+  PDFViewer,
+  StyleSheet,
+  View,
+  Font,
+} from "@react-pdf/renderer";
+import BillingHeader2 from "../Header2";
+import { useContext } from "react";
+import { ThemeContext } from "styled-components";
+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/header2",
+  component: BillingHeader2,
+  argTypes: {
+    children: {
+      description:
+        "For displaying text. Supports nesting of other Text or Link components to create inline styling.",
+    },
+  },
+};
+
+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}>
+          <View>
+            <BillingHeader2 {...args}></BillingHeader2>
+          </View>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+};
+
+Default.args = {
+  children: "BillingHeader2 content",
+};