@mlw-packages/react-components 1.4.1 → 1.4.2

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.
Files changed (2) hide show
  1. package/README.md +114 -114
  2. package/package.json +104 -104
package/README.md CHANGED
@@ -1,114 +1,114 @@
1
-
2
- # @mlw-packages/react-components
3
-
4
- Biblioteca de componentes React reutilizáveis, focada em acelerar o desenvolvimento de aplicações web modernas, acessíveis e com design consistente. Construída com Tailwind CSS para máxima customização, performance e escalabilidade.
5
-
6
- ---
7
-
8
- ## Instalação
9
-
10
- Instale via npm ou yarn:
11
-
12
- ```bash
13
- npm install @mlw-packages/react-components
14
- # ou
15
- yarn add @mlw-packages/react-components
16
- ```
17
-
18
- ---
19
-
20
- ## Uso Básico
21
-
22
- Importe os componentes que precisa e use direto no JSX:
23
-
24
- ```tsx
25
- import { ButtonBase, CardBase } from '@mlw-packages/react-components';
26
-
27
- export function App() {
28
- return (
29
- <CardBase>
30
- <ButtonBase>Meu botão</ButtonBase>
31
- </CardBase>
32
- );
33
- }
34
- ```
35
-
36
- ---
37
-
38
- ## Componentes Disponíveis
39
-
40
- A biblioteca oferece uma gama completa de componentes UI prontos para produção, todos estilizados com Tailwind CSS e pensados para alta acessibilidade:
41
-
42
- - **ButtonBase** — Botões com variantes e estados customizados.
43
- - **CardBase** — Containers card com estrutura padrão.
44
- - **InputBase**, **SelectBase**, **ComboboxBase** — Controles de formulário modernos.
45
- - **CheckboxBase**, **SwitchBase** — Inputs booleanos.
46
- - **TabsBase**, **TableBase**, **TooltipBase**, **DialogBase**, **DrawerBase** — Navegação e modais.
47
- - **SidebarBase**, **AvatarBase**, **CalendarBase**, **CarouselBase**, **ProgressBase**, **SkeletonBase** — Componentes utilitários e visuais.
48
- - **SonnerBase** — Sistema de notificações toast com feedback visual.
49
-
50
- > Para a lista completa, confira a pasta `src/components/ui` no código fonte.
51
-
52
- ---
53
-
54
- ## Estilos e Customização
55
-
56
- Todos os componentes são estilizados com **Tailwind CSS**. Para que funcionem corretamente, seu projeto deve estar configurado com Tailwind.
57
-
58
- Importe o CSS global para aplicar estilos base da biblioteca:
59
-
60
- ```tsx
61
- import '@mlw-packages/react-components/style/global.css';
62
- ```
63
-
64
- A arquitetura dos componentes segue as melhores práticas:
65
-
66
- - **Código limpo e DRY** para facilitar manutenção e evolução.
67
- - **Alta performance** com React 18 e otimizações internas.
68
- - **Flexibilidade** para customizar via props, classes e hooks.
69
-
70
- ---
71
-
72
- ## Data-testid para Testes Automatizados
73
-
74
- Todos os componentes aceitam **props opcionais** para customizar `data-testid` nos elementos internos, garantindo que seu time de QA consiga criar testes e2e robustos e confiáveis.
75
-
76
- Exemplo no `ComboboxBase`:
77
-
78
- ```tsx
79
- <ComboboxBase
80
- items={items}
81
- renderSelected={renderSelected}
82
- handleSelection={handleSelection}
83
- checkIsSelected={checkIsSelected}
84
- searchPlaceholder="Busque uma opção"
85
- testIds={{
86
- root: "combobox-root",
87
- trigger: "combobox-trigger",
88
- popover: "combobox-popover",
89
- option: (value) => `combobox-option-${value}`,
90
- }}
91
- />
92
- ```
93
-
94
- ---
95
-
96
- ## Documentação e Exemplos
97
-
98
- Explore exemplos completos e documentação técnica na pasta `src/pages` dentro do repositório, incluindo:
99
-
100
- - Uso avançado de componentes.
101
- - Configurações de tema e responsividade.
102
- - Exemplos de integração com testes e acessibilidade.
103
-
104
- ---
105
-
106
- ## Contribuição
107
-
108
- Contribuições são super bem-vindas!
109
-
110
- ---
111
-
112
- ## Licença
113
-
114
- MIT License — sinta-se livre para usar, modificar e distribuir.
1
+
2
+ # @mlw-packages/react-components
3
+
4
+ Biblioteca de componentes React reutilizáveis, focada em acelerar o desenvolvimento de aplicações web modernas, acessíveis e com design consistente. Construída com Tailwind CSS para máxima customização, performance e escalabilidade.
5
+
6
+ ---
7
+
8
+ ## Instalação
9
+
10
+ Instale via npm ou yarn:
11
+
12
+ ```bash
13
+ npm install @mlw-packages/react-components
14
+ # ou
15
+ yarn add @mlw-packages/react-components
16
+ ```
17
+
18
+ ---
19
+
20
+ ## Uso Básico
21
+
22
+ Importe os componentes que precisa e use direto no JSX:
23
+
24
+ ```tsx
25
+ import { ButtonBase, CardBase } from '@mlw-packages/react-components';
26
+
27
+ export function App() {
28
+ return (
29
+ <CardBase>
30
+ <ButtonBase>Meu botão</ButtonBase>
31
+ </CardBase>
32
+ );
33
+ }
34
+ ```
35
+
36
+ ---
37
+
38
+ ## Componentes Disponíveis
39
+
40
+ A biblioteca oferece uma gama completa de componentes UI prontos para produção, todos estilizados com Tailwind CSS e pensados para alta acessibilidade:
41
+
42
+ - **ButtonBase** — Botões com variantes e estados customizados.
43
+ - **CardBase** — Containers card com estrutura padrão.
44
+ - **InputBase**, **SelectBase**, **ComboboxBase** — Controles de formulário modernos.
45
+ - **CheckboxBase**, **SwitchBase** — Inputs booleanos.
46
+ - **TabsBase**, **TableBase**, **TooltipBase**, **DialogBase**, **DrawerBase** — Navegação e modais.
47
+ - **SidebarBase**, **AvatarBase**, **CalendarBase**, **CarouselBase**, **ProgressBase**, **SkeletonBase** — Componentes utilitários e visuais.
48
+ - **SonnerBase** — Sistema de notificações toast com feedback visual.
49
+
50
+ > Para a lista completa, confira a pasta `src/components/ui` no código fonte.
51
+
52
+ ---
53
+
54
+ ## Estilos e Customização
55
+
56
+ Todos os componentes são estilizados com **Tailwind CSS**. Para que funcionem corretamente, seu projeto deve estar configurado com Tailwind.
57
+
58
+ Importe o CSS global para aplicar estilos base da biblioteca:
59
+
60
+ ```tsx
61
+ import '@mlw-packages/react-components/style/global.css';
62
+ ```
63
+
64
+ A arquitetura dos componentes segue as melhores práticas:
65
+
66
+ - **Código limpo e DRY** para facilitar manutenção e evolução.
67
+ - **Alta performance** com React 18 e otimizações internas.
68
+ - **Flexibilidade** para customizar via props, classes e hooks.
69
+
70
+ ---
71
+
72
+ ## Data-testid para Testes Automatizados
73
+
74
+ Todos os componentes aceitam **props opcionais** para customizar `data-testid` nos elementos internos, garantindo que seu time de QA consiga criar testes e2e robustos e confiáveis.
75
+
76
+ Exemplo no `ComboboxBase`:
77
+
78
+ ```tsx
79
+ <ComboboxBase
80
+ items={items}
81
+ renderSelected={renderSelected}
82
+ handleSelection={handleSelection}
83
+ checkIsSelected={checkIsSelected}
84
+ searchPlaceholder="Busque uma opção"
85
+ testIds={{
86
+ root: "combobox-root",
87
+ trigger: "combobox-trigger",
88
+ popover: "combobox-popover",
89
+ option: (value) => `combobox-option-${value}`,
90
+ }}
91
+ />
92
+ ```
93
+
94
+ ---
95
+
96
+ ## Documentação e Exemplos
97
+
98
+ Explore exemplos completos e documentação técnica na pasta `src/pages` dentro do repositório, incluindo:
99
+
100
+ - Uso avançado de componentes.
101
+ - Configurações de tema e responsividade.
102
+ - Exemplos de integração com testes e acessibilidade.
103
+
104
+ ---
105
+
106
+ ## Contribuição
107
+
108
+ Contribuições são super bem-vindas!
109
+
110
+ ---
111
+
112
+ ## Licença
113
+
114
+ MIT License — sinta-se livre para usar, modificar e distribuir.
package/package.json CHANGED
@@ -1,104 +1,104 @@
1
- {
2
- "name": "@mlw-packages/react-components",
3
- "version": "1.4.1",
4
- "main": "dist/index.js",
5
- "module": "dist/index.mjs",
6
- "types": "dist/index.d.ts",
7
- "style": "dist/global.css",
8
- "files": [
9
- "dist"
10
- ],
11
- "peerDependencies": {
12
- "react": "^18.0.0",
13
- "react-dom": "^18.0.0",
14
- "react-hook-form": "^7.0.0"
15
- },
16
- "scripts": {
17
- "dev": "vite",
18
- "build": "npm run build-css && tsup",
19
- "build-css": "npx tailwindcss -i ./src/style/global.css -o ./dist/index.css --config ./tailwind.config.js",
20
- "lint": "eslint .",
21
- "preview": "vite preview",
22
- "deploy:patch": "npm version patch && npm publish",
23
- "deploy:minor": "npm version minor && npm publish",
24
- "deploy:major": "npm version major && npm publish",
25
- "prepare": "husky install",
26
- "test": "echo \"No tests yet\" && exit 0"
27
- },
28
- "lint-staged": {
29
- "*.{js,jsx,ts,tsx}": "eslint --max-warnings=0"
30
- },
31
- "dependencies": {
32
- "@hookform/resolvers": "^3.10.0",
33
- "@radix-ui/react-alert-dialog": "^1.1.5",
34
- "@radix-ui/react-avatar": "^1.1.2",
35
- "@radix-ui/react-checkbox": "^1.1.3",
36
- "@radix-ui/react-context-menu": "^2.2.15",
37
- "@radix-ui/react-dialog": "^1.1.5",
38
- "@radix-ui/react-dropdown-menu": "^2.1.5",
39
- "@radix-ui/react-hover-card": "^1.1.14",
40
- "@radix-ui/react-label": "^2.1.1",
41
- "@radix-ui/react-navigation-menu": "^1.2.13",
42
- "@radix-ui/react-popover": "^1.1.5",
43
- "@radix-ui/react-progress": "^1.1.1",
44
- "@radix-ui/react-scroll-area": "^1.2.2",
45
- "@radix-ui/react-select": "^2.1.5",
46
- "@radix-ui/react-separator": "^1.1.1",
47
- "@radix-ui/react-slider": "^1.2.2",
48
- "@radix-ui/react-slot": "^1.1.1",
49
- "@radix-ui/react-switch": "^1.1.2",
50
- "@radix-ui/react-tabs": "^1.1.2",
51
- "@radix-ui/react-toast": "^1.2.5",
52
- "@radix-ui/react-tooltip": "^1.1.7",
53
- "axios": "^1.7.9",
54
- "class-variance-authority": "^0.7.1",
55
- "clsx": "^2.1.1",
56
- "cmdk": "^1.0.4",
57
- "date-fns": "^3.6.0",
58
- "embla-carousel-react": "^8.6.0",
59
- "framer-motion": "^12.15.0",
60
- "input-otp": "^1.4.2",
61
- "next-themes": "^0.4.4",
62
- "phosphor-icons": "^1.4.2",
63
- "phosphor-react": "^1.4.1",
64
- "playwright": "^1.53.1",
65
- "react": "^18.3.1",
66
- "react-day-picker": "^8.10.0",
67
- "react-dom": "^18.3.1",
68
- "react-hook-form": "^7.54.2",
69
- "react-router-dom": "6.4",
70
- "react-toastify": "^11.0.5",
71
- "recharts": "^2.15.3",
72
- "sonner": "^1.7.4",
73
- "tailwind-merge": "^3.0.1",
74
- "tailwindcss-animate": "^1.0.7",
75
- "vaul": "^1.1.2",
76
- "zod": "^3.24.1"
77
- },
78
- "devDependencies": {
79
- "@eslint/js": "^9.19.0",
80
- "@playwright/test": "^1.53.1",
81
- "@types/jest": "^29.5.14",
82
- "@types/node": "^22.13.1",
83
- "@types/react": "^19.0.8",
84
- "@types/react-dom": "^19.0.3",
85
- "@vitejs/plugin-react": "^4.4.1",
86
- "@vitejs/plugin-react-swc": "^3.5.0",
87
- "autoprefixer": "^10.4.20",
88
- "css-loader": "^7.1.2",
89
- "eslint": "^9.19.0",
90
- "eslint-plugin-react-hooks": "^5.0.0",
91
- "eslint-plugin-react-refresh": "^0.4.18",
92
- "globals": "^15.14.0",
93
- "husky": "^8.0.0",
94
- "lint-staged": "^16.1.2",
95
- "mini-css-extract-plugin": "^2.9.2",
96
- "postcss": "^8.5.1",
97
- "style-loader": "^4.0.0",
98
- "tailwindcss": "^3.4.17",
99
- "tsup": "^8.4.0",
100
- "typescript": "~5.7.2",
101
- "typescript-eslint": "^8.22.0",
102
- "vite": "^6.1.0"
103
- }
104
- }
1
+ {
2
+ "name": "@mlw-packages/react-components",
3
+ "version": "1.4.2",
4
+ "main": "dist/index.js",
5
+ "module": "dist/index.mjs",
6
+ "types": "dist/index.d.ts",
7
+ "style": "dist/global.css",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "peerDependencies": {
12
+ "react": "^18.0.0",
13
+ "react-dom": "^18.0.0",
14
+ "react-hook-form": "^7.0.0"
15
+ },
16
+ "scripts": {
17
+ "dev": "vite",
18
+ "build": "npm run build-css && tsup",
19
+ "build-css": "npx tailwindcss -i ./src/style/global.css -o ./dist/index.css --config ./tailwind.config.js",
20
+ "lint": "eslint .",
21
+ "preview": "vite preview",
22
+ "deploy:patch": "npm version patch && npm publish",
23
+ "deploy:minor": "npm version minor && npm publish",
24
+ "deploy:major": "npm version major && npm publish",
25
+ "prepare": "if [ \"$CI\" != \"true\" ]; then husky install; fi",
26
+ "test": "echo \"No tests yet\" && exit 0"
27
+ },
28
+ "lint-staged": {
29
+ "*.{js,jsx,ts,tsx}": "eslint --max-warnings=0"
30
+ },
31
+ "dependencies": {
32
+ "@hookform/resolvers": "^3.10.0",
33
+ "@radix-ui/react-alert-dialog": "^1.1.5",
34
+ "@radix-ui/react-avatar": "^1.1.2",
35
+ "@radix-ui/react-checkbox": "^1.1.3",
36
+ "@radix-ui/react-context-menu": "^2.2.15",
37
+ "@radix-ui/react-dialog": "^1.1.5",
38
+ "@radix-ui/react-dropdown-menu": "^2.1.5",
39
+ "@radix-ui/react-hover-card": "^1.1.14",
40
+ "@radix-ui/react-label": "^2.1.1",
41
+ "@radix-ui/react-navigation-menu": "^1.2.13",
42
+ "@radix-ui/react-popover": "^1.1.5",
43
+ "@radix-ui/react-progress": "^1.1.1",
44
+ "@radix-ui/react-scroll-area": "^1.2.2",
45
+ "@radix-ui/react-select": "^2.1.5",
46
+ "@radix-ui/react-separator": "^1.1.1",
47
+ "@radix-ui/react-slider": "^1.2.2",
48
+ "@radix-ui/react-slot": "^1.1.1",
49
+ "@radix-ui/react-switch": "^1.1.2",
50
+ "@radix-ui/react-tabs": "^1.1.2",
51
+ "@radix-ui/react-toast": "^1.2.5",
52
+ "@radix-ui/react-tooltip": "^1.1.7",
53
+ "axios": "^1.7.9",
54
+ "class-variance-authority": "^0.7.1",
55
+ "clsx": "^2.1.1",
56
+ "cmdk": "^1.0.4",
57
+ "date-fns": "^3.6.0",
58
+ "embla-carousel-react": "^8.6.0",
59
+ "framer-motion": "^12.15.0",
60
+ "input-otp": "^1.4.2",
61
+ "next-themes": "^0.4.4",
62
+ "phosphor-icons": "^1.4.2",
63
+ "phosphor-react": "^1.4.1",
64
+ "playwright": "^1.53.1",
65
+ "react": "^18.3.1",
66
+ "react-day-picker": "^8.10.0",
67
+ "react-dom": "^18.3.1",
68
+ "react-hook-form": "^7.54.2",
69
+ "react-router-dom": "6.4",
70
+ "react-toastify": "^11.0.5",
71
+ "recharts": "^2.15.3",
72
+ "sonner": "^1.7.4",
73
+ "tailwind-merge": "^3.0.1",
74
+ "tailwindcss-animate": "^1.0.7",
75
+ "vaul": "^1.1.2",
76
+ "zod": "^3.24.1"
77
+ },
78
+ "devDependencies": {
79
+ "@eslint/js": "^9.19.0",
80
+ "@playwright/test": "^1.53.1",
81
+ "@types/jest": "^29.5.14",
82
+ "@types/node": "^22.13.1",
83
+ "@types/react": "^19.0.8",
84
+ "@types/react-dom": "^19.0.3",
85
+ "@vitejs/plugin-react": "^4.4.1",
86
+ "@vitejs/plugin-react-swc": "^3.5.0",
87
+ "autoprefixer": "^10.4.20",
88
+ "css-loader": "^7.1.2",
89
+ "eslint": "^9.19.0",
90
+ "eslint-plugin-react-hooks": "^5.0.0",
91
+ "eslint-plugin-react-refresh": "^0.4.18",
92
+ "globals": "^15.14.0",
93
+ "husky": "^8.0.0",
94
+ "lint-staged": "^16.1.2",
95
+ "mini-css-extract-plugin": "^2.9.2",
96
+ "postcss": "^8.5.1",
97
+ "style-loader": "^4.0.0",
98
+ "tailwindcss": "^3.4.17",
99
+ "tsup": "^8.4.0",
100
+ "typescript": "~5.7.2",
101
+ "typescript-eslint": "^8.22.0",
102
+ "vite": "^6.1.0"
103
+ }
104
+ }