agroptima-design-system 0.24.4 → 0.24.5

package/jest.config.ts

@@ -1,5 +1,5 @@
 import type { Config } from 'jest'
-import nextJest from 'next/jest.js'
+const nextJest = require('next/jest')
 
 const createJestConfig = nextJest({
   dir: './',
@@ -12,6 +12,14 @@ const config: Config = {
     '^.+\\.(svg)$': '<rootDir>/tests/svg.mock.js',
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  globals: {
+    'ts-jest': {
+      useESM: true,
+      tsconfig: {
+        verbatimModuleSyntax: false,
+      },
+    },
+  },
 }
 
-export default createJestConfig(config)
+module.exports = createJestConfig(config)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.24.4",
+  "version": "0.24.5",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -34,10 +34,10 @@
     "@storybook/test": "^8.2.5",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^20.9.4",
+    "@types/node": "^22.1.0",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
     "eslint": "^8",
@@ -46,7 +46,7 @@
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-storybook": "^0.8.0",
     "jest": "^29.7.0",
-    "jest-axe": "^8.0.0",
+    "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "storybook": "^8.2.5",
     "ts-node": "^10.9.2",

package/src/atoms/Alert.scss

@@ -11,7 +11,7 @@
   align-items: flex-start;
   border-radius: config.$corner-radius-xxs;
   pointer-events: none;
-  margin: 0 config.$space-4x;
+  margin: 0;
 
   &.fit-content {
     width: fit-content;

package/src/atoms/Alert.tsx

@@ -1,4 +1,5 @@
-import { IconButton, IconButtonProps } from './Button'
+import type { IconButtonProps } from './Button'
+import { IconButton } from './Button'
 import { Icon } from './Icon'
 import './Alert.scss'
 import { classNames } from '../utils/classNames'

package/src/atoms/Button/Button.tsx

@@ -1,7 +1,9 @@
-import './Button.scss'
-import { Icon, IconType } from '../Icon'
+import type { IconType } from '../Icon'
+import type { BaseButtonProps } from './BaseButton'
+import { Icon } from '../Icon'
 import { classNames } from '../../utils/classNames'
-import { BaseButtonProps, BaseButton } from './BaseButton'
+import { BaseButton } from './BaseButton'
+import './Button.scss'
 
 interface CustomProps {
   label: string

package/src/atoms/Button/FloatingButton.tsx

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

package/src/atoms/Button/IconButton.tsx

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

package/src/atoms/CardMenu/CardMenuOption.tsx

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

package/src/atoms/CardsTableList.tsx

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

package/src/atoms/Collapsible.tsx

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

package/src/atoms/EmptyState.tsx

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

package/src/atoms/Input.tsx

@@ -1,5 +1,6 @@
+import type { IconType } from './Icon'
 import React, { useState } from 'react'
-import { Icon, IconType } from './Icon'
+import { Icon } from './Icon'
 import { classNames } from '../utils/classNames'
 import { buildHelpText } from '../utils/buildHelpText'
 import './Input.scss'

package/src/atoms/Menu/MenuDropdown.tsx

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

package/src/atoms/Menu/MenuLink.tsx

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

package/src/atoms/Modal.tsx

@@ -1,5 +1,6 @@
+import type { ButtonProps } from './Button'
 import { classNames } from '../utils/classNames'
-import { Button, ButtonProps } from './Button'
+import { Button } from './Button'
 import { Icon } from './Icon'
 import './Modal.scss'
 

package/src/atoms/Pagination/PaginationArrow.tsx

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

package/src/atoms/Pagination/PaginationNumber.tsx

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

package/src/atoms/QuantitySelector.tsx

@@ -1,6 +1,7 @@
+import type { InputProps } from './Input'
 import React from 'react'
 import { classNames } from '../utils/classNames'
-import { Input, InputProps } from './Input'
+import { Input } from './Input'
 import { Button } from './Button'
 import './QuantitySelector.scss'
 

package/src/stories/Alert.stories.ts

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

package/src/stories/Badge.stories.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 import { Badge } from '../atoms/Badge'
 
 const meta = {

package/src/stories/Button.stories.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 import { Button } from '../atoms/Button'
 
 const meta = {

package/src/stories/CardsTableList.stories.ts

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

package/src/stories/Changelog.mdx

@@ -6,6 +6,10 @@ import { Meta } from "@storybook/blocks";
 
 # 0.24.4
 
+* Remove margin from Alert component.
+
+# 0.24.4
+
 * Details Modal component height has been changed to 100%.
 * Details Modal component footer has been changed to fixed.
 * Collapsible component accepts a new property `noHorizontalPadding`.

package/src/stories/Checkbox.stories.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 import { Checkbox } from '../atoms/Checkbox'
 
 const meta = {

package/src/stories/FloatingButton.stories.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 import { FloatingButton } from '../atoms/Button'
 
 const meta = {

package/src/stories/IconButton.stories.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 import { IconButton } from '../atoms/Button'
 
 const meta = {

package/src/stories/Input.stories.ts

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

package/src/stories/Multiselect.stories.ts

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

package/src/stories/QuantitySelector.stories.ts

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

package/src/stories/Select.stories.ts

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

package/src/stories/TextArea.stories.ts

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

package/src/utils/sort.ts

@@ -1,4 +1,4 @@
-import { Row } from '../atoms/CardsTableList'
+import type { Row } from '../atoms/CardsTableList'
 import { Order } from '../atoms/CardsTableList'
 
 interface Parse {

package/tests/Alert.spec.tsx

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

package/tests/Badge.spec.tsx

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

package/tsconfig.json

@@ -13,6 +13,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "verbatimModuleSyntax": true,
     "plugins": [
       {
         "name": "next"
@@ -22,6 +23,17 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/stories/CardsTable.stories.js", "src/stories/Modal.stories.js", "src/stories/Typography.stories.mdx", "src/stories/Card.stories.js", "src/stories/Menu.stories.js", "src/stories/EmptyState.stories.js"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/stories/CardsTable.stories.js",
+    "src/stories/Modal.stories.js",
+    "src/stories/Typography.stories.mdx",
+    "src/stories/Card.stories.js",
+    "src/stories/Menu.stories.js",
+    "src/stories/EmptyState.stories.js"
+  ],
   "exclude": ["node_modules"]
 }