@sinco/react 1.0.0-rc.0 → 1.0.0
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 +36 -4
- package/index.js +26 -8
- package/package.json +1 -1
package/README.md
CHANGED
@@ -1,7 +1,39 @@
|
|
1
|
-
# react
|
1
|
+
# @sinco/react
|
2
|
+
|
3
|
+
Paquete de sinco react
|
4
|
+
|
5
|
+
## Cómo empezar
|
6
|
+
npm i @sinco/react
|
7
|
+
|
8
|
+
## Pre-requisitos
|
9
|
+
|
10
|
+
React en la versión 18
|
11
|
+
Instalar mui react
|
12
|
+
https://mui.com/material-ui/getting-started/installation/
|
13
|
+
|
14
|
+
|
15
|
+
## Fuentes web de Google
|
16
|
+
Para instalar la fuente en su proyecto usando la CDN de Google Web Fonts, agregue el siguiente fragmento de código dentro de la <head />etiqueta de su 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
|
+
Para usar el Iconcomponent de fuente, primero debe agregar la fuente Material Icons .
|
23
|
+
<link
|
24
|
+
rel="stylesheet"
|
25
|
+
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
26
|
+
/>
|
27
|
+
|
28
|
+
## Como utilizar
|
29
|
+
Para poder utilizar el tema personalizado de sinco react, solo debes colocar la variable "SincoTheme" en el themeProvider
|
30
|
+
<ThemeProvider theme={SincoTheme}>
|
31
|
+
|
32
|
+
## Más información
|
33
|
+
|
34
|
+
Para tener más información de como utilizar react mui
|
35
|
+
|
36
|
+
https://mui.com/material-ui/getting-started/overview/
|
2
37
|
|
3
|
-
This library was generated with [Nx](https://nx.dev).
|
4
38
|
|
5
|
-
## Running unit tests
|
6
39
|
|
7
|
-
Run `nx test react` to execute the unit tests via [Jest](https://jestjs.io).
|
package/index.js
CHANGED
@@ -4354,7 +4354,7 @@ const Componentes = {
|
|
4354
4354
|
MuiDialogContent: {
|
4355
4355
|
styleOverrides: {
|
4356
4356
|
root: {
|
4357
|
-
paddingTop:
|
4357
|
+
paddingTop: 8,
|
4358
4358
|
paddingBottom: 8
|
4359
4359
|
}
|
4360
4360
|
}
|
@@ -4362,13 +4362,16 @@ const Componentes = {
|
|
4362
4362
|
MuiChip: {
|
4363
4363
|
defaultProps: {
|
4364
4364
|
size: "small"
|
4365
|
-
}
|
4365
|
+
}
|
4366
|
+
},
|
4367
|
+
MuiAlert: {
|
4366
4368
|
styleOverrides: {
|
4367
|
-
sizeSmall: {
|
4368
|
-
height: 24
|
4369
|
-
},
|
4370
4369
|
root: {
|
4371
|
-
|
4370
|
+
boxShadow: "0px 0px 1px rgba(0,0,0,.7)",
|
4371
|
+
paddingY: .5,
|
4372
|
+
paddingX: 2,
|
4373
|
+
alignItems: "center",
|
4374
|
+
border: "none"
|
4372
4375
|
}
|
4373
4376
|
}
|
4374
4377
|
},
|
@@ -4394,6 +4397,11 @@ const Componentes = {
|
|
4394
4397
|
}
|
4395
4398
|
}
|
4396
4399
|
},
|
4400
|
+
MuiButtonGroup: {
|
4401
|
+
defaultProps: {
|
4402
|
+
size: "small"
|
4403
|
+
}
|
4404
|
+
},
|
4397
4405
|
MuiCheckbox: {
|
4398
4406
|
defaultProps: {
|
4399
4407
|
size: "small"
|
@@ -4469,6 +4477,14 @@ const Componentes = {
|
|
4469
4477
|
margin: "dense"
|
4470
4478
|
}
|
4471
4479
|
},
|
4480
|
+
MuiSvgIcon: {
|
4481
|
+
styleOverrides: {
|
4482
|
+
fontSizeSmall: {
|
4483
|
+
width: "1rem",
|
4484
|
+
height: "1rem"
|
4485
|
+
}
|
4486
|
+
}
|
4487
|
+
},
|
4472
4488
|
MuiIconButton: {
|
4473
4489
|
styleOverrides: {
|
4474
4490
|
sizeSmall: {
|
@@ -4648,7 +4664,7 @@ const Typography = {
|
|
4648
4664
|
},
|
4649
4665
|
overline: {
|
4650
4666
|
fontFamily: "Roboto",
|
4651
|
-
fontSize:
|
4667
|
+
fontSize: 11,
|
4652
4668
|
fontWeight: 400,
|
4653
4669
|
letterSpacing: 1,
|
4654
4670
|
lineHeight: 2.66
|
@@ -4693,9 +4709,11 @@ const Typography = {
|
|
4693
4709
|
lineHeight: 1.4
|
4694
4710
|
},
|
4695
4711
|
button: {
|
4712
|
+
fontFamily: "Roboto",
|
4696
4713
|
textTransform: "unset",
|
4697
4714
|
fontWeightLight: 300,
|
4698
|
-
fontSize: 13
|
4715
|
+
fontSize: 13,
|
4716
|
+
lineHeight: "normal"
|
4699
4717
|
}
|
4700
4718
|
};
|
4701
4719
|
const typography = Typography;
|