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

package/src/button/__stories__/Button.stories.js

@@ -1,104 +0,0 @@
-import Button from '../Button';
-
-const metadata = {
-  title: 'Button/Button',
-  component: Button,
-  argTypes: {
-    children: {
-      description: 'Button contents',
-    },
-    secondary: {
-      description: 'Button background color',
-    },
-    reverse: {
-      description: 'Button background color',
-    },
-    success: {
-      description: 'Button background color',
-    },
-    warning: {
-      description: 'Button background color',
-    },
-    danger: {
-      description: 'Button background color',
-    },
-    variant: {
-      description: 'Button variant',
-    },
-    selected: {
-      description: 'Button selected style for outline variant',
-    },
-    onClick: {
-      action: 'Clicked button',
-      description: 'Handle event',
-    },
-    onFocus: {
-      action: 'onFocus button',
-      description: 'Handle event',
-    },
-    filterFocus: {
-      description: 'button focus style',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <Button {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  children: 'Button',
-  disabled: false,
-  secondary: false,
-  reverse: false,
-  success: false,
-  warning: false,
-  danger: false,
-  filterFocus: false,
-  // todo:按鈕所有可支援的事件監聽補在文件內
-};
-
-const Secondary = Template.bind({});
-Secondary.args = {
-  children: 'Secondary Button',
-  disabled: false,
-  secondary: true,
-  reverse: false,
-  success: false,
-  warning: false,
-  danger: false,
-  filterFocus: false,
-  // todo:按鈕所有可支援的事件監聽補在文件內
-};
-
-const Outline = Template.bind({});
-Outline.args = {
-  children: 'Outline Button',
-  disabled: false,
-  secondary: false,
-  reverse: false,
-  success: false,
-  warning: false,
-  danger: false,
-  filterFocus: false,
-  variant: 'outline',
-  selected: false,
-};
-
-const OutlineSelected = Template.bind({});
-OutlineSelected.args = {
-  children: 'Outline Selected Button',
-  disabled: false,
-  secondary: false,
-  reverse: false,
-  success: false,
-  warning: false,
-  danger: false,
-  filterFocus: false,
-  variant: 'outline',
-  selected: true,
-};
-
-export default metadata;
-export { Default, Secondary, Outline, OutlineSelected };

package/src/button/__stories__/ButtonGroup.stories.js

@@ -1,48 +0,0 @@
-import Button from '../Button';
-import ButtonGroup from '../ButtonGroup';
-
-const metadata = {
-  title: 'Button/ButtonGroup',
-  component: ButtonGroup,
-  decorators: [
-    (Story) => (
-      <div style={{ border: '2px solid #000' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  argTypes: {
-    alignCenter: {
-      description: '按鈕置中',
-    },
-    alignRight: {
-      description: '按鈕置右',
-    },
-    marginBottom: {
-      description: '按鈕底部間距',
-    },
-    vertical: {
-      description: '按鈕垂直',
-    },
-  },
-};
-
-// fix: Stories for multiple components(adjust import Button.stories.js)
-const Template = (args) => (
-  <ButtonGroup {...args}>
-    <Button danger>Previous</Button>
-    <Button secondary>Cancel</Button>
-    <Button warning>Submit</Button>
-  </ButtonGroup>
-);
-
-const Group = Template.bind({});
-Group.args = {
-  alignCenter: false,
-  alignRight: false,
-  marginBottom: false,
-  vertical: false,
-};
-
-export default metadata;
-export { Group };

package/src/button/__stories__/IconButton.stories.js

@@ -1,30 +0,0 @@
-import IconButton from '../IconButton';
-import { MdNotificationsNone } from 'react-icons/md';
-
-const metadata = {
-  title: 'Button/IconButton',
-  component: IconButton,
-  argTypes: {
-    size: {
-      description: 'IconButton 外容器大小',
-      control: 'radio',
-      options: ['small', 'normal', 'large'],
-    },
-  },
-};
-
-const Template = (args) => (
-  <IconButton {...args}>
-    <MdNotificationsNone />
-  </IconButton>
-);
-
-// fix: how to control children's props
-const Icon = Template.bind({});
-Icon.args = {
-  size: 'small',
-  disabled: false,
-};
-
-export default metadata;
-export { Icon };

package/src/button/__stories__/ScrollToTopButton.stories.js

@@ -1,22 +0,0 @@
-import ScrollToTopButton from '../ScrollToTopButton';
-
-const metadata = {
-  title: 'Button/ScrollToTopButton',
-  component: ScrollToTopButton,
-  decorators: [
-    (fn) => (
-      <>
-        <p style={{ color: '#13142E' }}>請下滑動卷軸後點擊按鈕</p>
-        <div>
-          <div style={{ height: '200vh' }} />
-          <div>{fn()}</div>
-        </div>
-      </>
-    ),
-  ],
-};
-
-const Default = () => <ScrollToTopButton />;
-
-export default metadata;
-export { Default };

package/src/button/__test__/Button.test.js

@@ -1,32 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import Button from '../Button';
-import userEvent from '@testing-library/user-event';
-import 'jest-styled-components';
-
-describe('Test Button Component', () => {
-  test('render button', () => {
-    render(<Button />);
-    const button = screen.getByRole('button');
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveStyle({
-      cursor: 'pointer',
-    });
-
-    userEvent.hover(button);
-    expect(button).toHaveStyleRule('transition', '0.3s', {
-      modifier: ':hover',
-    });
-    expect(button).toHaveStyleRule('background-color', 'var(--color-primary)');
-  });
-
-  test('parameters of the button component', () => {
-    render(<Button disabled reverse filterFocus />);
-    const button = screen.getByRole('button');
-    expect(button).toHaveStyle({
-      opacity: '0.5',
-      cursor: 'no-drop',
-    });
-    expect(button).toHaveStyleRule('background', 'var(--color-background1)');
-    expect(button).toHaveStyleRule('border', '2px solid var(--font-on-danger)');
-  });
-});

package/src/button/__test__/ButtonGroup.test.js

@@ -1,25 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import Button from '../Button';
-import ButtonGroup from '../ButtonGroup';
-import 'jest-styled-components';
-
-describe('test ButtonGroup', () => {
-  test('render ButtonGroup', () => {
-    render(
-      <ButtonGroup data-testid='buttonGroup' vertical alignCenter>
-        <Button>cancel</Button>
-        <Button>Next</Button>
-      </ButtonGroup>
-    );
-
-    expect(screen.getByTestId('buttonGroup')).toBeInTheDocument();
-    expect(screen.getByTestId('buttonGroup')).toHaveStyle({
-      justifyContent: 'center',
-    });
-    screen.getAllByRole('button').forEach((i) => {
-      expect(i).toHaveStyle({
-        marginLeft: '0 !important',
-      });
-    });
-  });
-});

package/src/button/__test__/IconButton.test.js

@@ -1,34 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import IconButton from '../IconButton';
-import 'jest-styled-components';
-import { MdMoreHoriz } from 'react-icons/md';
-import userEvent from '@testing-library/user-event';
-
-describe('test iconButton', () => {
-  test('render iconButton', () => {
-    const { rerender } = render(
-      <IconButton>
-        <MdMoreHoriz />
-      </IconButton>,
-    );
-
-    const iconButton = screen.getByRole('button');
-    expect(iconButton).toBeInTheDocument();
-    expect(iconButton).toHaveStyleRule('color', 'var(--color-white)');
-
-    userEvent.hover(iconButton);
-    expect(iconButton).toHaveStyleRule('background', 'var(--color-hover)', {
-      modifier: ':hover',
-    });
-
-    rerender(
-      <IconButton disabled>
-        <MdMoreHoriz />
-      </IconButton>,
-    );
-    expect(iconButton).toHaveStyleRule('color', 'var(--color-grey)');
-    expect(iconButton).not.toHaveStyleRule('background', 'var(--color-hover)', {
-      modifier: ':hover',
-    });
-  });
-});

package/src/button/__test__/ScrollToTopButton.test.js

@@ -1,19 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import ScrollToTopButton from '../ScrollToTopButton';
-
-describe('test ScrollToTopButton', () => {
-  test('render ScrollToTopButton', () => {
-    render(<ScrollToTopButton />);
-
-    expect(screen.getByRole('button', { hidden: true })).not.toBeVisible();
-
-    fireEvent.scroll(window, {
-      target: { pageYOffset: 50 },
-    });
-
-    expect(screen.getByRole('button', { hidden: true })).toHaveStyle({
-      display: 'flex',
-    });
-    expect(screen.getByRole('button', { hidden: true })).toBeVisible();
-  });
-});

package/src/button/index.js

@@ -1,4 +0,0 @@
-export { default as Button } from './Button';
-export { default as ButtonGroup } from './ButtonGroup';
-export { default as IconButton } from './IconButton';
-export { default as ScrollToTopButton } from './ScrollToTopButton';

package/src/callout/Callout.js

@@ -1,52 +0,0 @@
-import styled from 'styled-components';
-
-const Callout = styled.div`
-  padding: var(--spacing);
-  border-radius: var(--border-radius);
-  background: var(--color-background3);
-  margin-bottom: var(--spacing);
-`;
-
-const Body = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const Content = styled.div`
-  flex: 2;
-`;
-
-const Title = styled.h3`
-  font-size: var(--font-h3);
-  font-weight: 500;
-  color: var(--font-on-background);
-  margin-bottom: var(--border-radius);
-`;
-
-const Description = styled.p`
-  font-size: var(--font-body1);
-  line-height: 1.5;
-  color: var(--font-on-mute);
-  padding-right: var(--spacing);
-  font-weight: 400;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;
-
-const Action = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
-`;
-
-export default Object.assign(Callout, {
-  Body,
-  Content,
-  Title,
-  Description,
-  Action,
-});

package/src/callout/__stories__/Callout.stories.js

@@ -1,23 +0,0 @@
-import Callout from '../Callout';
-
-const metadata = {
-  title: 'Callout/Callout',
-  component: Callout,
-};
-
-const Default = () => (
-  <Callout>
-    <Callout.Body>
-      <Callout.Content>
-        <Callout.Title>New User Account Activation</Callout.Title>
-        <Callout.Description>
-          New user account has been activated.
-        </Callout.Description>
-      </Callout.Content>
-      <Callout.Action></Callout.Action>
-    </Callout.Body>
-  </Callout>
-);
-
-export default metadata;
-export { Default };

package/src/callout/__test__/Callout.test.js

@@ -1,29 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import Callout from '../Callout';
-
-test('render Callout', () => {
-  const { container } = render(
-    <Callout>
-      <Callout.Body>
-        <Callout.Content>
-          <Callout.Title>Title</Callout.Title>
-          <Callout.Description>description</Callout.Description>
-        </Callout.Content>
-        <Callout.Action>action</Callout.Action>
-      </Callout.Body>
-    </Callout>
-  );
-  const callout = container.firstChild;
-  const calloutBody = container.firstChild.firstChild;
-  const calloutContent = container.firstChild.firstChild.firstChild;
-  const calloutTitle = screen.getByRole('heading');
-  const calloutDescription = screen.getByText('description');
-  const calloutAction = screen.getByText('action');
-
-  expect(callout).toBeInTheDocument();
-  expect(calloutBody).toBeInTheDocument();
-  expect(calloutTitle).toBeInTheDocument();
-  expect(calloutDescription).toBeInTheDocument();
-  expect(calloutContent).toBeInTheDocument();
-  expect(calloutAction).toBeInTheDocument();
-});

package/src/callout/index.js

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

package/src/chart/BarChart.js

@@ -1,158 +0,0 @@
-import { useContext, useMemo } from 'react';
-import { ThemeContext } from 'styled-components';
-import { Bar, defaults } from 'react-chartjs-2';
-import customTooltip from './utils/customTooltip';
-import padEmptyChartBar from './utils/padEmptyChartBar';
-import yAxisTopTitlePlugin from './utils/yAxisTopTitlePlugin';
-
-const BarChart = ({ height = 300, data, options = {}, ...props }) => {
-  const theme = useContext(ThemeContext);
-
-  // fix: read value from theme
-  defaults.font.family = theme.fontFamily;
-  defaults.font.size = 16;
-  defaults.color = theme.fontOnBg;
-  defaults.plugins.tooltip.external = customTooltip(theme);
-
-  const customOptions = useMemo(() => {
-    const { yAxisTopTitle, tooltips = {} } = options;
-
-    return {
-      onlyFirstTooltips:
-        options.onlyFirstTooltips === undefined
-          ? true
-          : options.onlyFirstTooltips,
-      maxBarNumber:
-        options.maxBarNumber === undefined ? 5 : options.maxBarNumber,
-      stacked: options.stacked === undefined ? true : options.stacked,
-      suggestedMax:
-        options.suggestedMax === undefined ? 10 : options.suggestedMax,
-      showLegend: options.showLegend === undefined ? false : options.showLegend,
-      rotateLabel:
-        options.rotateLabel === undefined ? true : options.rotateLabel,
-      yAxisTopTitle: yAxisTopTitle ? yAxisTopTitle : '',
-      tooltipLabelPostfix: tooltips.labelPostfix || '',
-    };
-  }, [options]);
-
-  const defaultOptions = useMemo(() => {
-    return {
-      responsive: true,
-      maintainAspectRatio: false,
-      aspectRatio: 1,
-      interaction: {
-        mode: 'nearest',
-        intersect: false,
-      },
-      plugins: {
-        padEmptyChartBar: {
-          maxBarNumber: customOptions.maxBarNumber,
-        },
-        legend: {
-          position: 'bottom',
-          display: customOptions.showLegend,
-        },
-        tooltip: {
-          enabled: false,
-          intersect: false,
-          filter(context) {
-            return (
-              !customOptions.onlyFirstTooltips ||
-              (context.datasetIndex === 0 && context.label !== 'null')
-            );
-          },
-          callbacks: {
-            title(context) {
-              return context[0] ? context[0].label.match(/(.{1,20})/g) : '';
-            },
-            label(context) {
-              const tooltipLabel =
-                context.dataset.tooltipLabels?.[context.dataIndex];
-
-              if (tooltipLabel !== undefined) {
-                return `${context.dataset.label}: ${tooltipLabel}`;
-              }
-
-              const label = context.dataset.data[context.dataIndex];
-
-              if (context.dataset.customLabel) {
-                return context.dataset.customLabel[
-                  context.dataIndex
-                ].toString();
-              }
-
-              return `${context.dataset.label}: ${label.toString()}${customOptions.tooltipLabelPostfix}`;
-            },
-            labelTextColor(context) {
-              const { color } = context.dataset;
-              if (!color) {
-                return theme.fontOnPrimary;
-              }
-
-              if (color && Array.isArray(color)) {
-                return color[context.dataIndex % color.length];
-              }
-
-              return color;
-            },
-          },
-        },
-        yAxisTopTitle: {
-          title: customOptions.yAxisTopTitle,
-        },
-      },
-      scales: {
-        x: {
-          stacked: customOptions.stacked,
-          grid: {
-            display: false,
-            drawBorder: false,
-          },
-          ticks: {
-            minRotation: customOptions.rotateLabel ? 15 : 0,
-            callback(value) {
-              const label = this.getLabelForValue(value);
-              return label && label.length > 11
-                ? `${label.substr(0, 11)}...`
-                : label;
-            },
-          },
-        },
-        y: {
-          beginAtZero: true,
-          suggestedMax: customOptions.suggestedMax,
-          grid: {
-            display: false,
-            drawBorder: false,
-          },
-          ticks: {
-            callback(value) {
-              if (value % 1 === 0) {
-                return value;
-              }
-
-              return null;
-            },
-          },
-        },
-      },
-      layout: {
-        padding: {
-          top: 32,
-        },
-      },
-    };
-  }, [customOptions, theme.fontOnPrimary]);
-
-  return (
-    <Bar
-      height={height}
-      data={data}
-      options={defaultOptions}
-      plugins={[padEmptyChartBar, yAxisTopTitlePlugin]}
-      {...props}
-    />
-  );
-};
-
-export default BarChart;