@daryasidorovich/modsen-datepicker 1.0.0 → 1.0.1

package/src/components/CalendarGrid/CalendarGridWithTasks/Tooltip/styles.module.scss

@@ -1,9 +1,9 @@
-.tooltip {
-  @include themify-modules($themes) {
-    background-color: themed('border');
-  }
-
-  border-radius: $radius-8;
-  padding: 2px $gap-8;
-  position: absolute;
-}
+.tooltip {
+  @include themify-modules($themes) {
+    background-color: themed('border');
+  }
+
+  border-radius: $radius-8;
+  padding: 2px $gap-8;
+  position: absolute;
+}

package/src/components/CalendarGrid/CalendarGridWithTasks/index.tsx

@@ -1,51 +1,51 @@
-import { useState } from 'react';
-
-import { TasksManager } from '@/components/TasksManager';
-import { useModal } from '@/hooks/useModal';
-import { useTooltip } from '@/hooks/useTooltip';
-import { useTasks } from '@/store/tasksStore';
-
-import { CalendarGridWithoutTasks } from '../CalendarGridWithoutTasks';
-import { CalendarProps } from '../types';
-import { Tooltip } from './Tooltip';
-
-export const CalendarGridWithTasks = (props: CalendarProps) => {
-  const { getTasksByDate, hasTasks } = useTasks();
-  const [selectedDate, setSelectedDate] = useState<Date>();
-  const tasksManagerModal = useModal();
-  const { tooltip, handleDayMouseEnter, handleDayMouseLeave } = useTooltip();
-
-  const handleDateDoubleClick = (date: Date) => {
-    setSelectedDate(date);
-    tasksManagerModal.open();
-  };
-
-  const currentTasks = selectedDate ? getTasksByDate(selectedDate) : [];
-
-  return (
-    <>
-      <CalendarGridWithoutTasks
-        {...props}
-        hasTasks={hasTasks}
-        onDateDoubleClick={handleDateDoubleClick}
-        onMouseEnter={handleDayMouseEnter}
-        onMouseLeave={handleDayMouseLeave}
-      >
-        {selectedDate && (
-          <TasksManager
-            tasks={currentTasks}
-            isOpen={tasksManagerModal.isOpen}
-            onClose={tasksManagerModal.close}
-            selectedDate={selectedDate}
-          />
-        )}
-      </CalendarGridWithoutTasks>
-      <Tooltip
-        isVisible={tooltip.isVisible}
-        text="Double-click to open the task manager"
-        x={tooltip.x}
-        y={tooltip.y}
-      />
-    </>
-  );
-};
+import { useState } from 'react';
+
+import { TasksManager } from '@/components/TasksManager';
+import { useModal } from '@/hooks/useModal';
+import { useTooltip } from '@/hooks/useTooltip';
+import { useTasks } from '@/store/tasksStore';
+
+import { CalendarGridWithoutTasks } from '../CalendarGridWithoutTasks';
+import { CalendarProps } from '../types';
+import { Tooltip } from './Tooltip';
+
+export const CalendarGridWithTasks = (props: CalendarProps) => {
+  const { getTasksByDate, hasTasks } = useTasks();
+  const [selectedDate, setSelectedDate] = useState<Date>();
+  const tasksManagerModal = useModal();
+  const { tooltip, handleDayMouseEnter, handleDayMouseLeave } = useTooltip();
+
+  const handleDateDoubleClick = (date: Date) => {
+    setSelectedDate(date);
+    tasksManagerModal.open();
+  };
+
+  const currentTasks = selectedDate ? getTasksByDate(selectedDate) : [];
+
+  return (
+    <>
+      <CalendarGridWithoutTasks
+        {...props}
+        hasTasks={hasTasks}
+        onDateDoubleClick={handleDateDoubleClick}
+        onMouseEnter={handleDayMouseEnter}
+        onMouseLeave={handleDayMouseLeave}
+      >
+        {selectedDate && (
+          <TasksManager
+            tasks={currentTasks}
+            isOpen={tasksManagerModal.isOpen}
+            onClose={tasksManagerModal.close}
+            selectedDate={selectedDate}
+          />
+        )}
+      </CalendarGridWithoutTasks>
+      <Tooltip
+        isVisible={tooltip.isVisible}
+        text="Double-click to open the task manager"
+        x={tooltip.x}
+        y={tooltip.y}
+      />
+    </>
+  );
+};

package/src/components/CalendarGrid/CalendarGridWithoutTasks/index.tsx

@@ -1,36 +1,36 @@
-import { Week } from '@/components/Week';
-import { useCalendar } from '@/hooks/useCalendar';
-
-import { CalendarProps } from '../types';
-import styles from './styles.module.scss';
-
-export const CalendarGridWithoutTasks = ({
-  children,
-  ...props
-}: CalendarProps & { children?: React.ReactNode }) => {
-  const { calendar, loading, error } = useCalendar(props);
-
-  const weeks = calendar.getWeeks();
-
-  return (
-    <div className={styles.calendar}>
-      {weeks.map((weekDays) => (
-        <Week
-          key={weekDays[0].toISOString()}
-          weekDays={weekDays}
-          selectedDate={calendar.selectedDate}
-          getIsDisabled={calendar.getIsDisabled}
-          getIsCurrentMonth={calendar.getIsCurrentMonth}
-          getIsHoliday={calendar.getIsHoliday}
-          rangeStart={calendar.rangeStart}
-          rangeEnd={calendar.rangeEnd}
-          {...props}
-        />
-      ))}
-
-      {error && <p className={styles.errorMessage}>{error}</p>}
-      {loading && <div>Loading...</div>}
-      {children}
-    </div>
-  );
-};
+import { Week } from '@/components/Week';
+import { useCalendar } from '@/hooks/useCalendar';
+
+import { CalendarProps } from '../types';
+import styles from './styles.module.scss';
+
+export const CalendarGridWithoutTasks = ({
+  children,
+  ...props
+}: CalendarProps & { children?: React.ReactNode }) => {
+  const { calendar, loading, error } = useCalendar(props);
+
+  const weeks = calendar.getWeeks();
+
+  return (
+    <div className={styles.calendar}>
+      {weeks.map((weekDays) => (
+        <Week
+          key={weekDays[0].toISOString()}
+          weekDays={weekDays}
+          selectedDate={calendar.selectedDate}
+          getIsDisabled={calendar.getIsDisabled}
+          getIsCurrentMonth={calendar.getIsCurrentMonth}
+          getIsHoliday={calendar.getIsHoliday}
+          rangeStart={calendar.rangeStart}
+          rangeEnd={calendar.rangeEnd}
+          {...props}
+        />
+      ))}
+
+      {error && <p className={styles.errorMessage}>{error}</p>}
+      {loading && <div>Loading...</div>}
+      {children}
+    </div>
+  );
+};

package/src/components/CalendarGrid/CalendarGridWithoutTasks/styles.module.scss

@@ -1,11 +1,11 @@
-.calendar {
-  display: flex;
-  flex-direction: column;
-  gap: $gap-8;
-}
-
-.errorMessage {
-  @include themify-modules($themes) {
-    color: themed('accent');
-  }
-}
+.calendar {
+  display: flex;
+  flex-direction: column;
+  gap: $gap-8;
+}
+
+.errorMessage {
+  @include themify-modules($themes) {
+    color: themed('accent');
+  }
+}

package/src/components/CalendarGrid/index.tsx

@@ -1,19 +1,19 @@
-import { TasksProvider } from '@/store/tasksStore';
-
-import { CalendarGridWithoutTasks } from './CalendarGridWithoutTasks';
-import { CalendarGridWithTasks } from './CalendarGridWithTasks';
-import { CalendarProps } from './types';
-
-export const CalendarGrid = (props: CalendarProps) => {
-  const { enableTasks } = props;
-
-  if (enableTasks) {
-    return (
-      <TasksProvider>
-        <CalendarGridWithTasks {...props} />
-      </TasksProvider>
-    );
-  }
-
-  return <CalendarGridWithoutTasks {...props} />;
-};
+import { TasksProvider } from '@/store/tasksStore';
+
+import { CalendarGridWithoutTasks } from './CalendarGridWithoutTasks';
+import { CalendarGridWithTasks } from './CalendarGridWithTasks';
+import { CalendarProps } from './types';
+
+export const CalendarGrid = (props: CalendarProps) => {
+  const { enableTasks } = props;
+
+  if (enableTasks) {
+    return (
+      <TasksProvider>
+        <CalendarGridWithTasks {...props} />
+      </TasksProvider>
+    );
+  }
+
+  return <CalendarGridWithoutTasks {...props} />;
+};

package/src/components/CalendarGrid/types.ts

@@ -1,26 +1,26 @@
-import { FIRST_DAY_OF_WEEK_TYPES } from '@/constants/firstDayOfWeek';
-import { MODES_TYPES } from '@/constants/modes';
-
-export interface CalendarProps {
-  minDate?: Date;
-  maxDate?: Date;
-  monthDate: Date;
-  firstDayOfWeek?: FIRST_DAY_OF_WEEK_TYPES;
-  selectedDate?: Date;
-  mode?: MODES_TYPES;
-  rangeStart?: Date;
-  rangeEnd?: Date;
-  hideWeekends?: boolean;
-  showHolidays?: boolean;
-  enableTasks?: boolean;
-  hasTasks?: (date: Date) => boolean;
-  onDateClick?: (e: React.MouseEvent<HTMLButtonElement>, date: Date) => void;
-  onDateDoubleClick?: (date: Date) => void;
-  onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  onMouseLeave?: () => void;
-}
-
-export type BaseCalendarProps = Omit<
-  CalendarProps,
-  'hasTasks' | 'onDoubleDateClick' | 'onMouseEnter' | 'onMouseLeave'
->;
+import { FIRST_DAY_OF_WEEK_TYPES } from '@/constants/firstDayOfWeek';
+import { MODES_TYPES } from '@/constants/modes';
+
+export interface CalendarProps {
+  minDate?: Date;
+  maxDate?: Date;
+  monthDate: Date;
+  firstDayOfWeek?: FIRST_DAY_OF_WEEK_TYPES;
+  selectedDate?: Date;
+  mode?: MODES_TYPES;
+  rangeStart?: Date;
+  rangeEnd?: Date;
+  hideWeekends?: boolean;
+  showHolidays?: boolean;
+  enableTasks?: boolean;
+  hasTasks?: (date: Date) => boolean;
+  onDateClick?: (e: React.MouseEvent<HTMLButtonElement>, date: Date) => void;
+  onDateDoubleClick?: (date: Date) => void;
+  onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onMouseLeave?: () => void;
+}
+
+export type BaseCalendarProps = Omit<
+  CalendarProps,
+  'hasTasks' | 'onDoubleDateClick' | 'onMouseEnter' | 'onMouseLeave'
+>;

package/src/components/Clear/Clear.stories.tsx

@@ -1,16 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Clear } from '.';
-
-const meta: Meta<typeof Clear> = {
-  component: Clear,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Clear>;
-
-export const Default: Story = {
-  args: {
-    onClick: () => console.log('Click'),
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Clear } from '.';
+
+const meta: Meta<typeof Clear> = {
+  component: Clear,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Clear>;
+
+export const Default: Story = {
+  args: {
+    onClick: () => console.log('Click'),
+  },
+};

package/src/components/Clear/index.tsx

@@ -1,12 +1,12 @@
-import styles from './styles.module.scss';
-
-interface ClearProps {
-  onClick: () => void;
-}
-export const Clear = ({ onClick }: ClearProps) => {
-  return (
-    <button className={styles.clear} type="button" onClick={onClick}>
-      Clear
-    </button>
-  );
-};
+import styles from './styles.module.scss';
+
+interface ClearProps {
+  onClick: () => void;
+}
+export const Clear = ({ onClick }: ClearProps) => {
+  return (
+    <button className={styles.clear} type="button" onClick={onClick}>
+      Clear
+    </button>
+  );
+};

package/src/components/Clear/styles.module.scss

@@ -1,34 +1,34 @@
-.clear {
-  @include border;
-
-  @include themify-modules($themes) {
-    border-color: themed('border');
-    background-color: themed('background');
-    color: themed('text');
-  }
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: $gap-10;
-  width: 100%;
-  font-weight: $font-weight-semibold;
-  border-bottom-right-radius: $radius-8;
-  border-bottom-left-radius: $radius-8;
-
-  &:hover {
-    @include themify-modules($themes) {
-      background-color: themed('button-hover');
-      color: themed('white-color');
-    }
-  }
-
-  &:active {
-    transform: scale(0.98);
-
-    @include themify-modules($themes) {
-      background-color: themed('selected');
-      color: themed('white-color');
-    }
-  }
-}
+.clear {
+  @include border;
+
+  @include themify-modules($themes) {
+    border-color: themed('border');
+    background-color: themed('background');
+    color: themed('text');
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: $gap-10;
+  width: 100%;
+  font-weight: $font-weight-semibold;
+  border-bottom-right-radius: $radius-8;
+  border-bottom-left-radius: $radius-8;
+
+  &:hover {
+    @include themify-modules($themes) {
+      background-color: themed('button-hover');
+      color: themed('white-color');
+    }
+  }
+
+  &:active {
+    transform: scale(0.98);
+
+    @include themify-modules($themes) {
+      background-color: themed('selected');
+      color: themed('white-color');
+    }
+  }
+}