@cashub/ui 0.22.7 → 0.22.9

package/src/button/ButtonGroup.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+const ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+
+  > button:not(:first-child),
+  *:not(:first-child) {
+    margin-left: var(--spacing-s);
+  }
+
+  ${({ alignCenter }) => alignCenter && 'justify-content: center;'}
+
+  ${({ alignRight }) => alignRight && 'justify-content: flex-end;'}
+
+  ${({ marginBottom }) => marginBottom && 'margin-bottom: var(--spacing);'}
+
+  ${({ vertical }) =>
+    vertical &&
+    `
+    flex-direction: column;
+
+    > button,
+    > * {
+      margin-left: 0 !important;
+      margin-bottom: var(--spacing-s);
+    }
+  `}
+
+  ${({ height100 }) => height100 && 'height: 100%;'}
+`;
+
+export default ButtonGroup;

package/src/button/IconButton.js

@@ -0,0 +1,40 @@
+import styled, { css } from 'styled-components';
+
+const IconButton = styled.div.attrs(() => ({
+  role: 'button',
+}))`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  transition: 0.3s;
+  position: relative;
+  border-radius: var(--border-radius-l);
+  color: ${({ disabled }) => {
+    return disabled ? 'var(--color-grey)' : 'var(--font-on-background)';
+  }};
+  cursor: ${({ disabled }) => (disabled ? 'no-drop' : 'pointer')};
+  margin: auto;
+
+  ${({ size }) =>
+    size === 'small' &&
+    css`
+      width: 32px;
+      height: 32px;
+    `}
+
+  &:hover {
+    ${({ disabled }) => !disabled && 'background: var(--color-hover)'}
+  }
+
+  > svg {
+    font-size: 1.5rem;
+
+    ${({ size }) => size === 'small' && 'font-size: 1rem;'}
+
+    ${({ size }) => size === 'large' && 'font-size: 2rem;'}
+  }
+`;
+
+export default IconButton;

package/src/button/ScrollToTopButton.js

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { MdOutlineArrowBackIosNew } from 'react-icons/md';
+import Button from './Button';
+
+const ScrollToTopButton = () => {
+  const [$display, setDisplay] = useState(false);
+
+  const toggleVisible = () => {
+    const scrolled = window.pageYOffset;
+    scrolled === 0 ? setDisplay(false) : setDisplay(true);
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisible);
+
+    return () => {
+      window.removeEventListener('scroll', toggleVisible);
+    };
+  }, []);
+
+  return (
+    <StyledScrollToTopButton onClick={scrollToTop} $display={$display} iconOnly>
+      <MdOutlineArrowBackIosNew />
+    </StyledScrollToTopButton>
+  );
+};
+
+const StyledScrollToTopButton = styled(Button)`
+  position: fixed;
+  bottom: var(--spacing);
+  right: var(--spacing);
+  display: ${({ $display }) => ($display ? 'flex' : 'none')};
+  z-index: 30;
+
+  > svg {
+    transform: rotate(90deg);
+  }
+`;
+
+export default ScrollToTopButton;

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

@@ -0,0 +1,70 @@
+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',
+    },
+    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:按鈕所有可支援的事件監聽補在文件內
+};
+
+export default metadata;
+export { Default, Secondary };

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/chart/BarChart.js

@@ -0,0 +1,134 @@
+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';
+
+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(() => {
+    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,
+    };
+  }, [options]);
+
+  const defaultOptions = useMemo(() => {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      aspectRatio: 1,
+      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 label = context.dataset.data[context.dataIndex];
+
+              if (context.dataset.customLabel) {
+                return context.dataset.customLabel[
+                  context.dataIndex
+                ].toString();
+              }
+
+              return label.toString();
+            },
+            labelTextColor(context) {
+              const { color } = context.dataset;
+              if (!color) {
+                return theme.fontOnPrimary;
+              }
+
+              if (color && Array.isArray(color)) {
+                return color[context.dataIndex % color.length];
+              }
+
+              return color;
+            },
+          },
+        },
+      },
+      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;
+            },
+          },
+        },
+      },
+    };
+  }, [customOptions, theme.fontOnPrimary]);
+
+  return (
+    <Bar
+      height={height}
+      data={data}
+      options={defaultOptions}
+      plugins={[padEmptyChartBar]}
+      {...props}
+    />
+  );
+};
+
+export default BarChart;