@sinco/react 1.0.2-rc.23 → 1.0.2-rc.25
Sign up to get free protection for your applications and to get access to all the features.
- 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'
|