agroptima-design-system 0.28.0-beta.2 → 0.28.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.28.0-beta.2",
+  "version": "0.28.0-beta.4",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/DatePicker.tsx

@@ -1,7 +1,7 @@
 import 'react-day-picker/style.css'
 import './DatePicker.scss'
-import { useState } from 'react'
-import { type DateRange, DayPicker, type Locale } from 'react-day-picker'
+import { useEffect, useState } from 'react'
+import { type DateRange, DayPicker } from 'react-day-picker'
 import { enGB, es } from 'react-day-picker/locale'
 import { classNames } from '../utils/classNames'
 
@@ -28,9 +28,14 @@ export function DatePicker({
   selected: preselected,
   locale = 'es',
 }: CalendarProps): React.JSX.Element {
+  useEffect(() => {
+    setSelected(preselected)
+  }, [preselected])
+
+  console.log('preselected: ', preselected)
   const cssClasses = classNames('date-picker', variant, className)
 
-  const [selected, setSelected] = useState<DateRange>(preselected as DateRange)
+  const [selected, setSelected] = useState<DateRange | undefined>(preselected)
 
   function selectDate(dateRange: DateRange) {
     setSelected(dateRange)

package/src/stories/DatePicker.stories.ts

@@ -36,6 +36,7 @@ export const Primary: Story = {
     variant: 'primary',
     footer: 'Pick a day.',
     onSelect: (date) => console.log('onSelect date:', date),
+    selected: { from: new Date(2025, 0, 1), to: new Date(2025, 0, 15) },
   },
   parameters: figmaPrimaryDesign,
 }

package/src/stories/Drawer.stories.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { CheckableTag, CheckableTagGroup } from '../atoms/CheckableTag'
 import { Collapsible } from '../atoms/Collapsible'
-import { Drawer } from '../atoms/Drawer'
 import { DatePicker } from '../atoms/DatePicker'
+import { Drawer } from '../atoms/Drawer'
 
 const figmaPrimaryDesign = {
   design: {
@@ -121,8 +121,12 @@ export const Filters = {
         </CheckableTagGroup>
       </Collapsible>
       <Collapsible noHorizontalPadding open title="Date">
-        <div style={{display: 'flex', justifyContent: 'center' }}>
-          <DatePicker footer="Pick a day." onSelect={(date) => console.log('date: ', date)} />  
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <DatePicker
+            footer="Pick a day."
+            selected={{ from: new Date(2025, 0, 1), to: new Date(2025, 0, 15) }}
+            onSelect={(date) => console.log('date: ', date)}
+          />
         </div>
       </Collapsible>
     </Drawer>