@cashub/ui 0.48.30 → 0.49.0-beta.0

package/src/dropzone/subComponent/Message.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Message = styled.div.attrs(() => ({
+  'data-testid': 'message-container',
+}))`
+  text-align: center;
+
+  > svg {
+    margin-bottom: var(--spacing-s);
+    font-size: var(--font-h2);
+  }
+
+  ${({ dragging }) => (dragging ? 'opacity: 0.5' : '')};
+`;
+
+export default Message;

package/src/figure/IconFigure.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+const IconFigure = styled.figure.attrs(({ size }) => {
+  return {
+    size: size || 'medium',
+  };
+})`
+  ${({ size }) => {
+    switch (size) {
+      case 'small':
+        return `
+          width: 16px;
+          height: 16px;
+        `;
+      case 'medium':
+        return `
+          width: 24px;
+          height: 24px;
+        `;
+      case 'large':
+        return `
+          width: 32px;
+          height: 32px;
+        `;
+      default:
+        break;
+    }
+  }}
+`;
+
+export default IconFigure;

package/src/figure/ImageFigure.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import rounded from '../styles/mixin/rounded';
+
+const ImageFigure = styled.figure.attrs(() => ({
+  rounded: true,
+}))`
+  width: 160px;
+  height: 160px;
+  border: 4px dashed var(--border-color);
+  padding: var(--spacing-xs);
+  margin-left: var(--spacing);
+
+  ${({ small }) =>
+    small &&
+    `
+      width: 40px;
+      height: 40px;
+    `}
+
+  ${rounded}
+
+  ${({ noBorder }) => noBorder && 'border: none;'}
+`;
+
+export default ImageFigure;

package/src/figure/__stories__/IconFigure.stories.js

@@ -0,0 +1,25 @@
+import IconFigure from '../IconFigure';
+
+const metadata = {
+  title: 'Figure/IconFigure',
+  component: IconFigure,
+  argTypes: {
+    size: {
+      description: 'Size of the container',
+      control: 'radio',
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+const Template = (args) => (
+  <IconFigure {...args} style={{ backgroundColor: '#13142E' }}></IconFigure>
+);
+
+const Default = Template.bind({});
+Default.args = {
+  size: 'small',
+};
+
+export default metadata;
+export { Default };

package/src/figure/__stories__/ImageFigure.stories.js

@@ -0,0 +1,26 @@
+import ImageFigure from '../ImageFigure';
+import ImageFluid from '../../image/ImageFluid';
+import Picture from '../../assets/images/default-user.jpg';
+
+const metadata = {
+  title: 'Figure/ImageFigure',
+  component: ImageFigure,
+};
+
+const Template = (args) => {
+  return (
+    <ImageFigure {...args}>
+      <ImageFluid src={Picture} alt='pic' />
+    </ImageFigure>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  roundedCircle: false,
+  small: false,
+  noBorder: false,
+};
+
+export default metadata;
+export { Default };

package/src/figure/__test__/IconFigure.test.js

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import IconFigure from '../IconFigure';
+
+describe('Test IconFigure Component', () => {
+  test('default size', () => {
+    render(<IconFigure />);
+    expect(screen.getByRole('figure')).toHaveStyle({
+      width: '24px',
+      height: '24px',
+    });
+  });
+
+  test('small size', () => {
+    render(<IconFigure size='small' />);
+    expect(screen.getByRole('figure')).toHaveStyle({
+      width: '16px',
+      height: '16px',
+    });
+  });
+
+  test('large size', () => {
+    render(<IconFigure size='large' />);
+    expect(screen.getByRole('figure')).toHaveStyle({
+      width: '32px',
+      height: '32px',
+    });
+  });
+});

package/src/figure/__test__/ImageFigure.test.js

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import ImageFigure from '../ImageFigure';
+import 'jest-styled-components';
+
+describe('test ImageFigure', () => {
+  test('render ImageFigure', () => {
+    render(<ImageFigure>test</ImageFigure>);
+    const imageFigure = screen.getByRole('figure');
+    expect(imageFigure).toBeInTheDocument();
+    expect(imageFigure).not.toHaveStyle({
+      width: '40px',
+      height: '40px',
+      border: 'none',
+    });
+    expect(imageFigure).not.toHaveStyleRule(
+      'border-radius',
+      'var(--border-radius-round)'
+    );
+  });
+  test('parameter', () => {
+    render(
+      <ImageFigure small noBorder roundedCircle>
+        test
+      </ImageFigure>
+    );
+    const imageFigure = screen.getByRole('figure');
+    expect(imageFigure).toBeInTheDocument();
+    expect(imageFigure).toHaveStyle({
+      width: '40px',
+      height: '40px',
+      border: 'none',
+    });
+    expect(imageFigure).toHaveStyleRule(
+      'border-radius',
+      'var(--border-radius-round)'
+    );
+  });
+});

package/src/figure/index.js

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

package/src/file/HiddenFileInput.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const HiddenFileInput = styled.input.attrs(() => ({
+  'data-testid': 'hiddenFileInput',
+  type: 'file',
+}))`
+  display: none;
+`;
+
+export default HiddenFileInput;

package/src/file/index.js

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

package/src/form/Checkbox.js

@@ -0,0 +1,138 @@
+import { forwardRef, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import Input from './Input';
+import Label from './Label';
+import { MdDone, MdRemove } from 'react-icons/md';
+
+const Checkbox = forwardRef(
+  (
+    {
+      htmlFor,
+      text,
+      disabled,
+      checked,
+      indeterminate,
+      onChange,
+      noMargin,
+      fontSizeBig,
+      marginRight,
+      variant = 'square',
+    },
+    ref,
+  ) => {
+    const inputRef = useRef(null);
+
+    return (
+      <StyledLabel
+        htmlFor={htmlFor}
+        disabled={disabled}
+        ref={ref}
+        noMargin={noMargin}
+        fontSizeBig={fontSizeBig}
+        marginRight={marginRight}
+        variant={variant}
+      >
+        <StyledCheckbox
+          ref={inputRef}
+          checked={checked}
+          aria-checked={indeterminate ? 'mixed' : checked}
+          type='checkbox'
+          id={htmlFor}
+          disabled={disabled}
+          onChange={onChange}
+          fontSizeBig={fontSizeBig}
+        />
+        <span>
+          <Unchecked variant={variant} />
+          <Checked variant={variant}>
+            {indeterminate ? <MdRemove /> : <MdDone />}
+          </Checked>
+          <Text>{text}</Text>
+        </span>
+      </StyledLabel>
+    );
+  },
+);
+
+const StyledCheckbox = styled(Input)`
+  display: none;
+
+  &:checked + span {
+    > div:last-of-type {
+      display: block;
+      color: var(--color-primary);
+    }
+
+    > div:first-of-type {
+      display: none;
+    }
+  }
+`;
+
+const StyledLabel = styled(Label)`
+  display: inline-block;
+  cursor: pointer;
+  vertical-align: middle;
+
+  ${({ marginRight }) =>
+    marginRight &&
+    css`
+      margin-right: var(--spacing-l);
+    `}
+
+  > span {
+    ${({ disabled }) =>
+      disabled &&
+      css`
+        opacity: 0.5;
+        cursor: not-allowed;
+      `}
+
+    display: flex;
+    align-items: center;
+
+    > div {
+      margin-right: var(--spacing-xs);
+      width: 24px;
+      height: 24px;
+      border-radius: ${({ variant }) => (variant === 'circle' ? '50%' : '4px')};
+    }
+
+    > div:last-of-type {
+      display: none;
+    }
+  }
+
+  ${({ fontSizeBig }) => fontSizeBig && 'font-size: var(--font-h3);'}
+
+  ${({ noMargin }) => noMargin && 'margin: 0;'}
+`;
+
+const Unchecked = styled.div`
+  flex: 0 0 auto;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: ${({ variant }) => (variant === 'circle' ? '50%' : '4px')};
+`;
+
+const Checked = styled.div`
+  flex: 0 0 auto;
+  border: var(--border-width) solid var(--color-primary);
+  background: var(--color-primary);
+  position: relative;
+  border-radius: ${({ variant }) => (variant === 'circle' ? '50%' : '4px')};
+
+  > svg {
+    position: absolute;
+    color: var(--font-on-primary);
+    font-size: var(--font-h3);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
+
+const Text = styled.p`
+  word-break: break-all;
+`;
+
+export default Checkbox;

package/src/form/Fieldset.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const Fieldset = styled.fieldset`
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-s);
+  padding: var(--spacing-s);
+
+  &[disabled] {
+    border-color: var(--border-color-transparent);
+  }
+`;
+
+export default Fieldset;

package/src/form/FormItem.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const FormItem = styled.div`
+  margin-bottom: var(--spacing);
+
+  ${({ alignCenter }) => alignCenter && `
+    display: flex;
+    align-items: center;
+  `}
+`;
+
+export default FormItem;

package/src/form/Input.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import inputPlaceholder from '../styles/mixin/inputPlaceholder';
+
+const Input = styled.input`
+  display: block;
+  width: 100%;
+  height: 36px;
+  border: var(--border-width) solid var(--border-color);
+  padding: 10px var(--spacing-s);
+  border-radius: var(--border-radius-l);
+  background: transparent;
+  color: var(--font-on-background);
+  transition: 0.3s;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  &:focus {
+    border: var(--border-width) solid var(--color-primary);
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  ${inputPlaceholder`
+    color: var(--font-on-mute);
+  `}
+
+  ${({ hidden }) => hidden && 'display: none;'}
+
+  ${({ borderRadiusS }) =>
+    borderRadiusS && 'border-radius: var(--border-radius-s);'}
+
+  ${({ alignCenter }) => alignCenter && 'text-align: center;'}
+
+  ${({ autoWidth }) => autoWidth && 'width: auto;'};
+`;
+
+export default Input;

package/src/form/Label.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+const Label = styled.label`
+  display: inline-block;
+  color: var(--font-on-background);
+  font-size: var(--font-body1);
+  word-break: break-word;
+  white-space: pre-wrap;
+  margin-bottom: var(--spacing-xs);
+
+  ${({ required }) =>
+    required &&
+    `&:after {
+      content: ' *';
+      color: var(--color-danger);
+    }
+  `}
+
+  ${({ noMarginBottom }) => noMarginBottom && 'margin-bottom: 0;'}
+
+  ${({ noBreakWord }) => noBreakWord && 'word-break: keep-all;'}
+
+  /* use float to make element align to right */
+  /* use text-align to make all text(multiple line) align to right */
+  ${({ alignRight }) =>
+    alignRight &&
+    `
+      text-align: right;
+      float: right;
+    `}
+
+  ${({ disabled }) => disabled && 'opacity: 0.5;'}
+`;
+
+export default Label;

package/src/form/MutedText.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const MutedText = styled.span`
+  display: block;
+  font-size: var(--font-caption);
+  color: var(--font-on-mute);
+  text-align: ${({ alignRight }) => (alignRight ? 'right' : 'left')};
+  margin-top: var(--spacing-xs);
+`;
+
+export default MutedText;

package/src/form/PasswordInput.js

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import Input from './Input';
+import { IconButton } from '../button';
+import { BiShow, BiHide } from 'react-icons/bi';
+
+const PasswordInput = ({ ...props }) => {
+  const [type, setType] = useState('password');
+
+  const toggleType = () => {
+    setType(type === 'password' ? 'text' : 'password');
+  };
+
+  return (
+    <Container>
+      <Input {...props} type={type} />
+      <IconButton size='small' onClick={toggleType}>
+        {type === 'password' && <BiHide />}
+        {type === 'text' && <BiShow />}
+      </IconButton>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: relative;
+
+  ${Input} {
+    padding-right: 40px;
+  }
+
+  ${IconButton} {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 0.5rem;
+  }
+`;
+
+export default PasswordInput;

package/src/form/RadioButton.js

@@ -0,0 +1,82 @@
+import styled, { css } from 'styled-components';
+import Input from './Input';
+import Label from './Label';
+
+const RadioButton = ({ htmlFor, value, text, disabled, checked, onChange, noMarginBottom }) => {
+  return (
+    <StyledLabel htmlFor={htmlFor} disabled={disabled} noMarginBottom={noMarginBottom}>
+      <StyledCheckbox
+        onChange={() => {
+          onChange(value);
+        }}
+        checked={checked}
+        type='checkbox'
+        id={htmlFor}
+        disabled={disabled}
+      />
+      <span>
+        <Unchecked />
+        {text}
+      </span>
+    </StyledLabel>
+  );
+};
+
+const StyledCheckbox = styled(Input)`
+  display: none;
+
+  &:checked + span {
+    > div {
+      &:before {
+        display: block;
+      }
+    }
+  }
+`;
+
+const StyledLabel = styled(Label)`
+  margin-right: var(--spacing-xs);
+
+  > span {
+    ${({ disabled }) =>
+      disabled &&
+      css`
+        opacity: 0.5;
+      `}
+    display: flex;
+    align-items: center;
+
+    > div {
+      margin-right: var(--spacing-xs);
+      border-radius: var(--border-radius-round);
+
+      width: 24px;
+      height: 24px;
+
+      &:before {
+        display: none;
+      }
+    }
+  }
+
+  ${({ noMarginBottom }) => noMarginBottom && 'margin-bottom: 0;'}
+`;
+
+const Unchecked = styled.div`
+  border: var(--border-width) solid var(--border-color);
+  position: relative;
+
+  &:before {
+    content: '';
+    background: var(--color-primary);
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    border-radius: var(--border-radius-round);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
+
+export default RadioButton;