@getmicdrop/svelte-components 2.0.13 → 2.1.0

package/dist/components/Calendar/Calendar.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Calendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/Calendar.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6qBA;;;;;;;;;;;;;;;;;mBAAiQ;yBAxqBxO,oBAAoB;6CA+pBA,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Calendar/QuarterView.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=QuarterView.spec.d.ts.map

package/dist/components/Calendar/QuarterView.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QuarterView.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/QuarterView.spec.js"],"names":[],"mappings":""}

package/dist/components/Calendar/QuarterView.spec.js

@@ -1,394 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import { writable, get } from 'svelte/store';
-import QuarterView from './QuarterView.svelte';
-
-// Mock date-fns functions
-vi.mock('date-fns', () => ({
-  getDay: vi.fn((date) => date.getDay()),
-  getDaysInMonth: vi.fn((date) => {
-    return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
-  }),
-  startOfMonth: vi.fn((date) => new Date(date.getFullYear(), date.getMonth(), 1)),
-}));
-
-describe('QuarterView Component', () => {
-  let selectedDates;
-
-  beforeEach(() => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date(2024, 5, 15)); // June 15, 2024
-
-    selectedDates = writable([]);
-
-    // Mock navigator.vibrate for haptic feedback tests
-    Object.defineProperty(navigator, 'vibrate', {
-      value: vi.fn(),
-      writable: true,
-    });
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('renders calendar container', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    const calendarContainer = container.querySelector('.calendar-container');
-    expect(calendarContainer).toBeTruthy();
-  });
-
-  it('renders day headers', () => {
-    const { getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    expect(getByText('Sun')).toBeTruthy();
-    expect(getByText('Mon')).toBeTruthy();
-    expect(getByText('Tue')).toBeTruthy();
-    expect(getByText('Wed')).toBeTruthy();
-    expect(getByText('Thu')).toBeTruthy();
-    expect(getByText('Fri')).toBeTruthy();
-    expect(getByText('Sat')).toBeTruthy();
-  });
-
-  it('renders current month name', () => {
-    const { getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    expect(getByText('June')).toBeTruthy();
-  });
-
-  it('renders current year', () => {
-    const { getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    expect(getByText('2024')).toBeTruthy();
-  });
-
-  it('renders navigation buttons', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    const navButtons = container.querySelectorAll('.nav-btn');
-    expect(navButtons.length).toBe(2);
-  });
-
-  it('renders Today button', () => {
-    const { getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    expect(getByText('Today')).toBeTruthy();
-  });
-
-  it('renders day cells', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    const dayCells = container.querySelectorAll('.day-cell');
-    // June 2024 has 30 days
-    expect(dayCells.length).toBe(30);
-  });
-
-  it('previous button has aria-label', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    const prevButton = container.querySelector('[aria-label="Previous month"]');
-    expect(prevButton).toBeTruthy();
-  });
-
-  it('next button has aria-label', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    const nextButton = container.querySelector('[aria-label="Next month"]');
-    expect(nextButton).toBeTruthy();
-  });
-
-  it('clicking next navigates to next month', async () => {
-    const { container, getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-
-    const nextButton = container.querySelector('[aria-label="Next month"]');
-    await fireEvent.click(nextButton);
-
-    vi.advanceTimersByTime(300);
-
-    expect(getByText('July')).toBeTruthy();
-  });
-
-  it('clicking previous navigates to previous month', async () => {
-    const { container, getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-
-    const prevButton = container.querySelector('[aria-label="Previous month"]');
-    await fireEvent.click(prevButton);
-
-    vi.advanceTimersByTime(300);
-
-    expect(getByText('May')).toBeTruthy();
-  });
-
-  it('shows save status when provided', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-        saveStatus: 'saving',
-      },
-    });
-    const saveIndicator = container.querySelector('.save-indicator-overlay');
-    expect(saveIndicator).toBeTruthy();
-  });
-
-  it('shows saved indicator', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-        saveStatus: 'saved',
-      },
-    });
-    const saveIndicator = container.querySelector('.save-indicator-overlay');
-    expect(saveIndicator).toBeTruthy();
-  });
-
-  it('disables non-event days', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    const disabledCells = container.querySelectorAll('.day-cell.disabled');
-    // All days should be disabled when no events
-    expect(disabledCells.length).toBe(30);
-  });
-
-  it('enables event days', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [{ date: '2024-06-20' }],
-        selectedDates,
-      },
-    });
-
-    const dayCells = container.querySelectorAll('.day-cell');
-    // Find the cell for day 20
-    const day20Cell = Array.from(dayCells).find(
-      (cell) => cell.querySelector('.day-number')?.textContent === '20'
-    );
-
-    // Day 20 (future event) should not be disabled
-    expect(day20Cell.classList.contains('disabled')).toBe(false);
-  });
-
-  it('marks selected dates', async () => {
-    selectedDates.set(['2024-06-20']);
-
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [{ date: '2024-06-20' }],
-        selectedDates,
-      },
-    });
-
-    const dayCells = container.querySelectorAll('.day-cell');
-    const day20Cell = Array.from(dayCells).find(
-      (cell) => cell.querySelector('.day-number')?.textContent === '20'
-    );
-
-    expect(day20Cell.classList.contains('selected')).toBe(true);
-  });
-
-  it('toggles date selection on click', async () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [{ date: '2024-06-20' }],
-        selectedDates,
-      },
-    });
-
-    const dayCells = container.querySelectorAll('.day-cell');
-    const day20Cell = Array.from(dayCells).find(
-      (cell) => cell.querySelector('.day-number')?.textContent === '20'
-    );
-
-    await fireEvent.click(day20Cell);
-
-    // Check that selectedDates store was updated
-    const dates = get(selectedDates);
-    expect(dates).toContain('2024-06-20');
-  });
-
-  it('removes date from selection on second click', async () => {
-    selectedDates.set(['2024-06-20']);
-
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [{ date: '2024-06-20' }],
-        selectedDates,
-      },
-    });
-
-    const dayCells = container.querySelectorAll('.day-cell');
-    const day20Cell = Array.from(dayCells).find(
-      (cell) => cell.querySelector('.day-number')?.textContent === '20'
-    );
-
-    await fireEvent.click(day20Cell);
-
-    const dates = get(selectedDates);
-    expect(dates).not.toContain('2024-06-20');
-  });
-
-  it('has aria-pressed attribute on day buttons', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-
-    const dayCell = container.querySelector('.day-cell');
-    expect(dayCell.hasAttribute('aria-pressed')).toBe(true);
-  });
-
-  it('has aria-label for day buttons', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-
-    const dayCell = container.querySelector('.day-cell');
-    expect(dayCell.getAttribute('aria-label')).toMatch(/Day \d+/);
-  });
-
-  it('handles touch swipe events', async () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-
-    const grid = container.querySelector('.calendar-grid');
-
-    // Simulate touch swipe
-    await fireEvent.touchStart(grid, {
-      touches: [{ clientX: 200, clientY: 100 }],
-    });
-
-    await fireEvent.touchMove(grid, {
-      touches: [{ clientX: 100, clientY: 100 }],
-    });
-
-    await fireEvent.touchEnd(grid, {
-      changedTouches: [{ clientX: 50, clientY: 100 }],
-    });
-
-    vi.advanceTimersByTime(300);
-  });
-
-  it('calls haptic feedback via vibration API', async () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [{ date: '2024-06-20' }],
-        selectedDates,
-      },
-    });
-
-    const dayCells = container.querySelectorAll('.day-cell');
-    const day20Cell = Array.from(dayCells).find(
-      (cell) => cell.querySelector('.day-number')?.textContent === '20'
-    );
-
-    await fireEvent.click(day20Cell);
-
-    // vibrate should have been called
-    expect(navigator.vibrate).toHaveBeenCalled();
-  });
-
-  it('navigates months correctly across year boundary (December to January)', async () => {
-    vi.setSystemTime(new Date(2024, 11, 15)); // December 15, 2024
-
-    const { container, getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-
-    expect(getByText('December')).toBeTruthy();
-    expect(getByText('2024')).toBeTruthy();
-
-    const nextButton = container.querySelector('[aria-label="Next month"]');
-    await fireEvent.click(nextButton);
-
-    vi.advanceTimersByTime(300);
-
-    expect(getByText('January')).toBeTruthy();
-    expect(getByText('2025')).toBeTruthy();
-  });
-
-  it('navigates months correctly across year boundary (January to December)', async () => {
-    vi.setSystemTime(new Date(2024, 0, 15)); // January 15, 2024
-
-    const { container, getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-
-    expect(getByText('January')).toBeTruthy();
-    expect(getByText('2024')).toBeTruthy();
-
-    const prevButton = container.querySelector('[aria-label="Previous month"]');
-    await fireEvent.click(prevButton);
-
-    vi.advanceTimersByTime(300);
-
-    expect(getByText('December')).toBeTruthy();
-    expect(getByText('2023')).toBeTruthy();
-  });
-});

package/dist/components/Calendar/QuarterView.stories.svelte

@@ -1,134 +0,0 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import QuarterView from "./QuarterView.svelte";
-  import { writable } from "svelte/store";
-
-  export const meta = {
-    title: "Components/Calendar/QuarterView",
-    component: QuarterView,
-    argTypes: {
-      currentevents: { control: "object" },
-      selectedDates: { control: "object" },
-    },
-  };
-
-  // Helper to generate dates for the current month
-  function generateEventDates(count = 10) {
-    const events = [];
-    const today = new Date();
-    const year = today.getFullYear();
-    const month = today.getMonth();
-
-    for (let i = 0; i < count; i++) {
-      const day = Math.floor(Math.random() * 28) + 1;
-      events.push({
-        date: new Date(year, month, day).toISOString(),
-        title: `Event ${i + 1}`
-      });
-    }
-    return events;
-  }
-
-  // Generate future event dates for next month
-  function generateFutureEventDates(count = 8) {
-    const events = [];
-    const today = new Date();
-    const year = today.getFullYear();
-    const month = today.getMonth() + 1;
-
-    for (let i = 0; i < count; i++) {
-      const day = Math.floor(Math.random() * 28) + 1;
-      events.push({
-        date: new Date(year, month, day).toISOString(),
-        title: `Future Event ${i + 1}`
-      });
-    }
-    return events;
-  }
-
-  // Generate specific dates
-  function generateSpecificDates() {
-    const today = new Date();
-    const year = today.getFullYear();
-    const month = today.getMonth();
-
-    return [
-      { date: new Date(year, month, 5).toISOString(), title: "Comedy Night" },
-      { date: new Date(year, month, 12).toISOString(), title: "Jazz Evening" },
-      { date: new Date(year, month, 18).toISOString(), title: "Rock Concert" },
-      { date: new Date(year, month, 25).toISOString(), title: "Open Mic" },
-    ];
-  }
-</script>
-
-<Template let:args>
-  <div style="max-width: 600px; margin: 0 auto;">
-    <QuarterView {...args} />
-  </div>
-</Template>
-
-<Story
-  name="With Random Events"
-  args={{
-    currentevents: generateEventDates(10),
-    selectedDates: writable([])
-  }}
-/>
-
-<Story name="With Specific Events">
-  <div style="max-width: 600px; margin: 0 auto;">
-    <QuarterView
-      currentevents={generateSpecificDates()}
-      selectedDates={writable([])}
-    />
-  </div>
-</Story>
-
-<Story name="With Pre-selected Dates">
-  <div style="max-width: 600px; margin: 0 auto;">
-    <QuarterView
-      currentevents={generateEventDates(12)}
-      selectedDates={writable([
-        `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-05`,
-        `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-12`,
-        `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-18`,
-      ])}
-    />
-  </div>
-</Story>
-
-<Story name="With Many Events">
-  <div style="max-width: 600px; margin: 0 auto;">
-    <QuarterView
-      currentevents={generateEventDates(20)}
-      selectedDates={writable([])}
-    />
-  </div>
-</Story>
-
-<Story name="With Few Events">
-  <div style="max-width: 600px; margin: 0 auto;">
-    <QuarterView
-      currentevents={generateSpecificDates().slice(0, 2)}
-      selectedDates={writable([])}
-    />
-  </div>
-</Story>
-
-<Story name="Empty Calendar">
-  <div style="max-width: 600px; margin: 0 auto;">
-    <QuarterView
-      currentevents={[]}
-      selectedDates={writable([])}
-    />
-  </div>
-</Story>
-
-<Story name="Next Month Events">
-  <div style="max-width: 600px; margin: 0 auto;">
-    <QuarterView
-      currentevents={generateFutureEventDates(8)}
-      selectedDates={writable([])}
-    />
-  </div>
-</Story>

package/dist/components/Calendar/QuarterView.stories.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QuarterView.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/QuarterView.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+HA;;;;mBAAuH;wBA3H7F,sBAAsB;6CAkHH,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}