From e59db1790065ded4ac99fac4c1a45ac2a80c428b Mon Sep 17 00:00:00 2001 From: Andre Morise Date: Mon, 15 Apr 2024 11:21:27 -0400 Subject: [PATCH 1/2] docs: add DateValue type reference Closes: #454 - Added 'date-value.ts' to 'extended-types' - Added 'dateValueProp' definition with mention of '@internationalized/date' - Updated all "DateValue" type references to 'dateValueProp' --- .../src/lib/content/api-reference/calendar.ts | 15 ++++++++------- .../src/lib/content/api-reference/date-field.ts | 9 +++++---- .../src/lib/content/api-reference/date-picker.ts | 10 +++++----- .../lib/content/api-reference/date-range-field.ts | 7 ++++--- .../content/api-reference/date-range-picker.ts | 8 ++++---- .../api-reference/extended-types/date-value.ts | 6 ++++++ .../content/api-reference/extended-types/index.ts | 6 ++++++ .../lib/content/api-reference/range-calendar.ts | 13 +++++++------ 8 files changed, 45 insertions(+), 29 deletions(-) create mode 100644 sites/docs/src/lib/content/api-reference/extended-types/date-value.ts diff --git a/sites/docs/src/lib/content/api-reference/calendar.ts b/sites/docs/src/lib/content/api-reference/calendar.ts index 5902badc9..371884d3e 100644 --- a/sites/docs/src/lib/content/api-reference/calendar.ts +++ b/sites/docs/src/lib/content/api-reference/calendar.ts @@ -14,6 +14,7 @@ import type { } from "bits-ui"; import { attrsSlotProp, builderAndAttrsSlotProps, domElProps } from "./helpers.js"; import { enums, monthsSlotProp, weekdaysSlotProp } from "$lib/content/api-reference/helpers.js"; +import { dateValueProp } from "$lib/content/api-reference/extended-types/index.js"; import * as C from "$lib/content/constants.js"; import type { APISchema } from "$lib/types/index.js"; @@ -22,7 +23,7 @@ export const root: APISchema = { description: "The root calendar component which contains all other calendar components.", props: { value: { - type: "DateValue", + type: dateValueProp, description: "The selected date.", }, onValueChange: { @@ -33,7 +34,7 @@ export const root: APISchema = { description: "A function that is called when the selected date changes.", }, placeholder: { - type: "DateValue", + type: dateValueProp, description: "The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar, and can be used to programatically control the calendar's view.", }, @@ -95,11 +96,11 @@ export const root: APISchema = { description: "A function that returns whether or not a date is unavailable.", }, maxValue: { - type: "DateValue", + type: dateValueProp, description: "The maximum date that can be selected.", }, minValue: { - type: "DateValue", + type: dateValueProp, description: "The minimum date that can be selected.", }, locale: { @@ -164,7 +165,7 @@ export const cell: APISchema = { description: "A cell in the calendar grid.", props: { date: { - type: "DateValue", + type: dateValueProp, description: "The date for the cell.", }, ...domElProps("HTMLTableCellElement"), @@ -189,11 +190,11 @@ export const day: APISchema = { description: "A day in the calendar grid.", props: { date: { - type: "DateValue", + type: dateValueProp, description: "The date for the cell.", }, month: { - type: "DateValue", + type: dateValueProp, description: "The current month the date is being displayed in.", }, ...domElProps("HTMLDivElement"), diff --git a/sites/docs/src/lib/content/api-reference/date-field.ts b/sites/docs/src/lib/content/api-reference/date-field.ts index 82846f3e0..3536edaee 100644 --- a/sites/docs/src/lib/content/api-reference/date-field.ts +++ b/sites/docs/src/lib/content/api-reference/date-field.ts @@ -6,6 +6,7 @@ import type { } from "bits-ui"; import { builderAndAttrsSlotProps } from "./helpers.js"; import { domElProps, enums, idsSlotProp, union } from "$lib/content/api-reference/helpers.js"; +import { dateValueProp } from "$lib/content/api-reference/extended-types/index.js"; import * as C from "$lib/content/constants.js"; import type { APISchema } from "$lib/types/index.js"; @@ -14,7 +15,7 @@ export const root: APISchema = { description: "The root date field component.", props: { value: { - type: "DateValue", + type: dateValueProp, description: "The selected date.", }, onValueChange: { @@ -25,7 +26,7 @@ export const root: APISchema = { description: "A function that is called when the selected date changes.", }, placeholder: { - type: "DateValue", + type: dateValueProp, description: "The placeholder date, which is used to determine what date to start the segments from when no value exists.", }, @@ -75,11 +76,11 @@ export const root: APISchema = { "The id of your description element, if any, which will be applied to the `aria-describedby` attribute of the appropriate elements.", }, maxValue: { - type: "DateValue", + type: dateValueProp, description: "The maximum valid date that can be entered.", }, minValue: { - type: "DateValue", + type: dateValueProp, description: "The minimum valid date that can be entered.", }, locale: { diff --git a/sites/docs/src/lib/content/api-reference/date-picker.ts b/sites/docs/src/lib/content/api-reference/date-picker.ts index 88a2f82c2..57b707362 100644 --- a/sites/docs/src/lib/content/api-reference/date-picker.ts +++ b/sites/docs/src/lib/content/api-reference/date-picker.ts @@ -17,7 +17,7 @@ import { prevButton, } from "./calendar.js"; import { label, segment } from "./date-field.js"; -import { focusProp } from "./extended-types/index.js"; +import { dateValueProp, focusProp } from "./extended-types/index.js"; import { builderAndAttrsSlotProps, portalProp } from "./helpers.js"; import { content, trigger } from "./popover.js"; import type { APISchema } from "$lib/types/index.js"; @@ -36,7 +36,7 @@ const root: APISchema = { description: "The root date picker component.", props: { value: { - type: "DateValue", + type: dateValueProp, description: "The selected date.", }, onValueChange: { @@ -47,7 +47,7 @@ const root: APISchema = { description: "A function that is called when the selected date changes.", }, placeholder: { - type: "DateValue", + type: dateValueProp, description: "The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar, and can be used to programatically control the calendar's view.", }, @@ -109,11 +109,11 @@ const root: APISchema = { description: "A function that returns whether or not a date is unavailable.", }, maxValue: { - type: "DateValue", + type: dateValueProp, description: "The maximum date that can be selected.", }, minValue: { - type: "DateValue", + type: dateValueProp, description: "The minimum date that can be selected.", }, locale: { diff --git a/sites/docs/src/lib/content/api-reference/date-range-field.ts b/sites/docs/src/lib/content/api-reference/date-range-field.ts index 97fad6bdb..42ed55c40 100644 --- a/sites/docs/src/lib/content/api-reference/date-range-field.ts +++ b/sites/docs/src/lib/content/api-reference/date-range-field.ts @@ -6,6 +6,7 @@ import type { } from "bits-ui"; import { builderAndAttrsSlotProps } from "./helpers.js"; import { domElProps, enums, idsSlotProp, union } from "$lib/content/api-reference/helpers.js"; +import { dateValueProp } from "$lib/content/api-reference/extended-types/index.js"; import * as C from "$lib/content/constants.js"; import type { APISchema } from "$lib/types/index.js"; @@ -28,7 +29,7 @@ export const root: APISchema = { description: "A function that is called when the selected date changes.", }, placeholder: { - type: "DateValue", + type: dateValueProp, description: "The placeholder date, which is used to determine what date to start the segments from when no value exists.", }, @@ -78,11 +79,11 @@ export const root: APISchema = { "The id of your description element, if any, which will be applied to the `aria-describedby` attribute of the appropriate elements.", }, maxValue: { - type: "DateValue", + type: dateValueProp, description: "The maximum valid date that can be entered.", }, minValue: { - type: "DateValue", + type: dateValueProp, description: "The minimum valid date that can be entered.", }, locale: { diff --git a/sites/docs/src/lib/content/api-reference/date-range-picker.ts b/sites/docs/src/lib/content/api-reference/date-range-picker.ts index 89dd4d314..7f210095d 100644 --- a/sites/docs/src/lib/content/api-reference/date-range-picker.ts +++ b/sites/docs/src/lib/content/api-reference/date-range-picker.ts @@ -4,7 +4,7 @@ import type { DateRangePickerPropsWithoutHTML, } from "bits-ui"; import { label, segment } from "./date-range-field.js"; -import { focusProp } from "./extended-types/index.js"; +import { dateValueProp, focusProp } from "./extended-types/index.js"; import { builderAndAttrsSlotProps, portalProp } from "./helpers.js"; import { content, trigger } from "./popover.js"; import { @@ -50,7 +50,7 @@ const root: APISchema = { description: "A function that is called when the selected date changes.", }, placeholder: { - type: "DateValue", + type: dateValueProp, description: "The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar, and can be used to programatically control the calendar's view.", }, @@ -112,11 +112,11 @@ const root: APISchema = { description: "A function that returns whether or not a date is unavailable.", }, maxValue: { - type: "DateValue", + type: dateValueProp, description: "The maximum date that can be selected.", }, minValue: { - type: "DateValue", + type: dateValueProp, description: "The minimum date that can be selected.", }, locale: { diff --git a/sites/docs/src/lib/content/api-reference/extended-types/date-value.ts b/sites/docs/src/lib/content/api-reference/extended-types/date-value.ts new file mode 100644 index 000000000..6ecfc3a98 --- /dev/null +++ b/sites/docs/src/lib/content/api-reference/extended-types/date-value.ts @@ -0,0 +1,6 @@ +import type { DateValue } from "@internationalized/date"; + +/** + * Represents a date and/or time in a specific calendar system. + * type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime; + */ \ No newline at end of file diff --git a/sites/docs/src/lib/content/api-reference/extended-types/index.ts b/sites/docs/src/lib/content/api-reference/extended-types/index.ts index 61f8298f6..23a80a582 100644 --- a/sites/docs/src/lib/content/api-reference/extended-types/index.ts +++ b/sites/docs/src/lib/content/api-reference/extended-types/index.ts @@ -1,8 +1,14 @@ import rawFocusProp from "$lib/content/api-reference/extended-types/focus-target.js?raw"; import rawMonthProp from "$lib/content/api-reference/extended-types/months.js?raw"; +import rawDateValueProp from "$lib/content/api-reference/extended-types/date-value.js?raw"; import rawPageItemProp from "$lib/content/api-reference/extended-types/page-item.js?raw"; import type { PropType } from "$lib/types/index.js"; +export const dateValueProp: PropType = { + type: "DateValue", + definition: rawDateValueProp, +}; + export const monthsPropType: PropType = { type: "Month[]", definition: rawMonthProp, diff --git a/sites/docs/src/lib/content/api-reference/range-calendar.ts b/sites/docs/src/lib/content/api-reference/range-calendar.ts index aa9d9fee3..265ff9354 100644 --- a/sites/docs/src/lib/content/api-reference/range-calendar.ts +++ b/sites/docs/src/lib/content/api-reference/range-calendar.ts @@ -13,6 +13,7 @@ import type { RangeCalendarPropsWithoutHTML, } from "bits-ui"; import { builderAndAttrsSlotProps, domElProps } from "./helpers.js"; +import { dateValueProp } from "$lib/content/api-reference/extended-types/index.js"; import { attrsSlotProp, enums, @@ -42,7 +43,7 @@ export const root: APISchema = { description: "A function that is called when the selected date range changes.", }, placeholder: { - type: "DateValue", + type: dateValueProp, description: "The placeholder date, which is used to determine what month to display when no date range is selected. This updates as the user navigates the calendar, and can be used to programatically control the calendar's view.", }, @@ -104,11 +105,11 @@ export const root: APISchema = { description: "A function that returns whether or not a date is unavailable.", }, maxValue: { - type: "DateValue", + type: dateValueProp, description: "The maximum date that can be selected.", }, minValue: { - type: "DateValue", + type: dateValueProp, description: "The minimum date that can be selected.", }, locale: { @@ -192,7 +193,7 @@ export const cell: APISchema = { description: "A cell in the calendar grid.", props: { date: { - type: "DateValue", + type: dateValueProp, description: "The date for the cell.", }, ...domElProps("HTMLTableCellElement"), @@ -217,11 +218,11 @@ export const day: APISchema = { description: "A day in the calendar grid.", props: { date: { - type: "DateValue", + type: dateValueProp, description: "The date for the cell.", }, month: { - type: "DateValue", + type: dateValueProp, description: "The current month the date is being displayed in.", }, ...domElProps("HTMLDivElement"), From 35f8761ffcd534b379fac916f1ccc64493e8e5d1 Mon Sep 17 00:00:00 2001 From: Andre Morise Date: Tue, 16 Apr 2024 18:39:15 -0400 Subject: [PATCH 2/2] fix: formatting --- .../src/lib/content/api-reference/extended-types/date-value.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sites/docs/src/lib/content/api-reference/extended-types/date-value.ts b/sites/docs/src/lib/content/api-reference/extended-types/date-value.ts index 6ecfc3a98..6cbd77816 100644 --- a/sites/docs/src/lib/content/api-reference/extended-types/date-value.ts +++ b/sites/docs/src/lib/content/api-reference/extended-types/date-value.ts @@ -3,4 +3,4 @@ import type { DateValue } from "@internationalized/date"; /** * Represents a date and/or time in a specific calendar system. * type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime; - */ \ No newline at end of file + */