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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.29.2",
+  "version": "0.29.3-beta.0",
   "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/DateSinglePicker/DateSinglePicker.scss

@@ -0,0 +1,15 @@
+@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/
+
+.date-picker {
+  .rdp-root {
+    width: 309px;
+    --rdp-accent-color: #{color_alias.$primary-color-600};
+    --rdp-accent-background-color: #{color_alias.$primary-color-50};
+  }
+}

package/src/atoms/DateSinglePicker/DateSinglePicker.tsx

@@ -0,0 +1,82 @@
+import 'react-day-picker/style.css'
+import './DateSinglePicker.scss'
+import { useEffect, useState } from 'react'
+import { 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 DateSinglePickerProps extends DivPropsWithoutOnSelect {
+  variant?: Variant
+  onSelect: (date: Date | undefined) => void
+  selected?: Date
+  lng: keyof typeof availableLocales
+}
+
+export function DateSinglePicker({
+  className,
+  variant = 'primary',
+  onSelect = () => {},
+  selected: preselected,
+  lng,
+}: DateSinglePickerProps): React.JSX.Element {
+  const manageFooterText = (): string => {
+    if (!selected) return translations[lng].pickDate
+
+    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()
+  })
+  const cssClasses = classNames('date-picker', variant, className)
+
+  useEffect(() => {
+    setSelected(preselected)
+    setFooter(manageFooterText())
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preselected])
+
+  function selectDate(date: Date | undefined) {
+    setSelected(date)
+    onSelect(date)
+  }
+
+  return (
+    <div className={cssClasses}>
+      <DayPicker
+        locale={availableLocales[lng]}
+        mode="single"
+        selected={selected}
+        onSelect={(date) => selectDate(date)}
+        footer={footer}
+        required
+        defaultMonth={selected}
+      />
+    </div>
+  )
+}

package/src/atoms/DateSinglePicker/translations.ts

@@ -0,0 +1,14 @@
+interface Translation {
+  [index: string]: { [index: string]: string }
+}
+
+export const translations: Translation = {
+  en: {
+    pickDate: 'Pick a date',
+    selectedDate: 'Selected date: ${date}',
+  },
+  es: {
+    pickDate: 'Selecciona una fecha',
+    selectedDate: 'Fecha seleccionada: ${date}',
+  },
+}

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/DateSinglePicker.stories.ts

@@ -0,0 +1,57 @@
+import type { StoryObj } from '@storybook/react'
+import { DateSinglePicker } from '../atoms/DateSinglePicker/DateSinglePicker'
+
+const meta = {
+  title: 'Design System/Atoms/DateSinglePicker',
+  component: DateSinglePicker,
+  tags: ['autodocs'],
+  argTypes: {
+    footer: {
+      description: 'Text for the footer',
+    },
+    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: 'Parameter to disallow calendar without selected day',
+    },
+  },
+}
+
+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 Primary: Story = {
+  args: {
+    variant: 'primary',
+    onSelect: (date) => console.log('onSelect date:', date),
+    lng: 'en',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const WithSingleDaySelected: Story = {
+  args: {
+    variant: 'primary',
+    onSelect: (date) => console.log('onSelect date:', date),
+    selected: new Date(2024, 1, 2),
+    lng: 'en',
+  },
+  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' },
-    },
   },
 }