From a0ef0e86d4ffe9ccef102823b2c45b7fcb2608ef Mon Sep 17 00:00:00 2001
From: matheusps <cout.matheusps@gmail.com>
Date: Tue, 16 Apr 2024 14:39:13 -0300
Subject: [PATCH] docs(site): add date docs

---
 packages/date/README.md                       |  7 +++++
 packages/date/src/calendar/calendar-cell.tsx  |  4 ++-
 packages/date/src/calendar/calendar-grid.tsx  |  3 +-
 .../date/src/calendar/calendar-header.tsx     |  7 ++++-
 .../date/src/calendar/calendar-provider.tsx   | 21 +++++++++++++-
 packages/date/src/calendar/calendar-title.tsx |  7 ++++-
 packages/date/src/calendar/calendar.tsx       |  9 +++---
 packages/date/src/date-field/date-field.tsx   |  9 ++++--
 packages/date/src/date-picker/date-picker.tsx | 11 ++++---
 .../date-range-picker/date-range-picker.tsx   | 11 +++----
 .../date/src/date-segment/date-segment.tsx    |  6 ++--
 .../src/range-calendar/range-calendar.tsx     |  8 +++--
 packages/date/src/time-input/time-input.tsx   |  6 ++--
 packages/docs/examples/calendar.tsx           |  6 ++++
 packages/docs/examples/date-field.tsx         |  6 ++++
 packages/docs/examples/date-picker.tsx        |  6 ++++
 packages/docs/examples/date-range-picker.tsx  |  6 ++++
 packages/docs/examples/range-calendar.tsx     |  6 ++++
 packages/docs/examples/time-input.tsx         |  6 ++++
 packages/docs/pages/components/calendar.mdx   | 12 ++++++--
 .../docs/pages/components/calendar/_meta.json |  1 -
 .../components/calendar/api-reference.mdx     | 20 -------------
 .../components/calendar/calendar-cell.mdx     |  7 +++++
 .../calendar/calendar-cell/_meta.json         |  1 -
 .../calendar/calendar-cell/api-reference.mdx  | 11 -------
 .../components/calendar/calendar-grid.mdx     |  7 +++++
 .../calendar/calendar-grid/_meta.json         |  1 -
 .../calendar/calendar-grid/api-reference.mdx  | 17 -----------
 .../components/calendar/calendar-header.mdx   |  7 +++++
 .../calendar/calendar-header/_meta.json       |  1 -
 .../calendar-header/api-reference.mdx         | 17 -----------
 .../components/calendar/calendar-provider.mdx | 11 +++++++
 .../calendar/calendar-provider/_meta.json     |  1 -
 .../calendar-provider/api-reference.mdx       |  9 ------
 .../components/calendar/calendar-title.mdx    |  7 +++++
 .../calendar/calendar-title/_meta.json        |  1 -
 .../calendar/calendar-title/api-reference.mdx | 17 -----------
 packages/docs/pages/components/date-field.mdx |  8 +++--
 .../pages/components/date-field/_meta.json    |  1 -
 .../components/date-field/api-reference.mdx   | 21 --------------
 .../docs/pages/components/date-picker.mdx     | 11 +++++--
 .../pages/components/date-picker/_meta.json   |  1 -
 .../components/date-picker/api-reference.mdx  | 20 -------------
 .../pages/components/date-range-picker.mdx    | 11 +++++--
 .../components/date-range-picker/_meta.json   |  1 -
 .../date-range-picker/api-reference.mdx       | 21 --------------
 .../docs/pages/components/date-segment.mdx    |  6 ++--
 .../pages/components/date-segment/_meta.json  |  1 -
 .../components/date-segment/api-reference.mdx | 25 ----------------
 .../docs/pages/components/range-calendar.mdx  |  8 +++--
 .../components/range-calendar/_meta.json      |  1 -
 packages/docs/pages/components/time-input.mdx |  8 +++--
 .../pages/components/time-input/_meta.json    |  1 -
 .../components/time-input/api-reference.mdx   | 29 -------------------
 packages/docs/scripts/build-props.mjs         | 15 ++++++++++
 55 files changed, 218 insertions(+), 264 deletions(-)
 create mode 100644 packages/date/README.md
 create mode 100644 packages/docs/examples/calendar.tsx
 create mode 100644 packages/docs/examples/date-field.tsx
 create mode 100644 packages/docs/examples/date-picker.tsx
 create mode 100644 packages/docs/examples/date-range-picker.tsx
 create mode 100644 packages/docs/examples/range-calendar.tsx
 create mode 100644 packages/docs/examples/time-input.tsx
 delete mode 100644 packages/docs/pages/components/calendar/api-reference.mdx
 create mode 100644 packages/docs/pages/components/calendar/calendar-cell.mdx
 delete mode 100644 packages/docs/pages/components/calendar/calendar-cell/_meta.json
 delete mode 100644 packages/docs/pages/components/calendar/calendar-cell/api-reference.mdx
 create mode 100644 packages/docs/pages/components/calendar/calendar-grid.mdx
 delete mode 100644 packages/docs/pages/components/calendar/calendar-grid/_meta.json
 delete mode 100644 packages/docs/pages/components/calendar/calendar-grid/api-reference.mdx
 create mode 100644 packages/docs/pages/components/calendar/calendar-header.mdx
 delete mode 100644 packages/docs/pages/components/calendar/calendar-header/_meta.json
 delete mode 100644 packages/docs/pages/components/calendar/calendar-header/api-reference.mdx
 create mode 100644 packages/docs/pages/components/calendar/calendar-provider.mdx
 delete mode 100644 packages/docs/pages/components/calendar/calendar-provider/_meta.json
 delete mode 100644 packages/docs/pages/components/calendar/calendar-provider/api-reference.mdx
 create mode 100644 packages/docs/pages/components/calendar/calendar-title.mdx
 delete mode 100644 packages/docs/pages/components/calendar/calendar-title/_meta.json
 delete mode 100644 packages/docs/pages/components/calendar/calendar-title/api-reference.mdx
 delete mode 100644 packages/docs/pages/components/date-field/_meta.json
 delete mode 100644 packages/docs/pages/components/date-field/api-reference.mdx
 delete mode 100644 packages/docs/pages/components/date-picker/_meta.json
 delete mode 100644 packages/docs/pages/components/date-picker/api-reference.mdx
 delete mode 100644 packages/docs/pages/components/date-range-picker/_meta.json
 delete mode 100644 packages/docs/pages/components/date-range-picker/api-reference.mdx
 delete mode 100644 packages/docs/pages/components/date-segment/_meta.json
 delete mode 100644 packages/docs/pages/components/date-segment/api-reference.mdx
 delete mode 100644 packages/docs/pages/components/range-calendar/_meta.json
 delete mode 100644 packages/docs/pages/components/time-input/_meta.json
 delete mode 100644 packages/docs/pages/components/time-input/api-reference.mdx

diff --git a/packages/date/README.md b/packages/date/README.md
new file mode 100644
index 0000000000..39d5abe348
--- /dev/null
+++ b/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
+```
diff --git a/packages/date/src/calendar/calendar-cell.tsx b/packages/date/src/calendar/calendar-cell.tsx
index 88d80603c3..f162191e91 100644
--- a/packages/date/src/calendar/calendar-cell.tsx
+++ b/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
diff --git a/packages/date/src/calendar/calendar-grid.tsx b/packages/date/src/calendar/calendar-grid.tsx
index a41375b8ad..facd6e9972 100644
--- a/packages/date/src/calendar/calendar-grid.tsx
+++ b/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
diff --git a/packages/date/src/calendar/calendar-header.tsx b/packages/date/src/calendar/calendar-header.tsx
index 49525148af..bf284dd778 100644
--- a/packages/date/src/calendar/calendar-header.tsx
+++ b/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
diff --git a/packages/date/src/calendar/calendar-provider.tsx b/packages/date/src/calendar/calendar-provider.tsx
index ffec5151c7..128fdd25ad 100644
--- a/packages/date/src/calendar/calendar-provider.tsx
+++ b/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,7 +8,12 @@ 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}
@@ -15,6 +21,19 @@ export function CalendarProvider({ store, children }: any) {
   )
 }
 
+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)
 
diff --git a/packages/date/src/calendar/calendar-title.tsx b/packages/date/src/calendar/calendar-title.tsx
index 4153088278..45a8170d61 100644
--- a/packages/date/src/calendar/calendar-title.tsx
+++ b/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
diff --git a/packages/date/src/calendar/calendar.tsx b/packages/date/src/calendar/calendar.tsx
index 02869420b1..5e14e84356 100644
--- a/packages/date/src/calendar/calendar.tsx
+++ b/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>
diff --git a/packages/date/src/date-field/date-field.tsx b/packages/date/src/date-field/date-field.tsx
index 38e83cfea7..0d65b88973 100644
--- a/packages/date/src/date-field/date-field.tsx
+++ b/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>
diff --git a/packages/date/src/date-picker/date-picker.tsx b/packages/date/src/date-picker/date-picker.tsx
index a1884afa78..88b51a253c 100644
--- a/packages/date/src/date-picker/date-picker.tsx
+++ b/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>
diff --git a/packages/date/src/date-range-picker/date-range-picker.tsx b/packages/date/src/date-range-picker/date-range-picker.tsx
index 094238864a..9fda18a90f 100644
--- a/packages/date/src/date-range-picker/date-range-picker.tsx
+++ b/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>
diff --git a/packages/date/src/date-segment/date-segment.tsx b/packages/date/src/date-segment/date-segment.tsx
index d0b3b25bd3..9b9555592c 100644
--- a/packages/date/src/date-segment/date-segment.tsx
+++ b/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
diff --git a/packages/date/src/range-calendar/range-calendar.tsx b/packages/date/src/range-calendar/range-calendar.tsx
index 48ee4343fe..b419f862e4 100644
--- a/packages/date/src/range-calendar/range-calendar.tsx
+++ b/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>
diff --git a/packages/date/src/time-input/time-input.tsx b/packages/date/src/time-input/time-input.tsx
index c670e47041..d4b9e2179c 100644
--- a/packages/date/src/time-input/time-input.tsx
+++ b/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>
diff --git a/packages/docs/examples/calendar.tsx b/packages/docs/examples/calendar.tsx
new file mode 100644
index 0000000000..b9d0c35b80
--- /dev/null
+++ b/packages/docs/examples/calendar.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { Calendar } from '@vtex/shoreline'
+
+export default function Example() {
+  return <Calendar />
+}
diff --git a/packages/docs/examples/date-field.tsx b/packages/docs/examples/date-field.tsx
new file mode 100644
index 0000000000..5f8c32b9a3
--- /dev/null
+++ b/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 />
+}
diff --git a/packages/docs/examples/date-picker.tsx b/packages/docs/examples/date-picker.tsx
new file mode 100644
index 0000000000..60b0d192ed
--- /dev/null
+++ b/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 />
+}
diff --git a/packages/docs/examples/date-range-picker.tsx b/packages/docs/examples/date-range-picker.tsx
new file mode 100644
index 0000000000..ad005d4075
--- /dev/null
+++ b/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 />
+}
diff --git a/packages/docs/examples/range-calendar.tsx b/packages/docs/examples/range-calendar.tsx
new file mode 100644
index 0000000000..8222a4c053
--- /dev/null
+++ b/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 />
+}
diff --git a/packages/docs/examples/time-input.tsx b/packages/docs/examples/time-input.tsx
new file mode 100644
index 0000000000..0f6bd87e29
--- /dev/null
+++ b/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 />
+}
diff --git a/packages/docs/pages/components/calendar.mdx b/packages/docs/pages/components/calendar.mdx
index 042fb2445f..bed94ecb58 100644
--- a/packages/docs/pages/components/calendar.mdx
+++ b/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)
\ No newline at end of file
+<Preview name="calendar" />
+
+## Required props
+
+<PropsDocs name="calendar" required />
+
+## Optional props
+
+<PropsDocs name="calendar" />
\ No newline at end of file
diff --git a/packages/docs/pages/components/calendar/_meta.json b/packages/docs/pages/components/calendar/_meta.json
index b0c65fbcd4..2850b3caa8 100644
--- a/packages/docs/pages/components/calendar/_meta.json
+++ b/packages/docs/pages/components/calendar/_meta.json
@@ -1,5 +1,4 @@
 {
-  "api-reference": "API Reference",
   "calendar-cell": "CalendarCell",
   "calendar-grid": "CalendarGrid",
   "calendar-header": "CalendarHeader",
diff --git a/packages/docs/pages/components/calendar/api-reference.mdx b/packages/docs/pages/components/calendar/api-reference.mdx
deleted file mode 100644
index 361abc494b..0000000000
--- a/packages/docs/pages/components/calendar/api-reference.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
-# API Reference
-
-Allow users to select a date
-
-<iframe src="https://shoreline.storybook.vtex.com?path=/story/components-calendar--play&full=1&shortcuts=false&singleStory=true" 
-    style={{"width":"100%","height":600,"border":0,"borderRadius":4}}></iframe>
-
-## Parameters
-
-### `props`
-
-- Type: `@vtex/shoreline-date.CalendarProps<T>`
-
-## Props
-
-### `CalendarProps`
-
-- Type: `typescript.Omit<@react-types/calendar.AriaCalendarProps<T>, createCalendar | locale>`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/date/src/calendar/calendar.tsx#L22)
diff --git a/packages/docs/pages/components/calendar/calendar-cell.mdx b/packages/docs/pages/components/calendar/calendar-cell.mdx
new file mode 100644
index 0000000000..45a92ac9bd
--- /dev/null
+++ b/packages/docs/pages/components/calendar/calendar-cell.mdx
@@ -0,0 +1,7 @@
+# CalendarCell
+
+<ComponentDescription name="calendar-cell" />
+
+## Required props
+
+<PropsDocs name="calendar-cell" required />
\ No newline at end of file
diff --git a/packages/docs/pages/components/calendar/calendar-cell/_meta.json b/packages/docs/pages/components/calendar/calendar-cell/_meta.json
deleted file mode 100644
index dd335de314..0000000000
--- a/packages/docs/pages/components/calendar/calendar-cell/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference" }
diff --git a/packages/docs/pages/components/calendar/calendar-cell/api-reference.mdx b/packages/docs/pages/components/calendar/calendar-cell/api-reference.mdx
deleted file mode 100644
index 015a70305e..0000000000
--- a/packages/docs/pages/components/calendar/calendar-cell/api-reference.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-# API Reference
-
-Cell of a calendar grid
-
-## Parameters
-
-### `props`
-
-- Type: `@vtex/shoreline-date.CalendarCellProps`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/date/src/calendar/calendar-cell.tsx#L12)
diff --git a/packages/docs/pages/components/calendar/calendar-grid.mdx b/packages/docs/pages/components/calendar/calendar-grid.mdx
new file mode 100644
index 0000000000..74b1dd0ad0
--- /dev/null
+++ b/packages/docs/pages/components/calendar/calendar-grid.mdx
@@ -0,0 +1,7 @@
+# CalendarGrid
+
+<ComponentDescription name="calendar-grid" />
+
+## Optional props
+
+<PropsDocs name="calendar-grid" />
\ No newline at end of file
diff --git a/packages/docs/pages/components/calendar/calendar-grid/_meta.json b/packages/docs/pages/components/calendar/calendar-grid/_meta.json
deleted file mode 100644
index dd335de314..0000000000
--- a/packages/docs/pages/components/calendar/calendar-grid/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference" }
diff --git a/packages/docs/pages/components/calendar/calendar-grid/api-reference.mdx b/packages/docs/pages/components/calendar/calendar-grid/api-reference.mdx
deleted file mode 100644
index 154b0f6368..0000000000
--- a/packages/docs/pages/components/calendar/calendar-grid/api-reference.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-# API Reference
-
-Grid of a calendar
-
-## Parameters
-
-### `props`
-
-- Type: `@react-aria/calendar.AriaCalendarGridProps`
-
-## Props
-
-### `CalendarGridProps`
-
-- Type: `@react-aria/calendar.AriaCalendarGridProps`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/date/src/calendar/calendar-grid.tsx#L13)
diff --git a/packages/docs/pages/components/calendar/calendar-header.mdx b/packages/docs/pages/components/calendar/calendar-header.mdx
new file mode 100644
index 0000000000..0cff995184
--- /dev/null
+++ b/packages/docs/pages/components/calendar/calendar-header.mdx
@@ -0,0 +1,7 @@
+# CalendarHeader
+
+<ComponentDescription name="calendar-header" />
+
+## Optional props
+
+<PropsDocs name="calendar-header" />
\ No newline at end of file
diff --git a/packages/docs/pages/components/calendar/calendar-header/_meta.json b/packages/docs/pages/components/calendar/calendar-header/_meta.json
deleted file mode 100644
index dd335de314..0000000000
--- a/packages/docs/pages/components/calendar/calendar-header/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference" }
diff --git a/packages/docs/pages/components/calendar/calendar-header/api-reference.mdx b/packages/docs/pages/components/calendar/calendar-header/api-reference.mdx
deleted file mode 100644
index cf9419541e..0000000000
--- a/packages/docs/pages/components/calendar/calendar-header/api-reference.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-# API Reference
-
-Header of the calendar
-
-## Parameters
-
-### `props`
-
-- Type: `@vtex/shoreline-date.CalendarHeaderProps`
-
-## Props
-
-### `children` (optional)
-
-- Type: `@types/react.React.ReactNode`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/date/src/calendar/calendar-header.tsx#L7)
diff --git a/packages/docs/pages/components/calendar/calendar-provider.mdx b/packages/docs/pages/components/calendar/calendar-provider.mdx
new file mode 100644
index 0000000000..7740f19e8e
--- /dev/null
+++ b/packages/docs/pages/components/calendar/calendar-provider.mdx
@@ -0,0 +1,11 @@
+# CalendarProvider
+
+<ComponentDescription name="calendar-provider" />
+
+## Required props
+
+<PropsDocs name="calendar-provider" required />
+
+## Optional props
+
+<PropsDocs name="calendar-provider" />
\ No newline at end of file
diff --git a/packages/docs/pages/components/calendar/calendar-provider/_meta.json b/packages/docs/pages/components/calendar/calendar-provider/_meta.json
deleted file mode 100644
index dd335de314..0000000000
--- a/packages/docs/pages/components/calendar/calendar-provider/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference" }
diff --git a/packages/docs/pages/components/calendar/calendar-provider/api-reference.mdx b/packages/docs/pages/components/calendar/calendar-provider/api-reference.mdx
deleted file mode 100644
index 1c8bc22d04..0000000000
--- a/packages/docs/pages/components/calendar/calendar-provider/api-reference.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
-# API Reference
-
-## Parameters
-
-### `__namedParameters`
-
-- Type: `any`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/date/src/calendar/calendar-provider.tsx#L10)
diff --git a/packages/docs/pages/components/calendar/calendar-title.mdx b/packages/docs/pages/components/calendar/calendar-title.mdx
new file mode 100644
index 0000000000..defea6d0bf
--- /dev/null
+++ b/packages/docs/pages/components/calendar/calendar-title.mdx
@@ -0,0 +1,7 @@
+# CallendarTitle
+
+<ComponentDescription name="calendar-title" />
+
+## Optional props
+
+<PropsDocs name="calendar-title" />
\ No newline at end of file
diff --git a/packages/docs/pages/components/calendar/calendar-title/_meta.json b/packages/docs/pages/components/calendar/calendar-title/_meta.json
deleted file mode 100644
index dd335de314..0000000000
--- a/packages/docs/pages/components/calendar/calendar-title/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference" }
diff --git a/packages/docs/pages/components/calendar/calendar-title/api-reference.mdx b/packages/docs/pages/components/calendar/calendar-title/api-reference.mdx
deleted file mode 100644
index d364dbf5c1..0000000000
--- a/packages/docs/pages/components/calendar/calendar-title/api-reference.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-# API Reference
-
-Title of the calendar
-
-## Parameters
-
-### `props`
-
-- Type: `@vtex/shoreline-date.CalendarTitleProps`
-
-## Props
-
-### `children` (optional)
-
-- Type: `@types/react.React.ReactNode`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/date/src/calendar/calendar-title.tsx#L7)
diff --git a/packages/docs/pages/components/date-field.mdx b/packages/docs/pages/components/date-field.mdx
index b088980bee..ee520329ec 100644
--- a/packages/docs/pages/components/date-field.mdx
+++ b/packages/docs/pages/components/date-field.mdx
@@ -1,5 +1,9 @@
 # DateField
 
-A list of date-segments used as base for date-picker and date-range-picker.
+<ComponentDescription name="date-field" />
 
-![DateFieldendar example](public/assets/overview-date-field.webp)
\ No newline at end of file
+<Preview name="date-field" />
+
+## Optional props
+
+<PropsDocs name="date-field" />
\ No newline at end of file
diff --git a/packages/docs/pages/components/date-field/_meta.json b/packages/docs/pages/components/date-field/_meta.json
deleted file mode 100644
index dd335de314..0000000000
--- a/packages/docs/pages/components/date-field/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference" }
diff --git a/packages/docs/pages/components/date-field/api-reference.mdx b/packages/docs/pages/components/date-field/api-reference.mdx
deleted file mode 100644
index 02bb3738f4..0000000000
--- a/packages/docs/pages/components/date-field/api-reference.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-# API Reference
-
-A list of date-segments used as base for date-picker and date-range-picker
-
-```jsx
-<DateField />
-```
-
-## Parameters
-
-### `props`
-
-- Type: `@vtex/shoreline-date.DateFieldProps<T> & @types/react.React.RefAttributes<typescript.HTMLDivElement>`
-
-## Props
-
-### `className` (optional)
-
-- Type: `string`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/date/src/date-field/date-field.tsx#L19)
diff --git a/packages/docs/pages/components/date-picker.mdx b/packages/docs/pages/components/date-picker.mdx
index 6631baec62..0eee0da693 100644
--- a/packages/docs/pages/components/date-picker.mdx
+++ b/packages/docs/pages/components/date-picker.mdx
@@ -1,10 +1,15 @@
 # DatePicker
 
-A Date Picker is a field for single date values that may include time. The date can be typed or selected with the help of a Calendar.
+<ComponentDescription name="date-picker" />
 
-![DatePicker example](public/assets/overview-date-picker.webp)
+<Preview name="date-picker" />
+
+## Optional props
+
+<PropsDocs name="date-picker" />
+
+## Related components
 
-### Related components
 <RelatedComponentList>
   <RelatedComponent
     title="DateRangePicker"
diff --git a/packages/docs/pages/components/date-picker/_meta.json b/packages/docs/pages/components/date-picker/_meta.json
deleted file mode 100644
index 30a4680c32..0000000000
--- a/packages/docs/pages/components/date-picker/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference", "best-practices": "Best Practices" }
diff --git a/packages/docs/pages/components/date-picker/api-reference.mdx b/packages/docs/pages/components/date-picker/api-reference.mdx
deleted file mode 100644
index 051bf82d2b..0000000000
--- a/packages/docs/pages/components/date-picker/api-reference.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
-# API Reference
-
-Allow users to pick a date
-
-<iframe src="https://shoreline.storybook.vtex.com?path=/story/components-date-picker--play&full=1&shortcuts=false&singleStory=true" 
-    style={{"width":"100%","height":600,"border":0,"borderRadius":4}}></iframe>
-
-## Parameters
-
-### `props`
-
-- Type: `@vtex/shoreline-date.DatePickerProps<T>`
-
-## Props
-
-### `DatePickerProps`
-
-- Type: `typescript.Omit<@react-types/datepicker.AriaDatePickerProps<T>, label> & { className: string; error: boolean; }`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/date/src/date-picker/date-picker.tsx#L28)
diff --git a/packages/docs/pages/components/date-range-picker.mdx b/packages/docs/pages/components/date-range-picker.mdx
index 7139fb3bb7..caf661fdc6 100644
--- a/packages/docs/pages/components/date-range-picker.mdx
+++ b/packages/docs/pages/components/date-range-picker.mdx
@@ -1,10 +1,15 @@
 # DateRangePicker
 
-A Date Range Picker is a field for date period values that may include time. The date can be typed or selected in a Calendar.
+<ComponentDescription name="date-range-picker" />
 
-![DatePicker example](public/assets/overview-date-range-picker.webp)
+<Preview name="date-range-picker" />
+
+## Optional props
+
+<PropsDocs name="date-range-picker" />
+
+## Related components
 
-### Related components
 <RelatedComponentList>
   <RelatedComponent
     title="DatePicker"
diff --git a/packages/docs/pages/components/date-range-picker/_meta.json b/packages/docs/pages/components/date-range-picker/_meta.json
deleted file mode 100644
index 30a4680c32..0000000000
--- a/packages/docs/pages/components/date-range-picker/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference", "best-practices": "Best Practices" }
diff --git a/packages/docs/pages/components/date-range-picker/api-reference.mdx b/packages/docs/pages/components/date-range-picker/api-reference.mdx
deleted file mode 100644
index 37130d6497..0000000000
--- a/packages/docs/pages/components/date-range-picker/api-reference.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-# API Reference
-
-Allow users to pick a date range
-
-```jsx
-<DateRangePicker />
-```
-
-## Parameters
-
-### `props`
-
-- Type: `@vtex/shoreline-date.DateRangePickerProps<T>`
-
-## Props
-
-### `DateRangePickerProps`
-
-- Type: `typescript.Omit<@react-types/datepicker.AriaDateRangePickerProps<T>, label> & { className: string; error: boolean; }`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/date/src/date-range-picker/date-range-picker.tsx#L27)
diff --git a/packages/docs/pages/components/date-segment.mdx b/packages/docs/pages/components/date-segment.mdx
index 54f6f87ea4..6c88f36936 100644
--- a/packages/docs/pages/components/date-segment.mdx
+++ b/packages/docs/pages/components/date-segment.mdx
@@ -1,5 +1,7 @@
 # DateSegment
 
-Segment of a DateField.
+<ComponentDescription name="date-segment" />
 
-![DateSegment example](public/assets/overview-date-segment.webp)
\ No newline at end of file
+## Required props
+
+<PropsDocs name="date-segment" required />
\ No newline at end of file
diff --git a/packages/docs/pages/components/date-segment/_meta.json b/packages/docs/pages/components/date-segment/_meta.json
deleted file mode 100644
index dd335de314..0000000000
--- a/packages/docs/pages/components/date-segment/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference" }
diff --git a/packages/docs/pages/components/date-segment/api-reference.mdx b/packages/docs/pages/components/date-segment/api-reference.mdx
deleted file mode 100644
index b24fa3e5c5..0000000000
--- a/packages/docs/pages/components/date-segment/api-reference.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-# API Reference
-
-Segment of a DateField
-
-## Parameters
-
-### `props`
-
-- Type: `@vtex/shoreline-date.DateSegmentProps & @types/react.React.RefAttributes<typescript.HTMLDivElement>`
-
-## Props
-
-### `segment`
-
-Segment to render
-
-- Type: `@react-stately/datepicker.DateSegment`
-
-### `state`
-
-State of a Datefield
-
-- Type: `@react-stately/datepicker.DateFieldState`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/date/src/date-segment/date-segment.tsx#L13)
diff --git a/packages/docs/pages/components/range-calendar.mdx b/packages/docs/pages/components/range-calendar.mdx
index 9c8b34d325..465e254047 100644
--- a/packages/docs/pages/components/range-calendar.mdx
+++ b/packages/docs/pages/components/range-calendar.mdx
@@ -1,5 +1,9 @@
 # RangeCalendar
 
-Allow users to select a date range.
+<ComponentDescription name="range-calendar" />
 
-![RangeCalendar example](public/assets/overview-range-calendar.webp)
\ No newline at end of file
+<Preview name="range-calendar" />
+
+## Optional props
+
+<PropsDocs name="range-calendar" />
\ No newline at end of file
diff --git a/packages/docs/pages/components/range-calendar/_meta.json b/packages/docs/pages/components/range-calendar/_meta.json
deleted file mode 100644
index dd335de314..0000000000
--- a/packages/docs/pages/components/range-calendar/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference" }
diff --git a/packages/docs/pages/components/time-input.mdx b/packages/docs/pages/components/time-input.mdx
index 9ef693d0b7..2f7d837105 100644
--- a/packages/docs/pages/components/time-input.mdx
+++ b/packages/docs/pages/components/time-input.mdx
@@ -1,5 +1,9 @@
 # TimeInput
 
-A Time Input is a field for a single time value.
+<ComponentDescription name="time-input" />
 
-![TimeInput example](public/assets/overview-time-field.webp)
\ No newline at end of file
+<Preview name="time-input" />
+
+## Optional props
+
+<PropsDocs name="time-input" />
\ No newline at end of file
diff --git a/packages/docs/pages/components/time-input/_meta.json b/packages/docs/pages/components/time-input/_meta.json
deleted file mode 100644
index 30a4680c32..0000000000
--- a/packages/docs/pages/components/time-input/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference", "best-practices": "Best Practices" }
diff --git a/packages/docs/pages/components/time-input/api-reference.mdx b/packages/docs/pages/components/time-input/api-reference.mdx
deleted file mode 100644
index 28696c94bc..0000000000
--- a/packages/docs/pages/components/time-input/api-reference.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-# API Reference
-
-Allow users to select a time in a segmented field
-
-```jsx
-<TimeInput />
-```
-
-## Parameters
-
-### `props`
-
-- Type: `@vtex/shoreline-date.TimeInputProps<T> & @types/react.React.RefAttributes<typescript.HTMLDivElement>`
-
-## Props
-
-### `className` (optional)
-
-Custom className
-
-- Type: `string`
-
-### `error` (optional)
-
-Wether has error
-
-- Type: `boolean`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/date/src/time-input/time-input.tsx#L24)
diff --git a/packages/docs/scripts/build-props.mjs b/packages/docs/scripts/build-props.mjs
index 70e45838f7..da5dc4b227 100644
--- a/packages/docs/scripts/build-props.mjs
+++ b/packages/docs/scripts/build-props.mjs
@@ -120,6 +120,21 @@ const files = [
   getPath('components', 'tooltip', 'tooltip-provider'),
   getPath('components', 'tooltip', 'tooltip-popover'),
   getPath('components', 'tooltip', 'tooltip-arrow'),
+  /**
+   * Date
+   */
+  getPath('date', 'calendar', 'calendar'),
+  getPath('date', 'calendar', 'calendar-cell'),
+  getPath('date', 'calendar', 'calendar-grid'),
+  getPath('date', 'calendar', 'calendar-header'),
+  getPath('date', 'calendar', 'calendar-provider'),
+  getPath('date', 'calendar', 'calendar-title'),
+  getPath('date', 'date-field', 'date-field'),
+  getPath('date', 'date-picker', 'date-picker'),
+  getPath('date', 'date-range-picker', 'date-range-picker'),
+  getPath('date', 'date-segment', 'date-segment'),
+  getPath('date', 'range-calendar', 'range-calendar'),
+  getPath('date', 'time-input', 'time-input'),
 ]
 
 let tsCode = `