@sinco/react 1.0.11-rc.0 → 1.0.11-rc.10
Sign up to get free protection for your applications and to get access to all the features.
- package/index.js +414 -1735
- package/package.json +1 -1
- package/src/index.d.ts +4 -0
- package/src/lib/Components/Drawer.d.ts +8 -6
- package/src/lib/Components/EmptyState.d.ts +5 -5
- package/src/lib/Components/index.d.ts +2 -0
- package/src/lib/Hooks/index.d.ts +1 -0
- package/src/lib/Hooks/useDynamicColor.d.ts +3 -0
- package/src/lib/Theme/breakpoints.d.ts +2 -1
- package/src/lib/Theme/components.d.ts +2 -11
- package/src/lib/Theme/index.d.ts +15 -0
- package/src/lib/Theme/mixins.d.ts +2 -1
- package/src/lib/Theme/palette.d.ts +2 -1
- package/src/lib/Theme/shadows.d.ts +2 -1
- package/src/lib/Theme/typography.d.ts +2 -15
- package/src/lib/Utils/{DynamicColor.d.ts → dynamicColor.d.ts} +2 -2
- package/src/lib/Utils/index.d.ts +1 -0
- package/README.md +0 -57
- package/src/Index.d.ts +0 -4
- package/src/lib/Components/Index.d.ts +0 -4
- package/src/lib/Components/PageHeader.d.ts +0 -19
- package/src/lib/Components/ToastNofitication.d.ts +0 -19
- package/src/lib/Hooks/Index.d.ts +0 -1
- package/src/lib/Hooks/UseDynamicColor.d.ts +0 -3
- package/src/lib/Theme/Index.d.ts +0 -1
- package/src/lib/Utils/Index.d.ts +0 -1
package/package.json
CHANGED
package/src/index.d.ts
ADDED
@@ -1,11 +1,13 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
-
export type
|
2
|
+
export type handleDrawerPosition = 'left' | 'right';
|
3
3
|
export interface DrawerComponentProperties {
|
4
|
+
title: string;
|
5
|
+
children: ReactNode;
|
6
|
+
renderActions: ReactNode;
|
7
|
+
showActions?: boolean;
|
8
|
+
position?: handleDrawerPosition;
|
9
|
+
width: string;
|
4
10
|
open: boolean;
|
5
11
|
onClose: () => void;
|
6
|
-
anchor?: Anchor;
|
7
|
-
title: string;
|
8
|
-
content: ReactNode;
|
9
|
-
actions: ReactNode;
|
10
12
|
}
|
11
|
-
export declare const DrawerComponent: ({
|
13
|
+
export declare const DrawerComponent: ({ title, children, renderActions, showActions, position, width, open, onClose, }: DrawerComponentProperties) => JSX.Element;
|
@@ -1,15 +1,15 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
2
|
export interface EmptyStateProperties {
|
3
|
-
state?:
|
3
|
+
state?: States;
|
4
4
|
title?: string;
|
5
5
|
content?: string;
|
6
6
|
actions?: ReactNode;
|
7
7
|
}
|
8
|
-
export type
|
9
|
-
export declare enum
|
8
|
+
export type States = 'create' | 'error' | 'noresult' | 'search';
|
9
|
+
export declare enum UrlImage {
|
10
10
|
error = "error",
|
11
11
|
search = "search",
|
12
|
-
|
12
|
+
noresult = "noresult",
|
13
13
|
create = "create"
|
14
14
|
}
|
15
|
-
export declare const
|
15
|
+
export declare const EmptyState: ({ state, title, content, actions, }: EmptyStateProperties) => JSX.Element;
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './useDynamicColor';
|
@@ -1,12 +1,3 @@
|
|
1
1
|
import { Components } from '@mui/material';
|
2
|
-
declare
|
3
|
-
|
4
|
-
xsmall: true;
|
5
|
-
}
|
6
|
-
}
|
7
|
-
declare module "@mui/material/Checkbox" {
|
8
|
-
interface CheckboxPropsSizeOverrides {
|
9
|
-
xsmall: true;
|
10
|
-
}
|
11
|
-
}
|
12
|
-
export declare const components: Components;
|
2
|
+
declare const components: Components;
|
3
|
+
export default components;
|
@@ -0,0 +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
|
+
}
|
15
|
+
export declare const SincoTheme: import("@mui/material/styles").Theme;
|
@@ -1,16 +1,3 @@
|
|
1
|
-
/// <reference types="react" />
|
2
1
|
import { TypographyOptions } from '@mui/material/styles/createTypography';
|
3
|
-
declare
|
4
|
-
|
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
|
-
export declare const typography: TypographyOptions;
|
2
|
+
declare const typography: TypographyOptions;
|
3
|
+
export default typography;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { PaletteColor, TypeBackground } from "@mui/material";
|
2
|
-
declare const
|
2
|
+
declare const dynamicColor: (src: string) => Promise<{
|
3
3
|
primaryColor: PaletteColor;
|
4
4
|
secondaryColor: PaletteColor;
|
5
5
|
backgroundColor: TypeBackground;
|
6
6
|
}>;
|
7
|
-
export default
|
7
|
+
export default dynamicColor;
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './dynamicColor';
|
package/README.md
DELETED
@@ -1,57 +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
|
-
|
31
|
-
## Nunito
|
32
|
-
|
33
|
-
import '@fontsource/nunito/300.css';
|
34
|
-
<br/>
|
35
|
-
import '@fontsource/nunito/400.css';
|
36
|
-
<br/>
|
37
|
-
import '@fontsource/nunito/500.css';
|
38
|
-
<br/>
|
39
|
-
import '@fontsource/nunito/600.css';
|
40
|
-
|
41
|
-
## Icons
|
42
|
-
|
43
|
-
Para usar el `Iconcomponent` de fuente, primero debe agregar la fuente [Material Icons](https://mui.com/material-ui/getting-started/installation/#icons).
|
44
|
-
|
45
|
-
## Como utilizar
|
46
|
-
|
47
|
-
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)
|
48
|
-
|
49
|
-
## Más información
|
50
|
-
|
51
|
-
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/)
|
52
|
-
|
53
|
-
## Requerimientos
|
54
|
-
|
55
|
-
Data grid pro: [Data grid pro](https://mui.com/x/react-data-grid/) Instalar npm [@mui/x-data-grid.](https://www.npmjs.com/package/@mui/x-data-grid-pro)
|
56
|
-
|
57
|
-
Dynamic Color: Instalar [@material/material-color-utilities](https://github.com/material-foundation/material-color-utilities/blob/main/typescript/README.md)
|
package/src/Index.d.ts
DELETED
@@ -1,19 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
export declare const PageHeaderContent: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
|
3
|
-
children?: React.ReactNode;
|
4
|
-
direction?: import("@mui/system").ResponsiveStyleValue<"column" | "column-reverse" | "row" | "row-reverse"> | undefined;
|
5
|
-
spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
|
6
|
-
divider?: React.ReactNode;
|
7
|
-
useFlexGap?: boolean | undefined;
|
8
|
-
sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
|
9
|
-
} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
10
|
-
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
11
|
-
}, keyof import("@mui/material/OverridableComponent").CommonProps | "direction" | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "spacing" | "divider" | "useFlexGap" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
12
|
-
interface PageheaderProperties {
|
13
|
-
title?: string;
|
14
|
-
subtitle?: string;
|
15
|
-
actions?: React.ReactNode;
|
16
|
-
buttonBack?: React.ReactNode;
|
17
|
-
}
|
18
|
-
export declare const PageHeaderComponent: ({ title, subtitle, actions, buttonBack, }: PageheaderProperties) => JSX.Element;
|
19
|
-
export {};
|
@@ -1,19 +0,0 @@
|
|
1
|
-
import React, { ReactElement } from 'react';
|
2
|
-
export interface Option {
|
3
|
-
}
|
4
|
-
export interface ToastNotificationProperties {
|
5
|
-
type?: string;
|
6
|
-
time?: number | any;
|
7
|
-
title?: string;
|
8
|
-
subtitle?: string;
|
9
|
-
dataOpt?: Option[];
|
10
|
-
actions?: React.ReactNode;
|
11
|
-
seeMore?: boolean;
|
12
|
-
}
|
13
|
-
export interface handleChangeToastIcon {
|
14
|
-
[key: string]: ReactElement;
|
15
|
-
}
|
16
|
-
export interface handleToastColor {
|
17
|
-
[key: string]: 'success' | 'error' | 'warning' | 'info';
|
18
|
-
}
|
19
|
-
export declare const ToastNotification: (toast: ToastNotificationProperties) => JSX.Element;
|
package/src/lib/Hooks/Index.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './UseDynamicColor';
|
package/src/lib/Theme/Index.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export declare const SincoTheme: import("@mui/material/styles").Theme;
|
package/src/lib/Utils/Index.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './DynamicColor';
|