agroptima-design-system 0.29.1 → 0.29.2-beta.1

package/package.json

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

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -11,6 +11,7 @@ import {
 import { translations } from './translations'
 
 export type Variant = 'primary'
+export type DateType = 'single' | 'range' | 'multiple'
 
 type DivPropsWithoutOnSelect = Omit<
   React.ComponentPropsWithoutRef<'div'>,
@@ -31,6 +32,7 @@ export interface DateRangePickerProps extends DivPropsWithoutOnSelect {
   onSelect: (dateRange: DateRange | undefined) => void
   selected?: DateRange
   lng: keyof typeof availableLocales
+  type: DateType
 }
 
 export function DateRangePicker({
@@ -39,6 +41,7 @@ export function DateRangePicker({
   onSelect = () => {},
   selected: preselected,
   lng,
+  type,
 }: DateRangePickerProps): React.JSX.Element {
   const manageFooterText = (): string => {
     const hasDatesFilter = selected && selected.from && selected.to
@@ -92,6 +95,7 @@ export function DateRangePicker({
         locale={availableLocales[lng]}
         mode="range"
         min={1}
+        max={type === 'single' ? 1 : undefined}
         selected={selected}
         onSelect={(dateRange) => selectDate(dateRange)}
         footer={footer}

package/src/atoms/DatePicker/DateSinglePicker.tsx

@@ -0,0 +1,81 @@
+import 'react-day-picker/style.css'
+import './DateRangePicker.scss'
+import { useEffect, useState } from 'react'
+import { type DateRange, DayPicker, type Locale } from 'react-day-picker'
+import { enGB, es } from 'react-day-picker/locale'
+import { classNames } from '../../utils/classNames'
+import {
+  formatDatePickerFooterDate,
+  formatDatePickerParamsDate,
+} from '../../utils/dateHelpers'
+import { translations } from './translations'
+
+export type Variant = 'primary'
+
+export type DateType = 'single' | 'range' | 'multiple'
+
+type DivPropsWithoutOnSelect = Omit<
+  React.ComponentPropsWithoutRef<'div'>,
+  'onSelect'
+>
+
+interface AvailableLocale {
+  [index: string]: Locale
+}
+
+const availableLocales: AvailableLocale = {
+  es: es,
+  en: enGB,
+}
+
+export interface DateSinglePickerProps extends DivPropsWithoutOnSelect {
+  variant?: Variant
+  onSelect: (date: Date | undefined) => void
+  selected?: Date
+  lng: keyof typeof availableLocales
+}
+
+export function DateSinglePicker({
+  onSelect = () => {},
+  selected: preselected,
+  lng,
+}: DateSinglePickerProps): React.JSX.Element {
+  const manageFooterText = (): string => {
+    return translations[lng].selectedDate.replace(
+      '${date}',
+      formatDatePickerFooterDate(singleSelected, lng as string),
+    )
+  }
+
+  const [singleSelected, setSingleSelected] = useState<Date | undefined>(
+    preselected,
+  )
+
+  const [footer, setFooter] = useState<string>(() => {
+    return manageFooterText()
+  })
+
+  useEffect(() => {
+    setSingleSelected(preselected)
+    setFooter(manageFooterText())
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preselected])
+
+  function selectDate(date: Date | undefined) {
+    setSingleSelected(date)
+    onSelect(date)
+  }
+
+  return (
+    <>
+      <DayPicker
+        locale={availableLocales[lng]}
+        mode="single"
+        selected={singleSelected}
+        onSelect={(date) => selectDate(date)}
+        footer={footer}
+        defaultMonth={singleSelected}
+      />
+    </>
+  )
+}

package/src/stories/DatePicker.stories.ts

@@ -18,6 +18,9 @@ const meta = {
     selected: {
       description: 'Selected date or date range',
     },
+    type: {
+      description: 'Type of date picker',
+    },
     lng: {
       description: 'String with the locale to be used on the translations',
     },
@@ -39,6 +42,7 @@ export const Primary: Story = {
     variant: 'primary',
     onSelect: (date) => console.log('onSelect date:', date),
     lng: 'en',
+    type: 'range',
   },
   parameters: figmaPrimaryDesign,
 }
@@ -49,6 +53,7 @@ export const WithDateRangeSelected: Story = {
     onSelect: (date) => console.log('onSelect date:', date),
     selected: { from: new Date(2024, 1, 2), to: new Date(2024, 1, 15) },
     lng: 'en',
+    type: 'range',
   },
   parameters: figmaPrimaryDesign,
 }
@@ -59,6 +64,7 @@ export const WithSingleDaySelected: Story = {
     onSelect: (date) => console.log('onSelect date:', date),
     selected: { from: new Date(2024, 1, 2), to: new Date(2024, 1, 2) },
     lng: 'en',
+    type: 'single',
   },
   parameters: figmaPrimaryDesign,
 }

package/tests/DateRangePicker.spec.tsx

@@ -8,6 +8,7 @@ describe('DateRangePicker', () => {
       <DateRangePicker
         selected={{ from: new Date(2025, 0, 1), to: new Date(2025, 0, 15) }}
         onSelect={() => jest.fn()}
+        type="range"
         lng={'es'}
       />,
     )