refactor: ion input with styled components (#143)

src/components/input/input.test.tsx

@@ -1,19 +1,19 @@
-import { render, screen } from '@testing-library/react';
-import { InputProps, IonInput } from './input';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { inputTypes } from '../../core/types/input';
-import React from 'react';
+import { renderWithTheme } from '../utils/test-utils';
+import { InputProps, IonInput } from './input';
 
-const defaultInput: InputProps = {
+const defaultInput = {
   placeholder: 'Digite o seu nome',
 };
 
 const sut = (props: InputProps = defaultInput) => {
-  return render(<IonInput {...props} />);
+  return renderWithTheme(<IonInput {...props} />);
 };
 
 const getInput = () => {
-  return screen.queryByPlaceholderText(defaultInput.placeholder!);
+  return screen.getByPlaceholderText(defaultInput.placeholder);
 };
 
 describe('IonInput', () => {
@@ -36,7 +36,7 @@ describe('IonInput', () => {
 
     it('should type value on input', async () => {
       const textToType = 'Olá eu sou o Goku!';
-      await userEvent.type(getInput()!, textToType);
+      await userEvent.type(getInput(), textToType);
       expect(getInput()).toHaveValue(textToType);
     });
   });

src/components/input/input.tsx

@@ -1,27 +1,25 @@
+import { InputHTMLAttributes, useRef } from 'react';
 import { InputType } from '../../core/types/input';
-import { InputContainer, InputRow, InputStyles } from './styles';
-import React from 'react';
+import { Container, Input } from './styles';
 
 export type InputProps = {
-  placeholder?: string;
   type?: InputType;
-  disabled?: boolean;
-};
+} & InputHTMLAttributes<HTMLInputElement>;
 
 export const IonInput = ({
-  placeholder,
   type = 'text',
   disabled = false,
+  ...props
 }: InputProps) => {
+  const ref = useRef<HTMLInputElement>(null);
+
+  const handleContainerClick = () => {
+    ref.current && ref.current.focus();
+  };
+
   return (
-    <InputContainer>
-      <InputRow disabled={disabled}>
-        <InputStyles
-          type={type}
-          placeholder={placeholder}
-          disabled={disabled}
-        />
-      </InputRow>
-    </InputContainer>
+    <Container onClick={handleContainerClick} disabled={disabled}>
+      <Input ref={ref} type={type} disabled={disabled} {...props} />
+    </Container>
   );
 };

src/components/input/styles.ts

@@ -1,64 +1,51 @@
-import stitches from '../../stitches.config';
-const { styled } = stitches;
-
-export const InputContainer = styled('div', {
-  display: 'flex',
-  lineHeight: '0',
-  width: '100%',
-});
-
-export const InputRow = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  gap: '8px',
-  background: '$neutral1',
-  border: '1px solid $neutral5',
-  borderRadius: '8px',
-  padding: '8px 12px',
-  width: '100%',
-
-  variants: {
-    disabled: {
-      true: {
-        background: '$neutral2',
-        border: '1px solid $neutral4',
-        cursor: 'not-allowed',
-        outline: 'none',
-        color: '$neutral4',
-
-        '&:hover': {
-          borderColor: '$neutral4',
-        },
-
-        '::placeholder': {
-          color: '$neutral5',
-        },
-      },
-    },
-  },
-
-  '&:focus-within': {
-    borderColor: '$primary5',
-    outline: '2px solid',
-    outlineColor: '$primary2',
-  },
-
-  '&:hover': {
-    borderColor: '$primary4',
-  },
-});
-
-export const InputStyles = styled('input', {
-  border: 'none',
-  width: '100%',
-  outline: 'none',
-  color: '$neutral7',
-  background: '$neutral1',
-  fontSize: '14px',
-
-  '&[disabled]': {
-    background: '$neutral2',
-    cursor: 'not-allowed',
-    outline: 'none',
-  },
-});
+import { css, styled } from 'styled-components';
+
+export const Container = styled.div<{ disabled: boolean }>`
+  ${({ theme }) => css`
+    ${theme.utils.flex.start(8)};
+    width: 100%;
+    background: ${theme.colors.neutral[1]};
+    border: 1px solid ${theme.colors.neutral[5]};
+    border-radius: 8px;
+    padding: 0.8rem 1.2rem;
+    cursor: text;
+    ${theme.utils.focus};
+
+    &:hover {
+      border-color: ${theme.colors.primary[4]};
+    }
+
+    &:focus-within {
+      border-color: ${theme.colors.primary[5]};
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+      outline: none;
+      background: ${theme.colors.neutral[2]};
+      color: ${theme.colors.neutral[4]};
+      border-color: ${theme.colors.neutral[4]};
+
+      &::placeholder {
+        color: ${theme.colors.neutral[4]};
+      }
+    }
+  `}
+`;
+
+export const Input = styled.input`
+  ${({ theme }) => css`
+    ${theme.font.size[14]}
+    border: none;
+    width: 100%;
+    outline: none;
+    color: ${theme.colors.neutral[7]};
+    background: ${theme.colors.neutral[1]};
+
+    &:disabled {
+      background: ${theme.colors.neutral[2]};
+      cursor: not-allowed;
+      outline: none;
+    }
+  `}
+`;

src/stories/input/input.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import { InputProps, IonInput } from '../../components/input/input';
 
@@ -20,6 +20,7 @@ export const Password = Template.bind({});
 Password.args = {
   placeholder: 'Digite sua senha',
   type: 'password',
+  autoComplete: 'off',
 };
 
 export const Number = Template.bind({});

src/styles/theme.ts

@@ -137,6 +137,12 @@ export default {
   },
   utils: {
     flex: {
+      start: (gap = 0) => css`
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: ${gap}px;
+      `,
       center: (gap = 0) => css`
         display: flex;
         align-items: center;