@isma91/react-scheduler 4.0.0

package/dist/types.d.ts

@@ -0,0 +1,372 @@
+import { DialogProps, GridSize } from '@mui/material';
+import { DateCalendarProps } from '@mui/x-date-pickers';
+import { Locale } from 'date-fns';
+import { DragEvent } from 'react';
+import { SelectOption } from './components/inputs/SelectInput';
+import { View } from './components/nav/Navigation';
+import { Store } from './store/types';
+import { StateItem } from './views/Editor';
+import { RRule } from 'rrule';
+export type DayHours = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
+export type WeekDays = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+interface CommonWeekViewProps {
+    weekDays: WeekDays[];
+    weekStartOn: WeekDays;
+    disableGoToDay?: boolean;
+}
+interface CommonViewProps {
+    startHour: DayHours;
+    endHour: DayHours;
+    cellRenderer?(props: CellRenderedProps): React.ReactNode;
+    headRenderer?(props: {
+        day: Date;
+        events: ProcessedEvent[];
+        resource?: DefaultResource;
+    }): React.ReactNode;
+    navigation?: boolean;
+    step: number;
+}
+export interface MonthProps extends CommonWeekViewProps, CommonViewProps {
+}
+export interface WeekProps extends CommonWeekViewProps, CommonViewProps {
+    hourRenderer?(hour: string): React.ReactNode;
+}
+export interface DayProps extends CommonViewProps {
+    hourRenderer?(hour: string): React.ReactNode;
+}
+export interface CellRenderedProps {
+    day: Date;
+    start: Date;
+    end: Date;
+    height: number;
+    onClick(): void;
+    onDragOver(e: DragEvent<HTMLButtonElement>): void;
+    onDragEnter(e: DragEvent<HTMLButtonElement>): void;
+    onDragLeave(e: DragEvent<HTMLButtonElement>): void;
+    onDrop(e: DragEvent<HTMLButtonElement>): void;
+}
+interface CalendarEvent {
+    event_id: number | string;
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    start: Date;
+    end: Date;
+    recurring?: RRule;
+    disabled?: boolean;
+    color?: string;
+    textColor?: string;
+    editable?: boolean;
+    deletable?: boolean;
+    draggable?: boolean;
+    allDay?: boolean;
+    /**
+     * @default " "
+     * passed as a children to mui <Avatar /> component
+     */
+    agendaAvatar?: React.ReactElement | string;
+    /** @internal Original start date before segment clipping */
+    _originalStart?: Date;
+    /** @internal Original end date before segment clipping */
+    _originalEnd?: Date;
+    /** @internal Segment continues from previous day */
+    _hasPrev?: boolean;
+    /** @internal Segment continues to next day */
+    _hasNext?: boolean;
+}
+export interface Translations {
+    navigation: Record<View, string> & {
+        today: string;
+        agenda: string;
+    };
+    form: {
+        addTitle: string;
+        editTitle: string;
+        confirm: string;
+        delete: string;
+        cancel: string;
+    };
+    event: Record<string, string> & {
+        title: string;
+        subtitle: string;
+        start: string;
+        end: string;
+        allDay: string;
+    };
+    validation?: {
+        required?: string;
+        invalidEmail?: string;
+        onlyNumbers?: string;
+        min?: string | ((min: number) => string);
+        max?: string | ((max: number) => string);
+    };
+    moreEvents: string;
+    noDataToDisplay: string;
+    loading: string;
+}
+export type InputTypes = "input" | "date" | "select" | "hidden";
+export interface EventRendererProps extends Pick<React.HTMLAttributes<HTMLElement>, "draggable" | "onDragStart" | "onDragEnd" | "onDragOver" | "onDragEnter" | "onClick"> {
+    event: ProcessedEvent;
+}
+export interface FieldInputProps {
+    /** Available to all InputTypes */
+    label?: string;
+    /** Available to all InputTypes */
+    placeholder?: string;
+    /** Available to all InputTypes
+     * @default false
+     */
+    required?: boolean;
+    /** Available to all InputTypes
+     * @default "outline"
+     */
+    variant?: "standard" | "filled" | "outlined";
+    /** Available to all InputTypes */
+    disabled?: boolean;
+    /** Available when @input="text" ONLY - Minimum length */
+    min?: number;
+    /** Available when @input="text" ONLY - Maximum length */
+    max?: number;
+    /** Available when @input="text" ONLY - Apply email Regex */
+    email?: boolean;
+    /** Available when @input="text" ONLY - Only numbers(int/float) allowed */
+    decimal?: boolean;
+    /** Available when @input="text" ONLY - Allow Multiline input. Use @rows property to set initial rows height */
+    multiline?: boolean;
+    /** Available when @input="text" ONLY - initial rows height*/
+    rows?: number;
+    /** Available when @input="date" ONLY
+     * @default "datetime"
+     */
+    type?: "date" | "datetime";
+    /** Available when @input="select" ONLY - Multi-Select input style.
+     * if you use "default" property with this, make sure your "default" property is an instance of Array
+     */
+    multiple?: "chips" | "default";
+    /** Available when @input="select" ONLY - display loading spinner instead of expand arrow */
+    loading?: boolean;
+    /** Available when @input="select" ONLY - Custom error message */
+    errMsg?: string;
+    md?: GridSize;
+    sm?: GridSize;
+    xs?: GridSize;
+}
+export interface FieldProps {
+    name: string;
+    type: InputTypes;
+    /** Required for type="select" */
+    options?: Array<SelectOption>;
+    default?: string | number | Date | any;
+    config?: FieldInputProps;
+}
+export type ProcessedEvent = CalendarEvent & Record<string, any>;
+export type EventActions = "create" | "edit";
+export type RemoteQuery = {
+    start: Date;
+    end: Date;
+    view: "day" | "week" | "month";
+};
+export type DefaultResource = {
+    assignee?: string | number;
+    text?: string;
+    subtext?: string;
+    avatar?: string;
+    color?: string;
+} & Record<string, any>;
+export type ResourceFields = {
+    idField: string;
+    textField: string;
+    subTextField?: string;
+    avatarField?: string;
+    colorField?: string;
+} & Record<string, string>;
+export interface SchedulerHelpers {
+    state: Record<string, StateItem>;
+    close(): void;
+    loading(status: boolean): void;
+    edited?: ProcessedEvent;
+    onConfirm(event: ProcessedEvent | ProcessedEvent[], action: EventActions): void;
+    [resourceKey: string]: unknown;
+}
+export interface SchedulerProps {
+    /**Min height of table
+     * @default 600
+     */
+    height: number;
+    /** Initial view to load */
+    view: View;
+    /**Activate Agenda view */
+    agenda?: boolean;
+    /** if true, day rows without event will be shown */
+    alwaysShowAgendaDays?: boolean;
+    /**Month view settings */
+    month: MonthProps | null;
+    /**Week view settings */
+    week: WeekProps | null;
+    /**Day view settings */
+    day: DayProps | null;
+    /**Initial date selected */
+    selectedDate: Date;
+    /** Show/Hide date navigation */
+    navigation?: boolean;
+    /** Show/Hide view navigator */
+    disableViewNavigator?: boolean;
+    /** */
+    navigationPickerProps?: Partial<Omit<DateCalendarProps, "open" | "onClose" | "openTo" | "views" | "value" | "readOnly" | "onChange">>;
+    /**Events to display */
+    events: ProcessedEvent[];
+    /** Custom event render method */
+    eventRenderer?: (props: EventRendererProps) => React.ReactNode | null;
+    /**Async function to load remote data with current view data. */
+    getRemoteEvents?(params: RemoteQuery): Promise<ProcessedEvent[] | void>;
+    /**Custom additional fields with it's settings */
+    fields: FieldProps[];
+    /**Table loading state */
+    loading?: boolean;
+    /** Custom loading component */
+    loadingComponent?: React.ReactNode;
+    /**Async function triggered when add/edit event */
+    onConfirm?(event: ProcessedEvent, action: EventActions): Promise<ProcessedEvent>;
+    /**Async function triggered when delete event */
+    onDelete?(deletedId: string | number): Promise<string | number | void>;
+    /**Override editor modal */
+    customEditor?(scheduler: SchedulerHelpers): React.ReactNode;
+    /** Custom viewer/popper component. If used, `viewerExtraComponent` & `viewerTitleComponent` will be ignored */
+    customViewer?(event: ProcessedEvent, close: () => void): React.ReactNode;
+    /**Additional component in event viewer popper */
+    viewerExtraComponent?: React.ReactNode | ((fields: FieldProps[], event: ProcessedEvent) => React.ReactNode);
+    /**Override viewer title component */
+    viewerTitleComponent?(event: ProcessedEvent): React.ReactNode;
+    /**Override viewer subtitle component */
+    viewerSubtitleComponent?(event: ProcessedEvent): React.ReactNode;
+    /** if true, the viewer popover will be disabled globally */
+    disableViewer?: boolean;
+    /**Resources array to split event views with resources */
+    resources: DefaultResource[];
+    /**Map resources fields */
+    resourceFields: ResourceFields;
+    /**Override header component of resource */
+    resourceHeaderComponent?(resource: DefaultResource): React.ReactNode;
+    /** Triggered when resource tabs changes */
+    onResourceChange?(resource: DefaultResource): void;
+    /**Resource header view mode
+     * @default "default"
+     */
+    resourceViewMode: "default" | "vertical" | "tabs";
+    /**Direction of table */
+    direction: "rtl" | "ltr";
+    /**Editor dialog maxWith
+     * @default "md"
+     */
+    dialogMaxWidth: DialogProps["maxWidth"];
+    /**
+     * date-fns Locale object
+     */
+    locale: Locale;
+    /**
+     * Localization
+     */
+    translations: Translations;
+    /**
+     * Hour Format
+     */
+    hourFormat: "12" | "24";
+    /**
+     * Time zone IANA ID: https://data.iana.org/time-zones/releases
+     */
+    timeZone?: string;
+    /**
+     * Triggered when event is dropped on time slot.
+     */
+    onEventDrop?(event: DragEvent<HTMLButtonElement>, droppedOn: Date, updatedEvent: ProcessedEvent, originalEvent: ProcessedEvent): Promise<ProcessedEvent | void>;
+    /**
+     *
+     */
+    onEventClick?(event: ProcessedEvent): void;
+    /**
+     * Triggered when an event item is being edited from the popover
+     */
+    onEventEdit?(event: ProcessedEvent): void;
+    /**
+     * If event is deletable, applied to all events globally, overridden by event specific deletable prop
+     * @default true
+     */
+    deletable?: boolean;
+    /**
+     * If calendar is editable, applied to all events/cells globally, overridden by event specific editable prop
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * If event is draggable, applied to all events globally, overridden by event specific draggable prop
+     * @default true
+     */
+    draggable?: boolean;
+    /**
+     * Triggered when the `selectedDate` prop changes by navigation date picker or `today` button.
+     */
+    onSelectedDateChange?(date: Date): void;
+    /**
+     * Triggered when navigation view changes.
+     */
+    onViewChange?(view: View, agenda?: boolean): void;
+    /**
+     * If true, the navigation controller bar will be sticky
+     */
+    stickyNavigation?: boolean;
+    /**
+     * Overrides the default behavior of more events button
+     */
+    onClickMore?(date: Date, gotToDay: (date: Date) => void): void;
+    /**
+     *
+     */
+    onCellClick?(start: Date, end: Date, resourceKey?: string, resourceVal?: string | number): void;
+    /**
+     * Custom content to display in the scheduler header.
+     * Wrap with useCallback if using state/props to avoid re-renders.
+     *
+     * @example
+     * const header = useCallback(() => <Button>{state}</Button>, [state]);
+     */
+    customHeaderContent?: () => React.ReactNode;
+    /**
+     * Top offset when sticky navigation is enabled (in pixels).
+     * @default 0
+     */
+    stickyNavigationOffset?: number;
+    /**
+     * Height of the sticky navigation header in pixels.
+     * Used to calculate offset for sticky elements below the header.
+     * @default 40
+     */
+    stickyNavigationHeight?: number;
+    /**
+     * Override the current time used for the red indicator bar.
+     * Useful when working with different timezones or for testing.
+     */
+    currentTime?: Date;
+    /**
+     * Show/hide the current time indicator bar.
+     * @default true
+     */
+    showCurrentTimeBar?: boolean;
+    /**
+     * Color of the current time indicator bar.
+     * @default theme.palette.error.light (red)
+     */
+    currentTimeBarColor?: string;
+    /**
+     * When true, events spanning multiple days with allDay: false
+     * will be displayed in the time grid instead of the all-day header.
+     * Events will be split visually at midnight boundaries.
+     * @default false
+     */
+    forceInlineMultiDay?: boolean;
+}
+export interface SchedulerRef {
+    el: HTMLDivElement;
+    scheduler: Store;
+}
+export interface Scheduler extends Partial<SchedulerProps> {
+}
+export {};

package/dist/views/Day.d.ts

@@ -0,0 +1,2 @@
+declare const Day: () => import("react/jsx-runtime").JSX.Element;
+export { Day };

package/dist/views/DayAgenda.d.ts

@@ -0,0 +1,7 @@
+import { DefaultResource, ProcessedEvent } from '../types';
+type Props = {
+    events: ProcessedEvent[];
+    resource?: DefaultResource;
+};
+declare const DayAgenda: ({ events, resource }: Props) => import("react/jsx-runtime").JSX.Element;
+export { DayAgenda };

package/dist/views/Editor.d.ts

@@ -0,0 +1,11 @@
+import { SelectedRange } from '../store/types';
+import { FieldInputProps, InputTypes, ProcessedEvent } from '../types';
+export type StateItem = {
+    value: any;
+    validity: boolean;
+    type: InputTypes;
+    config?: FieldInputProps;
+};
+export type StateEvent = (ProcessedEvent & SelectedRange) | Record<string, any>;
+declare const Editor: () => import("react/jsx-runtime").JSX.Element;
+export default Editor;

package/dist/views/Month.d.ts

@@ -0,0 +1,2 @@
+declare const Month: () => import("react/jsx-runtime").JSX.Element;
+export { Month };

package/dist/views/MonthAgenda.d.ts

@@ -0,0 +1,7 @@
+import { DefaultResource, ProcessedEvent } from '../types';
+type Props = {
+    events: ProcessedEvent[];
+    resource?: DefaultResource;
+};
+declare const MonthAgenda: ({ events, resource }: Props) => import("react/jsx-runtime").JSX.Element;
+export { MonthAgenda };

package/dist/views/Week.d.ts

@@ -0,0 +1,2 @@
+declare const Week: () => import("react/jsx-runtime").JSX.Element;
+export { Week };

package/dist/views/WeekAgenda.d.ts

@@ -0,0 +1,8 @@
+import { DefaultResource, ProcessedEvent } from '../types';
+type Props = {
+    daysList: Date[];
+    resource?: DefaultResource;
+    events: ProcessedEvent[];
+};
+declare const WeekAgenda: ({ daysList, resource, events }: Props) => import("react/jsx-runtime").JSX.Element;
+export { WeekAgenda };

package/eslint.config.js

@@ -0,0 +1,79 @@
+import react from "eslint-plugin-react";
+import tseslint, { configs as tseslintConfigs } from "typescript-eslint";
+import globals from "globals";
+import js from "@eslint/js";
+import * as reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import pluginImport from "eslint-plugin-import";
+import pluginJsxA11y from "eslint-plugin-jsx-a11y";
+import pluginPromise from "eslint-plugin-promise";
+
+export default tseslint.config(
+  { ignores: ["jest.config.ts", "scripts", "dist", "vite.config.js"] },
+  pluginJsxA11y.flatConfigs.recommended,
+  pluginPromise.configs["flat/recommended"],
+  pluginImport.flatConfigs.recommended,
+  {
+    extends: [js.configs.recommended, ...tseslintConfigs.recommended],
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      react,
+    },
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        React: "readonly",
+      },
+      ecmaVersion: "latest",
+      sourceType: "module",
+    },
+
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "linebreak-style": ["error", "unix"],
+
+      quotes: [
+        "error",
+        "double",
+        {
+          allowTemplateLiterals: true,
+        },
+      ],
+
+      semi: ["error", "always"],
+      "@typescript-eslint/no-non-null-assertion": 0,
+      "no-useless-catch": 0,
+      "@typescript-eslint/no-explicit-any": 0,
+      "@typescript-eslint/no-non-null-asserted-optional-chain": 0,
+      "no-case-declarations": 0,
+      "@typescript-eslint/no-empty-interface": 0,
+      "@typescript-eslint/no-empty-function": 0,
+      "@typescript-eslint/no-empty-object-type": [
+        "error",
+        { allowInterfaces: "with-single-extends" },
+      ],
+    },
+  },
+  {
+    // Checks importing of different files
+    settings: {
+      "import/parsers": {
+        "@typescript-eslint/parser": [".ts", ".tsx"],
+      },
+      "import/resolver": {
+        typescript: {
+          alwaysTryTypes: true,
+          project: "./",
+        },
+      },
+    },
+  }
+);

package/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Web site created using create-react-app" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" />
+    <!--
+      Notice the use of  in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+	<script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>