@hyphen/hyphen-components 6.15.1 → 7.0.0-beta.1

package/src/components/DateInput/DateInput.mdx

@@ -1,61 +0,0 @@
-import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
-import { DateInput } from './DateInput';
-import * as Stories from './DateInput.stories';
-
-<Meta of={Stories} />
-
-# DateInput
-
-Use a DateInput to allow users to select a date close to today and place that date in an input field.
-Avoid using this component if the user needs to enter a date that is many years in the past (i.e. birthday) or future.
-For entering these types of dates we recommend using the `TextInput` component with a `date` mask. See an example here:
-[TextInput Date Example](?path=/docs/components-textinput-overview--with-date-mask)
-
-<Canvas isExpanded of={Stories.Basic} />
-
-## Props
-
-<ArgTypes of={DateInput} />
-
-## Default
-
-The DateInput is composed of 3 components. Each can be tailored based on their props. They are:
-
-1. [DatePicker](?path=/docs/components-datepicker-overview--basic-example)
-2. [Popover](?path=/docs/components-popover-overview--demo)
-3. [TextInput](?path=/docs/components-textinput-overview--default-story)
-
-The `DateInput` uses sensible defaults for these to allow for very straightforward ergonomics that allow users to
-select dates with minimal work.
-
-<Canvas of={Stories.Default} />
-
-## Date Range
-
-<Canvas of={Stories.DateRange} />
-
-## With Min/Max dates
-
-<Canvas of={Stories.WithMinAndMaxDates} />
-
-## Custom Date Format
-
-You can manipulate the format on the input field by using the `dateFormat` and `dateOptions`
-props. Under the hood our component uses the [date-fns `format` function](https://date-fns.org/v2.16.1/docs/format)
-to generate a string based on these options.
-
-<Canvas of={Stories.CustomDateFormat} />
-
-## On using onBlur event with DateInput
-
-The input is technically blurred whenever the calendar popover is interacted but as far as the user
-is concerned they are still interacting with the DateInput. Please keep this in mind when
-triggering form validation after an onBlur event.
-
-Make sure to pass the `onBlur` prop to the input via `textInputProps`.
-
-<Canvas of={Stories.InputBlurEvent} />
-
-## Component Design Tokens
-
-This component shares component design tokens with all form controls. For a complete list of tokens, see the [Theming Form Controls documentation](/docs/theming-form-controls--custom-theme-form).

package/src/components/DateInput/DateInput.stories.tsx

@@ -1,168 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta } from '@storybook/react-vite';
-import { DateInput } from './DateInput';
-import { Box } from '../Box/Box';
-
-const meta: Meta<typeof DateInput> = {
-  title: 'Components/DateInput',
-  component: DateInput,
-};
-
-export default meta;
-
-export const Basic = () => (
-  <DateInput
-    datePickerProps={{
-      onChange() {},
-    }}
-    textInputProps={{
-      id: 'exampleDateInput',
-      name: 'selectDate',
-      label: 'Select a Date',
-      placeholder: 'e.g. 11/02/2020',
-    }}
-  />
-);
-
-export const Default = () => {
-  const [selectedDate, setSelectedDate] = useState<Date | null | [Date, Date]>(
-    null
-  );
-  const handleClear = () => {
-    setSelectedDate(null);
-  };
-
-  return (
-    <DateInput
-      datePickerProps={{
-        selected: selectedDate instanceof Date ? selectedDate : null,
-        onChange: (date: Date | [Date, Date] | null) => setSelectedDate(date),
-      }}
-      textInputProps={{
-        placeholder: 'e.g. 11/02/2020',
-        onClear: handleClear,
-        id: 'defaultDatePicker',
-        name: 'selectDate',
-        label: 'Select Date',
-      }}
-    />
-  );
-};
-
-export const DateRange = () => {
-  const [startDate, setStartDate] = useState<Date | [Date, Date] | null>(null);
-  const [endDate, setEndDate] = useState<Date | [Date, Date] | null>(null);
-  const setDate = ([startDate, endDate]: [Date, Date]) => {
-    setStartDate(startDate);
-    setEndDate(endDate);
-  };
-  const handleClear = () => {
-    setStartDate(null);
-    setEndDate(null);
-  };
-
-  return (
-    <DateInput
-      datePickerProps={{
-        // @ts-ignore - Type compatibility with onChange.
-        onChange: setDate,
-        selected: startDate as Date,
-        selectsRange: true,
-        startDate: startDate as Date,
-        endDate: endDate as Date,
-      }}
-      textInputProps={{
-        onClear: handleClear,
-        id: 'myDateRangePicker',
-        name: 'myDateRangePicker',
-        label: 'Select Date Range',
-      }}
-    />
-  );
-};
-
-export const WithMinAndMaxDates = () => {
-  const [selectedDate, setSelectedDate] = useState<Date | [Date, Date] | null>(
-    null
-  );
-  const handleClear = () => {
-    setSelectedDate(null);
-  };
-  const min = new Date(2022, 6, 18);
-  min.setDate(min.getDate() - 10);
-  const max = new Date(2022, 6, 18);
-  max.setDate(max.getDate() + 10);
-  return (
-    <DateInput
-      datePickerProps={{
-        selected: selectedDate as Date,
-        maxDate: max,
-        minDate: min,
-        onChange: setSelectedDate,
-      }}
-      textInputProps={{
-        placeholder: 'e.g. 11/02/2020',
-        onClear: handleClear,
-        id: 'defaultDatePicker',
-        name: 'selectDate',
-        label: 'Select Date',
-      }}
-    />
-  );
-};
-
-export const CustomDateFormat = () => {
-  const [selectedDate, setSelectedDate] = useState<Date | null | [Date, Date]>(
-    new Date('2020, 11, 3')
-  );
-  const handleClear = () => {
-    setSelectedDate(null);
-  };
-  return (
-    <Box gap="md">
-      <DateInput
-        dateFormat={'MMMM dd, yyyy'}
-        datePickerProps={{
-          selected: selectedDate as Date,
-          onChange: setSelectedDate,
-        }}
-        textInputProps={{
-          onClear: handleClear,
-          id: 'withCustomDateFormat',
-          name: 'selectDate',
-          label: 'Select Date',
-        }}
-      />
-      <Box>
-        <p>
-          Selected Date (as ISO String):{' '}
-          {selectedDate ? (selectedDate as Date).toISOString() : null}
-        </p>
-      </Box>
-    </Box>
-  );
-};
-
-export const InputBlurEvent = () => {
-  const [selectedDate, setSelectedDate] = useState<Date | [Date, Date] | null>(
-    new Date('2020, 11, 3')
-  );
-  const handleTextInputBlur = () => {
-    alert('TextInput Blur Event');
-  };
-  return (
-    <DateInput
-      dateFormat={'MMMM dd, yyyy'}
-      datePickerProps={{
-        selected: selectedDate as Date,
-        onChange: setSelectedDate,
-      }}
-      textInputProps={{
-        id: 'withCustomDateFormat',
-        name: 'selectDate',
-        label: 'Select Date',
-        onBlur: handleTextInputBlur,
-      }}
-    />
-  );
-};

package/src/components/DateInput/DateInput.test.tsx

@@ -1,176 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { DateInput } from './DateInput';
-
-describe('DateInput', () => {
-  describe('Default', () => {
-    it('renders a DateInput component with defaults', () => {
-      render(
-        <DateInput
-          textInputProps={{
-            id: 'myInput',
-            label: 'Select Date',
-          }}
-          datePickerProps={{
-            onChange: () => null,
-          }}
-        />
-      );
-
-      const input = screen.getByLabelText('Select Date');
-      expect(input).toBeInTheDocument();
-    });
-  });
-
-  describe('Popover', () => {
-    it('keeps popover open after only start date is picked in a range', async () => {
-      const date = new Date(2020, 0, 1);
-      render(
-        <DateInput
-          textInputProps={{
-            id: 'myInput',
-            label: 'Select Date',
-          }}
-          datePickerProps={{
-            onChange: () => null,
-            openToDate: date,
-            startDate: date,
-            selected: date,
-            selectsRange: true,
-            endDate: null,
-          }}
-        />
-      );
-      const input = screen.getByLabelText('Select Date');
-      fireEvent.click(input);
-      const popoverContainer =
-        document.getElementsByClassName('PopoverContent');
-      await waitFor(() => expect(popoverContainer[0]).toBeInTheDocument());
-      // Simulate picking start date (should not close popover)
-      // (Assume date button is present)
-      // Popover should still be open
-      expect(document.getElementsByClassName('PopoverContent').length).toBe(1);
-    });
-
-    it('opens the Popover when the input is clicked', async () => {
-      render(
-        <DateInput
-          textInputProps={{
-            id: 'myInput',
-            label: 'Select Date',
-          }}
-          datePickerProps={{
-            onChange: () => null,
-          }}
-        />
-      );
-
-      const input = screen.getByLabelText('Select Date');
-      fireEvent.click(input);
-
-      const popoverContainer =
-        document.getElementsByClassName('PopoverContent');
-      await waitFor(() =>
-        expect(popoverContainer[0]).toHaveAttribute('data-side', 'bottom')
-      );
-      await waitFor(() =>
-        expect(popoverContainer[0]).toHaveAttribute('data-align', 'start')
-      );
-    });
-  });
-
-  describe('Date Formatting', () => {
-    it('formats the date when a format is passed', async () => {
-      const date = new Date(1995, 11, 14);
-      render(
-        <DateInput
-          dateFormat="yyyy/MM/dd"
-          textInputProps={{
-            id: 'myInput',
-            label: 'Select Date',
-          }}
-          datePickerProps={{
-            onChange: () => null,
-            openToDate: date,
-            selected: date,
-          }}
-        />
-      );
-
-      const input = screen.getByLabelText('Select Date');
-      expect(input).toBeInTheDocument();
-      expect(input).toHaveAttribute('value', '1995/12/14');
-    });
-
-    it('formats both dates when range is being selected', async () => {
-      const dateOne = new Date(1995, 11, 14);
-      const dateTwo = new Date(1995, 11, 16);
-      render(
-        <DateInput
-          dateFormat="yyyy/MM/dd"
-          textInputProps={{
-            id: 'myInput',
-            label: 'Select Date',
-          }}
-          datePickerProps={{
-            onChange: () => null,
-            openToDate: dateOne,
-            startDate: dateOne,
-            endDate: dateTwo,
-            selectsRange: true,
-          }}
-        />
-      );
-
-      const input = screen.getByLabelText('Select Date');
-      expect(input).toBeInTheDocument();
-      expect(input).toHaveAttribute('value', '1995/12/14 - 1995/12/16');
-    });
-
-    it('formats one date if selecting range', async () => {
-      const dateOne = null;
-      const dateTwo = new Date(1995, 11, 16);
-      const { rerender } = render(
-        <DateInput
-          dateFormat="yyyy/MM/dd"
-          textInputProps={{
-            id: 'myInput',
-            label: 'Select Date',
-          }}
-          datePickerProps={{
-            onChange: () => null,
-            openToDate: dateTwo,
-            startDate: dateOne,
-            endDate: dateTwo,
-            selectsRange: true,
-          }}
-        />
-      );
-
-      const input = screen.getByLabelText('Select Date');
-      expect(input).toBeInTheDocument();
-      expect(input).toHaveAttribute('value', ' - 1995/12/16');
-
-      rerender(
-        <DateInput
-          dateFormat="yyyy/MM/dd"
-          textInputProps={{
-            id: 'myInput',
-            label: 'Select Date',
-          }}
-          datePickerProps={{
-            onChange: () => null,
-            openToDate: dateTwo,
-            startDate: dateTwo,
-            endDate: dateOne,
-            selectsRange: true,
-          }}
-        />
-      );
-
-      const inputTwo = screen.getByLabelText('Select Date');
-      expect(inputTwo).toBeInTheDocument();
-      expect(inputTwo).toHaveAttribute('value', '1995/12/16 - ');
-    });
-  });
-});

package/src/components/DateInput/DateInput.tsx

@@ -1,212 +0,0 @@
-import React, { FC, useState } from 'react';
-import format from 'date-fns/format';
-import { DatePicker, DatePickerProps } from '../DatePicker/DatePicker';
-import { TextInput, TextInputProps } from '../TextInput/TextInput';
-import {
-  Popover,
-  PopoverContent,
-  PopoverPortal,
-  PopoverTrigger,
-} from '../Popover/Popover';
-import { useOpenClose } from '../../hooks';
-
-export interface DateInputProps {
-  /**
-   * Props object for DatePicker component.
-   */
-  datePickerProps: DatePickerProps;
-  /**
-   * Props object for TextInput component.
-   */
-  textInputProps: Omit<TextInputProps, 'onChange'>;
-  /**
-   * Format for final date to be displayed.
-   * Relies on date-fns/format --> https://date-fns.org/v1.9.0/docs/format
-   */
-  dateFormat?: string;
-  /**
-   * Additional settings for formatting date.
-   */
-  dateOptions?: {
-    /**
-     * The user's locale.
-     */
-    locale?: globalThis.Locale | undefined;
-    /**
-     * Start of week.
-     */
-    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
-    /**
-     * Should determine which week is week 1 of a new year.
-     */
-    firstWeekContainsDate?: number | undefined;
-    /**
-     * Whether to accept unicode tokens in format.
-     * See here --> https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
-     */
-    useAdditionalWeekYearTokens?: boolean | undefined;
-    /**
-     * Whether to accept unicode tokens in format.
-     * See here --> https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
-     */
-    useAdditionalDayOfYearTokens?: boolean | undefined;
-  };
-  /**
-   * Props to pass down to the Popover component.
-   */
-  popoverProps?: {
-    side: 'top' | 'bottom' | 'left' | 'right';
-    align: 'start' | 'center' | 'end';
-  };
-  /**
-   * Additional props to be spread to the `TextInput` element.
-   */
-  [x: string]: any; // eslint-disable-line
-}
-
-const defaultDatePickerProps: Omit<DatePickerProps, 'onChange'> = {
-  selected: null,
-  selectsRange: false,
-};
-
-const defaultPopoverProps = {
-  align: 'start',
-  side: 'bottom',
-};
-
-const defaultTextInputProps: Omit<TextInputProps, 'id'> = {
-  label: 'Select Date',
-};
-
-export const DateInput: FC<DateInputProps> = ({
-  datePickerProps,
-  textInputProps,
-  dateFormat = 'MM/dd/yyyy',
-  dateOptions = undefined,
-  popoverProps = { ...defaultPopoverProps },
-}) => {
-  const { isOpen, handleClose, handleOpen } = useOpenClose();
-
-  // Internal state for selected date if not controlled
-  const isControlled = datePickerProps.selected !== undefined;
-  const [internalSelected, setInternalSelected] = useState<Date | null>(
-    Array.isArray(datePickerProps.selected)
-      ? datePickerProps.selected[0] ?? null
-      : datePickerProps.selected ?? null
-  );
-
-  // Use controlled or internal state
-  const selectedDate = isControlled
-    ? datePickerProps.selected
-    : internalSelected;
-
-  const mergedDatePickerProps = {
-    ...defaultDatePickerProps,
-    ...datePickerProps,
-    selected: selectedDate,
-  };
-
-  const mergedPopoverProps = {
-    ...defaultPopoverProps,
-    ...popoverProps,
-    side: (popoverProps?.side ?? defaultPopoverProps.side) as
-      | 'top'
-      | 'bottom'
-      | 'left'
-      | 'right',
-    align: (popoverProps?.align ?? defaultPopoverProps.align) as
-      | 'start'
-      | 'center'
-      | 'end',
-    onInteractOutside: handleClose,
-  };
-
-  const mergedTextInputProps = {
-    ...defaultTextInputProps,
-    ...textInputProps,
-  };
-
-  const getTextInputValue = () => {
-    const { selectsRange, startDate, endDate, selected } =
-      mergedDatePickerProps;
-    // If selectsRange and selected is an array, use it for start/end
-    let rangeStart = startDate;
-    let rangeEnd = endDate;
-    if (selectsRange && Array.isArray(selected)) {
-      rangeStart = selected[0] ?? null;
-      rangeEnd = selected[1] ?? null;
-    }
-    const formattedStartDate = rangeStart
-      ? format(rangeStart, dateFormat, dateOptions)
-      : '';
-    const formattedEndDate = rangeEnd
-      ? format(rangeEnd, dateFormat, dateOptions)
-      : '';
-    const formattedSelectedDate =
-      selected && !selectsRange && !Array.isArray(selected)
-        ? format(selected, dateFormat, dateOptions)
-        : '';
-    if (selectsRange) {
-      return `${formattedStartDate}${
-        formattedStartDate || formattedEndDate ? ' - ' : ''
-      }${formattedEndDate}`;
-    }
-    return formattedSelectedDate;
-  };
-
-  const handleDatePickerChange = (
-    date: Date | [Date, Date] | null,
-    event?: React.SyntheticEvent<any, Event>
-  ) => {
-    if (datePickerProps.onChange) {
-      datePickerProps.onChange(date, event);
-    }
-    if (!isControlled) {
-      // If not controlled, update internal state
-      if (Array.isArray(date)) {
-        setInternalSelected(date[0] ?? null);
-      } else {
-        setInternalSelected(date);
-      }
-    }
-    // Close popover when a date is selected (single) or when end date is selected (range)
-    if (mergedDatePickerProps.selectsRange) {
-      if (Array.isArray(date) && date[0] && date[1]) {
-        handleClose();
-      }
-    } else if (date) {
-      handleClose();
-    }
-  };
-
-  return (
-    <Popover open={isOpen}>
-      <PopoverTrigger asChild>
-        <TextInput
-          id={mergedTextInputProps.id}
-          name={mergedTextInputProps.name}
-          label={mergedTextInputProps.label}
-          value={getTextInputValue()}
-          readOnly
-          onClick={handleOpen}
-          inputProps={{ className: 'text-align-left' }}
-          type="text"
-          onChange={() =>
-            null
-          } /* Empty function since we hijack the onChange event */
-          {...mergedTextInputProps}
-        />
-      </PopoverTrigger>
-      <PopoverPortal>
-        <PopoverContent {...mergedPopoverProps}>
-          <DatePicker
-            {...mergedDatePickerProps}
-            onChange={handleDatePickerChange}
-            selected={selectedDate}
-            selectsRange={mergedDatePickerProps.selectsRange}
-          />
-        </PopoverContent>
-      </PopoverPortal>
-    </Popover>
-  );
-};

package/src/components/DatePicker/DatePicker.mdx

@@ -1,52 +0,0 @@
-import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
-import { DatePicker } from './DatePicker';
-import * as Stories from './DatePicker.stories';
-
-<Meta of={Stories} />
-
-# DatePicker
-
-The Datepicker lets users select a date by showing them a calendar.
-
-It is also used in combination with an input and popover by the [DateInput component](/?path=/docs/components-dateinput-overview--basic-usage).
-
-### It can be used for:
-
-- selecting a single date
-- selecting a start and end date
-
-## Props
-
-<ArgTypes of={DatePicker} />
-
-## Basic Example
-
-<Canvas of={Stories.BasicExample} />
-
-## Date Range
-
-<Canvas of={Stories.DateRange} />
-
-## Min/Max Dates
-
-<Canvas of={Stories.MinAndMaxDates} />
-
-## Month Picker
-
-<Canvas of={Stories.MonthPicker} />
-
-## Show Multiple Months
-
-<Canvas of={Stories.ShowMultipleMonths} />
-
-## With Time Picker
-
-<Canvas of={Stories.WithTimePicker} />
-
-## Open by default on a specific date
-
-<Canvas of={Stories.OpenByDefaultOnASpecificDate} />
-
-## With Children
-
-<Canvas of={Stories.WithChildren} />