refactor: refactor datepicker, calendar, datefield based on feedback

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

@@ -3,12 +3,20 @@ export const calendarClasses = {
   container: 'lsd-calendar-container',
 
   open: 'lsd-calendar--open',
+  disabled: 'lsd-calendar--disabled',
 
   header: 'lsd-calendar-header',
   grid: 'lsd-calendar-body',
+  weekDay: 'lsd-calendar__weekDay',
   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--diabled',
+  dayDisabled: 'lsd-calendar-day--disabled',
+  today: 'lsd-calendar-today',
 }

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

@@ -2,6 +2,7 @@ import React from 'react'
 
 export type CalendarContextType = {
   focusedDate: Date | null
+  size?: 'large' | 'medium'
   isDateFocused: (date: Date) => boolean
   isDateSelected: (date: Date) => boolean
   isDateHovered: (date: Date) => boolean

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

@@ -1,13 +1,22 @@
 import { Meta, Story } from '@storybook/react'
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
 import { Calendar, CalendarProps } from './Calendar'
 
 export default {
   title: 'Calendar',
   component: Calendar,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['medium', 'large'],
+      },
+      defaultValue: 'large',
+    },
+  },
 } as Meta
 
-export const Root: Story<CalendarProps> = (arg) => {
+export const Uncontrolled: Story<CalendarProps> = (arg) => {
   const ref = useRef<HTMLDivElement>(null)
 
   return (
@@ -24,7 +33,31 @@ export const Root: Story<CalendarProps> = (arg) => {
   )
 }
 
-Root.args = {
+export const Controlled: Story<CalendarProps> = (arg) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  return (
+    <div ref={ref} style={{ width: '300px' }}>
+      <Calendar
+        {...arg}
+        handleDateFieldChange={(date) => console.log(date?.toDateString())}
+        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

@@ -39,13 +39,66 @@ export const CalendarStyles = css`
     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;
+    background: transparent;
+  }
+
+  .${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} {
@@ -57,6 +110,27 @@ export const CalendarStyles = css`
     cursor: default;
   }
 
+  .${calendarClasses.today} {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 0;
+  }
+
+  .${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;

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

@@ -8,15 +8,19 @@ import React, { useEffect, useRef, useState } from 'react'
 import { calendarClasses } from './Calendar.classes'
 import { CalendarContext } from './Calendar.context'
 import { Month } from './Month'
+import { useClickAway } from 'react-use'
 
 export type CalendarProps = Omit<
   React.HTMLAttributes<HTMLUListElement>,
   'label'
 > & {
   open?: boolean
+  disabled?: boolean
   value?: string
   handleDateFieldChange: (data: Date) => void
   handleRef: React.RefObject<HTMLElement>
+  size?: 'large' | 'medium'
+  onClose?: () => void
 }
 
 export const Calendar: React.FC<CalendarProps> & {
@@ -25,12 +29,22 @@ export const Calendar: React.FC<CalendarProps> & {
   open,
   handleRef,
   value = null,
+  size = 'large',
+  disabled = false,
   handleDateFieldChange,
+  onClose,
   children,
   ...props
 }) => {
+  const ref = useRef<HTMLDivElement>(null)
   const [style, setStyle] = useState<React.CSSProperties>({})
 
+  useClickAway(ref, (event) => {
+    if (!open || event.composedPath().includes(handleRef.current!)) return
+
+    onClose && onClose()
+  })
+
   const handleDateChange = (data: OnDatesChangeProps) => {
     handleDateFieldChange(data.startDate ?? new Date())
     onDateFocus(data.startDate ?? new Date())
@@ -75,6 +89,7 @@ export const Calendar: React.FC<CalendarProps> & {
   return (
     <CalendarContext.Provider
       value={{
+        size,
         focusedDate,
         isDateFocused,
         isDateSelected,
@@ -91,16 +106,19 @@ export const Calendar: React.FC<CalendarProps> & {
           props.className,
           calendarClasses.root,
           open && calendarClasses.open,
+          disabled && calendarClasses.disabled,
         )}
+        ref={ref}
         style={{ ...style, ...(props.style ?? {}) }}
       >
         <div className={clsx(calendarClasses.container)}>
-          {activeMonths.map((month) => (
+          {activeMonths.map((month, idx) => (
             <Month
-              key={`${month.year}-${month.month}`}
+              key={`${month.year}-${month.month}-${idx}`}
               year={month.year}
               month={month.month}
               firstDayOfWeek={0}
+              size={size}
               goToPreviousMonths={goToPreviousMonths}
               goToNextMonths={goToNextMonths}
             />

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

@@ -8,9 +8,10 @@ import { Typography } from '../Typography'
 export type DayProps = {
   day?: string
   date: Date
+  disabled?: boolean
 }
 
-export const Day = ({ day, date }: DayProps) => {
+export const Day = ({ day, date, disabled = false }: DayProps) => {
   const dayRef = useRef(null)
   const {
     focusedDate,
@@ -52,10 +53,17 @@ export const Day = ({ day, date }: DayProps) => {
       ref={dayRef}
       className={clsx(
         calendarClasses.day,
-        isDateFocused(date) && calendarClasses.daySelected,
+        !disabled && isDateFocused(date) && calendarClasses.daySelected,
+        disabled && calendarClasses.dayDisabled,
       )}
     >
       <Typography variant="label2">{parseInt(day, 10)}</Typography>
+      {new Date(date).setHours(0, 0, 0, 0) ===
+        new Date().setHours(0, 0, 0, 0) && (
+        <Typography variant="label2" className={calendarClasses.today}>
+          ■
+        </Typography>
+      )}
     </button>
   )
 }