@grazziotin/react-components 1.0.0 → 1.0.1

package/README.md

@@ -1 +1,57 @@
-# react-components
+# @grazziotin/react-components
+
+Biblioteca de componentes React em TypeScript para uso em projetos Grazziotin.
+
+## Instalação
+
+```bash
+npm install @grazziotin/react-components
+```
+
+### Dependências necessárias
+
+O pacote usa **peer dependencies**. Instale no seu projeto:
+
+```bash
+npm install react react-dom @mui/material @mui/icons-material
+```
+
+- `react` e `react-dom` >= 17
+- `@mui/material` e `@mui/icons-material` >= 5
+
+## Uso
+
+### Input
+
+Input baseado em MUI com suporte a máscaras (moeda, float), tecla Enter e tema padrão.
+
+```tsx
+import { Input, InputProps } from '@grazziotin/react-components'
+
+// Básico
+<Input label="Nome" value={name} onChange={(e) => setName(e.target.value)} />
+
+// Com máscara de moeda
+<Input label="Valor" type="real" value={valor} onChange={...} />
+
+// Com tecla Enter
+<Input label="Buscar" onKeyEnter={() => handleSearch()} />
+```
+
+**Props principais** (além das do MUI `TextField`):
+
+| Prop        | Tipo     | Descrição                                                    |
+| ----------- | -------- | ------------------------------------------------------------ |
+| `type`      | string   | `'text' \| 'real' \| 'float' \| ...` — `real` aplica máscara de moeda |
+| `onKeyEnter`| function | Callback ao pressionar Enter                                 |
+| `shrink`    | boolean  | Label shrink (Material UI)                                   |
+| `readOnly`  | boolean  | Campo somente leitura                                        |
+
+## Componentes exportados
+
+- **Input** — Campo de texto (MUI) com máscaras e tema
+- **InputProps** — Tipo TypeScript das props do Input
+
+## Licença
+
+MIT © GrazziotinSA

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@grazziotin/react-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Biblioteca de componentes React em TypeScript desenvolvida para uso interno",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "scripts": {
     "build": "webpack",
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -19,7 +23,8 @@
     "typescript",
     "components",
     "library",
-    "internal"
+    "input",
+    "mui"
   ],
   "author": "GrazziotinSA",
   "contributors": [
@@ -36,165 +41,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@ericblade/quagga2": "^1.8.2",
-    "@heroicons/react": "^2.0.13",
-    "@material-tailwind/react": "^2.1.9",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^5.0.0-alpha.37",
-    "@mui/icons-material": "^5.14.18",
-    "@mui/material": "^5.15.18",
-    "@mui/styled-engine-sc": "^5.10.14",
-    "@mui/x-data-grid": "^5.17.12",
-    "@mui/x-date-pickers": "^5.0.15",
-    "@nivo/bar": "0.80.0",
-    "@nivo/bullet": "^0.80.0",
-    "@nivo/core": "^0.80.0",
-    "@nivo/pie": "0.80.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@reach/combobox": "^0.17.0",
-    "@reach/menu-button": "^0.17.0",
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@svgr/webpack": "^5.5.0",
-    "@tanstack/react-query": "^5.50.1",
-    "@tanstack/react-query-devtools": "^5.50.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/pako": "^2.0.3",
-    "@types/react-color": "^3.0.12",
-    "@types/react-slick": "^0.23.13",
-    "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "@typescript-eslint/typescript-estree": "^6.10.0",
-    "@uriopass/nosleep.js": "^0.12.2",
-    "@vitejs/plugin-react": "^4.3.1",
-    "add": "^2.0.6",
-    "axios": "^1.6.1",
-    "babel-jest": "^27.4.2",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-named-asset-import": "^0.3.8",
-    "babel-preset-react-app": "^10.0.1",
-    "balloon-css": "^1.2.0",
-    "bfj": "^7.0.2",
-    "body-parser": "^1.20.1",
-    "browserslist": "^4.18.1",
-    "camelcase": "^6.2.1",
-    "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "cors": "^2.8.5",
-    "crypto-js": "^4.1.1",
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
-    "dayjs": "^1.11.11",
-    "dotenv": "^16.0.3",
-    "dotenv-expand": "^5.1.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-webpack-plugin": "^4.0.1",
-    "exceljs": "^4.4.0",
-    "export-from-json": "^1.7.0",
-    "express": "^4.18.2",
-    "file-loader": "^6.2.0",
-    "flowbite": "^2.4.1",
-    "flowbite-react": "^0.10.1",
-    "formik": "^2.2.9",
-    "fs-extra": "^10.0.0",
-    "html-react-parser": "^5.0.6",
-    "html-webpack-plugin": "^5.5.0",
-    "identity-obj-proxy": "^3.0.0",
-    "immer": "^10.1.1",
-    "install": "^0.13.0",
-    "jest": "^27.4.3",
-    "jest-resolve": "^27.4.2",
-    "jest-watch-typeahead": "^1.0.0",
-    "jquery": "^3.6.1",
-    "js-cookie": "^3.0.5",
-    "less": "^3.9.0",
-    "less-loader": "^11.0.0",
-    "lottie-react": "^2.4.0",
-    "lucide-react": "^0.397.0",
-    "material-icons": "^1.13.12",
-    "mini-css-extract-plugin": "^2.4.5",
-    "moment": "^2.29.4",
-    "nodemailer": "^6.8.0",
-    "pako": "^2.1.0",
-    "postcss": "^8.4.31",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-loader": "^6.2.1",
-    "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.0.1",
-    "prettier": "^3.1.0",
-    "prompts": "^2.4.2",
-    "prop-types": "^15.8.1",
-    "quagga": "^0.12.1",
-    "react": "^18.3.1",
-    "react-app-polyfill": "^3.0.0",
-    "react-awesome-lightbox": "^1.8.1",
-    "react-balloon-tooltip": "^1.0.4",
-    "react-color": "^2.19.3",
-    "react-data-table-component": "^7.6.2",
-    "react-datepicker": "^4.16.0",
-    "react-dev-utils": "^12.0.1",
-    "react-dimmer": "^1.0.7",
-    "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.5",
-    "react-dropdown": "^1.10.0",
-    "react-dropzone": "^14.2.3",
-    "react-google-recaptcha-v3": "^1.10.1",
-    "react-hook-form": "^7.43.0",
-    "react-jss": "^10.10.0",
-    "react-markdown": "^9.0.1",
-    "react-modal": "^3.15.1",
-    "react-number-format": "^5.3.0",
-    "react-onesignal": "^3.0.1",
-    "react-pro-sidebar": "^1.1.0-alpha.1",
-    "react-query": "^3.39.3",
-    "react-query-devtools": "^2.6.3",
-    "react-refresh": "^0.14.0",
-    "react-router-dom": "^6.7.0",
-    "react-say": "^2.1.0",
-    "react-simple-chatbot": "^0.6.1",
-    "react-slick": "^0.29.0",
-    "react-speech": "^1.0.2",
-    "react-tailwindcss-datepicker": "^1.6.6",
-    "react-toastify": "^10.0.5",
-    "react-webcam": "^7.1.1",
-    "resolve": "^1.20.0",
-    "resolve-url-loader": "^4.0.0",
-    "sass-loader": "^12.3.0",
-    "semver": "^7.3.5",
-    "slick-carousel": "^1.8.1",
-    "socket.io-client": "^4.7.5",
-    "source-map-loader": "^3.0.0",
-    "style-loader": "^3.3.1",
-    "styled-components": "^5.3.8",
-    "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.3.5",
-    "tailwindcss-animate": "^1.0.7",
-    "terser-webpack-plugin": "^5.2.5",
-    "tw-elements": "^2.0.0",
-    "tw-elements-react": "^1.0.0-alpha-end",
-    "use-immer": "^0.9.0",
-    "use-scan-detection": "^0.2.3",
-    "uuid": "^9.0.1",
-    "vaul": "^0.9.1",
-    "vite": "^5.3.4",
-    "vite-plugin-commonjs": "^0.10.1",
-    "vite-plugin-pwa": "^0.20.0",
-    "web-speech-cognitive-services": "^7.1.3",
-    "web-vitals": "^4.0.1",
-    "webpack-dev-server": "^4.6.0",
-    "webpack-manifest-plugin": "^4.0.2",
-    "workbox-webpack-plugin": "^6.4.1",
-    "yarn": "^1.22.19"
-  },
+  "dependencies": {},
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
@@ -202,12 +49,10 @@
     "@mui/icons-material": ">=5.0.0"
   },
   "devDependencies": {
-    "@types/crypto-js": "^4.2.2",
-    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20.14.11",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@types/uuid": "^10.0.0",
+    "tailwind-merge": "^2.3.0",
     "ts-loader": "^8.0.0",
     "typescript": "^5.1.3",
     "webpack": "^5.0.0",

package/.editorconfig

@@ -1,13 +0,0 @@
-# EditorConfig is awesome: https://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-end_of_line = crlf
-charset = utf-8
-trim_trailing_whitespace = false
-insert_final_newline = false

package/.eslintignore

@@ -1,3 +0,0 @@
-**/*.json
-**/*.jsx
-**/*.js

package/.eslintrc.json

@@ -1,16 +0,0 @@
-{
-  "plugins": [
-    "@tanstack/query"
-  ],
-  "extends": [
-    "@rocketseat/eslint-config/react",
-    "plugin:@tanstack/eslint-plugin-query/recommended"
-  ],
-  "rules": {
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-unused-vars": "warn",
-    "@tanstack/query/exhaustive-deps": "warn",
-    "@tanstack/query/no-rest-destructuring": "warn",
-    "@tanstack/query/stable-query-client": "warn"
-  }
-}

package/.prettierrc

@@ -1,6 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "useTabs": false
-}

package/.vscode/settings.json

@@ -1,18 +0,0 @@
-{
-  "editor.tabSize": 2,
-  "files.eol": "\r\n",
-  "workbench.colorCustomizations": {
-    "activityBar.background": "#6a1b9a",
-    "titleBar.activeBackground": "#6a1b9a",
-    "titleBar.inactiveBackground": "#6a1b9a",
-    "titleBar.activeForeground": "#ffffff"
-  },
-  "eslint.format.enable": true,
-  "[typescriptreact]": {
-      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  },
-  "editor.formatOnSave": true,
-  "[typescript]": {
-      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  }
-}

package/src/components/Inputs/Input/constants.ts

@@ -1,25 +0,0 @@
-export type InputPropsCustomTypes =
-  | 'button'
-  | 'checkbox'
-  | 'color'
-  | 'date'
-  | 'datetime-local'
-  | 'email'
-  | 'file'
-  | 'hidden'
-  | 'image'
-  | 'month'
-  | 'number'
-  | 'password'
-  | 'radio'
-  | 'range'
-  | 'reset'
-  | 'search'
-  | 'submit'
-  | 'tel'
-  | 'text'
-  | 'time'
-  | 'url'
-  | 'week'
-  | 'float'
-  | 'real'

package/src/components/Inputs/Input/index.tsx

@@ -1,94 +0,0 @@
-import React, { useState } from 'react'
-import { TextField, TextFieldProps, ThemeProvider } from '@mui/material'
-import { sx, standard, theme } from 'src/styles/sx'
-import CameraAltIcon from '@mui/icons-material/CameraAlt'
-import InputAdornment from '@mui/material/InputAdornment'
-import { cn } from 'src/lib/utils'
-import { InputPropsCustomTypes } from './constants'
-import { limitDecimais, mascaradorInputMoeda } from 'src/functions/mascaras'
-
-export type InputProps = TextFieldProps & {
-  shrink?: boolean
-  readOnly?: boolean
-  xs?: number
-  onKeyEnter?: () => void
-  order?: number
-  render?: boolean
-  qtdSolicitada?: number
-  qtdSeparada?: number
-  onQtdSeparadaChange?: (newValue: number) => void
-  type?: InputPropsCustomTypes
-}
-
-/**
- * Input personalizado Mui
- * @version 2.0.1
- * @ViniciusCLoeblein
- */
-
-export default function Input({
-  shrink,
-  readOnly,
-  onKeyEnter,
-  size = 'small',
-  type = 'text',
-  ...rest
-}: Readonly<InputProps>) {
-  function onEnter(e: any) {
-    if (e.key === 'Enter' && onKeyEnter) {
-      onKeyEnter()
-    }
-    rest.onKeyDown && rest.onKeyDown(e)
-  }
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let value = e.target.value
-
-    if (['real', 'float'].includes(type)) {
-      value = value.replace(',', '.')
-
-      if (type === 'real') {
-        value = mascaradorInputMoeda(value)
-      } else {
-        value = limitDecimais(value, 8)
-      }
-    }
-
-    rest.onChange &&
-      rest.onChange({
-        ...e,
-        target: {
-          ...e.target,
-          value,
-        },
-      })
-  }
-
-  let InputProps: any = { readOnly, ...rest.InputProps }
-
-  return (
-      <ThemeProvider theme={theme}>
-        <TextField
-          {...rest}
-          sx={rest.variant === 'standard' ? standard : sx}
-          onKeyDown={onEnter}
-          InputLabelProps={{
-            ...rest.InputLabelProps,
-            shrink,
-          }}
-          InputProps={InputProps}
-          size={size}
-          className={cn('select-none', rest.className)}
-          type={['real', 'float'].includes(type) ? 'text' : type}
-          onChange={handleChange}
-          inputProps={{
-            ...rest.inputProps,
-            step:
-              (type === 'real' && '0.01') ||
-              (type === 'float' && '0.0000001') ||
-              '1',
-          }}
-        />
-      </ThemeProvider>
-  )
-}

package/src/env.d.ts

@@ -1,16 +0,0 @@
-declare namespace NodeJS {
-  interface ProcessEnv {
-    readonly VITE_SECRET_USER_LOGIN: string
-    readonly VITE_HOSTNAME_API: string
-    readonly VITE_HOSTNAME_SOCKET: string
-    readonly VITE_HOSTNAME_API_GRAZZILABS: string
-    readonly VITE_ID_CLIENT: string
-    readonly VITE_SECRET_CLIENT: string
-    readonly VITE_ENVIRONMENT: string
-    readonly VITE_NOTIFICATION_ID_PRD: string
-    readonly VITE_NOTIFICATION_ID_STG: string
-    readonly VITE_NOTIFICATION_ID_LOCAL: string
-    readonly VITE_KEY_RECAPTCHA: string
-    readonly VITE_KEY_SECRET_CRYPT: string
-  }
-}