customized-calendar 1.0.0

package/dist/components/classroom-calendar/calendar.utils.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Calendar Utility Functions
+ */
+import { CalendarEvent, EventType } from './calendar.types';
+/**
+ * Get default color for event type
+ * Using vibrant, modern colors with better contrast
+ */
+export declare const getEventTypeColor: (type: EventType) => string;
+/**
+ * Format event for FullCalendar
+ */
+export declare const formatEventForFullCalendar: (event: CalendarEvent) => {
+    id: string;
+    title: string;
+    start: string | Date;
+    end: string | Date;
+    backgroundColor: string;
+    borderColor: string;
+    textColor: string;
+    extendedProps: {
+        batchId: string;
+        batchName: string;
+        type: EventType;
+        color: string;
+    };
+};
+/**
+ * Convert FullCalendar event back to CalendarEvent
+ */
+export declare const convertFullCalendarEventToCalendarEvent: (fcEvent: any) => CalendarEvent;
+/**
+ * Format date to ISO string
+ */
+export declare const formatDateToString: (date: Date) => string;
+/**
+ * Check if date is today
+ */
+export declare const isToday: (date: Date) => boolean;
+/**
+ * Get event type label
+ */
+export declare const getEventTypeLabel: (type: EventType) => string;
+/**
+ * Convert hex color to RGB
+ */
+export declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Convert hex color to RGB string (for CSS rgba)
+ */
+export declare const hexToRgbString: (hex: string) => string;
+/**
+ * Lighten a hex color by a percentage
+ */
+export declare const lightenColor: (hex: string, percent: number) => string;
+/**
+ * Darken a hex color by a percentage
+ */
+export declare const darkenColor: (hex: string, percent: number) => string;
+//# sourceMappingURL=calendar.utils.d.ts.map

package/dist/components/classroom-calendar/calendar.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.utils.d.ts","sourceRoot":"","sources":["../../../components/classroom-calendar/calendar.utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE5D;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,KAAG,MAQnD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B,GAAI,OAAO,aAAa;;;;;;;;;;;;;;CAiB9D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uCAAuC,GAClD,SAAS,GAAG,KACX,aAYF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,IAAI,KAAG,MAE/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,GAAI,MAAM,IAAI,KAAG,OAOpC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,KAAG,MAEnD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,KAAK,MAAM,KAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAS5E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,MAG5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,EAAE,SAAS,MAAM,KAAG,MAS3D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,SAAS,MAAM,KAAG,MAS1D,CAAC"}

package/dist/components/classroom-calendar/calendar.utils.js

@@ -0,0 +1,119 @@
+/**
+ * Calendar Utility Functions
+ */
+import { EventType } from './calendar.types';
+/**
+ * Get default color for event type
+ * Using vibrant, modern colors with better contrast
+ */
+export const getEventTypeColor = (type) => {
+    const colorMap = {
+        [EventType.SESSION]: '#4f46e5', // Indigo - vibrant blue-purple
+        [EventType.EVENT]: '#059669', // Emerald - rich green
+        [EventType.EXAM]: '#dc2626', // Red - bold red
+        [EventType.HOLIDAY]: '#d97706', // Amber - warm orange
+    };
+    return colorMap[type] || '#6366f1'; // Default indigo
+};
+/**
+ * Format event for FullCalendar
+ */
+export const formatEventForFullCalendar = (event) => {
+    return {
+        id: event.id,
+        title: event.title,
+        start: event.start,
+        end: event.end,
+        backgroundColor: event.color || getEventTypeColor(event.type),
+        borderColor: event.color || getEventTypeColor(event.type),
+        textColor: '#ffffff',
+        extendedProps: {
+            batchId: event.batchId,
+            batchName: event.batchName,
+            type: event.type,
+            color: event.color || getEventTypeColor(event.type),
+            ...event.extendedProps,
+        },
+    };
+};
+/**
+ * Convert FullCalendar event back to CalendarEvent
+ */
+export const convertFullCalendarEventToCalendarEvent = (fcEvent) => {
+    return {
+        id: fcEvent.id,
+        title: fcEvent.title,
+        start: fcEvent.start,
+        end: fcEvent.end,
+        batchId: fcEvent.extendedProps?.batchId || '',
+        batchName: fcEvent.extendedProps?.batchName || '',
+        type: fcEvent.extendedProps?.type || EventType.EVENT,
+        color: fcEvent.extendedProps?.color || fcEvent.backgroundColor,
+        extendedProps: fcEvent.extendedProps,
+    };
+};
+/**
+ * Format date to ISO string
+ */
+export const formatDateToString = (date) => {
+    return date.toISOString().split('T')[0];
+};
+/**
+ * Check if date is today
+ */
+export const isToday = (date) => {
+    const today = new Date();
+    return (date.getDate() === today.getDate() &&
+        date.getMonth() === today.getMonth() &&
+        date.getFullYear() === today.getFullYear());
+};
+/**
+ * Get event type label
+ */
+export const getEventTypeLabel = (type) => {
+    return type.charAt(0) + type.slice(1).toLowerCase();
+};
+/**
+ * Convert hex color to RGB
+ */
+export const hexToRgb = (hex) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+};
+/**
+ * Convert hex color to RGB string (for CSS rgba)
+ */
+export const hexToRgbString = (hex) => {
+    const rgb = hexToRgb(hex);
+    return rgb ? `${rgb.r}, ${rgb.g}, ${rgb.b}` : '59, 130, 246'; // Default blue
+};
+/**
+ * Lighten a hex color by a percentage
+ */
+export const lightenColor = (hex, percent) => {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return hex;
+    const r = Math.min(255, Math.round(rgb.r + (255 - rgb.r) * percent));
+    const g = Math.min(255, Math.round(rgb.g + (255 - rgb.g) * percent));
+    const b = Math.min(255, Math.round(rgb.b + (255 - rgb.b) * percent));
+    return `#${[r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('')}`;
+};
+/**
+ * Darken a hex color by a percentage
+ */
+export const darkenColor = (hex, percent) => {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return hex;
+    const r = Math.max(0, Math.round(rgb.r * (1 - percent)));
+    const g = Math.max(0, Math.round(rgb.g * (1 - percent)));
+    const b = Math.max(0, Math.round(rgb.b * (1 - percent)));
+    return `#${[r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('')}`;
+};

package/dist/components/classroom-calendar/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Customized Calendar Component Exports
+ */
+export { default as CustomizedCalendar } from './CustomizedCalendar';
+export * from './calendar.types';
+export * from './calendar.utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/classroom-calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/classroom-calendar/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}

package/dist/components/classroom-calendar/index.js

@@ -0,0 +1,6 @@
+/**
+ * Customized Calendar Component Exports
+ */
+export { default as CustomizedCalendar } from './CustomizedCalendar';
+export * from './calendar.types';
+export * from './calendar.utils';

package/dist/src/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Customized Calendar Component - NPM Package Entry Point
+ *
+ * This is the main entry point for the NPM package.
+ * It exports all public APIs of the calendar component.
+ */
+export { default as CustomizedCalendar } from '../components/classroom-calendar/CustomizedCalendar';
+export * from '../components/classroom-calendar/calendar.types';
+export * from '../components/classroom-calendar/calendar.utils';
+export type { CalendarEvent, CustomizedCalendarProps, EventType } from '../components/classroom-calendar/calendar.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,qDAAqD,CAAC;AACpG,cAAc,iDAAiD,CAAC;AAChE,cAAc,iDAAiD,CAAC;AAGhE,YAAY,EAAE,aAAa,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,iDAAiD,CAAC"}

package/dist/src/index.js

@@ -0,0 +1,9 @@
+/**
+ * Customized Calendar Component - NPM Package Entry Point
+ *
+ * This is the main entry point for the NPM package.
+ * It exports all public APIs of the calendar component.
+ */
+export { default as CustomizedCalendar } from '../components/classroom-calendar/CustomizedCalendar';
+export * from '../components/classroom-calendar/calendar.types';
+export * from '../components/classroom-calendar/calendar.utils';

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "customized-calendar",
+  "version": "1.0.0",
+  "description": "A modern, customizable calendar component built with React, TypeScript, and FullCalendar",
+  "main": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
+  "module": "dist/src/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/src/index.js",
+      "require": "./dist/src/index.js",
+      "types": "./dist/src/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "build:package": "tsc --project tsconfig.build.json",
+    "prepublishOnly": "npm run build:package",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "keywords": [
+    "calendar",
+    "react",
+    "typescript",
+    "fullcalendar",
+    "event-calendar",
+    "customizable",
+    "react-component",
+    "calendar-component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@fullcalendar/core": "^6.1.15",
+    "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/interaction": "^6.1.15",
+    "@fullcalendar/react": "^6.1.15",
+    "@fullcalendar/timegrid": "^6.1.15"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.1.0",
+    "next": "^14.1.0",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
+