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