@cashub/ui 0.48.30 → 0.49.0-beta.0

package/src/badge/BadgeWithText.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const BadgeWithText = ({ children }) => {
+  return <Wrapper>{children}</Wrapper>;
+};
+
+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/src/badge/__stories__/Badge.stories.js

@@ -0,0 +1,47 @@
+import Badge from '../Badge';
+
+const metadata = {
+  title: 'Badge/Badge',
+  component: Badge,
+  argTypes: {
+    children: {
+      description: 'status text',
+      control: 'radio',
+      options: ['Enable', 'Disabled', 'Unknown'],
+    },
+    primary: {
+      description: 'text and border color',
+    },
+    success: {
+      description: 'text and border color',
+    },
+    warning: {
+      description: 'text and border color',
+    },
+    danger: {
+      description: 'text and border color',
+    },
+    grey: {
+      description: 'text and border color',
+    },
+  },
+};
+
+const Template = (args) => (
+  <>
+    <Badge {...args}></Badge>
+  </>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  children: 'Enable',
+  primary: false,
+  success: true,
+  warning: false,
+  danger: false,
+  grey: false,
+};
+
+export default metadata;
+export { Default };

package/src/badge/__stories__/BadgeDot.stories.js

@@ -0,0 +1,23 @@
+import BadgeDot from '../BadgeDot';
+
+const metadata = {
+  title: 'Badge/BadgeDot',
+  component: BadgeDot,
+};
+
+const Template = (args) => (
+  <>
+    <BadgeDot {...args}></BadgeDot>
+  </>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  primary: false,
+  success: true,
+  warning: false,
+  danger: false,
+};
+
+export default metadata;
+export { Default };

package/src/badge/__stories__/BadgeFill.stories.js

@@ -0,0 +1,29 @@
+import BadgeFill from '../BadgeFill';
+import { FaInfo } from 'react-icons/fa';
+
+const metadata = {
+  title: 'Badge/BadgeFill',
+  component: BadgeFill,
+};
+
+const Template = (args) => (
+  <>
+    <BadgeFill {...args}>
+      <FaInfo />
+    </BadgeFill>
+  </>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  extraSmall: false,
+  small: false,
+  large: false,
+  primary: false,
+  success: true,
+  warning: false,
+  danger: false,
+};
+
+export default metadata;
+export { Default };

package/src/badge/__stories__/BadgeFillTriangle.stories.js

@@ -0,0 +1,29 @@
+import BadgeFillTriangle from '../BadgeFillTriangle';
+import { FaExclamation } from 'react-icons/fa';
+
+const metadata = {
+  title: 'Badge/BadgeFillTriangle',
+  component: BadgeFillTriangle,
+};
+
+const Template = (args) => (
+  <>
+    <BadgeFillTriangle {...args}>
+      <FaExclamation />
+    </BadgeFillTriangle>
+  </>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  extraSmall: false,
+  small: false,
+  large: false,
+  primary: false,
+  success: false,
+  warning: false,
+  danger: true,
+};
+
+export default metadata;
+export { Default };

package/src/badge/__stories__/BadgeWithText.stories.js

@@ -0,0 +1,26 @@
+import BadgeWithText from '../BadgeWithText';
+import BadgeFill from '../BadgeFill';
+import { FaQuestion } from 'react-icons/fa';
+
+const metadata = {
+  title: 'Badge/BadgeWithText',
+  component: BadgeWithText,
+};
+
+const Template = (args) => (
+  <>
+    <BadgeWithText {...args}>
+      <BadgeFill>
+        <FaQuestion />
+      </BadgeFill>
+      {args.children}
+    </BadgeWithText>
+  </>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  children: 'No Setting Data',
+};
+
+export default metadata;

package/src/badge/__test__/Badge.test.js

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import Badge from '../Badge';
+import 'jest-styled-components';
+
+describe('test badge', () => {
+  test('render badge', () => {
+    render(<Badge success>Enable</Badge>);
+
+    expect(screen.getByText('Enable')).toBeInTheDocument();
+    expect(screen.getByText('Enable')).toHaveStyleRule(
+      'color',
+      'var(--color-success)',
+    );
+    expect(screen.getByText('Enable')).toHaveStyleRule(
+      'border-color',
+      'var(--color-success)',
+    );
+  });
+
+  test('render grey badge', () => {
+    render(<Badge grey>Unknown</Badge>);
+
+    expect(screen.getByText('Unknown')).toHaveStyleRule(
+      'color',
+      'var(--color-grey)',
+    );
+    expect(screen.getByText('Unknown')).toHaveStyleRule(
+      'border-color',
+      'var(--color-grey)',
+    );
+  });
+});

package/src/badge/__test__/BadgeDot.test.js

@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react';
+import BadgeDot from '../BadgeDot';
+import 'jest-styled-components';
+
+const status = {
+  0: {
+    title: 'Disable',
+    type: { danger: true },
+  },
+};
+
+describe('test badegDot', () => {
+  test('render badegDot', () => {
+    const { container } = render(<BadgeDot {...status[0].type} />);
+
+    expect(container.firstChild).toBeInTheDocument();
+    expect(container.firstChild).toHaveStyleRule(
+      'background-color',
+      'var(--color-danger)'
+    );
+  });
+});

package/src/badge/__test__/BadgeFill.test.js

@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react';
+import { FaExclamation } from 'react-icons/fa';
+import BadgeFill from '../BadgeFill';
+import 'jest-styled-components';
+
+describe('test BadgeFill', () => {
+  test('render BadgeFill', () => {
+    const { container } = render(
+      <BadgeFill>
+        <FaExclamation />
+      </BadgeFill>
+    );
+
+    expect(container.firstChild).toHaveStyleRule(
+      'background-color',
+      'var(--color-primary)'
+    );
+    expect(container.firstChild).toHaveStyleRule(
+      'color',
+      'var(--font-on-primary)'
+    );
+  });
+
+  test('with parameters', () => {
+    const { container } = render(
+      <BadgeFill large warning>
+        <FaExclamation />
+      </BadgeFill>
+    );
+
+    expect(container.firstChild).toHaveStyleRule('font-size', '2rem');
+    expect(container.firstChild).toHaveStyleRule(
+      'color',
+      'var(--font-on-danger)'
+    );
+    expect(container.firstChild).toHaveStyleRule(
+      'background-color',
+      'var(--color-warning)'
+    );
+  });
+});

package/src/badge/__test__/BadgeWithText.test.js

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import { FaQuestion } from 'react-icons/fa';
+import BadgeFill from '../BadgeFill';
+import BadgeWithText from '../BadgeWithText';
+
+describe('test BadgeWithText', () => {
+  test('render BadgeWithText', () => {
+    render(
+      <BadgeWithText>
+        <BadgeFill>
+          <FaQuestion />
+        </BadgeFill>
+        No Setting Data
+      </BadgeWithText>
+    );
+
+    const badgeWithText = screen.getByText('No Setting Data');
+
+    expect(badgeWithText).toBeInTheDocument();
+    expect(badgeWithText.textContent).toBe('No Setting Data');
+  });
+});

package/src/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/src/billing/BarChart.js

@@ -0,0 +1,42 @@
+import { View } from '@react-pdf/renderer';
+
+const BillingBarChart = ({ theme, percentage, success, warning, danger }) => {
+  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 (
+    <View style={styles.chart}>
+      <View style={styles.bar} />
+    </View>
+  );
+};
+
+export default BillingBarChart;

package/src/billing/Grid.js

@@ -0,0 +1,30 @@
+import { View } from '@react-pdf/renderer';
+
+const BillingGrid = ({ children }) => {
+  const styles = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    margin: '0 -8',
+  };
+
+  return <View style={styles}>{children}</View>;
+};
+
+const BillingColumn = ({ children, flex }) => {
+  const styles = {
+    padding: '0 8',
+    width: '50%',
+  };
+
+  if (flex) {
+    styles.display = 'flex';
+    styles.alignContent = 'stretch';
+    styles.alignItems = 'stretch';
+    styles.flexDirection = 'column';
+  }
+
+  return <View style={styles}>{children}</View>;
+};
+
+export { BillingGrid, BillingColumn };

package/src/billing/Header2.js

@@ -0,0 +1,15 @@
+import { Text } from '@react-pdf/renderer';
+
+const BillingHeader2 = ({ children }) => {
+  const styles = {
+    fontSize: 20,
+    wordBreak: 'break-word',
+    textAlign: 'center',
+    margin: 0,
+    marginBottom: 12,
+  };
+
+  return <Text style={styles}>{children}</Text>;
+};
+
+export default BillingHeader2;

package/src/billing/Header3.js

@@ -0,0 +1,32 @@
+import { Text } from '@react-pdf/renderer';
+
+const BillingHeader3 = ({
+  children,
+  fontWeightNormal,
+  noMarginBottom,
+  paddingBottom,
+}) => {
+  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 <Text style={styles}>{children}</Text>;
+};
+
+export default BillingHeader3;

package/src/billing/Paragraph.js

@@ -0,0 +1,27 @@
+import { View } from '@react-pdf/renderer';
+
+const BillingParagraph = ({
+  children,
+  marginRight,
+  justifyContentBetween,
+}) => {
+  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 <View style={styles}>{children}</View>;
+};
+
+export default BillingParagraph;

package/src/billing/ParagraphGroup.js

@@ -0,0 +1,12 @@
+import { View } from '@react-pdf/renderer';
+
+const BillingParagraphGroup = ({ children }) => {
+  const styles = {
+    display: 'flex',
+    flexDirection: 'row',
+  };
+
+  return <View style={styles}>{children}</View>;
+};
+
+export default BillingParagraphGroup;

package/src/billing/ParagraphText.js

@@ -0,0 +1,16 @@
+import { Text } from '@react-pdf/renderer';
+
+const BillingParagraphText = ({ children, fontWeightBold }) => {
+  const styles = {
+    fontSize: 12,
+    lineHeight: 1.5,
+  };
+
+  if (fontWeightBold) {
+    styles.fontWeight = 'bold';
+  }
+
+  return <Text style={styles}>{children}</Text>;
+};
+
+export default BillingParagraphText;

package/src/billing/Section.js

@@ -0,0 +1,48 @@
+import { View } from '@react-pdf/renderer';
+
+const BillingSection = ({
+  children,
+  theme,
+  backgroundReverse,
+  noPadding,
+  noMarginBottom,
+  paddingS,
+  marginBottomS,
+  flexGrow,
+}) => {
+  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 <View style={styles}>{children}</View>;
+};
+
+export default BillingSection;

package/src/billing/SectionBody.js

@@ -0,0 +1,7 @@
+import { View } from '@react-pdf/renderer';
+
+const BillingSectionBody = ({ children }) => {
+  return <View>{children}</View>;
+};
+
+export default BillingSectionBody;

package/src/billing/SectionHeader.js

@@ -0,0 +1,16 @@
+import { View } from '@react-pdf/renderer';
+
+const BillingSectionHeader = ({ children, inline }) => {
+  const styles = {};
+
+  if (inline) {
+    styles.display = 'flex';
+    styles.justifyContent = 'space-between';
+    styles.flexDirection = 'row';
+    styles.alignItems = 'center';
+  }
+
+  return <View style={styles}>{children}</View>;
+};
+
+export default BillingSectionHeader;

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