agroptima-design-system 0.30.3 → 0.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.30.3",
+  "version": "0.31.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/DatePicker/DatePicker.tsx

@@ -0,0 +1,58 @@
+import 'react-day-picker/style.css'
+import './DatePicker.scss'
+import { type DateRange, type Locale } from 'react-day-picker'
+import { classNames } from '../../utils/classNames'
+import { DateRangePicker } from './DateRangePicker'
+import { DateSinglePicker } from './DateSinglePicker'
+
+export type Variant = 'primary'
+export type DatePickerType = 'single' | 'range'
+
+type DivPropsWithoutOnSelect = Omit<
+  React.ComponentPropsWithoutRef<'div'>,
+  'onSelect'
+>
+
+export interface AvailableLocale {
+  [index: string]: Locale
+}
+
+export interface DatePickerBaseProps extends DivPropsWithoutOnSelect {
+  variant?: Variant
+  lng: keyof AvailableLocale
+  type: DatePickerType
+}
+
+export interface DateSinglePickerProps {
+  type: 'single'
+  selected?: Date | undefined
+  onSelect: (date: Date | undefined) => void
+}
+
+export interface DateRangePickerProps {
+  type: 'range'
+  selected?: DateRange | undefined
+  onSelect: (date: DateRange | undefined) => void
+}
+
+type DatePickerProps = (DateSinglePickerProps | DateRangePickerProps) &
+  DatePickerBaseProps
+
+export function DatePicker(props: DatePickerProps): React.JSX.Element {
+  const { variant, className, type, lng, onSelect, selected } = props
+
+  const cssClasses = classNames('date-picker', variant, className)
+
+  if (type === 'single') {
+    return (
+      <div className={cssClasses}>
+        <DateSinglePicker lng={lng} selected={selected} onSelect={onSelect} />
+      </div>
+    )
+  }
+  return (
+    <div className={cssClasses}>
+      <DateRangePicker lng={lng} selected={selected} onSelect={onSelect} />
+    </div>
+  )
+}

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -1,60 +1,32 @@
 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 { formatDatePickerFooterDate } from '../../utils/dateHelpers'
+import type { AvailableLocale } from './DatePicker'
 import { translations } from './translations'
 
-export type Variant = 'primary'
-
-type DivPropsWithoutOnSelect = Omit<
-  React.ComponentPropsWithoutRef<'div'>,
-  'onSelect'
->
-
-interface AvailableLocale {
-  [index: string]: Locale
-}
-
 const availableLocales: AvailableLocale = {
   es: es,
   en: enGB,
 }
 
-export interface DateRangePickerProps extends DivPropsWithoutOnSelect {
-  variant?: Variant
+export interface DateRangePickerProps {
   onSelect: (dateRange: DateRange | undefined) => void
   selected?: DateRange
   lng: keyof typeof availableLocales
 }
 
 export function DateRangePicker({
-  className,
-  variant = 'primary',
   onSelect = () => {},
   selected: preselected,
   lng,
 }: DateRangePickerProps): React.JSX.Element {
   const manageFooterText = (): string => {
     const hasDatesFilter = selected && selected.from && selected.to
-    const isExactDate =
-      formatDatePickerParamsDate(selected?.from) ===
-      formatDatePickerParamsDate(selected?.to)
 
     if (!hasDatesFilter) return translations[lng].pickDate
 
-    if (isExactDate) {
-      return translations[lng].selectedDate.replace(
-        '${date}',
-        formatDatePickerFooterDate(selected.from, lng as string),
-      )
-    }
-
     return translations[lng].selectedRangeOfDates
       .replace(
         '${from}',
@@ -67,7 +39,6 @@ export function DateRangePicker({
   const [footer, setFooter] = useState<string>(() => {
     return manageFooterText()
   })
-  const cssClasses = classNames('date-picker', variant, className)
 
   useEffect(() => {
     setSelected(preselected)
@@ -76,18 +47,12 @@ export function DateRangePicker({
   }, [preselected])
 
   function selectDate(dateRange: DateRange | undefined) {
-    const isSingleDaySelection = dateRange && !dateRange.to
-
-    if (isSingleDaySelection) {
-      dateRange.to = dateRange.from
-    }
-
     setSelected(dateRange)
     onSelect(dateRange)
   }
 
   return (
-    <div className={cssClasses}>
+    <>
       <DayPicker
         locale={availableLocales[lng]}
         mode="range"
@@ -97,6 +62,6 @@ export function DateRangePicker({
         footer={footer}
         defaultMonth={selected?.from}
       />
-    </div>
+    </>
   )
 }

package/src/atoms/DatePicker/DateSinglePicker.tsx

@@ -0,0 +1,67 @@
+import 'react-day-picker/style.css'
+import { useEffect, 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
+}
+
+export function DateSinglePicker({
+  onSelect = () => {},
+  selected: preselected,
+  lng,
+}: 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 [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])
+
+  function selectDate(date: Date | undefined) {
+    setSelected(date)
+    if (date) setMonth(new Date(date.getFullYear(), date.getMonth()))
+    onSelect(date)
+  }
+
+  return (
+    <>
+      <DayPicker
+        locale={availableLocales[lng]}
+        mode="single"
+        selected={selected}
+        onSelect={(date) => selectDate(date)}
+        footer={footer}
+        required
+        month={month}
+        onMonthChange={(date) => setMonth(date)}
+      />
+    </>
+  )
+}

package/src/atoms/DatePicker/translations.ts

@@ -5,11 +5,13 @@ interface Translation {
 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}',
   },
   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}',
   },

package/src/stories/Changelog.mdx

@@ -4,6 +4,13 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.31.0
+
+* DatePicker option for a single day created.
+* Updated the footer message for a single day date picker, and add month selection.
+* DatePicker component now is a wrapper for the single and range options to select.
+* DateRangePicker component refactored to DatePicker.
+
 ## 0.30.3
 
 * Autofocus on search input in the Select and MultiSelect components.

package/src/stories/DatePicker.stories.ts

@@ -1,9 +1,9 @@
 import type { StoryObj } from '@storybook/react'
-import { DateRangePicker } from '../atoms/DatePicker/DateRangePicker'
+import { DatePicker } from '../atoms/DatePicker/DatePicker'
 
 const meta = {
-  title: 'Design System/Atoms/DateRangePicker',
-  component: DateRangePicker,
+  title: 'Design System/Atoms/DatePicker',
+  component: DatePicker,
   parameters: {
     docs: {
       description: {
@@ -14,9 +14,6 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {
-    footer: {
-      description: 'Text for the footer',
-    },
     variant: {
       description: 'Component variant used',
     },
@@ -29,6 +26,9 @@ 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',
+    },
   },
 }
 
@@ -42,21 +42,21 @@ const figmaPrimaryDesign = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Primary: Story = {
+export const SingleDatePicker: Story = {
   args: {
     variant: 'primary',
     onSelect: (date) => console.log('onSelect date:', date),
     lng: 'en',
+    type: 'single',
   },
-  parameters: figmaPrimaryDesign,
 }
 
-export const WithDateRangeSelected: Story = {
+export const RangeDatePicker: Story = {
   args: {
     variant: 'primary',
     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,
 }
@@ -65,8 +65,20 @@ export const WithSingleDaySelected: Story = {
   args: {
     variant: 'primary',
     onSelect: (date) => console.log('onSelect date:', date),
-    selected: { from: new Date(2024, 1, 2), to: new Date(2024, 1, 2) },
+    selected: new Date(2024, 1, 2),
+    lng: 'en',
+    type: 'single',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+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) },
     lng: 'en',
+    type: 'range',
   },
   parameters: figmaPrimaryDesign,
 }

package/tests/DatePicker.spec.tsx

@@ -0,0 +1,48 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { DatePicker } from '../src/atoms/DatePicker/DatePicker'
+
+describe('DatePicker', () => {
+  it('renders with expected footer, language and month for a range type', () => {
+    const { getByText } = render(
+      <DatePicker
+        selected={{ from: new Date(2025, 0, 1), to: new Date(2025, 0, 15) }}
+        onSelect={() => jest.fn()}
+        lng={'es'}
+        type="range"
+      />,
+    )
+
+    expect(getByText('enero 2025')).toBeInTheDocument()
+    expect(getByText('lu')).toBeInTheDocument()
+    expect(getByText('ma')).toBeInTheDocument()
+    expect(getByText('mi')).toBeInTheDocument()
+    expect(getByText('ju')).toBeInTheDocument()
+    expect(getByText('vi')).toBeInTheDocument()
+    expect(getByText('sá')).toBeInTheDocument()
+    expect(getByText('do')).toBeInTheDocument()
+    expect(
+      getByText('Rango de fechas seleccionado: desde 1/1/2025 a 15/1/2025'),
+    ).toBeInTheDocument()
+  })
+  it('renders with expected footer, language and month for a single type', () => {
+    const { getByText } = render(
+      <DatePicker
+        selected={new Date(2025, 1, 15)}
+        onSelect={() => jest.fn()}
+        lng={'es'}
+        type="single"
+      />,
+    )
+
+    expect(getByText('febrero 2025')).toBeInTheDocument()
+    expect(getByText('lu')).toBeInTheDocument()
+    expect(getByText('ma')).toBeInTheDocument()
+    expect(getByText('mi')).toBeInTheDocument()
+    expect(getByText('ju')).toBeInTheDocument()
+    expect(getByText('vi')).toBeInTheDocument()
+    expect(getByText('sá')).toBeInTheDocument()
+    expect(getByText('do')).toBeInTheDocument()
+    expect(getByText('Fecha seleccionada: 15/2/2025')).toBeInTheDocument()
+  })
+})

package/tests/DateRangePicker.spec.tsx

@@ -1,26 +0,0 @@
-import { getAllByRole, render } from '@testing-library/react'
-import React from 'react'
-import { DateRangePicker } from '../src/atoms/DatePicker/DateRangePicker'
-
-describe('DateRangePicker', () => {
-  it('renders with expected footer, language and month', () => {
-    const { getByText } = render(
-      <DateRangePicker
-        selected={{ from: new Date(2025, 0, 1), to: new Date(2025, 0, 15) }}
-        onSelect={() => jest.fn()}
-        lng={'es'}
-      />,
-    )
-    expect(getByText('enero 2025')).toBeInTheDocument()
-    expect(getByText('lu')).toBeInTheDocument()
-    expect(getByText('ma')).toBeInTheDocument()
-    expect(getByText('mi')).toBeInTheDocument()
-    expect(getByText('ju')).toBeInTheDocument()
-    expect(getByText('vi')).toBeInTheDocument()
-    expect(getByText('sá')).toBeInTheDocument()
-    expect(getByText('do')).toBeInTheDocument()
-    expect(
-      getByText('Rango de fechas seleccionado: desde 1/1/2025 a 15/1/2025'),
-    ).toBeInTheDocument()
-  })
-})