@hyphen/hyphen-components 7.9.0 → 8.0.0

package/src/components/TimePickerNative/TimePickerNative.mdx

@@ -1,67 +0,0 @@
-import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
-import { TimePickerNative } from './TimePickerNative';
-import * as Stories from './TimePickerNative.stories';
-
-<Meta of={Stories} />
-
-# TimePickerNative
-
-Use a TimePickerNative when you want users to select from a list of a available times agnostic of date.
-
-_NOTE:_ This component is abstracted from the [SelectInputNative](?path=/docs/components-selectinputnative-overview--default-story)
-and as such includes the same underlying props interface with an added method for generating the time options automatically.
-
-_ABOUT TIME FORMAT:_ The value returned will always be a JS ISO date string, like this: `2016-07-13T18:46:01.933Z`.
-
-## Props
-
-<ArgTypes of={TimePickerNative} />
-
-## Default
-
-<Canvas of={Stories.Default} />
-
-## With A Specific Interval
-
-Pass an `interval` (seconds) value to determine how many times get generated as options.
-The example below uses `3600` --> 1 Hour Intervals
-
-<Canvas of={Stories.WithASpecificInterval} />
-
-## With Min and Max Times
-
-You can determine the range of times to be shown by capping the start and end times.
-Use `startTime` and `endTime` for this. The expected values for `hour` and `minute` properties
-are `0-24` and `0-60` respectively.
-
-IMPORTANT: `startTime` is inclusive, and `endTime` is exclusive. This is to avoid
-the options showing the startTime twice when using a 24-hour cycle.
-
-See example below where we want to show 15 minute increments starting at 9:00AM and ending at 3:30PM.
-
-<Canvas of={Stories.WithMinAndMaxTimes} />
-
-## With Custom Date Display
-
-The labels for the dropdwon options are governed by JS `toLocaleTimeString`, and as such
-options are available to customize these.
-
-NOTE: that the option values are always returned as ISO strings regardless of the label display option.
-
-The example below is shown in military (24-hour) time.
-
-<Canvas of={Stories.WithCustomDateDisplay} />
-
-## Help Text
-
-<Canvas of={Stories.HelpText} />
-
-## Sizes
-
-Set the size of the input to `sm`, `md` or `lg`. `md` is the default size.
-
-<Canvas of={Stories.Sizes} />
-
-## 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/TimePickerNative/TimePickerNative.stories.tsx

@@ -1,150 +0,0 @@
-import type { Meta } from '@storybook/react-vite';
-import React, { ChangeEvent, useState } from 'react';
-import { TimePickerNative } from './TimePickerNative';
-import { Box } from '../Box/Box';
-
-const meta: Meta<typeof TimePickerNative> = {
-  title: 'Components/TimePickerNative',
-  component: TimePickerNative,
-  parameters: {
-    controls: { hideNoControlsWarning: true },
-  },
-};
-
-export default meta;
-
-export const Default = () => {
-  const [value, setValue] = useState<string | null>(null);
-  return (
-    <Box>
-      <TimePickerNative
-        id="defaultTimePickerNative"
-        name="defaultTimePickerNative"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          setValue(event.target.value);
-        }}
-        label="Pick a Time"
-        value={value}
-      />
-    </Box>
-  );
-};
-
-export const WithASpecificInterval = () => {
-  const [value, setValue] = useState<string | null>(null);
-  return (
-    <Box>
-      <TimePickerNative
-        id="intervalTimePickerNative"
-        name="intervalTimePickerNative"
-        onChange={(event: ChangeEvent<HTMLInputElement>) =>
-          setValue(event.target.value)
-        }
-        value={value}
-        label="Pick a Time"
-        interval={3600}
-      />
-    </Box>
-  );
-};
-
-export const WithMinAndMaxTimes = () => {
-  const [value, setValue] = useState<string | null>(null);
-  return (
-    <Box>
-      <TimePickerNative
-        id="startEnd"
-        name="startEnd"
-        onChange={(event: ChangeEvent<HTMLInputElement>) =>
-          setValue(event.target.value)
-        }
-        value={value}
-        label="Pick a Time"
-        startTime={{ hour: 9, minute: 0 }}
-        endTime={{ hour: 15, minute: 31 }}
-      />
-    </Box>
-  );
-};
-
-export const WithCustomDateDisplay = () => {
-  const [value, setValue] = useState<string | null>(null);
-  return (
-    <Box>
-      <TimePickerNative
-        id="customDate"
-        name="customDate"
-        onChange={(event: ChangeEvent<HTMLInputElement>) =>
-          setValue(event.target.value)
-        }
-        value={value}
-        label="Pick a Time"
-        startTime={{ hour: 9, minute: 0 }}
-        endTime={{ hour: 15, minute: 31 }}
-        dateDisplayOptions={{
-          hour12: false,
-          hour: '2-digit',
-          minute: '2-digit',
-        }}
-      />
-    </Box>
-  );
-};
-
-export const HelpText = () => {
-  const [value, setValue] = useState<string | null>(null);
-  return (
-    <Box>
-      <TimePickerNative
-        id="helpText"
-        name="helpText"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          setValue(event.target.value);
-        }}
-        label="Pick a Time"
-        value={value}
-        helpText="pick a time, any time..."
-      />
-    </Box>
-  );
-};
-
-export const Sizes = () => {
-  const [value, setValue] = useState<string | null>(null);
-  const [value1, setValue1] = useState<string | null>(null);
-  const [value2, setValue2] = useState<string | null>(null);
-  return (
-    <Box gap="md">
-      <TimePickerNative
-        id="smTimePickerNative"
-        name="smTimePickerNative"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          setValue(event.target.value);
-        }}
-        label="Small"
-        value={value}
-        size="sm"
-      />
-      <TimePickerNative
-        id="mdTimePickerNative"
-        name="mdTimePickerNative"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          setValue1(event.target.value);
-        }}
-        label="Medium"
-        value={value1}
-        size="md"
-      />
-      <TimePickerNative
-        id="lgTimePickerNative"
-        name="lgTimePickerNative"
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          setValue2(event.target.value);
-        }}
-        label="Large"
-        value={value2}
-        size="lg"
-      />
-    </Box>
-  );
-};

package/src/components/TimePickerNative/TimePickerNative.test.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import { screen, render, fireEvent } from '@testing-library/react';
-import { TimePickerNative } from './TimePickerNative';
-
-describe('TimePickerNative', () => {
-  describe('Default', () => {
-    it('Renders a TimePickerNative (select) with default props', () => {
-      render(
-        <TimePickerNative
-          name="timePicker"
-          id="timePicker"
-          onChange={() => null}
-          value={null}
-          label="Select Time"
-        />
-      );
-
-      const timePicker = screen.getByLabelText('Select Time');
-
-      const expectedTimes = [
-        '12:00 AM',
-        '12:15 AM',
-        '12:30 AM',
-        '12:45 AM',
-        '01:00 AM',
-        '01:15 AM',
-      ];
-      expect(timePicker).toBeInTheDocument();
-      expectedTimes.forEach((time) => {
-        expect(screen.queryByText(time)).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Min/Max & Interval', () => {
-    it('Renders correct options based on interval and start end times.', () => {
-      render(
-        <TimePickerNative
-          name="timePicker"
-          id="timePicker"
-          onChange={() => null}
-          value={null}
-          label="Select Time"
-          interval={3600}
-          startTime={{ hour: 9, minute: 0 }}
-          endTime={{ hour: 12, minute: 0 }}
-        />
-      );
-
-      const timePicker = screen.getByLabelText('Select Time');
-
-      const expectedTimes = ['09:00 AM', '10:00 AM', '11:00 AM'];
-
-      const notExpected = ['12:00 PM', '12:45 AM', '01:00 AM', '01:15 AM'];
-      expect(timePicker).toBeInTheDocument();
-      expectedTimes.forEach((time) => {
-        expect(screen.queryByText(time)).toBeInTheDocument();
-      });
-
-      notExpected.forEach((time) => {
-        expect(screen.queryByText(time)).toBe(null);
-      });
-    });
-  });
-
-  describe('Custom Date Display', () => {
-    it('renders the times based on the options provided', () => {
-      render(
-        <TimePickerNative
-          name="timePicker"
-          id="timePicker"
-          onChange={() => null}
-          value={null}
-          label="Select Time"
-          dateDisplayOptions={{ hour12: false }}
-          startTime={{ hour: 13, minute: 0 }}
-          endTime={{ hour: 15, minute: 1 }}
-          interval={3600}
-        />
-      );
-
-      const timePicker = screen.getByLabelText('Select Time');
-
-      const expectedTimes = ['13:00:00', '14:00:00', '15:00:00'];
-      expect(timePicker).toBeInTheDocument();
-      expectedTimes.forEach((time) => {
-        expect(screen.queryByText(time)).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Callback Handling', () => {
-    it('it fires an onchange callback with the correct value', async () => {
-      const mockedHandleChange = jest.fn(() => {}); // eslint-disable-line
-
-      render(
-        <TimePickerNative
-          name="timePicker"
-          id="timePicker"
-          onChange={mockedHandleChange}
-          value={null}
-          label="Select Time"
-          dateDisplayOptions={{ hour12: false }}
-          startTime={{ hour: 13, minute: 0 }}
-          endTime={{ hour: 15, minute: 1 }}
-          interval={3600}
-        />
-      );
-
-      const timePicker = screen.getByLabelText('Select Time');
-
-      fireEvent.change(timePicker, { target: { value: 'hello' } });
-
-      expect(mockedHandleChange).toBeCalledTimes(1);
-    });
-  });
-});

package/src/components/TimePickerNative/TimePickerNative.tsx

@@ -1,93 +0,0 @@
-import React, { FC } from 'react';
-import {
-  SelectInputNative,
-  SelectInputNativeProps,
-} from '../SelectInputNative/SelectInputNative';
-
-export interface TimePickerNativeProps
-  extends Omit<SelectInputNativeProps, 'options'> {
-  /**
-   * Options to govern the display of the option labels in the select.
-   * This is a direct passthrough to the second argument of JS `toLocaleTimeString`.
-   * [More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)
-   */
-  dateDisplayOptions?: Intl.DateTimeFormatOptions;
-  /**
-   * End hour and minute
-   */
-  endTime?: { hour: number; minute: number };
-  /**
-   * Interval of displayed times (in seconds). Defaults to 900 seconds (15 minutes).
-   */
-  interval?: number;
-  /**
-   * Locale(s) to be passed down in order to format the label values in the select.
-   * This corresponds to the first argument of JS `toLocaleTimeString`.
-   * [More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)
-   */
-  locales?: string | string[];
-  /**
-   * Start hour and minute
-   */
-  startTime?: { hour: number; minute: number };
-  /**
-   *  Should be ISO timestamp as returned by `onChange`, and matching value of option object.
-   */
-  value: SelectInputNativeProps['value'];
-}
-
-export const TimePickerNative: FC<TimePickerNativeProps> = ({
-  id,
-  name,
-  label,
-  onChange,
-  value,
-  dateDisplayOptions = { hour: '2-digit', minute: '2-digit' },
-  endTime = undefined,
-  interval = 900,
-  locales = 'en-US',
-  placeholder = 'HH:MM',
-  startTime = undefined,
-  ...restProps
-}) => {
-  const generateTimes = () => {
-    const first = new Date();
-    first.setHours(startTime?.hour || 0, startTime?.minute || 0, 0, 0);
-
-    const last = new Date();
-    last.setHours(
-      endTime?.hour || first.getHours() + 24,
-      endTime?.minute || 0,
-      0,
-      0
-    );
-
-    const timeOptions = [];
-    const currentTime: Date = new Date(first);
-
-    while (currentTime < last) {
-      timeOptions.push({
-        value: currentTime.toISOString(),
-        label: currentTime.toLocaleTimeString(locales, dateDisplayOptions),
-      });
-      currentTime.setSeconds(first.getSeconds() + interval);
-    }
-
-    return timeOptions;
-  };
-
-  const options = generateTimes();
-
-  return (
-    <SelectInputNative
-      {...restProps}
-      id={id}
-      name={name}
-      label={label}
-      onChange={onChange}
-      options={options}
-      placeholder={placeholder}
-      value={value}
-    />
-  );
-};