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

package/src/DatePicker/components.js

@@ -1,45 +0,0 @@
-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

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

package/src/DatePicker/utils/formatDate.js

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

package/src/DatePicker/utils/generateWeeks.js

@@ -1,58 +0,0 @@
-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

@@ -1,24 +0,0 @@
-/**
- * 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

@@ -1,10 +0,0 @@
-/**
- * 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

@@ -1,19 +0,0 @@
-/**
- * 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

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

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

@@ -1,136 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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

@@ -1,114 +0,0 @@
-<!--- 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} />