Implement date picker components

packages/lsd-react/package.json

@@ -14,6 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
+    "@datepicker-react/hooks": "^2.8.4",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "clsx": "^1.2.1",

packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx

@@ -5,13 +5,16 @@ import { BadgeStyles } from '../Badge/Badge.styles'
 import { BreadcrumbStyles } from '../Breadcrumb/Breadcrumb.styles'
 import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
 import { ButtonStyles } from '../Button/Button.styles'
+import { CalendarStyles } from '../Calendar/Calendar.styles'
 import { CardStyles } from '../Card/Card.styles'
 import { CardBodyStyles } from '../CardBody/CardBody.styles'
 import { CardHeaderStyles } from '../CardHeader/CardHeader.styles'
 import { CheckboxStyles } from '../Checkbox/Checkbox.styles'
 import { CheckboxGroupStyles } from '../CheckboxGroup/CheckboxGroup.styles'
 import { CollapseStyles } from '../Collapse/Collapse.styles'
 import { CollapseHeaderStyles } from '../CollapseHeader/CollapseHeader.styles'
+import { DateFieldStyles } from '../DateField/DateField.styles'
+import { DatePickerStyles } from '../DatePicker/DatePicker.styles'
 import { DropdownStyles } from '../Dropdown/Dropdown.styles'
 import { DropdownItemStyles } from '../DropdownItem/DropdownItem.styles'
 import { IconButtonStyles } from '../IconButton/IconButton.styles'
@@ -74,6 +77,9 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     ModalStyles,
     ModalFooterStyles,
     ModalBodyStyles,
+    DatePickerStyles,
+    DateFieldStyles,
+    CalendarStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({

packages/lsd-react/src/components/Calendar/Calendar.classes.ts

@@ -0,0 +1,24 @@
+export const calendarClasses = {
+  root: `lsd-calendar`,
+  container: 'lsd-calendar-container',
+
+  open: 'lsd-calendar--open',
+  disabled: 'lsd-calendar--disabled',
+
+  header: 'lsd-calendar-header',
+  grid: 'lsd-calendar-body',
+  weekDay: 'lsd-calendar__week_day',
+  button: 'lsd-calendar__button',
+  row: 'lsd-calendar__row',
+  changeYear: 'lsd-calendar__change-year',
+  changeYearButton: 'lsd-calendar__change-year__button',
+
+  year: 'lsd-calendar-year',
+  month: 'lsd-calendar-month',
+  day: 'lsd-calendar-day',
+  daySelected: 'lsd-calendar-day--selected',
+  dayDisabled: 'lsd-calendar-day--disabled',
+  dayIsToday: 'lsd-calendar-day--today',
+  todayIndicator: 'lsd-calendar-day__today_indicator',
+  dayRange: 'lsd-calendar-day--range',
+}

packages/lsd-react/src/components/Calendar/Calendar.context.ts

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export type CalendarContextType = {
+  focusedDate: Date | null
+  size?: 'large' | 'medium' | 'small'
+  isDateFocused: (date: Date) => boolean
+  isDateSelected: (date: Date) => boolean
+  isDateHovered: (date: Date) => boolean
+  isDateBlocked: (date: Date) => boolean
+  isFirstOrLastSelectedDate: (date: Date) => boolean
+  onDateFocus: (date: Date) => void
+  onDateHover: (date: Date) => void
+  onDateSelect: (date: Date) => void
+}
+
+export const CalendarContext = React.createContext<CalendarContextType>(
+  null as any,
+)
+
+export const useCalendarContext = () => React.useContext(CalendarContext)

packages/lsd-react/src/components/Calendar/Calendar.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, Story } from '@storybook/react'
+import { useRef } from 'react'
+import { Calendar, CalendarProps } from './Calendar'
+
+export default {
+  title: 'Calendar',
+  component: Calendar,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large'],
+      },
+      defaultValue: 'large',
+    },
+  },
+} as Meta
+
+export const Uncontrolled: Story<CalendarProps> = (arg) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  return (
+    <div ref={ref} style={{ width: '300px' }}>
+      <Calendar {...arg} open={true} handleRef={ref}>
+        Calendar
+      </Calendar>
+    </div>
+  )
+}
+
+export const Controlled: Story<CalendarProps> = (arg) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  return (
+    <div ref={ref} style={{ width: '300px' }}>
+      <Calendar {...arg} open={true} handleRef={ref}>
+        Calendar
+      </Calendar>
+    </div>
+  )
+}
+
+Uncontrolled.args = {
+  value: undefined,
+  onChange: undefined,
+  size: 'large',
+}
+
+Controlled.args = {
+  value: '2023-01-01',
+  onChange: undefined,
+  size: 'large',
+}

packages/lsd-react/src/components/Calendar/Calendar.styles.ts

@@ -0,0 +1,147 @@
+import { css } from '@emotion/react'
+import { calendarClasses } from './Calendar.classes'
+
+export const CalendarStyles = css`
+  .${calendarClasses.root} {
+    border: 1px solid rgb(var(--lsd-border-primary));
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    visibility: hidden;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background: rgb(var(--lsd-surface-primary));
+  }
+
+  .${calendarClasses.container} {
+    display: grid;
+    margin: 8px 2px 2px;
+    grid-gap: 0 64px;
+  }
+
+  .${calendarClasses.open} {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .${calendarClasses.header} {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-inline: 10px;
+    padding-bottom: 10px;
+  }
+
+  .${calendarClasses.grid} {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .${calendarClasses.weekDay} {
+    text-align: center;
+    aspect-ratio: 1 / 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .${calendarClasses.row} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .${calendarClasses.changeYear} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid rgb(var(--lsd-border-primary));
+    padding: 2px 6px;
+    gap: 6px;
+  }
+
+  .${calendarClasses.changeYearButton} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    border: none;
+    height: 14px;
+    width: 14px;
+    padding: 0;
+  }
+
+  .${calendarClasses.month} {
+    margin-right: 8px;
+  }
+
+  .${calendarClasses.year}:hover {
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-color: rgb(var(--lsd-border-primary));
+  }
+
+  .${calendarClasses.day} {
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    aspect-ratio: 1 / 1;
+    position: relative;
+  }
+
+  .${calendarClasses.day}:hover {
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-color: rgb(var(--lsd-border-primary));
+  }
+
+  .${calendarClasses.day} label:hover {
+    cursor: pointer;
+  }
+
+  .${calendarClasses.daySelected} {
+    border: 1px solid rgb(var(--lsd-border-primary));
+  }
+
+  .${calendarClasses.dayDisabled} {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  .${calendarClasses.todayIndicator} {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 2px;
+  }
+
+  .${calendarClasses.disabled} {
+    pointer-events: none;
+    border: 1px solid rgba(var(--lsd-border-primary), 0.3);
+    label {
+      opacity: 0.3;
+    }
+    .${calendarClasses.button} {
+      opacity: 0.3;
+    }
+    .${calendarClasses.daySelected} {
+      opacity: 0.3;
+    }
+  }
+
+  .${calendarClasses.button} {
+    border: 1px solid rgb(var(--lsd-border-primary));
+    cursor: pointer;
+    background: transparent;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`