@lion/ui 0.0.1

package/components/calendar/src/calendarStyle.js

@@ -0,0 +1,85 @@
+import { css } from 'lit';
+
+export const calendarStyle = css`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .calendar {
+    display: block;
+  }
+
+  .calendar__navigation {
+    padding: 0 8px;
+  }
+
+  .calendar__navigation__month,
+  .calendar__navigation__year {
+    display: flex;
+  }
+
+  .calendar__navigation-heading {
+    margin: 0.5em 0;
+  }
+
+  .calendar__previous-button,
+  .calendar__next-button {
+    background-color: #fff;
+    border: 0;
+    padding: 0;
+    min-width: 40px;
+    min-height: 40px;
+  }
+
+  .calendar__grid {
+    width: 100%;
+    padding: 8px 8px;
+  }
+
+  .calendar__weekday-header {
+  }
+
+  .calendar__day-cell {
+    text-align: center;
+  }
+
+  .calendar__day-button {
+    background-color: #fff;
+    border: 0;
+    color: black;
+    padding: 0;
+    min-width: 40px;
+    min-height: 40px;
+  }
+
+  .calendar__day-button__text {
+    pointer-events: none;
+  }
+
+  .calendar__day-button[today] {
+    text-decoration: underline;
+  }
+
+  .calendar__day-button[selected] {
+    background: #ccc;
+  }
+
+  .calendar__day-button[previous-month],
+  .calendar__day-button[next-month] {
+    color: rgb(115, 115, 115);
+  }
+
+  .calendar__day-button:hover {
+    border: 1px solid green;
+  }
+
+  .calendar__day-button[disabled] {
+    background-color: #fff;
+    color: #eee;
+    outline: none;
+  }
+`;

package/components/calendar/src/utils/createDay.js

@@ -0,0 +1,38 @@
+/**
+ * @param {Date} date,
+ * @returns {import('../../types/day.js').Day} day
+ */
+export function createDay(
+  date = new Date(),
+  {
+    weekOrder = 0,
+    central = false,
+    startOfWeek = false,
+    selected = false,
+    previousMonth = false,
+    currentMonth = false,
+    nextMonth = false,
+    past = false,
+    today = false,
+    future = false,
+    disabled = false,
+  } = {},
+) {
+  return {
+    weekOrder,
+    central,
+    date,
+    startOfWeek,
+    selected,
+    previousMonth,
+    currentMonth,
+    nextMonth,
+    past,
+    today,
+    future,
+    disabled,
+    tabindex: '-1',
+    ariaPressed: 'false',
+    ariaCurrent: undefined,
+  };
+}

package/components/calendar/src/utils/createMonth.js

@@ -0,0 +1,33 @@
+import { createWeek } from './createWeek.js';
+
+/**
+ *
+ * @param {Date} date
+ * @param {Object} opts
+ * @param {number} [opts.firstDayOfWeek]
+ * @returns {import('../../types/day.js').Month}
+ */
+export function createMonth(date, { firstDayOfWeek = 0 } = {}) {
+  if (Object.prototype.toString.call(date) !== '[object Date]') {
+    throw new Error('invalid date provided');
+  }
+  const firstDayOfMonth = new Date(date);
+  firstDayOfMonth.setDate(1);
+  const monthNumber = firstDayOfMonth.getMonth();
+  const weekOptions = { firstDayOfWeek };
+
+  const month = {
+    /** @type {{days: import('../../types/day.js').Day[]}[]} */
+    weeks: [],
+  };
+
+  let nextWeek = createWeek(firstDayOfMonth, weekOptions);
+  do {
+    month.weeks.push(nextWeek);
+    const firstDayOfNextWeek = new Date(nextWeek.days[6].date); // last day of current week
+    firstDayOfNextWeek.setDate(firstDayOfNextWeek.getDate() + 1); // make it first day of next week
+    nextWeek = createWeek(firstDayOfNextWeek, weekOptions);
+  } while (nextWeek.days[0].date.getMonth() === monthNumber);
+
+  return month;
+}

package/components/calendar/src/utils/createMultipleMonth.js

@@ -0,0 +1,32 @@
+import { createMonth } from './createMonth.js';
+
+/**
+ *
+ * @param {Date} date
+ * @return {{months: import('../../types/day.js').Month[]}}
+ */
+export function createMultipleMonth(
+  date,
+  { firstDayOfWeek = 0, pastMonths = 0, futureMonths = 0 } = {},
+) {
+  const multipleMonths = {
+    /** @type {{weeks: {days: import('../../types/day.js').Day[]}[]}[]} */
+    months: [],
+  };
+
+  for (let i = pastMonths; i > 0; i -= 1) {
+    const pastDate = new Date(date);
+    pastDate.setMonth(pastDate.getMonth() - i);
+    multipleMonths.months.push(createMonth(pastDate, { firstDayOfWeek }));
+  }
+
+  multipleMonths.months.push(createMonth(date, { firstDayOfWeek }));
+
+  for (let i = 0; i < futureMonths; i += 1) {
+    const futureDate = new Date(date);
+    futureDate.setMonth(futureDate.getMonth() + (i + 1));
+    multipleMonths.months.push(createMonth(futureDate, { firstDayOfWeek }));
+  }
+
+  return multipleMonths;
+}

package/components/calendar/src/utils/createWeek.js

@@ -0,0 +1,37 @@
+import { createDay } from './createDay.js';
+
+/**
+ * @param {Date} date
+ * @param {Object} opts
+ * @param {number} [opts.firstDayOfWeek]
+ * @returns {import('../../types/day.js').Week}
+ */
+export function createWeek(date, { firstDayOfWeek = 0 } = {}) {
+  if (Object.prototype.toString.call(date) !== '[object Date]') {
+    throw new Error('invalid date provided');
+  }
+  let weekStartDate = new Date(date);
+
+  const tmpDate = new Date(date);
+  while (tmpDate.getDay() !== firstDayOfWeek) {
+    tmpDate.setDate(tmpDate.getDate() - 1);
+    weekStartDate = new Date(tmpDate);
+  }
+
+  const week = {
+    /** @type {import('../../types/day.js').Day[]} */
+    days: [],
+  };
+  for (let i = 0; i < 7; i += 1) {
+    if (i !== 0) {
+      weekStartDate.setDate(weekStartDate.getDate() + 1);
+    }
+    week.days.push(
+      createDay(new Date(weekStartDate), {
+        weekOrder: i,
+        startOfWeek: i === 0,
+      }),
+    );
+  }
+  return week;
+}

package/components/calendar/src/utils/dataTemplate.js

@@ -0,0 +1,55 @@
+import { html } from 'lit';
+import { dayTemplate as defaultDayTemplate } from './dayTemplate.js';
+
+/**
+ * @param {{months: {weeks: {days: import('../../types/day.js').Day[]}[]}[]}} data
+ * @param {{ weekdaysShort: string[], weekdays: string[], monthsLabels?: string[], dayTemplate?: (day: import('../../types/day.js').Day, { weekdays, monthsLabels }?: any) => import('lit').TemplateResult }} opts
+ */
+export function dataTemplate(
+  data,
+  { weekdaysShort, weekdays, monthsLabels, dayTemplate = defaultDayTemplate },
+) {
+  return html`
+    <div id="js-content-wrapper">
+      ${data.months.map(
+        month => html`
+          <table
+            role="grid"
+            data-wrap-cols
+            aria-readonly="true"
+            class="calendar__grid"
+            aria-labelledby="month year"
+          >
+            <thead>
+              <tr role="row">
+                ${weekdaysShort.map(
+                  (header, i) => html`
+                    <th
+                      role="columnheader"
+                      class="calendar__weekday-header"
+                      scope="col"
+                      aria-label="${weekdays[i]}"
+                    >
+                      ${header}
+                    </th>
+                  `,
+                )}
+              </tr>
+            </thead>
+            <tbody>
+              ${month.weeks.map(
+                week => html`
+                  <tr role="row">
+                    ${week.days.map(day =>
+                      dayTemplate(day, { weekdaysShort, weekdays, monthsLabels }),
+                    )}
+                  </tr>
+                `,
+              )}
+            </tbody>
+          </table>
+        `,
+      )}
+    </div>
+  `;
+}

package/components/calendar/src/utils/dayTemplate.js

@@ -0,0 +1,86 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+const defaultMonthLabels = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+const firstWeekDays = [1, 2, 3, 4, 5, 6, 7];
+const lastDaysOfYear = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+/**
+ *
+ * @param {import('../../types/day.js').Day} day
+ * @param {{ weekdays: string[], monthsLabels?: string[] }} opts
+ */
+export function dayTemplate(day, { weekdays, monthsLabels = defaultMonthLabels }) {
+  const dayNumber = day.date.getDate();
+  const monthName = monthsLabels[day.date.getMonth()];
+  const year = day.date.getFullYear();
+  const weekdayName = day.weekOrder ? weekdays[day.weekOrder] : weekdays[0];
+
+  const firstDay = dayNumber === 1;
+  const endOfFirstWeek = day.weekOrder === 6 && firstWeekDays.includes(dayNumber);
+  const startOfFirstFullWeek = day.startOfWeek && firstWeekDays.includes(dayNumber);
+
+  if (year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)) {
+    lastDaysOfYear[1] = 29;
+  }
+  const lastDayNumber = lastDaysOfYear[day.date.getMonth()];
+  const lastWeekDays = [];
+  for (let i = lastDayNumber; i >= lastDayNumber - 7; i -= 1) {
+    lastWeekDays.push(i);
+  }
+  const endOfLastFullWeek = day.weekOrder === 6 && lastWeekDays.includes(dayNumber);
+  const startOfLastWeek = day.startOfWeek && lastWeekDays.includes(dayNumber);
+  const lastDay = lastDayNumber === dayNumber;
+
+  return html`
+    <td
+      role="gridcell"
+      class="calendar__day-cell"
+      ?current-month=${day.currentMonth}
+      ?first-day=${firstDay}
+      ?end-of-first-week=${endOfFirstWeek}
+      ?start-of-first-full-week=${startOfFirstFullWeek}
+      ?end-of-last-full-week=${endOfLastFullWeek}
+      ?start-of-last-week=${startOfLastWeek}
+      ?last-day=${lastDay}
+    >
+      <button
+        .date=${day.date}
+        class="calendar__day-button"
+        tabindex=${ifDefined(Number(day.tabindex))}
+        aria-label=${`${dayNumber} ${monthName} ${year} ${weekdayName}`}
+        aria-pressed=${
+          /** @type {'true'|'false'|'mixed'|'undefined'} */ (ifDefined(day.ariaPressed))
+        }
+        aria-current=${
+          /** @type {'page'|'step'|'location'|'date'|'time'|'true'|'false'} */ (
+            ifDefined(day.ariaCurrent)
+          )
+        }
+        ?disabled=${day.disabled}
+        ?selected=${day.selected}
+        ?past=${day.past}
+        ?today=${day.today}
+        ?future=${day.future}
+        ?previous-month=${day.previousMonth}
+        ?current-month=${day.currentMonth}
+        ?next-month=${day.nextMonth}
+      >
+        <span class="calendar__day-button__text"> ${day.date.getDate()} </span>
+      </button>
+    </td>
+  `;
+}

package/components/calendar/src/utils/getFirstDayNextMonth.js

@@ -0,0 +1,13 @@
+/**
+ * Gives the first day of the next month
+ *
+ * @param {Date} date
+ *
+ * @returns {Date}
+ */
+export function getFirstDayNextMonth(date) {
+  const result = new Date(date);
+  result.setDate(1);
+  result.setMonth(date.getMonth() + 1);
+  return result;
+}

package/components/calendar/src/utils/getLastDayPreviousMonth.js

@@ -0,0 +1,12 @@
+/**
+ * Gives the last day of the previous month
+ *
+ * @param {Date} date
+ *
+ * @returns {Date}
+ */
+export function getLastDayPreviousMonth(date) {
+  const previous = new Date(date);
+  previous.setDate(0);
+  return new Date(previous);
+}

package/components/calendar/src/utils/isSameDate.js

@@ -0,0 +1,17 @@
+/**
+ * Compares if two days are the same
+ *
+ * @param {Date} day1
+ * @param {Date} day2
+ *
+ * @returns {boolean}
+ */
+export function isSameDate(day1, day2) {
+  return (
+    day1 instanceof Date &&
+    day2 instanceof Date &&
+    day1.getDate() === day2.getDate() &&
+    day1.getMonth() === day2.getMonth() &&
+    day1.getFullYear() === day2.getFullYear()
+  );
+}

package/components/calendar/test/demos.screenshots-test.js

@@ -0,0 +1,87 @@
+// @ts-nocheck
+/* globals capture getStoryPage */
+
+const selector = 'lion-calendar';
+
+describe('others-calendar', () => {
+  it('main', async () => {
+    const id = 'others-calendar--main';
+    const page = await getStoryPage(id);
+    await capture({ selector, id, page });
+  });
+  it('selected-date', async () => {
+    const id = 'others-calendar--selected-date';
+    const page = await getStoryPage(id);
+    await capture({ selector, id, page });
+  });
+  it('central-date', async () => {
+    const id = 'others-calendar--central-date';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('controlling-focus', async () => {
+    const id = 'others-calendar--controlling-focus';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await page.waitForSelector('button');
+    await page.evaluate(() => {
+      document.querySelector('button').click();
+    });
+    await capture({ selector, id, page });
+  });
+  it('providing-lower-limit', async () => {
+    const id = 'others-calendar--providing-lower-limit';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('providing-higher-limit', async () => {
+    const id = 'others-calendar--providing-higher-limit';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('disabled-dates', async () => {
+    const id = 'others-calendar--disabled-dates';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('combined-disabled-datess', async () => {
+    const id = 'others-calendar--combined-disabled-dates';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+});