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

package/dist/index.d.ts

@@ -3,12 +3,11 @@ export * from './components/AspectRatio/AspectRatio';
 export * from './components/Badge/Badge';
 export * from './components/Box/Box';
 export * from './components/Button/Button';
+export * from './components/Calendar/Calendar';
 export * from './components/Card/Card';
 export * from './components/CheckboxInput/components/Checkbox';
 export * from './components/CheckboxInput/CheckboxInput';
 export * from './components/Collapsible/Collapsible';
-export * from './components/DateInput/DateInput';
-export * from './components/DatePicker/DatePicker';
 export * from './components/Details/Details';
 export * from './components/Details/DetailsSummary';
 export * from './components/Drawer/Drawer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "6.14.0",
+  "version": "7.0.0-beta.1",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -75,7 +75,7 @@
     "classnames": "^2.5.1",
     "date-fns": "^2.30.0",
     "formik": "^2.4.6",
-    "react-datepicker": "^6.9.0",
+    "react-day-picker": "^9.11.3",
     "react-focus-lock": "^2.13.2",
     "react-modal": "^3.16.3",
     "react-remove-scroll": "^2.6.3",
@@ -100,7 +100,6 @@
     "@tsconfig/vite-react": "^3.0.2",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.5",
-    "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^18.3.0",
     "@types/react-modal": "^3.16.3",
     "autoprefixer": "^10.4.20",

package/src/components/Calendar/Calendar.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as Stories from './Calendar.stories';
+
+<Meta of={Stories} />
+
+# Calendar
+
+Calendar component for selecting dates and date ranges.
+
+This component is extended from [React DayPicker](https://daypicker.dev/).
+
+[API Reference](https://daypicker.dev/api)
+
+## Basic Usage
+
+<Canvas of={Stories.BasicUsage}   sourceState="shown"/>
+
+## Range Selection
+
+<Canvas of={Stories.RangeSelection} sourceState="shown" />
+
+## Month/Year Dropdown
+
+<Canvas of={Stories.Dropdown} sourceState="shown" />
+
+## Footer Content
+
+<Canvas of={Stories.FooterContent} sourceState="shown" />

package/src/components/Calendar/Calendar.stories.tsx

@@ -0,0 +1,217 @@
+import Calendar from './Calendar';
+
+import type { Meta } from '@storybook/react-vite';
+import React, { useState, ChangeEvent } from 'react';
+import { type DateRange } from 'react-day-picker';
+import { TextInput } from '../TextInput/TextInput';
+import { format, isValid, parse } from 'date-fns';
+
+const meta: Meta<typeof Calendar> = {
+  title: 'Components/Calendar',
+  component: Calendar,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+export default meta;
+
+export const BasicUsage = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date(2025, 11, 12));
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      defaultMonth={date}
+      onSelect={setDate}
+      disabled={{
+        before: new Date(2025, 11, 12),
+      }}
+    />
+  );
+};
+
+export const RangeSelection = () => {
+  const [dateRange, setDateRange] = useState<DateRange | undefined>({
+    from: new Date(2025, 5, 21),
+    to: new Date(2025, 6, 15),
+  });
+
+  return (
+    <Calendar
+      mode="range"
+      defaultMonth={dateRange?.from}
+      selected={dateRange}
+      onSelect={setDateRange}
+      numberOfMonths={2}
+    />
+  );
+};
+
+export const MultipleSelection = () => {
+  const [dates, setDates] = useState<Date[] | undefined>([
+    new Date(2025, 5, 21),
+    new Date(2025, 6, 15),
+    new Date(2025, 6, 16),
+  ]);
+
+  return (
+    <Calendar
+      mode="multiple"
+      selected={dates}
+      onSelect={setDates}
+      defaultMonth={dates ? dates[0] : undefined}
+      numberOfMonths={2}
+    />
+  );
+};
+
+export const Dropdown = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date(2025, 5, 16));
+
+  return (
+    <Calendar
+      mode="single"
+      captionLayout="dropdown"
+      selected={date}
+      defaultMonth={date}
+      onSelect={setDate}
+    />
+  );
+};
+
+export const FooterContent = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date(2025, 5, 16));
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      defaultMonth={date}
+      onSelect={setDate}
+      footer={
+        date
+          ? `You picked ${date.toLocaleDateString()}.`
+          : 'Please pick a date.'
+      }
+    />
+  );
+};
+
+export const DateInput = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(
+    new Date(2017, 4, 21)
+  );
+  const [inputValue, setInputValue] = useState('05/21/2017');
+
+  // Hold the month in state to control the calendar when the input changes
+  const [month, setMonth] = useState(new Date(2017, 4, 21));
+
+  // Update input when calendar changes
+  const handleCalendarSelect = (date: Date | undefined) => {
+    if (!date) {
+      setInputValue('');
+      setSelectedDate(undefined);
+    } else {
+      setSelectedDate(date);
+      setMonth(date);
+      setInputValue(format(date, 'MM/dd/yyyy'));
+    }
+  };
+
+  // Update calendar when input changes
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value); // Keep the input value in sync
+
+    const parsedDate = parse(e.target.value, 'MM/dd/yyyy', new Date());
+
+    if (isValid(parsedDate)) {
+      setSelectedDate(parsedDate);
+      setMonth(parsedDate);
+    } else {
+      setSelectedDate(undefined);
+    }
+  };
+
+  return (
+    <div>
+      <TextInput
+        id="date-input"
+        label="Date"
+        type="text"
+        value={inputValue}
+        onChange={handleInputChange}
+      />
+      <div style={{ marginTop: 16 }}>
+        <Calendar
+          month={month}
+          onMonthChange={setMonth}
+          mode="single"
+          selected={selectedDate}
+          onSelect={handleCalendarSelect}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const DateRangeInput = () => {
+  const [range, setRange] = useState<DateRange>({
+    from: undefined,
+    to: undefined,
+  });
+  const [inputValue, setInputValue] = useState('');
+
+  // Format range as string using date-fns
+  const formatRange = (from?: Date, to?: Date) => {
+    if (!from && !to) return '';
+    const fromStr = from && isValid(from) ? format(from, 'MM/dd/yyyy') : '';
+    const toStr = to && isValid(to) ? format(to, 'MM/dd/yyyy') : '';
+    return fromStr && toStr ? `${fromStr} - ${toStr}` : fromStr || toStr;
+  };
+
+  // Parse string to range using date-fns
+  const parseRange = (value: string): DateRange => {
+    const [fromStr, toStr] = value.split('-').map((s) => s.trim());
+    const from = fromStr ? parse(fromStr, 'MM/dd/yyyy', new Date()) : undefined;
+    const to = toStr ? parse(toStr, 'MM/dd/yyyy', new Date()) : undefined;
+    return {
+      from: from && isValid(from) ? from : undefined,
+      to: to && isValid(to) ? to : undefined,
+    };
+  };
+
+  // Update input when calendar changes
+  const handleCalendarSelect = (selected: DateRange | undefined) => {
+    setRange(selected ?? { from: undefined, to: undefined });
+    setInputValue(formatRange(selected?.from, selected?.to));
+  };
+
+  // Update calendar when input changes
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+    setRange(parseRange(value));
+  };
+
+  return (
+    <div style={{ maxWidth: 320 }}>
+      <TextInput
+        id="date-range-input"
+        label="Date Range"
+        type="text"
+        value={inputValue}
+        onChange={handleInputChange}
+        placeholder="MM/DD/YYYY - MM/DD/YYYY"
+      />
+      <div style={{ marginTop: 16 }}>
+        <Calendar
+          mode="range"
+          selected={range}
+          onSelect={handleCalendarSelect}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import classNames from 'classnames';
+import { DayPicker, getDefaultClassNames } from 'react-day-picker';
+import 'react-day-picker/style.css';
+import { Icon } from '../Icon/Icon';
+
+function Calendar({
+  captionLayout = 'label',
+  className,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      className={className ? className : 'p-lg bw-sm br-sm'}
+      captionLayout={captionLayout}
+      style={
+        {
+          '--rdp-accent-color': 'var(--color-font-base)',
+          '--rdp-accent-background-color':
+            'var(--color-background-color-button-primary)',
+          '--rdp-day-height': 'var(--size-dimension-4xl)',
+          '--rdp-day-width': 'var(--size-dimension-4xl)',
+          '--rdp-day_button-height': 'var(--size-dimension-4xl)',
+          '--rdp-day_button-width': 'var(--size-dimension-4xl)',
+          '--rdp-day_button-border-radius': '0',
+          '--rdp-selected-border': '1px solid var(--color-font-base)',
+          '--rdp-today-color': 'var(--rdp-accent-color)',
+          '--rdp-nav-height': 'var(--size-dimension-4xl)',
+          '--rdp-range_middle-background-color':
+            'var(--color-background-tertiary)',
+          '--rdp-range_middle-color': 'var(--color-font-base)',
+          '--rdp-range_start-color': 'var(--color-font-inverse)',
+          '--rdp-range_end-color': 'var(--color-font-inverse)',
+        } as React.CSSProperties
+      }
+      classNames={{
+        root: classNames(
+          defaultClassNames.root,
+          'w-fit font-color-secondary font-size-sm'
+        ),
+        months: classNames(
+          defaultClassNames.months,
+          'display-flex flex-direction-column flex-direction-row-tablet g-md position-relative'
+        ),
+        nav: classNames(
+          defaultClassNames.nav,
+          'display-flex flex-direction-row w-100 g-md position-absolute h-4xl align-items-center justify-content-space-between'
+        ),
+        button_previous: classNames(
+          'p-0 select-none background-color-transparent bw-0',
+          defaultClassNames.button_previous
+        ),
+        button_next: classNames(
+          'p-0 select-none background-color-transparent bw-0',
+          defaultClassNames.button_next
+        ),
+        month_caption: classNames(
+          'display-flex align-items-center justify-content-center font-size-sm h-4xl'
+        ),
+        weekday: classNames(
+          defaultClassNames.weekday,
+          'font-weight-normal font-color-secondary'
+        ),
+        today: 'font-weight-bold',
+        selected: classNames(
+          'font-color-inverse background-color-inverse hover:font-color-inverse'
+        ),
+        month_grid: classNames(defaultClassNames.month_grid, 'm-top-lg'),
+        day: classNames(defaultClassNames.day, 'hover:font-color-base'),
+        day_button: classNames(defaultClassNames.day_button),
+        range_middle: classNames(defaultClassNames.range_middle),
+        table: classNames('w-100'),
+        dropdowns: classNames(defaultClassNames.dropdowns, 'h-100'),
+        caption_label: classNames(defaultClassNames.caption_label, 'g-2xs'),
+      }}
+      components={{
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === 'left') {
+            return (
+              <Icon
+                name="caret-left"
+                className={classNames(className)}
+                {...props}
+                size="md"
+              />
+            );
+          }
+
+          if (orientation === 'right') {
+            return (
+              <Icon
+                name="caret-right"
+                className={classNames(className)}
+                {...props}
+                size="md"
+              />
+            );
+          }
+
+          return (
+            <Icon
+              name="caret-sm-down"
+              className={classNames(className)}
+              {...props}
+              size="md"
+            />
+          );
+        },
+      }}
+      {...props}
+    />
+  );
+}
+
+export default Calendar;

package/src/components/Formik/Formik.stories.tsx

@@ -6,7 +6,6 @@ import { FormikSelectInput } from './FormikSelectInput/FormikSelectInput';
 import { FormikSelectInputNative } from './FormikSelectInputNative/FormikSelectInputNative';
 import { FormikRadioGroup } from './FormikRadioGroup/FormikRadioGroup';
 import { FormikTextareaInput } from './FormikTextareaInput/FormikTextareaInput';
-import { DateInput } from '../DateInput/DateInput';
 import { FormikSwitch } from './FormikSwitch/FormikSwitch';
 import { Button } from '../Button/Button';
 import { Box } from '../Box/Box';
@@ -21,6 +20,7 @@ import { Tooltip, TooltipContent, TooltipProvider } from '../Tooltip/Tooltip';
 import { TooltipTrigger } from '@radix-ui/react-tooltip';
 import { FormikToggleGroupMulti } from './FormikToggleGroupMulti/FormikToggleGroupMulti';
 import { Icon } from '../Icon/Icon';
+import Calendar from '../Calendar/Calendar';
 
 const meta = {
   title: 'Patterns/Formik Form',
@@ -185,7 +185,7 @@ export const FormikForm = () =>
             sizes: null,
             timePicker: null,
             timePickerNative: null,
-            dateInput: '',
+            dateInput: new Date(2017, 4, 21),
             message: '',
             country: '',
             availability: '99',
@@ -194,7 +194,7 @@ export const FormikForm = () =>
           validate={handleValidation}
           onSubmit={handleSubmit}
         >
-          {({ isSubmitting, values, setFieldValue, handleBlur, errors }) => (
+          {({ isSubmitting, values, setFieldValue, errors }) => (
             <Form noValidate>
               <Box gap="3xl">
                 <Field
@@ -371,25 +371,14 @@ export const FormikForm = () =>
                     </ToggleGroupItem>
                   ))}
                 </FormikToggleGroupMulti>
-
-                <DateInput
-                  datePickerProps={{
-                    onChange: (date) => {
-                      setFieldValue('dateInput', date as Date);
-                    },
-                    selected: values.dateInput as unknown as Date,
-                  }}
-                  textInputProps={{
-                    label: 'Date Input',
-                    name: 'dateInput',
-                    id: 'dateInput',
-                    error: errors.dateInput,
-                    isRequired: true,
-                    onClear: () => {
-                      setFieldValue('dateInput', null);
-                    },
-                    onBlur: handleBlur,
+                <Calendar
+                  mode="single"
+                  required={true}
+                  selected={values.dateInput}
+                  onSelect={(date: Date | undefined) => {
+                    setFieldValue('dateInput', date);
                   }}
+                  month={values.dateInput}
                 />
                 <Button type="submit" isLoading={isSubmitting}>
                   Submit

package/src/components/Modal/Modal.stories.tsx

@@ -37,7 +37,9 @@ export const BasicUsage = () => {
           id="titleBasic"
           title="The Modal Title"
           onDismiss={closeModal}
-        />
+        >
+          additional content in header
+        </Modal.Header>
         <Modal.Body>Modal content</Modal.Body>
         <Modal.Footer>
           <Button variant="secondary" onClick={closeModal} shadow="sm">

package/src/components/Modal/components/ModalHeader/ModalHeader.tsx

@@ -1,8 +1,11 @@
 import React, { FC } from 'react';
-import { Box } from '../../../Box/Box';
+import { Box, BoxProps } from '../../../Box/Box';
 import { Button } from '../../../Button/Button';
 
-export type ModalHeaderProps = {
+export type ModalHeaderProps = Omit<
+  BoxProps,
+  'as' | 'radius' | 'justifyContent'
+> & {
   /**
    * id of the element containing the title, used by the Modal `aria-labelledby` prop
    */
@@ -11,6 +14,10 @@ export type ModalHeaderProps = {
    * Modal's header title
    */
   title?: string;
+  /**
+   * Additional content to render in the modal header, displayed alongside the title.
+   */
+  children?: React.ReactNode;
   /**
    * If defined, will render a 'x' close button on the right side of the ModalHeader
    */
@@ -20,24 +27,35 @@ export type ModalHeaderProps = {
 export const ModalHeader: FC<ModalHeaderProps> = ({
   id,
   onDismiss,
+  direction = 'row',
+  alignItems = 'center',
   title = undefined,
+  children,
+  style,
+  ...restProps
 }) => {
-  const justifyContentValue =
-    title === undefined && onDismiss ? 'flex-end' : 'space-between';
+  const justifyContentValue = title || children ? 'space-between' : 'flex-end';
 
   return (
     <Box
-      direction="row"
-      alignItems="center"
+      direction={direction}
+      alignItems={alignItems}
       justifyContent={justifyContentValue}
       gap="3xl"
       style={{
         flexShrink: 0,
+        ...style,
       }}
+      {...restProps}
     >
-      {title && (
-        <Box as="h4" fontSize={{ base: 'md', tablet: 'lg' }} id={id}>
-          {title}
+      {(title || children) && (
+        <Box gap="2xs">
+          {title && (
+            <Box as="h4" fontSize={{ base: 'md', tablet: 'lg' }} id={id}>
+              {title}
+            </Box>
+          )}
+          {children}
         </Box>
       )}
       {onDismiss && (

package/src/index.ts

@@ -3,12 +3,11 @@ export * from './components/AspectRatio/AspectRatio';
 export * from './components/Badge/Badge';
 export * from './components/Box/Box';
 export * from './components/Button/Button';
+export * from './components/Calendar/Calendar';
 export * from './components/Card/Card';
 export * from './components/CheckboxInput/components/Checkbox';
 export * from './components/CheckboxInput/CheckboxInput';
 export * from './components/Collapsible/Collapsible';
-export * from './components/DateInput/DateInput';
-export * from './components/DatePicker/DatePicker';
 export * from './components/Details/Details';
 export * from './components/Details/DetailsSummary';
 export * from './components/Drawer/Drawer';

package/src/styles/utilities.scss

@@ -39,3 +39,11 @@
 .hover-show-child:hover .hover-child {
   opacity: 1;
 }
+
+.top-0 {
+  top: 0;
+}
+
+.inset-x-0 {
+  inset-inline: 0;
+}

package/dist/components/DateInput/DateInput.d.ts

@@ -1,57 +0,0 @@
-import { FC } from 'react';
-import { DatePickerProps } from '../DatePicker/DatePicker';
-import { TextInputProps } from '../TextInput/TextInput';
-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;
-}
-export declare const DateInput: FC<DateInputProps>;

package/dist/components/DateInput/DateInput.stories.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import type { Meta } from '@storybook/react-vite';
-import { DateInput } from './DateInput';
-declare const meta: Meta<typeof DateInput>;
-export default meta;
-export declare const Basic: () => React.JSX.Element;
-export declare const Default: () => React.JSX.Element;
-export declare const DateRange: () => React.JSX.Element;
-export declare const WithMinAndMaxDates: () => React.JSX.Element;
-export declare const CustomDateFormat: () => React.JSX.Element;
-export declare const InputBlurEvent: () => React.JSX.Element;