agroptima-design-system 0.31.10 → 0.31.11

package/package.json

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

package/src/atoms/DatePicker/DatePicker.scss

@@ -2,7 +2,7 @@
 @use '../../settings/typography/content' as typography;
 @use '../../settings/config';
 @use '../../settings/depth';
-@use '../../settings/breakpoints';
+@use '../../settings/mixins';
 
 // Interpolation applied: https://sass-lang.com/documentation/breaking-changes/css-vars/
 .rdp-root {
@@ -12,13 +12,16 @@
   --rdp-range_middle-background-color: #{color_alias.$primary-color-50}; 
   --rdp-range_start-date-background-color: #{color_alias.$primary-color-600};
   --rdp-range_end-date-background-color: #{color_alias.$primary-color-600};
-
 }
 
 .rdp-caption_label {
   text-transform: capitalize;
+  padding-left: config.$space-3x;
 }
 
+.rdp-footer {
+  padding-left: config.$space-3x;
+}
 
 .rdp-selected .rdp-day_button {
   background-color: #{color_alias.$primary-color-600};
@@ -30,5 +33,28 @@
   background-color: var(--rdp-range_middle-background-color);
 }
 
+.toggle {
+  .input-group.primary .input-container {
+    display: flex;
+    align-items: center;
+    gap: config.$space-1x;
+    padding: 8px 6px 8px;
+  
+    .icon {
+      @include mixins.svg-color(color_alias.$primary-color-600);
+      @include mixins.size(config.$icon-size-3x);
+    }
+  }
+  .calendar {
+    display: flex;
+    justify-content: center;
+    border-radius: config.$corner-radius-xxs;
+    z-index: depth.$z-dropdown-options;
+    padding-left: config.$space-3x;
+    width: 20rem;
+    position: absolute;
+    box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+  }
+}
 
 

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -11,6 +11,7 @@ import {
   fromDateToISOString,
   fromISOToDate,
 } from '../../utils/dateHelpers'
+import { Input } from '../Input'
 import { availableLocales, type Locale, translations } from './translations'
 
 export type Variant = 'primary'
@@ -22,6 +23,8 @@ export type DateRangePickerProps = {
   className?: string
   defaultValue?: DateRange
   onSelect?: (date: DateRange) => void
+  withInput?: boolean
+  label?: string
 }
 
 export type DateRange = {
@@ -36,13 +39,20 @@ export function DateRangePicker({
   className,
   required = false,
   variant,
+  withInput = false,
+  label = 'Date',
 }: DateRangePickerProps): React.JSX.Element {
-  const cssClasses = classNames('date-picker', variant, className)
+  const inputType = withInput ? 'text' : 'hidden'
+  const cssClasses = classNames('date-picker', variant, className, {
+    toggle: withInput,
+  })
 
   const [selected, setSelected] = useState<DateRangeReactDayPicker>(
     toDateRange(defaultValue),
   )
 
+  const [isOpen, setIsOpen] = useState<boolean>(!withInput)
+
   function selectDate(dateRange: DateRangeReactDayPicker | undefined) {
     const selectedDateRange = {
       from: dateRange?.from,
@@ -57,26 +67,47 @@ export function DateRangePicker({
   }, [defaultValue])
 
   return (
-    <DayPicker
-      className={cssClasses}
-      locale={availableLocales[lng]}
-      mode="range"
-      min={1}
-      selected={selected}
-      onSelect={selectDate}
-      footer={<Footer lng={lng} selected={selected} />}
-      defaultMonth={selected?.from}
-      required={required}
-    />
+    <div className={cssClasses}>
+      <div onClick={() => setIsOpen(!isOpen)}>
+        <Input
+          type={inputType}
+          label={label}
+          datePickerIcon={isOpen ? 'AngleUp' : 'AngleDown'}
+          value={`${formatDatePickerFooterDate(selected.from, lng as string)} - ${formatDatePickerFooterDate(selected.to, lng as string)}`}
+          icon="Calendar"
+          name="date"
+          placeholder={translations[lng].rangePlaceholder}
+          readOnly
+        />
+      </div>
+      {isOpen && (
+        <DayPicker
+          locale={availableLocales[lng]}
+          mode="range"
+          min={1}
+          selected={selected}
+          onSelect={selectDate}
+          footer={
+            <Footer lng={lng} selected={selected} withInput={withInput} />
+          }
+          defaultMonth={selected?.from}
+          required={required}
+          className="calendar"
+        />
+      )}
+    </div>
   )
 }
 function Footer({
   lng,
   selected,
+  withInput,
 }: {
   lng: Locale
   selected: DateRangeReactDayPicker | undefined
+  withInput: boolean
 }): string {
+  if (withInput) return ''
   if (!selected?.from && !selected?.to) {
     return translations[lng].pickDate
   }

package/src/atoms/DatePicker/DateSinglePicker.tsx

@@ -8,6 +8,7 @@ import {
   fromDateToISOString,
   fromISOToDate,
 } from '../../utils/dateHelpers'
+import { Input } from '../Input'
 import { availableLocales, type Locale, translations } from './translations'
 
 export type Variant = 'primary'
@@ -19,6 +20,8 @@ export type DateSinglePickerProps = {
   className?: string
   defaultValue?: string
   onSelect?: (date: string) => void
+  withInput?: boolean
+  label?: string
 }
 
 export function DateSinglePicker({
@@ -28,12 +31,19 @@ export function DateSinglePicker({
   className,
   required = false,
   variant,
+  withInput = false,
+  label = 'Date',
 }: DateSinglePickerProps): React.JSX.Element {
-  const cssClasses = classNames('date-picker', variant, className)
+  const inputType = withInput ? 'text' : 'hidden'
+
+  const cssClasses = classNames('date-picker', variant, className, {
+    toggle: withInput,
+  })
 
   const [selected, setSelected] = useState<Date | undefined>(
     fromISOToDate(defaultValue),
   )
+  const [isOpen, setIsOpen] = useState<boolean>(!withInput)
 
   function selectDate(date: Date | undefined) {
     setSelected(date)
@@ -41,20 +51,47 @@ export function DateSinglePicker({
   }
 
   return (
-    <DayPicker
-      className={cssClasses}
-      locale={availableLocales[lng]}
-      mode="single"
-      selected={selected}
-      onSelect={selectDate}
-      footer={<Footer lng={lng} selected={selected} />}
-      required={required}
-      defaultMonth={selected}
-    />
+    <div className={cssClasses}>
+      <div onClick={() => setIsOpen(!isOpen)}>
+        <Input
+          type={inputType}
+          label={label}
+          datePickerIcon={isOpen ? 'AngleUp' : 'AngleDown'}
+          value={formatDatePickerFooterDate(selected, lng as string)}
+          icon="Calendar"
+          name="date"
+          placeholder={translations[lng].singlePlaceholder}
+          readOnly
+        />
+      </div>
+      {isOpen && (
+        <DayPicker
+          locale={availableLocales[lng]}
+          mode="single"
+          selected={selected}
+          onSelect={selectDate}
+          footer={
+            <Footer lng={lng} selected={selected} withInput={withInput} />
+          }
+          required={required}
+          defaultMonth={selected}
+          className="calendar"
+        />
+      )}
+    </div>
   )
 }
-function Footer({ lng, selected }: { selected?: Date; lng: Locale }): string {
-  if (!selected) return translations[lng].pickDate
+function Footer({
+  lng,
+  selected,
+  withInput,
+}: {
+  selected?: Date
+  lng: Locale
+  withInput: boolean
+}): string {
+  if (withInput) return ''
+  if (!selected) return translations[lng].pickSingleDate
 
   return translations[lng].selectedDate.replace(
     '${date}',

package/src/atoms/DatePicker/translations.ts

@@ -21,10 +21,14 @@ export const translations: Translation = {
     pickDate: 'Pick a date or a range of dates',
     selectedDate: 'Selected date: ${date}',
     selectedRangeOfDates: 'Selected dates range: from ${from} to ${to}',
+    singlePlaceholder: 'mm/dd/yyyy',
+    rangePlaceholder: 'mm/dd/yyyy - mm/dd/yyyy',
   },
   es: {
     pickDate: 'Selecciona una fecha o un rango de fechas',
     selectedDate: 'Fecha seleccionada: ${date}',
     selectedRangeOfDates: 'Rango de fechas seleccionado: desde ${from} a ${to}',
+    singlePlaceholder: 'dd/mm/yyyy',
+    rangePlaceholder: 'dd/mm/yyyy - dd/mm/yyyy',
   },
 }

package/src/atoms/Input.scss

@@ -151,5 +151,8 @@
       }
     }
   }
+  &.hidden {
+    display: none;
+  }
 
 }

package/src/atoms/Input.tsx

@@ -19,6 +19,7 @@ export interface InputProps extends React.ComponentPropsWithRef<'input'> {
   suffix?: string
   errors?: string[]
   required?: boolean
+  datePickerIcon?: IconType
 }
 
 export function Input({
@@ -36,6 +37,7 @@ export function Input({
   id,
   errors,
   required = false,
+  datePickerIcon,
   ...props
 }: InputProps): React.JSX.Element {
   const identifier = id || name
@@ -61,6 +63,7 @@ export function Input({
       className={classNames('input-group', variant, className, {
         file: type === 'file',
         invalid: errors?.length,
+        hidden: type === 'hidden',
       })}
     >
       {!hideLabel && (
@@ -88,6 +91,9 @@ export function Input({
           })}
           {...props}
         />
+        {datePickerIcon && (
+          <Icon className="right-icon" name={datePickerIcon} />
+        )}
         {suffix && <span className="input-suffix">{suffix}</span>}
         {type === 'password' && (
           <IconButton

package/src/stories/Changelog.mdx

@@ -4,6 +4,12 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.31.11
+
+* On DateSinglePicker component, Input component shows the selected date with the optional property withInput.
+* On DateRangePicker component, Input component shows the selected date with the optional property withInput.
+* Add datePickerIcon optional property for DatePicker components to Icon component
+
 ## 0.31.10
 
 * Change footer text for DateRangePicker only one selected day

package/src/stories/DateRangePicker.stories.ts

@@ -32,6 +32,20 @@ const meta = {
     className: {
       description: 'Optional parametre for add styles by className',
     },
+    withInput: {
+      description: 'Optional input to read and select the date',
+      control: {
+        type: 'boolean',
+        default: false,
+      },
+    },
+    label: {
+      description: 'Optional label for input',
+      control: {
+        type: 'string',
+        default: 'Date',
+      },
+    },
   },
 }
 
@@ -63,3 +77,14 @@ export const WithRangeDateSelected: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
+
+export const RangeDatePickerWithInput: Story = {
+  args: {
+    variant: 'primary',
+    onSelect: (date) => console.log('onSelect date:', date),
+    defaultValue: { from: '2024-01-02', to: '2024-01-12' },
+    lng: 'en',
+    withInput: true,
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/DateSinglePicker.stories.ts

@@ -32,6 +32,20 @@ const meta = {
     className: {
       description: 'Optional parametre for add styles by className',
     },
+    withInput: {
+      description: 'Optional input to read and select the date',
+      control: {
+        type: 'boolean',
+        default: false,
+      },
+    },
+    label: {
+      description: 'Optional label for input',
+      control: {
+        type: 'string',
+        default: 'Date',
+      },
+    },
   },
 }
 
@@ -62,3 +76,14 @@ export const WithSingleDaySelected: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
+
+export const SingleDatePickerWithInput: Story = {
+  args: {
+    variant: 'primary',
+    onSelect: (date) => console.log('onSelect date:', date),
+    defaultValue: '2024-01-20',
+    lng: 'en',
+    withInput: true,
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Input.stories.ts

@@ -52,6 +52,10 @@ const meta = {
       description:
         'Optional array of errors. If passed, the errors are listed and invalid style is applied.',
     },
+    datePickerIcon: {
+      description:
+        'Optional icon added to input when input is applied to the date picker component selection',
+    },
   },
 }
 

package/src/utils/dateHelpers.ts

@@ -1,3 +1,5 @@
+import type { DateRange } from 'react-day-picker'
+
 export function formatDate(date: string, lng: string) {
   if (!date) return ''
   return new Date(date).toLocaleDateString(lng)

package/tests/DateRangePicker.spec.tsx

@@ -24,4 +24,17 @@ describe('DateRangePicker', () => {
       getByText('Rango de fechas seleccionado: desde 12/1/2025 a 20/1/2025'),
     ).toBeInTheDocument()
   })
+
+  it('renders with input that shows date picker value', () => {
+    const { getByRole } = render(
+      <DateRangePicker
+        defaultValue={{ from: '2025-01-12', to: '2025-01-20' }}
+        onSelect={() => jest.fn()}
+        lng={'es'}
+        withInput
+      />,
+    )
+
+    expect(getByRole('textbox')).toHaveValue('12/1/2025 - 20/1/2025')
+  })
 })

package/tests/DateSinglePicker.spec.tsx

@@ -22,4 +22,16 @@ describe('DateSinglePicker', () => {
     expect(getByText('do')).toBeInTheDocument()
     expect(getByText('Fecha seleccionada: 23/1/2025')).toBeInTheDocument()
   })
+  it('renders with input that show date picker value', () => {
+    const { getByRole } = render(
+      <DateSinglePicker
+        defaultValue={'2025-01-23'}
+        onSelect={() => jest.fn()}
+        withInput
+        lng={'es'}
+      />,
+    )
+
+    expect(getByRole('textbox')).toHaveValue('23/1/2025')
+  })
 })