@sinco/react 1.0.11-rc.0 → 1.0.11-rc.10
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/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';
|