@cashub/ui 0.22.7 → 0.22.9

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

package/src/breadcrumb/__test__/breadcrumb.test.js

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import Breadcrumb from '../Breadcrumb';
+
+describe('test Breadcrumb', () => {
+  test('render Breadcrumb', () => {
+    const path = [
+      { name: 'Manufacturer' },
+      { name: 'ManufacturerList', url: '/manufacturers' },
+    ];
+
+    render(
+      <Router>
+        <Breadcrumb path={path} />
+      </Router>
+    );
+
+    const manufacturer = screen.getByText('Manufacturer');
+    const manufacturerList = screen.getByText('ManufacturerList');
+    const manufacturerListLink = screen.getAllByRole('link');
+
+    expect(manufacturer).toBeInTheDocument();
+    expect(manufacturerList).toBeInTheDocument();
+    expect(manufacturerListLink[0]).toHaveAttribute('href', '/manufacturers');
+    expect(manufacturerListLink.length).toBe(1);
+  });
+});

package/src/breadcrumb/index.js

@@ -0,0 +1 @@
+export { default as Breadcrumb } from './Breadcrumb';

package/src/button/Button.js

@@ -0,0 +1,80 @@
+import styled, { css } from 'styled-components';
+import backgroundColor from '../styles/mixin/backgroundColor';
+import colorOnBackground from '../styles/mixin/colorOnBackground';
+
+const Button = styled.button.attrs(() => ({
+  primary: true,
+}))`
+  display: flex;
+  align-items: center;
+  border: none;
+  font-size: var(--font-button);
+  line-height: var(--font-body1);
+  cursor: ${({ disabled }) => (disabled ? 'no-drop' : 'pointer')};
+  border-radius: var(--border-radius-l);
+  padding: 10px var(--spacing-s);
+  text-transform: uppercase;
+
+  > svg {
+    margin-right: calc(var(--spacing-s) - 0.25rem);
+    font-size: var(--font-body1);
+  }
+
+  &:hover {
+    ${({ disabled }) => {
+      return (
+        !disabled &&
+        css`
+          transition: 0.3s;
+          box-shadow: var(--box-shadow);
+          opacity: 0.9;
+        `
+      );
+    }}
+  }
+
+  ${backgroundColor}
+  ${colorOnBackground}
+
+  ${({ secondary }) =>
+    secondary &&
+    css`
+      background: var(--color-background2);
+      color: var(--font-on-background);
+    `}
+
+  ${({ reverse }) =>
+    reverse &&
+    css`
+      background: var(--color-background1);
+      color: var(--font-on-background);
+    `}
+
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      opacity: 0.5;
+    `}
+
+  ${({ iconOnly }) =>
+    iconOnly &&
+    css`
+      padding: 10px;
+
+      > svg {
+        margin-right: 0;
+      }
+    `}
+
+  ${({ fullWidth }) => fullWidth && 'width: 100%;'}
+
+  ${({ alignCenter }) => alignCenter && 'justify-content: center;'}
+
+  ${({ filterFocus }) =>
+    filterFocus &&
+    css`
+      border: 2px solid var(--color-danger);
+    `}
+`;
+
+export default Button;