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

package/package.json

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

package/src/atoms/Button/Button.tsx

@@ -45,20 +45,21 @@ export function Button({
   disabled,
   variant = 'primary',
   loading = false,
-  className,
   ...props
 }: ButtonProps) {
-  const leftIconName = loading ? 'Loading' : leftIcon
-  const cssClasses = classNames(className, 'button', variant)
+  if (loading) {
+    leftIcon = 'Loading'
+  }
+  const cssClasses = classNames(props.className, 'button', variant)
 
   return (
     <BaseButton
       disabled={loading || disabled}
       aria-label={accessibilityLabel || label}
-      className={cssClasses}
       {...props}
+      className={cssClasses}
     >
-      {leftIconName && <Icon name={leftIconName} size="3" />}
+      {leftIcon && <Icon name={leftIcon} size="3" />}
       {label}
       {rightIcon && <Icon name={rightIcon} size="3" />}
     </BaseButton>

package/src/atoms/Button/FloatingButton.tsx

@@ -15,7 +15,6 @@ interface CustomProps {
   disabled?: boolean
   accessibilityLabel: string
   shape?: Shape
-  loading?: boolean
 }
 
 export type FloatingButtonProps = CustomProps & BaseButtonProps
@@ -26,21 +25,23 @@ export function FloatingButton({
   disabled,
   variant = 'primary',
   shape = 'rounded-square',
-  loading = false,
-  className,
   ...props
 }: FloatingButtonProps) {
-  const cssClasses = classNames('floating-button', variant, className, shape)
-  const iconName = loading ? 'Loading' : icon
+  const cssClasses = classNames(
+    'floating-button',
+    variant,
+    props.className,
+    shape,
+  )
 
   return (
     <BaseButton
-      disabled={loading || disabled}
+      disabled={disabled}
       aria-label={accessibilityLabel}
-      className={cssClasses}
       {...props}
+      className={cssClasses}
     >
-      <Icon name={iconName} />
+      <Icon name={icon} />
     </BaseButton>
   )
 }

package/src/atoms/Button/IconButton.tsx

@@ -12,7 +12,6 @@ interface CustomProps {
   variant?: Variant
   disabled?: boolean
   accessibilityLabel: string
-  loading?: boolean
   size?: IconSize
 }
 
@@ -23,20 +22,17 @@ export function IconButton({
   icon,
   disabled,
   variant = 'primary',
-  loading = false,
   size,
-  className,
   ...props
 }: IconButtonProps) {
-  const iconName = loading ? 'Loading' : icon
   return (
     <BaseButton
-      disabled={loading || disabled}
+      disabled={disabled}
       aria-label={accessibilityLabel}
-      className={classNames(className, 'icon-button', variant)}
       {...props}
+      className={classNames(props.className, 'icon-button', variant)}
     >
-      <Icon title={accessibilityLabel} name={iconName} size={size} />
+      <Icon title={accessibilityLabel} name={icon} size={size} />
     </BaseButton>
   )
 }

package/src/atoms/DatePicker/DatePicker.tsx

@@ -0,0 +1,59 @@
+import 'react-day-picker/style.css'
+import './DatePicker.scss'
+import { type DateRange, type Locale } from 'react-day-picker'
+import { enGB, es } from 'react-day-picker/locale'
+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,63 @@
+import 'react-day-picker/style.css'
+import { useEffect, useState } from 'react'
+import { DayPicker, type Locale } 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 [footer, setFooter] = useState<string>(() => {
+    return manageFooterText()
+  })
+
+  useEffect(() => {
+    setSelected(preselected)
+    setFooter(manageFooterText())
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preselected])
+
+  function selectDate(date: Date | undefined) {
+    setSelected(date)
+    onSelect(date)
+  }
+
+  return (
+    <>
+      <DayPicker
+        locale={availableLocales[lng]}
+        mode="single"
+        selected={selected}
+        onSelect={(date) => selectDate(date)}
+        footer={footer}
+        required
+        defaultMonth={selected}
+      />
+    </>
+  )
+}

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/atoms/Select.tsx

@@ -1,3 +1,4 @@
+'use client'
 import './Select.scss'
 import React, { useRef, useState } from 'react'
 import { useOpen } from '../hooks/useOpen'
@@ -160,6 +161,7 @@ function OptionList({
   searchLabel,
 }: OptionListProps) {
   const { findItems, search } = useSearch(options, 'label')
+
   return (
     <div className="select-options">
       {isSearchable && (

package/src/stories/Button.stories.ts

@@ -24,7 +24,6 @@ const meta = {
     },
     loading: {
       description: 'Is the button in loading state?',
-      control: { type: 'boolean', default: false },
     },
     leftIcon: {
       description: 'Button left icon from a list of values',
@@ -40,7 +39,7 @@ const meta = {
     },
     visible: {
       description: 'Is the button visible?',
-      control: { type: 'boolean' },
+      control: { type: 'boolean', default: true },
     },
   },
 }

package/src/stories/Changelog.mdx

@@ -4,10 +4,6 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
-## 0.29.2
-
-* Add loading property to IconButton and FloatingButton components.
-
 ## 0.29.1
 
 * Update modal component to respect the scroll width.

package/src/stories/DatePicker.stories.ts

@@ -1,14 +1,11 @@
 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,
   tags: ['autodocs'],
   argTypes: {
-    footer: {
-      description: 'Text for the footer',
-    },
     variant: {
       description: 'Component variant used',
     },
@@ -21,6 +18,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',
+    },
   },
 }
 
@@ -34,21 +34,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,
 }
@@ -57,8 +57,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/src/stories/FloatingButton.stories.ts

@@ -23,10 +23,6 @@ const meta = {
       description:
         'If a link is provided, the component will be rendered as NextLink, otherwise as button',
     },
-    loading: {
-      description: 'Is the button in loading state?',
-      control: { type: 'boolean' },
-    },
   },
 }
 

package/src/stories/IconButton.stories.ts

@@ -27,10 +27,6 @@ const meta = {
       description:
         'If a link is provided, the component will be rendered as NextLink, otherwise as button',
     },
-    loading: {
-      description: 'Is the button in loading state?',
-      control: { type: 'boolean' },
-    },
   },
 }
 

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()
-  })
-})