@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/form/__test__/Searchbox.test.js

@@ -0,0 +1,50 @@
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Searchbox from '../Searchbox';
+
+describe('Test Searchbox', () => {
+  const onSearch = jest.fn();
+
+  test('render', () => {
+    render(<Searchbox onSearch={onSearch} />);
+
+    const searchbox = screen.getByRole('textbox');
+    expect(searchbox).toBeInTheDocument();
+    expect(searchbox).not.toHaveFocus();
+  });
+
+  test('autoFocus', () => {
+    render(<Searchbox onSearch={onSearch} autoFocus />);
+
+    const searchbox = screen.getByRole('textbox');
+    expect(searchbox).toHaveFocus();
+  });
+
+  test('callback', () => {
+    render(<Searchbox autoFocus onSearch={onSearch} />);
+    const searchbox = screen.getByRole('textbox');
+    const searchIcon = screen.getByRole('button', { name: 'search button' });
+
+    userEvent.type(searchbox, 'test');
+    expect(onSearch).toBeCalledTimes(0);
+    expect(searchbox).toHaveValue('test');
+
+    const closeIcon = screen.getByRole('button', {
+      name: 'clear button',
+    });
+    expect(closeIcon).toBeInTheDocument();
+
+    userEvent.click(closeIcon);
+    expect(searchbox).toHaveValue('');
+    expect(closeIcon).not.toBeInTheDocument();
+    expect(onSearch).toBeCalledTimes(1);
+
+    userEvent.click(searchIcon);
+    expect(onSearch).toBeCalledTimes(2);
+    expect(onSearch).toHaveBeenLastCalledWith('');
+
+    userEvent.type(searchbox, 'test{enter}');
+    expect(onSearch).toBeCalledTimes(3);
+    expect(onSearch).toHaveBeenLastCalledWith('test');
+  });
+});

package/src/form/__test__/Textarea.test.js

@@ -0,0 +1,25 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import Textarea from '../Textarea';
+import 'jest-styled-components';
+
+describe('test textarea', () => {
+  test('render textarea', () => {
+    const onChange = jest.fn();
+    render(
+      <Textarea rows='4' value='test' onChange={onChange} maxLength='512' />
+    );
+    const taxtarea = screen.getByRole('textbox');
+
+    expect(taxtarea).toBeInTheDocument();
+    expect(taxtarea.value).toBe('test');
+    expect(taxtarea).toHaveAttribute('maxlength', '512');
+    expect(taxtarea).toHaveAttribute('rows', '4');
+
+    fireEvent.change(taxtarea, { target: { value: 'changeValue' } });
+
+    expect(onChange).toBeCalledTimes(1);
+    expect(taxtarea).toHaveStyleRule('color', 'var(--font-on-mute)', {
+      modifier: '::placeholder',
+    });
+  });
+});

package/src/form/index.js

@@ -0,0 +1,14 @@
+export { default as Checkbox } from './Checkbox';
+export { default as Fieldset } from './Fieldset';
+export { default as FormItem } from './FormItem';
+export { default as Input } from './Input';
+export { default as Label } from './Label';
+export { default as MutedText } from './MutedText';
+export { default as PasswordInput } from './PasswordInput';
+export { default as RadioButton } from './RadioButton';
+export { default as Searchbox } from './Searchbox';
+export { default as Slider } from './Slider';
+export { default as SwitchButton } from './SwitchButton';
+export { default as Textarea } from './Textarea';
+export { default as TreeView } from './TreeView';
+export { default as SearchSelect } from './SearchSelect';

package/src/grid/Column.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import media from '../styles/mixin/media';
+
+const Column = styled.div`
+  padding: 0 calc(var(--spacing) / 2);
+  grid-column-end: span ${({ desktop }) => desktop};
+
+  ${({ laptop }) => {
+    return (
+      laptop &&
+      media.laptop`
+        grid-column-end: span ${laptop};
+      `
+    );
+  }}
+
+  ${({ tablet }) => {
+    return (
+      tablet &&
+      media.tablet`
+        grid-column-end: span ${tablet};
+      `
+    );
+  }}
+
+  ${({ mobile }) => {
+    return (
+      mobile &&
+      media.mobile`
+        grid-column-end: span ${mobile};
+      `
+    );
+  }}
+`;
+
+export default Column;

package/src/grid/Grid.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(${({ columns }) => columns}, minmax(0, 1fr));
+  margin: 0 calc(var(--spacing) * -1 / 2);
+
+  > * {
+    grid-column-end: span ${({ columns }) => columns};
+  }
+
+  ${({ alignCenter }) => alignCenter && 'align-items: center;'}
+`;
+
+export default Grid;

package/src/grid/__stories__/Grid.stories.js

@@ -0,0 +1,38 @@
+import Grid from '../Grid';
+import Column from '../Column';
+
+const metadata = {
+  title: 'Grid/Grid',
+  component: Grid,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: '700px',
+          background: '#13142E',
+          padding: '10px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const Template = (args) => (
+  <Grid {...args}>
+    <Column {...args}>Grid 1</Column>
+    <Column {...args}>Grid 2</Column>
+  </Grid>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  columns: '2',
+  desktop: '1',
+  tablet: '',
+  mobile: '',
+};
+
+export default metadata;
+export { Default };

package/src/grid/__test__/Grid.test.js

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import Grid from '../Grid';
+import Column from '../Column';
+
+describe('Test Grid Component', () => {
+  test('render grid', () => {
+    const { rerender } = render(<Grid columns={12} data-testid='grid'></Grid>);
+
+    const grid = screen.getByTestId('grid');
+    expect(grid).toHaveStyle(
+      'grid-template-columns: repeat(12,minmax(0,1fr));'
+    );
+    expect(grid).not.toHaveStyle('align-items: center;');
+
+    rerender(<Grid columns={12} alignCenter data-testid='grid'></Grid>);
+    expect(grid).toHaveStyle('align-items: center;');
+  });
+
+  test('render column', () => {
+    render(
+      <Grid columns={12} data-testid='grid'>
+        <Column desktop={3} laptop={4} tablet={6} mobile={12}>
+          responsive
+        </Column>
+      </Grid>
+    );
+
+    const responsiveColumn = screen.getByText('responsive');
+    expect(responsiveColumn).toHaveStyle('grid-column-end: span 3');
+
+    expect(responsiveColumn).toHaveStyleRule('grid-column-end', 'span 4', {
+      media: '(max-width:1200px)',
+    });
+
+    expect(responsiveColumn).toHaveStyleRule('grid-column-end', 'span 6', {
+      media: '(max-width:768px)',
+    });
+
+    expect(responsiveColumn).toHaveStyleRule('grid-column-end', 'span 12', {
+      media: '(max-width:576px)',
+    });
+  });
+});

package/src/grid/index.js

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

package/src/heading/Heading1.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Heading1 = styled.h1`
+  font-size: var(--font-h1);
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  ${({ center }) => center && 'text-align: center;'}
+`;
+
+export default Heading1;

package/src/heading/Heading2.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const Heading2 = styled.h2`
+  font-size: var(--font-h2);
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  ${({ center }) => center && 'text-align: center;'}
+
+  ${({ marginBottom }) => marginBottom && 'margin-bottom: var(--spacing);'}
+`;
+
+export default Heading2;

package/src/heading/Heading3.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const Heading3 = styled.h3`
+  font-size: var(--font-h3);
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  ${({ center }) => center && 'text-align: center;'}
+
+  ${({ fontWeightNormal }) => fontWeightNormal && 'font-weight: normal;'}
+
+  ${({ marginBottomS }) => marginBottomS && 'margin-bottom: var(--spacing-s);'}
+
+  ${({ marginBottomXS }) =>
+    marginBottomXS && 'margin-bottom: var(--spacing-xs);'}
+
+  ${({ paddingBottomXS }) =>
+    paddingBottomXS && 'padding-bottom: var(--spacing-xs);'}
+`;
+
+export default Heading3;

package/src/heading/__stories__/Heading1.stories.js

@@ -0,0 +1,24 @@
+import Heading1 from '../Heading1';
+
+const metadata = {
+  title: 'Heading/Heading',
+  component: Heading1,
+  argTypes: {
+    children: {
+      description: '這是個標題文字',
+      defaultValue: { summary: 'Large' },
+    },
+  },
+};
+
+const Template = (args) => {
+  return <Heading1 {...args} />;
+};
+
+const Large = Template.bind({});
+Large.args = {
+  children: 'Heading1',
+};
+
+export default metadata;
+export { Large };

package/src/heading/__stories__/Heading2.stories.js

@@ -0,0 +1,24 @@
+import Heading2 from '../Heading2';
+
+const metadata = {
+  title: 'Heading/Heading',
+  component: Heading2,
+  argTypes: {
+    children: {
+      description: '這是個標題文字',
+      defaultValue: { summary: 'Medium' },
+    },
+  },
+};
+
+const Template = (args) => {
+  return <Heading2 {...args} />;
+};
+
+const Medium = Template.bind({});
+Medium.args = {
+  children: 'Heading2',
+};
+
+export default metadata;
+export { Medium };

package/src/heading/__stories__/Heading3.stories.js

@@ -0,0 +1,24 @@
+import Heading3 from '../Heading3';
+
+const metadata = {
+  title: 'Heading/Heading',
+  component: Heading3,
+  argTypes: {
+    children: {
+      description: '這是個標題文字',
+      defaultValue: { summary: 'Small' },
+    },
+  },
+};
+
+const Template = (args) => {
+  return <Heading3 {...args} />;
+};
+
+const Small = Template.bind({});
+Small.args = {
+  children: 'Heading3',
+};
+
+export default metadata;
+export { Small };

package/src/heading/__test__/Heading1.test.js

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import Heading1 from '../Heading1';
+
+describe('test heading1', () => {
+  test('render Heading1', () => {
+    render(<Heading1>test</Heading1>);
+
+    expect(screen.getByRole('heading')).toBeInTheDocument();
+    expect(screen.getByRole('heading')).not.toHaveStyle({
+      textAlign: 'center',
+    });
+  });
+  test('parameter', () => {
+    render(<Heading1 center>test</Heading1>);
+
+    expect(screen.getByRole('heading')).toBeInTheDocument();
+    expect(screen.getByRole('heading')).toHaveStyle({
+      textAlign: 'center',
+    });
+  });
+});

package/src/heading/__test__/Heading2.test.js

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import Heading2 from '../Heading2';
+import 'jest-styled-components';
+
+describe('test heading2', () => {
+  test('render Heading2', () => {
+    render(<Heading2>test</Heading2>);
+
+    expect(screen.getByRole('heading')).toBeInTheDocument();
+    expect(screen.getByRole('heading')).not.toHaveStyle({
+      textAlign: 'center',
+    });
+    expect(screen.getByRole('heading')).not.toHaveStyleRule(
+      'margin-bottom',
+      'var(--spacing)'
+    );
+  });
+  test('parameter', () => {
+    render(
+      <Heading2 marginBottom center>
+        test
+      </Heading2>
+    );
+
+    expect(screen.getByRole('heading')).toBeInTheDocument();
+    expect(screen.getByRole('heading')).toHaveStyle({
+      textAlign: 'center',
+    });
+    expect(screen.getByRole('heading')).toHaveStyleRule(
+      'margin-bottom',
+      'var(--spacing)'
+    );
+  });
+});

package/src/heading/__test__/Heading3.test.js

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import Heading3 from '../Heading3';
+import 'jest-styled-components';
+
+describe('test heading3', () => {
+  test('render Heading3', () => {
+    render(<Heading3>test</Heading3>);
+
+    expect(screen.getByRole('heading')).toBeInTheDocument();
+    expect(screen.getByRole('heading')).not.toHaveStyle({
+      textAlign: 'center',
+      fontWeight: 'normal',
+    });
+
+    expect(screen.getByRole('heading')).not.toHaveStyleRule(
+      'margin-bottom',
+      'var(--spacing-xs)'
+    );
+    expect(screen.getByRole('heading')).not.toHaveStyleRule(
+      'padding-bottom',
+      'var(--spacing-xs)'
+    );
+  });
+  test('parameter', () => {
+    render(
+      <Heading3 center marginBottomXS fontWeightNormal paddingBottomXS>
+        test
+      </Heading3>
+    );
+
+    expect(screen.getByRole('heading')).toBeInTheDocument();
+    expect(screen.getByRole('heading')).toHaveStyle({
+      textAlign: 'center',
+      fontWeight: 'normal',
+    });
+
+    expect(screen.getByRole('heading')).toHaveStyleRule(
+      'margin-bottom',
+      'var(--spacing-xs)'
+    );
+    expect(screen.getByRole('heading')).toHaveStyleRule(
+      'padding-bottom',
+      'var(--spacing-xs)'
+    );
+  });
+});

package/src/heading/index.js

@@ -0,0 +1,3 @@
+export { default as Heading1 } from './Heading1';
+export { default as Heading2 } from './Heading2';
+export { default as Heading3 } from './Heading3';

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/icon/assets/android.jsx

@@ -0,0 +1,10 @@
+const AndroidIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M20.3793 17.6569H3.62069C3.45607 17.6569 3.2982 17.5915 3.1818 17.4751C3.06539 17.3587 3 17.2008 3 17.0362C3 11.059 6.70241 6.88171 12 6.88171C17.2976 6.88171 21 11.059 21 17.0362C21 17.2008 20.9346 17.3587 20.8182 17.4751C20.7018 17.5915 20.5439 17.6569 20.3793 17.6569ZM4.26 16.4155H19.7586C19.5103 11.4314 16.4566 8.12309 12 8.12309C7.54345 8.12309 4.48966 11.4314 4.2569 16.4155H4.26Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
+	<path d="M17.1145 9.85791C16.9547 9.85728 16.8013 9.79502 16.6862 9.68412C16.5664 9.57198 16.4959 9.41695 16.49 9.25294C16.4842 9.08893 16.5436 8.92929 16.6552 8.80895L19.1597 6.19584C19.2737 6.07526 19.4309 6.0049 19.5968 6.00025C19.7626 5.99559 19.9236 6.05702 20.0441 6.17102C20.1647 6.28501 20.2351 6.44224 20.2397 6.60811C20.2444 6.77399 20.183 6.93492 20.069 7.0555L17.5645 9.65929C17.507 9.72131 17.4374 9.77093 17.36 9.80508C17.2826 9.83924 17.1991 9.85721 17.1145 9.85791Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
+	<path d="M6.88553 9.8579C6.80094 9.8572 6.71739 9.83923 6.64001 9.80507C6.56263 9.77092 6.49304 9.7213 6.43552 9.65928L3.93104 7.05549C3.81704 6.93655 3.75496 6.7772 3.75846 6.61249C3.76195 6.44779 3.83073 6.29121 3.94966 6.17721C4.0686 6.06322 4.22795 6.00113 4.39266 6.00463C4.55737 6.00812 4.71394 6.0769 4.82794 6.19583L7.34484 8.80894C7.458 8.92767 7.51956 9.08638 7.51607 9.25036C7.51259 9.41435 7.44433 9.57029 7.32621 9.68411C7.20807 9.79802 7.04962 9.86051 6.88553 9.8579Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
+	<path d="M9.04864 13.3493C8.88402 13.3493 8.72615 13.2839 8.60974 13.1675C8.49334 13.0511 8.42795 12.8932 8.42795 12.7286V12.2693C8.42795 12.1047 8.49334 11.9468 8.60974 11.8304C8.72615 11.714 8.88402 11.6486 9.04864 11.6486C9.21325 11.6486 9.37113 11.714 9.48753 11.8304C9.60393 11.9468 9.66933 12.1047 9.66933 12.2693V12.7286C9.66933 12.8932 9.60393 13.0511 9.48753 13.1675C9.37113 13.2839 9.21325 13.3493 9.04864 13.3493Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
+	<path d="M14.9514 13.3493C14.7868 13.3493 14.6289 13.2839 14.5125 13.1675C14.3961 13.0511 14.3307 12.8932 14.3307 12.7286V12.2693C14.3307 12.1047 14.3961 11.9468 14.5125 11.8304C14.6289 11.714 14.7868 11.6486 14.9514 11.6486C15.116 11.6486 15.2739 11.714 15.3903 11.8304C15.5067 11.9468 15.5721 12.1047 15.5721 12.2693V12.7286C15.5721 12.8932 15.5067 13.0511 15.3903 13.1675C15.2739 13.2839 15.116 13.3493 14.9514 13.3493Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
+  </svg>
+);
+export default AndroidIcon;

package/src/icon/assets/app-management.jsx

@@ -0,0 +1,10 @@
+const AppManagementIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M9.375 18H5C3.89543 18 3 17.1046 3 16V6C3 4.89543 3.89543 4 5 4H18C19.1046 4 20 4.89543 20 6V8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+	<path d="M3 8H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+	<path d="M4.0442 13H9.2652" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+	<path d="M10.7494 16.5954C10.3643 15.9588 10.3643 15.1612 10.7494 14.5246L11.445 13.375L12.2608 12.1225C12.6242 11.5645 13.2415 11.224 13.9073 11.2143L15.5615 11.19L17.2156 11.2143C17.8814 11.224 18.4987 11.5645 18.8621 12.1225L19.6779 13.375L20.3735 14.5246C20.7587 15.1612 20.7587 15.9588 20.3735 16.5954L19.6779 17.745L18.8621 18.9975C18.4987 19.5555 17.8814 19.896 17.2156 19.9057L15.5615 19.93L13.9073 19.9057C13.2415 19.896 12.6242 19.5555 12.2608 18.9975L11.445 17.745L10.7494 16.5954Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+	<ellipse cx="17.2707" cy="16" rx="1.08771" ry="1" fill="currentColor"/>
+  </svg>
+);
+export default AppManagementIcon;

package/src/icon/assets/appStore.jsx

@@ -0,0 +1,6 @@
+const AppStoreIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M16.3529 14.2308V20M19 16.5385H13.2308M6.30769 10.7692H7.46154C8.54939 10.7692 9.09332 10.7692 9.43128 10.4313C9.76923 10.0933 9.76923 9.54939 9.76923 8.46154V7.30769C9.76923 6.21984 9.76923 5.67591 9.43128 5.33795C9.09332 5 8.54939 5 7.46154 5H6.30769C5.21984 5 4.67591 5 4.33795 5.33795C4 5.67591 4 6.21984 4 7.30769V8.46154C4 9.54939 4 10.0933 4.33795 10.4313C4.67591 10.7692 5.21984 10.7692 6.30769 10.7692ZM6.30769 20H7.46154C8.54939 20 9.09332 20 9.43128 19.662C9.76923 19.3241 9.76923 18.7802 9.76923 17.6923V16.5385C9.76923 15.4506 9.76923 14.9067 9.43128 14.5687C9.09332 14.2308 8.54939 14.2308 7.46154 14.2308H6.30769C5.21984 14.2308 4.67591 14.2308 4.33795 14.5687C4 14.9067 4 15.4506 4 16.5385V17.6923C4 18.7802 4 19.3241 4.33795 19.662C4.67591 20 5.21984 20 6.30769 20ZM15.5385 10.7692H16.6923C17.7802 10.7692 18.3241 10.7692 18.662 10.4313C19 10.0933 19 9.54939 19 8.46154V7.30769C19 6.21984 19 5.67591 18.662 5.33795C18.3241 5 17.7802 5 16.6923 5H15.5385C14.4506 5 13.9067 5 13.5687 5.33795C13.2308 5.67591 13.2308 6.21984 13.2308 7.30769V8.46154C13.2308 9.54939 13.2308 10.0933 13.5687 10.4313C13.9067 10.7692 14.4506 10.7692 15.5385 10.7692Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  </svg>
+);
+export default AppStoreIcon;

package/src/icon/assets/battery.jsx

@@ -0,0 +1,15 @@
+const TradeyeIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#clip0_50_590)">
+	<rect x="8" y="7" width="8" height="13" rx="1" stroke="currentColor" stroke-width="1.5"/>
+	<rect x="10" y="16" width="4" height="2" rx="0.8" fill="currentColor"/>
+	<path d="M13 3C13.9428 3 14.4141 3.00008 14.707 3.29297C14.9999 3.58586 15 4.05719 15 5H9C9 4.05719 9.00008 3.58586 9.29297 3.29297C9.58586 3.00008 10.0572 3 11 3H13Z" fill="currentColor"/>
+	</g>
+	<defs>
+	<clipPath id="clip0_50_590">
+	<rect width="24" height="24" fill="currentColor"/>
+	</clipPath>
+	</defs>
+  </svg>
+);
+export default TradeyeIcon;

package/src/icon/assets/bill.jsx

@@ -0,0 +1,10 @@
+const BillIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="3" y="6" width="18" height="12" rx="2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+	<path d="M6 9H8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+	<path d="M16 15H18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+	<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  </svg>
+);
+
+export default BillIcon;

package/src/icon/assets/campaign.jsx

@@ -0,0 +1,9 @@
+const CampaignIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M4.625 15H9V19.375M9 15L4.625 19.375" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+	<path d="M12.5 19.375H16.375C18.5841 19.375 20.375 17.5841 20.375 15.375V7.625C20.375 5.41586 18.5841 3.625 16.375 3.625H8.625C6.41586 3.625 4.625 5.41586 4.625 7.625V11.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+	<path d="M9.4375 8.4375L12.1716 12.3866C12.8251 13.3306 14.1375 13.5317 15.0438 12.8269L15.9189 12.1463C16.715 11.5271 17.8477 11.5976 18.5609 12.3108L20.375 14.1248" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+	<circle cx="16.4375" cy="7.5625" r="1.3125" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  </svg>
+);
+export default CampaignIcon;

package/src/icon/assets/casstore.jsx

@@ -0,0 +1,8 @@
+const casstore = () => (
+  <svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M4.6875 9.0236C4.6875 8.42248 4.6875 8.12191 4.77332 7.83848C4.85913 7.55505 5.02585 7.30497 5.3593 6.8048L5.58337 6.4687C6.16465 5.59677 6.4553 5.1608 6.89748 4.92415C7.33967 4.6875 7.86364 4.6875 8.91157 4.6875H16.0884C17.1364 4.6875 17.6603 4.6875 18.1025 4.92415C18.5447 5.1608 18.8353 5.59677 19.4166 6.4687L19.6407 6.8048C19.9741 7.30497 20.1409 7.55505 20.2267 7.83848C20.3125 8.12191 20.3125 8.42248 20.3125 9.0236V16.3125C20.3125 18.1981 20.3125 19.1409 19.7267 19.7267C19.1409 20.3125 18.1981 20.3125 16.3125 20.3125H8.6875C6.80188 20.3125 5.85907 20.3125 5.27329 19.7267C4.6875 19.1409 4.6875 18.1981 4.6875 16.3125V9.0236Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+	<path d="M4.6875 9.89584H20.3125" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+	<path d="M9.89575 10.0458C9.89575 9.963 9.96291 9.89584 10.0458 9.89584H14.9541C15.0369 9.89584 15.1041 9.963 15.1041 10.0458V14.3094C15.1041 14.6592 14.7225 14.8752 14.4226 14.6953L12.6285 13.6189C12.5494 13.5713 12.4505 13.5713 12.3713 13.6189L10.5773 14.6953C10.2773 14.8752 9.89575 14.6592 9.89575 14.3094V10.0458Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  </svg>
+);
+export default casstore;

package/src/icon/assets/dashboard.jsx

@@ -0,0 +1,6 @@
+const DashboardIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M7.53743 5.68697L8.02022 6.26091V6.26091L7.53743 5.68697ZM16.4626 5.68697L16.9454 5.11302V5.11302L16.4626 5.68697ZM17.6054 6.64832L18.0882 6.07438L17.6054 6.64832ZM6.39457 6.64832L5.91178 6.07438V6.07438L6.39457 6.64832ZM20 11.7577H19.25V16.5137H20H20.75V11.7577H20ZM15.4286 21V20.25H8.57143V21V21.75H15.4286V21ZM4 16.5137H4.75V11.7577H4H3.25V16.5137H4ZM6.39457 6.64832L6.87737 7.22226L8.02022 6.26091L7.53743 5.68697L7.05464 5.11302L5.91178 6.07438L6.39457 6.64832ZM16.4626 5.68697L15.9798 6.26091L17.1226 7.22226L17.6054 6.64832L18.0882 6.07438L16.9454 5.11302L16.4626 5.68697ZM7.53743 5.68697L8.02022 6.26091C9.09969 5.35288 9.85707 4.71757 10.4996 4.3011C11.1242 3.89622 11.5648 3.75 12 3.75V3V2.25C11.1669 2.25 10.4409 2.55161 9.68373 3.04238C8.94443 3.52157 8.10468 4.22974 7.05464 5.11302L7.53743 5.68697ZM16.4626 5.68697L16.9454 5.11302C15.8953 4.22974 15.0556 3.52157 14.3163 3.04238C13.5591 2.55161 12.8331 2.25 12 2.25V3V3.75C12.4352 3.75 12.8758 3.89622 13.5004 4.3011C14.1429 4.71757 14.9003 5.35288 15.9798 6.26091L16.4626 5.68697ZM8.57143 21V20.25C7.47311 20.25 6.72344 20.2485 6.16149 20.1743C5.61968 20.1028 5.36644 19.9762 5.19479 19.8077L4.66947 20.343L4.14415 20.8783C4.64197 21.3668 5.26221 21.5687 5.96527 21.6614C6.64818 21.7515 7.51475 21.75 8.57143 21.75V21ZM4 16.5137H3.25C3.25 17.5495 3.24835 18.4033 3.34062 19.0768C3.43606 19.7734 3.64436 20.3878 4.14415 20.8783L4.66947 20.343L5.19479 19.8077C5.02511 19.6412 4.89868 19.3983 4.82674 18.8732C4.75165 18.3251 4.75 17.5927 4.75 16.5137H4ZM20 16.5137H19.25C19.25 17.5927 19.2483 18.3251 19.1733 18.8732C19.1013 19.3983 18.9749 19.6412 18.8052 19.8077L19.3305 20.343L19.8559 20.8783C20.3556 20.3878 20.5639 19.7734 20.6594 19.0768C20.7517 18.4033 20.75 17.5495 20.75 16.5137H20ZM15.4286 21V21.75C16.4853 21.75 17.3518 21.7515 18.0347 21.6614C18.7378 21.5687 19.358 21.3668 19.8559 20.8783L19.3305 20.343L18.8052 19.8077C18.6336 19.9762 18.3803 20.1028 17.8385 20.1743C17.2766 20.2485 16.5269 20.25 15.4286 20.25V21ZM20 11.7577H20.75C20.75 10.3045 20.7665 9.34173 20.3654 8.48591L19.6863 8.80419L19.0072 9.12246C19.2335 9.60522 19.25 10.1653 19.25 11.7577H20ZM17.6054 6.64832L17.1226 7.22226C18.3542 8.25828 18.78 8.63772 19.0072 9.12246L19.6863 8.80419L20.3654 8.48591C19.9653 7.63207 19.2129 7.02046 18.0882 6.07438L17.6054 6.64832ZM4 11.7577H4.75C4.75 10.1653 4.76654 9.60522 4.99279 9.12246L4.31367 8.80419L3.63455 8.48591C3.23346 9.34173 3.25 10.3045 3.25 11.7577H4ZM6.39457 6.64832L5.91178 6.07438C4.78708 7.02046 4.03472 7.63207 3.63455 8.48591L4.31367 8.80419L4.99279 9.12246C5.21997 8.63772 5.64575 8.25828 6.87737 7.22226L6.39457 6.64832ZM10.3354 14.2705V15.0205H13.6646V14.2705V13.5205H10.3354V14.2705ZM14.8571 15.4409H14.1071V21H14.8571H15.6071V15.4409H14.8571ZM9.14286 15.4409H8.39286V21H9.14286H9.89286V15.4409H9.14286ZM13.6646 14.2705V15.0205C13.9224 15.0205 14.1071 15.2219 14.1071 15.4409H14.8571H15.6071C15.6071 14.3671 14.7241 13.5205 13.6646 13.5205V14.2705ZM10.3354 14.2705V13.5205C9.27591 13.5205 8.39286 14.3671 8.39286 15.4409H9.14286H9.89286C9.89286 15.2219 10.0776 15.0205 10.3354 15.0205V14.2705Z" fill="currentColor"/>
+  </svg>
+);
+export default DashboardIcon;

package/src/icon/assets/enterprise.jsx

@@ -0,0 +1,15 @@
+const EnterpriseIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M13.7251 3.78484L13.7395 20.1898H4V3.77827C4 3.34419 4.36133 3 4.77016 3H12.9879C13.3968 3 13.7251 3.35077 13.7251 3.78484Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+	<path d="M20.1671 8.23958V20.1876H13.7251V7.45035H19.4507C19.8595 7.45035 20.1671 7.8055 20.1671 8.23958Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+	<path d="M6.80809 6.91689L6.80809 5.98151" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+	<path d="M10.332 6.91689L10.332 5.98151" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+	<path d="M6.80809 11.5938L6.80809 10.6584" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+	<path d="M10.332 11.5938L10.332 10.6584" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+	<path d="M6.80809 16.2707L6.80809 15.3354" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+	<path d="M10.332 16.2707L10.332 15.3354" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+	<path d="M16.9392 16.2707L16.9392 15.3354" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+	<path d="M16.9392 11.5938L16.9392 10.6584" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+  </svg>
+);
+export default EnterpriseIcon;