@daryasidorovich/modsen-datepicker 1.0.0

package/src/store/tasksStore.test.tsx

@@ -0,0 +1,208 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { TasksProvider, useTasks } from '@/store/tasksStore';
+import { loadTasksFromStorage, saveTasksToStorage } from './localStorage';
+
+jest.mock('@/store/localStorage', () => ({
+  loadTasksFromStorage: jest.fn(),
+  saveTasksToStorage: jest.fn(),
+}));
+
+const TestComponent = () => {
+  const {
+    tasks,
+    error,
+    getTasksByDate,
+    hasTasks,
+    addTask,
+    editTask,
+    deleteTask,
+    toggleTask,
+  } = useTasks();
+
+  return (
+    <div>
+      {error && <div data-testid="error">{error}</div>}
+
+      <div data-testid="tasks-count">Count: {tasks.length}</div>
+      <ul data-testid="tasks-list">
+        {Array.isArray(tasks) &&
+          tasks.map((task) => (
+            <li key={task.id}>
+              <p data-testid={`task-title-${task.id}`}>{task.title}</p>
+              <span data-testid={`task-completed-${task.id}`}>
+                {task.completed ? 'yes' : 'no'}
+              </span>
+              <button
+                data-testid={`toggle-${task.id}`}
+                onClick={() => toggleTask(task.id)}
+              >
+                Toggle
+              </button>
+              <button
+                data-testid={`delete-${task.id}`}
+                onClick={() => deleteTask(task.id)}
+              >
+                Delete
+              </button>
+              <button
+                data-testid={`edit-${task.id}`}
+                onClick={() => editTask(task.id, { title: 'Edited task' })}
+              ></button>
+            </li>
+          ))}
+      </ul>
+
+      <div data-testid="has-tasks-today">
+        Has tasks today:
+        {Array.isArray(tasks) && hasTasks(new Date()) ? 'yes' : 'no'}
+      </div>
+      <div data-testid="tasks-by-date">
+        Tasks today: {Array.isArray(tasks) && getTasksByDate(new Date()).length}
+      </div>
+
+      <button
+        data-testid="add-task-btn"
+        onClick={() => addTask(new Date(), 'New task')}
+      >
+        Add Task
+      </button>
+    </div>
+  );
+};
+
+describe('TasksContext:', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  const mockTasks = [
+    { id: '1', date: new Date(), title: 'Task 1', completed: false },
+    { id: '2', date: new Date(), title: 'Task 2', completed: true },
+  ];
+
+  test('loads tasks from localStorage on mount:', () => {
+    (loadTasksFromStorage as jest.Mock).mockReturnValue(mockTasks);
+
+    render(
+      <TasksProvider>
+        <TestComponent />
+      </TasksProvider>
+    );
+
+    expect(screen.getByTestId('tasks-count')).toHaveTextContent('Count: 2');
+
+    expect(screen.getByTestId('task-title-1')).toHaveTextContent('Task 1');
+    expect(screen.getByTestId('task-title-2')).toHaveTextContent('Task 2');
+  });
+
+  test('adds task correctly:', async () => {
+    (loadTasksFromStorage as jest.Mock).mockReturnValue([]);
+
+    render(
+      <TasksProvider>
+        <TestComponent />
+      </TasksProvider>
+    );
+
+    expect(screen.getByTestId('tasks-count')).toHaveTextContent('Count: 0');
+
+    await userEvent.click(screen.getByTestId('add-task-btn'));
+
+    expect(screen.getByTestId('tasks-count')).toHaveTextContent('Count: 1');
+    expect(screen.getByText('New task')).toBeInTheDocument();
+
+    expect(saveTasksToStorage).toHaveBeenCalled();
+    expect(saveTasksToStorage).toHaveBeenCalledWith([
+      expect.objectContaining({ title: 'New task' }),
+    ]);
+  });
+
+  test('edits task correctly:', async () => {
+    (loadTasksFromStorage as jest.Mock).mockReturnValue(mockTasks);
+
+    render(
+      <TasksProvider>
+        <TestComponent />
+      </TasksProvider>
+    );
+
+    await userEvent.click(screen.getByTestId('edit-1'));
+
+    expect(screen.getByTestId('task-title-1')).toHaveTextContent('Edited task');
+  });
+
+  test('deletes task correctly', async () => {
+    (loadTasksFromStorage as jest.Mock).mockReturnValue(mockTasks);
+
+    render(
+      <TasksProvider>
+        <TestComponent />
+      </TasksProvider>
+    );
+
+    expect(screen.getByTestId('task-title-1')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByTestId('delete-1'));
+
+    expect(screen.queryByTestId('task-title-1')).not.toBeInTheDocument();
+    expect(screen.getByTestId('tasks-count')).toHaveTextContent('Count: 1');
+  });
+
+  test('toggles task completion status', async () => {
+    (loadTasksFromStorage as jest.Mock).mockReturnValue(mockTasks);
+
+    render(
+      <TasksProvider>
+        <TestComponent />
+      </TasksProvider>
+    );
+
+    expect(screen.getByTestId('task-completed-1')).toHaveTextContent('no');
+
+    await userEvent.click(screen.getByTestId('toggle-1'));
+
+    expect(screen.getByTestId('task-completed-1')).toHaveTextContent('yes');
+  });
+
+  test('checks if tasks exist for a date', () => {
+    (loadTasksFromStorage as jest.Mock).mockReturnValue(mockTasks);
+
+    render(
+      <TasksProvider>
+        <TestComponent />
+      </TasksProvider>
+    );
+
+    expect(screen.getByTestId('has-tasks-today')).toHaveTextContent('yes');
+  });
+
+  test('gets tasks by date', () => {
+    (loadTasksFromStorage as jest.Mock).mockReturnValue(mockTasks);
+
+    render(
+      <TasksProvider>
+        <TestComponent />
+      </TasksProvider>
+    );
+
+    expect(screen.getByTestId('tasks-by-date')).toHaveTextContent(
+      'Tasks today: 2'
+    );
+  });
+
+  test('handles loading error', () => {
+    const errorMessage = 'Failed to load tasks';
+    (loadTasksFromStorage as jest.Mock).mockImplementation(() => {
+      throw new Error(errorMessage);
+    });
+
+    render(
+      <TasksProvider>
+        <TestComponent />
+      </TasksProvider>
+    );
+
+    expect(screen.getByTestId('error')).toHaveTextContent(errorMessage);
+  });
+});

package/src/store/tasksStore.tsx

@@ -0,0 +1,146 @@
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+import { isSameDay } from '@/utils/dateChecks';
+
+import { loadTasksFromStorage, saveTasksToStorage } from './localStorage';
+import { Task, TasksContextValue } from './types';
+
+const TasksContext = createContext<TasksContextValue | null>(null);
+
+interface TasksProviderProps {
+  children: ReactNode;
+}
+
+export const TasksProvider = ({ children }: TasksProviderProps) => {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string>('');
+
+  const loadTasks = useCallback(() => {
+    setLoading(true);
+    setError('');
+    try {
+      const loadedTasks = loadTasksFromStorage();
+      setTasks(loadedTasks);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load tasks');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadTasks();
+  }, [loadTasks]);
+
+  const getTasksByDate = (date: Date) => {
+    return tasks.filter((task) => isSameDay(task.date, date));
+  };
+
+  const hasTasks = (date: Date) => {
+    return tasks.some((task) => isSameDay(task.date, date));
+  };
+
+  const addTask = (date: Date, title: string) => {
+    const newTask = {
+      id: Date.now().toString(),
+      date,
+      title,
+      completed: false,
+    };
+
+    setTasks((prev) => {
+      const updated = [...prev, newTask];
+      saveTasksToStorage(updated);
+      return updated;
+    });
+
+    return newTask;
+  };
+
+  const editTask = (id: string, updates: Partial<Omit<Task, 'id'>>) => {
+    let result: Task | undefined;
+
+    setTasks((prevTasks) => {
+      const updatedTasks = prevTasks.map((task) => {
+        if (task.id === id) {
+          result = { ...task, ...updates };
+          return result;
+        }
+        return task;
+      });
+
+      saveTasksToStorage(updatedTasks);
+      return updatedTasks;
+    });
+
+    return result;
+  };
+
+  const deleteTask = (id: string) => {
+    let deleted = false;
+
+    setTasks((prev) => {
+      const updated = prev.filter((task) => {
+        if (task.id === id) {
+          deleted = true;
+          return false;
+        }
+        return true;
+      });
+      saveTasksToStorage(updated);
+      return updated;
+    });
+
+    return deleted;
+  };
+
+  const toggleTask = (id: string) => {
+    let toggledTask;
+
+    setTasks((prev) => {
+      const updated = prev.map((task) => {
+        if (task.id === id) {
+          toggledTask = { ...task, completed: !task.completed };
+          return toggledTask;
+        }
+        return task;
+      });
+      saveTasksToStorage(updated);
+      return updated;
+    });
+
+    return toggledTask;
+  };
+
+  const value = {
+    tasks,
+    loading,
+    error,
+    getTasksByDate,
+    hasTasks,
+    addTask,
+    editTask,
+    deleteTask,
+    toggleTask,
+    loadTasks,
+  };
+  return (
+    <TasksContext.Provider value={value}>{children}</TasksContext.Provider>
+  );
+};
+
+export const useTasks = () => {
+  const context = useContext(TasksContext);
+  if (!context) {
+    throw new Error('Error while loading context');
+  }
+  return context;
+};

package/src/store/types.ts

@@ -0,0 +1,22 @@
+export interface Task {
+  id: string;
+  date: Date;
+  title: string;
+  completed: boolean;
+}
+
+export interface TasksContextValue {
+  tasks: Task[];
+  loading: boolean;
+  error: string;
+  getTasksByDate: (date: Date) => Task[];
+  hasTasks: (date: Date) => boolean;
+  addTask: (date: Date, title: string) => Task;
+  editTask: (
+    id: string,
+    updates: Partial<Omit<Task, 'id'>>
+  ) => Task | undefined;
+  deleteTask: (id: string) => boolean;
+  toggleTask: (id: string) => Task | undefined;
+  loadTasks: () => void;
+}

package/src/styles/_border.scss

@@ -0,0 +1,9 @@
+$radius-8: 8px;
+
+$border-width: 1px;
+$border-solid: solid;
+
+@mixin border {
+  border-style: $border-solid;
+  border-width: $border-width;
+}

package/src/styles/_colors.scss

@@ -0,0 +1,53 @@
+@use 'sass:map';
+
+$colors: (
+  color-blue: #2f80ed,
+  color-blue-60: #2f81ed93,
+  color-blue-10: #2f81ed2a,
+
+  color-white: #ffffff,
+  color-black: #333333,
+
+  color-red: #ff383c,
+  color-green: #62d0a2,
+  color-light-gray: #e1e1e1,
+  color-gray: #aaaaaa,
+  color-dark-gray: #2c314466,
+);
+
+@function color($key) {
+  @return map.get($colors, $key);
+}
+
+$themes: (
+  light: (
+    border: color(color-light-gray),
+    background: color(color-white),
+    text: color(color-black),
+    middle-blue: color(color-blue-60),
+    light-blue: color(color-blue-10),
+    blue: color(color-blue),
+    disabled: color(color-gray),
+    selected: color(color-blue),
+    accent: color(color-red),
+    marker: color(color-green),
+    white-color: color(color-white),
+    button-hover: color(color-blue-60),
+    overlay: color(color-dark-gray),
+  ),
+  dark: (
+    border: color(color-gray),
+    background: color(color-black),
+    text: color(color-white),
+    middle-blue: color(color-blue-60),
+    light-blue: color(color-blue-10),
+    blue: color(color-blue),
+    disabled: color(color-gray),
+    selected: color(color-blue),
+    accent: color(color-red),
+    marker: color(color-green),
+    white-color: color(color-light-gray),
+    button-hover: color(color-gray),
+    overlay: color(color-dark-gray),
+  ),
+);

package/src/styles/_gap.scss

@@ -0,0 +1,4 @@
+$gap-5: 5px;
+$gap-8: 8px;
+$gap-10: 10px;
+$gap-24: 24px;

package/src/styles/_globals.scss

@@ -0,0 +1,61 @@
+@use './colors' as *;
+@use './typography' as *;
+@use './border' as *;
+@use './variables' as *;
+@use './mixins' as *;
+@use './theme-mixins' as *;
+
+html {
+  &.is-lock {
+    overflow: hidden;
+  }
+}
+
+body {
+  font-weight: $font-weight-regular;
+  font-family: $font-family-base;
+  font-size: $font-size-14;
+
+  @include themify($themes) {
+    color: themed('text');
+    background: themed('gradient');
+  }
+}
+
+h1,
+h2 {
+  margin: 0;
+}
+
+h1 {
+  font-size: $font-size-15;
+  font-weight: $font-weight-semibold;
+}
+
+h2 {
+  font-weight: $font-weight-bold;
+}
+
+a,
+button,
+label,
+input,
+textarea,
+select,
+svg * {
+  transition:
+    color $transition-duration $easing,
+    background-color $transition-duration $easing,
+    border-color $transition-duration $easing,
+    fill $transition-duration $easing,
+    opacity $transition-duration $easing;
+}
+
+a,
+button {
+  &:has(svg) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

package/src/styles/_grid.scss

@@ -0,0 +1,9 @@
+@use './mixins' as *;
+@use './gap' as *;
+
+.grid {
+  display: grid;
+  width: 100%;
+
+  grid-template-columns: repeat(7, 1fr);
+}

package/src/styles/_mixins.scss

@@ -0,0 +1,6 @@
+@use 'sass:map';
+
+@mixin square($size) {
+  width: $size;
+  height: $size;
+}

package/src/styles/_reset.scss

@@ -0,0 +1,98 @@
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:where(ul, ol):where([class]) {
+  padding-left: 0;
+}
+
+body,
+:where(blockquote, figure):where([class]) {
+  margin: 0;
+}
+
+:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
+  margin-block: 0;
+}
+
+:where(dd[class]) {
+  margin-left: 0;
+}
+
+:where(fieldset[class]) {
+  margin-left: 0;
+  padding: 0;
+  border: none;
+}
+
+:where(ul[class]) {
+  list-style: none;
+}
+
+:where(address[class]) {
+  font-style: normal;
+}
+
+p {
+  margin-block: 0;
+}
+
+img,
+video {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+input,
+textarea,
+select,
+button {
+  font: inherit;
+}
+
+html {
+  height: 100%;
+
+  scrollbar-gutter: stable;
+}
+
+html,
+:has(:target) {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100%;
+
+  line-height: 1.5;
+}
+
+a:where([class]) {
+  display: inline-flex;
+}
+
+button,
+label {
+  cursor: pointer;
+}
+
+[stroke] {
+  stroke: currentColor;
+}
+
+svg * {
+  transition-property: fill, stroke;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/styles/_theme-mixins.scss

@@ -0,0 +1,51 @@
+@use 'sass:map';
+@use './colors' as *;
+
+$theme-map: null;
+
+@mixin themify-modules($themes) {
+  @each $theme, $map in $themes {
+    :global(.theme-#{$theme}) & {
+      $theme-map: () !global;
+
+      @each $key, $value in $map {
+        $theme-map: map.merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
+      }
+
+      @content;
+
+      $theme-map: null !global;
+    }
+  }
+}
+
+@mixin themify($themes) {
+  @each $theme, $map in $themes {
+    .theme-#{$theme} & {
+      $theme-map: () !global;
+
+      @each $key, $submap in $map {
+        $value: map.get(map.get($themes, $theme), $key);
+        $theme-map: map.merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
+      }
+
+      @content;
+
+      $theme-map: null !global;
+    }
+  }
+}
+
+@function themed($key) {
+  @return map.get($theme-map, $key);
+}

package/src/styles/_typography.scss

@@ -0,0 +1,10 @@
+$font-family-base: 'Open Sans', sans-serif;
+
+$font-size-13: 13px;
+$font-size-14: 14px;
+$font-size-15: 15px;
+$font-size-18: 18px;
+
+$font-weight-regular: 400;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;

package/src/styles/_variables.scss

@@ -0,0 +1,8 @@
+$input-height: 42px;
+$button-heght: 36px;
+$icon-size: 16px;
+
+$easing: ease;
+$transition-duration: 0.2s;
+
+$z-index-10: 10;

package/src/styles/main.scss

@@ -0,0 +1,3 @@
+@use './reset';
+@use './globals';
+@use './grid';