make month selector a table

packages/opub-ui/src/components/Calendar/Calendar.stories.tsx

@@ -1,9 +1,9 @@
 import { Calendar } from './Calendar'
 import { RangeCalendar } from './RangeCalendar'
 import { YearCalendar } from './YearCalendar'
-import { isWeekend } from '@internationalized/date'
+import { getLocalTimeZone, isWeekend } from '@internationalized/date'
 import { Meta, StoryObj } from '@storybook/react'
-import { useLocale } from 'react-aria'
+import { useDateFormatter, useLocale } from 'react-aria'
 
 /**
  * A calendar displays one or more date grids and allows users to select a single date.
@@ -49,7 +49,17 @@ export const CalendarRange: RangeStory = {
 
 export const Year: any = {
 	render: ({ ...args }) => {
-		return <YearCalendar {...args} />
+		let formatter = useDateFormatter({ dateStyle: 'medium' })
+
+		return (
+			<YearCalendar
+				{...args}
+				onChange={(date: any) => {
+					const formatted = formatter.format(date.toDate(getLocalTimeZone()))
+					console.log(formatted)
+				}}
+			/>
+		)
 	},
 	args: {},
 }

packages/opub-ui/src/components/Calendar/YearCalendar.tsx

@@ -13,8 +13,8 @@ import {
 	useLocale,
 } from 'react-aria'
 import {
-	CalendarStateOptions,
 	CalendarState,
+	CalendarStateOptions,
 	useCalendarState,
 } from 'react-stately'
 
@@ -73,7 +73,7 @@ export const YearCalendar = (
 				<NextButton />
 			</div>
 
-			<MonthSelector state={state} />
+			<MonthSelector state={state} props={props} />
 		</div>
 	)
 }
@@ -92,7 +92,7 @@ function YearDropdown({ state }: { state: CalendarState }) {
 	)
 }
 
-function MonthSelector({ state }: any) {
+function MonthSelector({ state, props }: any) {
 	const [_, setChosenDate] = React.useState<any>(null)
 
 	let onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -104,56 +104,62 @@ function MonthSelector({ state }: any) {
 	}
 
 	const monthsObj: {
-		[key: number]: { month: string; value: number }[]
+		[key: number]: { month: string; value: number; label: string }[]
 	} = {
 		0: [
-			{ month: 'Jan', value: 1 },
-			{ month: 'Feb', value: 2 },
-			{ month: 'Mar', value: 3 },
-			{ month: 'Apr', value: 4 },
+			{ month: 'Jan', value: 1, label: 'January' },
+			{ month: 'Feb', value: 2, label: 'February' },
+			{ month: 'Mar', value: 3, label: 'March' },
+			{ month: 'Apr', value: 4, label: 'April' },
 		],
 		1: [
-			{ month: 'May', value: 5 },
-			{ month: 'Jun', value: 6 },
-			{ month: 'Jul', value: 7 },
-			{ month: 'Aug', value: 8 },
+			{ month: 'May', value: 5, label: 'May' },
+			{ month: 'Jun', value: 6, label: 'June' },
+			{ month: 'Jul', value: 7, label: 'July' },
+			{ month: 'Aug', value: 8, label: 'August' },
 		],
 		2: [
-			{ month: 'Sep', value: 9 },
-			{ month: 'Oct', value: 10 },
-			{ month: 'Nov', value: 11 },
-			{ month: 'Dec', value: 12 },
+			{ month: 'Sep', value: 9, label: 'September' },
+			{ month: 'Oct', value: 10, label: 'October' },
+			{ month: 'Nov', value: 11, label: 'November' },
+			{ month: 'Dec', value: 12, label: 'December' },
 		],
 	}
 
 	const calendar = [...new Array(3).keys()].map((_, i) => {
 		return (
-			<div key={i}>
+			<tr key={i}>
 				{monthsObj[i].map((mon, i) => {
 					const selected =
 						state.focusedDate.month === mon.value &&
 						state.focusedDate.year === state.value?.year
 
 					return (
-						<button
-							key={i}
-							onClick={(e) => {
-								onClick(e)
-							}}
-							className={cn(
-								styles.Cell,
-								styles.YearCell,
-								selected && styles.Selected
-							)}
-							value={mon.value}
-						>
-							<Text color="subdued">{mon.month}</Text>
-						</button>
+						<td key={i} aria-selected={selected} role="gridcell">
+							<button
+								onClick={(e) => {
+									onClick(e)
+								}}
+								className={cn(
+									styles.Cell,
+									styles.YearCell,
+									selected && styles.Selected
+								)}
+								value={mon.value}
+								aria-label={`${mon.label}, ${state.focusedDate.year}`}
+							>
+								<Text color="subdued">{mon.month}</Text>
+							</button>
+						</td>
 					)
 				})}
-			</div>
+			</tr>
 		)
 	})
 
-	return <div>{calendar}</div>
+	return (
+		<table role="grid">
+			<tbody className="mt-2 flex flex-col gap-2">{calendar}</tbody>
+		</table>
+	)
 }

packages/opub-ui/src/components/DatePicker/DatePicker.stories.tsx

@@ -41,6 +41,7 @@ export const Month: Story = {
 	args: {
 		label: 'Month Picker',
 		onChange: (val) => console.log(val),
+		defaultValue: parseDate('2023-02-04'),
 	},
 }
 
@@ -50,7 +51,7 @@ export const DisabledDates: StoryRange = {
 		label: 'Date Picker',
 		minValue: today(getLocalTimeZone()),
 		defaultValue: {
-			start: parseDate('2022-02-03'),
+			start: parseDate('2022-02-04'),
 			end: parseDate('2022-05-03'),
 		},
 		errorMessage: 'Date must be in the future',