Add DatePicker component

packages/design-system/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,22 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+import { type Meta } from '@storybook/react'
+import { useState } from 'react'
+import { DatePicker } from './DatePicker'
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+}
+
+export default meta
+
+export const Default = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date())
+  return <DatePicker mode="single" selected={date} onSelect={setDate} />
+}

packages/design-system/src/components/DatePicker/DatePicker.test.tsx

@@ -0,0 +1,31 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+import { fireEvent, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { DatePicker } from '.'
+
+describe('DatePicker', () => {
+  it('renders date picker', () => {
+    const onSelect = jest.fn()
+    render(
+      <DatePicker mode="single" selected={undefined} onSelect={onSelect} />,
+    )
+
+    const queryGoToPrevMonth = () =>
+      screen.queryByRole('button', {
+        name: 'Go to previous month',
+      })
+
+    expect(queryGoToPrevMonth()).not.toBeInTheDocument()
+
+    const trigger = screen.getByRole('button', { name: 'Pick a date' })
+    fireEvent.click(trigger)
+
+    expect(queryGoToPrevMonth()).toBeInTheDocument()
+  })
+})

packages/design-system/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,38 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+'use client'
+import { format, isDate } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-react'
+import { type ComponentProps } from 'react'
+import { type DayPicker } from 'react-day-picker'
+import { cn } from '../../utils/className'
+import { Button } from '../Button'
+import { Calendar } from '../Calendar'
+import { Popover, PopoverTrigger, PopoverContent } from '../Popover'
+
+export type DatePickerProps = ComponentProps<typeof DayPicker>
+
+export const DatePicker = ({ selected, ...props }: DatePickerProps) => (
+  <Popover>
+    <PopoverTrigger asChild>
+      <Button
+        variant="outline"
+        className={cn(
+          '!w-[280px] !justify-start !text-left',
+          !selected && '!text-muted-foreground',
+        )}
+      >
+        <CalendarIcon className="size-4" />
+        {selected && isDate(selected) ? format(selected, 'PPP') : 'Pick a date'}
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent className="!w-auto !p-0">
+      <Calendar {...props} />
+    </PopoverContent>
+  </Popover>
+)

packages/design-system/src/components/DatePicker/index.tsx

@@ -0,0 +1,9 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+'use client'
+export * from './DatePicker'