@cashub/ui 0.22.7 → 0.22.9

package/src/container/__stories__/FlexContainer.stories.js

@@ -0,0 +1,39 @@
+import FlexContainer from '../FlexContainer';
+
+const metadata = {
+  title: 'Container/FlexContainer',
+  component: FlexContainer,
+  decorators: [
+    (Story) => (
+      <div style={{ border: '1px solid #000', width: '300px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    marginBottom: {
+      description: 'margin-bottom:32px',
+    },
+    wrap: {
+      description: 'flex wrap',
+    },
+  },
+};
+
+const Template = (args) => (
+  <FlexContainer {...args}>
+    <p style={{ background: '#222143', width: '300px', color: '#fff' }}>Text</p>
+    <p style={{ background: '#222143', width: '300px', color: '#fff' }}>Text</p>
+    <p style={{ background: '#222143', width: '300px', color: '#fff' }}>Text</p>
+    <p style={{ background: '#222143', width: '300px', color: '#fff' }}>Text</p>
+  </FlexContainer>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  marginBottom: false,
+  wrap: false,
+};
+
+export default metadata;
+export { Default };

package/src/container/__test__/FlexContainer.test.js

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react';
+import FlexContainer from '../FlexContainer';
+import 'jest-styled-components';
+
+test('render FlexContainer', () => {
+  const { container } = render(
+    <FlexContainer wrap marginBottom>
+      <div>Version</div>
+      <div>UpdatedTime</div>
+      <div>Size</div>
+    </FlexContainer>
+  );
+
+  const flexContainer = container.firstChild;
+
+  expect(flexContainer).toBeInTheDocument();
+  expect(flexContainer).toHaveStyle({
+    flexWrap: 'wrap',
+  });
+  expect(flexContainer).toHaveStyleRule('margin-bottom', 'var(--spacing-l)');
+});

package/src/container/index.js

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

package/src/cropper/Cropper.js

@@ -0,0 +1,49 @@
+import { useRef, useEffect } from 'react';
+import 'cropperjs/dist/cropper.css';
+import Cropper from 'cropperjs';
+
+const CropperWrapper = ({
+  src,
+  alt = 'picture',
+  width,
+  height,
+  cropBoxResizable = false,
+  onInitialized,
+  dragMode = 'move',
+}) => {
+  const imageRef = useRef(null);
+
+  useEffect(() => {
+    const node = imageRef.current;
+
+    if (node !== null) {
+      const cropper = new Cropper(node, {
+        dragMode,
+        viewMode: 1,
+        initialAspectRatio: 9 / 16,
+        background: true,
+        cropBoxResizable,
+        data: {
+          width,
+          height,
+        },
+      });
+
+      if (onInitialized) {
+        onInitialized(cropper);
+      }
+    }
+
+    return () => {
+      node?.cropper?.destroy();
+    };
+  }, [onInitialized, dragMode, width, height, cropBoxResizable]);
+
+  return (
+    <div>
+      <img src={src} alt={alt} ref={imageRef} crossOrigin='anonymous' />
+    </div>
+  );
+};
+
+export default CropperWrapper;

package/src/cropper/CropperModalHandler.js

@@ -0,0 +1,36 @@
+import TitleModal from '../modal/TitleModal';
+import CropImageModal from './subComponent/CropImageModal';
+
+const CropperModalHandler = ({
+  src,
+  file,
+  width,
+  height,
+  cropBoxResizable = false,
+  onCrop,
+  onClose,
+}) => {
+  TitleModal({
+    size: 'normal',
+    children: (
+      <CropImageModal
+        src={src}
+        mime={file.type}
+        alt={file.name}
+        file={file}
+        width={width}
+        height={height}
+        cropBoxResizable={cropBoxResizable}
+        onCrop={onCrop}
+        onClose={onClose}
+      />
+    ),
+    onClose: (dismiss) => {
+      if (dismiss === true && onClose) {
+        onClose();
+      }
+    },
+  });
+};
+
+export default CropperModalHandler;

package/src/cropper/__stories__/Cropper.stories.js

@@ -0,0 +1,32 @@
+import Cropper from '../Cropper';
+import Picture from '../../assets/images/default-user.jpg';
+
+const metadata = {
+  title: 'Cropper/Cropper',
+  component: Cropper,
+  argTypes: {
+    src: {
+      description: 'image',
+      control: { type: 'file', accept: '.png,.jpg,.jpeg,.bmp' },
+    },
+    onInitialized: {
+      description: 'it is a function',
+      action: 'onInitialized',
+    },
+  },
+};
+
+const Template = (args) => {
+  return <Cropper {...args} src={args.src[0]} />;
+};
+
+const Default = Template.bind({});
+Default.args = {
+  src: [`${Picture}`],
+  width: 160,
+  height: 160,
+  cropBoxResizable: false,
+};
+
+export default metadata;
+export { Default };

package/src/cropper/__test__/Cropper.test.js

@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import Cropper from '../Cropper';
+import Picture from '../../assets/images/default-user.jpg';
+
+jest.mock('cropperjs', () => {
+  const React = require('react');
+  const imageRef = React.useRef(null);
+  const node = imageRef.current;
+  const Cropper = require('cropperjs');
+
+  return ({ dragMode, width, height, onInitialized }) => {
+    // 應該是模擬元件傳 props 給套件這個部分，至於套件有沒有收到，單元測試要在驗證
+    if (node !== null) {
+      // 好像不用在 call 套件?
+      const cropper = new Cropper(node, {
+        dragMode,
+        viewMode: 1,
+        initialAspectRatio: 9 / 16,
+        background: true,
+        cropBoxResizable: false,
+        data: {
+          width,
+          height,
+        },
+      });
+
+      if (onInitialized) {
+        onInitialized(cropper);
+      }
+
+      return cropper;
+    }
+
+    return () => {
+      node?.cropper?.destroy();
+    };
+  };
+});
+
+describe('Test Cropper Component', () => {
+  test('render Cropper', () => {
+    render(<Cropper src={Picture} alt='picture' width={160} height={160} />);
+
+    const cropperImages = screen.getByAltText('picture');
+    expect(cropperImages).toBeInTheDocument();
+
+    expect(cropperImages).toHaveAttribute('src', 'default-user.jpg');
+    expect(cropperImages).toHaveStyle({ width: '160 px' });
+    expect(cropperImages).toHaveStyle({ height: '160 px' });
+  });
+
+  test('onInitialized function', () => {
+    const handleInitialized = jest.fn();
+    render(
+      <Cropper
+        src={Picture}
+        alt='picture'
+        width={160}
+        height={160}
+        onInitialized={handleInitialized}
+      />,
+    );
+
+    const cropperImages = screen.getByAltText('picture');
+    expect(cropperImages).toBeInTheDocument();
+
+    expect(handleInitialized).toHaveBeenCalledTimes(1);
+  });
+
+  // 驗證元件傳的props 給套件，套件有收到，至於套件做了甚麼事情不管
+  // test('cropper', () => {
+  //   const handleInitialized = jest.fn();
+  //   render(
+  //     <Cropper
+  //       src={Picture}
+  //       alt='picture'
+  //       width={160}
+  //       height={160}
+  //       onInitialized={handleInitialized}
+  //     />,
+  //   );
+
+  //   const cropperImages = screen.getByAltText('picture');
+  //   expect(cropperImages).toBeInTheDocument();
+  //   expect(cropperImages.cropper).toBeInTheDocument();
+
+  //   // expect(handleInitialized).toHaveBeenCalledTimes(1);
+  // });
+});

package/src/cropper/index.js

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

package/src/cropper/subComponent/CropImageModal.js

@@ -0,0 +1,84 @@
+import { useCallback, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { resizeImage } from '@cashub/utils';
+import Cropper from '../Cropper';
+import Button from '../../button/Button';
+import ButtonGroup from '../../button/ButtonGroup';
+import TitleModal from '../../modal/TitleModal';
+
+const CropImageModal = ({
+  src,
+  mime,
+  alt,
+  width,
+  height,
+  cropBoxResizable = false,
+  onCrop,
+  onClose,
+  close,
+}) => {
+  const { t } = useTranslation();
+  const [instance, setIntance] = useState(null);
+  const [resizedImage, setResizedImage] = useState(null);
+
+  const handleCrop = useCallback(() => {
+    onCrop(instance.getCroppedCanvas().toDataURL());
+    close();
+  }, [onCrop, instance, close]);
+
+  const handleInitialized = useCallback((instance) => {
+    setIntance(instance);
+  }, []);
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+
+    close();
+  };
+
+  useEffect(() => {
+    resizeImage(
+      src,
+      mime,
+      width > height ? width : height,
+      'cover',
+      (resizedImageUrl) => {
+        setResizedImage(resizedImageUrl);
+      },
+    );
+  }, [src, mime, height, width]);
+
+  return (
+    <>
+      <TitleModal.Header handleClose={handleClose}>
+        {t('CropImage')}
+      </TitleModal.Header>
+      <TitleModal.Body>
+        {resizedImage && (
+          <Cropper
+            src={resizedImage}
+            alt={alt}
+            width={width}
+            height={height}
+            cropBoxResizable={cropBoxResizable}
+            onInitialized={handleInitialized}
+          />
+        )}
+      </TitleModal.Body>
+      <TitleModal.Footer>
+        <ButtonGroup>
+          <Button danger onClick={handleClose}>
+            {t('button:Cancel')}
+          </Button>
+          <Button success onClick={handleCrop}>
+            {t('button:Confirm')}
+          </Button>
+        </ButtonGroup>
+      </TitleModal.Footer>
+    </>
+  );
+};
+
+export default CropImageModal;