docs(site): add date docs (#1557)

packages/date/README.md

@@ -0,0 +1,7 @@
+# Shoreline Date
+
+This package contains all components and utils relevant for date presentation and manipulation. It has `@vtex/shoreline-components`, `react`, and `react-dom` as a peer dependencies.
+
+```sh
+pnpm add @vtex/shoreline-date
+```

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

@@ -54,9 +54,11 @@ export function CalendarCell(props: CalendarCellProps) {
   )
 }
 
-interface CalendarCellProps {
+interface CalendarCellOptions {
   /**
    * Date that the cell represents
    */
   date: CalendarDate
 }
+
+export type CalendarCellProps = CalendarCellOptions

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

@@ -48,4 +48,5 @@ export function CalendarGrid(props: CalendarGridProps) {
   )
 }
 
-export type CalendarGridProps = AriaCalendarGridProps
+export type CalendarGridOptions = AriaCalendarGridProps
+export type CalendarGridProps = CalendarGridOptions

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

@@ -10,6 +10,11 @@ export function CalendarHeader(props: CalendarHeaderProps) {
   return <div data-sl-calendar-header>{children}</div>
 }
 
-export interface CalendarHeaderProps {
+export interface CalendarHeaderOptions {
+  /**
+   * Component children
+   */
   children?: ReactNode
 }
+
+export type CalendarHeaderProps = CalendarHeaderOptions

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

@@ -1,4 +1,5 @@
 import type { CalendarState, RangeCalendarState } from '@react-stately/calendar'
+import type { ReactNode } from 'react'
 import React, { createContext, useContext } from 'react'
 import type { Store } from '@vtex/shoreline-utils'
 import { invariant } from '@vtex/shoreline-utils'
@@ -7,14 +8,32 @@ export const CalendarContext = createContext<Store<
   CalendarState | RangeCalendarState
 > | null>(null)
 
-export function CalendarProvider({ store, children }: any) {
+/**
+ * Calendar state provider
+ */
+export function CalendarProvider(props: CalendarProviderProps) {
+  const { store, children } = props
+
   return (
     <CalendarContext.Provider value={store}>
       {children}
     </CalendarContext.Provider>
   )
 }
 
+export interface CalendarProviderOptions {
+  /**
+   * Calendar store
+   */
+  store: Store<CalendarState | RangeCalendarState> | null
+  /**
+   * Component children
+   */
+  children: ReactNode
+}
+
+export type CalendarProviderProps = CalendarProviderOptions
+
 export function useCalendarContext() {
   const context = useContext(CalendarContext)
 

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

@@ -10,6 +10,11 @@ export function CalendarTitle(props: CalendarTitleProps) {
   return <h2 data-sl-calendar-title>{children}</h2>
 }
 
-export interface CalendarTitleProps {
+export interface CalendarTitleOptions {
+  /**
+   * Component children
+   */
   children?: ReactNode
 }
+
+export type CalendarTitleProps = CalendarTitleOptions

packages/date/src/calendar/calendar.tsx

@@ -14,8 +14,7 @@ import { createCalendar } from '../utils'
 
 /**
  * Allow users to select a date
- * @playground
- * @kind date
+ * @status stable
  * @example
  * <Calendar />
  */
@@ -33,7 +32,7 @@ export function Calendar<T extends DateValue>(props: CalendarProps<T>) {
     useCalendar(props, store.state)
 
   return (
-    <CalendarProvider store={store}>
+    <CalendarProvider store={store as any}>
       <div data-sl-calendar {...calendarProps}>
         <CalendarHeader>
           <IconButton
@@ -62,7 +61,9 @@ export function Calendar<T extends DateValue>(props: CalendarProps<T>) {
   )
 }
 
-export type CalendarProps<T extends DateValue> = Omit<
+export type CalendarOptions<T extends DateValue> = Omit<
   AriaCalendarProps<T>,
   'createCalendar' | 'locale'
 >
+
+export type CalendarProps<T extends DateValue> = CalendarOptions<T>

packages/date/src/date-field/date-field.tsx

@@ -12,7 +12,7 @@ import type { DateValue } from '../utils'
 
 /**
  * A list of date-segments used as base for date-picker and date-range-picker
- * @kind date
+ * @status stable
  * @example
  * <DateField />
  */
@@ -53,7 +53,12 @@ export const DateField = forwardRef(function DateField<T extends DateValue>(
   )
 })
 
-export interface DateFieldProps<T extends DateValue>
+export interface DateFieldOptions<T extends DateValue>
   extends AriaDateFieldProps<T> {
+  /**
+   * Custom className
+   */
   className?: string
 }
+
+export type DateFieldProps<T extends DateValue> = DateFieldOptions<T>

packages/date/src/date-picker/date-picker.tsx

@@ -20,8 +20,7 @@ import { useStore } from '@vtex/shoreline-utils'
 
 /**
  * Allow users to pick a date
- * @playground
- * @kind date
+ * @status stable
  * @example
  * <DatePicker />
  */
@@ -85,10 +84,8 @@ export function DatePicker<T extends DateValue>(props: DatePickerProps<T>) {
   )
 }
 
-export type DatePickerProps<T extends DateValue> = Omit<
-  AriaDatePickerProps<T>,
-  'label'
-> & {
+export interface DatePickerOptions<T extends DateValue>
+  extends Omit<AriaDatePickerProps<T>, 'label'> {
   /**
    * Custom className
    */
@@ -98,3 +95,5 @@ export type DatePickerProps<T extends DateValue> = Omit<
    */
   error?: boolean
 }
+
+export type DatePickerProps<T extends DateValue> = DatePickerOptions<T>

packages/date/src/date-range-picker/date-range-picker.tsx

@@ -20,7 +20,7 @@ import { useStore } from '@vtex/shoreline-utils'
 
 /**
  * Allow users to pick a date range
- * @kind date
+ * @status stable
  * @example
  * <DateRangePicker />
  */
@@ -96,10 +96,8 @@ export function DateRangePicker<T extends DateValue>(
   )
 }
 
-export type DateRangePickerProps<T extends DateValue> = Omit<
-  AriaDateRangePickerProps<T>,
-  'label'
-> & {
+export interface DateRangePickerOptions<T extends DateValue>
+  extends Omit<AriaDateRangePickerProps<T>, 'label'> {
   /**
    * Custom className
    */
@@ -109,3 +107,6 @@ export type DateRangePickerProps<T extends DateValue> = Omit<
    */
   error?: boolean
 }
+
+export type DateRangePickerProps<T extends DateValue> =
+  DateRangePickerOptions<T>

packages/date/src/date-segment/date-segment.tsx

@@ -8,7 +8,7 @@ import { useMergeRef } from '@vtex/shoreline-utils'
 
 /**
  * Segment of a DateField
- * @kind date
+ * @status stable
  */
 export const DateSegment = forwardRef<HTMLDivElement, DateSegmentProps>(
   function DateSegment(props, forwardedRef) {
@@ -29,7 +29,7 @@ export const DateSegment = forwardRef<HTMLDivElement, DateSegmentProps>(
   }
 )
 
-export interface DateSegmentProps {
+export interface DateSegmentOptions {
   /**
    * Segment to render
    */
@@ -39,3 +39,5 @@ export interface DateSegmentProps {
    */
   state: DateFieldState
 }
+
+export type DateSegmentProps = DateSegmentOptions

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

@@ -15,7 +15,7 @@ import { createCalendar } from '../utils'
 
 /**
  * Allow users to select a date range
- * @kind date
+ * @status stable
  * @example
  * <RangeCalendar />
  */
@@ -36,7 +36,7 @@ export function RangeCalendar<T extends DateValue>(
     useRangeCalendar(props, store.state, ref)
 
   return (
-    <CalendarProvider store={store}>
+    <CalendarProvider store={store as any}>
       <div ref={ref} data-sl-range-calendar {...calendarProps}>
         <CalendarHeader>
           <IconButton
@@ -65,7 +65,9 @@ export function RangeCalendar<T extends DateValue>(
   )
 }
 
-export type RangeCalendarProps<T extends DateValue> = Omit<
+export type RangeCalendarOptions<T extends DateValue> = Omit<
   AriaRangeCalendarProps<T>,
   'createCalendar' | 'locale'
 >
+
+export type RangeCalendarProps<T extends DateValue> = RangeCalendarOptions<T>

packages/date/src/time-input/time-input.tsx

@@ -17,7 +17,7 @@ import { IconXCircle } from '@vtex/shoreline-icons'
 
 /**
  * Allow users to select a time in a segmented field
- * @kind date
+ * @status stable
  * @example
  * <TimeInput />
  */
@@ -103,7 +103,7 @@ export const TimeInput = forwardRef(function TimeInput<T extends TimeValue>(
   )
 })
 
-export interface TimeInputProps<T extends TimeValue>
+export interface TimeInputOptions<T extends TimeValue>
   extends Omit<AriaTimeFieldProps<T>, 'locale' | 'label'> {
   /**
    * Custom className
@@ -114,3 +114,5 @@ export interface TimeInputProps<T extends TimeValue>
    */
   error?: boolean
 }
+
+export type TimeInputProps<T extends TimeValue> = TimeInputOptions<T>

packages/docs/examples/calendar.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Calendar } from '@vtex/shoreline'
+
+export default function Example() {
+  return <Calendar />
+}

packages/docs/examples/date-field.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { DateField } from '@vtex/shoreline'
+
+export default function Example() {
+  return <DateField />
+}

packages/docs/examples/date-picker.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { DatePicker } from '@vtex/shoreline'
+
+export default function Example() {
+  return <DatePicker />
+}

packages/docs/examples/date-range-picker.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { DateRangePicker } from '@vtex/shoreline'
+
+export default function Example() {
+  return <DateRangePicker />
+}

packages/docs/examples/range-calendar.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { RangeCalendar } from '@vtex/shoreline'
+
+export default function Example() {
+  return <RangeCalendar />
+}

packages/docs/examples/time-input.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { TimeInput } from '@vtex/shoreline'
+
+export default function Example() {
+  return <TimeInput />
+}

packages/docs/pages/components/calendar.mdx

@@ -1,5 +1,13 @@
 # Calendar
 
-Allow users to select a date.
+<ComponentDescription name="calendar" />
 
-![Calendar example](public/assets/overview-calendar.webp)
+<Preview name="calendar" />
+
+## Required props
+
+<PropsDocs name="calendar" required />
+
+## Optional props
+
+<PropsDocs name="calendar" />

packages/docs/pages/components/calendar/_meta.json

@@ -1,5 +1,4 @@
 {
-  "api-reference": "API Reference",
   "calendar-cell": "CalendarCell",
   "calendar-grid": "CalendarGrid",
   "calendar-header": "CalendarHeader",

packages/docs/pages/components/calendar/calendar-cell.mdx

@@ -0,0 +1,7 @@
+# CalendarCell
+
+<ComponentDescription name="calendar-cell" />
+
+## Required props
+
+<PropsDocs name="calendar-cell" required />