replace date-fns with custom implementation

Author: MarceloPrado

apps/example/.eslintrc.js apps/example/src/.eslintrc.js

@@ -1,6 +1,6 @@
 import type {
   CalendarActiveDateRange,
-  CalendaronCalendarDayPress,
+  CalendarOnDayPress,
 } from "@marceloterreiro/flash-calendar";
 import {
   Calendar,
@@ -49,7 +49,7 @@ export const WindowsXP = () => {
     setIsPickerVisible((p) => !p);
   }, []);
 
-  const handleDayPress = useCallback<CalendaronCalendarDayPress>((dateId) => {
+  const handleDayPress = useCallback<CalendarOnDayPress>((dateId) => {
     setCurrentCalendarMonth(fromDateId(dateId));
     setSelectedDate(fromDateId(dateId));
     setIsPickerVisible(false);

apps/example/src/components/ThemeableCalendar/Calendar.stories.tsx

@@ -12,6 +12,7 @@
     "clean": "rm -rf dist && rm -rf node_modules",
     "ios": "expo start --ios",
     "start": "expo start",
+    "lint": "eslint .",
     "web": "expo start --web"
   },
   "dependencies": {
@@ -24,7 +25,10 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@types/react": "~18.2.45",
+    "eslint": "^8.56.0",
     "source-map-explorer": "^2.5.3",
-    "typescript": "^5.1.3"
+    "typescript": "^5.3.3",
+    "@marceloterreiro/tsconfig": "*",
+    "@marceloterreiro/eslint-config": "*"
   }
 }

bun.lockb

@@ -1,6 +1,6 @@
+import type { CalendarListProps } from "@marceloterreiro/flash-calendar";
 import {
   Calendar,
-  CalendarListProps,
   toDateId,
   useDateRange,
 } from "@marceloterreiro/flash-calendar";
@@ -33,7 +33,7 @@ export function CalendarListDemo() {
       <Calendar.HStack
         alignItems="center"
         justifyContent="space-between"
-        width={"100%"}
+        width="100%"
       >
         <Button title="Clear range" onPress={onClearDateRange} />
         <View style={styles.vStack}>

kitchen-sink/expo/package.json

@@ -7,20 +7,23 @@ module.exports = {
       "error",
       {
         patterns: [
-          // {
-          //   group: ["date-fns"],
-          //   importNames: ["startOfMonth", "startOfWeek"],
-          //   message:
-          //     "Please use the respective function from @/helpers/dates instead.",
-          // },
           {
             group: ["date-fns"],
-            importNames: ["add", "sub"],
             message:
-              "Please use `addDays`, `addWeeks`, `subDays`, `subWeeks` instead for smaller bundles.",
+              "Please use the custom date functions from @/helpers/dates instead. This decreases the bundle size significantly.",
           },
         ],
       },
     ],
   },
+
+  // Allow date-fns imports in test files since we use them to test our custom date functions
+  overrides: [
+    {
+      files: ["**/*.test.ts", "**/*.test.tsx", "**/*.stories.tsx"],
+      rules: {
+        "no-restricted-imports": ["error", { patterns: [] }],
+      },
+    },
+  ],
 };

kitchen-sink/expo/src/CalendarList.tsx

@@ -1,40 +1,39 @@
 {
   "name": "@marceloterreiro/flash-calendar",
   "version": "0.0.1",
+  "private": false,
   "description": "A better calendar for React Native.",
+  "repository": "github.com/marceloprado/flash-calendar",
+  "license": "MIT",
+  "author": "Marcelo Prado",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "repository": "github.com/marceloprado/flash-calendar",
-  "author": "Marcelo Prado",
-  "license": "MIT",
   "scripts": {
-    "dev": "tsup --watch --silent",
-    "lint": "eslint src",
     "build": "tsup --dts",
-    "clean": "rm -rf dist && rm -rf node_modules"
-  },
-  "dependencies": {
-    "date-fns": "^3.3.1"
-  },
-  "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
-    "@shopify/flash-list": "*"
+    "clean": "rm -rf dist && rm -rf node_modules",
+    "dev": "tsup --watch --silent",
+    "lint": "eslint src"
   },
+  "dependencies": {},
   "devDependencies": {
     "@marceloterreiro/eslint-config": "*",
     "@marceloterreiro/tsconfig": "*",
     "@shopify/flash-list": "1.6.3",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "react-test-renderer": "^18.2.0",
-    "eslint": "^8.56.0",
     "@types/bun": "^1.0.5",
+    "date-fns": "^3.3.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "react": "18.2.0",
     "react-native": "0.73.4",
+    "react-test-renderer": "^18.2.0",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3"
   },
-  "private": false
+  "peerDependencies": {
+    "@shopify/flash-list": "*",
+    "react": "*",
+    "react-native": "*"
+  }
 }

packages/flash-calendar/.eslintrc.js

@@ -1,8 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { addDays, endOfMonth, subDays, startOfMonth } from "date-fns";
+import { addDays, subDays } from "date-fns";
+import { format } from "date-fns/fp/format";
 
 import { paddingDecorator } from "@/developer/decorators";
-import { toDateId } from "@/helpers/dates";
+import { toDateId, endOfMonth, startOfMonth } from "@/helpers/dates";
+import { loggingHandler } from "@/developer/loggginHandler";
 
 import { Calendar } from "./Calendar";
 
@@ -22,17 +24,11 @@ const CalendarMeta: Meta<typeof Calendar> = {
       options: ["monday", "sunday"],
     },
     onCalendarDayPress: { action: "onCalendarDayPress" },
-    calendarDayFormat: { type: "string" },
-    calendarMonthFormat: { type: "string" },
-    calendarWeekDayFormat: { type: "string" },
   },
 
   args: {
     calendarFirstDayOfWeek: "sunday",
     calendarMonthId: toDateId(startOfThisMonth),
-    calendarDayFormat: "d",
-    calendarWeekDayFormat: "EEEEE",
-    calendarMonthFormat: "MMMM yyyy",
   },
   decorators: [paddingDecorator],
 };
@@ -50,9 +46,6 @@ export const KichenSink: StoryObj<typeof Calendar> = {
   args: {
     calendarFirstDayOfWeek: "sunday",
     calendarMonthId: toDateId(startOfThisMonth),
-    calendarDayFormat: "d",
-    calendarWeekDayFormat: "EEEEE",
-    calendarMonthFormat: "MMMM yyyy",
     calendarDisabledDateIds: [
       toDateId(addDays(today, 1)),
       toDateId(subDays(today, 1)),
@@ -105,3 +98,16 @@ export const ActiveDateRanges: StoryObj<typeof Calendar> = {
     calendarMonthId: "2024-01-01",
   },
 };
+
+export const WithCustomFormatting = (args: typeof KichenSink.args) => {
+  return (
+    <Calendar
+      {...args}
+      calendarMonthId={toDateId(startOfThisMonth)}
+      getCalendarDayFormat={format("dd")}
+      getCalendarMonthFormat={format("MMMM yyyy (LL/yyyy)")}
+      getCalendarWeekDayFormat={format("E")}
+      onCalendarDayPress={loggingHandler("onCalendarDayPress")}
+    />
+  );
+};

packages/flash-calendar/package.json

@@ -35,10 +35,10 @@ export interface CalendarTheme {
   itemDay?: CalendarItemDayProps["theme"];
 }
 
-export type CalendaronCalendarDayPress = (dateId: string) => void;
+export type CalendarOnDayPress = (dateId: string) => void;
 
 export interface CalendarProps extends UseCalendarParams {
-  onCalendarDayPress: CalendaronCalendarDayPress;
+  onCalendarDayPress: CalendarOnDayPress;
   /**
    * The spacing between each calendar row (the month header, the week days row,
    * and the weeks row)

packages/flash-calendar/src/components/Calendar.stories.tsx

@@ -36,9 +36,6 @@ const CalendarListMeta: Meta<typeof Calendar.List> = {
 
     calendarFirstDayOfWeek: "sunday",
     calendarInitialMonthId: toDateId(startOfThisMonth),
-    calendarDayFormat: "d",
-    calendarWeekDayFormat: "EEEEE",
-    calendarMonthFormat: "MMMM yyyy",
   },
   decorators: [paddingDecorator],
 };

packages/flash-calendar/src/components/Calendar.tsx

@@ -10,11 +10,10 @@ import {
   useRef,
 } from "react";
 import { View } from "react-native";
-import { startOfMonth } from "date-fns";
 
 import type { CalendarProps } from "@/components/Calendar";
 import { Calendar } from "@/components/Calendar";
-import { toDateId } from "@/helpers/dates";
+import { toDateId, startOfMonth } from "@/helpers/dates";
 import type { CalendarMonth } from "@/hooks/useCalendarList";
 import { getHeightForMonth, useCalendarList } from "@/hooks/useCalendarList";
 
@@ -126,9 +125,9 @@ export const CalendarList = memo(
         onCalendarDayPress,
         calendarActiveDateRanges: activeDateRanges,
         calendarDisabledDateIds,
-        calendarDayFormat,
-        calendarWeekDayFormat,
-        calendarMonthFormat,
+        getCalendarDayFormat,
+        getCalendarWeekDayFormat,
+        getCalendarMonthFormat,
         calendarMaxDateId,
         calendarMinDateId,
         ...flatListProps
@@ -139,13 +138,13 @@ export const CalendarList = memo(
           calendarActiveDateRanges: activeDateRanges,
           calendarDayHeight,
           calendarFirstDayOfWeek,
-          calendarDayFormat,
-          calendarWeekDayFormat,
+          getCalendarDayFormat,
+          getCalendarWeekDayFormat,
           calendarMaxDateId,
           calendarMinDateId,
           calendarMonthHeaderHeight,
           calendarRowHorizontalSpacing,
-          calendarMonthFormat,
+          getCalendarMonthFormat,
           calendarRowVerticalSpacing,
           calendarWeekHeaderHeight,
           calendarDisabledDateIds,
@@ -156,13 +155,13 @@ export const CalendarList = memo(
           activeDateRanges,
           calendarDayHeight,
           calendarFirstDayOfWeek,
-          calendarDayFormat,
-          calendarWeekDayFormat,
+          getCalendarDayFormat,
+          getCalendarWeekDayFormat,
           calendarMaxDateId,
           calendarMinDateId,
           calendarMonthHeaderHeight,
           calendarRowHorizontalSpacing,
-          calendarMonthFormat,
+          getCalendarMonthFormat,
           calendarRowVerticalSpacing,
           calendarWeekHeaderHeight,
           calendarDisabledDateIds,

packages/flash-calendar/src/components/CalendarList.stories.tsx

@@ -63,7 +63,7 @@ type CalendarNamespace = {
   VStack: typeof VStack;
 } & typeof CalendarDefault;
 export type {
-  CalendaronCalendarDayPress,
+  CalendarOnDayPress,
   CalendarProps,
   CalendarTheme,
 } from "@/components/Calendar";