@sinco/react 1.0.7-rc.6 → 1.0.7-rc.8
Sign up to get free protection for your applications and to get access to all the features.
- package/assets/sinco-icons.svg +146 -0
- package/index.js +2210 -9299
- package/package.json +1 -1
- package/src/lib/Components/EmptyState.d.ts +15 -0
- package/src/lib/Components/index.d.ts +1 -3
- package/src/lib/Theme/components.d.ts +0 -10
- package/src/lib/Theme/index.d.ts +14 -0
- package/src/lib/Theme/typography.d.ts +0 -14
- package/README.md +0 -53
- package/src/lib/Components/Drawer/Drawer.d.ts +0 -11
- package/src/lib/Components/ToastNotification/ToastNofitication.d.ts +0 -24
- package/src/lib/Components/pageHeader/PageHeader.d.ts +0 -15
package/package.json
CHANGED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface EmptyStateProperties {
|
|
3
|
+
state?: States;
|
|
4
|
+
title?: string;
|
|
5
|
+
content?: string;
|
|
6
|
+
actions?: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export type States = 'create' | 'error' | 'noresult' | 'search';
|
|
9
|
+
export declare enum UrlImage {
|
|
10
|
+
error = "assets/images/error.svg#error",
|
|
11
|
+
search = "assets/images/search.svg#search",
|
|
12
|
+
noresult = "assets/images/noresult.svg#noresult",
|
|
13
|
+
create = "assets/images/create.svg#create"
|
|
14
|
+
}
|
|
15
|
+
export declare const EmptyState: ({ state, title, content, actions, }: EmptyStateProperties) => JSX.Element;
|
|
@@ -1,13 +1,3 @@
|
|
|
1
1
|
import { Components } from '@mui/material';
|
|
2
|
-
declare module '@mui/material/Chip' {
|
|
3
|
-
interface ChipPropsSizeOverrides {
|
|
4
|
-
xsmall: true;
|
|
5
|
-
}
|
|
6
|
-
}
|
|
7
|
-
declare module "@mui/material/Checkbox" {
|
|
8
|
-
interface CheckboxPropsSizeOverrides {
|
|
9
|
-
xsmall: true;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
2
|
declare const components: Components;
|
|
13
3
|
export default components;
|
package/src/lib/Theme/index.d.ts
CHANGED
|
@@ -1 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare module "@mui/material/styles" {
|
|
3
|
+
interface TypographyVariants {
|
|
4
|
+
body3: React.CSSProperties;
|
|
5
|
+
}
|
|
6
|
+
interface TypographyVariantsOptions {
|
|
7
|
+
body3?: React.CSSProperties;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
declare module "@mui/material/Typography" {
|
|
11
|
+
interface TypographyPropsVariantOverrides {
|
|
12
|
+
body3: true;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
1
15
|
export declare const SincoTheme: import("@mui/material/styles").Theme;
|
|
@@ -1,17 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { TypographyOptions } from '@mui/material/styles/createTypography';
|
|
3
|
-
declare module '@mui/material/styles' {
|
|
4
|
-
interface TypographyVariants {
|
|
5
|
-
body3: React.CSSProperties;
|
|
6
|
-
}
|
|
7
|
-
interface TypographyVariantsOptions {
|
|
8
|
-
body3?: React.CSSProperties;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
declare module '@mui/material/Typography' {
|
|
12
|
-
interface TypographyPropsVariantOverrides {
|
|
13
|
-
body3: true;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
2
|
declare const typography: TypographyOptions;
|
|
17
3
|
export default typography;
|
package/README.md
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
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
|
-
<br/>
|
|
23
|
-
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 :
|
|
24
|
-
|
|
25
|
-
## Roboto
|
|
26
|
-
|
|
27
|
-
import '@fontsource/roboto/400.css';
|
|
28
|
-
<br/>
|
|
29
|
-
import '@fontsource/roboto/500.css';
|
|
30
|
-
## Nunito
|
|
31
|
-
import '@fontsource/nunito/300.css';
|
|
32
|
-
<br/>
|
|
33
|
-
import '@fontsource/nunito/400.css';
|
|
34
|
-
<br/>
|
|
35
|
-
import '@fontsource/nunito/500.css';
|
|
36
|
-
<br/>
|
|
37
|
-
import '@fontsource/nunito/600.css';
|
|
38
|
-
|
|
39
|
-
## Icons
|
|
40
|
-
|
|
41
|
-
Para usar el `Iconcomponent` de fuente, primero debe agregar la fuente [Material Icons](https://mui.com/material-ui/getting-started/installation/#icons).
|
|
42
|
-
|
|
43
|
-
## Como utilizar
|
|
44
|
-
|
|
45
|
-
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)
|
|
46
|
-
|
|
47
|
-
## Más información
|
|
48
|
-
|
|
49
|
-
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/)
|
|
50
|
-
|
|
51
|
-
## Recomendaciones
|
|
52
|
-
|
|
53
|
-
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)
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode } from "react";
|
|
2
|
-
export type Anchor = "left" | "right";
|
|
3
|
-
export interface DrawerComponentProps {
|
|
4
|
-
titulo: string;
|
|
5
|
-
children: ReactNode;
|
|
6
|
-
acciones: ReactNode;
|
|
7
|
-
open: boolean;
|
|
8
|
-
onClose: () => void;
|
|
9
|
-
anchor?: Anchor;
|
|
10
|
-
}
|
|
11
|
-
export declare const DrawerComponent: React.FC<DrawerComponentProps>;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { ReactElement } from "react";
|
|
2
|
-
import React from "react";
|
|
3
|
-
export interface Option {
|
|
4
|
-
}
|
|
5
|
-
export interface Toast {
|
|
6
|
-
type?: string;
|
|
7
|
-
subtitle?: string;
|
|
8
|
-
time?: number | any;
|
|
9
|
-
title?: string;
|
|
10
|
-
dataOpt?: Option[];
|
|
11
|
-
actions?: React.ReactNode;
|
|
12
|
-
seeMore?: boolean;
|
|
13
|
-
position?: string;
|
|
14
|
-
}
|
|
15
|
-
export interface IconMap {
|
|
16
|
-
[key: string]: ReactElement;
|
|
17
|
-
}
|
|
18
|
-
export interface ColorMap {
|
|
19
|
-
[key: string]: "success" | "error" | "warning" | "info";
|
|
20
|
-
}
|
|
21
|
-
export interface position {
|
|
22
|
-
[key: string]: "center" | "end" | "start";
|
|
23
|
-
}
|
|
24
|
-
export declare const ToastNotification: (toast: Toast) => JSX.Element;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
interface BreadcrumbCode {
|
|
3
|
-
link: string;
|
|
4
|
-
name: string;
|
|
5
|
-
}
|
|
6
|
-
interface Pageheader {
|
|
7
|
-
back?: React.ReactNode;
|
|
8
|
-
title?: string;
|
|
9
|
-
subtitle?: string;
|
|
10
|
-
breadcrumbs?: BreadcrumbCode[];
|
|
11
|
-
actions?: React.ReactNode;
|
|
12
|
-
tabs?: React.ReactNode;
|
|
13
|
-
}
|
|
14
|
-
declare const PageHeader: (page: Pageheader) => JSX.Element;
|
|
15
|
-
export default PageHeader;
|