@grazziotin/react-components 1.0.0

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.
@@ -0,0 +1,106 @@
1
+ export declare const sxTextField: {
2
+ '& label.Mui-focused': {
3
+ color: string;
4
+ };
5
+ '& .MuiFormHelperText-root': {
6
+ margin: string;
7
+ };
8
+ '& .MuiInput-underline:after': {
9
+ borderBottomColor: string;
10
+ };
11
+ '& .MuiOutlinedInput-root': {
12
+ '& fieldset': {
13
+ borderColor: string;
14
+ };
15
+ '&:hover fieldset': {
16
+ borderColor: string;
17
+ };
18
+ '&.Mui-focused fieldset': {
19
+ borderColor: string;
20
+ };
21
+ };
22
+ '& .MuiOutlinedInput-root.Mui-disabled': {
23
+ '& fieldset': {
24
+ borderColor: string;
25
+ };
26
+ '& .MuiOutlinedInput-notchedOutline': {
27
+ borderColor: string;
28
+ };
29
+ '& .MuiAutocomplete-input': {
30
+ color: string;
31
+ };
32
+ };
33
+ };
34
+ export declare const theme: import("@mui/material").Theme;
35
+ export declare const sx: {
36
+ '& label.Mui-focused': {
37
+ color: string;
38
+ };
39
+ '& .MuiFormHelperText-root': {
40
+ margin: string;
41
+ };
42
+ '& .MuiInput-underline:after': {
43
+ borderBottomColor: string;
44
+ };
45
+ '& .MuiOutlinedInput-root': {
46
+ '& fieldset': {
47
+ borderColor: string;
48
+ };
49
+ '&:hover fieldset': {
50
+ borderColor: string;
51
+ };
52
+ '&.Mui-focused fieldset': {
53
+ borderColor: string;
54
+ };
55
+ };
56
+ };
57
+ export declare const standard: {
58
+ '& .MuiInput-underline:before': {
59
+ borderBottomColor: string;
60
+ };
61
+ '& .MuiFormHelperText-root': {
62
+ margin: string;
63
+ };
64
+ '& .MuiInputLabel-root': {
65
+ color: string;
66
+ };
67
+ '& .MuiInputBase-root': {
68
+ color: string;
69
+ };
70
+ '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
71
+ borderBottomColor: string;
72
+ };
73
+ };
74
+ export declare const sxAutoComplete: {
75
+ '& label.Mui-focused': {
76
+ color: string;
77
+ };
78
+ '& .MuiFormHelperText-root': {
79
+ margin: string;
80
+ };
81
+ '& .MuiInput-underline:after': {
82
+ borderBottomColor: string;
83
+ };
84
+ '& .MuiOutlinedInput-root': {
85
+ '& fieldset': {
86
+ borderColor: string;
87
+ };
88
+ '&:hover fieldset': {
89
+ borderColor: string;
90
+ };
91
+ '&.Mui-focused fieldset': {
92
+ borderColor: string;
93
+ };
94
+ };
95
+ '& .MuiOutlinedInput-root.Mui-disabled': {
96
+ '& fieldset': {
97
+ borderColor: string;
98
+ };
99
+ '& .MuiOutlinedInput-notchedOutline': {
100
+ borderColor: string;
101
+ };
102
+ '& .MuiAutocomplete-input': {
103
+ color: string;
104
+ };
105
+ };
106
+ };
@@ -0,0 +1,143 @@
1
+ import { createTheme } from '@mui/material';
2
+ export var sxTextField = {
3
+ '& label.Mui-focused': {
4
+ color: '#00B2A6',
5
+ },
6
+ '& .MuiFormHelperText-root': {
7
+ margin: '1px 0px 0 1px',
8
+ },
9
+ '& .MuiInput-underline:after': {
10
+ borderBottomColor: '#00B2A6',
11
+ },
12
+ '& .MuiOutlinedInput-root': {
13
+ '& fieldset': {
14
+ borderColor: '#00B2A6',
15
+ },
16
+ '&:hover fieldset': {
17
+ borderColor: '#00B2A6',
18
+ },
19
+ '&.Mui-focused fieldset': {
20
+ borderColor: '#00B2A6',
21
+ },
22
+ },
23
+ '& .MuiOutlinedInput-root.Mui-disabled': {
24
+ '& fieldset': {
25
+ borderColor: '#00B2A6 !important',
26
+ },
27
+ '& .MuiOutlinedInput-notchedOutline': {
28
+ borderColor: '#00B2A6 !important',
29
+ },
30
+ '& .MuiAutocomplete-input': {
31
+ color: '#00B2A6 !important',
32
+ },
33
+ },
34
+ };
35
+ export var theme = createTheme({
36
+ palette: {
37
+ primary: {
38
+ main: '#00B2A6',
39
+ light: '#019F95',
40
+ dark: '#019F95',
41
+ contrastText: '#FFFFFF',
42
+ },
43
+ secondary: {
44
+ main: '#13477B',
45
+ light: '#34495E',
46
+ dark: '#1565c0',
47
+ contrastText: '#FFFFFF',
48
+ },
49
+ error: {
50
+ main: '#EF4058',
51
+ light: '#CA3449',
52
+ dark: '#CA3449',
53
+ contrastText: '#FFFFFF',
54
+ },
55
+ warning: {
56
+ main: '#ECC005',
57
+ light: '#E0B605',
58
+ dark: '#E0B605',
59
+ contrastText: '#FFFFFF',
60
+ },
61
+ info: {
62
+ main: '#FFFFFF',
63
+ light: '#FFFFFF',
64
+ dark: '#FFFFFF',
65
+ contrastText: '#FFFFFF',
66
+ },
67
+ },
68
+ });
69
+ export var sx = {
70
+ '& label.Mui-focused': {
71
+ color: '#00B2A6',
72
+ // fontFamily: 'Montserrat, sans-serif', // Fonte Montserrat
73
+ // fontWeight: '600', // Defina o peso da fonte como semi bold
74
+ },
75
+ '& .MuiFormHelperText-root': {
76
+ margin: '1px 0px 0 1px',
77
+ },
78
+ '& .MuiInput-underline:after': {
79
+ borderBottomColor: '#00B2A6',
80
+ },
81
+ '& .MuiOutlinedInput-root': {
82
+ '& fieldset': {
83
+ borderColor: '#00B2A6',
84
+ },
85
+ '&:hover fieldset': {
86
+ borderColor: '#00B2A6',
87
+ },
88
+ '&.Mui-focused fieldset': {
89
+ borderColor: '#00B2A6',
90
+ },
91
+ },
92
+ };
93
+ export var standard = {
94
+ '& .MuiInput-underline:before': {
95
+ borderBottomColor: 'whitesmoke',
96
+ },
97
+ '& .MuiFormHelperText-root': {
98
+ margin: '1px 0px 0 1px',
99
+ },
100
+ '& .MuiInputLabel-root': {
101
+ color: 'white',
102
+ },
103
+ '& .MuiInputBase-root': {
104
+ color: 'white',
105
+ },
106
+ '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
107
+ borderBottomColor: 'white',
108
+ },
109
+ };
110
+ export var sxAutoComplete = {
111
+ '& label.Mui-focused': {
112
+ color: '#00B2A6',
113
+ },
114
+ '& .MuiFormHelperText-root': {
115
+ margin: '1px 0px 0 1px',
116
+ },
117
+ '& .MuiInput-underline:after': {
118
+ borderBottomColor: '#00B2A6',
119
+ },
120
+ '& .MuiOutlinedInput-root': {
121
+ '& fieldset': {
122
+ borderColor: '#00B2A6',
123
+ },
124
+ '&:hover fieldset': {
125
+ borderColor: '#00B2A6',
126
+ },
127
+ '&.Mui-focused fieldset': {
128
+ borderColor: '#00B2A6',
129
+ },
130
+ },
131
+ // Estilização para o botão desabilitado usando pseudoseletor :disabled
132
+ '& .MuiOutlinedInput-root.Mui-disabled': {
133
+ '& fieldset': {
134
+ borderColor: '#00B2A6 !important',
135
+ },
136
+ '& .MuiOutlinedInput-notchedOutline': {
137
+ borderColor: '#00B2A6 !important',
138
+ },
139
+ '& .MuiAutocomplete-input': {
140
+ color: '#00B2A6 !important',
141
+ },
142
+ },
143
+ };
package/package.json ADDED
@@ -0,0 +1,216 @@
1
+ {
2
+ "name": "@grazziotin/react-components",
3
+ "version": "1.0.0",
4
+ "description": "Biblioteca de componentes React em TypeScript desenvolvida para uso interno",
5
+ "main": "dist/index.js",
6
+ "types": "dist/index.d.ts",
7
+ "scripts": {
8
+ "build": "webpack",
9
+ "test": "echo \"Error: no test specified\" && exit 1",
10
+ "tsc": "tsc -d",
11
+ "prepublishOnly": "npm run tsc && npm run build"
12
+ },
13
+ "repository": {
14
+ "type": "git",
15
+ "url": "https://github.com/GrazziotinSA/react-components.git"
16
+ },
17
+ "keywords": [
18
+ "react",
19
+ "typescript",
20
+ "components",
21
+ "library",
22
+ "internal"
23
+ ],
24
+ "author": "GrazziotinSA",
25
+ "contributors": [
26
+ {
27
+ "name": "Nicolas Ferreira",
28
+ "email": "nicolas.ferreira@grazziotin.com.br"
29
+ }
30
+ ],
31
+ "license": "MIT",
32
+ "bugs": {
33
+ "url": "https://github.com/GrazziotinSA/react-components/issues"
34
+ },
35
+ "homepage": "https://github.com/GrazziotinSA/react-components#readme",
36
+ "publishConfig": {
37
+ "registry": "https://registry.npmjs.org/"
38
+ },
39
+ "dependencies": {
40
+ "@babel/core": "^7.16.0",
41
+ "@emotion/react": "^11.11.4",
42
+ "@emotion/styled": "^11.11.5",
43
+ "@ericblade/quagga2": "^1.8.2",
44
+ "@heroicons/react": "^2.0.13",
45
+ "@material-tailwind/react": "^2.1.9",
46
+ "@material-ui/core": "^4.12.4",
47
+ "@material-ui/icons": "^5.0.0-alpha.37",
48
+ "@mui/icons-material": "^5.14.18",
49
+ "@mui/material": "^5.15.18",
50
+ "@mui/styled-engine-sc": "^5.10.14",
51
+ "@mui/x-data-grid": "^5.17.12",
52
+ "@mui/x-date-pickers": "^5.0.15",
53
+ "@nivo/bar": "0.80.0",
54
+ "@nivo/bullet": "^0.80.0",
55
+ "@nivo/core": "^0.80.0",
56
+ "@nivo/pie": "0.80.0",
57
+ "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
58
+ "@radix-ui/react-dialog": "^1.1.1",
59
+ "@reach/combobox": "^0.17.0",
60
+ "@reach/menu-button": "^0.17.0",
61
+ "@rollup/plugin-commonjs": "^26.0.1",
62
+ "@svgr/webpack": "^5.5.0",
63
+ "@tanstack/react-query": "^5.50.1",
64
+ "@tanstack/react-query-devtools": "^5.50.1",
65
+ "@testing-library/jest-dom": "^5.16.5",
66
+ "@testing-library/react": "^13.3.0",
67
+ "@testing-library/user-event": "^13.5.0",
68
+ "@types/pako": "^2.0.3",
69
+ "@types/react-color": "^3.0.12",
70
+ "@types/react-slick": "^0.23.13",
71
+ "@types/styled-components": "^5.1.26",
72
+ "@typescript-eslint/eslint-plugin": "^6.10.0",
73
+ "@typescript-eslint/parser": "^6.10.0",
74
+ "@typescript-eslint/typescript-estree": "^6.10.0",
75
+ "@uriopass/nosleep.js": "^0.12.2",
76
+ "@vitejs/plugin-react": "^4.3.1",
77
+ "add": "^2.0.6",
78
+ "axios": "^1.6.1",
79
+ "babel-jest": "^27.4.2",
80
+ "babel-loader": "^8.2.3",
81
+ "babel-plugin-named-asset-import": "^0.3.8",
82
+ "babel-preset-react-app": "^10.0.1",
83
+ "balloon-css": "^1.2.0",
84
+ "bfj": "^7.0.2",
85
+ "body-parser": "^1.20.1",
86
+ "browserslist": "^4.18.1",
87
+ "camelcase": "^6.2.1",
88
+ "case-sensitive-paths-webpack-plugin": "^2.4.0",
89
+ "class-variance-authority": "^0.7.0",
90
+ "clsx": "^2.1.1",
91
+ "cors": "^2.8.5",
92
+ "crypto-js": "^4.1.1",
93
+ "css-loader": "^6.5.1",
94
+ "css-minimizer-webpack-plugin": "^3.2.0",
95
+ "dayjs": "^1.11.11",
96
+ "dotenv": "^16.0.3",
97
+ "dotenv-expand": "^5.1.0",
98
+ "eslint-config-react-app": "^7.0.1",
99
+ "eslint-plugin-react": "^7.32.2",
100
+ "eslint-webpack-plugin": "^4.0.1",
101
+ "exceljs": "^4.4.0",
102
+ "export-from-json": "^1.7.0",
103
+ "express": "^4.18.2",
104
+ "file-loader": "^6.2.0",
105
+ "flowbite": "^2.4.1",
106
+ "flowbite-react": "^0.10.1",
107
+ "formik": "^2.2.9",
108
+ "fs-extra": "^10.0.0",
109
+ "html-react-parser": "^5.0.6",
110
+ "html-webpack-plugin": "^5.5.0",
111
+ "identity-obj-proxy": "^3.0.0",
112
+ "immer": "^10.1.1",
113
+ "install": "^0.13.0",
114
+ "jest": "^27.4.3",
115
+ "jest-resolve": "^27.4.2",
116
+ "jest-watch-typeahead": "^1.0.0",
117
+ "jquery": "^3.6.1",
118
+ "js-cookie": "^3.0.5",
119
+ "less": "^3.9.0",
120
+ "less-loader": "^11.0.0",
121
+ "lottie-react": "^2.4.0",
122
+ "lucide-react": "^0.397.0",
123
+ "material-icons": "^1.13.12",
124
+ "mini-css-extract-plugin": "^2.4.5",
125
+ "moment": "^2.29.4",
126
+ "nodemailer": "^6.8.0",
127
+ "pako": "^2.1.0",
128
+ "postcss": "^8.4.31",
129
+ "postcss-flexbugs-fixes": "^5.0.2",
130
+ "postcss-loader": "^6.2.1",
131
+ "postcss-normalize": "^10.0.1",
132
+ "postcss-preset-env": "^7.0.1",
133
+ "prettier": "^3.1.0",
134
+ "prompts": "^2.4.2",
135
+ "prop-types": "^15.8.1",
136
+ "quagga": "^0.12.1",
137
+ "react": "^18.3.1",
138
+ "react-app-polyfill": "^3.0.0",
139
+ "react-awesome-lightbox": "^1.8.1",
140
+ "react-balloon-tooltip": "^1.0.4",
141
+ "react-color": "^2.19.3",
142
+ "react-data-table-component": "^7.6.2",
143
+ "react-datepicker": "^4.16.0",
144
+ "react-dev-utils": "^12.0.1",
145
+ "react-dimmer": "^1.0.7",
146
+ "react-dom": "^18.2.0",
147
+ "react-draggable": "^4.4.5",
148
+ "react-dropdown": "^1.10.0",
149
+ "react-dropzone": "^14.2.3",
150
+ "react-google-recaptcha-v3": "^1.10.1",
151
+ "react-hook-form": "^7.43.0",
152
+ "react-jss": "^10.10.0",
153
+ "react-markdown": "^9.0.1",
154
+ "react-modal": "^3.15.1",
155
+ "react-number-format": "^5.3.0",
156
+ "react-onesignal": "^3.0.1",
157
+ "react-pro-sidebar": "^1.1.0-alpha.1",
158
+ "react-query": "^3.39.3",
159
+ "react-query-devtools": "^2.6.3",
160
+ "react-refresh": "^0.14.0",
161
+ "react-router-dom": "^6.7.0",
162
+ "react-say": "^2.1.0",
163
+ "react-simple-chatbot": "^0.6.1",
164
+ "react-slick": "^0.29.0",
165
+ "react-speech": "^1.0.2",
166
+ "react-tailwindcss-datepicker": "^1.6.6",
167
+ "react-toastify": "^10.0.5",
168
+ "react-webcam": "^7.1.1",
169
+ "resolve": "^1.20.0",
170
+ "resolve-url-loader": "^4.0.0",
171
+ "sass-loader": "^12.3.0",
172
+ "semver": "^7.3.5",
173
+ "slick-carousel": "^1.8.1",
174
+ "socket.io-client": "^4.7.5",
175
+ "source-map-loader": "^3.0.0",
176
+ "style-loader": "^3.3.1",
177
+ "styled-components": "^5.3.8",
178
+ "tailwind-merge": "^2.3.0",
179
+ "tailwindcss": "^3.3.5",
180
+ "tailwindcss-animate": "^1.0.7",
181
+ "terser-webpack-plugin": "^5.2.5",
182
+ "tw-elements": "^2.0.0",
183
+ "tw-elements-react": "^1.0.0-alpha-end",
184
+ "use-immer": "^0.9.0",
185
+ "use-scan-detection": "^0.2.3",
186
+ "uuid": "^9.0.1",
187
+ "vaul": "^0.9.1",
188
+ "vite": "^5.3.4",
189
+ "vite-plugin-commonjs": "^0.10.1",
190
+ "vite-plugin-pwa": "^0.20.0",
191
+ "web-speech-cognitive-services": "^7.1.3",
192
+ "web-vitals": "^4.0.1",
193
+ "webpack-dev-server": "^4.6.0",
194
+ "webpack-manifest-plugin": "^4.0.2",
195
+ "workbox-webpack-plugin": "^6.4.1",
196
+ "yarn": "^1.22.19"
197
+ },
198
+ "peerDependencies": {
199
+ "react": ">=17.0.0",
200
+ "react-dom": ">=17.0.0",
201
+ "@mui/material": ">=5.0.0",
202
+ "@mui/icons-material": ">=5.0.0"
203
+ },
204
+ "devDependencies": {
205
+ "@types/crypto-js": "^4.2.2",
206
+ "@types/js-cookie": "^3.0.6",
207
+ "@types/node": "^20.14.11",
208
+ "@types/react": "^17.0.0",
209
+ "@types/react-dom": "^17.0.0",
210
+ "@types/uuid": "^10.0.0",
211
+ "ts-loader": "^8.0.0",
212
+ "typescript": "^5.1.3",
213
+ "webpack": "^5.0.0",
214
+ "webpack-cli": "^4.0.0"
215
+ }
216
+ }
@@ -0,0 +1,25 @@
1
+ export type InputPropsCustomTypes =
2
+ | 'button'
3
+ | 'checkbox'
4
+ | 'color'
5
+ | 'date'
6
+ | 'datetime-local'
7
+ | 'email'
8
+ | 'file'
9
+ | 'hidden'
10
+ | 'image'
11
+ | 'month'
12
+ | 'number'
13
+ | 'password'
14
+ | 'radio'
15
+ | 'range'
16
+ | 'reset'
17
+ | 'search'
18
+ | 'submit'
19
+ | 'tel'
20
+ | 'text'
21
+ | 'time'
22
+ | 'url'
23
+ | 'week'
24
+ | 'float'
25
+ | 'real'
@@ -0,0 +1,94 @@
1
+ import React, { useState } from 'react'
2
+ import { TextField, TextFieldProps, ThemeProvider } from '@mui/material'
3
+ import { sx, standard, theme } from 'src/styles/sx'
4
+ import CameraAltIcon from '@mui/icons-material/CameraAlt'
5
+ import InputAdornment from '@mui/material/InputAdornment'
6
+ import { cn } from 'src/lib/utils'
7
+ import { InputPropsCustomTypes } from './constants'
8
+ import { limitDecimais, mascaradorInputMoeda } from 'src/functions/mascaras'
9
+
10
+ export type InputProps = TextFieldProps & {
11
+ shrink?: boolean
12
+ readOnly?: boolean
13
+ xs?: number
14
+ onKeyEnter?: () => void
15
+ order?: number
16
+ render?: boolean
17
+ qtdSolicitada?: number
18
+ qtdSeparada?: number
19
+ onQtdSeparadaChange?: (newValue: number) => void
20
+ type?: InputPropsCustomTypes
21
+ }
22
+
23
+ /**
24
+ * Input personalizado Mui
25
+ * @version 2.0.1
26
+ * @ViniciusCLoeblein
27
+ */
28
+
29
+ export default function Input({
30
+ shrink,
31
+ readOnly,
32
+ onKeyEnter,
33
+ size = 'small',
34
+ type = 'text',
35
+ ...rest
36
+ }: Readonly<InputProps>) {
37
+ function onEnter(e: any) {
38
+ if (e.key === 'Enter' && onKeyEnter) {
39
+ onKeyEnter()
40
+ }
41
+ rest.onKeyDown && rest.onKeyDown(e)
42
+ }
43
+
44
+ const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
45
+ let value = e.target.value
46
+
47
+ if (['real', 'float'].includes(type)) {
48
+ value = value.replace(',', '.')
49
+
50
+ if (type === 'real') {
51
+ value = mascaradorInputMoeda(value)
52
+ } else {
53
+ value = limitDecimais(value, 8)
54
+ }
55
+ }
56
+
57
+ rest.onChange &&
58
+ rest.onChange({
59
+ ...e,
60
+ target: {
61
+ ...e.target,
62
+ value,
63
+ },
64
+ })
65
+ }
66
+
67
+ let InputProps: any = { readOnly, ...rest.InputProps }
68
+
69
+ return (
70
+ <ThemeProvider theme={theme}>
71
+ <TextField
72
+ {...rest}
73
+ sx={rest.variant === 'standard' ? standard : sx}
74
+ onKeyDown={onEnter}
75
+ InputLabelProps={{
76
+ ...rest.InputLabelProps,
77
+ shrink,
78
+ }}
79
+ InputProps={InputProps}
80
+ size={size}
81
+ className={cn('select-none', rest.className)}
82
+ type={['real', 'float'].includes(type) ? 'text' : type}
83
+ onChange={handleChange}
84
+ inputProps={{
85
+ ...rest.inputProps,
86
+ step:
87
+ (type === 'real' && '0.01') ||
88
+ (type === 'float' && '0.0000001') ||
89
+ '1',
90
+ }}
91
+ />
92
+ </ThemeProvider>
93
+ )
94
+ }
package/src/env.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ declare namespace NodeJS {
2
+ interface ProcessEnv {
3
+ readonly VITE_SECRET_USER_LOGIN: string
4
+ readonly VITE_HOSTNAME_API: string
5
+ readonly VITE_HOSTNAME_SOCKET: string
6
+ readonly VITE_HOSTNAME_API_GRAZZILABS: string
7
+ readonly VITE_ID_CLIENT: string
8
+ readonly VITE_SECRET_CLIENT: string
9
+ readonly VITE_ENVIRONMENT: string
10
+ readonly VITE_NOTIFICATION_ID_PRD: string
11
+ readonly VITE_NOTIFICATION_ID_STG: string
12
+ readonly VITE_NOTIFICATION_ID_LOCAL: string
13
+ readonly VITE_KEY_RECAPTCHA: string
14
+ readonly VITE_KEY_SECRET_CRYPT: string
15
+ }
16
+ }