@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/image/__test__/UploadImage.test.js

@@ -0,0 +1,315 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { configure } from '@testing-library/dom';
+import UploadImage from '../UploadImage';
+import CustomToastContainer from '../../toast/CustomToastContainer';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key) => key }),
+}));
+
+// class
+global.DataTransfer = function DataTransfer() {
+  let files = [];
+
+  const items = {
+    add: (croppedImageFile) => {
+      files.push(croppedImageFile);
+    },
+  };
+  return {
+    dropEffect: 'none',
+    effectAllowed: 'none',
+    files: files,
+    items: items,
+    types: [],
+  };
+};
+let mockRef = {
+  current: null,
+};
+
+jest.mock('@cashub/utils', () => {
+  const originalModule = jest.requireActual('@cashub/utils');
+
+  return {
+    ...originalModule,
+    getBase64DataUrlFromFile: (file, callback) => {
+      callback('data:image/png;base64,Image Content');
+    },
+  };
+});
+
+describe('Test UploadImage Component', () => {
+  const changeFile = new File(['Image Content'], 'image1.jpg', {
+    type: 'image/jpg',
+  });
+  const changeErrorFile = new File(['Image Content'], 'image2.tiff', {
+    type: 'image/tiff',
+  });
+  const changeSizeErrorFile = new File(['Image Content'], 'image3.jpg', {
+    type: 'image/jpg',
+  });
+  Object.defineProperty(changeSizeErrorFile, 'size', { value: 999999999 });
+
+  beforeEach(() => {
+    window.URL.createObjectURL = jest.fn(() => 'image url');
+  });
+
+  beforeAll(() => {
+    configure({ testIdAttribute: 'id' });
+  });
+
+  afterEach(() => {
+    window.URL.createObjectURL.mockReset();
+  });
+
+  test('render component', () => {
+    render(
+      <UploadImage
+        id='avatar'
+        alt='user avatar'
+        src='avatar.jpg'
+        roundedCircle={true}
+      />,
+    );
+
+    const uploadImage = screen.getByRole('figure');
+    const imageFluid = screen.getByAltText('user avatar');
+    const cropButton = screen.queryAllByRole('button');
+
+    expect(uploadImage).toBeInTheDocument();
+    expect(cropButton.length).toBe(0);
+    expect(imageFluid).toBeInTheDocument();
+  });
+
+  test('has ref parameter', () => {
+    const { container } = render(
+      <UploadImage
+        id='avatar'
+        src='avatar.jpg'
+        alt='user avatar'
+        roundedCircle={true}
+        ref={mockRef}
+      />,
+    );
+    const hiddenFileInput = screen.getByTestId('avatar');
+    const imageFluid = screen.getByAltText('user avatar');
+    const buttonGroup = container.firstChild.childNodes[1];
+    const modifyButton = buttonGroup.firstChild;
+
+    expect(imageFluid).toBeInTheDocument();
+    expect(hiddenFileInput).toBeInTheDocument();
+    expect(buttonGroup).toBeInTheDocument();
+    expect(modifyButton).toBeInTheDocument();
+  });
+
+  test('crop image', async () => {
+    const cropperHandler = jest
+      .fn()
+      .mockImplementationOnce(({ onCrop }) => {
+        onCrop('data:image/png;base64,Cropped Image Content');
+      })
+      .mockImplementationOnce(({ onClose }) => {
+        onClose();
+      });
+
+    render(
+      <>
+        <CustomToastContainer />
+        <UploadImage
+          id='avatar'
+          src='avatar.jpg'
+          alt='user avatar'
+          roundedCircle={true}
+          ref={mockRef}
+          cropperHandler={cropperHandler}
+        />
+      </>,
+    );
+
+    const hiddenFileInput = screen.getByTestId('avatar');
+    const imageFluid = screen.getByAltText('user avatar');
+    expect(imageFluid).toHaveAttribute('src', 'avatar.jpg');
+
+    // crop image
+    fireEvent.change(hiddenFileInput, {
+      target: {
+        files: [changeFile],
+      },
+    });
+    expect(cropperHandler).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(imageFluid).toHaveAttribute(
+        'src',
+        'data:image/png;base64,Cropped Image Content',
+      );
+    });
+    expect(hiddenFileInput.files[0].name).toBe('image1.jpg');
+    expect(hiddenFileInput.files.length).toBe(1);
+
+    // no crop image
+    fireEvent.change(hiddenFileInput, {
+      target: {
+        files: [changeFile],
+      },
+    });
+    expect(cropperHandler).toHaveBeenCalledTimes(2);
+    await waitFor(() => {
+      expect(imageFluid).toHaveAttribute(
+        'src',
+        'data:image/png;base64,Image Content',
+      );
+    });
+  });
+
+  test('error image', async () => {
+    const cropperHandler = jest.fn();
+    render(
+      <>
+        <CustomToastContainer />
+        <UploadImage
+          id='avatar'
+          src='avatar.jpg'
+          alt='user avatar'
+          roundedCircle={true}
+          ref={mockRef}
+          cropperHandler={cropperHandler}
+        />
+      </>,
+    );
+
+    const hiddenFileInput = screen.getByTestId('avatar');
+    const setter = jest.spyOn(hiddenFileInput, 'value', 'set');
+
+    // file format error
+    fireEvent.change(hiddenFileInput, {
+      target: {
+        files: [changeErrorFile],
+      },
+    });
+    expect(mockRef.current.files[0].name).toBe('image2.tiff');
+    await waitFor(() => {
+      expect(
+        screen.getByText('error:LogoMerchantFileType'),
+      ).toBeInTheDocument();
+    });
+    expect(setter).toHaveBeenCalled();
+
+    // file size error
+    fireEvent.change(hiddenFileInput, {
+      target: {
+        files: [changeSizeErrorFile],
+      },
+    });
+    expect(mockRef.current.files[0].name).toBe('image3.jpg');
+    await waitFor(() => {
+      expect(screen.getByText('error:UploadSize')).toBeInTheDocument();
+    });
+
+    setter.mockRestore();
+  });
+
+  test('restore image', () => {
+    const cropperHandler = jest.fn().mockImplementation(({ onClose }) => {
+      onClose();
+    });
+    render(
+      <>
+        <CustomToastContainer />
+        <UploadImage
+          id='avatar'
+          src='avatar.jpg'
+          alt='user avatar'
+          roundedCircle={true}
+          ref={mockRef}
+          cropperHandler={cropperHandler}
+        />
+      </>,
+    );
+
+    const hiddenFileInput = screen.getByTestId('avatar');
+
+    fireEvent.change(hiddenFileInput, {
+      target: {
+        files: [changeFile],
+      },
+    });
+    expect(hiddenFileInput.files[0].name).toBe('image1.jpg');
+
+    fireEvent.change(hiddenFileInput, {
+      target: {
+        files: [],
+      },
+    });
+    expect(hiddenFileInput.files[0].name).toBe('image1.jpg');
+  });
+
+  test('functional button', async () => {
+    const cropperHandler = jest.fn().mockImplementation(({ onClose }) => {
+      onClose();
+    });
+
+    render(
+      <UploadImage
+        id='avatar'
+        src='avatar.jpg'
+        alt='user avatar'
+        roundedCircle={true}
+        ref={mockRef}
+        cropperHandler={cropperHandler}
+      />,
+    );
+
+    const hiddenFileInput = screen.getByTestId('avatar');
+    const setter = jest.spyOn(hiddenFileInput, 'value', 'set');
+
+    fireEvent.change(hiddenFileInput, {
+      target: {
+        files: [changeFile],
+      },
+    });
+    expect(cropperHandler).toHaveBeenCalledTimes(1);
+
+    let buttons;
+    await waitFor(() => {
+      buttons = screen.getAllByRole('button');
+      expect(buttons).toHaveLength(3);
+    });
+
+    const [cropButton, modifyButton, removeButton] = buttons;
+    expect(cropButton).toBeInTheDocument();
+    expect(modifyButton).toBeInTheDocument();
+    expect(removeButton).toBeInTheDocument();
+
+    fireEvent.click(cropButton);
+    expect(cropperHandler).toHaveBeenCalledTimes(2);
+
+    fireEvent.click(removeButton);
+    expect(setter).toHaveBeenCalledTimes(1);
+
+    setter.mockRestore();
+  });
+
+  test('on blur event', () => {
+    const handleBlur = jest.fn();
+
+    render(
+      <UploadImage
+        id='avatar'
+        src='avatar.jpg'
+        alt='user avatar'
+        roundedCircle={true}
+        ref={mockRef}
+        onBlur={handleBlur}
+      />,
+    );
+
+    const component = screen.getByRole('figure');
+
+    component.focus();
+    expect(component).toHaveFocus();
+
+    component.blur();
+    expect(handleBlur).toHaveBeenCalledTimes(1);
+  });
+});

package/src/image/index.js

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

package/src/index.js

@@ -0,0 +1,49 @@
+export * from './alert';
+export * from './animate';
+export * from './backdrop';
+export * from './badge';
+export * from './breadcrumb';
+export * from './button';
+export * from './callout';
+export * from './chart';
+export * from './container';
+export * from './cropper';
+export * from './datetimePicker';
+export * from './descriptionList';
+export * from './divider';
+export { default as Dropdown } from './dropdown';
+export * from './dropdown';
+export * from './dropzone';
+export * from './figure';
+export * from './file';
+export * from './form';
+export * from './grid';
+export * from './helmet';
+export * from './heading';
+export * from './iconbox';
+export * from './image';
+export * from './jsoneditor';
+export * from './layout';
+export * from './link';
+export * from './map';
+export * from './modal';
+export * from './page';
+export * from './paginate';
+export * from './popover';
+export * from './qrcode';
+export * from './ribbon';
+export * from './section';
+export * from './select';
+export * from './styles';
+export * from './table';
+export { default as Tab } from './Tab';
+export { TabV2 } from './Tab';
+export * from './tagify';
+export * from './text';
+export * from './timeline';
+export * from './toast';
+export * from './tooltip';
+export * from './treeView';
+export { default as VerticalTab } from './VerticalTab';
+export * from './wizard';
+export * from './xmleditor';

package/src/jsoneditor/JsonEditor.js

@@ -0,0 +1,132 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { JsonEditor as Editor } from 'jsoneditor-react';
+import ace from 'brace';
+import 'jsoneditor-react/es/editor.min.css';
+import 'brace/mode/json';
+import 'brace/theme/github';
+
+const JsonEditor = forwardRef(({ ...props }, ref) => {
+  return (
+    <Wrapper>
+      <Editor ref={ref} {...props} ace={ace} />
+    </Wrapper>
+  );
+});
+
+const Wrapper = styled.div`
+  .jsoneditor {
+    border: 0;
+
+    div.jsoneditor-tree {
+      background: transparent;
+    }
+  }
+
+  div.jsoneditor td.jsoneditor-tree {
+    vertical-align: middle;
+  }
+
+  .jsoneditor-popover,
+  .jsoneditor-schema-error,
+  div.jsoneditor th,
+  div.jsoneditor td,
+  div.jsoneditor textarea,
+  div.jsoneditor select,
+  div.jsoneditor-field,
+  div.jsoneditor-value,
+  pre.jsoneditor-preview {
+    font-size: var(--font-body1);
+    color: var(--font-on-background);
+  }
+
+  div.jsoneditor select {
+    background: var(--color-background1);
+  }
+
+  div {
+    &.jsoneditor-readonly {
+      color: var(--font-on-background);
+    }
+
+    &.jsoneditor-value.jsoneditor-number {
+      color: var(--color-danger);
+    }
+
+    &.jsoneditor-field.jsoneditor-empty::after,
+    &.jsoneditor-value.jsoneditor-empty::after {
+      font-size: var(--font-body1);
+      color: var(--font-on-background);
+    }
+
+    &.jsoneditor-field[contenteditable='true']:focus,
+    &.jsoneditor-field[contenteditable='true']:hover,
+    &.jsoneditor-value[contenteditable='true']:focus,
+    &.jsoneditor-value[contenteditable='true']:hover,
+    &.jsoneditor-field.jsoneditor-highlight,
+    &.jsoneditor-value.jsoneditor-highlight {
+      background-color: transparent;
+      border: var(--border-width) solid var(--border-color);
+    }
+
+    &.jsoneditor-empty {
+      border-color: transparent;
+      border-style: none;
+    }
+
+    &.jsoneditor-tree button.jsoneditor-button {
+      filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(78deg)
+        brightness(104%) contrast(101%);
+    }
+
+    &.jsoneditor-tree button.jsoneditor-button:focus {
+      background-color: transparent;
+    }
+  }
+
+  // ace editor
+  .ace_editor.ace-jsoneditor {
+    border-radius: 8px;
+  }
+
+  .ace_gutter {
+    background: rgb(59, 57, 87) !important;
+    color: #ffffff !important;
+    z-index: 0;
+  }
+
+  .ace-jsoneditor .ace_gutter-active-line {
+    background: #00001d;
+  }
+
+  .ace_content {
+    background: rgb(76, 72, 110);
+    z-index: 0;
+  }
+
+  .ace-jsoneditor .ace_marker-layer .ace_active-line {
+    background: #00001d;
+  }
+
+  .ace-jsoneditor .ace_text-layer {
+    color: #fff;
+  }
+
+  .ace-jsoneditor .ace_variable {
+    color: #fff;
+  }
+
+  .ace-jsoneditor .ace_string {
+    color: #11d8cd;
+  }
+
+  .ace-jsoneditor .ace_cursor {
+    border-left: 2px solid #fff;
+  }
+
+  .ace_hidden-cursors .ace_cursor {
+    opacity: 0.5;
+  }
+`;
+
+export default JsonEditor;

package/src/jsoneditor/__stories__/JsonEditor.stories.js

@@ -0,0 +1,55 @@
+import { useRef, useEffect } from 'react';
+import JsonEditor from '../JsonEditor';
+
+const metadata = {
+  title: 'JsonEditor/JsonEditor',
+  component: JsonEditor,
+  argTypes: {
+    mode: {
+      description: 'JsonEditor mode',
+      control: 'radio',
+      options: ['code', 'form', 'view'],
+    },
+    value: {
+      control: 'object',
+    },
+    onValidate: {
+      description: 'onValidate',
+    },
+    onEditable: {
+      description: 'onEditable',
+    },
+    onEvent: {
+      description: 'onEvent',
+    },
+  },
+};
+
+const Template = (args) => {
+  const jsonEditorRef = useRef();
+  const jsonEditor = useRef(null);
+
+  useEffect(() => {
+    const editor =
+      jsonEditorRef &&
+      jsonEditorRef.current &&
+      jsonEditorRef.current.jsonEditor;
+    if (editor) jsonEditor.current = editor;
+  }, []);
+
+  return <JsonEditor {...args} ref={jsonEditorRef} />;
+};
+
+const Default = Template.bind({});
+Default.args = {
+  mode: 'code',
+  mainMenuBar: false,
+  navigationBar: false,
+  statusBar: false,
+  search: false,
+  value: {},
+  name: 'name',
+};
+
+export default metadata;
+export { Default };

package/src/jsoneditor/__test__/JsonEditor.test.js

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import JsonEditor from '../JsonEditor';
+
+jest.mock('jsoneditor-react', () => {
+  const React = require('react');
+
+  return {
+    JsonEditor: React.forwardRef(({ ace, ...props }, ref) => {
+      if (typeof ace === 'object') {
+        props.ace = 'ace editor';
+      }
+
+      return (
+        <div data-testid='editor' ref={ref}>
+          {JSON.stringify(props)}
+        </div>
+      );
+    }),
+  };
+});
+
+describe('Test JsonEditor Component', () => {
+  const ref = { current: null };
+
+  test('render', () => {
+    render(
+      <JsonEditor
+        ref={ref}
+        value={{ key: 'value' }}
+        mode='view'
+        mainMenuBar={false}
+        navigationBar={false}
+        statusBar={false}
+        search={false}
+      />
+    );
+
+    const editor = screen.getByTestId('editor');
+    expect(editor).toHaveTextContent(
+      JSON.stringify({
+        value: { key: 'value' },
+        mode: 'view',
+        mainMenuBar: false,
+        navigationBar: false,
+        statusBar: false,
+        search: false,
+        ace: 'ace editor',
+      })
+    );
+    expect(typeof ref.current).toBe('object');
+  });
+});

package/src/jsoneditor/index.js

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

package/src/keyframe/Pulse.js

@@ -0,0 +1,17 @@
+import { keyframes } from 'styled-components';
+
+const Pulse = keyframes`
+  0% {
+    transform: scale(0.1, 0.1);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+  }
+`;
+
+export default Pulse;

package/src/keyframe/Spin.js

@@ -0,0 +1,9 @@
+import { keyframes } from 'styled-components';
+
+const Spin = keyframes`
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+export default Spin;

package/src/layout/Aside.js

@@ -0,0 +1,47 @@
+import styled, { css } from 'styled-components';
+import headerStyle from '../styles/config/header.style';
+import sidebarStyle from '../styles/config/sidebar.style';
+import media from '../styles/mixin/media';
+import bgAside from '../assets/images/bg-aside.png';
+const Aside = styled.aside`
+  width: ${({ $display }) => {
+    return $display
+      ? `${sidebarStyle.open.width}`
+      : `${sidebarStyle.close.width}`;
+  }};
+  padding-top: var(--spacing-s);
+  height: calc(100vh - ${headerStyle.height} - var(--spacing));
+  ${({ theme }) => {
+    if (theme?.hideAsideDecoration) {
+      return `background: var(--color-background4);`;
+    }
+    return `
+      background: url(${bgAside}), var(--color-background4);
+      background-size: 356px 436px, auto;
+      background-repeat: no-repeat, no-repeat;
+      background-position: bottom, center;
+    `;
+  }}
+  --font-on-background: var(--color-text-sidebar);
+  --color-hover: var(--color-hover-sidebar);
+  --color-active: var(--color-active-sidebar);
+  border-top-right-radius: var(--border-radius);
+  position: fixed;
+  top: calc(${headerStyle.height} + var(--spacing));
+  transition: width 0.2s;
+  z-index: 60;
+  ${media.tablet`
+    height: 100%;
+    top: 0;
+    padding-top:0;
+    border-top-right-radius:0;
+    left: 0;
+    box-shadow: var(--box-shadow);
+    ${(props) =>
+      props.$display === false &&
+      css`
+        left: -${sidebarStyle.open.width};
+      `}
+  `};
+`;
+export default Aside;