Merge pull request #702 from glints-dev/feature/next-input

Add Input

Author: marthayaputra

jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package.json

@@ -149,6 +149,9 @@
     ],
     "modulePathIgnorePatterns": [
       "test/e2e/"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.ts"
     ]
   },
   "optionalDependencies": {

src/@next/CurrencyInput/CurrencyInput.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { CurrencyInputProps, CurrencyInput } from './CurrencyInput';
+
+(CurrencyInput as React.FunctionComponent<CurrencyInputProps>).displayName =
+  'Currency';
+
+export default {
+  title: '@next/CurrencyInput',
+  component: CurrencyInput,
+  decorators: [Story => <BaseContainer>{Story()}</BaseContainer>],
+  argTypes: {},
+} as Meta;
+
+const Template: Story<CurrencyInputProps> = args => <CurrencyInput {...args} />;
+
+export const Interactive = Template.bind({});
+Interactive.args = {
+  placeholder: '0.0',
+  disabled: false,
+  locale: 'en',
+  value: 10000,
+  onChange: (value: number) => {
+    console.log('Currency on changed value: ', value);
+  },
+};

src/@next/CurrencyInput/CurrencyInput.test.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { CurrencyInput } from './CurrencyInput';
+
+describe('<Currency />', () => {
+  it('should call onChange with number', async () => {
+    const onChange = jest.fn();
+
+    const screen = render(<CurrencyInput onChange={onChange} />);
+    const input = screen.getByRole('textbox');
+
+    fireEvent.change(input, { target: { value: 1000 } });
+
+    const inputEl = screen.getByRole('textbox');
+    expect(inputEl).toHaveValue('1,000');
+
+    expect(onChange).toHaveBeenCalledWith(1000);
+  });
+});

src/@next/CurrencyInput/CurrencyInput.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { InputProps } from '../Input/Input';
+import { StyledCurrency } from './CurrencyStyles';
+
+export type CurrencyInputProps = Omit<
+  InputProps,
+  'type' | 'prefix' | 'onChange' | 'value'
+> & {
+  locale?: string;
+  value?: number;
+  onChange?: (value: number) => void;
+};
+
+export const CurrencyInput = ({
+  locale = 'en',
+  value = 0,
+  onChange,
+  ...props
+}: CurrencyInputProps) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const supportedLocale = Intl.ListFormat.supportedLocalesOf(locale);
+  const localeValue = supportedLocale.length > 0 ? supportedLocale[0] : 'en';
+
+  if (supportedLocale.length === 0) {
+    console.warn(`Locale value of ${locale} is unsupported, "en" will be used`);
+  }
+
+  const formatter = new Intl.NumberFormat(localeValue);
+
+  const getRawNumber = (value: string) => {
+    if (typeof value === 'number') {
+      return value;
+    }
+
+    const parts = formatter.formatToParts(1000.1);
+    const thousandSeparator = parts[1].value;
+    const decimalSeparator = parts[3].value;
+
+    const cleanedValue = parseFloat(
+      value
+        .replace(new RegExp('\\' + thousandSeparator, 'g'), '')
+        .replace(new RegExp('\\' + decimalSeparator), '.')
+    );
+
+    return Number.isNaN(cleanedValue) ? 0 : cleanedValue;
+  };
+
+  const [formattedValue, setFormattedValue] = useState(
+    formatter.format(getRawNumber(value.toString()))
+  );
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const rawValue = getRawNumber(e.currentTarget.value);
+    onChange(rawValue);
+    setFormattedValue(formatter.format(rawValue));
+  };
+
+  return (
+    <StyledCurrency
+      type="text"
+      prefix={<div>$</div>}
+      {...props}
+      value={formattedValue === '0' ? '' : formattedValue}
+      onChange={handleChange}
+    />
+  );
+};

src/@next/CurrencyInput/CurrencyStyles.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Input } from '../Input/Input';
+import { space24 } from '../utilities/spacing';
+
+export const StyledCurrency = styled(Input)`
+  padding-left: ${space24} !important;
+`;

src/@next/Icon/icons/icons.ts

@@ -63,6 +63,7 @@ export const iconNames = [
   'ri-checkbox-line',
   'ri-checkbox-indeterminate-fill',
   'ri-checkbox-indeterminate-line',
+  'ri-search',
 ] as const;
 
 export type IconNames = typeof iconNames[number];
@@ -130,4 +131,5 @@ export const iconsMappingComponent: { [name in IconNames]: SVGComponent } = {
   ['ri-checkbox-line']: Icons.RiCheckboxLine,
   ['ri-checkbox-indeterminate-fill']: Icons.RiCheckboxIndeterminateFill,
   ['ri-checkbox-indeterminate-line']: Icons.RiCheckboxIndeterminateLine,
+  ['ri-search']: Icons.RiSearch,
 };

src/@next/Icon/icons/ri-search.svg

@@ -0,0 +1,43 @@
+import React from 'react';
+import {
+  StyledContainer,
+  StyledInput,
+  StyledPrefixContainer,
+  StyledSuffixContainer,
+} from './InputStyle';
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
+  error?: boolean;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+}
+
+export const Input = ({
+  error,
+  disabled,
+  prefix,
+  suffix,
+  ...props
+}: InputProps) => {
+  const hasPrefix = !!prefix;
+  const hasSuffix = !!suffix;
+
+  const Prefix = () =>
+    hasPrefix ? <StyledPrefixContainer>{prefix}</StyledPrefixContainer> : null;
+
+  const Suffix = () =>
+    hasSuffix ? <StyledSuffixContainer>{suffix}</StyledSuffixContainer> : null;
+
+  return (
+    <StyledContainer
+      data-prefix={hasPrefix}
+      data-error={error}
+      data-disabled={disabled}
+    >
+      <Prefix />
+      <StyledInput disabled={disabled} {...props} />
+      <Suffix />
+    </StyledContainer>
+  );
+};

src/@next/Input/Input.tsx

@@ -0,0 +1,108 @@
+import styled from 'styled-components';
+import { Breakpoints } from '../..';
+import { Neutral, Red } from '../utilities/colors';
+import { InputProps } from './Input';
+
+export const StyledContainer = styled.div<InputProps>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  flex-basis: 100%;
+
+  font-family: 'Noto Sans', sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 150%;
+
+  &[data-prefix='true'] input {
+    padding-left: 40px;
+  }
+
+  &[data-error='true'] input {
+    border: 1px solid ${Red.B93};
+  }
+
+  &[data-error='true'] input:focus {
+    box-shadow: none;
+  }
+
+  &[data-disabled='true'] input {
+    border: 1px solid ${Neutral.B85};
+    background: ${Neutral.B95};
+    color: ${Neutral.B85};
+  }
+
+  &[data-disabled='true'] input::placeholder {
+    color: ${Neutral.B85};
+  }
+
+  &[data-disabled='true'] svg {
+    fill: ${Neutral.B85};
+  }
+
+  &[data-disabled='true'] div {
+    color: ${Neutral.B85};
+  }
+`;
+
+export const StyledPrefixContainer = styled.div`
+  position: absolute;
+  padding: 0;
+  left: 0;
+  line-height: 0;
+  color: ${Neutral.B40};
+
+  svg {
+    height: 17px;
+    width: 17px;
+    margin: 10px 14px;
+    fill: ${Neutral.B40};
+  }
+
+  div {
+    color: ${Neutral.B40};
+    margin: 18px 12px;
+  }
+`;
+
+export const StyledSuffixContainer = styled(StyledPrefixContainer)`
+  left: auto;
+  right: 0;
+`;
+
+export const StyledInput = styled.input<InputProps>`
+  background: ${Neutral.B100};
+  box-sizing: border-box;
+  border: 1px solid ${Neutral.B68};
+  border-radius: 4px;
+  padding: 0 12px;
+
+  font-family: 'Noto Sans', sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 150%;
+
+  color: ${Neutral.B18};
+
+  flex: none;
+  order: 1;
+  align-self: stretch;
+  flex-grow: 0;
+  height: 36px;
+
+  &::placeholder {
+    color: ${Neutral.B40};
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0px 0px 0px 1px ${Neutral.B100}, 0px 0px 0px 3px #6ac9ec;
+  }
+
+  @media (max-width: ${Breakpoints.large}) {
+    font-size: 14px;
+  }
+`;