@cashub/ui 0.48.28 → 0.49.0-beta.0

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

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import media from '../styles/mixin/media';
+
+const Breadcrumb = ({ path = [] }) => {
+  return (
+    <Wrapper>
+      {path.map(({ name, url }, index) => {
+        if (url) {
+          return (
+            <Link to={url} key={index}>
+              <p>{name}</p>
+            </Link>
+          );
+        }
+
+        return <p key={index}>{name}</p>;
+      })}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.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.tablet`
+    padding-top: 0;
+  `}
+`;
+
+export default Breadcrumb;

package/src/breadcrumb/__stories__/Breadcrumb.stories.js

@@ -0,0 +1,31 @@
+import Breadcrumb from '../Breadcrumb';
+import { MemoryRouter } from 'react-router';
+
+const metadata = {
+  title: 'Breadcrumb/Breadcrumb',
+  component: Breadcrumb,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+};
+
+const Template = (args) => {
+  return <Breadcrumb {...args} />;
+};
+
+// fix: router link and Description
+const Default = Template.bind({});
+Default.args = {
+  path: [
+    { name: 'Enterprise' },
+    { name: 'Enterprise List', url: '/enterprises' },
+    { name: 'Enterprise Details' },
+  ],
+};
+
+export default metadata;
+export { Default };