@sinco/react 1.0.2-rc.23 → 1.0.2-rc.25
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 +50 -0
- package/index.css +0 -1
- package/index.js +1 -2
- package/package.json +1 -1
- package/src/index.d.ts +0 -1
- package/src/lib/toastNotification/interfaces.d.ts +1 -1
- package/main.css +0 -1
package/README.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# @sinco/react
|
|
2
|
+
|
|
3
|
+
Paquete de sinco react
|
|
4
|
+
|
|
5
|
+
## Cómo empezar
|
|
6
|
+
|
|
7
|
+
npm i @sinco/react
|
|
8
|
+
|
|
9
|
+
## Pre-requisitos
|
|
10
|
+
|
|
11
|
+
Asegúrate de tener instalado React en la versión 18. También, es necesario instalar Material-UI React. Puedes encontrar las instrucciones de instalación en el siguiente enlace:
|
|
12
|
+
https://mui.com/material-ui/getting-started/installation/
|
|
13
|
+
|
|
14
|
+
## Fuentes web de Google
|
|
15
|
+
|
|
16
|
+
Puedes utilizar fuentes de Google Web Fonts en tu proyecto. Para hacerlo, agrega el siguiente fragmento de código dentro de la etiqueta <head> de tu proyecto:
|
|
17
|
+
|
|
18
|
+
` <link
|
|
19
|
+
rel="stylesheet"
|
|
20
|
+
href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&family=Roboto:wght@300;400;500;700&display=swap"
|
|
21
|
+
/>`
|
|
22
|
+
Otra opción es instalar las fuentes Roboto y Nunito desde npm utilizando los paquetes O ya sea instalando las fuentes [@fontsource/roboto](https://www.npmjs.com/package/@fontsource/roboto) y [@fontsource/nunito](https://www.npmjs.com/package/@fontsource/nunito) en su archivo index.tsx, los fontsource son que se necesitan son :
|
|
23
|
+
|
|
24
|
+
## Roboto
|
|
25
|
+
|
|
26
|
+
import '@fontsource/roboto/400.css';
|
|
27
|
+
import '@fontsource/roboto/500.css';
|
|
28
|
+
|
|
29
|
+
## Nunito
|
|
30
|
+
|
|
31
|
+
import '@fontsource/nunito/300.css';
|
|
32
|
+
import '@fontsource/nunito/400.css';
|
|
33
|
+
import '@fontsource/nunito/500.css';
|
|
34
|
+
import '@fontsource/nunito/600.css';
|
|
35
|
+
|
|
36
|
+
## Icons
|
|
37
|
+
|
|
38
|
+
Para usar el `Iconcomponent` de fuente, primero debe agregar la fuente [Material Icons](https://mui.com/material-ui/getting-started/installation/#icons).
|
|
39
|
+
|
|
40
|
+
## Como utilizar
|
|
41
|
+
|
|
42
|
+
Para utilizar el tema personalizado de sinco react, debes envolver tu aplicación con el componente `ThemeProvider` de Material-UI y proporcionar la variable `SincoTheme` como valor del prop `theme` en el [ThemeProvider](https://mui.com/material-ui/customization/theming/#theme-provider)
|
|
43
|
+
|
|
44
|
+
## Más información
|
|
45
|
+
|
|
46
|
+
Puedes encontrar más información sobre cómo utilizar React y Material-UI en la documentación oficial: -[React](https://reactnative.dev/) -[Material-UI](https://mui.com/material-ui/getting-started/)
|
|
47
|
+
|
|
48
|
+
## Recomendaciones
|
|
49
|
+
|
|
50
|
+
Este paquete utiliza Data [Data grid pro](https://mui.com/x/react-data-grid/) para su tema personalizado. Si deseas utilizarlo, se recomienda instalar el paquete npm [@mui/x-data-grid.](https://www.npmjs.com/package/@mui/x-data-grid-pro)
|
package/index.css
CHANGED
package/index.js
CHANGED
|
@@ -12969,7 +12969,7 @@ const ToastNotification = toast => {
|
|
|
12969
12969
|
success: 'success',
|
|
12970
12970
|
error: 'error',
|
|
12971
12971
|
warning: 'warning',
|
|
12972
|
-
info: '
|
|
12972
|
+
info: 'info'
|
|
12973
12973
|
};
|
|
12974
12974
|
const colors = colorMap[toast.type || 'info'];
|
|
12975
12975
|
const close = () => {
|
|
@@ -12993,7 +12993,6 @@ const ToastNotification = toast => {
|
|
|
12993
12993
|
clearInterval(interval || toast.time);
|
|
12994
12994
|
};
|
|
12995
12995
|
}, [timeProgress, toast.time]);
|
|
12996
|
-
console.log(progress);
|
|
12997
12996
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ThemeProvider, {
|
|
12998
12997
|
theme: SincoTheme
|
|
12999
12998
|
}, openToast && /*#__PURE__*/React__default.createElement(Paper$1, {
|
package/package.json
CHANGED
package/src/index.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export * from './lib/Theme';
|
|
2
|
-
import '../src/lib/styles/main.css';
|
|
3
2
|
export { default as ToastNotification } from './lib/toastNotification/ToastNotification';
|
|
4
3
|
export * from './lib/toastNotification/ToastNotification';
|
|
5
4
|
export * from './lib/toastNotification/interfaces';
|
package/main.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import './toastNotification.css'
|