Merge pull request #13 from Mario-Duarte/feat/ui-development

Input size component

src/App.tsx

@@ -1,9 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 import { GlobalStyle } from './styles/GlobalStyle';
 import { Title } from './components/Title';
 import { SampleArea } from './components/SampleArea';
 import { DefaultSizeInput } from './components/DefaultSizeInput';
 import { DropDown } from './components/DropDown';
+import { InputSize } from './components/InputSize';
 import { Footer } from './components/Footer';
 import useConvertUnits, { units } from './Hooks/useConvertUnits';
 import { 
@@ -37,11 +38,7 @@ export function App() {
     setResultUnit(unit);
   }
 
-  const handleChangeDefaultSize = (size:number) => {
-    setDefaultSize(size);
-  }
-
-  useEffect(() => {
+  const converUnits = useMemo(() => {
     const converted =  useConvertUnits({
       defaultSize: defaultSize,
       size: convertSize,
@@ -55,19 +52,20 @@ export function App() {
       resultUnit: 'px',
     });
     setResultSize(converted!);
+    console.log(converted!);
     setSampleSize(convertedPX!);
-  }, [defaultSize, convertSize, convertUnit, resultUnit]);
-
+  }, [defaultSize, convertSize, convertUnit, resultUnit]);  
 
   return (
     <>
       <GlobalStyle />
       <StyledApp>
         <Title title='PX2REM' />
         <SampleArea fontSize={sampleSize} />
-        <DefaultSizeInput onChange={handleChangeDefaultSize} />
+        <DefaultSizeInput onChange={handleDefaultSize} />
         <Row>
           <Col>
+            <InputSize value={convertSize} onChange={handleConvertSize} />
             <DropDown defaultValue={convertUnit} onChange={handleConvertUnit} />
           </Col>
           <Col>

src/components/InputSize/InputSize.styles.tsx

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+
+
+export const InputContainer = styled.div`
+    position: relative;
+    width: 100%;
+    background-color: var(--box-bg-color);
+    border-radius: 5px;
+    padding: 20px 10px;
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+export const StyledInput = styled.input`
+    background: none;
+    appearance: none;
+    color: var(--color-main-copy);
+    border: none;
+    width: 100%;
+    text-align: center;
+    font-size: 4rem;
+    font-weight: 600;
+    padding: 0;
+    letter-spacing: 0;
+
+    &:focus {
+        outline: none;
+    }
+`;
+
+export const Label = styled.label`
+    color: var(--color-main-copy);
+    margin-top: 5px;
+    text-transform: uppercase;
+`;

src/components/InputSize/InputSize.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { InputSize } from './InputSize'; 
+
+afterEach(cleanup);
+
+const setup = (onChange:(size:number) => void) => {
+    const util = render(<InputSize value={16} onChange={onChange} />);
+    const input = util.getByLabelText('convertSize') as HTMLInputElement;
+    return { input, ...util }
+};
+
+test('Renders DropDown selector', () => {
+    const onChangeHandle = (size:number) => {}
+    setup(onChangeHandle);
+
+    expect(screen.getByLabelText('convertSize')).toBeInTheDocument();
+});
+
+test('Sets default value to number', () => {
+    const onChangeHandle = (size:number) => {}
+    const { input } = setup(onChangeHandle);
+
+    fireEvent.change(input, {target: {value: '16'}});
+
+    expect(input.value).toBe("16");
+});
+
+test('On change function called', () => {
+    const onChangeMock = jest
+    .fn()
+    .mockImplementation((size:number) => { return size });
+
+    const { input } = setup(onChangeMock);
+    fireEvent.change(input, {target: {value: '32'}});
+
+    expect(onChangeMock).toHaveBeenCalledWith(32);
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+});

src/components/InputSize/InputSize.tsx

@@ -0,0 +1,28 @@
+import {
+    InputContainer,
+    StyledInput,
+    Label
+} from './InputSize.styles';
+
+export interface InputSizeProps {
+    value: number;
+    onChange: (size:number) => void;
+}
+
+export function InputSize({
+    value,
+    onChange
+}:InputSizeProps) {
+
+    const handleChange = (e:React.ChangeEvent<HTMLInputElement>) => {
+        const size:number = +e.target.value; // the + will convert the input value from a string to a number
+        onChange(size);
+    }
+
+    return(
+        <InputContainer>
+            <StyledInput aria-label='convertSize' type="number" step={1} value={value} min={1} onChange={handleChange} />
+            <Label>Convert</Label>
+        </InputContainer>
+    )
+}

src/components/InputSize/index.tsx

@@ -0,0 +1 @@
+export { InputSize } from './InputSize';

src/styles/GlobalStyle.ts

@@ -38,4 +38,10 @@ export const GlobalStyle = createGlobalStyle`
     background-color: var(--color-secondary);
     background: var(--background-gradient-main);
   }
+
+  input,
+  textarea,
+  select {
+    font-family: 'Rubik', sans-serif;
+  }
 `