refactor(range-calendar): create separate folder

packages/date/src/calendar/calendar-cell.tsx

@@ -1,10 +1,10 @@
 import React, { useRef } from 'react'
 import { useCalendarCell } from '@react-aria/calendar'
 import { IconButton } from '@vtex/shoreline-components'
-import type { CalendarDate } from '@internationalized/date'
 
 import './calendar-cell.css'
 import { isRangeCalendar, useCalendarContext } from './calendar-provider'
+import type { CalendarDate } from '../utils'
 import { isSameDay } from '../utils'
 
 /**

packages/date/src/calendar/calendar-header.css

@@ -0,0 +1,7 @@
+@layer sl-components {
+  [data-sl-calendar-header] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}

packages/date/src/calendar/calendar-header.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react'
+import React from 'react'
+
+import './calendar-header.css'
+
+/**
+ * Header of the calendar
+ */
+export function CalendarHeader(props: CalendarHeaderProps) {
+  const { children } = props
+
+  return <div data-sl-calendar-header>{children}</div>
+}
+
+export interface CalendarHeaderProps {
+  children?: ReactNode
+}

packages/date/src/calendar/calendar-title.css

@@ -0,0 +1,6 @@
+@layer sl-components {
+  [data-sl-calendar-title] {
+    font: var(--sl-text-display-4-font);
+    letter-spacing: var(--sl-text-display-4-letter-spacing);
+  }
+}

packages/date/src/calendar/calendar-title.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react'
+import React from 'react'
+
+import './calendar-title.css'
+
+/**
+ * Title of the calendar
+ */
+export function CalendarTitle(props: CalendarTitleProps) {
+  const { children } = props
+
+  return <h2 data-sl-calendar-title>{children}</h2>
+}
+
+export interface CalendarTitleProps {
+  children?: ReactNode
+}

packages/date/src/calendar/calendar.css

@@ -5,15 +5,4 @@
     grid-template-rows: repeat(3, auto);
     gap: var(--sl-space-gap);
   }
-
-  [data-sl-calendar-header] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  [data-sl-calendar-title] {
-    font: var(--sl-text-display-4-font);
-    letter-spacing: var(--sl-text-display-4-letter-spacing);
-  }
 }

packages/date/src/calendar/calendar.tsx

@@ -1,15 +1,17 @@
 import React, { useMemo } from 'react'
 import type { AriaCalendarProps } from '@react-aria/calendar'
 import { useCalendar } from '@react-aria/calendar'
-import { createCalendar, type CalendarDate } from '@internationalized/date'
 import { useLocale, IconButton } from '@vtex/shoreline-components'
 import { IconCaretLeft, IconCaretRight } from '@vtex/shoreline-icons'
 import { Store } from '@vtex/shoreline-store'
 import { useCalendarState } from '@react-stately/calendar'
 
 import { CalendarGrid } from './calendar-grid'
 import { CalendarProvider } from './calendar-provider'
-
+import { CalendarHeader } from './calendar-header'
+import { CalendarTitle } from './calendar-title'
+import type { CalendarDate } from '../utils'
+import { createCalendar } from '../utils'
 import './calendar.css'
 
 /**
@@ -33,7 +35,7 @@ export function Calendar(props: CalendarProps) {
   return (
     <CalendarProvider store={store}>
       <div data-sl-calendar {...calendarProps}>
-        <div data-sl-calendar-header>
+        <CalendarHeader>
           <IconButton
             label={prevButtonProps['aria-label']}
             variant="tertiary"
@@ -43,7 +45,7 @@ export function Calendar(props: CalendarProps) {
           >
             <IconCaretLeft />
           </IconButton>
-          <h2 data-sl-calendar-title>{title}</h2>
+          <CalendarTitle>{title}</CalendarTitle>
           <IconButton
             label={nextButtonProps['aria-label']}
             variant="tertiary"
@@ -53,7 +55,7 @@ export function Calendar(props: CalendarProps) {
           >
             <IconCaretRight />
           </IconButton>
-        </div>
+        </CalendarHeader>
         <CalendarGrid />
       </div>
     </CalendarProvider>

packages/date/src/calendar/index.ts

@@ -1,2 +1,6 @@
 export * from './calendar'
-export * from './range-calendar'
+export * from './calendar-cell'
+export * from './calendar-grid'
+export * from './calendar-header'
+export * from './calendar-provider'
+export * from './calendar-title'

packages/date/src/index.ts

@@ -1,4 +1,5 @@
 /* PLOP_INJECT_EXPORT */
+export * from './range-calendar'
 export * from './calendar'
 export * from './date-field'
 export * from './date-segment'

packages/date/src/range-calendar/index.ts

@@ -0,0 +1 @@
+export * from './range-calendar'

packages/date/src/range-calendar/range-calendar.css

@@ -0,0 +1,8 @@
+@layer sl-components {
+  [data-sl-range-calendar] {
+    width: fit-content;
+    display: grid;
+    grid-template-rows: repeat(3, auto);
+    gap: var(--sl-space-gap);
+  }
+}

packages/date/src/calendar/range-calendar.tsx → packages/date/src/range-calendar/range-calendar.tsx

@@ -2,20 +2,22 @@ import React, { useMemo, useRef } from 'react'
 import type { AriaRangeCalendarProps } from '@react-aria/calendar'
 import { useRangeCalendar } from '@react-aria/calendar'
 import { useRangeCalendarState } from '@react-stately/calendar'
-import { createCalendar, type CalendarDate } from '@internationalized/date'
 import { useLocale, IconButton } from '@vtex/shoreline-components'
 import { IconCaretLeft, IconCaretRight } from '@vtex/shoreline-icons'
 import { Store } from '@vtex/shoreline-store'
 
-import { CalendarGrid } from './calendar-grid'
-import { CalendarProvider } from './calendar-provider'
-
-import './calendar.css'
+import { CalendarGrid } from '../calendar/calendar-grid'
+import { CalendarProvider } from '../calendar/calendar-provider'
+import { CalendarHeader } from '../calendar/calendar-header'
+import { CalendarTitle } from '../calendar/calendar-title'
+import type { CalendarDate } from '../utils'
+import { createCalendar } from '../utils'
+import './range-calendar.css'
 
 /**
- * Allow users to select a date
+ * Allow users to select a date range
  * @example
- * <Calendar />
+ * <RangeCalendar />
  */
 export function RangeCalendar(props: RangeCalendarProps) {
   const locale = useLocale()
@@ -33,8 +35,8 @@ export function RangeCalendar(props: RangeCalendarProps) {
 
   return (
     <CalendarProvider store={store}>
-      <div ref={ref} data-sl-calendar {...calendarProps}>
-        <div data-sl-calendar-header>
+      <div ref={ref} data-sl-range-calendar {...calendarProps}>
+        <CalendarHeader>
           <IconButton
             label={prevButtonProps['aria-label']}
             variant="tertiary"
@@ -44,7 +46,7 @@ export function RangeCalendar(props: RangeCalendarProps) {
           >
             <IconCaretLeft />
           </IconButton>
-          <h2 data-sl-calendar-title>{title}</h2>
+          <CalendarTitle>{title}</CalendarTitle>
           <IconButton
             label={nextButtonProps['aria-label']}
             variant="tertiary"
@@ -54,7 +56,7 @@ export function RangeCalendar(props: RangeCalendarProps) {
           >
             <IconCaretRight />
           </IconButton>
-        </div>
+        </CalendarHeader>
         <CalendarGrid />
       </div>
     </CalendarProvider>

packages/date/src/calendar/stories/range-calendar.stories.tsx → packages/date/src/range-calendar/stories/range-calendar.stories.tsx

@@ -23,7 +23,6 @@ export function Controlled() {
     <>
       <p>Start Date: {value.start.toString()}</p>
       <p>End Date: {value.end.toString()}</p>
-
       <RangeCalendar value={value} onChange={setValue} />
     </>
   )

packages/date/src/utils/date.ts

@@ -1,3 +1,4 @@
+import type { CalendarDate } from '@internationalized/date'
 import {
   parseDate,
   parseZonedDateTime,
@@ -8,8 +9,10 @@ import {
   isSameDay,
   isSameMonth,
   isSameYear,
+  createCalendar,
 } from '@internationalized/date'
 
+export type { CalendarDate }
 export {
   parseDate,
   parseZonedDateTime,
@@ -20,4 +23,5 @@ export {
   isSameDay,
   isSameMonth,
   isSameYear,
+  createCalendar,
 }