feat: Work in progress

package.json

@@ -7,7 +7,8 @@
   "license": "MIT",
   "dependencies": {
     "react": "18.2.0",
-    "react-native": "0.72.3"
+    "react-native": "0.72.3",
+    "styled-components": "^6.0.4"
   },
   "devDependencies": {
     "@testing-library/jest-native": "^5.4.2",

src/Calendar.style.ts

@@ -0,0 +1,17 @@
+import styled from 'styled-components/native';
+
+const DAY_PADDING = 10;
+
+const CALENDAR_WIDTH = 300;
+
+export const Calendar = styled.View`
+  width: ${CALENDAR_WIDTH}px;
+`;
+
+export const Row = styled.View`
+  flex-direction: row;
+`;
+
+export const Day = styled.TouchableOpacity`
+  padding: ${DAY_PADDING}px;
+`;

src/Calendar.tsx

@@ -0,0 +1,28 @@
+import { memo, useState } from 'react';
+import * as S from './Calendar.style';
+import { useCalendar } from './hooks/useCalendar';
+
+export interface CalendarProps {
+  min?: Date;
+  max?: Date;
+  value?: Date;
+}
+
+export const Calendar = memo(({ min, max, value }: CalendarProps) => { 
+  const {
+    buildCalendarDay,
+    buildMonth,
+    dayOfWeekAsString,
+    monthsAsString
+  } = useCalendar();
+  const [calendarDate, setCalendarDate] = useState<Date>(value || new Date());
+
+  const month = buildMonth(calendarDate, { min, max, value });
+  return (
+    <S.Calendar>
+      {month.forEach(() => { 
+
+      })}    
+    </S.Calendar>
+  );
+})

src/components/DayWeek/DayWeek.tsx

@@ -0,0 +1,20 @@
+import { useCalendar } from "../../hooks/useCalendar";
+
+export const DayWeek = () => { 
+  const daysIndex = [0, 1, 2, 3, 4, 5, 6];
+  const { dayOfWeekAsString } = useCalendar();
+  return (
+    <div className="calendar-week-container">
+      {daysIndex.map((day) => {
+        const key = day;
+        return (
+          <div key={key} className="calendar-week">
+            <span>
+              {dayOfWeekAsString(day)}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/components/index.ts

@@ -0,0 +1 @@
+export * from './DayWeek/DayWeek';

src/hooks/useCalendar.ts

@@ -1,3 +1,5 @@
+import { CalendarProps } from "../Calendar";
+
 enum DaysOfWeek {
   SUNDAY = 'Domingo',
   MONDAY = 'Segunda-feira',
@@ -23,13 +25,7 @@ enum Months {
   DECEMBER = 'Dezembro',
 }
 
-interface CalendarProps {
-  min?: Date;
-  max?: Date;
-  value?: Date;
-}
-
-export const useCalendar = ({ value, min, max }: CalendarProps) => {
+export const useCalendar = () => {
   const dayOfWeekAsString = (dayIndex: number) => {
     return [
       DaysOfWeek.MONDAY.substring(0, 3),
@@ -59,7 +55,7 @@ export const useCalendar = ({ value, min, max }: CalendarProps) => {
     ][monthIndex];
   };
 
-  const buildCalendarDay = (currentDate: Date) => {
+  const buildCalendarDay = (currentDate: Date, { value, min, max }: CalendarProps) => {
     const currentDay = currentDate.getDate();
     const isSelected =
       value?.getDate() === currentDay && value?.getMonth() === currentDate.getMonth();
@@ -75,38 +71,42 @@ export const useCalendar = ({ value, min, max }: CalendarProps) => {
     };
   };
 
-  const createMonth = (selected: Date) => {
-    const dateObject = new Date();
-    dateObject.setDate(1);
-    dateObject.setMonth(selected.getMonth());
-    dateObject.setFullYear(selected.getFullYear());
+  const buildMonth = (calendarDate: Date, { value, min, max }: CalendarProps) => {
+    const currentDate = new Date();
+    currentDate.setDate(1);
+    currentDate.setMonth(calendarDate.getMonth());
+    currentDate.setFullYear(calendarDate.getFullYear());
 
     const lastMonth = new Date();
-    lastMonth.setMonth(selected.getMonth());
-    lastMonth.setFullYear(selected.getFullYear());
+    lastMonth.setMonth(calendarDate.getMonth());
+    lastMonth.setFullYear(calendarDate.getFullYear());
     lastMonth.setDate(0);
 
     const dayOfWeek = lastMonth.getDay();
     let dayMerge = dayOfWeek;
     let dayDiff = lastMonth.getDate() - dayMerge + 1;
 
-    const calendarDays = [];
+    const days = [];
     while (dayMerge > 0) {
       lastMonth.setDate(dayDiff);
-      calendarDays.push(lastMonth);
+      days.push(buildCalendarDay(lastMonth, { value, min, max }));
       dayMerge -= 1;
       dayDiff += 1;
     }
 
-    dateObject.setDate(dateObject.getDate() + 1);
-    while (dateObject.getDate() !== 1) {
-      dateObject.setDate(dateObject.getDate() + 1);
+    days.push(buildCalendarDay(currentDate, { value, min, max }));
+    currentDate.setDate(currentDate.getDate() + 1);
+    while (currentDate.getDate() !== 1) {
+      days.push(buildCalendarDay(currentDate, { value, min, max }));
+      currentDate.setDate(currentDate.getDate() + 1);
     }
+    return days;
   };
 
   return {
     dayOfWeekAsString,
     monthsAsString,
     buildCalendarDay,
+    buildMonth,
   };
 };

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "preserve",
     "strict": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,