@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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sinco/react",
3
- "version": "1.0.11-rc.0",
3
+ "version": "1.0.11-rc.10",
4
4
  "description": "package for the configuration of mui react sinco",
5
5
  "private": false,
6
6
  "license": "MIT",
package/src/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export * from './lib/Theme';
2
+ export * from './lib/Components';
3
+ export * from './lib/Hooks';
4
+ export * from './lib/Utils';
@@ -1,11 +1,13 @@
1
1
  import { ReactNode } from 'react';
2
- export type Anchor = 'left' | 'right';
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: ({ open, onClose, anchor, title, content, actions, }: DrawerComponentProperties) => JSX.Element;
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?: EmptyStateStates;
3
+ state?: States;
4
4
  title?: string;
5
5
  content?: string;
6
6
  actions?: ReactNode;
7
7
  }
8
- export type EmptyStateStates = 'create' | 'error' | 'noResult' | 'search';
9
- export declare enum EmptyStateImageUrls {
8
+ export type States = 'create' | 'error' | 'noresult' | 'search';
9
+ export declare enum UrlImage {
10
10
  error = "error",
11
11
  search = "search",
12
- noResult = "noResult",
12
+ noresult = "noresult",
13
13
  create = "create"
14
14
  }
15
- export declare const EmptyStateComponent: ({ state, title, content, actions, }: EmptyStateProperties) => JSX.Element;
15
+ export declare const EmptyState: ({ state, title, content, actions, }: EmptyStateProperties) => JSX.Element;
@@ -0,0 +1,2 @@
1
+ export * from './EmptyState';
2
+ export * from './Drawer';
@@ -0,0 +1 @@
1
+ export * from './useDynamicColor';
@@ -0,0 +1,3 @@
1
+ export declare const useDynamicColor: (url: string) => {
2
+ loading: boolean;
3
+ };
@@ -1,2 +1,3 @@
1
1
  import { Breakpoints } from '@mui/material';
2
- export declare const breakpoints: Breakpoints;
2
+ declare const breakpoints: Breakpoints;
3
+ export default breakpoints;
@@ -1,12 +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
- 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,2 +1,3 @@
1
1
  import { Mixins } from '@mui/material';
2
- export declare const mixins: Mixins;
2
+ declare const mixins: Mixins;
3
+ export default mixins;
@@ -1,2 +1,3 @@
1
1
  import { PaletteOptions } from '@mui/material';
2
- export declare const palette: PaletteOptions;
2
+ declare const palette: PaletteOptions;
3
+ export default palette;
@@ -1,2 +1,3 @@
1
1
  import { Shadows } from '@mui/material/styles/shadows';
2
- export declare const shadows: Shadows;
2
+ declare const shadows: Shadows;
3
+ export default shadows;
@@ -1,16 +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
- 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 DynamicColor: (src: string) => Promise<{
2
+ declare const dynamicColor: (src: string) => Promise<{
3
3
  primaryColor: PaletteColor;
4
4
  secondaryColor: PaletteColor;
5
5
  backgroundColor: TypeBackground;
6
6
  }>;
7
- export default DynamicColor;
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,4 +0,0 @@
1
- export * from './lib/Theme/Index';
2
- export * from './lib/Components/Index';
3
- export * from './lib/Hooks/Index';
4
- export * from './lib/Utils/Index';
@@ -1,4 +0,0 @@
1
- export * from './EmptyState';
2
- export * from './Drawer';
3
- export * from './ToastNofitication';
4
- export * from './PageHeader';
@@ -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;
@@ -1 +0,0 @@
1
- export * from './UseDynamicColor';
@@ -1,3 +0,0 @@
1
- export declare const UseDynamicColor: (url: string) => {
2
- loading: boolean;
3
- };
@@ -1 +0,0 @@
1
- export declare const SincoTheme: import("@mui/material/styles").Theme;
@@ -1 +0,0 @@
1
- export * from './DynamicColor';