agroptima-design-system 0.27.2 → 0.27.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/design-system-deploy-production.yaml +1 -1
- package/.github/workflows/publish-package-to-npmjs.yml +1 -1
- package/.github/workflows/run-linters.yml +1 -1
- package/.github/workflows/run-tests.yml +1 -1
- package/.storybook/preview.ts +1 -1
- package/eslint.config.mjs +29 -0
- package/package.json +25 -17
- package/src/atoms/Button/SubmitButton.tsx +11 -0
- package/src/examples/Typography.tsx +19 -16
- package/src/settings/_color_alias.scss +69 -69
- package/src/stories/Changelog.mdx +5 -0
- package/src/stories/CheckableTag.stories.js +2 -2
- package/src/stories/Pagination.stories.js +6 -1
- package/src/stories/Typography.stories.js +1 -1
- package/tests/svg.mock.js +1 -1
- package/.eslintrc.json +0 -10
package/.storybook/preview.ts
CHANGED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import prettier from 'eslint-plugin-prettier'
|
|
2
|
+
import path from 'node:path'
|
|
3
|
+
import { fileURLToPath } from 'node:url'
|
|
4
|
+
import js from '@eslint/js'
|
|
5
|
+
import { FlatCompat } from '@eslint/eslintrc'
|
|
6
|
+
|
|
7
|
+
const __filename = fileURLToPath(import.meta.url)
|
|
8
|
+
const __dirname = path.dirname(__filename)
|
|
9
|
+
const compat = new FlatCompat({
|
|
10
|
+
baseDirectory: __dirname,
|
|
11
|
+
recommendedConfig: js.configs.recommended,
|
|
12
|
+
allConfig: js.configs.all,
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
const config = [
|
|
16
|
+
{ ignores: ['**/storybook-static/', '**/.next/', '**/node_modules/'] },
|
|
17
|
+
...compat.extends('next/core-web-vitals', 'prettier'),
|
|
18
|
+
{
|
|
19
|
+
plugins: {
|
|
20
|
+
prettier,
|
|
21
|
+
},
|
|
22
|
+
|
|
23
|
+
rules: {
|
|
24
|
+
'prettier/prettier': ['error'],
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
]
|
|
28
|
+
|
|
29
|
+
export default config
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "agroptima-design-system",
|
|
3
|
-
"version": "0.27.
|
|
3
|
+
"version": "0.27.4",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "npm run storybook",
|
|
6
6
|
"storybook": "storybook dev -p 6006 --ci",
|
|
@@ -15,43 +15,47 @@
|
|
|
15
15
|
"publish:beta": "npm publish --tag beta"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"react-dom": "^18.2.0",
|
|
23
|
-
"sass": "^1.69.4"
|
|
18
|
+
"next": "15.0.3",
|
|
19
|
+
"react": "19.0.0-rc-66855b96-20241106",
|
|
20
|
+
"react-dom": "19.0.0-rc-66855b96-20241106",
|
|
21
|
+
"sass": "^1.80.6"
|
|
24
22
|
},
|
|
25
23
|
"devDependencies": {
|
|
26
24
|
"@chromatic-com/storybook": "^3.2.2",
|
|
25
|
+
"@eslint/eslintrc": "^3.1.0",
|
|
26
|
+
"@eslint/js": "^9.14.0",
|
|
27
27
|
"@storybook/addon-a11y": "^8.4.2",
|
|
28
|
+
"@storybook/addon-designs": "^8.0.4",
|
|
28
29
|
"@storybook/addon-essentials": "^8.4.2",
|
|
29
30
|
"@storybook/addon-interactions": "^8.4.2",
|
|
30
31
|
"@storybook/addon-links": "^8.4.2",
|
|
32
|
+
"@storybook/addon-viewport": "^8.4.2",
|
|
31
33
|
"@storybook/blocks": "^8.4.2",
|
|
32
34
|
"@storybook/nextjs": "^8.4.2",
|
|
33
35
|
"@storybook/react": "^8.4.2",
|
|
34
36
|
"@storybook/test": "^8.4.2",
|
|
35
37
|
"@svgr/webpack": "^8.1.0",
|
|
36
|
-
"@testing-library/jest-dom": "^6.
|
|
37
|
-
"@testing-library/react": "^16.0.
|
|
38
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
39
|
+
"@testing-library/react": "^16.0.1",
|
|
38
40
|
"@testing-library/user-event": "^14.5.2",
|
|
39
|
-
"@types/jest": "^29.5.
|
|
41
|
+
"@types/jest": "^29.5.14",
|
|
40
42
|
"@types/jest-axe": "^3.5.9",
|
|
41
|
-
"@types/node": "^22.
|
|
42
|
-
"@types/react": "
|
|
43
|
-
"@types/react-dom": "
|
|
44
|
-
"
|
|
45
|
-
"eslint
|
|
43
|
+
"@types/node": "^22.9.0",
|
|
44
|
+
"@types/react": "npm:types-react@19.0.0-rc.1",
|
|
45
|
+
"@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
|
|
46
|
+
"ajv": "^8.17.1",
|
|
47
|
+
"eslint": "^9.14.0",
|
|
48
|
+
"eslint-config-next": "15.0.3",
|
|
46
49
|
"eslint-config-prettier": "^9.0.0",
|
|
47
50
|
"eslint-plugin-prettier": "^5.0.1",
|
|
48
51
|
"eslint-plugin-storybook": "^0.11.0",
|
|
49
52
|
"jest": "^29.7.0",
|
|
50
53
|
"jest-axe": "^9.0.0",
|
|
51
54
|
"jest-environment-jsdom": "^29.7.0",
|
|
55
|
+
"prettier": "3.3.3",
|
|
52
56
|
"storybook": "^8.4.2",
|
|
53
57
|
"ts-node": "^10.9.2",
|
|
54
|
-
"typescript": "^5"
|
|
58
|
+
"typescript": "^5.6.3"
|
|
55
59
|
},
|
|
56
60
|
"description": "Agroptima design system",
|
|
57
61
|
"main": "next.config.js",
|
|
@@ -69,5 +73,9 @@
|
|
|
69
73
|
"bugs": {
|
|
70
74
|
"url": "https://github.com/agroptima/design-system/issues"
|
|
71
75
|
},
|
|
72
|
-
"homepage": "https://github.com/agroptima/design-system#readme"
|
|
76
|
+
"homepage": "https://github.com/agroptima/design-system#readme",
|
|
77
|
+
"overrides": {
|
|
78
|
+
"@types/react": "npm:types-react@19.0.0-rc.1",
|
|
79
|
+
"@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
|
|
80
|
+
}
|
|
73
81
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
import type { ButtonProps } from './Button'
|
|
3
|
+
import { Button } from './Button'
|
|
4
|
+
import { useFormStatus } from 'react-dom'
|
|
5
|
+
|
|
6
|
+
export type SubmitButtonProps = ButtonProps
|
|
7
|
+
|
|
8
|
+
export default function SubmitButton(props: SubmitButtonProps) {
|
|
9
|
+
const { pending } = useFormStatus()
|
|
10
|
+
return <Button {...props} type="submit" loading={pending} />
|
|
11
|
+
}
|
|
@@ -8,32 +8,32 @@ export function Typography(): React.JSX.Element {
|
|
|
8
8
|
<tr>
|
|
9
9
|
<td>h1</td>
|
|
10
10
|
<td>
|
|
11
|
-
<h1
|
|
11
|
+
<h1>"Waka Waka Waka" - Pacman</h1>
|
|
12
12
|
</td>
|
|
13
13
|
</tr>
|
|
14
14
|
<tr>
|
|
15
15
|
<td>h2</td>
|
|
16
16
|
<td>
|
|
17
|
-
<h2
|
|
17
|
+
<h2>"Do a barrel roll!" - Star Fox 64</h2>
|
|
18
18
|
</td>
|
|
19
19
|
</tr>
|
|
20
20
|
<tr>
|
|
21
21
|
<td>h3</td>
|
|
22
22
|
<td>
|
|
23
|
-
<h3
|
|
23
|
+
<h3>"Kept you waiting, huh?" - MGS</h3>
|
|
24
24
|
</td>
|
|
25
25
|
</tr>
|
|
26
26
|
<tr>
|
|
27
27
|
<td>h4</td>
|
|
28
28
|
<td>
|
|
29
|
-
<h4
|
|
29
|
+
<h4>"Hey! Look! Listen!" - TLoZ</h4>
|
|
30
30
|
</td>
|
|
31
31
|
</tr>
|
|
32
32
|
<tr>
|
|
33
33
|
<td>.body-regular-primary</td>
|
|
34
34
|
<td>
|
|
35
35
|
<span className="body-regular-primary">
|
|
36
|
-
|
|
36
|
+
"Endure and survive." - The Last of Us
|
|
37
37
|
</span>
|
|
38
38
|
</td>
|
|
39
39
|
</tr>
|
|
@@ -41,8 +41,8 @@ export function Typography(): React.JSX.Element {
|
|
|
41
41
|
<td>.body-regular-secondary</td>
|
|
42
42
|
<td>
|
|
43
43
|
<span className="body-regular-secondary">
|
|
44
|
-
|
|
45
|
-
we do, not who we are
|
|
44
|
+
"A famous explorer once said that the extraordinary is in
|
|
45
|
+
what we do, not who we are." - Tomb Raider
|
|
46
46
|
</span>
|
|
47
47
|
</td>
|
|
48
48
|
</tr>
|
|
@@ -50,7 +50,7 @@ export function Typography(): React.JSX.Element {
|
|
|
50
50
|
<td>.body-regular-error</td>
|
|
51
51
|
<td>
|
|
52
52
|
<span className="body-regular-error">
|
|
53
|
-
|
|
53
|
+
"Praise the sun!" - Dark Souls
|
|
54
54
|
</span>
|
|
55
55
|
</td>
|
|
56
56
|
</tr>
|
|
@@ -58,7 +58,7 @@ export function Typography(): React.JSX.Element {
|
|
|
58
58
|
<td>.body-regular-warning</td>
|
|
59
59
|
<td>
|
|
60
60
|
<span className="body-regular-warning">
|
|
61
|
-
|
|
61
|
+
"You’ve met with a terrible fate, haven’t you?" - TLoZ
|
|
62
62
|
</span>
|
|
63
63
|
</td>
|
|
64
64
|
</tr>
|
|
@@ -66,7 +66,7 @@ export function Typography(): React.JSX.Element {
|
|
|
66
66
|
<td>.body-regular-disabled</td>
|
|
67
67
|
<td>
|
|
68
68
|
<span className="body-regular-disabled">
|
|
69
|
-
|
|
69
|
+
"Whatever." - Final Fantasy VIII
|
|
70
70
|
</span>
|
|
71
71
|
</td>
|
|
72
72
|
</tr>
|
|
@@ -74,21 +74,24 @@ export function Typography(): React.JSX.Element {
|
|
|
74
74
|
<td>.body-underline</td>
|
|
75
75
|
<td>
|
|
76
76
|
<span className="body-underline">
|
|
77
|
-
|
|
77
|
+
"Nothing is true, everything is permitted." -
|
|
78
|
+
Assassin’s Creed
|
|
78
79
|
</span>
|
|
79
80
|
</td>
|
|
80
81
|
</tr>
|
|
81
82
|
<tr>
|
|
82
83
|
<td>.body-link</td>
|
|
83
84
|
<td>
|
|
84
|
-
<span className="body-link"
|
|
85
|
+
<span className="body-link">
|
|
86
|
+
"FINISH HIM!" - Mortal Kombat
|
|
87
|
+
</span>
|
|
85
88
|
</td>
|
|
86
89
|
</tr>
|
|
87
90
|
<tr>
|
|
88
91
|
<td>.body-medium</td>
|
|
89
92
|
<td>
|
|
90
93
|
<span className="body-medium">
|
|
91
|
-
|
|
94
|
+
"It’s a-me, Mario!" - Super Mario
|
|
92
95
|
</span>
|
|
93
96
|
</td>
|
|
94
97
|
</tr>
|
|
@@ -96,7 +99,7 @@ export function Typography(): React.JSX.Element {
|
|
|
96
99
|
<td>.body-bold</td>
|
|
97
100
|
<td>
|
|
98
101
|
<span className="body-bold">
|
|
99
|
-
|
|
102
|
+
"You were almost a Jill sandwich!" - Resident Evil
|
|
100
103
|
</span>
|
|
101
104
|
</td>
|
|
102
105
|
</tr>
|
|
@@ -104,7 +107,7 @@ export function Typography(): React.JSX.Element {
|
|
|
104
107
|
<td>.footnote-primary</td>
|
|
105
108
|
<td>
|
|
106
109
|
<span className="footnote-primary">
|
|
107
|
-
|
|
110
|
+
"Kupó! Kupó! Kupopó!" - Final Fantasy IX
|
|
108
111
|
</span>
|
|
109
112
|
</td>
|
|
110
113
|
</tr>
|
|
@@ -112,7 +115,7 @@ export function Typography(): React.JSX.Element {
|
|
|
112
115
|
<td>.footnote-error</td>
|
|
113
116
|
<td>
|
|
114
117
|
<span className="footnote-error">
|
|
115
|
-
|
|
118
|
+
"Get ready for the next battle!" - Tekken
|
|
116
119
|
</span>
|
|
117
120
|
</td>
|
|
118
121
|
</tr>
|
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use './colors';
|
|
2
2
|
|
|
3
3
|
/* Aliases */
|
|
4
|
-
$primary-color-1000:
|
|
5
|
-
$primary-color-900:
|
|
6
|
-
$primary-color-800:
|
|
7
|
-
$primary-color-700:
|
|
8
|
-
$primary-color-600:
|
|
9
|
-
$primary-color-500:
|
|
10
|
-
$primary-color-400:
|
|
11
|
-
$primary-color-300:
|
|
12
|
-
$primary-color-200:
|
|
13
|
-
$primary-color-100:
|
|
14
|
-
$primary-color-50:
|
|
15
|
-
$neutral-color-1000:
|
|
16
|
-
$neutral-color-900:
|
|
17
|
-
$neutral-color-800:
|
|
18
|
-
$neutral-color-700:
|
|
19
|
-
$neutral-color-600:
|
|
20
|
-
$neutral-color-500:
|
|
21
|
-
$neutral-color-400:
|
|
22
|
-
$neutral-color-300:
|
|
23
|
-
$neutral-color-200:
|
|
24
|
-
$neutral-color-100:
|
|
25
|
-
$neutral-color-50:
|
|
26
|
-
$error-color-1000:
|
|
27
|
-
$error-color-900:
|
|
28
|
-
$error-color-800:
|
|
29
|
-
$error-color-700:
|
|
30
|
-
$error-color-600:
|
|
31
|
-
$error-color-500:
|
|
32
|
-
$error-color-400:
|
|
33
|
-
$error-color-300:
|
|
34
|
-
$error-color-200:
|
|
35
|
-
$error-color-100:
|
|
36
|
-
$error-color-50:
|
|
37
|
-
$success-color-1000:
|
|
38
|
-
$success-color-900:
|
|
39
|
-
$success-color-800:
|
|
40
|
-
$success-color-700:
|
|
41
|
-
$success-color-600:
|
|
42
|
-
$success-color-500:
|
|
43
|
-
$success-color-400:
|
|
44
|
-
$success-color-300:
|
|
45
|
-
$success-color-200:
|
|
46
|
-
$success-color-100:
|
|
47
|
-
$success-color-50:
|
|
48
|
-
$warning-color-1000:
|
|
49
|
-
$warning-color-900:
|
|
50
|
-
$warning-color-800:
|
|
51
|
-
$warning-color-700:
|
|
52
|
-
$warning-color-600:
|
|
53
|
-
$warning-color-500:
|
|
54
|
-
$warning-color-400:
|
|
55
|
-
$warning-color-300:
|
|
56
|
-
$warning-color-200:
|
|
57
|
-
$warning-color-100:
|
|
58
|
-
$warning-color-50:
|
|
59
|
-
$info-color-1000:
|
|
60
|
-
$info-color-900:
|
|
61
|
-
$info-color-800:
|
|
62
|
-
$info-color-700:
|
|
63
|
-
$info-color-600:
|
|
64
|
-
$info-color-500:
|
|
65
|
-
$info-color-400:
|
|
66
|
-
$info-color-300:
|
|
67
|
-
$info-color-200:
|
|
68
|
-
$info-color-100:
|
|
69
|
-
$info-color-50:
|
|
70
|
-
$neutral-black:
|
|
71
|
-
$neutral-white:
|
|
4
|
+
$primary-color-1000: colors.$magenta-1000;
|
|
5
|
+
$primary-color-900: colors.$magenta-900;
|
|
6
|
+
$primary-color-800: colors.$magenta-800;
|
|
7
|
+
$primary-color-700: colors.$magenta-700;
|
|
8
|
+
$primary-color-600: colors.$magenta-600;
|
|
9
|
+
$primary-color-500: colors.$magenta-500;
|
|
10
|
+
$primary-color-400: colors.$magenta-400;
|
|
11
|
+
$primary-color-300: colors.$magenta-300;
|
|
12
|
+
$primary-color-200: colors.$magenta-200;
|
|
13
|
+
$primary-color-100: colors.$magenta-100;
|
|
14
|
+
$primary-color-50: colors.$magenta-50;
|
|
15
|
+
$neutral-color-1000: colors.$grey-1000;
|
|
16
|
+
$neutral-color-900: colors.$grey-900;
|
|
17
|
+
$neutral-color-800: colors.$grey-800;
|
|
18
|
+
$neutral-color-700: colors.$grey-700;
|
|
19
|
+
$neutral-color-600: colors.$grey-600;
|
|
20
|
+
$neutral-color-500: colors.$grey-500;
|
|
21
|
+
$neutral-color-400: colors.$grey-400;
|
|
22
|
+
$neutral-color-300: colors.$grey-300;
|
|
23
|
+
$neutral-color-200: colors.$grey-200;
|
|
24
|
+
$neutral-color-100: colors.$grey-100;
|
|
25
|
+
$neutral-color-50: colors.$grey-50;
|
|
26
|
+
$error-color-1000: colors.$red-1000;
|
|
27
|
+
$error-color-900: colors.$red-900;
|
|
28
|
+
$error-color-800: colors.$red-800;
|
|
29
|
+
$error-color-700: colors.$red-700;
|
|
30
|
+
$error-color-600: colors.$red-600;
|
|
31
|
+
$error-color-500: colors.$red-500;
|
|
32
|
+
$error-color-400: colors.$red-400;
|
|
33
|
+
$error-color-300: colors.$red-300;
|
|
34
|
+
$error-color-200: colors.$red-200;
|
|
35
|
+
$error-color-100: colors.$red-100;
|
|
36
|
+
$error-color-50: colors.$red-50;
|
|
37
|
+
$success-color-1000: colors.$green-1000;
|
|
38
|
+
$success-color-900: colors.$green-900;
|
|
39
|
+
$success-color-800: colors.$green-800;
|
|
40
|
+
$success-color-700: colors.$green-700;
|
|
41
|
+
$success-color-600: colors.$green-600;
|
|
42
|
+
$success-color-500: colors.$green-500;
|
|
43
|
+
$success-color-400: colors.$green-400;
|
|
44
|
+
$success-color-300: colors.$green-300;
|
|
45
|
+
$success-color-200: colors.$green-200;
|
|
46
|
+
$success-color-100: colors.$green-100;
|
|
47
|
+
$success-color-50: colors.$green-50;
|
|
48
|
+
$warning-color-1000: colors.$orange-1000;
|
|
49
|
+
$warning-color-900: colors.$orange-900;
|
|
50
|
+
$warning-color-800: colors.$orange-800;
|
|
51
|
+
$warning-color-700: colors.$orange-700;
|
|
52
|
+
$warning-color-600: colors.$orange-600;
|
|
53
|
+
$warning-color-500: colors.$orange-500;
|
|
54
|
+
$warning-color-400: colors.$orange-400;
|
|
55
|
+
$warning-color-300: colors.$orange-300;
|
|
56
|
+
$warning-color-200: colors.$orange-200;
|
|
57
|
+
$warning-color-100: colors.$orange-100;
|
|
58
|
+
$warning-color-50: colors.$orange-50;
|
|
59
|
+
$info-color-1000: colors.$dodger-blue-1000;
|
|
60
|
+
$info-color-900: colors.$dodger-blue-900;
|
|
61
|
+
$info-color-800: colors.$dodger-blue-800;
|
|
62
|
+
$info-color-700: colors.$dodger-blue-700;
|
|
63
|
+
$info-color-600: colors.$dodger-blue-600;
|
|
64
|
+
$info-color-500: colors.$dodger-blue-500;
|
|
65
|
+
$info-color-400: colors.$dodger-blue-400;
|
|
66
|
+
$info-color-300: colors.$dodger-blue-300;
|
|
67
|
+
$info-color-200: colors.$dodger-blue-200;
|
|
68
|
+
$info-color-100: colors.$dodger-blue-100;
|
|
69
|
+
$info-color-50: colors.$dodger-blue-50;
|
|
70
|
+
$neutral-black: colors.$black-1000;
|
|
71
|
+
$neutral-white: colors.$white-1000;
|
|
@@ -25,8 +25,8 @@ const meta = {
|
|
|
25
25
|
description: 'Is the component checked?',
|
|
26
26
|
},
|
|
27
27
|
onSelect: {
|
|
28
|
-
description: 'Callback triggered when clicking on an option'
|
|
29
|
-
}
|
|
28
|
+
description: 'Callback triggered when clicking on an option',
|
|
29
|
+
},
|
|
30
30
|
},
|
|
31
31
|
parameters: figmaPrimaryDesign,
|
|
32
32
|
}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
Pagination,
|
|
5
|
+
PaginationArrow,
|
|
6
|
+
PaginationNumber,
|
|
7
|
+
Ellipsis,
|
|
8
|
+
} from '../atoms/Pagination'
|
|
4
9
|
|
|
5
10
|
const figmaPrimaryDesign = {
|
|
6
11
|
design: {
|
package/tests/svg.mock.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default function () {}
|
|
1
|
+
export default function svgMock() {}
|