@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.2

package/src/iconbox/IconBoxV2.js

@@ -1,61 +0,0 @@
-import styled, { css } 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);
-  border: 2px solid transparent;
-
-  ${({ fullHeight }) => fullHeight && 'height: calc(100% - var(--spacing));'}
-
-  ${({ selected }) =>
-    selected &&
-    css`
-      border-color: var(--color-primary);
-      background: color-mix(
-        in srgb,
-        var(--color-primary) 10%,
-        var(--color-background1)
-      );
-    `}
-`;
-
-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

@@ -1,53 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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,
-  argTypes: {
-    selected: {
-      control: 'boolean',
-    },
-  },
-};
-
-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} selected>
-          <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,
-  selected: false,
-};
-
-export default metadata;
-export { Default };

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

@@ -1,77 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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' });
-  });
-});

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

@@ -1,51 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import 'jest-styled-components';
-import IconBoxV2 from '../IconBoxV2';
-
-describe('Test IconBoxV2 Component', () => {
-  test('render', () => {
-    const { rerender, container } = render(
-      <IconBoxV2>
-        <IconBoxV2.Body>
-          <IconBoxV2.Figure>
-            <IconBoxV2.Image src='fake.png' alt='fake image' />
-          </IconBoxV2.Figure>
-          <IconBoxV2.Description>
-            <IconBoxV2.Info>Information</IconBoxV2.Info>
-          </IconBoxV2.Description>
-          <IconBoxV2.Tool>
-            <button type='button'>Button</button>
-          </IconBoxV2.Tool>
-        </IconBoxV2.Body>
-      </IconBoxV2>
-    );
-
-    const wrapper = container.firstChild;
-    expect(wrapper).not.toHaveStyleRule('height: calc(100% - var(--spacing))');
-
-    const imageElement = screen.getByRole('img');
-    expect(screen.getByRole('figure')).toBeInTheDocument();
-    expect(imageElement).toHaveAttribute('src', 'fake.png');
-    expect(imageElement).toHaveAttribute('alt', 'fake image');
-
-    expect(screen.getByText('Information')).toBeInTheDocument();
-    expect(screen.getByRole('button')).toBeInTheDocument();
-
-    rerender(
-      <IconBoxV2 fullHeight>
-        <IconBoxV2.Body>
-          <IconBoxV2.Figure>
-            <IconBoxV2.Image src='fake.png' alt='fake image' />
-          </IconBoxV2.Figure>
-          <IconBoxV2.Description>
-            <IconBoxV2.Info>Information</IconBoxV2.Info>
-          </IconBoxV2.Description>
-          <IconBoxV2.Tool>
-            <button type='button'>Button</button>
-          </IconBoxV2.Tool>
-        </IconBoxV2.Body>
-      </IconBoxV2>
-    );
-    expect(wrapper).toHaveStyleRule('height: calc(100% - var(--spacing))');
-  });
-});

package/src/iconbox/bgImageRegistry.js

@@ -1,13 +0,0 @@
-import bgEnterprise from './assets/bg-enterprise.png';
-import bgMerchant from './assets/bg-merchant.png';
-import bgTerminal from './assets/bg-terminal.png';
-import bgUser from './assets/bg-user.png';
-
-const bgImageRegistry = {
-  enterprise: bgEnterprise,
-  merchant: bgMerchant,
-  terminal: bgTerminal,
-  user: bgUser,
-};
-
-export default bgImageRegistry;

package/src/iconbox/index.js

@@ -1,3 +0,0 @@
-export { default as ApplicationIconBox } from './ApplicationIconBox';
-export { default as IconBox } from './IconBox';
-export { default as IconBoxV2 } from './IconBoxV2';

package/src/iconbox/subComponent/IconBoxFigure.js

@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-const IconBoxFigure = styled.figure`
-  flex: 0 0 120px;
-
-  ${({ marginRight }) => marginRight && 'margin-right: var(--spacing);'}
-  ${({ paddingRight }) => paddingRight && 'padding-right: var(--spacing);'}
-  ${({ paddingRightS }) => paddingRightS && 'padding-right: var(--spacing-s);'}
-  ${({ paddingBottomS }) =>
-    paddingBottomS && 'padding-bottom: var(--spacing-s);'}
-
-  ${({ sizeS }) => sizeS && 'flex-basis: 80px;'}
-  ${({ sizeXS }) => sizeXS && 'flex-basis: 40px;'}
-`;
-
-export default IconBoxFigure;

package/src/iconbox/subComponent/IconBoxImage.js

@@ -1,52 +0,0 @@
-import { useContext } from 'react';
-import styled, { ThemeContext } from 'styled-components';
-import iconOverrides from '../../icon/registry';
-
-const Wrapper = styled.span`
-  display: inline-flex;
-  width: 120px;
-  height: 120px;
-  color: ${({ iconColor }) => iconColor || 'var(--color-primary)'};
-  img, svg {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-  ${({ rounded }) => rounded && 'border-radius: var(--border-radius); overflow: hidden;'}
-  ${({ sizeS }) =>
-    sizeS &&
-    `
-      width: 80px;
-      height: 80px;
-    `}
-  ${({ sizeXS }) =>
-    sizeXS &&
-    `
-      width: 40px;
-      height: 40px;
-    `}
-  ${({ size }) =>
-    size &&
-    `
-      width: ${size}px;
-      height: ${size}px;
-    `}
-`;
-
-const IconBoxImage = ({ src: icon, iconKey, iconColor, alt, ...rest }) => {
-  const theme = useContext(ThemeContext);
-  const override = theme?.useModernIcons && iconKey && iconOverrides[iconKey];
-  const IconComponent = override || icon;
-  const isComponent = typeof IconComponent === 'function';
-  return (
-    <Wrapper iconColor={iconColor} {...rest}>
-      {isComponent ? (
-        <IconComponent />
-      ) : (
-        <img crossOrigin='anonymous' src={IconComponent} alt={alt} />
-      )}
-    </Wrapper>
-  );
-};
-
-export default IconBoxImage;