agroptima-design-system 0.31.7-beta.2 → 0.31.8

package/package.json

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

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -1,68 +1,111 @@
 import 'react-day-picker/style.css'
+import './DatePicker.scss'
 import { useEffect, useState } from 'react'
-import { type DateRange, DayPicker } from 'react-day-picker'
-import { enGB, es } from 'react-day-picker/locale'
-import { formatDatePickerFooterDate } from '../../utils/dateHelpers'
-import type { AvailableLocale } from './DatePicker'
-import { translations } from './translations'
+import {
+  type DateRange as DateRangeReactDayPicker,
+  DayPicker,
+} from 'react-day-picker'
+import { classNames } from '../../utils/classNames'
+import {
+  formatDatePickerFooterDate,
+  fromDateToISOString,
+  fromISOToDate,
+} from '../../utils/dateHelpers'
+import { availableLocales, type Locale, translations } from './translations'
 
-const availableLocales: AvailableLocale = {
-  es: es,
-  en: enGB,
+export type Variant = 'primary'
+
+export type DateRangePickerProps = {
+  variant?: Variant
+  lng: Locale
+  required?: boolean
+  className?: string
+  defaultValue?: DateRange
+  onSelect?: (date: DateRange) => void
 }
 
-export interface DateRangePickerProps {
-  onSelect: (dateRange: DateRange | undefined) => void
-  selected?: DateRange
-  lng: keyof typeof availableLocales
-  className: string
+export type DateRange = {
+  from: string | undefined
+  to: string | undefined
 }
 
 export function DateRangePicker({
-  onSelect = () => {},
-  selected: preselected,
+  onSelect,
+  defaultValue,
   lng,
   className,
+  required = false,
+  variant,
 }: DateRangePickerProps): React.JSX.Element {
-  const manageFooterText = (): string => {
-    const hasDatesFilter = selected && selected.from && selected.to
+  const cssClasses = classNames('date-picker', variant, className)
 
-    if (!hasDatesFilter) return translations[lng].pickDate
+  const [selected, setSelected] = useState<DateRangeReactDayPicker>(
+    toDateRange(defaultValue),
+  )
 
-    return translations[lng].selectedRangeOfDates
-      .replace(
-        '${from}',
-        formatDatePickerFooterDate(selected.from, lng as string),
-      )
-      .replace('${to}', formatDatePickerFooterDate(selected.to, lng as string))
+  function selectDate(dateRange: DateRangeReactDayPicker | undefined) {
+    const selectedDateRange = {
+      from: dateRange?.from,
+      to: dateRange?.to,
+    }
+    setSelected(selectedDateRange)
+    onSelect?.(toDateRangeISO(selectedDateRange))
   }
 
-  const [selected, setSelected] = useState<DateRange | undefined>(preselected)
-  const [footer, setFooter] = useState<string>(() => {
-    return manageFooterText()
-  })
-
   useEffect(() => {
-    setSelected(preselected)
-    setFooter(manageFooterText())
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [preselected])
-
-  function selectDate(dateRange: DateRange | undefined) {
-    setSelected(dateRange)
-    onSelect(dateRange)
-  }
+    setSelected(toDateRange(defaultValue))
+  }, [defaultValue])
 
   return (
     <DayPicker
-      className={className}
+      className={cssClasses}
       locale={availableLocales[lng]}
       mode="range"
       min={1}
       selected={selected}
-      onSelect={(dateRange) => selectDate(dateRange)}
-      footer={footer}
+      onSelect={selectDate}
+      footer={<Footer lng={lng} selected={selected} />}
       defaultMonth={selected?.from}
+      required={required}
     />
   )
 }
+function Footer({
+  lng,
+  selected,
+}: {
+  lng: Locale
+  selected: DateRangeReactDayPicker | undefined
+}): string {
+  if (!selected?.from && !selected?.to) {
+    return translations[lng].pickDate
+  }
+  if (selected?.to && selected?.from?.getTime() !== selected?.to?.getTime()) {
+    return translations[lng].selectedRangeOfDates
+      .replace(
+        '${from}',
+        formatDatePickerFooterDate(selected?.from, lng as string),
+      )
+      .replace('${to}', formatDatePickerFooterDate(selected?.to, lng as string))
+  }
+  return translations[lng].selectedOnlyFrom.replace(
+    '${from}',
+    formatDatePickerFooterDate(selected?.from, lng as string),
+  )
+}
+
+function toDateRange(
+  dateRange: DateRange | undefined,
+): DateRangeReactDayPicker {
+  return {
+    from: fromISOToDate(dateRange?.from),
+    to: fromISOToDate(dateRange?.to),
+  }
+}
+
+function toDateRangeISO(dateRange: DateRangeReactDayPicker): DateRange {
+  return {
+    from: fromDateToISOString(dateRange?.from),
+    to: fromDateToISOString(dateRange?.to),
+  }
+}

package/src/atoms/DatePicker/DateSinglePicker.tsx

@@ -1,69 +1,63 @@
 import 'react-day-picker/style.css'
-import { useEffect, useState } from 'react'
+import './DatePicker.scss'
+import { useState } from 'react'
 import { DayPicker } from 'react-day-picker'
-import { enGB, es } from 'react-day-picker/locale'
-import { formatDatePickerFooterDate } from '../../utils/dateHelpers'
-import type { AvailableLocale } from './DatePicker'
-import { translations } from './translations'
-
-const availableLocales: AvailableLocale = {
-  es: es,
-  en: enGB,
-}
-
-export interface DateSinglePickerProps {
-  onSelect: (date: Date | undefined) => void
-  selected?: Date
-  lng: keyof typeof availableLocales
-  className: string
+import { classNames } from '../../utils/classNames'
+import {
+  formatDatePickerFooterDate,
+  fromDateToISOString,
+  fromISOToDate,
+} from '../../utils/dateHelpers'
+import { availableLocales, type Locale, translations } from './translations'
+
+export type Variant = 'primary'
+
+export type DateSinglePickerProps = {
+  variant?: Variant
+  lng: Locale
+  required?: boolean
+  className?: string
+  defaultValue?: string
+  onSelect?: (date: string) => void
 }
 
 export function DateSinglePicker({
-  onSelect = () => {},
-  selected: preselected,
+  onSelect,
+  defaultValue,
   lng,
   className,
+  required = false,
+  variant,
 }: DateSinglePickerProps): React.JSX.Element {
-  const manageFooterText = (): string => {
-    if (!selected) return translations[lng].pickSingleDate
-
-    return translations[lng].selectedDate.replace(
-      '${date}',
-      formatDatePickerFooterDate(selected, lng as string),
-    )
-  }
+  const cssClasses = classNames('date-picker', variant, className)
 
-  const [selected, setSelected] = useState<Date | undefined>(preselected)
-  const [month, setMonth] = useState<Date | undefined>(preselected)
-  const [footer, setFooter] = useState<string>(() => {
-    return manageFooterText()
-  })
-
-  useEffect(() => {
-    setSelected(preselected)
-    setMonth(preselected)
-    setFooter(manageFooterText())
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [preselected])
+  const [selected, setSelected] = useState<Date | undefined>(
+    fromISOToDate(defaultValue),
+  )
 
   function selectDate(date: Date | undefined) {
     setSelected(date)
-    if (date) setMonth(new Date(date.getFullYear(), date.getMonth()))
-    onSelect(date)
+    onSelect?.(fromDateToISOString(date))
   }
 
   return (
     <DayPicker
-      className={className}
+      className={cssClasses}
       locale={availableLocales[lng]}
       mode="single"
       selected={selected}
-      onSelect={(date) => selectDate(date)}
-      footer={footer}
-      required
-      month={month}
-      onMonthChange={(date) => setMonth(date)}
+      onSelect={selectDate}
+      footer={<Footer lng={lng} selected={selected} />}
+      required={required}
       defaultMonth={selected}
     />
   )
 }
+function Footer({ lng, selected }: { selected?: Date; lng: Locale }): string {
+  if (!selected) return translations[lng].pickSingleDate
+
+  return translations[lng].selectedDate.replace(
+    '${date}',
+    formatDatePickerFooterDate(selected, lng as string),
+  )
+}

package/src/atoms/DatePicker/index.tsx

@@ -0,0 +1,7 @@
+export type { DateRange, DateRangePickerProps } from './DateRangePicker'
+export type { DateSinglePickerProps } from './DateSinglePicker'
+
+import { DateRangePicker } from './DateRangePicker'
+import { DateSinglePicker } from './DateSinglePicker'
+
+export { DateRangePicker, DateSinglePicker }

package/src/atoms/DatePicker/translations.ts

@@ -1,18 +1,34 @@
-interface Translation {
+import { type Locale as LocaleReactDayPicker } from 'react-day-picker'
+import { enGB, es } from 'react-day-picker/locale'
+
+export interface Translation {
   [index: string]: { [index: string]: string }
 }
 
+export interface AvailableLocale {
+  [index: string]: LocaleReactDayPicker
+}
+
+export const availableLocales: AvailableLocale = {
+  es: es,
+  en: enGB,
+}
+
+export type Locale = keyof typeof availableLocales
+
 export const translations: Translation = {
   en: {
     pickDate: 'Pick a day or a range of dates',
     pickSingleDate: 'Pick a date',
     selectedDate: 'Selected date: ${date}',
     selectedRangeOfDates: 'Selected dates range: from ${from} to ${to}',
+    selectedOnlyFrom: 'Selected dates range: from ${from}',
   },
   es: {
     pickDate: 'Selecciona un día o un rango de fechas',
     pickSingleDate: 'Selecciona una fecha',
     selectedDate: 'Fecha seleccionada: ${date}',
     selectedRangeOfDates: 'Rango de fechas seleccionado: desde ${from} a ${to}',
+    selectedOnlyFrom: 'Rango de fechas seleccionado: desde ${from}',
   },
 }

package/src/stories/Changelog.mdx

@@ -4,6 +4,19 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.31.8
+
+* Refactor Modal component to use HTML dialog
+
+## 0.31.7
+
+* Fixed date clearing event in range and added a new translation to the footer for the first day of the selected range.
+* Refactoring of types and translations and reduction of state logic in components
+* Refactoring dateHelpers functions for convert dates to ISO format and ISO format to dates
+* DateRangePicker and DateSinglePicker separation in two different components.
+* Updating stories for DateRangePicker and DateSinglePicker
+* Updating test for DateRangePicker and DateSinglePicker
+
 ## 0.31.6
 
 * Refactor styles and fix range day selection

package/src/stories/{DatePicker.stories.ts → DateRangePicker.stories.ts}

@@ -1,9 +1,9 @@
 import type { StoryObj } from '@storybook/react'
-import { DatePicker } from '../atoms/DatePicker/DatePicker'
+import { DateRangePicker } from '../atoms/DatePicker/DateRangePicker'
 
 const meta = {
-  title: 'Design System/Atoms/DatePicker',
-  component: DatePicker,
+  title: 'Design System/Atoms/DateRangePicker',
+  component: DateRangePicker,
   parameters: {
     docs: {
       description: {
@@ -26,8 +26,11 @@ const meta = {
     lng: {
       description: 'String with the locale to be used on the translations',
     },
-    type: {
-      description: 'Type of date that could be range or single',
+    required: {
+      description: 'Optional parametre for required pick date',
+    },
+    className: {
+      description: 'Optional parametre for add styles by className',
     },
   },
 }
@@ -42,32 +45,11 @@ const figmaPrimaryDesign = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const SingleDatePicker: Story = {
-  args: {
-    variant: 'primary',
-    onSelect: (date) => console.log('onSelect date:', date),
-    lng: 'en',
-    type: 'single',
-  },
-}
-
 export const RangeDatePicker: Story = {
   args: {
     variant: 'primary',
     onSelect: (date) => console.log('onSelect date:', date),
     lng: 'en',
-    type: 'range',
-  },
-  parameters: figmaPrimaryDesign,
-}
-
-export const WithSingleDaySelected: Story = {
-  args: {
-    variant: 'primary',
-    onSelect: (date) => console.log('onSelect date:', date),
-    selected: new Date(2024, 1, 2),
-    lng: 'en',
-    type: 'single',
   },
   parameters: figmaPrimaryDesign,
 }
@@ -76,9 +58,8 @@ export const WithRangeDateSelected: Story = {
   args: {
     variant: 'primary',
     onSelect: (date) => console.log('onSelect date:', date),
-    selected: { from: new Date(2024, 1, 2), to: new Date(2024, 1, 12) },
+    defaultValue: { from: '2024-01-02', to: '2024-01-12' },
     lng: 'en',
-    type: 'range',
   },
   parameters: figmaPrimaryDesign,
 }

package/src/stories/DateSinglePicker.stories.ts

@@ -0,0 +1,64 @@
+import type { StoryObj } from '@storybook/react'
+import { DateSinglePicker } from '../atoms/DatePicker/DateSinglePicker'
+
+const meta = {
+  title: 'Design System/Atoms/DateSinglePicker',
+  component: DateSinglePicker,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>DateRangePicker component allows users to select past, present, or future dates in a visual way in range or single format.</p>',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      description: 'Component variant used',
+    },
+    onSelect: {
+      description: 'Component onSelect callback',
+    },
+    selected: {
+      description: 'Selected date or date range',
+    },
+    lng: {
+      description: 'String with the locale to be used on the translations',
+    },
+    required: {
+      description: 'Optional parametre for required pick date',
+    },
+    className: {
+      description: 'Optional parametre for add styles by className',
+    },
+  },
+}
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/DN2ova21vWqCRvPspBXgI1/Design-System?node-id=3665-571&m=dev',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SingleDatePicker: Story = {
+  args: {
+    variant: 'primary',
+    onSelect: (date) => console.log('onSelect date:', date),
+    lng: 'en',
+  },
+}
+
+export const WithSingleDaySelected: Story = {
+  args: {
+    variant: 'primary',
+    onSelect: (date) => console.log('onSelect date:', date),
+    defaultValue: '2024-01-20',
+    lng: 'en',
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Drawer.stories.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { CheckableTag, CheckableTagGroup } from '../atoms/CheckableTag'
 import { Collapsible } from '../atoms/Collapsible'
-import { DatePicker } from '../atoms/DatePicker/DatePicker'
+import { DateRangePicker } from '../atoms/DatePicker/DateRangePicker'
 import { Drawer } from '../atoms/Drawer'
 
 const figmaPrimaryDesign = {
@@ -130,10 +130,9 @@ export const Filters = {
       </Collapsible>
       <Collapsible noHorizontalPadding open title="Date">
         <div style={{ display: 'flex', justifyContent: 'center' }}>
-          <DatePicker
+          <DateRangePicker
             selected={{ from: new Date(2025, 0, 1), to: new Date(2025, 0, 15) }}
             onSelect={(date) => console.log('date: ', date)}
-            type="range"
             lng="en"
           />
         </div>