feat: annotations

Author: shiftpsh

example/src/stories/DateSelect.stories.tsx

@@ -1,17 +1,107 @@
 import { Centering, DateSelect } from '@solved-ac/ui-react'
-import { Meta, StoryFn } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import React from 'react'
 
 export default {
   title: 'Components/DateSelect',
   component: DateSelect,
-  argTypes: {},
+  argTypes: {
+    locale: {
+      control: 'text',
+      description: 'The locale to use',
+    },
+    weekStartsOn: {
+      defaultValue: 0,
+      options: [0, 1, 2, 3, 4, 5, 6],
+      control: {
+        type: 'select',
+      },
+      description: 'The day of the week to start on',
+    },
+    chunks: {
+      defaultValue: 1,
+      options: [1, 2, 3, 4, 5, 6],
+      control: {
+        type: 'select',
+      },
+      description: 'The number of months to display at once',
+    },
+    annotations: {
+      control: 'array',
+      description: 'The annotations to display',
+      defaultValue: [],
+    },
+  },
 } as Meta<typeof DateSelect>
 
-const Template: StoryFn<typeof DateSelect> = (args) => (
-  <Centering>
-    <DateSelect {...args} />
-  </Centering>
-)
+type Story = StoryObj<typeof DateSelect>
 
-export const Default = Template.bind({})
+export const Default: Story = {
+  render: (args) => (
+    <Centering>
+      <DateSelect {...args} />
+    </Centering>
+  ),
+}
+
+const DAY = 1000 * 60 * 60 * 24
+
+export const Annotations: Story = {
+  render: (args) => (
+    <Centering>
+      <DateSelect {...args} />
+    </Centering>
+  ),
+  args: {
+    annotations: [
+      {
+        title: "I'm a title",
+        color: '#e3f44f',
+        start: new Date().toISOString().split('T')[0],
+        end: new Date(Date.now() + DAY * 7).toISOString().split('T')[0],
+      },
+      {
+        title: "I'm a title",
+        color: '#c1ecff',
+        start: new Date(Date.now() - DAY * 17).toISOString().split('T')[0],
+        end: new Date(Date.now() - DAY * 5).toISOString().split('T')[0],
+      },
+      {
+        title: "I'm a title",
+        color: '#ffd2bd',
+        start: new Date(Date.now() + DAY * 4).toISOString().split('T')[0],
+        end: new Date(Date.now() + DAY * 16).toISOString().split('T')[0],
+      },
+      {
+        title: "I'm a title",
+        color: '#ffc8fb',
+        start: new Date(Date.now() + DAY * 9).toISOString().split('T')[0],
+        end: new Date(Date.now() + DAY * 9).toISOString().split('T')[0],
+      },
+      {
+        title: "I'm a title",
+        color: '#f9ffc1',
+        start: new Date(Date.now() + DAY * 16).toISOString().split('T')[0],
+        end: new Date(Date.now() + DAY * 17).toISOString().split('T')[0],
+      },
+      {
+        title: "I'm a title",
+        color: '#d7ffc0',
+        start: new Date(Date.now() + DAY * 24).toISOString().split('T')[0],
+        end: new Date(Date.now() + DAY * 28).toISOString().split('T')[0],
+      },
+      {
+        title: "I'm a title",
+        color: '#b9b7b4',
+        start: new Date(Date.now() + DAY * 21).toISOString().split('T')[0],
+        end: new Date(Date.now() + DAY * 25).toISOString().split('T')[0],
+      },
+      {
+        title: "I'm a title",
+        color: '#ffcbcb',
+        start: new Date(Date.now() + DAY * 34).toISOString().split('T')[0],
+        end: new Date(Date.now() + DAY * 36).toISOString().split('T')[0],
+      },
+    ],
+  },
+}

src/components/$DateSelect/DateSelect.tsx

@@ -1,3 +1,4 @@
+import styled from '@emotion/styled'
 import React, { ElementType, useState } from 'react'
 import { PP, PR } from '../../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../../utils/ref'
@@ -27,8 +28,10 @@ export interface DateSelectAnnotation extends DateRange {
 
 export type DateSelectProps = DateSelectValues & {
   annotations?: DateSelectAnnotation[]
+  maxAnnotationsPerDay?: number
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
   locale?: string
+  chunks?: number
 }
 
 export type DateSelectMode = 'year' | 'month' | 'date'
@@ -41,35 +44,50 @@ export type DateSelectMode = 'year' | 'month' | 'date'
 //   return new Date(date)
 // }
 
+const DateSelectContainer = styled.div`
+  user-select: none;
+  display: flex;
+  gap: 1em;
+`
+
 export const DateSelect = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, DateSelectProps>, ref?: PR<T>) => {
     const {
       type,
       value,
       onChange,
       annotations = [],
+      maxAnnotationsPerDay = annotations.length ? 3 : 0,
       weekStartsOn = 0,
       locale,
+      chunks = 1,
       ...rest
     } = props
     // const theme = useTheme()
 
-    // const [currentMode, setCurrentMode] = useState<DateSelectMode>('date')
+    const [currentMode, setCurrentMode] = useState<DateSelectMode>('date')
     const [selectedDate, setSelectedDate] = useState<Date>(new Date())
 
     // const selectedYear = selectedDate.getFullYear()
     // const selectedMonth = selectedDate.getMonth()
 
     return (
-      <div {...rest} ref={ref}>
-        <DateSelectMonthView
-          {...props}
-          selectedDate={selectedDate}
-          setSelectedDate={setSelectedDate}
-          firstMonth
-          lastMonth
-        />
-      </div>
+      <DateSelectContainer {...rest} ref={ref}>
+        {currentMode === 'date' &&
+          new Array(chunks).fill(0).map((_, index) => (
+            <DateSelectMonthView
+              {...props}
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              offset={index - Math.floor(chunks / 2)}
+              selectedDate={selectedDate}
+              setSelectedDate={setSelectedDate}
+              setModeToMonth={() => setCurrentMode('month')}
+              firstMonth={index === 0}
+              lastMonth={index === chunks - 1}
+            />
+          ))}
+      </DateSelectContainer>
     )
   }
 )