feat: renames Datepicker components to DatePicker

Author: geotrev

packages/datepickers/README.md

@@ -14,26 +14,26 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 
 ## Usage
 
-The `<Datepicker>` component allows users to select a
+The `<DatePicker>` component allows users to select a
 date with a dropdown selection or a variety of localizable
-text formats. Internally, the `<Datepicker>` uses [date-fns](https://date-fns.org/)
+text formats. Internally, the `<DatePicker>` uses [date-fns](https://date-fns.org/)
 for it's date calculations and the [Intl.DateTimeFormat utility](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)
 for localization support.
 
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
 import { Field, Label, Input } from '@zendeskgarden/react-forms';
-import { Datepicker } from '@zendeskgarden/react-datepickers';
+import { DatePicker } from '@zendeskgarden/react-datepickers';
 
 /**
  * Place a `ThemeProvider` at the root of your React application
  */
 <ThemeProvider>
   <Field>
     <Label>Example datepicker</Label>
-    <Datepicker value={new Date()} onChange={selectedDate => console.log(selectedDate)}>
+    <DatePicker value={new Date()} onChange={selectedDate => console.log(selectedDate)}>
       <Input />
-    </Datepicker>
+    </DatePicker>
   </Field>
 </ThemeProvider>;
 ```

packages/datepickers/demo/datepicker.stories.mdx

@@ -1,11 +1,11 @@
 import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
 import { useArgs } from '@storybook/client-api';
-import { Datepicker } from '@zendeskgarden/react-datepickers';
-import { DatepickerStory } from './stories/DatepickerStory';
+import { DatePicker } from '@zendeskgarden/react-datepickers';
+import { DatePickerStory } from './stories/DatePickerStory';
 import { DATE_STYLE_OPTIONS } from './stories/data';
 import README from '../README.md';
 
-<Meta title="Packages/Datepickers/Datepicker" component={Datepicker} />
+<Meta title="Packages/DatePickers/DatePicker" component={DatePicker} />
 
 # API
 
@@ -15,7 +15,7 @@ import README from '../README.md';
 
 <Canvas>
   <Story
-    name="Datepicker"
+    name="DatePicker"
     args={{ dateStyle: DATE_STYLE_OPTIONS[1], isAnimated: true }}
     argTypes={{
       value: { control: 'date' },
@@ -38,7 +38,7 @@ import README from '../README.md';
     {args => {
       const updateArgs = useArgs()[1];
       const handleChange = value => updateArgs({ value });
-      return <DatepickerStory {...args} onChange={handleChange} />;
+      return <DatePickerStory {...args} onChange={handleChange} />;
     }}
   </Story>
 </Canvas>

packages/datepickers/demo/datepickerRange.stories.mdx

@@ -1,17 +1,17 @@
 import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
 import { useArgs } from '@storybook/client-api';
-import { DatepickerRange } from '@zendeskgarden/react-datepickers';
-import { DatepickerRangeStory } from './stories/DatepickerRangeStory';
+import { DatePickerRange } from '@zendeskgarden/react-datepickers';
+import { DatePickerRangeStory } from './stories/DatePickerRangeStory';
 import { DATE_STYLE_OPTIONS } from './stories/data';
 import README from '../README.md';
 
 <Meta
-  title="Packages/Datepickers/DatepickerRange"
-  component={DatepickerRange}
+  title="Packages/DatePickers/DatePickerRange"
+  component={DatePickerRange}
   subcomponents={{
-    'DatepickerRange.Calendar': DatepickerRange.Calendar,
-    'DatepickerRange.End': DatepickerRange.End,
-    'DatepickerRange.Start': DatepickerRange.Start
+    'DatePickerRange.Calendar': DatePickerRange.Calendar,
+    'DatePickerRange.End': DatePickerRange.End,
+    'DatePickerRange.Start': DatePickerRange.Start
   }}
 />
 
@@ -23,7 +23,7 @@ import README from '../README.md';
 
 <Canvas>
   <Story
-    name="DatepickerRange"
+    name="DatePickerRange"
     args={{ dateStyle: DATE_STYLE_OPTIONS[1] }}
     argTypes={{
       startValue: { control: 'date' },
@@ -47,7 +47,7 @@ import README from '../README.md';
     {args => {
       const updateArgs = useArgs()[1];
       const handleChange = ({ endValue, startValue }) => updateArgs({ endValue, startValue });
-      return <DatepickerRangeStory {...args} onChange={handleChange} />;
+      return <DatePickerRangeStory {...args} onChange={handleChange} />;
     }}
   </Story>
 </Canvas>

packages/datepickers/demo/stories/DatepickerRangeStory.tsx

@@ -9,44 +9,44 @@ import React from 'react';
 import { Story } from '@storybook/react';
 import { Col, Grid, Row } from '@zendeskgarden/react-grid';
 import { Field, Input, Label } from '@zendeskgarden/react-forms';
-import { DatepickerRange, IDatepickerRangeProps } from '@zendeskgarden/react-datepickers';
+import { DatePickerRange, IDatePickerRangeProps } from '@zendeskgarden/react-datepickers';
 import { DATE_STYLE } from './types';
 
-interface IArgs extends IDatepickerRangeProps {
+interface IArgs extends IDatePickerRangeProps {
   dateStyle: DATE_STYLE;
 }
 
-export const DatepickerRangeStory: Story<IArgs> = ({ dateStyle, isCompact, ...args }) => {
+export const DatePickerRangeStory: Story<IArgs> = ({ dateStyle, isCompact, ...args }) => {
   const formatDate = (date: Date) =>
     new Intl.DateTimeFormat(args.locale, { dateStyle }).format(date);
 
   return (
-    <DatepickerRange {...args} formatDate={formatDate} isCompact={isCompact}>
+    <DatePickerRange {...args} formatDate={formatDate} isCompact={isCompact}>
       <Grid>
         <Row>
           <Col size="auto">
             <Field>
-              <Label hidden>{(DatepickerRange.Start as any).displayName}</Label>
-              <DatepickerRange.Start>
+              <Label hidden>{(DatePickerRange.Start as any).displayName}</Label>
+              <DatePickerRange.Start>
                 <Input isCompact={isCompact} style={{ width: isCompact ? 224 : 280 }} />
-              </DatepickerRange.Start>
+              </DatePickerRange.Start>
             </Field>
           </Col>
           <Col size="auto">
             <Field>
-              <Label hidden>{(DatepickerRange.End as any).displayName}</Label>
-              <DatepickerRange.End>
+              <Label hidden>{(DatePickerRange.End as any).displayName}</Label>
+              <DatePickerRange.End>
                 <Input isCompact={isCompact} style={{ width: isCompact ? 224 : 280 }} />
-              </DatepickerRange.End>
+              </DatePickerRange.End>
             </Field>
           </Col>
         </Row>
         <Row>
           <Col>
-            <DatepickerRange.Calendar />
+            <DatePickerRange.Calendar />
           </Col>
         </Row>
       </Grid>
-    </DatepickerRange>
+    </DatePickerRange>
   );
 };

packages/datepickers/demo/stories/DatepickerStory.tsx

@@ -9,14 +9,14 @@ import React from 'react';
 import { Story } from '@storybook/react';
 import { Col, Grid, Row } from '@zendeskgarden/react-grid';
 import { Field, Input, Label } from '@zendeskgarden/react-forms';
-import { Datepicker, IDatepickerProps } from '@zendeskgarden/react-datepickers';
+import { DatePicker, IDatePickerProps } from '@zendeskgarden/react-datepickers';
 import { DATE_STYLE } from './types';
 
-interface IArgs extends IDatepickerProps {
+interface IArgs extends IDatePickerProps {
   dateStyle: DATE_STYLE;
 }
 
-export const DatepickerStory: Story<IArgs> = ({ dateStyle, isCompact, ...args }) => {
+export const DatePickerStory: Story<IArgs> = ({ dateStyle, isCompact, ...args }) => {
   const formatDate = (date: Date) =>
     new Intl.DateTimeFormat(args.locale, { dateStyle }).format(date);
 
@@ -25,10 +25,10 @@ export const DatepickerStory: Story<IArgs> = ({ dateStyle, isCompact, ...args })
       <Row style={{ height: 'calc(100vh - 80px)' }}>
         <Col textAlign="center" alignSelf="center">
           <Field>
-            <Label hidden>{Datepicker.displayName}</Label>
-            <Datepicker {...args} formatDate={formatDate} isCompact={isCompact}>
+            <Label hidden>{DatePicker.displayName}</Label>
+            <DatePicker {...args} formatDate={formatDate} isCompact={isCompact}>
               <Input isCompact={isCompact} style={{ width: isCompact ? 256 : 320 }} />
-            </Datepicker>
+            </DatePicker>
           </Field>
         </Col>
       </Row>

packages/datepickers/src/elements/Datepicker/Datepicker.spec.tsx

@@ -12,25 +12,25 @@ import { addDays } from 'date-fns/addDays';
 import { subDays } from 'date-fns/subDays';
 import mockDate from 'mockdate';
 import { KEYS } from '@zendeskgarden/container-utilities';
-import { Datepicker } from './Datepicker';
-import { IDatepickerProps } from '../../types';
+import { DatePicker } from './DatePicker';
+import { IDatePickerProps } from '../../types';
 
 const DEFAULT_DATE = new Date(2019, 1, 5);
 
-const Example = (props: Omit<IDatepickerProps, 'children'>) => (
+const Example = (props: Omit<IDatePickerProps, 'children'>) => (
   <>
     <label data-test-id="label" htmlFor="input">
       Label
     </label>
-    <Datepicker {...props}>
+    <DatePicker {...props}>
       <input data-test-id="input" id="input" />
-    </Datepicker>
+    </DatePicker>
   </>
 );
 
 jest.useFakeTimers();
 
-describe('Datepicker', () => {
+describe('DatePicker', () => {
   const user = userEvent.setup({ delay: null });
 
   let onChangeSpy: (date: Date) => void;

packages/datepickers/src/elements/Datepicker/Datepicker.tsx

@@ -19,10 +19,10 @@ import PropTypes from 'prop-types';
 import { mergeRefs } from 'react-merge-refs';
 import { ThemeContext } from 'styled-components';
 import { autoPlacement, autoUpdate, flip, useFloating } from '@floating-ui/react-dom';
-import { IDatepickerProps, PLACEMENT, WEEK_STARTS_ON } from '../../types';
+import { IDatePickerProps, PLACEMENT, WEEK_STARTS_ON } from '../../types';
 import { Calendar } from './components/Calendar';
 import { datepickerReducer, retrieveInitialState } from './utils/datepicker-reducer';
-import { DatepickerContext } from './utils/useDatepickerContext';
+import { DatePickerContext } from './utils/useDatePickerContext';
 import { StyledMenu, StyledMenuWrapper } from '../../styled';
 import { DEFAULT_THEME, getFloatingPlacements } from '@zendeskgarden/react-theming';
 import { Input } from './components/Input';
@@ -32,7 +32,7 @@ const PLACEMENT_DEFAULT = 'bottom-start';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export const Datepicker = forwardRef<HTMLDivElement, IDatepickerProps>((props, calendarRef) => {
+export const DatePicker = forwardRef<HTMLDivElement, IDatePickerProps>((props, calendarRef) => {
   const {
     children,
     placement: _placement,
@@ -129,7 +129,7 @@ export const Datepicker = forwardRef<HTMLDivElement, IDatepickerProps>((props, c
         refKey={refKey!}
         ref={mergeRefs([triggerRef, Child.ref ? Child.ref : null])}
       />
-      <DatepickerContext.Provider value={contextValue}>
+      <DatePickerContext.Provider value={contextValue}>
         <StyledMenuWrapper
           ref={floatingRef}
           style={{ transform }}
@@ -155,14 +155,14 @@ export const Datepicker = forwardRef<HTMLDivElement, IDatepickerProps>((props, c
             </StyledMenu>
           )}
         </StyledMenuWrapper>
-      </DatepickerContext.Provider>
+      </DatePickerContext.Provider>
     </>
   );
 });
 
-Datepicker.displayName = 'Datepicker';
+DatePicker.displayName = 'DatePicker';
 
-Datepicker.propTypes = {
+DatePicker.propTypes = {
   value: PropTypes.any,
   onChange: PropTypes.any,
   formatDate: PropTypes.func,
@@ -178,7 +178,7 @@ Datepicker.propTypes = {
   zIndex: PropTypes.number
 };
 
-Datepicker.defaultProps = {
+DatePicker.defaultProps = {
   placement: PLACEMENT_DEFAULT,
   refKey: 'ref',
   isAnimated: true,

packages/datepickers/src/elements/Datepicker/components/Calendar.tsx

@@ -19,13 +19,13 @@ import { isBefore } from 'date-fns/isBefore';
 import { isAfter } from 'date-fns/isAfter';
 import { getDate } from 'date-fns/getDate';
 import {
-  StyledDatepicker,
+  StyledDatePicker,
   StyledCalendar,
   StyledCalendarItem,
   StyledDayLabel,
   StyledDay
 } from '../../../styled';
-import useDatepickerContext from '../utils/useDatepickerContext';
+import useDatePickerContext from '../utils/useDatePickerContext';
 import { DateFnsIndex, getStartOfWeek } from '../../../utils/calendar-utils';
 import { MonthSelector } from './MonthSelector';
 
@@ -40,7 +40,7 @@ interface ICalendarProps extends HTMLAttributes<HTMLDivElement> {
 
 export const Calendar = forwardRef<HTMLDivElement, ICalendarProps>(
   ({ value, minValue, maxValue, isCompact, locale, weekStartsOn }, ref) => {
-    const { state, dispatch } = useDatepickerContext();
+    const { state, dispatch } = useDatePickerContext();
 
     const preferredWeekStartsOn = weekStartsOn || getStartOfWeek(locale);
     const monthStartDate = startOfMonth(state.previewDate);
@@ -119,7 +119,7 @@ export const Calendar = forwardRef<HTMLDivElement, ICalendarProps>(
     });
 
     return (
-      <StyledDatepicker
+      <StyledDatePicker
         ref={ref}
         isCompact={isCompact!}
         data-test-id="calendar-wrapper"
@@ -133,7 +133,7 @@ export const Calendar = forwardRef<HTMLDivElement, ICalendarProps>(
           {dayLabels}
           {items}
         </StyledCalendar>
-      </StyledDatepicker>
+      </StyledDatePicker>
     );
   }
 );

packages/datepickers/src/elements/Datepicker/components/Input.tsx

@@ -7,13 +7,13 @@
 
 import { Dispatch, ReactElement, RefAttributes, cloneElement, forwardRef, useRef } from 'react';
 import { KEYS, composeEventHandlers } from '@zendeskgarden/container-utilities';
-import { DatepickerAction, IDatepickerState } from '../utils/datepicker-reducer';
+import { DatePickerAction, IDatePickerState } from '../utils/datepicker-reducer';
 
 interface IInputProps {
-  dispatch: Dispatch<DatepickerAction>;
+  dispatch: Dispatch<DatePickerAction>;
   element: ReactElement & RefAttributes<HTMLInputElement>;
   refKey: string;
-  state: IDatepickerState;
+  state: IDatePickerState;
 }
 
 export const Input = forwardRef<HTMLInputElement, IInputProps>(

packages/datepickers/src/elements/Datepicker/components/MonthSelector.tsx

@@ -7,7 +7,7 @@
 
 import React, { useCallback } from 'react';
 import { StyledHeader, StyledHeaderPaddle, StyledHeaderLabel } from '../../../styled';
-import useDatepickerContext from '../utils/useDatepickerContext';
+import useDatePickerContext from '../utils/useDatePickerContext';
 
 import ChevronLeftStrokeIcon from '@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg';
 import ChevronRightStrokeIcon from '@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg';
@@ -21,7 +21,7 @@ export const MonthSelector: React.FunctionComponent<IMonthSelectorProps> = ({
   locale,
   isCompact
 }) => {
-  const { state, dispatch } = useDatepickerContext();
+  const { state, dispatch } = useDatePickerContext();
 
   const headerLabelFormatter = useCallback<(date: Date) => string>(
     date => {