@cashub/ui-elv 1.0.0

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

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/breadcrumb/Breadcrumb.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactRouterDom = require("react-router-dom");
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Breadcrumb = _ref => {
+  let {
+    path = []
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    children: path.map((_ref2, index) => {
+      let {
+        name,
+        url
+      } = _ref2;
+      if (url) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+          to: url,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: name
+          })
+        }, index);
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: name
+      }, index);
+    })
+  });
+};
+const Wrapper = _styledComponents.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  font-size: var(--font-body2);
+  line-height: var(--font-body1);
+  color: var(--font-on-background);
+  padding: var(--spacing-s) 0;
+
+  > *:not(:last-child) {
+    display: flex;
+    align-items: center;
+    color: var(--font-on-background);
+    overflow: hidden;
+
+    > p {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &:after {
+      content: '/';
+      padding: 0 var(--spacing-xs);
+    }
+  }
+
+  > *:last-child {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: var(--color-primary);
+  }
+
+  ${_media.default.tablet`
+    padding-top: 0;
+  `}
+`;
+var _default = exports.default = Breadcrumb;

package/breadcrumb/index.js

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