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

package/src/DatePicker/components.js

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+import { InputWrapper } from '../Field/FieldInput';
+import { Popover } from '../Popover';
+import { Box } from '../Box';
+
+export const DatePickerPopover = styled(Popover)`
+  max-height: ${3 * 6}rem;
+  overflow: hidden;
+`;
+
+export const DatePickerButton = styled.button`
+  border: none;
+  background: transparent;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  cursor: ${(props) => (props['aria-disabled'] ? 'not-allowed' : undefined)};
+
+  & svg path {
+    fill: ${({ theme }) => theme.colors.neutral500};
+  }
+`;
+
+export const DatePickerWrapper = styled.div`
+  ${({ bold, theme }) =>
+    bold
+      ? `& ${InputWrapper} {
+  border: 1px solid ${theme.colors.primary600};
+}`
+      : undefined}
+`;
+
+export const IconBox = styled(Box)`
+  background: transparent;
+  border: none;
+  position: relative;
+  z-index: 1;
+
+  svg {
+    height: ${11 / 16}rem;
+    width: ${11 / 16}rem;
+  }
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral600};
+  }
+`;

package/src/DatePicker/index.js

@@ -0,0 +1 @@
+export * from './DatePicker';

package/src/DatePicker/utils/formatDate.js

@@ -0,0 +1,5 @@
+export const formatDate = (date, locale) => {
+  const langFormatter = new Intl.DateTimeFormat(locale);
+
+  return langFormatter.format(date);
+};

package/src/DatePicker/utils/generateWeeks.js

@@ -0,0 +1,58 @@
+import { isDateEqual } from '../compareDates';
+
+const CELL_COUNT = 7 * 6;
+
+/**
+ * This function output a matrix of 7x6 representing weeks and days in which each cell represents one day
+ * It starts by positioning the first day of the "date" month argument in the first row, at the good "day" position (monday, tuesday etc...)
+ * It then resolves the offset days and return the position of the "selectedDate" (if there's one)
+ * The output is: [weeks, activeRow, activeCol] where "weeks" is the matrix and "activeRow" and "activeCol" the coordinate of the select cell
+ */
+export const generateWeeks = (date, selectedDate) => {
+  const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
+  const daysInCurrentMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+  const daysInPreviousMonth = new Date(date.getFullYear(), date.getMonth(), 0).getDate();
+
+  const preOffset = firstDayOfMonth.getDay();
+  const daysInMonthWithOffset = daysInCurrentMonth + preOffset;
+
+  const weeks = [];
+  let activeRow = 0;
+  let activeCol = 0;
+  let currentWeekIndex = 0;
+  let currentDate;
+
+  for (let i = 0; i < CELL_COUNT; i++) {
+    if (i > 6 && i % 7 === 0) {
+      currentWeekIndex++;
+    }
+
+    if (!weeks[currentWeekIndex]) {
+      weeks[currentWeekIndex] = [];
+    }
+
+    if (i < preOffset) {
+      currentDate = {
+        date: new Date(date.getFullYear(), date.getMonth() - 1, daysInPreviousMonth - preOffset + i + 1),
+        outsideMonth: true,
+      };
+    } else if (i < daysInMonthWithOffset) {
+      currentDate = { date: new Date(date.getFullYear(), date.getMonth(), i - preOffset + 1) };
+    } else {
+      currentDate = {
+        date: new Date(date.getFullYear(), date.getMonth() + 1, i - preOffset - daysInCurrentMonth + 1),
+        outsideMonth: true,
+      };
+    }
+
+    if (isDateEqual(selectedDate, currentDate.date)) {
+      activeRow = currentWeekIndex + 1;
+      activeCol = weeks[currentWeekIndex].length;
+      currentDate.isSelected = true;
+    }
+
+    weeks[currentWeekIndex].push(currentDate);
+  }
+
+  return [weeks, activeRow, activeCol];
+};

package/src/DatePicker/utils/getDayOfWeek.js

@@ -0,0 +1,24 @@
+/**
+ * Hack method to retrieve the localized day of weeks
+ */
+export const getDayOfWeek = () => {
+  const format = new Intl.DateTimeFormat(undefined, { weekday: 'long' }).format;
+
+  const thu = new Date(1970, 0, 1);
+  const fri = new Date(1970, 0, 2);
+  const sat = new Date(1970, 0, 3);
+  const sun = new Date(1970, 0, 4);
+  const mon = new Date(1970, 0, 5);
+  const tue = new Date(1970, 0, 6);
+  const wed = new Date(1970, 0, 7);
+
+  return {
+    sun: format(sun),
+    mon: format(mon),
+    tue: format(tue),
+    wed: format(wed),
+    thu: format(thu),
+    fri: format(fri),
+    sat: format(sat),
+  };
+};

package/src/DatePicker/utils/getMonths.js

@@ -0,0 +1,10 @@
+/**
+ * Hack method to retrieve the localized month
+ */
+export const getMonths = () => {
+  const format = new Intl.DateTimeFormat(undefined, { month: 'long' }).format;
+
+  return Array(12)
+    .fill(null)
+    .map((_, index) => format(new Date(1970, index, 1)));
+};

package/src/DatePicker/utils/getYears.js

@@ -0,0 +1,19 @@
+/**
+ * Hack method to retrieve the array of years
+ */
+
+const DEFAULT_PAST_RANGE = 200;
+const DEFAULT_FUTURE_RANGE = 15;
+
+export const getYears = (minDate, maxDate) => {
+  const currentYear = new Date().getFullYear();
+  const startYear = minDate?.getFullYear() ?? parseInt(currentYear, 10) - DEFAULT_PAST_RANGE;
+  const endYear = maxDate?.getFullYear() ?? parseInt(currentYear, 10) + DEFAULT_FUTURE_RANGE;
+  const years = [];
+
+  for (let i = startYear; i <= endYear; i++) {
+    years.push(i);
+  }
+
+  return years;
+};

package/src/DatePicker/utils/index.js

@@ -0,0 +1,5 @@
+export * from './getDayOfWeek';
+export * from './getMonths';
+export * from './generateWeeks';
+export * from './getYears';
+export * from './formatDate';

package/src/DatePicker/utils/tests/generateWeeks.spec.js

@@ -0,0 +1,136 @@
+import { generateWeeks } from '../generateWeeks';
+
+const makeDate = (day, month, year = 2021, outsideMonth = undefined) => {
+  if (outsideMonth) {
+    return { date: new Date(year, month, day), outsideMonth };
+  }
+
+  return { date: new Date(year, month, day) };
+};
+
+describe('generate weeks', () => {
+  it('verifies the matrix for january 2021', () => {
+    const jan = 0;
+    const dec = 11;
+    const feb = 1;
+
+    const weeksMatrix = [
+      [
+        makeDate(27, dec, 2020, true),
+        makeDate(28, dec, 2020, true),
+        makeDate(29, dec, 2020, true),
+        makeDate(30, dec, 2020, true),
+        makeDate(31, dec, 2020, true),
+        makeDate(1, jan),
+        makeDate(2, jan),
+      ],
+      [
+        makeDate(3, jan),
+        makeDate(4, jan),
+        makeDate(5, jan),
+        makeDate(6, jan),
+        makeDate(7, jan),
+        makeDate(8, jan),
+        makeDate(9, jan),
+      ],
+      [
+        makeDate(10, jan),
+        makeDate(11, jan),
+        makeDate(12, jan),
+        makeDate(13, jan),
+        makeDate(14, jan),
+        makeDate(15, jan),
+        makeDate(16, jan),
+      ],
+      [
+        makeDate(17, jan),
+        makeDate(18, jan),
+        makeDate(19, jan),
+        makeDate(20, jan),
+        makeDate(21, jan),
+        makeDate(22, jan),
+        makeDate(23, jan),
+      ],
+      [
+        makeDate(24, jan),
+        makeDate(25, jan),
+        makeDate(26, jan),
+        makeDate(27, jan),
+        makeDate(28, jan),
+        makeDate(29, jan),
+        makeDate(30, jan),
+      ],
+      [
+        makeDate(31, jan),
+        makeDate(1, feb, 2021, true),
+        makeDate(2, feb, 2021, true),
+        makeDate(3, feb, 2021, true),
+        makeDate(4, feb, 2021, true),
+        makeDate(5, feb, 2021, true),
+        makeDate(6, feb, 2021, true),
+      ],
+    ];
+
+    const [weeks] = generateWeeks(new Date(2021, jan, 26));
+
+    expect(weeks).toEqual(weeksMatrix);
+  });
+
+  it('verifies the matrix for february 2021', () => {
+    const feb = 1;
+    const jan = 0;
+    const mar = 2;
+
+    const weeksMatrix = [
+      [
+        makeDate(31, jan, 2021, true),
+        makeDate(1, feb),
+        makeDate(2, feb),
+        makeDate(3, feb),
+        makeDate(4, feb),
+        makeDate(5, feb),
+        makeDate(6, feb),
+      ],
+      [
+        makeDate(7, feb),
+        makeDate(8, feb),
+        makeDate(9, feb),
+        makeDate(10, feb),
+        makeDate(11, feb),
+        makeDate(12, feb),
+        makeDate(13, feb),
+      ],
+      [
+        makeDate(14, feb),
+        makeDate(15, feb),
+        makeDate(16, feb),
+        makeDate(17, feb),
+        makeDate(18, feb),
+        makeDate(19, feb),
+        makeDate(20, feb),
+      ],
+      [
+        makeDate(21, feb),
+        makeDate(22, feb),
+        makeDate(23, feb),
+        makeDate(24, feb),
+        makeDate(25, feb),
+        makeDate(26, feb),
+        makeDate(27, feb),
+      ],
+      [
+        makeDate(28, feb),
+        makeDate(1, mar, 2021, true),
+        makeDate(2, mar, 2021, true),
+        makeDate(3, mar, 2021, true),
+        makeDate(4, mar, 2021, true),
+        makeDate(5, mar, 2021, true),
+        makeDate(6, mar, 2021, true),
+      ],
+    ];
+
+    const [weeks] = generateWeeks(new Date(2021, 1, 26));
+
+    expect(weeks[0]).toEqual(weeksMatrix[0]);
+  });
+});

package/src/DatePicker/utils/tests/getMonths.spec.js

@@ -0,0 +1,21 @@
+import { getMonths } from '../getMonths';
+
+describe('getMonths', () => {
+  it('should retrieve an array of years from 1970 to 2070', () => {
+    const months = getMonths();
+    expect(months).toEqual([
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ]);
+  });
+});

package/src/DatePicker/utils/tests/getYears.spec.js

@@ -0,0 +1,21 @@
+import { getYears } from '../getYears';
+
+describe('getYears', () => {
+  jest.useFakeTimers('modern');
+  jest.setSystemTime(new Date(2020, 3, 1));
+
+  it('should retrieve an array of years from 1820 to 2035', () => {
+    const years = getYears();
+    expect(years[0]).toEqual(1820);
+    expect(years[years.length - 1]).toEqual(2035);
+  });
+
+  it('should retrieve an array of years between min and max date', () => {
+    const minDate = new Date(2018, 1, 1);
+    const maxDate = new Date(2024, 1, 1);
+    const years = getYears(minDate, maxDate);
+
+    expect(years[0]).toEqual(2018);
+    expect(years[years.length - 1]).toEqual(2024);
+  });
+});

package/src/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+import { Stack } from '../Stack';
+import { DatePicker } from '../DatePicker';
+import { TimePicker } from '../TimePicker';
+import { Field, FieldHint, FieldLabel, FieldError } from '../Field';
+import { useId } from '../helpers/useId';
+import { parseDate } from './parseDate';
+import { dateTimePickerDefaultProps, dateTimePickerPropTypes } from './DateTimePickerProps';
+
+export const DateTimePicker = ({
+  ariaLabel,
+  clearLabel,
+  disabled,
+  error,
+  hint,
+  label,
+  labelAction,
+  onChange,
+  onClear,
+  name,
+  required,
+  selectButtonTitle,
+  size,
+  step,
+  value,
+  ...props
+}) => {
+  const initialDate = parseDate(value);
+  const [dateValue, setDateValue] = useState(initialDate);
+  const [timeValue, setTimeValue] = useState(
+    initialDate ? `${initialDate.getHours()}:${initialDate.getMinutes()}:${initialDate.getSeconds()}` : null,
+  );
+
+  const handleDateChange = (e) => {
+    setDateValue(e);
+
+    let dateToSet;
+
+    if (timeValue) {
+      dateToSet = new Date(e);
+      dateToSet.setHours(timeValue.split(':')[0]);
+      dateToSet.setMinutes(timeValue.split(':')[1]);
+    } else {
+      dateToSet = new Date(e);
+      setTimeValue(`${dateToSet.getHours()}:${dateToSet.getMinutes()}:${dateToSet.getSeconds()}`);
+    }
+    if (onChange) {
+      onChange(dateToSet);
+    }
+  };
+
+  const handleTimeChange = (e) => {
+    setTimeValue(e);
+
+    const dateToSet = dateValue ? new Date(dateValue) : new Date();
+    dateToSet.setHours(e.split(':')[0]);
+    dateToSet.setMinutes(e.split(':')[1]);
+    if (!dateValue) {
+      setDateValue(dateToSet);
+    }
+
+    if (onChange) {
+      onChange(dateToSet);
+    }
+  };
+
+  const handleDateClear = () => {
+    setDateValue(undefined);
+    setTimeValue(undefined);
+    onClear();
+  };
+
+  const handleTimeClear = () => {
+    setTimeValue(undefined);
+
+    let dateToSet;
+
+    if (dateValue) {
+      dateToSet = new Date(dateValue);
+      dateToSet.setHours('00');
+      dateToSet.setMinutes('00');
+    }
+
+    if (onChange) {
+      onChange(dateToSet);
+    }
+  };
+
+  useEffect(() => {
+    if (value && +value !== +dateValue) {
+      const parsedData = parseDate(value);
+      setDateValue(parsedData);
+      setTimeValue(
+        parsedData ? `${parsedData.getHours()}:${parsedData.getMinutes()}:${parsedData.getSeconds()}` : null,
+      );
+    } else if (!value) {
+      setDateValue(undefined);
+      setTimeValue(undefined);
+    }
+  }, [value]);
+
+  const generatedId = useId('datetime-label', props?.id);
+  const generatedFieldErrorId = useId('datetimepicker');
+
+  return (
+    <Field name={name} role="group" aria-labelledby={generatedId} hint={hint} error={error}>
+      <Stack spacing={1}>
+        {label && (
+          <FieldLabel required={required} action={labelAction} id={generatedId}>
+            {label}
+          </FieldLabel>
+        )}
+        <Stack horizontal spacing={2}>
+          <DatePicker
+            data-testid="datetimepicker-date"
+            name={name}
+            ariaLabel={label || ariaLabel}
+            error={typeof error === 'string'}
+            selectedDate={dateValue}
+            selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
+            onChange={handleDateChange}
+            size={size}
+            onClear={onClear && handleDateClear}
+            clearLabel={clearLabel}
+            disabled={disabled}
+            {...props}
+          />
+          <TimePicker
+            data-testid="datetimepicker-time"
+            size={size}
+            aria-label={label || ariaLabel}
+            error={typeof error === 'string'}
+            value={timeValue}
+            onChange={handleTimeChange}
+            onClear={onClear && handleTimeClear}
+            clearLabel={clearLabel}
+            selectButtonTitle={selectButtonTitle}
+            disabled={disabled}
+            step={step}
+          />
+        </Stack>
+        <FieldHint />
+        <FieldError id={generatedFieldErrorId} />
+      </Stack>
+    </Field>
+  );
+};
+
+DateTimePicker.defaultProps = dateTimePickerDefaultProps;
+
+DateTimePicker.propTypes = dateTimePickerPropTypes;

package/src/DateTimePicker/DateTimePicker.stories.mdx

@@ -0,0 +1,114 @@
+<!--- DateTimePicker.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { DateTimePicker } from './DateTimePicker';
+
+<Meta
+  title="Design System/Components/DateTimePicker"
+  component={DateTimePicker}
+  argTypes={{
+    label: {
+      control: {
+        type: 'text',
+      },
+    },
+    value: {
+      control: {
+        type: 'date',
+      },
+    },
+  }}
+/>
+
+# DateTimePicker
+
+Date Time pickers help users selecting a specific date from a calendar and a specific timeslot from a suggested timetable.
+
+**Best practices**
+
+- When you select a date automatically is selected also a time and viceversa (time and date)
+- When you clear a date automatically is deleted also the time and viceversa
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/DateTimePicker)
+
+## Imports
+
+```js
+import { DateTimePicker } from '@strapi/design-system/DateTimePicker';
+```
+
+## Usage
+
+- A Date Time 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.
+- Use the Time picker component whenever a specific time needs to be scheduled or indicated. It is only possible to select one single timeslot.
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [value, setValue] = useState(undefined);
+      return (
+        <DateTimePicker
+          label={'Date time picker'}
+          disabled={false}
+          name="datetimepicker"
+          onChange={(e) => setValue(e)}
+          clearLabel="Clear"
+          onClear={() => setValue(undefined)}
+          value={value}
+          hint="This is a super description"
+          selectedDateLabel={() => `Date picker, current is undefined`}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Error
+
+<Canvas>
+  <Story name="error">
+    {() => {
+      const [, setValue] = useState(undefined);
+      return (
+        <DateTimePicker
+          hint="This is a super description"
+          error="Very very very very very very very long error"
+          label="Error"
+          name="datetimepicker"
+          onChange={(e) => setValue(e)}
+          clearLabel="Clear"
+          onClear={() => setValue(undefined)}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Initial data
+
+<Canvas>
+  <Story name="initial data">
+    {() => {
+      const [value, setValue] = useState(new Date('2021-10-13T10:00:00.000Z'));
+      return (
+        <DateTimePicker
+          label="Date time picker"
+          name="datetimepicker"
+          onChange={(e) => setValue(e)}
+          clearLabel="Clear"
+          onClear={() => setValue(undefined)}
+          value={value}
+          hint="This is a super description"
+          selectedDateLabel={() => `Date picker, current is undefined`}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={DateTimePicker} />