@daryasidorovich/modsen-datepicker 1.0.0 → 1.0.1

package/src/store/tasksStore.tsx

@@ -1,146 +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;
-};
+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

@@ -1,22 +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;
-}
+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/stories/Button.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { fn } from 'storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/arg-types
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/src/stories/Button.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import './button.css';
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: 'small' | 'medium' | 'large';
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onClick?: () => void;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};