Implement Day component

src/lib/components/Day/Day.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { DayType } from 'lib/interfaces/grid.interface';
+import { Day } from './index';
+
+describe('Day', () => {
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  const setup = (type: DayType) => {
+    return render(<Day type={type} />);
+  }
+
+  const types: DayType[] = [
+    'single.free',
+    'single.disabled',
+    'single.normal.full',
+    'single.normal.start',
+    'single.normal.end',
+    'single.maybe.full',
+    'single.maybe.start',
+    'single.maybe.end',
+    'double.normal.end.start',
+    'double.maybe.end.start',
+    'intersection.normal.end.maybe.start',
+    'intersection.maybe.end.normal.start',
+  ];
+
+  it.each(types)('%s', (type: DayType) => {
+    const { getByTestId } = setup(type);
+
+    const actual = getByTestId(type);
+    expect(actual).toBeInTheDocument();
+  })
+});

src/lib/components/Day/Day.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+
+import { DayType } from 'lib/interfaces/grid.interface';
+import {
+  DoubleMaybeEndStart,
+  DoubleNormalEndStart,
+  IntersectionMaybeEndNormalStart,
+  IntersectionNormalEndMaybeStart,
+  SingleDisabled,
+  SingleFree,
+  SingleMaybeEnd,
+  SingleMaybeFull,
+  SingleMaybeStart,
+  SingleNormalEnd,
+  SingleNormalFull,
+  SingleNormalStart,
+} from 'lib/components/Days';
+
+const days = {
+  'single.free': <SingleFree />,
+  'single.disabled': <SingleDisabled />,
+  'single.normal.full': <SingleNormalFull />,
+  'single.normal.start': <SingleNormalStart />,
+  'single.normal.end': <SingleNormalEnd />,
+  'single.maybe.full': <SingleMaybeFull />,
+  'single.maybe.start': <SingleMaybeStart />,
+  'single.maybe.end': <SingleMaybeEnd />,
+  'double.normal.end.start': <DoubleNormalEndStart />,
+  'double.maybe.end.start': <DoubleMaybeEndStart />,
+  'intersection.normal.end.maybe.start': <IntersectionNormalEndMaybeStart />,
+  'intersection.maybe.end.normal.start': <IntersectionMaybeEndNormalStart />,
+}
+
+interface Props {
+  type: DayType,
+}
+
+const Day: FC<Props> = ({ type }) => {
+
+  const day = days[type] || <SingleFree />;
+
+  return (
+    <>
+      {day}
+    </>
+  );
+};
+
+export {
+  Day,
+};

src/lib/components/Day/index.ts

@@ -0,0 +1,5 @@
+import { Day } from './Day';
+
+export {
+  Day,
+}

src/lib/context/mainContext.tsx

@@ -21,7 +21,7 @@ const initialValue: MainContext = {
 
 const mainContext = createContext<MainContext>(initialValue);
 
-type Props = {
+interface Props {
   value: MainContext;
 };