@strapi/design-system 1.3.0-beta.1 → 1.3.0-beta.2

package/src/DatePicker/DatePicker.js

@@ -1,132 +0,0 @@
-import React, { useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import CalendarIcon from '@strapi/icons/Calendar';
-import Cross from '@strapi/icons/Cross';
-import { sizes } from '../themes/sizes';
-import { TextInput } from '../TextInput';
-import { DatePickerButton, DatePickerWrapper, IconBox } from './components';
-import { DatePickerCalendar } from './DatePickerCalendar';
-import { formatDate } from './utils/formatDate';
-import { useId } from '../helpers/useId';
-import { getDefaultLocale } from '../helpers/getDefaultLocale';
-
-export const DatePicker = ({
-  ariaLabel,
-  initialDate,
-  selectedDate,
-  onChange,
-  label,
-  locale: defaultLocale,
-  selectedDateLabel,
-  onClear,
-  clearLabel,
-  disabled,
-  id,
-  ...props
-}) => {
-  const generatedId = useId('datepicker', id);
-  const [visible, setVisible] = useState(false);
-  const inputRef = useRef(null);
-  const datePickerButtonRef = useRef(null);
-  const locale = defaultLocale || getDefaultLocale();
-  const formattedDate = selectedDate ? formatDate(selectedDate, locale) : '';
-
-  const toggleVisibility = () => {
-    if (disabled) return;
-    setVisible((prevVisible) => !prevVisible);
-  };
-
-  const handleClear = () => {
-    if (disabled) return;
-
-    onClear();
-    datePickerButtonRef.current.focus();
-  };
-
-  const handleChange = (date) => {
-    onChange(date);
-    setVisible(false);
-  };
-
-  const handleEscape = () => {
-    setVisible(false);
-  };
-
-  return (
-    <DatePickerWrapper bold={visible}>
-      <TextInput
-        ref={inputRef}
-        onClick={toggleVisibility}
-        // Prevent input from changing for now
-        onChange={() => {}}
-        value={formattedDate}
-        startAction={
-          <DatePickerButton
-            ref={datePickerButtonRef}
-            onClick={toggleVisibility}
-            aria-label={selectedDate ? selectedDateLabel(formatDate(selectedDate, locale)) : label || ariaLabel}
-            type="button"
-            aria-disabled={disabled}
-          >
-            <CalendarIcon aria-hidden={true} />
-          </DatePickerButton>
-        }
-        endAction={
-          onClear && formattedDate ? (
-            <IconBox as="button" onClick={handleClear} aria-label={clearLabel} aria-disabled={disabled}>
-              <Cross />
-            </IconBox>
-          ) : undefined
-        }
-        aria-autocomplete="none"
-        label={label}
-        aria-label={ariaLabel}
-        disabled={disabled}
-        id={generatedId}
-        {...props}
-      />
-
-      {inputRef.current && inputRef.current.inputWrapperRef && visible && (
-        <DatePickerCalendar
-          selectedDate={selectedDate}
-          initialDate={initialDate}
-          onChange={handleChange}
-          onEscape={handleEscape}
-          popoverSource={inputRef.current.inputWrapperRef}
-          label={label || ariaLabel}
-        />
-      )}
-    </DatePickerWrapper>
-  );
-};
-
-DatePicker.defaultProps = {
-  ariaLabel: undefined,
-  clearLabel: undefined,
-  disabled: false,
-  id: undefined,
-  label: undefined,
-  initialDate: new Date(),
-  onClear: undefined,
-  placeholder: undefined,
-  selectedDate: undefined,
-  size: 'M',
-};
-
-DatePicker.propTypes = {
-  ariaLabel: PropTypes.string,
-  clearLabel: PropTypes.string,
-  disabled: PropTypes.bool,
-  id: PropTypes.string,
-  initialDate: PropTypes.instanceOf(Date),
-  label: PropTypes.string,
-  locale: PropTypes.string,
-  maxDate: PropTypes.instanceOf(Date),
-  minDate: PropTypes.instanceOf(Date),
-  onChange: PropTypes.func.isRequired,
-  onClear: PropTypes.func,
-  placeholder: PropTypes.string,
-  selectedDate: PropTypes.instanceOf(Date),
-  selectedDateLabel: PropTypes.func.isRequired,
-  size: PropTypes.oneOf(Object.keys(sizes.input)),
-};

package/src/DatePicker/DatePicker.stories.mdx

@@ -1,172 +0,0 @@
-<!--- DatePicker.stories.mdx --->
-
-import { useState } from 'react';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { DatePicker } from './DatePicker';
-import { Typography } from '../Typography';
-
-<Meta title="Design System/Components/DatePicker" component={DatePicker} />
-
-# DatePicker
-
-Date pickers help users selecting a specific date from a calendar. They can be associated to a Time picker component.
-
-**Best practices**
-
-- It is possible to change the date format by changing your browser locale.
-- A Date picker can used simultaneously with a Time picker in a form.
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/DatePicker)
-
-## Imports
-
-```js
-import { DatePicker } from '@strapi/design-system/DatePicker';
-```
-
-## Usage
-
-- A Date picker is used to select an unique date. It is not possible to select a date range. It is not possible to write a date from the keyboard.
-- When the Date picker is activated, it selects today's date. However, a Date picker can have a null value via the Clear feature.
-
-<Canvas>
-  <Story name="base">
-    {() => {
-      const [date, setDate] = useState();
-      return (
-        <div>
-          <DatePicker
-            onChange={setDate}
-            selectedDate={date}
-            label="Date picker"
-            name="datepicker"
-            clearLabel={'Clear the datepicker'}
-            onClear={() => setDate(undefined)}
-            selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
-          />
-          <div style={{ marginLeft: '500px' }}>
-            <button>
-              <Typography>Button outside picker</Typography>
-            </button>
-          </div>
-        </div>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Size S
-
-TODO
-
-<Canvas>
-  <Story name="size S">
-    {() => {
-      const [date, setDate] = useState();
-      return (
-        <div>
-          <DatePicker
-            onChange={setDate}
-            selectedDate={date}
-            label="Date picker"
-            name="datepicker"
-            size="S"
-            clearLabel={'Clear the datepicker'}
-            onClear={() => setDate(undefined)}
-            selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
-          />
-          <div style={{ marginLeft: '500px' }}>
-            <button>
-              <Typography>Button outside picker</Typography>
-            </button>
-          </div>
-        </div>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Disabled
-
-<Canvas>
-  <Story name="disabled">
-    {() => {
-      const [date, setDate] = useState();
-      return (
-        <div>
-          <DatePicker
-            onChange={setDate}
-            selectedDate={date}
-            label="Date picker"
-            name="datepicker"
-            clearLabel={'Clear the datepicker'}
-            onClear={() => setDate(undefined)}
-            selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
-            disabled
-          />
-          <div style={{ marginLeft: '500px' }}>
-            <button>
-              <Typography>Button outside picker</Typography>
-            </button>
-          </div>
-        </div>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Min and Max Dates
-
-By passing in `minDate` or `maxDate` it is possible to define the range of years, the datepicker displays.
-
-<Canvas>
-  <Story name="min/ max date">
-    {() => {
-      const [date, setDate] = useState();
-      return (
-        <DatePicker
-          onChange={setDate}
-          selectedDate={date}
-          label="Date picker"
-          name="datepicker"
-          clearLabel={'Clear the datepicker'}
-          onClear={() => setDate(undefined)}
-          placeholder="03/01/1970"
-          selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
-          minDate={new Date(2000, 1, 1)}
-          maxDate={new Date(2040, 1, 1)}
-        />
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Locales
-
-<Canvas>
-  <Story name="locales">
-    {() => {
-      const [date, setDate] = useState();
-      return (
-        <DatePicker
-          onChange={setDate}
-          selectedDate={date}
-          label="Date picker"
-          name="datepicker"
-          clearLabel={'Clear the datepicker'}
-          onClear={() => setDate(undefined)}
-          placeholder="03/01/1970"
-          locale="de"
-          selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
-          minDate={new Date(2000, 1, 1)}
-          maxDate={new Date(2040, 1, 1)}
-        />
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={DatePicker} />

package/src/DatePicker/DatePickerCalendar.js

@@ -1,134 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { VisuallyHidden } from '../VisuallyHidden';
-import { DatePickerPopover } from './components';
-import { SimpleMenu, MenuItem } from '../SimpleMenu';
-import { Flex } from '../Flex';
-import { Box } from '../Box';
-import { RawTable, RawThead, RawTbody, RawTr } from '../RawTable';
-import { DatePickerTh } from './DatePickerTh';
-import { DatePickerTd } from './DatePickerTd';
-import { FocusTrap } from '../FocusTrap';
-import { getMonths, getDayOfWeek, generateWeeks, getYears, formatDate } from './utils';
-
-export const DatePickerCalendar = ({
-  selectedDate,
-  initialDate,
-  popoverSource,
-  onChange,
-  label,
-  minDate,
-  maxDate,
-  onEscape,
-}) => {
-  const [date, setDate] = useState(initialDate);
-  const [weeks, activeRow, activeCol] = generateWeeks(date, selectedDate);
-  const { sun, mon, tue, wed, thu, fri, sat } = getDayOfWeek();
-  const months = getMonths();
-  const years = getYears(minDate, maxDate);
-
-  useEffect(() => {
-    if (selectedDate) {
-      setDate(selectedDate);
-    }
-  }, [selectedDate]);
-
-  const handleMonthChange = (month) => {
-    const updatedDate = new Date(date);
-    updatedDate.setMonth(months.indexOf(month));
-    setDate(updatedDate);
-  };
-
-  const handleYearChange = (year) => {
-    const updatedDate = new Date(date);
-    updatedDate.setFullYear(year);
-    setDate(updatedDate);
-  };
-
-  return (
-    <DatePickerPopover source={popoverSource} role="dialog" aria-modal="true" aria-label={label} spacing={4}>
-      <FocusTrap onEscape={onEscape}>
-        <Box padding={4}>
-          <Box paddingBottom={4} paddingLeft={2} paddingRight={2}>
-            <Flex>
-              <SimpleMenu label={months[date.getMonth()]}>
-                {months.map((month) => (
-                  <MenuItem key={month} onClick={() => handleMonthChange(month)}>
-                    {month}
-                  </MenuItem>
-                ))}
-              </SimpleMenu>
-              <Box paddingLeft={2}>
-                <SimpleMenu label={date.getFullYear()}>
-                  {years.map((year) => (
-                    <MenuItem key={year} onClick={() => handleYearChange(year)}>
-                      {year}
-                    </MenuItem>
-                  ))}
-                </SimpleMenu>
-              </Box>
-            </Flex>
-          </Box>
-          <RawTable colCount={7} rowCount={weeks.length + 1} initialCol={activeCol} initialRow={activeRow} role="grid">
-            <RawThead>
-              <RawTr aria-rowindex={1}>
-                <DatePickerTh>{sun}</DatePickerTh>
-                <DatePickerTh>{mon}</DatePickerTh>
-                <DatePickerTh>{tue}</DatePickerTh>
-                <DatePickerTh>{wed}</DatePickerTh>
-                <DatePickerTh>{thu}</DatePickerTh>
-                <DatePickerTh>{fri}</DatePickerTh>
-                <DatePickerTh>{sat}</DatePickerTh>
-              </RawTr>
-            </RawThead>
-            <RawTbody>
-              {weeks.map((week, index) => (
-                <RawTr key={`week-${index}`}>
-                  {week.map(({ date, outsideMonth, isSelected }) => {
-                    return (
-                      <DatePickerTd
-                        key={`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`}
-                        outsideMonth={outsideMonth}
-                        onSelectDay={() => onChange(date)}
-                        isSelected={isSelected}
-                      >
-                        <span aria-hidden={true}>{date.getDate()}</span>
-                        <VisuallyHidden>
-                          <span>{formatDate(date)}</span>
-                        </VisuallyHidden>
-                      </DatePickerTd>
-                    );
-                  })}
-                </RawTr>
-              ))}
-            </RawTbody>
-          </RawTable>
-        </Box>
-      </FocusTrap>
-    </DatePickerPopover>
-  );
-};
-
-DatePickerCalendar.defaultProps = { selectedDate: undefined, initialDate: new Date() };
-DatePickerCalendar.propTypes = {
-  initialDate: PropTypes.instanceOf(Date),
-  label: PropTypes.string.isRequired,
-
-  /*
-   * Maximum year, that can be selected through the year select
-   */
-
-  maxDate: PropTypes.instanceOf(Date),
-
-  /*
-   * Minimum year, that can be selected through the year select
-   */
-
-  minDate: PropTypes.instanceOf(Date),
-  onChange: PropTypes.func.isRequired,
-  onEscape: PropTypes.func.isRequired,
-  popoverSource: PropTypes.shape({
-    current: (typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)).isRequired,
-  }).isRequired,
-  selectedDate: PropTypes.instanceOf(Date),
-};

package/src/DatePicker/DatePickerTd.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { RawTd } from '../RawTable';
-import { Typography } from '../Typography';
-
-const DatePickerCellButton = styled.button`
-  border: none;
-  background: ${({ theme, isSelected }) => (isSelected ? theme.colors.primary100 : theme.colors.neutral0)};
-  height: ${32 / 16}rem;
-  text-align: center;
-  width: ${32 / 16}rem;
-  border-radius: ${({ theme }) => theme.borderRadius};
-
-  // Trick to prevent the outline from overflowing because of the general outline-offset
-  outline-offset: -2px;
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.primary100};
-  }
-
-  &:hover > ${Typography} {
-    color: ${({ theme }) => theme.colors.primary600};
-  }
-`;
-
-export const DatePickerTd = ({ children, outsideMonth, onSelectDay, isSelected, ...props }) => {
-  const textColor = isSelected ? 'primary600' : outsideMonth ? 'neutral600' : 'neutral900';
-
-  return (
-    <RawTd {...props}>
-      <DatePickerCellButton tabIndex={-1} onClick={onSelectDay} isSelected={isSelected} type="button">
-        <Typography variant="pi" textColor={textColor} fontWeight={isSelected ? 'bold' : null}>
-          {children}
-        </Typography>
-      </DatePickerCellButton>
-    </RawTd>
-  );
-};
-
-DatePickerTd.defaultProps = {
-  isSelected: false,
-  outsideMonth: false,
-};
-
-DatePickerTd.propTypes = {
-  children: PropTypes.node.isRequired,
-  isSelected: PropTypes.bool,
-  onSelectDay: PropTypes.func.isRequired,
-  outsideMonth: PropTypes.bool,
-};

package/src/DatePicker/DatePickerTh.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { RawTh } from '../RawTable';
-import { Typography } from '../Typography';
-import { VisuallyHidden } from '../VisuallyHidden';
-import { Flex } from '../Flex';
-
-const DatePickerThWrapper = styled(RawTh)`
-  // Trick to prevent the outline from overflowing because of the general outline-offset
-  outline-offset: -2px;
-  border-radius: ${({ theme }) => theme.borderRadius};
-  text-transform: capitalize;
-`;
-
-const DatePickerThRow = styled(Flex)`
-  height: ${24 / 16}rem;
-  width: ${32 / 16}rem;
-`;
-
-export const DatePickerTh = ({ children, ...props }) => {
-  return (
-    <DatePickerThWrapper {...props}>
-      <DatePickerThRow justifyContent="center">
-        <Typography variant="pi" fontWeight="bold" color="neutral800" aria-hidden>
-          {children.substr(0, 2)}
-        </Typography>
-
-        <VisuallyHidden>
-          <span>{children}</span>
-        </VisuallyHidden>
-      </DatePickerThRow>
-    </DatePickerThWrapper>
-  );
-};
-
-DatePickerTh.propTypes = {
-  children: PropTypes.string.isRequired,
-};

package/src/DatePicker/__tests__/DatePicker.e2e.js

@@ -1,94 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test, expect } from '@playwright/test';
-
-test.describe.parallel('DatePicker', () => {
-  test.describe('light mode', () => {
-    test.describe('disabled', () => {
-      test.beforeEach(async ({ page }) => {
-        // This is the URL of the Storybook Iframe
-        await page.goto('/iframe.html?id=design-system-components-datepicker--disabled&viewMode=story');
-        await injectAxe(page);
-      });
-
-      test('triggers axe on the document', async ({ page }) => {
-        await checkA11y(page);
-      });
-
-      // TODO : Can't fire page.click on disabled element. To fix
-      // it('does not open the dialog when clicking the input', async () => {
-      //   await page.click('input');
-
-      //   expect(await page.$('[role="dialog"]')).toBeFalsy();
-      // });
-    });
-
-    test.describe.parallel('base', () => {
-      test.beforeEach(async ({ page }) => {
-        // This is the URL of the Storybook Iframe
-        await page.goto('/iframe.html?id=design-system-components-datepicker--base&viewMode=story');
-        await injectAxe(page);
-      });
-
-      test('triggers axe on the document', async ({ page }) => {
-        await checkA11y(page);
-      });
-
-      test('triggers axe on the document with the dropdown open', async ({ page }) => {
-        await page.click('input');
-        await checkA11y(page);
-      });
-
-      test('selects a value and closes the dialog', async ({ page }) => {
-        await page.click('input');
-        expect(await page.$('[role="dialog"]')).toBeTruthy();
-
-        await page.click(':nth-match(button[aria-haspopup], 1)');
-        await page.click('text="January"');
-
-        await page.click(':nth-match(button[aria-haspopup], 2)');
-        await page.click('text="2021"');
-
-        await page.click('text="14"');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('1/14/2021');
-        expect(await page.$('[role="dialog"]')).toBeFalsy();
-      });
-
-      test('clears the input and sends the focus back to the calendar button when pressing the clear button', async ({
-        page,
-      }) => {
-        await page.click('input');
-        expect(await page.$('[role="dialog"]')).toBeTruthy();
-
-        await page.click(':nth-match(button[aria-haspopup], 1)');
-        await page.click('text="January"');
-        await page.click(':nth-match(button[aria-haspopup], 2)');
-        await page.click('text="2021"');
-        await page.click('text="14"');
-
-        await page.click('[aria-label="Clear the datepicker"]');
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('');
-        await expect(page.locator('[aria-label="Date picker"]')).toBeFocused();
-      });
-    });
-  });
-
-  test.describe('dark mode', () => {
-    test('base A11y', async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-datepicker--base&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-
-    test('disabled A11y', async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-datepicker--disabled&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-  });
-});

package/src/DatePicker/__tests__/DatePicker.spec.js

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-
-import { DatePicker } from '../DatePicker';
-
-import { lightTheme } from '../../themes';
-import { ThemeProvider } from '../../ThemeProvider';
-
-describe('DatePicker', () => {
-  describe('Locale prop', () => {
-    const renderDate = (locale) =>
-      render(
-        <ThemeProvider theme={lightTheme}>
-          <DatePicker
-            label="date"
-            locale={locale}
-            selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
-            selectedDate={new Date('Tue Sep 06 2022')}
-            onChange={() => null}
-          />
-        </ThemeProvider>,
-      );
-
-    it('should format by EN locale by default', () => {
-      renderDate();
-
-      const input = screen.getByRole('textbox');
-
-      expect(input.value).toMatchInlineSnapshot('"9/6/2022"');
-    });
-
-    it('should format by the DE locale when passed', () => {
-      renderDate('de-DE');
-
-      const input = screen.getByRole('textbox');
-
-      expect(input.value).toMatchInlineSnapshot('"6.9.2022"');
-    });
-  });
-});

package/src/DatePicker/compareDates.js

@@ -1,9 +0,0 @@
-export const isDateEqual = (date1, date2) => {
-  if (!date1 || !date2) return false;
-
-  return (
-    date1.getFullYear() === date2.getFullYear() &&
-    date1.getMonth() === date2.getMonth() &&
-    date1.getDate() === date2.getDate()
-  );
-};