@simplybusiness/mobius 3.10.0 → 3.11.1

package/src/components/DatePicker/CalendarCell.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import { AriaCalendarCellProps, useCalendarCell } from "@react-aria/calendar";
-import { useFocusRing } from "@react-aria/focus";
-import { CalendarState } from "@react-stately/calendar";
-import clsx from "clsx";
-import { useRef } from "react";
-
-export interface CalendarCellProps extends AriaCalendarCellProps {
-  state: CalendarState;
-}
-
-export function CalendarCell({ state, date }: CalendarCellProps) {
-  const ref = useRef<HTMLDivElement>(null);
-  const {
-    cellProps,
-    buttonProps,
-    isSelected,
-    isOutsideVisibleRange,
-    isDisabled,
-    isUnavailable,
-    formattedDate,
-  } = useCalendarCell({ date }, state, ref);
-
-  const { focusProps, isFocusVisible } = useFocusRing();
-
-  const classes = clsx("mobius/CalendarCell", {
-    "--is-selected": isSelected,
-    "--is-outside-visible-range": isOutsideVisibleRange,
-    "--is-disabled": isDisabled,
-    "--is-unavailable": isUnavailable,
-    "--is-focused": isFocusVisible,
-  });
-
-  return (
-    <td className={classes} {...cellProps}>
-      <div
-        {...buttonProps}
-        ref={ref}
-        hidden={isOutsideVisibleRange}
-        className="mobius/CalendarCellInner"
-        {...focusProps}
-      >
-        {formattedDate}
-      </div>
-    </td>
-  );
-}

package/src/components/DatePicker/CalendarGrid.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import {
-  AriaCalendarGridProps,
-  CalendarProps,
-  useCalendarGrid,
-} from "@react-aria/calendar";
-import {
-  startOfWeek,
-  getWeeksInMonth,
-  CalendarDate,
-} from "@internationalized/date";
-import { useLocale } from "@react-aria/i18n";
-import { CalendarState } from "@react-stately/calendar";
-import { CalendarCell } from "./CalendarCell";
-
-export interface CalendarGridProps
-  extends AriaCalendarGridProps,
-    CalendarProps<CalendarDate> {
-  state: CalendarState;
-}
-
-export function CalendarGrid({ state, ...props }: CalendarGridProps) {
-  const { locale } = useLocale();
-  const { gridProps, headerProps, weekDays } = useCalendarGrid(props, state);
-
-  // Find the start date of the grid, which is the beginning
-  // of the week the month starts in. Also get the number of
-  // weeks in the month so we can render the proper number of rows.
-  const monthStart = startOfWeek(state.visibleRange.start, locale);
-  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
-
-  return (
-    <table className="mobius/CalendarGrid" {...gridProps}>
-      <thead {...headerProps} className="mobius/CalendarGridHead">
-        <tr>
-          {weekDays.map((day, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <th className="mobius/CalendarGridHeadCell" key={index}>
-              {day}
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody className="mobius/CalendarGridBody">
-        {[...new Array(weeksInMonth).keys()].map(weekIndex => (
-          <tr key={weekIndex}>
-            {[...new Array(7).keys()].map(dayIndex => (
-              <CalendarCell
-                key={dayIndex}
-                state={state}
-                date={monthStart.add({ weeks: weekIndex, days: dayIndex })}
-              />
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}

package/src/components/DatePicker/DateField.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import { useLocale } from "@react-aria/i18n";
-import { useDateFieldState } from "@react-stately/datepicker";
-import { AriaDateFieldProps, useDateField } from "@react-aria/datepicker";
-import { createCalendar, DateValue } from "@internationalized/date";
-import { useRef } from "react";
-import { DateSegment } from "./DateSegment";
-
-export interface DateFieldProps extends AriaDateFieldProps<DateValue> {
-  className: string;
-}
-
-export function DateField(props: DateFieldProps) {
-  const { label, className } = props;
-  const { locale } = useLocale();
-  const state = useDateFieldState({
-    ...props,
-    locale,
-    createCalendar,
-  });
-
-  const ref = useRef<HTMLDivElement | null>(null);
-  const { labelProps, fieldProps } = useDateField(props, state, ref);
-
-  // ID is duplicated with DateFieldGroup - Spectrum bug?
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { id, ...filteredFieldProps } = fieldProps;
-
-  return (
-    <div className={className}>
-      <span {...labelProps}>{label}</span>
-      <div {...filteredFieldProps} ref={ref} className="mobius/DateSegments">
-        {state.segments.map((segment, i) => (
-          <DateSegment
-            // eslint-disable-next-line react/no-array-index-key
-            key={i}
-            segment={segment}
-            state={state}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/components/DatePicker/DatePicker.mdx

@@ -1,509 +0,0 @@
-import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
-import { DatePicker } from "./DatePicker";
-import { Button } from "../Button";
-import { parseDate } from "@internationalized/date";
-import { I18nProvider } from "@react-aria/i18n";
-import * as DatePickerStories from "./DatePicker.stories";
-
-<Meta of={DatePickerStories} />
-
-# DatePicker
-
-DatePicker allows you to display a date picker.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { DatePicker } from "@simplybusiness/mobius";
-```
-
-## Normal
-
-<Story of={DatePickerStories.Normal} />
-
-{/* prettier-ignore */}
-```jsx
-import { DatePicker } from "@simplybusiness/mobius";
-import { I18nProvider } from "@react-aria/i18n";
-import { parseDate } from "@internationalized/date";
-
-<I18nProvider locale="en-GB">
-  <DatePicker minValue={parseDate("2022-05-05")} label="Start date" />
-</I18nProvider>
-```
-
-# Localising
-
-## Props
-
-<ArgTypes of={DatePicker} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a DatePicker:
-
-### DateField
-
-```html
-<div class="mobius/DateFieldGroup">
-  <div class="mobius/DateField">
-    <span></span>
-    <div role="presentation" class="mobius/DateSegments">
-      <div class="mobius/DateSegment --is-placeholder">mm</div>
-      <div aria-hidden="true" class="mobius/DateSegment --is-literal">/</div>
-      <div class="mobius/DateSegment --is-placeholder">dd</div>
-      <div aria-hidden="true" class="mobius/DateSegment --is-literal">/</div>
-      <div class="mobius/DateSegment --is-placeholder">yyyy</div>
-    </div>
-  </div>
-  <button
-    type="button"
-    class="mobius mobius/Button --variant-secondary --size-medium mobius/DateFieldButton"
-  >
-    <span>
-      <div>Pick date</div>
-    </span>
-  </button>
-</div>
-```
-
-### Calendar
-
-```html
-<div class="mobius/Calendar">
-  <div class="mobius/CalendarHeader">
-    <button
-      type="button"
-      aria-label="Previous"
-      class="mobius mobius/CalendarButton mobius/CalendarPreviousButton"
-    >
-      <div>&lt;</div>
-    </button>
-    <h2 class="mobius/CalendarTitle">June 2022</h2>
-    <button
-      type="button"
-      aria-label="Next"
-      class="mobius mobius/CalendarButton mobius/CalendarNextButton"
-    >
-      <div>&gt;</div>
-    </button>
-  </div>
-  <table class="mobius/CalendarGrid">
-    <thead aria-hidden="true" class="mobius/CalendarGridHead">
-      <tr>
-        <th class="mobius/CalendarGridHeadCell">S</th>
-        <th class="mobius/CalendarGridHeadCell">M</th>
-        <th class="mobius/CalendarGridHeadCell">T</th>
-        <th class="mobius/CalendarGridHeadCell">W</th>
-        <th class="mobius/CalendarGridHeadCell">T</th>
-        <th class="mobius/CalendarGridHeadCell">F</th>
-        <th class="mobius/CalendarGridHeadCell">S</th>
-      </tr>
-    </thead>
-    <tbody class="mobius/CalendarGridBody">
-      <tr>
-        <td
-          class="mobius/CalendarCell --is-outside-visible-range --is-disabled"
-          role="gridcell"
-          aria-disabled="true"
-        >
-          <div
-            role="button"
-            aria-disabled="true"
-            aria-label="Sunday, May 29, 2022"
-            class="mobius/CalendarCellInner"
-            hidden=""
-          >
-            29
-          </div>
-        </td>
-        <td
-          class="mobius/CalendarCell --is-outside-visible-range --is-disabled"
-          role="gridcell"
-          aria-disabled="true"
-        >
-          <div
-            role="button"
-            aria-disabled="true"
-            aria-label="Monday, May 30, 2022"
-            class="mobius/CalendarCellInner"
-            hidden=""
-          >
-            30
-          </div>
-        </td>
-        <td
-          class="mobius/CalendarCell --is-outside-visible-range --is-disabled"
-          role="gridcell"
-          aria-disabled="true"
-        >
-          <div
-            role="button"
-            aria-disabled="true"
-            aria-label="Tuesday, May 31, 2022"
-            class="mobius/CalendarCellInner"
-            hidden=""
-          >
-            31
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Wednesday, June 1, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            1
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Thursday, June 2, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            2
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Friday, June 3, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            3
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Saturday, June 4, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            4
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Sunday, June 5, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            5
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Monday, June 6, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            6
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Tuesday, June 7, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            7
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Wednesday, June 8, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            8
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Thursday, June 9, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            9
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Friday, June 10, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            10
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Saturday, June 11, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            11
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Sunday, June 12, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            12
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Monday, June 13, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            13
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Tuesday, June 14, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            14
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Wednesday, June 15, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            15
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Thursday, June 16, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            16
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Friday, June 17, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            17
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Saturday, June 18, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            18
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Sunday, June 19, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            19
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Monday, June 20, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            20
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="0"
-            role="button"
-            aria-label="Today, Tuesday, June 21, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            21
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Wednesday, June 22, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            22
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Thursday, June 23, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            23
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Friday, June 24, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            24
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Saturday, June 25, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            25
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Sunday, June 26, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            26
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Monday, June 27, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            27
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Tuesday, June 28, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            28
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Wednesday, June 29, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            29
-          </div>
-        </td>
-        <td class="mobius/CalendarCell" role="gridcell">
-          <div
-            tabindex="-1"
-            role="button"
-            aria-label="Thursday, June 30, 2022"
-            class="mobius/CalendarCellInner"
-          >
-            30
-          </div>
-        </td>
-        <td
-          class="mobius/CalendarCell --is-outside-visible-range --is-disabled"
-          role="gridcell"
-          aria-disabled="true"
-        >
-          <div
-            role="button"
-            aria-disabled="true"
-            aria-label="Friday, July 1, 2022"
-            class="mobius/CalendarCellInner"
-            hidden=""
-          >
-            1
-          </div>
-        </td>
-        <td
-          class="mobius/CalendarCell --is-outside-visible-range --is-disabled"
-          role="gridcell"
-          aria-disabled="true"
-        >
-          <div
-            role="button"
-            aria-disabled="true"
-            aria-label="Saturday, July 2, 2022"
-            class="mobius/CalendarCellInner"
-            hidden=""
-          >
-            2
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-```
-
-Class names are augmented with the following flags if true:
-
-- \--is-valid
-- \--is-invalid
-- \--is-required
-- \--is-optional
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/DatePicker) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta } from "@storybook/react";
-import { parseDate } from "@internationalized/date";
-import { I18nProvider } from "@react-aria/i18n";
-import { DatePicker, DatePickerProps } from "./DatePicker";
-
-export default {
-  title: "Forms/DatePicker",
-  component: DatePicker,
-  argTypes: {
-    locale: {
-      control: { type: "select" },
-      options: ["", "en-GB", "en-US"],
-    },
-  },
-};
-
-export const Normal: Meta<typeof DatePicker> = {
-  render: (args: DatePickerProps) => (
-    <DatePicker minValue={parseDate("2022-05-05")} {...args} />
-  ),
-  args: {
-    label: "Start date",
-    isRequired: false,
-  },
-  decorators: [
-    (Story, context) => (
-      <I18nProvider locale={context.allArgs.locale}>
-        <Story />
-      </I18nProvider>
-    ),
-  ],
-};