cleanhaus-calendar 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,46 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0] - 2026-01-12
+
+### Added
+- Initial release of cleanhaus-calendar package
+- Cross-platform calendar component (React Native + Web)
+- Three view modes: Month, Week, and Day views
+- Horizontal time-based event positioning
+- Multi-day event spanning with global row assignment
+- Type-based event rendering (property, cleaning, service, etc.)
+- Web compatibility via react-native-web
+- Next.js integration via next-plugin
+- SSR-safe implementation
+- Platform-aware gesture handling (swipe disabled on web)
+- Comprehensive TypeScript types
+- Theme customization support
+- Property color management
+- FAB component for actions
+- Error boundary for robust error handling
+- Comprehensive documentation and examples
+
+### Features
+- **MonthView**: Calendar grid with event bars, swipe navigation
+- **WeekView**: 7-day view with time-based positioning
+- **DayView**: Single-day view with property lanes and horizontal scrolling
+- **CalendarFAB**: Floating action button component
+- **Utilities**: Date helpers, event transformers, theme management
+- **Hooks**: useSwipeGesture, useNowIndicator, useScrollSynchronization
+
+### Technical
+- TypeScript-first implementation
+- React Native 0.70+ support
+- React 18+ and 19+ support
+- React Native Reanimated 3+ for smooth animations
+- Expo compatibility
+- Metro bundler support
+- Next.js 14+ support
+- Web platform support via react-native-web
+- Node.js 18+ support
+

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 CleanHaus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,275 @@
+# cleanhaus-calendar
+
+A production-ready, cross-platform calendar component for React Native and Next.js. Features Month, Week, and Day views with horizontal time positioning and multi-day event spanning.
+
+## 🚀 Platform Support
+
+- ✅ **React Native** (iOS/Android)
+- ✅ **Next.js** (Web with react-native-web)
+
+## 📦 Installation
+
+```bash
+npm install cleanhaus-calendar
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-native react-native-web react-native-reanimated dayjs calendarize
+```
+
+**Requirements:**
+- `react`: >=18.0.0 (supports React 18 & 19)
+- `react-native`: >=0.70.0
+- `react-native-web`: >=0.19.0
+- `react-native-reanimated`: >=3.0.0
+- `dayjs`: ^1.11.0
+- `calendarize`: ^1.1.0
+- `node`: >=18.0.0
+
+## ⚙️ Setup
+
+### React Native (Expo/RN)
+
+No additional configuration needed! Just install and use:
+
+```tsx
+import { Calendar, CalendarEvent } from "cleanhaus-calendar";
+
+const events: CalendarEvent[] = [
+  {
+    id: "1",
+    eventId: "property-1",
+    title: "Booking",
+    start: new Date(2025, 0, 15, 10, 0),
+    end: new Date(2025, 0, 20, 14, 0),
+    meta: { type: "property" },
+  },
+];
+
+<Calendar
+  events={events}
+  view="month"
+  date={new Date()}
+  onDateChange={setDate}
+  onEventPress={(event) => console.log(event)}
+/>
+```
+
+### Next.js Setup
+
+**1. Install dependencies:**
+```bash
+npm install cleanhaus-calendar react react-native react-native-web react-native-reanimated dayjs calendarize
+```
+
+**2. Update `next.config.ts`:**
+```typescript
+import type { NextConfig } from "next";
+
+const withCalendar = require("cleanhaus-calendar/next-plugin");
+
+const nextConfig: NextConfig = {
+  // Your existing config
+};
+
+export default withCalendar(nextConfig);
+```
+
+**3. Update `package.json` dev script (Next.js 16+):**
+```json
+{
+  "scripts": {
+    "dev": "next dev --webpack"
+  }
+}
+```
+
+**4. Use the component:**
+```tsx
+"use client"; // Required for App Router
+
+import { Calendar, CalendarEvent } from "cleanhaus-calendar";
+import { useState } from "react";
+
+export default function MyPage() {
+  const [view, setView] = useState<ViewMode>("month");
+  const [date, setDate] = useState(new Date());
+
+  return (
+    <Calendar
+      events={events}
+      view={view}
+      date={date}
+      onDateChange={setDate}
+      onEventPress={(event) => console.log(event)}
+      onViewChange={setView}
+    />
+  );
+}
+```
+
+**Note:** Next.js 16+ uses Turbopack by default. The plugin requires webpack, so use `--webpack` flag.
+
+## 📖 Usage
+
+### Basic Example
+
+```tsx
+import { Calendar, CalendarEvent, ViewMode } from "cleanhaus-calendar";
+import { useState } from "react";
+
+const events: CalendarEvent[] = [
+  {
+    id: "1",
+    eventId: "property-1",
+    title: "Booking",
+    start: new Date(2025, 0, 15, 10, 0),
+    end: new Date(2025, 0, 20, 14, 0),
+    meta: { type: "property" },
+  },
+];
+
+function MyCalendar() {
+  const [view, setView] = useState<ViewMode>("month");
+  const [date, setDate] = useState(new Date());
+
+  return (
+    <Calendar
+      events={events}
+      view={view}
+      date={date}
+      onDateChange={setDate}
+      onEventPress={(event) => console.log(event)}
+      onViewChange={setView}
+    />
+  );
+}
+```
+
+### Custom Cleaning Icon
+
+The package includes a default sparkle icon (✨) for cleaning events. Override it:
+
+```tsx
+import sparksIcon from "./assets/sparks.png";
+
+<Calendar
+  events={events}
+  cleaningIcon={sparksIcon} // Optional: custom icon
+  // ... other props
+/>
+```
+
+## 🔄 Data Format
+
+Events must follow this structure:
+
+```typescript
+interface CalendarEvent {
+  id: string;              // Required: Unique identifier
+  eventId: string;         // Required: Group identifier (e.g., "property-1")
+  title: string;           // Required: Event title
+  start: Date;             // Required: Must be Date object (not string!)
+  end: Date;               // Required: Must be Date object (not string!)
+  meta?: {
+    type?: "property" | "cleaning" | "service" | "otherService" | "unassigned";
+    jobTypeId?: number;    // For cleaning: 1 = cleaning, 2-4 = service types
+    [key: string]: any;
+  };
+}
+```
+
+### Transform API Data
+
+```typescript
+// Transform API response to CalendarEvent format
+function transformApiEvents(apiData: ApiEvent[]): CalendarEvent[] {
+  return apiData.map((item) => ({
+    id: item.id.toString(),
+    eventId: `entity-${item.entityId}`,
+    title: item.name,
+    start: new Date(item.startTime),  // Convert ISO string to Date
+    end: new Date(item.endTime),      // Convert ISO string to Date
+    meta: {
+      type: item.type as CalendarEvent["meta"]["type"],
+    },
+  }));
+}
+```
+
+**Important:** Always convert date strings to `Date` objects. The component does not accept string dates.
+
+## 🎯 Key Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `events` | `CalendarEvent[]` | Yes | Array of events |
+| `view` | `"month" \| "week" \| "day"` | No | View mode (default: `"month"`) |
+| `date` | `Date` | Yes | Current date/month |
+| `onDateChange` | `(date: Date) => void` | Yes | Date navigation handler |
+| `onEventPress` | `(event: CalendarEvent) => void` | Yes | Event press handler |
+| `onViewChange` | `(view: ViewMode) => void` | No | View mode change handler |
+| `cleaningIcon` | `any` | No | Custom icon for cleaning events |
+| `theme` | `CalendarTheme` | No | Custom theme |
+| `availableProperties` | `Property[]` | No | Properties for color assignment |
+
+See [full props reference](#props-reference) below.
+
+## 🎨 Features
+
+- **Month View**: Calendar grid with event bars and swipe navigation
+- **Week View**: 7-day view with time-based positioning
+- **Day View**: Single-day view with property lanes
+- **Multi-day Events**: Continuous bars across day cells
+- **Type-based Rendering**: Different styles for property, cleaning, service events
+- **Built-in Assets**: Default sparkle icon (✨) for cleaning events
+
+## 🐛 Troubleshooting
+
+### Events not appearing
+- ✅ Ensure `start` and `end` are `Date` objects (not strings)
+- ✅ Check `eventId` is set correctly
+- ✅ Verify `containerHeight` is sufficient (minimum 400px)
+
+### Next.js Issues
+
+**Module not found:**
+- ✅ Restart dev server: `npm run dev -- --webpack`
+- ✅ Clear cache: `rm -rf .next`
+
+**Element type is invalid:**
+- ✅ Ensure `--webpack` flag is used
+- ✅ Verify `react-native-web` is installed
+
+**Turbopack error:**
+- ✅ Use `npm run dev -- --webpack`
+- ✅ Or add `turbopack: {}` to `next.config.ts`
+
+## 📚 Props Reference
+
+### Calendar Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `events` | `CalendarEvent[]` | Yes | - | Array of events |
+| `view` | `ViewMode` | No | `"month"` | View mode |
+| `date` | `Date` | Yes | - | Current date |
+| `onDateChange` | `(date: Date) => void` | Yes | - | Date change handler |
+| `onEventPress` | `(event: CalendarEvent) => void` | Yes | - | Event press handler |
+| `onViewChange` | `(view: ViewMode) => void` | No | - | View change handler |
+| `isLoading` | `boolean` | No | `false` | Show loading spinner |
+| `theme` | `CalendarTheme` | No | - | Custom theme |
+| `availableProperties` | `Property[]` | No | - | Properties for colors |
+| `cleaningIcon` | `any` | No | - | Custom cleaning icon |
+| `showFAB` | `boolean` | No | `false` | Show floating action button |
+| `autoScrollToNow` | `boolean` | No | `false` | Auto-scroll to current time |
+
+## 📄 License
+
+MIT
+
+---
+
+**Version**: 1.0.0

package/next-plugin.js

@@ -0,0 +1,100 @@
+/**
+ * Next.js Plugin for cleanhaus-calendar
+ *
+ * Auto-configures Next.js webpack and transpilation for React Native Web compatibility.
+ *
+ * Usage in next.config.js:
+ * ```javascript
+ * const withCalendar = require('cleanhaus-calendar/next-plugin');
+ *
+ * module.exports = withCalendar({
+ *   // Your existing Next.js config
+ * });
+ * ```
+ */
+
+const withCalendar = (nextConfig = {}) => {
+  return {
+    ...nextConfig,
+    webpack: (config, options) => {
+      // Apply existing webpack config if any
+      const existingWebpack = nextConfig.webpack || ((c) => c);
+      config = existingWebpack(config, options);
+
+      // Add React Native Web alias
+      if (!config.resolve) {
+        config.resolve = {};
+      }
+      if (!config.resolve.alias) {
+        config.resolve.alias = {};
+      }
+
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        "react-native$": "react-native-web",
+      };
+
+      // Handle React Native asset extensions
+      if (!config.resolve.extensions) {
+        config.resolve.extensions = [];
+      }
+
+      // Add React Native extensions if not already present
+      const extensions = [
+        ".web.js",
+        ".web.jsx",
+        ".web.ts",
+        ".web.tsx",
+        ...config.resolve.extensions,
+      ];
+      config.resolve.extensions = [...new Set(extensions)];
+
+      // Handle image assets - ensure node_modules are processed
+      if (!config.module) {
+        config.module = {};
+      }
+      if (!config.module.rules) {
+        config.module.rules = [];
+      }
+
+      // Find existing asset rule
+      const assetRuleIndex = config.module.rules.findIndex(
+        (rule) =>
+          rule && rule.test && rule.test.toString().includes("png|jpg|jpeg")
+      );
+
+      if (assetRuleIndex === -1) {
+        // Add new asset rule at the beginning to ensure it processes images
+        config.module.rules.unshift({
+          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
+          type: "asset/resource",
+          // Explicitly include node_modules/cleanhaus-calendar
+          include: [/node_modules\/cleanhaus-calendar/],
+        });
+      } else {
+        // Update existing rule to include node_modules
+        const existingRule = config.module.rules[assetRuleIndex];
+        if (existingRule) {
+          // Ensure it includes our package
+          if (!existingRule.include) {
+            existingRule.include = [/node_modules\/cleanhaus-calendar/];
+          } else if (Array.isArray(existingRule.include)) {
+            if (!existingRule.include.some((inc) => 
+              inc.toString().includes("cleanhaus-calendar")
+            )) {
+              existingRule.include.push(/node_modules\/cleanhaus-calendar/);
+            }
+          }
+        }
+      }
+
+      return config;
+    },
+    transpilePackages: [
+      ...(nextConfig.transpilePackages || []),
+      "cleanhaus-calendar",
+    ],
+  };
+};
+
+module.exports = withCalendar;

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "cleanhaus-calendar",
+  "version": "1.0.0",
+  "description": "Cross-platform calendar component for React Native and Web",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "react-native": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "react-native": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./next-plugin": "./next-plugin.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "**/*.ts",
+    "**/*.tsx",
+    "shared/**/*.png",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "next-plugin.js",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/*.spec.ts",
+    "!**/*.spec.tsx",
+    "!node_modules",
+    "!dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "npm run type-check"
+  },
+  "keywords": [
+    "react-native",
+    "calendar",
+    "web",
+    "cross-platform",
+    "expo",
+    "typescript",
+    "cleanhaus"
+  ],
+  "author": "CleanHaus",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cleanhaus/calendar-component.git"
+  },
+  "peerDependencies": {
+    "calendarize": "^1.1.0",
+    "dayjs": "^1.11.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-web": ">=0.19.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-web": {
+      "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.0 || ^20.0.0 || ^22.0.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-native": "^0.73.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}