@cashub/ui 0.22.8 → 0.22.9

package/src/helmet/Helmet.js

@@ -0,0 +1,12 @@
+import { Helmet as ReactHelmet } from 'react-helmet-async';
+
+const Helmet = ({ title, description }) => {
+  return (
+    <ReactHelmet>
+      {title && <title>{title}</title>}
+      {description && <meta name='description' content={description} />}
+    </ReactHelmet>
+  );
+};
+
+export default Helmet;

package/src/helmet/__test__/Helmet.test.js

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react';
+import { HelmetProvider } from 'react-helmet-async';
+import Helmet from '../Helmet';
+
+HelmetProvider.canUseDOM = false;
+describe('Test DocumentTitleDescription Component', () => {
+  const title = 'CASHUB Admin Portal Title';
+  const description = 'CASHUB Admin Portal Description';
+
+  test('document title', () => {
+    const context = {};
+    render(
+      <HelmetProvider context={context}>
+        <Helmet title={title} />
+      </HelmetProvider>,
+    );
+
+    expect(context.helmet.title.toString()).toEqual(
+      `<title data-rh="true">${title}</title>`,
+    );
+  });
+
+  test('document description', () => {
+    const context = {};
+    render(
+      <HelmetProvider context={context}>
+        <Helmet title={title} description={description} />
+      </HelmetProvider>,
+    );
+
+    expect(context.helmet.title.toString()).toEqual(
+      `<title data-rh="true">${title}</title>`,
+    );
+    expect(context.helmet.meta.toString()).toEqual(
+      `<meta data-rh="true" name="description" content="${description}"/>`,
+    );
+  });
+});

package/src/helmet/index.js

@@ -0,0 +1,2 @@
+export { default as Helmet } from './Helmet';
+export { HelmetProvider } from 'react-helmet-async';

package/src/iconbox/ApplicationIconBox.js

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+import IconBoxFigure from './subComponent/IconBoxFigure';
+import IconBoxImage from './subComponent/IconBoxImage';
+
+const ApplicationIconBox = styled.div`
+  margin-bottom: var(--spacing);
+
+  ${({ clickable }) => clickable && 'cursor: pointer'};
+`;
+
+const Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--spacing-xs);
+  border: var(--border-width) solid transparent;
+
+  ${({ horizontal }) => horizontal && 'flex-direction: row;'}
+  ${({ alignCenter }) => alignCenter && 'text-align: center;'}
+  ${({ selected }) =>
+    selected &&
+    `
+      border-color: var(--border-color);
+      border-radius: var(--border-radius);
+      box-shadow: var(--box-shadow);
+    `}
+`;
+
+const Description = styled.div`
+  min-width: 0;
+`;
+
+const Title = styled.div`
+  font-weight: var(--font-bold);
+  font-size: var(--font-body1);
+  margin-bottom: var(--spacing-xs);
+  color: var(--font-on-background);
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+
+  a {
+    color: var(--font-on-background);
+  }
+`;
+
+const Content = styled.div`
+  font-size: var(--font-body1);
+  color: var(--font-on-mute);
+  margin-bottom: var(--spacing-xs);
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+`;
+
+export default Object.assign(ApplicationIconBox, {
+  Body,
+  Description,
+  Title,
+  Content,
+  Figure: IconBoxFigure,
+  Image: IconBoxImage,
+});

package/src/iconbox/IconBox.js

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+import IconBoxFigure from './subComponent/IconBoxFigure';
+import IconBoxImage from './subComponent/IconBoxImage';
+import bgChartTriangle from '../assets/images/bg-chart-triangle.png';
+
+const IconBox = ({ icon, title, children }) => {
+  return (
+    <Wrapper>
+      <IconBoxHead>
+        <IconBoxFigure sizeXS marginRight>
+          <IconBoxImage sizeXS src={icon} alt={`${title}'s icon`} />
+        </IconBoxFigure>
+        <IconBoxTitle>{title}</IconBoxTitle>
+      </IconBoxHead>
+      <IconBoxBody>{children}</IconBoxBody>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-l);
+  margin-bottom: var(--spacing);
+  border-radius: var(--border-radius);
+  background: var(--color-background2);
+  color: var(--font-on-background);
+
+  background: var(--color-background2);
+  background-image: url(${bgChartTriangle});
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  background-size: 30% 70%;
+`;
+
+const IconBoxHead = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing);
+`;
+
+const IconBoxTitle = styled.div`
+  font-size: var(--font-h2);
+  font-weight: bold;
+  word-break: break-all;
+`;
+
+const IconBoxBody = styled.div`
+  font-size: var(--font-h1);
+  font-weight: bold;
+  text-align: center;
+`;
+
+export default IconBox;

package/src/iconbox/IconBoxV2.js

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import IconBoxFigure from './subComponent/IconBoxFigure';
+import IconBoxImage from './subComponent/IconBoxImage';
+
+const IconBoxV2 = styled.div`
+  padding: var(--spacing);
+  margin-bottom: var(--spacing);
+  background: var(--color-background1);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+
+  ${({ fullHeight }) => fullHeight && 'height: calc(100% - var(--spacing));'}
+`;
+
+const Body = styled.div`
+  display: flex;
+`;
+
+const Description = styled.div`
+  flex: 1 1 auto;
+  font-size: var(--font-body1);
+`;
+
+const Info = styled.div`
+  word-break: break-all;
+
+  &:not(:last-child) {
+    margin-bottom: var(--spacing-s);
+  }
+`;
+
+const Tool = styled.div`
+  flex: 0 0 calc(var(--spacing-s) + 36px);
+  padding-left: var(--spacing-s);
+
+  > *:not(:last-child) {
+    margin-bottom: var(--spacing-s);
+  }
+`;
+
+export default Object.assign(IconBoxV2, {
+  Body,
+  Description,
+  Info,
+  Tool,
+  Figure: IconBoxFigure,
+  Image: IconBoxImage,
+});

package/src/iconbox/__stories__/ApplicationIconBox.stories.js

@@ -0,0 +1,53 @@
+import ApplicationIconBox from '../ApplicationIconBox';
+import defaultUserPic from '../../assets/images/default-user.jpg';
+
+const metadata = {
+  title: 'Iconbox/ApplicationIconBox',
+  component: ApplicationIconBox,
+  argTypes: {
+    clickable: {
+      description: 'cursor: pointer',
+    },
+    horizontal: {
+      description: 'flex-direction: row',
+    },
+    alignCenter: {
+      description: 'text-align: center',
+    },
+    selected: {
+      description: 'border style',
+    },
+  },
+};
+
+const Template = (args) => (
+  <ApplicationIconBox {...args}>
+    <ApplicationIconBox.Body {...args}>
+      <ApplicationIconBox.Figure sizeS paddingRightS>
+        <ApplicationIconBox.Image
+          rounded
+          sizeS
+          src={defaultUserPic}
+          alt='pic'
+        />
+      </ApplicationIconBox.Figure>
+      <ApplicationIconBox.Description>
+        <ApplicationIconBox.Title>Application Title</ApplicationIconBox.Title>
+        <ApplicationIconBox.Content>
+          2022-04-29 10:19:58
+        </ApplicationIconBox.Content>
+      </ApplicationIconBox.Description>
+    </ApplicationIconBox.Body>
+  </ApplicationIconBox>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  clickable: true,
+  horizontal: true,
+  alignCenter: true,
+  selected: false,
+};
+
+export default metadata;
+export { Default };

package/src/iconbox/__stories__/IconBox.stories.js

@@ -0,0 +1,34 @@
+import IconBox from '../IconBox';
+import ApplicationIcon from '../../assets/icons/app-management.png';
+
+const metadata = {
+  title: 'Iconbox/IconBox',
+  component: IconBox,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    icon: {
+      description: 'icon image',
+      control: { type: 'file', accept: '.png,.jpg' },
+    },
+  },
+};
+
+const Template = (args) => {
+  return <IconBox {...args} src={args.icon[0]}></IconBox>;
+};
+
+const Default = Template.bind({});
+Default.args = {
+  icon: [`${ApplicationIcon}`],
+  title: 'Application',
+  children: 'Content',
+};
+
+export default metadata;
+export { Default };

package/src/iconbox/__stories__/IconBoxFigure.stories.js

@@ -0,0 +1,67 @@
+import IconBoxFigure from '../subComponent/IconBoxFigure';
+import ApplicationIcon from '../../assets/icons/app-management.png';
+
+const metadata = {
+  title: 'IconBox/IconBoxFigure',
+  component: IconBoxFigure,
+  argTypes: {
+    marginRight: {
+      description: 'margin-right:24px',
+    },
+    paddingRight: {
+      description: 'padding-right:24px',
+    },
+    paddingRightS: {
+      description: 'padding-right:16px',
+    },
+    paddingBottomS: {
+      description: 'padding-bottom:16px',
+    },
+    sizeS: {
+      description: 'flex-basis: 80px',
+    },
+    sizeXS: {
+      description: 'flex-basis: 40px',
+    },
+  },
+};
+
+const Template = (args) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        background: '#13142e',
+        width: 'auto',
+        height: 'auto',
+        borderRadius: '50px',
+        padding: '30px',
+        color: '#ffffff',
+      }}
+      {...args}
+    >
+      <IconBoxFigure {...args} style={{ border: '2px solid #ffffff' }}>
+        <img
+          src={ApplicationIcon}
+          alt='pic'
+          style={{ width: '120', height: '120px' }}
+        />
+      </IconBoxFigure>
+      <p style={{ border: '2px solid #ffffff', marginLeft: '50px' }}>element</p>
+    </div>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  marginRight: false,
+  paddingRight: false,
+  paddingRightS: false,
+  paddingBottomS: false,
+  sizeS: false,
+  sizeXS: false,
+};
+
+export default metadata;
+export { Default };

package/src/iconbox/__stories__/IconBoxFigure.stories_V2.stories.js

@@ -0,0 +1,41 @@
+import ApplicationIconBox from '../ApplicationIconBox';
+import defaultUserPic from '../../assets/images/default-user.jpg';
+
+const metadata = {
+  title: 'Iconbox/IconBoxFigure_V2',
+  component: ApplicationIconBox,
+};
+
+const Template = (args) => (
+  <ApplicationIconBox>
+    <ApplicationIconBox.Body horizontal>
+      <ApplicationIconBox.Figure {...args}>
+        <ApplicationIconBox.Image
+          rounded
+          sizeS
+          src={defaultUserPic}
+          alt='pic'
+        />
+      </ApplicationIconBox.Figure>
+      <ApplicationIconBox.Description>
+        <ApplicationIconBox.Title>Application Title</ApplicationIconBox.Title>
+        <ApplicationIconBox.Content>
+          2022-04-29 10:19:58
+        </ApplicationIconBox.Content>
+      </ApplicationIconBox.Description>
+    </ApplicationIconBox.Body>
+  </ApplicationIconBox>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  marginRight: false,
+  paddingRight: false,
+  paddingRightS: false,
+  paddingBottomS: false,
+  sizeS: false,
+  sizeXS: false,
+};
+
+export default metadata;
+export { Default };

package/src/iconbox/__stories__/IconBoxImage.stories.js

@@ -0,0 +1,32 @@
+import IconBoxImage from '../subComponent/IconBoxImage';
+import ApplicationIcon from '../../assets/icons/app-management.png';
+
+const metadata = {
+  title: 'IconBox/IconBoxImage',
+  component: IconBoxImage,
+  argTypes: {
+    rounded: {
+      description: 'border-radius',
+    },
+    sizeS: {
+      description: 'width: 80px,height: 80px',
+    },
+    sizeXS: {
+      description: 'width: 40px,height: 40px',
+    },
+  },
+};
+
+const Template = (args) => {
+  return <IconBoxImage {...args} src={ApplicationIcon} />;
+};
+
+const Default = Template.bind({});
+Default.args = {
+  rounded: false,
+  sizeS: false,
+  sizeXS: false,
+};
+
+export default metadata;
+export { Default };

package/src/iconbox/__stories__/IconBoxV2.stories.js

@@ -0,0 +1,60 @@
+import IconBoxV2 from '../IconBoxV2';
+import Grid from '../../grid/Grid';
+import Column from '../../grid/Column';
+import defaultUserPic from '../../assets/images/default-user.jpg';
+
+const metadata = {
+  title: 'Iconbox/IconBoxV2',
+  component: IconBoxV2,
+};
+
+const Template = (args) => {
+  return (
+    <Grid columns={2}>
+      <Column desktop={1}>
+        <IconBoxV2 {...args}>
+          <IconBoxV2.Body>
+            <IconBoxV2.Figure paddingRight>
+              <IconBoxV2.Image rounded src={defaultUserPic} alt='pic' />
+            </IconBoxV2.Figure>
+            <IconBoxV2.Description>
+              <IconBoxV2.Info>application name</IconBoxV2.Info>
+              <IconBoxV2.Info>Version:&nbsp;3.9.3</IconBoxV2.Info>
+              <IconBoxV2.Info>Vendor:&nbsp;example</IconBoxV2.Info>
+              <IconBoxV2.Info>
+                Enterprise:&nbsp;shenny_Enterprise
+              </IconBoxV2.Info>
+            </IconBoxV2.Description>
+            <IconBoxV2.Tool></IconBoxV2.Tool>
+          </IconBoxV2.Body>
+        </IconBoxV2>
+      </Column>
+      <Column desktop={1}>
+        <IconBoxV2 {...args}>
+          <IconBoxV2.Body>
+            <IconBoxV2.Figure paddingRight>
+              <IconBoxV2.Image rounded src={defaultUserPic} alt='pic' />
+            </IconBoxV2.Figure>
+            <IconBoxV2.Description>
+              <IconBoxV2.Info>application name</IconBoxV2.Info>
+              <IconBoxV2.Info>Version:&nbsp;3.9.3</IconBoxV2.Info>
+              <IconBoxV2.Info>Vendor:&nbsp;example</IconBoxV2.Info>
+              <IconBoxV2.Info>
+                Enterprise:&nbsp;shenny_Enterpriseshenny_Enterpriseshenny_Enterpriseshenny_Enterpriseshenny_Enterprise;shenny_Enterpriseshenny_Enterpriseshenny_Enterpriseshenny_Enterpriseshenny_Enterprise
+              </IconBoxV2.Info>
+            </IconBoxV2.Description>
+            <IconBoxV2.Tool></IconBoxV2.Tool>
+          </IconBoxV2.Body>
+        </IconBoxV2>
+      </Column>
+    </Grid>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  fullHeight: true,
+};
+
+export default metadata;
+export { Default };

package/src/iconbox/__test__/ApplicationIconBox.test.js

@@ -0,0 +1,77 @@
+import { render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import ApplicationIconBox from '../ApplicationIconBox';
+
+describe('Test ApplicationIconBox Component', () => {
+  test('render without props', () => {
+    render(
+      <ApplicationIconBox data-testid='wrapper'>
+        <ApplicationIconBox.Body data-testid='body'>
+          <ApplicationIconBox.Figure>
+            <ApplicationIconBox.Image src='fake.png' alt='fake image' />
+          </ApplicationIconBox.Figure>
+          <ApplicationIconBox.Description>
+            <ApplicationIconBox.Title>Title</ApplicationIconBox.Title>
+            <ApplicationIconBox.Content>Content</ApplicationIconBox.Content>
+          </ApplicationIconBox.Description>
+        </ApplicationIconBox.Body>
+      </ApplicationIconBox>
+    );
+
+    const wrapper = screen.getByTestId('wrapper');
+    expect(wrapper).toBeInTheDocument();
+    expect(wrapper).not.toHaveStyle('cursor: pointer');
+
+    const body = screen.getByTestId('body');
+    expect(body).toBeInTheDocument();
+    expect(body).not.toHaveStyle({
+      flexDirection: 'row',
+      textAlign: 'center',
+    });
+    expect(body).not.toHaveStyleRule('border-color', 'var(--border-color)');
+    expect(body).not.toHaveStyleRule('border-radius', 'var(--border-radius)');
+    expect(body).not.toHaveStyleRule('box-shadow', 'var(--box-shadow)');
+
+    const image = screen.getByRole('img');
+    expect(screen.getByRole('figure')).toBeInTheDocument();
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', 'fake.png');
+    expect(image).toHaveAttribute('alt', 'fake image');
+
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  test('render with props', () => {
+    render(
+      <ApplicationIconBox data-testid='wrapper' clickable>
+        <ApplicationIconBox.Body
+          data-testid='body'
+          horizontal
+          alignCenter
+          selected
+        >
+          <ApplicationIconBox.Figure>
+            <ApplicationIconBox.Image src='fake.png' alt='fake image' />
+          </ApplicationIconBox.Figure>
+          <ApplicationIconBox.Description>
+            <ApplicationIconBox.Title>Title</ApplicationIconBox.Title>
+            <ApplicationIconBox.Content>Content</ApplicationIconBox.Content>
+          </ApplicationIconBox.Description>
+        </ApplicationIconBox.Body>
+      </ApplicationIconBox>
+    );
+
+    const wrapper = screen.getByTestId('wrapper');
+    expect(wrapper).toHaveStyle('cursor: pointer');
+
+    const body = screen.getByTestId('body');
+    expect(body).toHaveStyle({
+      flexDirection: 'row',
+      textAlign: 'center',
+    });
+    expect(body).toHaveStyleRule('border-color', 'var(--border-color)');
+    expect(body).toHaveStyleRule('border-radius', 'var(--border-radius)');
+    expect(body).toHaveStyleRule('box-shadow', 'var(--box-shadow)');
+  });
+});

package/src/iconbox/__test__/IconBox.test.js

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import IconBox from '../IconBox';
+
+describe('Test IconBox Component', () => {
+  test('render', () => {
+    render(
+      <IconBox icon='fake.png' title='fake'>
+        <p>Fake children</p>
+      </IconBox>
+    );
+
+    const imageElement = screen.getByRole('img');
+    expect(imageElement).toHaveAttribute('src', 'fake.png');
+    expect(imageElement).toHaveAttribute('alt', "fake's icon");
+
+    const titleElement = screen.getByText('fake');
+    expect(titleElement).toBeInTheDocument();
+
+    const paragraphElement = screen.getByText('Fake children');
+    expect(paragraphElement).toBeInTheDocument();
+  });
+});

package/src/iconbox/__test__/IconBoxFigure.test.js

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import IconBoxFigure from '../subComponent/IconBoxFigure';
+
+describe('Test IconBoxFigure Component', () => {
+  test('margin', () => {
+    render(<IconBoxFigure marginRight />);
+    expect(screen.getByRole('figure')).toHaveStyle(
+      'margin-right: var(--spacing)'
+    );
+  });
+
+  test('padding', () => {
+    const { rerender } = render(<IconBoxFigure paddingRight />);
+
+    const element = screen.getByRole('figure');
+    expect(element).toHaveStyle('padding-right: var(--spacing)');
+
+    rerender(<IconBoxFigure paddingRightS />);
+    expect(element).toHaveStyle('padding-right: var(--spacing-s)');
+
+    rerender(<IconBoxFigure paddingBottomS />);
+    expect(element).toHaveStyle('padding-bottom: var(--spacing-s)');
+  });
+
+  test('size', () => {
+    const { rerender } = render(<IconBoxFigure />);
+
+    const element = screen.getByRole('figure');
+    expect(element).toHaveStyle('flex: 0 0 120px');
+
+    rerender(<IconBoxFigure sizeS />);
+    expect(element).toHaveStyle('flex-basis: 80px');
+
+    rerender(<IconBoxFigure sizeXS />);
+    expect(element).toHaveStyle('flex-basis: 40px');
+  });
+});

package/src/iconbox/__test__/IconBoxImage.test.js

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import IconBoxImage from '../subComponent/IconBoxImage';
+
+describe('Test IconBoxImage Component', () => {
+  test('default attributes', () => {
+    render(<IconBoxImage src='fake.png' alt={'fake icon'} />);
+    const element = screen.getByRole('img');
+    expect(element).toHaveAttribute('crossorigin');
+    expect(element).toHaveAttribute('src', 'fake.png');
+    expect(element).toHaveAttribute('alt', 'fake icon');
+  });
+
+  test('rounded', () => {
+    render(<IconBoxImage src='fake.png' alt={'fake icon'} rounded />);
+    const element = screen.getByRole('img');
+    expect(element).toHaveStyle('border-radius: var(--border-radius)');
+  });
+
+  test('size', () => {
+    const { rerender } = render(
+      <IconBoxImage src='fake.png' alt={'fake icon'} />
+    );
+    const element = screen.getByRole('img');
+    expect(element).toHaveStyle({ width: '120px', height: '120px' });
+
+    rerender(<IconBoxImage src='fake.png' alt={'fake icon'} sizeS />);
+    expect(element).toHaveStyle({ width: '80px', height: '80px' });
+
+    rerender(<IconBoxImage src='fake.png' alt={'fake icon'} sizeXS />);
+    expect(element).toHaveStyle({ width: '40px', height: '40px' });
+  });
+});