@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.2

package/src/chart/utils/centerTextPlugin.js

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

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

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

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

package/src/chart/utils/padEmptyChartBar.js

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

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

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

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

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

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

package/src/cropper/Cropper.js

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

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

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

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

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