chore(DateTimeRangePicker): rename to DateTimePicker to DateTimeRangePicker

.changeset/wild-pillows-agree.md

@@ -0,0 +1,5 @@
+---
+'@clickhouse/click-ui': minor
+---
+
+DateTimePicker has been renamed to DateTimeRangePicker

src/components/DatePicker/Common.tsx

@@ -194,7 +194,7 @@ export const DateRangePickerInput = ({
   );
 };
 
-interface DateTimePickerInputProps {
+interface DateTimeRangePickerInputProps {
   isActive: boolean;
   disabled: boolean;
   id?: string;
@@ -204,15 +204,15 @@ interface DateTimePickerInputProps {
   shouldShowSeconds?: boolean;
 }
 
-export const DateTimePickerInput = ({
+export const DateTimeRangePickerInput = ({
   isActive,
   disabled,
   id,
   placeholder,
   selectedEndDate,
   selectedStartDate,
   shouldShowSeconds,
-}: DateTimePickerInputProps) => {
+}: DateTimeRangePickerInputProps) => {
   const defaultId = useId();
 
   const dateTimeFormatter = shouldShowSeconds

src/components/DatePicker/DateTimePicker.stories.tsx → src/components/DatePicker/DateTimeRangePicker.stories.tsx

@@ -1,18 +1,18 @@
 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<typeof DateTimePicker> = {
-  component: DateTimePicker,
+const meta: Meta<typeof DateTimeRangePicker> = {
+  component: DateTimeRangePicker,
   args: {
     maxRangeLength: undefined,
     onSelectDateRange: (startDate: Date, endDate: Date) => {
       console.log('Date range selected: ', startDate, endDate);
     },
   },
   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 (
-      <DateTimePicker
+      <DateTimeRangePicker
         key="default"
         endDate={endDate}
         disabled={args.disabled}
@@ -44,15 +44,15 @@ export const Default: Story = {
   },
 };
 
-export const DateTimePickerLeftSide: Story = {
+export const DateTimeRangePickerLeftSide: Story = {
   render: (args: Args) => {
     const endDate = args.endDate ? new Date(args.endDate) : undefined;
     const startDate = args.startDate ? new Date(args.startDate) : undefined;
     const predefinedTimesList = getPredefinedTimePeriodsForDateTimePicker();
 
     return (
       <div style={{ alignItems: 'end', float: 'right' }}>
-        <DateTimePicker
+        <DateTimeRangePicker
           key="default"
           endDate={endDate}
           disabled={args.disabled}
@@ -78,7 +78,7 @@ export const PredefinedTimesDefault: Story = {
     const predefinedTimesList = getPredefinedTimePeriodsForDateTimePicker();
 
     return (
-      <DateTimePicker
+      <DateTimeRangePicker
         key="default"
         endDate={endDate}
         disabled={args.disabled}
@@ -195,7 +195,7 @@ export const PredefinedDatesScrollable: Story = {
     ];
 
     return (
-      <DateTimePicker
+      <DateTimeRangePicker
         key="default"
         endDate={endDate}
         disabled={args.disabled}
@@ -222,7 +222,7 @@ export const DateTimeWithMaxRange: Story = {
     const startDate = args.startDate ? new Date(args.startDate) : undefined;
 
     return (
-      <DateTimePicker
+      <DateTimeRangePicker
         key="default"
         endDate={endDate}
         disabled={args.disabled}

src/components/DatePicker/DateTimePicker.test.tsx → src/components/DatePicker/DateTimeRangePicker.test.tsx

@@ -1,14 +1,14 @@
 import { renderCUI } from '@/utils/test-utils';
-import { DateTimePicker } from './DateTimePicker';
+import { DateTimeRangePicker } from './DateTimeRangePicker';
 import userEvent from '@testing-library/user-event';
 import { getPredefinedTimePeriodsForDateTimePicker } from './utils';
 
-describe('DateTimePicker', () => {
+describe('DateTimeRangePicker', () => {
   it('opens the calendar on click', async () => {
     const handleSelectDate = vi.fn();
 
     const { getByTestId, queryByTestId } = renderCUI(
-      <DateTimePicker onSelectDateRange={handleSelectDate} />
+      <DateTimeRangePicker onSelectDateRange={handleSelectDate} />
     );
 
     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(
-      <DateTimePicker
+      <DateTimeRangePicker
         startDate={startDate}
         onSelectDateRange={handleSelectDate}
       />
@@ -38,7 +38,7 @@ describe('DateTimePicker', () => {
     const startDate = new Date('07-04-2020');
     const endDate = new Date('07-05-2020');
     const { getByTestId } = renderCUI(
-      <DateTimePicker
+      <DateTimeRangePicker
         startDate={startDate}
         endDate={endDate}
         onSelectDateRange={handleSelectDate}
@@ -54,7 +54,7 @@ describe('DateTimePicker', () => {
     const handleSelectDate = vi.fn();
     const endDate = new Date('07-05-2020');
     const { getByTestId } = renderCUI(
-      <DateTimePicker
+      <DateTimeRangePicker
         endDate={endDate}
         onSelectDateRange={handleSelectDate}
       />
@@ -78,7 +78,7 @@ describe('DateTimePicker', () => {
       const handleSelectDate = vi.fn();
 
       const { getByTestId, getByText } = renderCUI(
-        <DateTimePicker onSelectDateRange={handleSelectDate} />
+        <DateTimeRangePicker onSelectDateRange={handleSelectDate} />
       );
 
       await userEvent.click(getByTestId('datetimepicker-input'));
@@ -101,7 +101,7 @@ describe('DateTimePicker', () => {
       const handleSelectDate = vi.fn();
 
       const { getByTestId, getByText } = renderCUI(
-        <DateTimePicker onSelectDateRange={handleSelectDate} />
+        <DateTimeRangePicker onSelectDateRange={handleSelectDate} />
       );
 
       await userEvent.click(getByTestId('datetimepicker-input'));
@@ -129,7 +129,7 @@ describe('DateTimePicker', () => {
         const handleSelectDate = vi.fn();
 
         const { getByTestId, getByText } = renderCUI(
-          <DateTimePicker onSelectDateRange={handleSelectDate} />
+          <DateTimeRangePicker onSelectDateRange={handleSelectDate} />
         );
 
         await userEvent.click(getByTestId('datetimepicker-input'));
@@ -144,7 +144,7 @@ describe('DateTimePicker', () => {
         const handleSelectDate = vi.fn();
 
         const { getByRole, getByTestId, getByText } = renderCUI(
-          <DateTimePicker onSelectDateRange={handleSelectDate} />
+          <DateTimeRangePicker onSelectDateRange={handleSelectDate} />
         );
 
         await userEvent.click(getByTestId('datetimepicker-input'));
@@ -167,7 +167,7 @@ describe('DateTimePicker', () => {
         const handleSelectDate = vi.fn();
 
         const { getByRole, getByTestId, getByText } = renderCUI(
-          <DateTimePicker onSelectDateRange={handleSelectDate} />
+          <DateTimeRangePicker onSelectDateRange={handleSelectDate} />
         );
 
         await userEvent.click(getByTestId('datetimepicker-input'));
@@ -192,7 +192,7 @@ describe('DateTimePicker', () => {
         const handleSelectDate = vi.fn();
 
         const { getByRole, getByTestId, getByText } = renderCUI(
-          <DateTimePicker onSelectDateRange={handleSelectDate} />
+          <DateTimeRangePicker onSelectDateRange={handleSelectDate} />
         );
 
         await userEvent.click(getByTestId('datetimepicker-input'));
@@ -222,7 +222,7 @@ describe('DateTimePicker', () => {
         const handleSelectDate = vi.fn();
 
         const { getByTestId, getByText } = renderCUI(
-          <DateTimePicker onSelectDateRange={handleSelectDate} />
+          <DateTimeRangePicker onSelectDateRange={handleSelectDate} />
         );
 
         await userEvent.click(getByTestId('datetimepicker-input'));
@@ -249,7 +249,7 @@ describe('DateTimePicker', () => {
         const handleSelectDate = vi.fn();
 
         const { getByTestId, getByText } = renderCUI(
-          <DateTimePicker onSelectDateRange={handleSelectDate} />
+          <DateTimeRangePicker onSelectDateRange={handleSelectDate} />
         );
 
         await userEvent.click(getByTestId('datetimepicker-input'));
@@ -278,7 +278,7 @@ describe('DateTimePicker', () => {
         const handleSelectDate = vi.fn();
 
         const { getByTestId, getByText } = renderCUI(
-          <DateTimePicker onSelectDateRange={handleSelectDate} />
+          <DateTimeRangePicker onSelectDateRange={handleSelectDate} />
         );
 
         await userEvent.click(getByTestId('datetimepicker-input'));
@@ -296,7 +296,7 @@ describe('DateTimePicker', () => {
         const handleSelectDate = vi.fn();
 
         const { getByTestId, getByText } = renderCUI(
-          <DateTimePicker onSelectDateRange={handleSelectDate} />
+          <DateTimeRangePicker onSelectDateRange={handleSelectDate} />
         );
 
         await userEvent.click(getByTestId('datetimepicker-input'));
@@ -320,7 +320,7 @@ describe('DateTimePicker', () => {
         const handleSelectDate = vi.fn();
 
         const { getByTestId, getByText } = renderCUI(
-          <DateTimePicker onSelectDateRange={handleSelectDate} />
+          <DateTimeRangePicker onSelectDateRange={handleSelectDate} />
         );
 
         await userEvent.click(getByTestId('datetimepicker-input'));
@@ -359,7 +359,7 @@ describe('DateTimePicker', () => {
       const handleSelectDate = vi.fn();
 
       const { getByTestId, findByText } = renderCUI(
-        <DateTimePicker
+        <DateTimeRangePicker
           startDate={startDate}
           futureDatesDisabled={true}
           onSelectDateRange={handleSelectDate}
@@ -377,7 +377,7 @@ describe('DateTimePicker', () => {
       const handleSelectDate = vi.fn();
 
       const { getByTestId, getByText } = renderCUI(
-        <DateTimePicker
+        <DateTimeRangePicker
           startDate={startDate}
           onSelectDateRange={handleSelectDate}
           maxRangeLength={15}
@@ -409,7 +409,7 @@ describe('DateTimePicker', () => {
       const handleSelectDate = vi.fn();
 
       const { getByTestId, queryByTestId } = renderCUI(
-        <DateTimePicker onSelectDateRange={handleSelectDate} />
+        <DateTimeRangePicker onSelectDateRange={handleSelectDate} />
       );
 
       await userEvent.click(getByTestId('datetimepicker-input'));
@@ -422,7 +422,7 @@ describe('DateTimePicker', () => {
 
       const predefinedTimesList = getPredefinedTimePeriodsForDateTimePicker();
       const { getByTestId, getByText, queryByTestId } = renderCUI(
-        <DateTimePicker
+        <DateTimeRangePicker
           onSelectDateRange={handleSelectDate}
           predefinedTimesList={predefinedTimesList}
         />
@@ -441,7 +441,7 @@ describe('DateTimePicker', () => {
 
       const predefinedTimesList = getPredefinedTimePeriodsForDateTimePicker();
       const { getByTestId, getByText } = renderCUI(
-        <DateTimePicker
+        <DateTimeRangePicker
           onSelectDateRange={handleSelectDate}
           predefinedTimesList={predefinedTimesList}
         />

src/components/DatePicker/DateTimePicker.tsx → 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<boolean>(false);
   const [selectedStartDate, setSelectedStartDate] = useState<Date>();
   const [selectedEndDate, setSelectedEndDate] = useState<Date>();
@@ -825,7 +830,7 @@ export const DateTimePicker = ({
         disabled={disabled}
         onKeyDown={onTriggerKeyDown}
       >
-        <DateTimePickerInput
+        <DateTimeRangePickerInput
           data-testid="datepicker-input-container"
           disabled={disabled}
           isActive={isOpen}

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';