Merge pull request #80 from manh-t/release/0.6.0

Release - 0.6.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "manh-react-survey",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": true,
   "dependencies": {
     "@reduxjs/toolkit": "1.9.5",
@@ -10,6 +10,7 @@
     "classnames": "2.3.2",
     "date-fns": "2.30.0",
     "lodash": "4.17.21",
+    "rc-slider": "10.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-redux": "8.1.0",

src/App.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useRoutes } from 'react-router-dom';
 import 'dummy.scss';
 import 'assets/stylesheets/application.scss';
+import 'rc-slider/assets/index.css';
 import { ToastContainer } from 'react-toastify';
 
 import routes from './routes';

src/components/AppSlider/index.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import AppSlider, { appSliderDataTestIds } from '.';
+
+describe('AppSlider', () => {
+  it('renders AppSlider component', () => {
+    render(<AppSlider onValueChanged={jest.fn()} />);
+
+    const appSlider = screen.getByTestId(appSliderDataTestIds.base);
+    const slider = screen.getByRole('slider');
+
+    expect(appSlider).toBeVisible();
+    expect(slider).toBeVisible();
+  });
+});

src/components/AppSlider/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import Slider from 'rc-slider';
+
+export const appSliderDataTestIds = {
+  base: 'app-slider__base',
+};
+
+interface SliderProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  onValueChanged: (position: number) => void;
+}
+
+const AppSlider = ({ min = 1, max = 100, step = 1, onValueChanged }: SliderProps): JSX.Element => {
+  const handleOnChange = (value: number) => {
+    onValueChanged(value);
+  };
+
+  return (
+    <div className="flex w-full h-[56px] justify-center items-center" data-test-id={appSliderDataTestIds.base}>
+      <Slider
+        trackStyle={{
+          background: 'rgba(255, 255, 255, 1)',
+          height: '2px',
+          borderRadius: '12px',
+        }}
+        railStyle={{
+          height: '2px',
+          background: 'rgba(255, 255, 255, 0.18)',
+          borderRadius: '12px',
+        }}
+        handleStyle={{
+          width: '28px',
+          height: '28px',
+          background: 'white',
+          marginTop: '-12px',
+          opacity: 1,
+          borderRadius: '100px',
+          border: '0.5px solid rgba(0, 0, 0, 0.04)',
+          boxShadow:
+            '0px 3px 1px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.16), 0px 3px 8px 0px rgba(0, 0, 0, 0.15)',
+        }}
+        min={min}
+        max={max}
+        step={step}
+        onChange={(value) => handleOnChange(value as number)}
+      />
+    </div>
+  );
+};
+
+export default AppSlider;

src/components/Checkbox/index.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { render, screen, within } from '@testing-library/react';
+
+import Checkbox, { checkboxDataTestIds } from '.';
+
+describe('Checkbox', () => {
+  describe('given the checkbox is checked', () => {
+    it('renders a checkbox component as checked', () => {
+      render(<Checkbox isValueChecked />);
+
+      const checkBox = screen.getByTestId(checkboxDataTestIds.base);
+
+      expect(checkBox).toBeVisible();
+      expect(within(checkBox).getByRole('checkbox')).toBeChecked();
+    });
+  });
+
+  describe('given the checkbox is unchecked', () => {
+    it('renders a checkbox component as unchecked', () => {
+      render(<Checkbox isValueChecked={false} />);
+
+      const checkBox = screen.getByTestId(checkboxDataTestIds.base);
+
+      expect(checkBox).toBeVisible();
+      expect(within(checkBox).getByRole('checkbox')).not.toBeChecked();
+    });
+  });
+});

src/components/Checkbox/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import CheckboxSvg from 'components/CheckboxSvg';
+
+export const checkboxDataTestIds = {
+  base: 'checkbox__base',
+};
+
+interface CheckboxProps {
+  isValueChecked: boolean;
+}
+
+const Checkbox = ({ isValueChecked }: CheckboxProps): JSX.Element => {
+  return (
+    <div className="flex text-white" data-test-id={checkboxDataTestIds.base}>
+      <input
+        type="checkbox"
+        id="checkbox"
+        checked={isValueChecked}
+        onChange={() => {
+          // Do nothing
+        }}
+        className="peer relative shrink-0 appearance-none w-[28px] h-[30px] border-[1px] border-white rounded-full mt-1 checked:bg-white"
+      />
+
+      <CheckboxSvg />
+    </div>
+  );
+};
+
+export default Checkbox;

src/components/CheckboxSvg/index.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import CheckboxSvg, { checkboxSvgDataTestIds } from '.';
+
+describe('CheckboxSvg', () => {
+  it('renders a checkbox svg component', () => {
+    render(<CheckboxSvg />);
+
+    const checkBoxSvg = screen.getByTestId(checkboxSvgDataTestIds.base);
+
+    expect(checkBoxSvg).toBeVisible();
+  });
+});

src/components/CheckboxSvg/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+export const checkboxSvgDataTestIds = {
+  base: 'checkbox-svg__base',
+};
+
+interface CheckboxSvgProps {
+  className?: string;
+}
+
+const DEFAULT_CLASSNAMES = 'absolute pointer-events-none hidden peer-checked:block mt-1 outline-none';
+
+const CheckboxSvg = ({ className = DEFAULT_CLASSNAMES }: CheckboxSvgProps): JSX.Element => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="28"
+      height="30"
+      viewBox="0 0 28 30"
+      fill="none"
+      data-test-id={checkboxSvgDataTestIds.base}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 15C2 8.37258 7.37258 3 14 3C20.6274 3 26 8.37258 26 15C26 21.6274 20.6274 27 14 27C7.37258 27 2 21.6274 2 15Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.5537 17.2422L19.005 10.7908C19.3928 10.4031 20.0216 10.4031 20.4094 10.7908C20.7971 11.1786 20.7971 11.8074 20.4094 12.1952L12.5537 20.0508L7.99104 15.4881C7.60325 15.1004 7.60325 14.4716 7.99104 14.0838C8.37883 13.696 9.00756 13.696 9.39535 14.0838L12.5537 17.2422Z"
+        fill="#15151A"
+      />
+    </svg>
+  );
+};
+
+export default CheckboxSvg;

src/components/Dropdown/index.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { act, render, screen, within } from '@testing-library/react';
+
+import { answerFabricator } from 'tests/fabricator';
+import { Answer } from 'types/answer';
+
+import Dropdown, { dropdownDataTestIds } from '.';
+
+describe('Dropdown', () => {
+  const answers = answerFabricator.times(5);
+
+  it('renders a dropdown component', () => {
+    const dropdownProps = {
+      questionId: 'question-id',
+      items: answers,
+      onValueChanged: () => {
+        // Do nothing
+      },
+    };
+
+    render(<Dropdown {...dropdownProps} />);
+
+    const dropdown = screen.getByTestId(dropdownDataTestIds.base);
+
+    expect(dropdown).toBeVisible();
+  });
+
+  describe('given a value is clicked', () => {
+    it('returns the proper value', () => {
+      let selectedValue = '';
+      const onValueChanged = (answer: Answer) => {
+        selectedValue = answer.text ?? '';
+      };
+      const dropdownProps = {
+        questionId: 'question-id',
+        items: answers,
+        onValueChanged: onValueChanged,
+      };
+
+      render(<Dropdown {...dropdownProps} />);
+
+      const dropdown = screen.getByTestId(dropdownDataTestIds.base);
+
+      const firstValue = answers[0].text;
+      const thirdValue = answers[2].text;
+
+      act(() => {
+        within(dropdown).getByText(firstValue).click();
+      });
+
+      act(() => {
+        within(dropdown)
+          .getByRole('button', {
+            name: thirdValue,
+          })
+          .click();
+      });
+
+      expect(selectedValue).toBe(thirdValue);
+    });
+  });
+});