@producteca/producteca-ui-kit 1.28.2-beta.2 → 1.29.0-beta.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.
package/README.md
CHANGED
|
@@ -6,8 +6,9 @@
|
|
|
6
6
|
|
|
7
7
|
- 🔹 [Node 22](https://nodejs.org/)
|
|
8
8
|
- ⚛️ [React 18](https://reactjs.org/)
|
|
9
|
-
- 📚 [Storybook
|
|
9
|
+
- 📚 [Storybook 9](https://storybook.js.org/) - Components preview
|
|
10
10
|
- ⏩ [Vite](https://vitejs.dev/) - Run and build the project blazingly fast!
|
|
11
|
+
- 🔧 [Babel](https://babeljs.io/) - JavaScript transpilation for maximum browser compatibility
|
|
11
12
|
- ⚡ [Vitest](https://vitest.dev/) - Components Unit Testing
|
|
12
13
|
- 📐 [ESLint](https://eslint.org/) & [Prettier](https://prettier.io/) - Formatting and Linting
|
|
13
14
|
- 🌟 [Typescript](https://www.typescriptlang.org/)
|
|
@@ -18,8 +19,8 @@
|
|
|
18
19
|
## Main Scripts
|
|
19
20
|
|
|
20
21
|
- `dev`: Starts Storybook in development mode on port 6006.
|
|
21
|
-
- `build`:
|
|
22
|
-
- `build:
|
|
22
|
+
- `build`: Removes the `dist` folder, compiles TypeScript, builds the library using Vite, and transpiles with Babel for maximum browser compatibility.
|
|
23
|
+
- `build:storybook`: Builds the static Storybook project.
|
|
23
24
|
- `deploy`: Deploys the project using the specified Makefile configuration.
|
|
24
25
|
- `lint`: Runs ESLint to lint and fix issues in files with `.js`, `.jsx`, `.ts`, and `.tsx` extensions.
|
|
25
26
|
- `prettier`: Formats files in the `src` folder with extensions `.ts`, `.tsx`, `.js`, and `.mdx` using Prettier.
|
|
@@ -29,6 +30,21 @@
|
|
|
29
30
|
- `pre-commit`: Installs Husky and sets up Git hooks for pre-commit validation.
|
|
30
31
|
- `build-storybook`: Builds the static Storybook project.
|
|
31
32
|
|
|
33
|
+
## 🌐 Browser Compatibility
|
|
34
|
+
|
|
35
|
+
Este proyecto utiliza **Babel** para transpilar el código JavaScript/TypeScript, garantizando compatibilidad con:
|
|
36
|
+
|
|
37
|
+
- **Navegadores modernos**: Chrome, Firefox, Safari, Edge (últimas 2 versiones)
|
|
38
|
+
- **Navegadores legacy**: Internet Explorer 11+
|
|
39
|
+
- **Dispositivos móviles**: iOS Safari, Chrome Mobile, Samsung Internet
|
|
40
|
+
- **Cobertura global**: >0.25% de usuarios, excluyendo navegadores obsoletos
|
|
41
|
+
|
|
42
|
+
La configuración de Babel incluye:
|
|
43
|
+
- `@babel/preset-env` para transpilación automática según el target
|
|
44
|
+
- `@babel/preset-react` para sintaxis JSX
|
|
45
|
+
- `@babel/preset-typescript` para TypeScript
|
|
46
|
+
- Plugins adicionales para características modernas de JavaScript
|
|
47
|
+
|
|
32
48
|
### Setting up `@producteca/producteca-ui-kit`
|
|
33
49
|
|
|
34
50
|
Follow these steps to integrate and configure the `@producteca/producteca-ui-kit` package in your project:
|
|
@@ -65,22 +81,6 @@ Follow these steps to integrate and configure the `@producteca/producteca-ui-kit
|
|
|
65
81
|
import { SelectField, CheckboxInput /* other components */ } from '@producteca/producteca-ui-kit'
|
|
66
82
|
```
|
|
67
83
|
|
|
68
|
-
4. **Node 12 Compatibility**
|
|
69
|
-
If you're using Node 12 in your project, you'll need to update your Babel configuration to ensure compatibility. Follow these steps:
|
|
70
|
-
|
|
71
|
-
- Update your Babel dependencies to the following versions:
|
|
72
|
-
```json
|
|
73
|
-
{
|
|
74
|
-
"devDependencies": {
|
|
75
|
-
"@babel/core": "^7.23.9",
|
|
76
|
-
"@babel/preset-env": "^7.23.9",
|
|
77
|
-
"@babel/preset-react": "^7.23.3",
|
|
78
|
-
"@babel/preset-typescript": "^7.23.3"
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
```
|
|
82
|
-
- For a complete example of how to implement these changes, refer to this pull request: [Shopify Babel Update Example](https://github.com/Parsimotion/shopify/pull/290)
|
|
83
|
-
|
|
84
84
|
## 📦 Publishing a New Version
|
|
85
85
|
|
|
86
86
|
Package publishing is now handled automatically via a GitHub Action triggered on `push` to the `main` or `master` branches.
|
|
@@ -3,4 +3,4 @@ import { MenuProps } from '@mui/material/Menu';
|
|
|
3
3
|
export declare const StyledMenu: import('@emotion/styled').StyledComponent<MenuProps & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, {}, {}>;
|
|
4
4
|
export declare const StyledButton: import('@emotion/styled').StyledComponent<import('@mui/material/Button').ButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
5
5
|
ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
|
|
6
|
-
}, "variant" | "size" | "className" | "disabled" | "children" | "color" | "style" | "classes" | "sx" | "tabIndex" | "href" | "action" | "loading" | "loadingIndicator" | "
|
|
6
|
+
}, "variant" | "size" | "className" | "disabled" | "children" | "color" | "style" | "classes" | "sx" | "tabIndex" | "href" | "action" | "loading" | "loadingIndicator" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableFocusRipple" | "disableElevation" | "endIcon" | "loadingPosition" | "startIcon"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, {}, {}>;
|