Merge pull request #27 from arch-spatula/feat/login-page

Feat/login page

Author: arch-spatula

src/App.test.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const ButtonWrapper = styled.button`
+  ${(props) => props.theme.fonts.body16Regular}
+  border-radius: 0.25rem;
+  border: none;
+  background-color: ${(props) =>
+    props.disabled ? props.theme.colors.gray400 : props.theme.colors.green};
+  padding: 0.25rem 0.75rem;
+  color: ${(props) => props.theme.colors.white};
+`;

src/Components/Common/Button/Button.style.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '../../../libs/test-utils';
+import { describe, vi, it } from 'vitest';
+import { Button } from '.';
+import user from '@testing-library/user-event';
+
+describe('Button', () => {
+  it('should invoke the function when the button is clicked', async () => {
+    user.setup();
+    const btnText = 'Button';
+    const mock = vi.fn(() => 0);
+
+    render(<Button onClick={mock}>{btnText}</Button>);
+    const btnElement = screen.getByRole('button');
+    await user.click(btnElement);
+
+    expect(btnElement).toBeInTheDocument();
+    expect(mock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not invoke the function when the button is disabled', async () => {
+    user.setup();
+    const btnText = 'Button';
+    const mock = vi.fn(() => 0);
+
+    render(
+      <Button onClick={mock} disabled>
+        {btnText}
+      </Button>
+    );
+    const btnElement = screen.getByRole('button');
+    await user.click(btnElement);
+
+    expect(btnElement).toBeDisabled();
+    expect(mock).toHaveBeenCalledTimes(0);
+  });
+});

src/Components/Common/Button/Button.test.tsx

@@ -1,12 +1,14 @@
+import { ButtonWrapper } from './Button.style';
+
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   children: React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
 };
 
 export function Button({ children, onClick, ...other }: ButtonProps) {
   return (
-    <button onClick={onClick} {...other}>
+    <ButtonWrapper onClick={onClick} {...other}>
       {children}
-    </button>
+    </ButtonWrapper>
   );
 }

src/Components/Common/Button/Button.tsx

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+
+export const InputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+  gap: 0.5rem;
+`;
+
+export const InputWrapper = styled.input`
+  all: unset;
+  ${(props) => props.theme.fonts.body16Regular}
+  padding: 0.5rem 0.75rem;
+  box-shadow: 0 0 0 1px ${(props) => props.theme.colors.gray300} inset;
+  border-radius: 0.5rem;
+  :hover {
+    box-shadow: 0 0 0 1px ${(props) => props.theme.colors.gray400} inset;
+  }
+  :focus {
+    box-shadow: 0 0 0 2px ${(props) => props.theme.colors.green} inset;
+  }
+`;
+
+export const HelperText = styled.p`
+  ${(props) => props.theme.fonts.body14Regular}
+  min-height: 1.5rem;
+`;

src/Components/Common/Input/Input.style.tsx

@@ -0,0 +1,33 @@
+import { Input } from '.';
+import { render, screen } from '../../../libs/test-utils';
+import { describe, it } from 'vitest';
+
+describe('Input', () => {
+  it('should render helper text', () => {
+    const inputVal = 'foo';
+    const helperText = "I'm helping";
+
+    render(
+      <Input value={inputVal} onChange={() => 1} helperText={helperText} />
+    );
+
+    const helperTextElement = screen.getByText(helperText);
+    expect(helperTextElement).toBeInTheDocument();
+  });
+
+  it('should not render helper text when hideHelper is true', () => {
+    const helperText = 'Test helper text';
+
+    render(
+      <Input
+        value={'foo'}
+        onChange={() => 0}
+        helperText={helperText}
+        hideHelper
+      />
+    );
+    const helperTextElement = screen.queryByText(helperText);
+
+    expect(helperTextElement).not.toBeInTheDocument();
+  });
+});

src/Components/Common/Input/Input.test.tsx

@@ -1,8 +1,30 @@
+import { InputWrapper, HelperText, InputContainer } from './Input.style';
+
 type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   value: string;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
+  helperText?: string;
+  hideHelper?: boolean;
+  customRef?: React.RefObject<HTMLInputElement>;
 };
 
-export function Input({ onChange, value, ...other }: InputProps) {
-  return <input onChange={onChange} value={value} {...other} />;
+export function Input({
+  onChange,
+  value,
+  helperText,
+  hideHelper = false,
+  customRef,
+  ...other
+}: InputProps) {
+  return (
+    <InputContainer>
+      <InputWrapper
+        onChange={onChange}
+        value={value}
+        ref={customRef}
+        {...other}
+      />
+      {!hideHelper && <HelperText>{helperText}</HelperText>}
+    </InputContainer>
+  );
 }

src/Components/Common/Input/Input.tsx

@@ -3,8 +3,8 @@ import { Nav, Container, List, ListItem } from './Navbar.style';
 import { useLogin } from '../../hooks';
 
 export function Navbar() {
-  const { isLoggedIn } = useLogin();
-  return <Nav>{isLoggedIn ? <LoggedInNav /> : <LoggedOutNav />}</Nav>;
+  const { token } = useLogin();
+  return <Nav>{token ? <LoggedInNav /> : <LoggedOutNav />}</Nav>;
 }
 
 function LoggedInNav() {

src/Components/Navbar/index.tsx

@@ -1,7 +1,8 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
 export function useInput() {
   const [inputVal, setInputVal] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const changeInputVal = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -14,5 +15,9 @@ export function useInput() {
     setInputVal('');
   }, []);
 
-  return { inputVal, changeInputVal, resetInputVal };
+  const focusInput = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  return { inputVal, changeInputVal, resetInputVal, focusInput, inputRef };
 }

src/hooks/useInput/index.ts

@@ -1,17 +1,10 @@
-import { atom, useAtom } from 'jotai';
+import { useAtom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
 
-const loggedIn = atom(false);
+const tokenAtom = atomWithStorage('token', '');
 
 export function useLogin() {
-  const [isLoggedIn, setIsLoggedIn] = useAtom(loggedIn);
+  const [token, setToken] = useAtom(tokenAtom);
 
-  const login = () => {
-    setIsLoggedIn(true);
-  };
-
-  const logout = () => {
-    setIsLoggedIn(false);
-  };
-
-  return { isLoggedIn, login, logout };
+  return { token, setToken };
 }