From aa9957216118c7808b185fb52b80340e8c327dec Mon Sep 17 00:00:00 2001 From: Bucky Schwarz Date: Fri, 6 Mar 2026 15:55:34 -0500 Subject: [PATCH 1/2] chore(DateTimeRangePicker): rename to DateTimePicker to DateTimeRangePicker --- src/components/DatePicker/Common.tsx | 6 +-- ...es.tsx => DateTimeRangePicker.stories.tsx} | 20 ++++----- ....test.tsx => DateTimeRangePicker.test.tsx} | 44 +++++++++---------- ...TimePicker.tsx => DateTimeRangePicker.tsx} | 15 ++++--- 4 files changed, 45 insertions(+), 40 deletions(-) rename src/components/DatePicker/{DateTimePicker.stories.tsx => DateTimeRangePicker.stories.tsx} (94%) rename src/components/DatePicker/{DateTimePicker.test.tsx => DateTimeRangePicker.test.tsx} (92%) rename src/components/DatePicker/{DateTimePicker.tsx => DateTimeRangePicker.tsx} (99%) diff --git a/src/components/DatePicker/Common.tsx b/src/components/DatePicker/Common.tsx index 6f27b226a..f989ea6b8 100644 --- a/src/components/DatePicker/Common.tsx +++ b/src/components/DatePicker/Common.tsx @@ -194,7 +194,7 @@ export const DateRangePickerInput = ({ ); }; -interface DateTimePickerInputProps { +interface DateTimeRangePickerInputProps { isActive: boolean; disabled: boolean; id?: string; @@ -204,7 +204,7 @@ interface DateTimePickerInputProps { shouldShowSeconds?: boolean; } -export const DateTimePickerInput = ({ +export const DateTimeRangePickerInput = ({ isActive, disabled, id, @@ -212,7 +212,7 @@ export const DateTimePickerInput = ({ selectedEndDate, selectedStartDate, shouldShowSeconds, -}: DateTimePickerInputProps) => { +}: DateTimeRangePickerInputProps) => { const defaultId = useId(); const dateTimeFormatter = shouldShowSeconds diff --git a/src/components/DatePicker/DateTimePicker.stories.tsx b/src/components/DatePicker/DateTimeRangePicker.stories.tsx similarity index 94% rename from src/components/DatePicker/DateTimePicker.stories.tsx rename to src/components/DatePicker/DateTimeRangePicker.stories.tsx index ee33724c9..e8b8b527a 100644 --- a/src/components/DatePicker/DateTimePicker.stories.tsx +++ b/src/components/DatePicker/DateTimeRangePicker.stories.tsx @@ -1,10 +1,10 @@ import { Args, Meta, StoryObj } from '@storybook/react-vite'; -import { DateTimePicker } from './DateTimePicker'; +import { DateTimeRangePicker } from './DateTimeRangePicker'; import { DateRangeListItem, getPredefinedTimePeriodsForDateTimePicker } from './utils'; import dayjs from 'dayjs'; -const meta: Meta = { - component: DateTimePicker, +const meta: Meta = { + component: DateTimeRangePicker, args: { maxRangeLength: undefined, onSelectDateRange: (startDate: Date, endDate: Date) => { @@ -12,7 +12,7 @@ const meta: Meta = { }, }, tags: ['autodocs'], - title: 'Display/DateTimePicker', + title: 'Display/DateTimeRangePicker', }; export default meta; @@ -28,7 +28,7 @@ export const Default: Story = { const startDate = args.startDate ? new Date(args.startDate) : undefined; return ( - { const endDate = args.endDate ? new Date(args.endDate) : undefined; const startDate = args.startDate ? new Date(args.startDate) : undefined; @@ -52,7 +52,7 @@ export const DateTimePickerLeftSide: Story = { return (
- { +describe('DateTimeRangePicker', () => { it('opens the calendar on click', async () => { const handleSelectDate = vi.fn(); const { getByTestId, queryByTestId } = renderCUI( - + ); expect(queryByTestId('datepicker-calendar-container')).not.toBeInTheDocument(); @@ -22,7 +22,7 @@ describe('DateTimePicker', () => { const handleSelectDate = vi.fn(); const startDate = new Date('07-04-2020'); const { getByTestId } = renderCUI( - @@ -38,7 +38,7 @@ describe('DateTimePicker', () => { const startDate = new Date('07-04-2020'); const endDate = new Date('07-05-2020'); const { getByTestId } = renderCUI( - { const handleSelectDate = vi.fn(); const endDate = new Date('07-05-2020'); const { getByTestId } = renderCUI( - @@ -78,7 +78,7 @@ describe('DateTimePicker', () => { const handleSelectDate = vi.fn(); const { getByTestId, getByText } = renderCUI( - + ); await userEvent.click(getByTestId('datetimepicker-input')); @@ -101,7 +101,7 @@ describe('DateTimePicker', () => { const handleSelectDate = vi.fn(); const { getByTestId, getByText } = renderCUI( - + ); await userEvent.click(getByTestId('datetimepicker-input')); @@ -129,7 +129,7 @@ describe('DateTimePicker', () => { const handleSelectDate = vi.fn(); const { getByTestId, getByText } = renderCUI( - + ); await userEvent.click(getByTestId('datetimepicker-input')); @@ -144,7 +144,7 @@ describe('DateTimePicker', () => { const handleSelectDate = vi.fn(); const { getByRole, getByTestId, getByText } = renderCUI( - + ); await userEvent.click(getByTestId('datetimepicker-input')); @@ -167,7 +167,7 @@ describe('DateTimePicker', () => { const handleSelectDate = vi.fn(); const { getByRole, getByTestId, getByText } = renderCUI( - + ); await userEvent.click(getByTestId('datetimepicker-input')); @@ -192,7 +192,7 @@ describe('DateTimePicker', () => { const handleSelectDate = vi.fn(); const { getByRole, getByTestId, getByText } = renderCUI( - + ); await userEvent.click(getByTestId('datetimepicker-input')); @@ -222,7 +222,7 @@ describe('DateTimePicker', () => { const handleSelectDate = vi.fn(); const { getByTestId, getByText } = renderCUI( - + ); await userEvent.click(getByTestId('datetimepicker-input')); @@ -249,7 +249,7 @@ describe('DateTimePicker', () => { const handleSelectDate = vi.fn(); const { getByTestId, getByText } = renderCUI( - + ); await userEvent.click(getByTestId('datetimepicker-input')); @@ -278,7 +278,7 @@ describe('DateTimePicker', () => { const handleSelectDate = vi.fn(); const { getByTestId, getByText } = renderCUI( - + ); await userEvent.click(getByTestId('datetimepicker-input')); @@ -296,7 +296,7 @@ describe('DateTimePicker', () => { const handleSelectDate = vi.fn(); const { getByTestId, getByText } = renderCUI( - + ); await userEvent.click(getByTestId('datetimepicker-input')); @@ -320,7 +320,7 @@ describe('DateTimePicker', () => { const handleSelectDate = vi.fn(); const { getByTestId, getByText } = renderCUI( - + ); await userEvent.click(getByTestId('datetimepicker-input')); @@ -359,7 +359,7 @@ describe('DateTimePicker', () => { const handleSelectDate = vi.fn(); const { getByTestId, findByText } = renderCUI( - { const handleSelectDate = vi.fn(); const { getByTestId, getByText } = renderCUI( - { const handleSelectDate = vi.fn(); const { getByTestId, queryByTestId } = renderCUI( - + ); await userEvent.click(getByTestId('datetimepicker-input')); @@ -422,7 +422,7 @@ describe('DateTimePicker', () => { const predefinedTimesList = getPredefinedTimePeriodsForDateTimePicker(); const { getByTestId, getByText, queryByTestId } = renderCUI( - @@ -441,7 +441,7 @@ describe('DateTimePicker', () => { const predefinedTimesList = getPredefinedTimePeriodsForDateTimePicker(); const { getByTestId, getByText } = renderCUI( - diff --git a/src/components/DatePicker/DateTimePicker.tsx b/src/components/DatePicker/DateTimeRangePicker.tsx similarity index 99% rename from src/components/DatePicker/DateTimePicker.tsx rename to src/components/DatePicker/DateTimeRangePicker.tsx index 8d3dd26f0..8a7697928 100644 --- a/src/components/DatePicker/DateTimePicker.tsx +++ b/src/components/DatePicker/DateTimeRangePicker.tsx @@ -12,7 +12,12 @@ import { import { isSameDate, UseCalendarOptions } from '@h6s/calendar'; import { styled } from 'styled-components'; import { Dropdown } from '../Dropdown/Dropdown'; -import { Body, CalendarRenderer, DateTimePickerInput, DateTableCell } from './Common'; +import { + Body, + CalendarRenderer, + DateTimeRangePickerInput, + DateTableCell, +} from './Common'; import { Container } from '../Container/Container'; import { Panel } from '../Panel/Panel'; import { Icon } from '../Icon/Icon'; @@ -699,7 +704,7 @@ const TabbedCalendar = ({ ); }; -export interface DateTimePickerProps { +export interface DateTimeRangePickerProps { endDate?: Date; disabled?: boolean; futureDatesDisabled?: boolean; @@ -713,7 +718,7 @@ export interface DateTimePickerProps { startDate?: Date; } -export const DateTimePicker = ({ +export const DateTimeRangePicker = ({ endDate, startDate, disabled = false, @@ -725,7 +730,7 @@ export const DateTimePicker = ({ placeholder = 'start date – end date', predefinedTimesList, shouldShowSeconds, -}: DateTimePickerProps) => { +}: DateTimeRangePickerProps) => { const [isOpen, setIsOpen] = useState(false); const [selectedStartDate, setSelectedStartDate] = useState(); const [selectedEndDate, setSelectedEndDate] = useState(); @@ -825,7 +830,7 @@ export const DateTimePicker = ({ disabled={disabled} onKeyDown={onTriggerKeyDown} > - Date: Fri, 6 Mar 2026 16:00:18 -0500 Subject: [PATCH 2/2] changeset --- .changeset/wild-pillows-agree.md | 5 +++++ src/components/DatePicker/index.ts | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/wild-pillows-agree.md diff --git a/.changeset/wild-pillows-agree.md b/.changeset/wild-pillows-agree.md new file mode 100644 index 000000000..681636079 --- /dev/null +++ b/.changeset/wild-pillows-agree.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': minor +--- + +DateTimePicker has been renamed to DateTimeRangePicker diff --git a/src/components/DatePicker/index.ts b/src/components/DatePicker/index.ts index f60e8bb16..f7be7ad0d 100644 --- a/src/components/DatePicker/index.ts +++ b/src/components/DatePicker/index.ts @@ -1,2 +1,7 @@ export { DatePicker } from './DatePicker'; +export { DateRangePicker } from './DateRangePicker'; +export { DateTimeRangePicker } from './DateTimeRangePicker'; + export type { DatePickerProps } from './DatePicker.types'; +export type { DateRangePickerProps } from './DateRangePicker'; +export type { DateTimeRangePickerProps } from './DateTimeRangePicker';