@cashub/ui 0.4.2 → 0.5.0

package/billing/SectionHeader.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _renderer = require("@react-pdf/renderer");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var BillingSectionHeader = function BillingSectionHeader(_ref) {
+  var children = _ref.children,
+      inline = _ref.inline;
+  var 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 = BillingSectionHeader;
+exports.default = _default;

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

package/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",
+};

package/billing/__stories__/Header3.stories.js_bak

@@ -0,0 +1,69 @@
+import {
+  Document,
+  Page,
+  PDFViewer,
+  StyleSheet,
+  View,
+  Font,
+} from "@react-pdf/renderer";
+import BillingHeader3 from "../Header3";
+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/header3",
+  component: BillingHeader3,
+  argTypes: {
+    children: {
+      description:
+        "For displaying text. Supports nesting of other Text or Link components to create inline styling.",
+    },
+    fontWeightNormal: { description: "Style variant" },
+    noMarginBottom: { description: "Style variant" },
+    paddingBottom: { 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: {
+      fontFamily: "Nanum Gothic",
+      color: "#ffffff",
+      backgroundColor: theme.bgColor2,
+      padding: 8,
+    },
+    view: {
+      border: "1px solid #ffffff",
+    },
+  });
+
+  return (
+    <PDFViewer style={{ width: "100%" }}>
+      <Document>
+        <Page size="A4" style={styles.page}>
+          <View style={styles.view}>
+            <BillingHeader3 {...args}></BillingHeader3>
+          </View>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+};
+
+Default.args = {
+  children: "BillingHeader3 content",
+  fontWeightNormal: false,
+  noMarginBottom: false,
+  paddingBottom: false,
+};

package/billing/__stories__/Paragraph.stories.js_bak

@@ -0,0 +1,84 @@
+import {
+  Document,
+  Page,
+  PDFViewer,
+  StyleSheet,
+  View,
+  Font,
+} from '@react-pdf/renderer';
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+import BillingParagraphGroup from '../ParagraphGroup';
+import BillingParagraph from '../Paragraph';
+import BillingParagraphText from '../ParagraphText';
+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/BillingParagraph',
+  component: BillingParagraph,
+  subComponent: BillingParagraphText,
+  argTypes: {
+    children: {
+      description: 'A BillingParagraphText component must be passed in.',
+    },
+    marginRight: { description: 'Style variant' },
+    justifyContentBetween: { 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: {
+      fontFamily: 'Nanum Gothic',
+      color: '#ffffff',
+      backgroundColor: theme.bgColor2,
+      padding: 8,
+    },
+  });
+
+  return (
+    <PDFViewer style={{ width: '100%' }}>
+      <Document>
+        <Page size='A4' style={styles.page}>
+          <View>
+            <BillingParagraphGroup>
+              <BillingParagraph {...args}>
+                <BillingParagraphText>Total 01: </BillingParagraphText>
+                <BillingParagraphText>10000</BillingParagraphText>
+              </BillingParagraph>
+              <BillingParagraph {...args}>
+                <BillingParagraphText>Available 01: </BillingParagraphText>
+                <BillingParagraphText>2000</BillingParagraphText>
+              </BillingParagraph>
+            </BillingParagraphGroup>
+            <BillingParagraph {...args}>
+              <BillingParagraphText>Total 02: </BillingParagraphText>
+              <BillingParagraphText>10000</BillingParagraphText>
+            </BillingParagraph>
+            <BillingParagraph {...args}>
+              <BillingParagraphText>Available 02: </BillingParagraphText>
+              <BillingParagraphText>2000</BillingParagraphText>
+            </BillingParagraph>
+          </View>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+};
+
+Default.args = {
+  marginRight: true,
+  justifyContentBetween: false,
+};

package/billing/__stories__/ParagraphGroup.stories.js_bak

@@ -0,0 +1,68 @@
+import {
+  Document,
+  Page,
+  PDFViewer,
+  StyleSheet,
+  View,
+  Font,
+} from '@react-pdf/renderer';
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+import BillingParagraph from '../Paragraph';
+import BillingParagraphGroup from '../ParagraphGroup';
+import BillingParagraphText from '../ParagraphText';
+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/BillingParagraphGroup',
+  component: BillingParagraphGroup,
+  subComponent: { BillingParagraph },
+  argTypes: {
+    children: {
+      description: 'A BillingParagraph 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}>
+          <View>
+            <BillingParagraphGroup {...args}>
+              <BillingParagraph marginRight>
+                <BillingParagraphText>Total: </BillingParagraphText>
+                <BillingParagraphText>10000</BillingParagraphText>
+              </BillingParagraph>
+              <BillingParagraph marginRight>
+                <BillingParagraphText>Total 2: </BillingParagraphText>
+                <BillingParagraphText>20000</BillingParagraphText>
+              </BillingParagraph>
+            </BillingParagraphGroup>
+          </View>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+};

package/billing/__stories__/ParagraphText.stories.js_bak

@@ -0,0 +1,64 @@
+import {
+  Document,
+  Page,
+  PDFViewer,
+  StyleSheet,
+  View,
+  Font,
+} from '@react-pdf/renderer';
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+import BillingParagraphText from '../ParagraphText';
+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/BillingParagraphText',
+  component: BillingParagraphText,
+  argTypes: {
+    children: {
+      description:
+        'For displaying text. Supports nesting of other Text or Link components to create inline styling.',
+    },
+    fontWeightBold: { 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: {
+      fontFamily: 'Nanum Gothic',
+      color: '#ffffff',
+      backgroundColor: theme.bgColor2,
+      padding: 8,
+    },
+  });
+
+  return (
+    <PDFViewer style={{ width: '100%' }}>
+      <Document>
+        <Page size='A4' style={styles.page}>
+          <View>
+            <BillingParagraphText {...args}></BillingParagraphText>
+          </View>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+};
+
+Default.args = {
+  children: 'BillingParagraphText content',
+  fontWeightBold: false,
+};

package/billing/__stories__/Section.stories.js_bak

@@ -0,0 +1,115 @@
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+import {
+  PDFViewer,
+  Document,
+  Page,
+  View,
+  StyleSheet,
+  Font,
+} from '@react-pdf/renderer';
+import BillingSection from '../Section';
+import BillingSectionHeader from '../SectionHeader';
+import BillingSectionBody from '../SectionBody';
+import BillingHeader3 from '../Header3';
+import BillingParagraph from '../Paragraph';
+import BillingParagraphGroup from '../ParagraphGroup';
+import BillingParagraphText from '../ParagraphText';
+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/BillingSection',
+  component: BillingSection,
+  subComponent: {
+    BillingSectionHeader,
+    BillingSectionBody,
+  },
+  argTypes: {
+    children: {
+      description:
+        'A BillingSectionHeader and BillingSectionBody component must be passed in.',
+    },
+    theme: { description: 'Provide theme styles for components to use' },
+    backgroundReverse: { description: 'Style variant' },
+    noPadding: { description: 'Style variant' },
+    noMarginBottom: { description: 'Style variant' },
+    paddingS: { description: 'Style variant' },
+    marginBottomS: { description: 'Style variant' },
+    flexGrow: { 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: {
+      fontFamily: 'Nanum Gothic',
+      color: '#ffffff',
+      backgroundColor: theme.bgColor2,
+      padding: 8,
+    },
+  });
+
+  return (
+    <PDFViewer showToolbar={false} style={{ width: '100%', height: '500px' }}>
+      <Document>
+        <Page size='A4' style={styles.page}>
+          <View>
+            <BillingSection {...args} theme={theme}>
+              <BillingSectionHeader>
+                <BillingHeader3>BillingHeader3</BillingHeader3>
+              </BillingSectionHeader>
+              <BillingSectionBody>
+                <BillingParagraphGroup>
+                  <BillingParagraph>
+                    <BillingParagraphText>Used:</BillingParagraphText>
+                    <BillingParagraphText fontWeightBold>
+                      200
+                    </BillingParagraphText>
+                  </BillingParagraph>
+                </BillingParagraphGroup>
+              </BillingSectionBody>
+            </BillingSection>
+          </View>
+          <View>
+            <BillingSection {...args} theme={theme}>
+              <BillingSectionHeader>
+                <BillingHeader3>BillingHeader3</BillingHeader3>
+              </BillingSectionHeader>
+              <BillingSectionBody>
+                <BillingParagraphGroup>
+                  <BillingParagraph>
+                    <BillingParagraphText>Used:</BillingParagraphText>
+                    <BillingParagraphText fontWeightBold>
+                      200
+                    </BillingParagraphText>
+                  </BillingParagraph>
+                </BillingParagraphGroup>
+              </BillingSectionBody>
+            </BillingSection>
+          </View>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+};
+
+Default.args = {
+  backgroundReverse: false,
+  noPadding: false,
+  noMarginBottom: false,
+  paddingS: false,
+  marginBottomS: false,
+  flexGrow: false,
+};

package/billing/__stories__/SectionBody.stories.js_bak

@@ -0,0 +1,62 @@
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+import {
+  PDFViewer,
+  Document,
+  Page,
+  View,
+  StyleSheet,
+  Text,
+  Font,
+} from '@react-pdf/renderer';
+import BillingSectionBody from '../SectionBody';
+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/BillingSectionBody',
+  component: BillingSectionBody,
+  argTypes: {
+    children: {
+      description: 'BillingSectionBody content can have 0 to many children.',
+    },
+  },
+};
+
+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>
+            <BillingSectionBody {...args}>
+              <View>
+                <Text>text1</Text>
+              </View>
+              <Text>text2</Text>
+            </BillingSectionBody>
+          </View>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+};