agroptima-design-system 0.27.11 → 0.27.13

package/.github/workflows/run-linters.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: lts/*
           cache: 'npm'
 
       - name: Install dependencies

package/.github/workflows/run-tests.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: lts/*
           cache: 'npm'
 
       - name: Install dependencies

package/.nvmrc

@@ -1 +1 @@
-18.18
+lts/*

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "agroptima-design-system",
-
-  "version": "0.27.11",
+  "version": "0.27.13",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -25,16 +24,16 @@
     "@chromatic-com/storybook": "^3.2.2",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.14.0",
-    "@storybook/addon-a11y": "^8.4.2",
+    "@storybook/addon-a11y": "^8.4.5",
     "@storybook/addon-designs": "^8.0.4",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
-    "@storybook/addon-viewport": "^8.4.2",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/nextjs": "^8.4.2",
-    "@storybook/react": "^8.4.2",
-    "@storybook/test": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/addon-viewport": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/nextjs": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/test": "^8.4.5",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
@@ -49,12 +48,12 @@
     "eslint-config-next": "15.0.3",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-storybook": "^0.11.0",
+    "eslint-plugin-storybook": "^0.11.1",
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "3.3.3",
-    "storybook": "^8.4.2",
+    "storybook": "^8.4.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.3"
   },

package/src/atoms/Multiselect.tsx

@@ -4,8 +4,8 @@ import { Icon } from './Icon'
 import { IconButton } from './Button'
 import { classNames } from '../utils/classNames'
 import { buildHelpText } from '../utils/buildHelpText'
-import { useOutsideClick } from '@/utils/useOutsideClick'
-import { useOpen } from '@/utils/useOpen'
+import { useOutsideClick } from '../utils/useOutsideClick'
+import { useOpen } from '../utils/useOpen'
 
 export type Variant = 'primary'
 export type Option = { id: string; label: string }

package/src/icons/electronic-invoice.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#electronic-invoice__a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.62 18.45H1.81c-.14 0-.26-.12-.26-.26V6.668H4.9a1.81 1.81 0 0 0 1.81-1.8V1.54h7.48c.14 0 .26.11.26.26v7.007c.075 0 .148-.005.22-.01.072-.005.145-.01.22-.01.38 0 .75.04 1.11.1V1.799A1.81 1.81 0 0 0 14.19 0H5.93c-.41.001-.99.15-1.37.53L.53 4.539c-.38.38-.53.95-.53 1.359v12.304A1.81 1.81 0 0 0 1.81 20h9.5a6.22 6.22 0 0 1-1.69-1.54v-.01ZM5.16 2.11v2.759c0 .14-.12.26-.26.26H2.12l3.03-3.01.01-.009ZM3.1 9.995v6.147c0 .43.35.77.77.77h4.9c-.24-.63-.37-1.31-.37-2.02 0-.929.23-1.808.62-2.588h-.24v-1.54h1.34a6.591 6.591 0 0 1 2.23-1.499c-.07-.02-.14-.04-.22-.04H3.87c-.43 0-.77.34-.77.77Zm1.54.77h2.58v1.539H4.64v-1.54Zm0 3.078h2.58v1.54H4.64v-1.54Zm7.49-9.225h-3.1a.77.77 0 0 1 0-1.54h3.1a.77.77 0 0 1 0 1.54Zm-3.1 3.068h3.1c.43 0 .77-.35.77-.77 0-.42-.35-.77-.77-.77h-3.1a.77.77 0 0 0 0 1.54ZM20 14.992a4.999 4.999 0 0 1-5 4.998c-2.761 0-5-2.237-5-4.997a4.999 4.999 0 0 1 5-4.998 5 5 0 0 1 5 4.998Zm-4.667 2.999v-.666H16v.666h-.667Zm-.666-2.332v1.666h.666v-1.666h1.334v-.667h.666v1.333H16v.666h.667v1H18v-.666h-.667v-1H18v-1.332h-.667v-.667h-.666v.666h-1.334v-.666h-2v.666h-.666v-.666H12v.666h.667v.667h.666v-.667H14v.667h.667Zm0 0v-.667h.666v.667h-.666ZM15 12.66v-.666h.667v.666H15Zm0 0v.667h.667v.666h-1.334V12.66H15Zm-2.5.833h1v-1h-1v1Zm-.5.5v-1.999h2v1.999h-2Zm.5 3.498h1v-1h-1v1Zm-.5.5v-1.999h2v1.999h-2Zm4.5-4.498h1v-1h-1v1Zm-.5.5v-1.999h2v1.999h-2Zm-3.25-.75v-.5h.5v.5h-.5Zm0 3.998v-.5h.5v.5h-.5Zm4-3.998v-.5h.5v.5h-.5Z" fill="#161C26"/></g><defs><clipPath id="electronic-invoice__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/index.tsx

@@ -23,6 +23,7 @@ import DoubleArrowRight from './double-arrow-right.svg'
 import Download from './download.svg'
 import Edit from './edit.svg'
 import EditColumns from './edit-columns.svg'
+import ElectronicInvoice from './electronic-invoice.svg'
 import EmptyState from './empty-customize.svg'
 import Error from './error.svg'
 import Export from './export.svg'
@@ -73,6 +74,7 @@ export {
   Download,
   Edit,
   EditColumns,
+  ElectronicInvoice,
   EmptyState,
   Error,
   Export,

package/src/stories/Alert.stories.ts

@@ -1,5 +1,5 @@
-import { Alert } from '../atoms/Alert'
 import type { StoryObj } from '@storybook/react'
+import { Alert } from '../atoms/Alert'
 
 const meta = {
   title: 'Design System/Atoms/Alert',

package/src/stories/CardMenu.stories.js

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { CardMenu, CardMenuOption } from '../atoms/CardMenu'
 
 const figmaPrimaryDesign = {

package/src/stories/CardsTable.stories.js

@@ -10,9 +10,9 @@ import {
 } from '../atoms/CardsTable'
 import { IconButton } from '../atoms/Button'
 import { Badge } from '../atoms/Badge'
-import { Checkbox } from '@/atoms/Checkbox'
-import { Popover, PopoverMenu, PopoverMenuOption } from '@/atoms/Popover'
-import { Button } from '@/atoms/Button'
+import { Checkbox } from '../atoms/Checkbox'
+import { Popover, PopoverMenu, PopoverMenuOption } from '../atoms/Popover'
+import { Button } from '../atoms/Button'
 
 const figmaPrimaryDesign = {
   design: {

package/src/stories/Changelog.mdx

@@ -4,6 +4,11 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.27.13
+
+* Add Electronic Invoice icon
+
+
 # 0.27.11
 
 * Fix Badge with icon position on CardsTable component.

package/src/stories/Collapsible.stories.js

@@ -1,10 +1,10 @@
 import React from 'react'
-import { Collapsible } from '@/atoms/Collapsible'
-import { Input } from '@/atoms/Input'
-import { Select } from '@/atoms/Select'
-import { Card } from '@/atoms/Card'
-import { Form as FormComponent, Actions } from '@/atoms/Form'
-import { Button } from '@/atoms/Button'
+import { Collapsible } from '../atoms/Collapsible'
+import { Input } from '../atoms/Input'
+import { Select } from '../atoms/Select'
+import { Card } from '../atoms/Card'
+import { Form as FormComponent, Actions } from '../atoms/Form'
+import { Button } from '../atoms/Button'
 
 const figmaPrimaryDesign = {
   design: {

package/src/stories/Drawer.stories.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { Drawer } from '../atoms/Drawer'
 import { CheckableTagGroup, CheckableTag } from '../atoms/CheckableTag'
-import { Collapsible } from '@/atoms/Collapsible'
+import { Collapsible } from '../atoms/Collapsible'
 
 const figmaPrimaryDesign = {
   design: {

package/src/stories/Form.stories.js

@@ -1,6 +1,6 @@
-import { Form, Actions } from '@/atoms/Form'
-import { Input } from '@/atoms/Input'
-import { Button } from '@/atoms/Button'
+import { Form, Actions } from '../atoms/Form'
+import { Input } from '../atoms/Input'
+import { Button } from '../atoms/Button'
 
 const meta = {
   title: 'Design System/Atoms/Form',

package/src/stories/Modal.stories.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Modal } from '@/atoms/Modal'
-import { DetailItem } from '@/atoms/DetailItem'
-import { Collapsible } from '@/atoms/Collapsible'
-import { Card } from '@/atoms/Card'
+import { Modal } from '../atoms/Modal'
+import { DetailItem } from '../atoms/DetailItem'
+import { Collapsible } from '../atoms/Collapsible'
+import { Card } from '../atoms/Card'
 
 const figmaPrimaryDesign = {
   design: {

package/src/stories/Popover.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Popover, PopoverMenu, PopoverMenuOption } from '@/atoms/Popover'
-import { Button } from '@/atoms/Button'
+import { Popover, PopoverMenu, PopoverMenuOption } from '../atoms/Popover'
+import { Button } from '../atoms/Button'
 
 const figmaPrimaryDesign = {
   design: {

package/tests/Alert.spec.tsx

@@ -1,7 +1,7 @@
-import type { Variant } from '@/atoms/Alert/Alert'
+import type { Variant } from '../src/atoms/Alert/Alert'
 import React from 'react'
 import { screen, render } from '@testing-library/react'
-import { Alert } from '@/atoms/Alert'
+import { Alert } from '../src/atoms/Alert'
 
 describe('Alert', () => {
   const variants = ['info', 'success', 'warning', 'error']

package/tests/Badge.spec.tsx

@@ -1,7 +1,7 @@
-import type { Variant } from '@/atoms/Badge'
+import type { Variant } from '../src/atoms/Badge'
 import React from 'react'
 import { getByTitle, render, screen } from '@testing-library/react'
-import { Badge } from '@/atoms/Badge'
+import { Badge } from '../src/atoms/Badge'
 
 describe('Badge', () => {
   const variants = [

package/tests/Button.spec.tsx

@@ -1,8 +1,8 @@
-import type { ButtonVariant } from '@/atoms/Button/Button'
+import type { ButtonVariant } from '../src/atoms/Button/Button'
 import React from 'react'
 import { screen, render } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { Button } from '@/atoms/Button/Button'
+import { Button } from '../src/atoms/Button/Button'
 
 describe('Button', () => {
   const variants = [

package/tests/Card.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { Card, CardHeader, CardContent, CardFooter } from '@/atoms/Card'
-import { Button } from '@/atoms/Button'
+import { Card, CardHeader, CardContent, CardFooter } from '../src/atoms/Card'
+import { Button } from '../src/atoms/Button'
 
 describe('Product card', () => {
   it('renders the expected structure and data', () => {

package/tests/CardMenuOption.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { CardMenuOption } from '@/atoms/CardMenu/CardMenuOption'
+import { CardMenuOption } from '../src/atoms/CardMenu/CardMenuOption'
 
 describe('CardMenuOption', () => {
   it('renders', () => {

package/tests/CardsTable.spec.tsx

@@ -8,9 +8,9 @@ import {
   CardsTableBody,
   CardsTableCell,
   Alignment,
-} from '@/atoms/CardsTable'
-import { IconButton } from '@/atoms/Button'
-import { Badge } from '@/atoms/Badge'
+} from '../src/atoms/CardsTable'
+import { IconButton } from '../src/atoms/Button'
+import { Badge } from '../src/atoms/Badge'
 
 describe('CardsTable', () => {
   it('renders', () => {

package/tests/CheckableTag.spec.tsx

@@ -1,7 +1,7 @@
-import type { Variant } from '@/atoms/CheckableTag'
+import type { Variant } from '../src/atoms/CheckableTag'
 import React from 'react'
 import { render } from '@testing-library/react'
-import { CheckableTag } from '@/atoms/CheckableTag'
+import { CheckableTag } from '../src/atoms/CheckableTag'
 
 describe('CheckableTag', () => {
   const variants = ['primary']

package/tests/Checkbox.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { Checkbox } from '@/atoms/Checkbox'
+import { Checkbox } from '../src/atoms/Checkbox'
 
 describe('Checkbox', () => {
   const variants = ['primary']

package/tests/Collapsible.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { Collapsible } from '@/atoms/Collapsible'
-import { Input } from '@/atoms/Input'
+import { Collapsible } from '../src/atoms/Collapsible'
+import { Input } from '../src/atoms/Input'
 
 describe('Collapsible', () => {
   it('renders', () => {

package/tests/Drawer.spec.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { Drawer } from '@/atoms/Drawer'
-import { Collapsible } from '@/atoms/Collapsible'
-import { CheckableTag, CheckableTagGroup } from '@/atoms/CheckableTag'
+import { Drawer } from '../src/atoms/Drawer'
+import { Collapsible } from '../src/atoms/Collapsible'
+import { CheckableTag, CheckableTagGroup } from '../src/atoms/CheckableTag'
 
 describe('Drawer', () => {
   it('renders with expected title, content and buttons', () => {

package/tests/EmptyState.spec.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import type { Variant } from '@/atoms/EmptyState'
-import { EmptyState } from '@/atoms/EmptyState'
-import { Button } from '@/atoms/Button/Button'
+import type { Variant } from '../src/atoms/EmptyState'
+import { EmptyState } from '../src/atoms/EmptyState'
+import { Button } from '../src/atoms/Button/Button'
 
 describe('EmptyState', () => {
   const variants = ['primary']

package/tests/FloatingButton.spec.tsx

@@ -1,8 +1,8 @@
-import type { Variant } from '@/atoms/Button/FloatingButton'
+import type { Variant } from '../src/atoms/Button/FloatingButton'
 import React from 'react'
 import { screen, render } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { FloatingButton } from '@/atoms/Button/FloatingButton'
+import { FloatingButton } from '../src/atoms/Button/FloatingButton'
 
 describe('Floating Button', () => {
   const variants = ['primary']

package/tests/Icon.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { Icon } from '@/atoms/Icon'
+import { Icon } from '../src/atoms/Icon'
 
 describe('Icon', () => {
   it('renders with the expected graphic and styles', () => {

package/tests/IconButton.spec.tsx

@@ -1,8 +1,8 @@
-import type { Variant } from '@/atoms/Button/IconButton'
+import type { Variant } from '../src/atoms/Button/IconButton'
 import React from 'react'
 import { screen, render } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { IconButton } from '@/atoms/Button/IconButton'
+import { IconButton } from '../src/atoms/Button/IconButton'
 
 describe('Icon Button', () => {
   const variants = ['primary', 'secondary']

package/tests/Input.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { getByText, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { Input } from '@/atoms/Input'
+import { Input } from '../src/atoms/Input'
 
 describe('Input', () => {
   it('renders the Text type', () => {

package/tests/Menu.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { Menu } from '@/atoms/Menu/Menu'
-import { MenuDropdown, MenuLink } from '@/atoms/Menu'
+import { Menu } from '../src/atoms/Menu/Menu'
+import { MenuDropdown, MenuLink } from '../src/atoms/Menu'
 
 describe('Menu', () => {
   it('renders first-level menu', () => {

package/tests/Modal.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { screen, render } from '@testing-library/react'
-import { Modal } from '@/atoms/Modal'
+import { Modal } from '../src/atoms/Modal'
 
 describe('Modal', () => {
   const variants = ['info', 'success', 'warning', 'error']

package/tests/Multiselect.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { Multiselect } from '@/atoms/Multiselect'
+import { Multiselect } from '../src/atoms/Multiselect'
 import { Placeholder } from 'storybook/internal/components'
 
 describe('Multiselect', () => {

package/tests/Pagination.spec.tsx

@@ -5,7 +5,7 @@ import {
   PaginationArrow,
   PaginationNumber,
   Ellipsis,
-} from '@/atoms/Pagination'
+} from '../src/atoms/Pagination'
 
 describe('Pagination', () => {
   it('renders Pagination components', () => {

package/tests/Popover.spec.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { Popover, PopoverMenu, PopoverMenuOption } from '@/atoms/Popover'
-import { Button } from '@/atoms/Button'
 import userEvent from '@testing-library/user-event'
+import { Popover, PopoverMenu, PopoverMenuOption } from '../src/atoms/Popover'
+import { Button } from '../src/atoms/Button'
 
 describe('PopoverMenu', () => {
   it('shows when click on button', async () => {

package/tests/QuantitySelector.spec.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import { render } from '@testing-library/react'
-import { QuantitySelector } from '@/atoms/QuantitySelector'
+import { QuantitySelector } from '../src/atoms/QuantitySelector'
 
 describe('QuantitySelector', () => {
   it('renders', () => {

package/tests/RadioButton.spec.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import { render } from '@testing-library/react'
-import { RadioButton } from '@/atoms/RadioButton'
+import { RadioButton } from '../src/atoms/RadioButton'
 
 describe('RadioButton', () => {
   const variants = ['primary']

package/tests/Select.spec.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
 import { render, screen } from '@testing-library/react'
+import { Select } from '../src/atoms/Select'
 import userEvent from '@testing-library/user-event'
-import { Select } from '@/atoms/Select'
 
 describe('Select', () => {
   it('renders', async () => {

package/tests/TextArea.spec.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import { render } from '@testing-library/react'
-import { TextArea } from '@/atoms/TextArea'
+import { TextArea } from '../src/atoms/TextArea'
 
 describe('TextArea', () => {
   it('renders', () => {

package/tests/utils/classNames.spec.tsx

@@ -1,4 +1,4 @@
-import { classNames } from '@/utils/classNames'
+import { classNames } from '../../src/utils/classNames'
 
 describe('classNames', () => {
   it('returns a string of classes', () => {

package/tsconfig.json

@@ -18,10 +18,7 @@
       {
         "name": "next"
       }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    ]
   },
   "include": [
     "next-env.d.ts",