@cashub/ui 0.22.9 → 0.22.11

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

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

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

package/src/index.js

@@ -1,42 +0,0 @@
-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 './link';
-export * from './map';
-export * from './modal';
-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 * from './tagify';
-export * from './text';
-export * from './timeline';
-export * from './toast';
-export * from './tooltip';
-export * from './wizard';

package/src/jsoneditor/JsonEditor.js

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

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

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

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

package/src/keyframe/Pulse.js

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

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

package/src/link/LinkSpan.js

@@ -1,44 +0,0 @@
-import styled from 'styled-components';
-
-const LinkSpan = ({ children, ...props }) => {
-  return <Link {...props}>{children}</Link>;
-};
-
-const Link = styled.span.attrs((props) => {
-  return {
-    fontSize: props.fontSmall ? '1rem' : '1.5rem',
-    color: props.light
-      ? 'var(--font-on-background)'
-      : 'rgba(255, 255, 255, 0.5)',
-    borderColor: props.light ? 'var(--border-color)' : '#3e5fff',
-  };
-})`
-  font-size: ${({ fontSize }) => fontSize};
-  line-height: 1.5;
-  font-weight: 500;
-  color: ${({ color }) => color};
-  cursor: pointer;
-  position: relative;
-  display: inline-block;
-
-  &:after {
-    display: block;
-    content: '';
-    position: absolute;
-    bottom: 0;
-    top: 1rem;
-    left: 0;
-    width: 0%;
-    transition: width 0.3s ease;
-  }
-
-  &:hover {
-    &:after {
-      width: 100%;
-      border-bottom: 1px solid ${({ borderColor }) => borderColor};
-      opacity: 0.75;
-    }
-  }
-`;
-
-export default LinkSpan;

package/src/link/__stories__/LinkSpan.stories.js

@@ -1,27 +0,0 @@
-import LinkSpan from '../LinkSpan';
-
-const metadata = {
-  title: 'Link/LinkSpan',
-  component: LinkSpan,
-  argTypes: {
-    fontSmall: {
-      description: 'text size',
-    },
-    light: {
-      description: 'control text color and borderColor',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <LinkSpan {...args}>LinkSpan Text</LinkSpan>;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  fontSmall: false,
-  light: false,
-};
-
-export default metadata;
-export { Default };