agroptima-design-system 0.27.21 → 0.27.23

package/.storybook/main.ts

@@ -1,5 +1,5 @@
 import type { StorybookConfig } from '@storybook/nextjs'
-import { join, dirname, resolve } from 'path'
+import { dirname, join, resolve } from 'path'
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -41,7 +41,7 @@ const config: StorybookConfig = {
     const imageRule = config.module.rules.find((rule) =>
       rule?.['test']?.test('.svg'),
     )
-    if (!imageRule || typeof imageRule !== 'object') return
+    if (!imageRule || typeof imageRule !== 'object') return config
 
     // Configure .svg files to be loaded with @svgr/webpack
     config.module.rules.push({

package/.storybook/preview.ts

@@ -1,6 +1,6 @@
-import type { Preview } from '@storybook/react'
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import '../src/index.scss'
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import type { Preview } from '@storybook/react'
 
 const preview: Preview = {
   parameters: {

package/eslint.config.mjs

@@ -1,8 +1,9 @@
+import { FlatCompat } from '@eslint/eslintrc'
+import js from '@eslint/js'
 import prettier from 'eslint-plugin-prettier'
+import simpleImportSort from 'eslint-plugin-simple-import-sort'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
-import js from '@eslint/js'
-import { FlatCompat } from '@eslint/eslintrc'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -18,10 +19,21 @@ const config = [
   {
     plugins: {
       prettier,
+      'simple-import-sort': simpleImportSort,
+    },
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
     },
-
     rules: {
       'prettier/prettier': ['error'],
+      'simple-import-sort/imports': [
+        'error',
+        {
+          groups: [['^\\u0000', '^@?\\w', '^[^.]', '^\\.']],
+        },
+      ],
+      'simple-import-sort/exports': 'error',
     },
   },
 ]

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.27.21",
+  "version": "0.27.23",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
     "build": "npm run build-storybook",
     "build-storybook": "storybook build",
     "lint": "eslint",
-    "lint:fix": "eslint src --fix",
+    "lint:fix": "eslint --fix",
     "types": "tsc --noEmit",
     "chromatic": "npx chromatic --exit-zero-on-changes",
     "test": "jest",
@@ -18,10 +18,10 @@
     "next": "^15.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "sass": "^1.83.0"
+    "sass": "^1.83.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
+    "@chromatic-com/storybook": "^3.2.3",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.16.0",
     "@storybook/addon-a11y": "^8.4.7",
@@ -40,15 +40,16 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.0.1",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.3",
     "@types/react-dom": "^19.0.2",
     "ajv": "^8.17.1",
-    "eslint": "^9.16.0",
-    "eslint-config-next": "^15.1.0",
+    "eslint": "^9.17.0",
+    "eslint-config-next": "^15.1.3",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-storybook": "^0.11.2",
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",

package/src/atoms/Alert/Alert.tsx

@@ -1,15 +1,16 @@
+import './Alert.scss'
+import type { ReactElement } from 'react'
+import { classNames } from '../../utils/classNames'
 import type { IconButtonProps } from '../Button'
 import { IconButton } from '../Button'
 import { Icon } from '../Icon'
-import './Alert.scss'
-import { classNames } from '../../utils/classNames'
 
 export type Variant = 'info' | 'success' | 'warning' | 'error'
 
 export interface AlertProps extends React.ComponentPropsWithoutRef<'div'> {
   id: string
   variant?: Variant
-  text: string
+  text: string | ReactElement
   button?: IconButtonProps
   fadeOut?: boolean
   fitContent?: boolean

package/src/atoms/Alert/AlertContainer.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../../utils/classNames'
 import './AlertContainer.scss'
+import { classNames } from '../../utils/classNames'
 
 export interface AlertContainerProps
   extends React.ComponentPropsWithoutRef<'section'> {}

package/src/atoms/Badge.tsx

@@ -1,7 +1,7 @@
+import './Badge.scss'
+import { classNames } from '../utils/classNames'
 import type { IconType } from './Icon'
 import { Icon } from './Icon'
-import { classNames } from '../utils/classNames'
-import './Badge.scss'
 
 export type Variant =
   | 'info'

package/src/atoms/Button/Button.tsx

@@ -1,9 +1,9 @@
+import './Button.scss'
+import { classNames } from '../../utils/classNames'
 import type { IconType } from '../Icon'
-import type { BaseButtonProps } from './BaseButton'
 import { Icon } from '../Icon'
-import { classNames } from '../../utils/classNames'
+import type { BaseButtonProps } from './BaseButton'
 import { BaseButton } from './BaseButton'
-import './Button.scss'
 
 interface CustomProps {
   label: string
@@ -59,9 +59,9 @@ export function Button({
       {...props}
       className={cssClasses}
     >
-      {leftIcon && <Icon name={leftIcon} />}
+      {leftIcon && <Icon name={leftIcon} size="3" />}
       {label}
-      {rightIcon && <Icon name={rightIcon} />}
+      {rightIcon && <Icon name={rightIcon} size="3" />}
     </BaseButton>
   )
 }

package/src/atoms/Button/FloatingButton.tsx

@@ -1,9 +1,9 @@
+import './FloatingButton.scss'
+import { classNames } from '../../utils/classNames'
 import type { IconType } from '../Icon'
-import type { BaseButtonProps } from './BaseButton'
 import { Icon } from '../Icon'
-import { classNames } from '../../utils/classNames'
+import type { BaseButtonProps } from './BaseButton'
 import { BaseButton } from './BaseButton'
-import './FloatingButton.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/Button/IconButton.tsx

@@ -1,9 +1,9 @@
+import './IconButton.scss'
+import { classNames } from '../../utils/classNames'
 import type { IconSize, IconType } from '../Icon'
-import type { BaseButtonProps } from './BaseButton'
 import { Icon } from '../Icon'
-import { classNames } from '../../utils/classNames'
+import type { BaseButtonProps } from './BaseButton'
 import { BaseButton } from './BaseButton'
-import './IconButton.scss'
 
 export type Variant = 'primary' | 'secondary'
 

package/src/atoms/Button/SubmitButton.tsx

@@ -1,7 +1,7 @@
 'use client'
+import { useFormStatus } from 'react-dom'
 import type { ButtonProps } from './Button'
 import { Button } from './Button'
-import { useFormStatus } from 'react-dom'
 
 export type SubmitButtonProps = ButtonProps
 

package/src/atoms/Button/index.ts

@@ -1,13 +1,13 @@
+import { BaseButton } from './BaseButton'
 import { Button } from './Button'
-import { IconButton } from './IconButton'
 import { FloatingButton } from './FloatingButton'
-import { BaseButton } from './BaseButton'
+import { IconButton } from './IconButton'
 import { SubmitButton } from './SubmitButton'
 
+export type { BaseButtonProps } from './BaseButton'
 export type { ButtonProps } from './Button'
-export type { IconButtonProps } from './IconButton'
 export type { FloatingButtonProps } from './FloatingButton'
-export type { BaseButtonProps } from './BaseButton'
+export type { IconButtonProps } from './IconButton'
 export type { SubmitButtonProps } from './SubmitButton'
 
-export { Button, IconButton, FloatingButton, BaseButton, SubmitButton }
+export { BaseButton, Button, FloatingButton, IconButton, SubmitButton }

package/src/atoms/Card/Card.tsx

@@ -1,7 +1,7 @@
 import './Card.scss'
+import Link from 'next/link'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
-import Link from 'next/link'
 
 export type Variant = 'primary'
 

package/src/atoms/Card/index.ts

@@ -1,6 +1,6 @@
 import { Card } from './Card'
-import { CardHeader } from './CardHeader'
 import { CardContent } from './CardContent'
 import { CardFooter } from './CardFooter'
+import { CardHeader } from './CardHeader'
 
-export { Card, CardHeader, CardContent, CardFooter }
+export { Card, CardContent, CardFooter, CardHeader }

package/src/atoms/CardMenu/CardMenuOption.tsx

@@ -1,9 +1,9 @@
-import type { IconType } from '../Icon'
+import './CardMenu.scss'
 import type { LinkProps as NextLinkProps } from 'next/link'
-import { Icon } from '../Icon'
-import { classNames } from '../../utils/classNames'
 import Link from 'next/link'
-import './CardMenu.scss'
+import { classNames } from '../../utils/classNames'
+import type { IconType } from '../Icon'
+import { Icon } from '../Icon'
 
 export type Variant = 'primary'
 

package/src/atoms/CardsTable/CardsTable.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../../utils/classNames'
 import './CardsTable.scss'
+import { classNames } from '../../utils/classNames'
 
 export type Variant = 'primary'
 

package/src/atoms/CardsTable/CardsTableCell.tsx

@@ -1,6 +1,6 @@
-import { classNames } from '../../utils/classNames'
 import './CardsTable.scss'
 import React from 'react'
+import { classNames } from '../../utils/classNames'
 
 export enum Alignment {
   Left = 'left',

package/src/atoms/CardsTable/CardsTableRow.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import './CardsTable.scss'
+import React from 'react'
 import { classNames } from '../../utils/classNames'
 
 export interface CardsTableRowProps

package/src/atoms/CardsTable/index.ts

@@ -1,16 +1,16 @@
 import { CardsTable } from './CardsTable'
+import { CardsTableBody } from './CardsTableBody'
+import { Alignment, CardsTableCell } from './CardsTableCell'
 import { CardsTableHead } from './CardsTableHead'
 import { CardsTableHeader } from './CardsTableHeader'
 import { CardsTableRow } from './CardsTableRow'
-import { CardsTableBody } from './CardsTableBody'
-import { CardsTableCell, Alignment } from './CardsTableCell'
 
 export {
+  Alignment,
   CardsTable,
+  CardsTableBody,
+  CardsTableCell,
   CardsTableHead,
   CardsTableHeader,
   CardsTableRow,
-  CardsTableBody,
-  CardsTableCell,
-  Alignment,
 }

package/src/atoms/CardsTableList.tsx

@@ -1,16 +1,16 @@
-import type { IconType } from './Icon'
+import './CardsTable/CardsTable.scss'
 import React, { useState } from 'react'
 import { sortBy } from '../utils/sort'
 import {
-  CardsTableHeader,
-  CardsTableCell,
-  CardsTableRow,
   CardsTable,
-  CardsTableHead,
   CardsTableBody,
+  CardsTableCell,
+  CardsTableHead,
+  CardsTableHeader,
+  CardsTableRow,
 } from './CardsTable'
+import type { IconType } from './Icon'
 import { Icon } from './Icon'
-import './CardsTable/CardsTable.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/CheckableTag/CheckableTag.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../../utils/classNames'
 import './CheckableTag.scss'
+import { classNames } from '../../utils/classNames'
 
 export type Variant = 'primary'
 

package/src/atoms/CheckableTag/CheckableTagGroup.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../../utils/classNames'
 import './CheckableTag.scss'
+import { classNames } from '../../utils/classNames'
 
 export interface CheckableTagGroupProps
   extends React.ComponentPropsWithoutRef<'div'> {}

package/src/atoms/Checkbox.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../utils/classNames'
 import './Checkbox.scss'
+import { classNames } from '../utils/classNames'
 
 export type Variant = 'primary'
 

package/src/atoms/Collapsible.tsx

@@ -1,6 +1,6 @@
+import './Collapsible.scss'
 import { classNames } from '../utils/classNames'
 import { Icon } from './Icon'
-import './Collapsible.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/DetailItem.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../utils/classNames'
 import './DetailItem.scss'
+import { classNames } from '../utils/classNames'
 
 export type Variant = 'primary'
 

package/src/atoms/Drawer.tsx

@@ -1,7 +1,7 @@
-import type { ButtonProps } from './Button'
+import './Drawer.scss'
 import { classNames } from '../utils/classNames'
+import type { ButtonProps } from './Button'
 import { Button, IconButton } from './Button'
-import './Drawer.scss'
 import { Actions } from './Form'
 
 export type Variant = 'primary'

package/src/atoms/EmptyState.tsx

@@ -1,7 +1,7 @@
-import type { IconType } from './Icon'
+import './EmptyState.scss'
 import { classNames } from '../utils/classNames'
+import type { IconType } from './Icon'
 import { Icon } from './Icon'
-import './EmptyState.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/Form/Actions.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../../utils/classNames'
 import './Form.scss'
+import { classNames } from '../../utils/classNames'
 
 export interface ActionsProps extends React.ComponentPropsWithoutRef<'div'> {
   children: React.ReactNode

package/src/atoms/Form/Form.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../../utils/classNames'
 import './Form.scss'
+import { classNames } from '../../utils/classNames'
 
 export interface FormProps extends React.ComponentPropsWithoutRef<'form'> {
   fullWidth?: boolean

package/src/atoms/Form/index.ts

@@ -1,4 +1,4 @@
-import Form from './Form'
 import Actions from './Actions'
+import Form from './Form'
 
-export { Form, Actions }
+export { Actions, Form }

package/src/atoms/Icon.tsx

@@ -1,5 +1,5 @@
 import './Icon.scss'
-
+import type { ReactNode } from 'react'
 import * as icons from '../icons'
 import { classNames } from '../utils/classNames'
 export type IconType = keyof typeof icons
@@ -28,7 +28,7 @@ export const Icon: React.FC<IconProps> = ({
   })
   return (
     <span role="img" title={props.title || name} className={cssClasses}>
-      {icons[name](props)}
+      {icons[name](props) as ReactNode}
     </span>
   )
 }

package/src/atoms/Input.tsx

@@ -1,10 +1,10 @@
-import type { IconType } from './Icon'
+import './Input.scss'
 import React, { useState } from 'react'
-import { Icon } from './Icon'
-import { IconButton } from './Button/IconButton'
-import { classNames } from '../utils/classNames'
 import { buildHelpText } from '../utils/buildHelpText'
-import './Input.scss'
+import { classNames } from '../utils/classNames'
+import { IconButton } from './Button/IconButton'
+import type { IconType } from './Icon'
+import { Icon } from './Icon'
 
 export type InputVariant = 'primary'
 

package/src/atoms/Menu/MenuDropdown.tsx

@@ -1,7 +1,7 @@
-import type { IconType } from '../Icon'
+import './Menu.scss'
 import { classNames } from '../../utils/classNames'
+import type { IconType } from '../Icon'
 import { Icon } from '../Icon'
-import './Menu.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/Menu/MenuLink.tsx

@@ -1,9 +1,9 @@
-import type { IconType } from '../Icon'
+import './Menu.scss'
+import Link from 'next/link'
 import React from 'react'
-import { Icon } from '../Icon'
 import { classNames } from '../../utils/classNames'
-import Link from 'next/link'
-import './Menu.scss'
+import type { IconType } from '../Icon'
+import { Icon } from '../Icon'
 
 export type Variant = 'primary'
 

package/src/atoms/Menu/index.ts

@@ -1,5 +1,5 @@
 import { Menu } from './Menu'
-import { MenuLink } from './MenuLink'
 import { MenuDropdown } from './MenuDropdown'
+import { MenuLink } from './MenuLink'
 
-export { Menu, MenuLink, MenuDropdown }
+export { Menu, MenuDropdown, MenuLink }

package/src/atoms/Modal.tsx

@@ -1,8 +1,8 @@
-import type { ButtonProps } from './Button'
+import './Modal.scss'
 import { classNames } from '../utils/classNames'
+import type { ButtonProps } from './Button'
 import { Button } from './Button'
 import { Icon } from './Icon'
-import './Modal.scss'
 
 export type Variant =
   | 'info'

package/src/atoms/Multiselect.tsx

@@ -1,13 +1,13 @@
 import './Select.scss'
 import React, { useRef, useState } from 'react'
-import { Icon } from './Icon'
-import { IconButton } from './Button'
-import { classNames } from '../utils/classNames'
-import { buildHelpText } from '../utils/buildHelpText'
-import { useOutsideClick } from '../hooks/useOutsideClick'
 import { useOpen } from '../hooks/useOpen'
-import { Input } from './Input'
+import { useOutsideClick } from '../hooks/useOutsideClick'
 import { useSearch } from '../hooks/useSearch'
+import { buildHelpText } from '../utils/buildHelpText'
+import { classNames } from '../utils/classNames'
+import { IconButton } from './Button'
+import { Icon } from './Icon'
+import { Input } from './Input'
 
 export type Variant = 'primary'
 export type Option = { id: string; label: string }

package/src/atoms/Pagination/Ellipsis.tsx

@@ -1,6 +1,6 @@
+import './Pagination.scss'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
-import './Pagination.scss'
 
 export interface EllipsisProps extends React.ComponentPropsWithoutRef<'span'> {}
 

package/src/atoms/Pagination/Pagination.tsx

@@ -1,6 +1,6 @@
+import './Pagination.scss'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
-import './Pagination.scss'
 
 type Size = 'small' | 'medium'
 

package/src/atoms/Pagination/PaginationArrow.tsx

@@ -1,8 +1,8 @@
-import type { IconButtonProps } from '../Button'
+import './Pagination.scss'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
+import type { IconButtonProps } from '../Button'
 import { IconButton } from '../Button'
-import './Pagination.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/Pagination/PaginationNumber.tsx

@@ -1,8 +1,8 @@
-import type { ButtonProps } from '../Button'
+import './Pagination.scss'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
+import type { ButtonProps } from '../Button'
 import { Button } from '../Button'
-import './Pagination.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/Pagination/index.ts

@@ -1,6 +1,6 @@
+import { Ellipsis } from './Ellipsis'
 import { Pagination } from './Pagination'
 import { PaginationArrow } from './PaginationArrow'
 import { PaginationNumber } from './PaginationNumber'
-import { Ellipsis } from './Ellipsis'
 
-export { Pagination, PaginationArrow, PaginationNumber, Ellipsis }
+export { Ellipsis, Pagination, PaginationArrow, PaginationNumber }

package/src/atoms/Popover/Popover.tsx

@@ -1,9 +1,9 @@
 'use client'
+import './Popover.scss'
+import { useRef } from 'react'
+import { useOpen } from '../../hooks/useOpen'
 import { useOutsideClick } from '../../hooks/useOutsideClick'
 import { classNames } from '../../utils/classNames'
-import { useOpen } from '../../hooks/useOpen'
-import { useRef } from 'react'
-import './Popover.scss'
 
 export interface PopoverProps {
   renderButton: (props: {

package/src/atoms/Popover/PopoverMenu.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../../utils/classNames'
 import './Popover.scss'
+import { classNames } from '../../utils/classNames'
 
 export interface PopoverMenuProps
   extends React.ComponentPropsWithoutRef<'div'> {}

package/src/atoms/Popover/PopoverMenuOption.tsx

@@ -1,7 +1,7 @@
+import './Popover.scss'
 import type { LinkProps as NextLinkProps } from 'next/link'
-import { classNames } from '../../utils/classNames'
 import Link from 'next/link'
-import './Popover.scss'
+import { classNames } from '../../utils/classNames'
 
 export type Variant = 'primary'
 

package/src/atoms/QuantitySelector.tsx

@@ -1,9 +1,9 @@
-import type { InputProps } from './Input'
+import './QuantitySelector.scss'
 import React from 'react'
 import { classNames } from '../utils/classNames'
-import { Input } from './Input'
 import { Button } from './Button'
-import './QuantitySelector.scss'
+import type { InputProps } from './Input'
+import { Input } from './Input'
 
 export type Variant = 'primary'
 

package/src/atoms/RadioButton.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../utils/classNames'
 import './RadioButton.scss'
+import { classNames } from '../utils/classNames'
 
 export type Variant = 'primary'