@cashub/ui 0.48.30 → 0.49.0-beta.0

package/src/chart/utils/centerTextPlugin.js

@@ -0,0 +1,51 @@
+import { defaults } from 'react-chartjs-2';
+
+const centerTextPlugin = {
+  id: 'centerText',
+  beforeDraw: (chart) => {
+    const { options, data } = chart.config;
+
+    const config = options.plugins.centerText;
+    if (!config || !config.display) {
+      return;
+    }
+
+    const {
+      ctx,
+      chartArea: { top, width, height },
+    } = chart;
+    ctx.save();
+
+    // calculate center position
+    const centerX = width / 2;
+    const centerY = height / 2 + top;
+
+    // font settings
+    const { font, color } = defaults;
+    const { family, size, lineHeight } = font;
+    const offset = (size * lineHeight) / 2;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillStyle = color;
+
+    const { title } = config;
+    if (title) {
+      ctx.font = `bold ${size}px ${family}`;
+      ctx.fillText(title, centerX, centerY - offset);
+    }
+
+    const total = data.datasets[0].data.reduce((total, current) => {
+      return total + current;
+    }, 0);
+    ctx.font = `${size}px ${family}`;
+    ctx.fillText(
+      total.toLocaleString(),
+      centerX,
+      centerY + (title ? offset : 0),
+    );
+
+    ctx.restore();
+  },
+};
+
+export default centerTextPlugin;

package/src/chart/utils/customTooltip.js

@@ -0,0 +1,116 @@
+const customTooltip = (theme) => {
+  // optimize: render in react way
+  return function (context) {
+    // Tooltip Element
+    let tooltipEl = document.getElementById('chartjs-tooltip');
+
+    // Create element on first render
+    if (!tooltipEl) {
+      tooltipEl = document.createElement('div');
+      tooltipEl.id = 'chartjs-tooltip';
+      tooltipEl.innerHTML = '<table></table>';
+      document.body.appendChild(tooltipEl);
+    }
+
+    // Hide tooltip, if no tooltip or no data
+    const tooltipModel = context.tooltip;
+    if (
+      !tooltipModel ||
+      !tooltipModel.dataPoints ||
+      !tooltipModel.dataPoints[0] ||
+      tooltipModel.opacity === 0
+    ) {
+      tooltipEl.style.display = 'none';
+      return;
+    }
+
+    // Set caret Position
+    tooltipEl.classList.remove('above', 'below', 'no-transform');
+    if (tooltipModel.yAlign) {
+      tooltipEl.classList.add(tooltipModel.yAlign);
+    } else {
+      tooltipEl.classList.add('no-transform');
+    }
+
+    // Set Text
+    if (tooltipModel.body) {
+      const titleLines = tooltipModel.title || [];
+
+      const bodyLines = tooltipModel.body.map((bodyItem) => {
+        return bodyItem.lines || [];
+      });
+
+      let innerHtml = '<thead>';
+      titleLines.forEach((title) => {
+        innerHtml += `<tr><th>${title}</th></tr>`;
+      });
+      innerHtml += '</thead><tbody>';
+
+      bodyLines.forEach((body) => {
+        if (Array.isArray(body)) {
+          body.forEach((line) => {
+            innerHtml += `<tr><td>${line}</td></tr>`;
+          });
+        } else {
+          innerHtml += `<tr><td>${body}</td></tr>`;
+        }
+      });
+
+      innerHtml += '</tbody>';
+
+      const tableRoot = tooltipEl.querySelector('table');
+      tableRoot.innerHTML = innerHtml;
+    }
+
+    // `this` will be the overall tooltip
+    const position = context.chart.canvas.getBoundingClientRect();
+
+    // Display, position, and set styles for font
+    tooltipEl.style.fontFamily = theme.fontFamily;
+    tooltipEl.style.fontSize = theme.fontBody1;
+    tooltipEl.style.display = 'block';
+    tooltipEl.style.position = 'absolute';
+    tooltipEl.style.boxShadow = theme.boxShadow;
+
+    [tooltipEl.style.color] = tooltipModel.labelTextColors;
+    tooltipEl.style.background = tooltipModel.labelColors[0].backgroundColor;
+    tooltipEl.style.borderRadius = theme.borderRadius;
+    tooltipEl.style.textAlign = 'center';
+    tooltipEl.style.padding = `${theme.spacerXS} ${theme.spacerS}`;
+    tooltipEl.style.pointerEvents = 'none';
+
+    // determine position is left or right
+    if (tooltipModel.caretX + tooltipEl.offsetWidth <= this._chart.width) {
+      tooltipEl.style.borderTopLeftRadius = 0;
+      tooltipEl.style.left = `${
+        position.left + window.pageXOffset + tooltipModel.caretX + 8
+      }px`;
+    } else {
+      tooltipEl.style.borderTopRightRadius = 0;
+      tooltipEl.style.left = `${
+        position.left +
+        window.pageXOffset +
+        tooltipModel.caretX -
+        tooltipModel.width -
+        16 * 2
+      }px`;
+    }
+
+    // determine position is top or bottom
+    if (tooltipModel.caretY + tooltipEl.offsetHeight <= this._chart.height) {
+      tooltipEl.style.top = `${
+        position.top + window.pageYOffset + tooltipModel.caretY + 8
+      }px`;
+    } else {
+      tooltipEl.style.top = `${
+        position.top +
+        window.pageYOffset +
+        tooltipModel.caretY -
+        tooltipModel.width -
+        16 * 2
+      }px`;
+    }
+  };
+};
+
+export default customTooltip;

package/src/chart/utils/htmlLegendPlugin.js

@@ -0,0 +1,98 @@
+import { defaults } from 'react-chartjs-2';
+
+const htmlLegendPlugin = {
+  id: 'htmlLegend',
+  afterUpdate(chart, args, options) {
+    const ul = getOrCreateLegendList(chart, options.containerID);
+
+    // Remove old legend items
+    while (ul.firstChild) {
+      ul.firstChild.remove();
+    }
+
+    // Reuse the built-in legendItems generator
+    const items = chart.options.plugins.legend.labels.generateLabels(chart);
+
+    items.forEach((item) => {
+      const li = document.createElement('li');
+      li.style.alignItems = 'center';
+      li.style.cursor = 'pointer';
+      li.style.display = 'flex';
+      li.style.flexDirection = 'row';
+      li.style.marginLeft = '16px';
+      li.style.marginTop = '16px';
+      li.style.color = defaults.color;
+
+      const [dataset] = chart.data.datasets;
+      const description = dataset.descriptions
+        ? dataset.descriptions[item.index]
+        : '';
+
+      if (description) {
+        li.setAttribute('data-tooltip', description);
+        li.classList.add('custom-legend-tooltip');
+      }
+
+      li.onclick = () => {
+        const { type } = chart.config;
+        if (type === 'pie' || type === 'doughnut') {
+          // Pie and doughnut charts only have a single dataset and visibility is per item
+          chart.toggleDataVisibility(item.index);
+        } else {
+          chart.setDatasetVisibility(
+            item.datasetIndex,
+            !chart.isDatasetVisible(item.datasetIndex),
+          );
+        }
+        chart.update();
+      };
+
+      // Color box
+      const boxSpan = document.createElement('span');
+      boxSpan.style.background = item.fillStyle;
+      boxSpan.style.borderColor = item.strokeStyle;
+      boxSpan.style.borderWidth = `${item.lineWidth}px`;
+      boxSpan.style.borderStyle = 'solid';
+      boxSpan.style.display = 'inline-block';
+      boxSpan.style.height = '16px';
+      boxSpan.style.marginRight = '8px';
+      boxSpan.style.width = '32px';
+
+      // Text
+      const textContainer = document.createElement('p');
+      textContainer.style.color = item.fontColor;
+      textContainer.style.margin = 0;
+      textContainer.style.padding = 0;
+      textContainer.style.wordBreak = 'break-all';
+      textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
+
+      const text = document.createTextNode(item.text);
+      textContainer.appendChild(text);
+
+      li.appendChild(boxSpan);
+      li.appendChild(textContainer);
+      ul.appendChild(li);
+    });
+  },
+};
+
+const getOrCreateLegendList = (chart, id) => {
+  const legendContainer = document.getElementById(id);
+  let listContainer = legendContainer.querySelector('ul');
+
+  if (!listContainer) {
+    listContainer = document.createElement('ul');
+    listContainer.style.display = 'flex';
+    listContainer.style.flexDirection = 'row';
+    listContainer.style.flexWrap = 'wrap';
+    listContainer.style.justifyContent = 'center';
+    listContainer.style.margin = 0;
+    listContainer.style.padding = 0;
+
+    legendContainer.appendChild(listContainer);
+  }
+
+  return listContainer;
+};
+
+export default htmlLegendPlugin;

package/src/chart/utils/index.js

@@ -0,0 +1,3 @@
+export { default as customTooltip } from './customTooltip';
+export { default as padEmptyChartBar } from './padEmptyChartBar';
+export { default as htmlLegendPlugin } from './htmlLegendPlugin';

package/src/chart/utils/padEmptyChartBar.js

@@ -0,0 +1,41 @@
+// make chart bar seem like align left by pad empty bar at the end
+const padEmptyChartBar = {
+  id: 'padEmptyChartBar',
+  length: -1,
+
+  // pad empty chart bar when data less than max bar number
+  beforeUpdate(chart) {
+    this.length = -1;
+    const { data, options } = chart.config._config;
+    const validLabels = data.labels.filter((label) => label !== null);
+    const { maxBarNumber } = options.plugins.padEmptyChartBar;
+    for (let index = validLabels.length; index < maxBarNumber; index += 1) {
+      this.length = this.length === -1 ? index : this.length;
+      data.labels[index] = null;
+
+      const [datasets] = data.datasets;
+      if (datasets) {
+        datasets.data[index] = 0;
+      }
+    }
+  },
+
+  // prevent padded empty chart bar to be drawn
+  afterUpdate(chart) {
+    const { data, options } = chart.config._config;
+    const { maxBarNumber } = options.plugins.padEmptyChartBar;
+    if (this.length === -1) {
+      // restore draw function
+      for (let index = 0; index < maxBarNumber; index += 1) {
+        // delete data.datasets[0]._meta[data.index].data[i].draw;
+      }
+    } else {
+      // prevents new charts to be drawn
+      for (let index = this.length; index < data.maxBarNumber; index += 1) {
+        data.datasets[0]._meta[data.index].data[index].draw = () => {};
+      }
+    }
+  },
+};
+
+export default padEmptyChartBar;

package/src/chart/utils/yAxisTopTitlePlugin.js

@@ -0,0 +1,38 @@
+import { defaults } from 'react-chartjs-2';
+
+const yAxisTopTitlePlugin = {
+  id: 'yAxisTopTitle',
+  afterDraw(chart) {
+    const { options } = chart.config;
+
+    const config = options.plugins.yAxisTopTitle;
+    if (!config || !config.title) {
+      return;
+    }
+
+    const { title } = config;
+    const { ctx, chartArea, scales } = chart;
+    const yScale = scales.y;
+
+    if (!yScale) {
+      return;
+    }
+    ctx.save();
+
+    const { font, color } = defaults;
+    const { family, size } = font;
+    ctx.font = `bold ${size}px ${family}`;
+    ctx.fillStyle = color;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+
+    const x = yScale.left;
+    const y = chartArea.top - 24;
+
+    ctx.fillText(title, x, y);
+
+    ctx.restore();
+  },
+};
+
+export default yAxisTopTitlePlugin;

package/src/container/FlexContainer.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const FlexContainer = styled.div`
+  display: flex;
+
+  ${({ marginBottom }) => marginBottom && 'margin-bottom: var(--spacing-l)'};
+
+  ${({ wrap }) => wrap && 'flex-wrap: wrap'};
+
+  ${({ alignCenter }) => alignCenter && 'align-items: center;'}
+
+  ${({ spaceBetween }) => spaceBetween && 'justify-content: space-between;'}
+`;
+
+export default FlexContainer;

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';