agroptima-design-system 0.28.7 → 0.29.0

package/package.json

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

package/src/atoms/{DatePicker.scss → DatePicker/DateRangePicker.scss}

@@ -1,8 +1,8 @@
-@use '../settings/color_alias';
-@use '../settings/typography/content' as typography;
-@use '../settings/config';
-@use '../settings/depth';
-@use '../settings/breakpoints';
+@use '../../settings/color_alias';
+@use '../../settings/typography/content' as typography;
+@use '../../settings/config';
+@use '../../settings/depth';
+@use '../../settings/breakpoints';
 
 // Interpolation applied: https://sass-lang.com/documentation/breaking-changes/css-vars/
 

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -0,0 +1,102 @@
+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'
+
+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
+  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}',
+        formatDatePickerFooterDate(selected.from, lng as string),
+      )
+      .replace('${to}', formatDatePickerFooterDate(selected.to, lng as string))
+  }
+
+  const [selected, setSelected] = useState<DateRange | undefined>(preselected)
+  const [footer, setFooter] = useState<string>(() => {
+    return manageFooterText()
+  })
+  const cssClasses = classNames('date-picker', variant, className)
+
+  useEffect(() => {
+    setSelected(preselected)
+    setFooter(manageFooterText())
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [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"
+        min={1}
+        selected={selected}
+        onSelect={(dateRange) => selectDate(dateRange)}
+        footer={footer}
+        defaultMonth={selected?.from}
+      />
+    </div>
+  )
+}

package/src/atoms/DatePicker/translations.ts

@@ -0,0 +1,16 @@
+interface Translation {
+  [index: string]: { [index: string]: string }
+}
+
+export const translations: Translation = {
+  en: {
+    pickDate: 'Pick a day or a range of dates',
+    selectedDate: 'Selected date: ${date}',
+    selectedRangeOfDates: 'Selected dates range: from ${from} to ${to}',
+  },
+  es: {
+    pickDate: 'Selecciona un día o un rango de fechas',
+    selectedDate: 'Fecha seleccionada: ${date}',
+    selectedRangeOfDates: 'Rango de fechas seleccionado: desde ${from} a ${to}',
+  },
+}

package/src/stories/Changelog.mdx

@@ -4,10 +4,14 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
-## 0.28.7
+## 0.29.0
 
 * Add Divider component
 
+## 0.28.7
+
+* DateRangePicker component manages its footer text
+
 ## 0.28.6
 
 * Remove overflow-x from html element for Modal component.

package/src/stories/DatePicker.stories.ts

@@ -1,9 +1,9 @@
 import type { StoryObj } from '@storybook/react'
-import { DatePicker } from '../atoms/DatePicker'
+import { DateRangePicker } from '../atoms/DatePicker/DateRangePicker'
 
 const meta = {
-  title: 'Design System/Atoms/DatePicker',
-  component: DatePicker,
+  title: 'Design System/Atoms/DateRangePicker',
+  component: DateRangePicker,
   tags: ['autodocs'],
   argTypes: {
     footer: {
@@ -34,10 +34,9 @@ const figmaPrimaryDesign = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const PrimaryDateRange: Story = {
+export const Primary: Story = {
   args: {
     variant: 'primary',
-    footer: 'Pick a day.',
     onSelect: (date) => console.log('onSelect date:', date),
     lng: 'en',
   },
@@ -47,10 +46,19 @@ export const PrimaryDateRange: Story = {
 export const WithDateRangeSelected: Story = {
   args: {
     variant: 'primary',
-    footer: 'From 2024-02-02 to 2024-02-15',
     onSelect: (date) => console.log('onSelect date:', date),
     selected: { from: new Date(2024, 1, 2), to: new Date(2024, 1, 15) },
     lng: 'en',
   },
   parameters: figmaPrimaryDesign,
 }
+
+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) },
+    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'
+import { DateRangePicker } from '../atoms/DatePicker/DateRangePicker'
 import { Drawer } from '../atoms/Drawer'
 
 const figmaPrimaryDesign = {
@@ -122,10 +122,10 @@ export const Filters = {
       </Collapsible>
       <Collapsible noHorizontalPadding open title="Date">
         <div style={{ display: 'flex', justifyContent: 'center' }}>
-          <DatePicker
-            footer="From 2024-01-01 to 2024-01-15"
+          <DateRangePicker
             selected={{ from: new Date(2025, 0, 1), to: new Date(2025, 0, 15) }}
             onSelect={(date) => console.log('date: ', date)}
+            lng="en"
           />
         </div>
       </Collapsible>

package/src/utils/dateHelpers.ts

@@ -0,0 +1,19 @@
+export function formatDate(date: string, lng: string) {
+  if (!date) return ''
+  return new Date(date).toLocaleDateString(lng)
+}
+
+export function formatDatePickerParamsDate(date: Date | undefined) {
+  if (!date) return ''
+
+  return date.toLocaleDateString('sv-SE')
+}
+
+export function formatDatePickerFooterDate(
+  date: Date | undefined,
+  lng: string,
+) {
+  if (!date) return ''
+
+  return formatDate(formatDatePickerParamsDate(date), lng)
+}

package/tests/{DatePicker.spec.tsx → DateRangePicker.spec.tsx}

@@ -1,12 +1,11 @@
-import { render } from '@testing-library/react'
+import { getAllByRole, render } from '@testing-library/react'
 import React from 'react'
-import { DatePicker } from '../src/atoms/DatePicker'
+import { DateRangePicker } from '../src/atoms/DatePicker/DateRangePicker'
 
-describe('DatePicker', () => {
+describe('DateRangePicker', () => {
   it('renders with expected footer, language and month', () => {
     const { getByText } = render(
-      <DatePicker
-        footer="From 2024-01-01 to 2024-01-15"
+      <DateRangePicker
         selected={{ from: new Date(2025, 0, 1), to: new Date(2025, 0, 15) }}
         onSelect={() => jest.fn()}
         lng={'es'}
@@ -20,6 +19,8 @@ describe('DatePicker', () => {
     expect(getByText('vi')).toBeInTheDocument()
     expect(getByText('sá')).toBeInTheDocument()
     expect(getByText('do')).toBeInTheDocument()
-    expect(getByText('From 2024-01-01 to 2024-01-15')).toBeInTheDocument()
+    expect(
+      getByText('Rango de fechas seleccionado: desde 1/1/2025 a 15/1/2025'),
+    ).toBeInTheDocument()
   })
 })

package/src/atoms/DatePicker.tsx

@@ -1,66 +0,0 @@
-import 'react-day-picker/style.css'
-import './DatePicker.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'
-
-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 DatePickerProps extends DivPropsWithoutOnSelect {
-  variant?: Variant
-  onSelect: (dateRange: DateRange | undefined) => void
-  footer: string
-  selected?: DateRange
-  lng: keyof typeof availableLocales
-}
-
-export function DatePicker({
-  className,
-  variant = 'primary',
-  onSelect = () => {},
-  footer = 'Pick a day',
-  selected: preselected,
-  lng,
-}: DatePickerProps): React.JSX.Element {
-  useEffect(() => {
-    setSelected(preselected)
-  }, [preselected])
-
-  const cssClasses = classNames('date-picker', variant, className)
-
-  const [selected, setSelected] = useState<DateRange | undefined>(preselected)
-
-  function selectDate(dateRange: DateRange | undefined) {
-    setSelected(dateRange)
-    onSelect(dateRange)
-  }
-
-  return (
-    <div className={cssClasses}>
-      <DayPicker
-        locale={availableLocales[lng]}
-        mode="range"
-        min={1}
-        selected={selected}
-        onSelect={(dateRange) => selectDate(dateRange)}
-        footer={footer}
-        defaultMonth={selected?.from}
-      />
-    </div>
-  )
-}