mitre-form-component 0.0.1

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.
Files changed (25) hide show
  1. package/README.md +54 -0
  2. package/eslint.config.js +28 -0
  3. package/index.html +13 -0
  4. package/package.json +44 -0
  5. package/src/App.tsx +33 -0
  6. package/src/components/Alert/index.tsx +59 -0
  7. package/src/components/Alert/styles.ts +95 -0
  8. package/src/components/Button/index.tsx +51 -0
  9. package/src/components/Button/styles.ts +147 -0
  10. package/src/components/Form/index.tsx +215 -0
  11. package/src/components/Form/styles.ts +99 -0
  12. package/src/components/Input/index.tsx +132 -0
  13. package/src/components/Input/masks.ts +52 -0
  14. package/src/components/Input/styles.ts +201 -0
  15. package/src/components/hooks/useError.ts +15 -0
  16. package/src/components/styles/global.ts +165 -0
  17. package/src/components/styles/utils.ts +56 -0
  18. package/src/index.ts +4 -0
  19. package/src/main.tsx +12 -0
  20. package/src/registry.tsx +14 -0
  21. package/src/vite-env.d.ts +1 -0
  22. package/tsconfig.build.json +29 -0
  23. package/tsconfig.json +22 -0
  24. package/tsup.config.ts +28 -0
  25. package/vite.config.ts +7 -0
package/README.md ADDED
@@ -0,0 +1,54 @@
1
+ # React + TypeScript + Vite
2
+
3
+ This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4
+
5
+ Currently, two official plugins are available:
6
+
7
+ - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8
+ - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9
+
10
+ ## Expanding the ESLint configuration
11
+
12
+ If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13
+
14
+ ```js
15
+ export default tseslint.config({
16
+ extends: [
17
+ // Remove ...tseslint.configs.recommended and replace with this
18
+ ...tseslint.configs.recommendedTypeChecked,
19
+ // Alternatively, use this for stricter rules
20
+ ...tseslint.configs.strictTypeChecked,
21
+ // Optionally, add this for stylistic rules
22
+ ...tseslint.configs.stylisticTypeChecked,
23
+ ],
24
+ languageOptions: {
25
+ // other options...
26
+ parserOptions: {
27
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
28
+ tsconfigRootDir: import.meta.dirname,
29
+ },
30
+ },
31
+ })
32
+ ```
33
+
34
+ You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
35
+
36
+ ```js
37
+ // eslint.config.js
38
+ import reactX from 'eslint-plugin-react-x'
39
+ import reactDom from 'eslint-plugin-react-dom'
40
+
41
+ export default tseslint.config({
42
+ plugins: {
43
+ // Add the react-x and react-dom plugins
44
+ 'react-x': reactX,
45
+ 'react-dom': reactDom,
46
+ },
47
+ rules: {
48
+ // other rules...
49
+ // Enable its recommended typescript rules
50
+ ...reactX.configs['recommended-typescript'].rules,
51
+ ...reactDom.configs.recommended.rules,
52
+ },
53
+ })
54
+ ```
package/eslint.config.js ADDED
@@ -0,0 +1,28 @@
1
+ import js from '@eslint/js'
2
+ import globals from 'globals'
3
+ import reactHooks from 'eslint-plugin-react-hooks'
4
+ import reactRefresh from 'eslint-plugin-react-refresh'
5
+ import tseslint from 'typescript-eslint'
6
+
7
+ export default tseslint.config(
8
+ { ignores: ['dist'] },
9
+ {
10
+ extends: [js.configs.recommended, ...tseslint.configs.recommended],
11
+ files: ['**/*.{ts,tsx}'],
12
+ languageOptions: {
13
+ ecmaVersion: 2020,
14
+ globals: globals.browser,
15
+ },
16
+ plugins: {
17
+ 'react-hooks': reactHooks,
18
+ 'react-refresh': reactRefresh,
19
+ },
20
+ rules: {
21
+ ...reactHooks.configs.recommended.rules,
22
+ 'react-refresh/only-export-components': [
23
+ 'warn',
24
+ { allowConstantExport: true },
25
+ ],
26
+ },
27
+ },
28
+ )
package/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vite + React + TS</title>
8
+ </head>
9
+ <body>
10
+ <div id="root"></div>
11
+ <script type="module" src="/src/main.tsx"></script>
12
+ </body>
13
+ </html>
package/package.json ADDED
@@ -0,0 +1,44 @@
1
+ {
2
+ "name": "mitre-form-component",
3
+ "private": false,
4
+ "version": "0.0.1",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "tsup",
9
+ "lint": "eslint .",
10
+ "preview": "vite preview"
11
+ },
12
+ "dependencies": {
13
+ "@hookform/resolvers": "^5.0.1",
14
+ "polished": "^4.3.1",
15
+ "react-hook-form": "^7.55.0",
16
+ "react-icons": "^5.5.0",
17
+ "react-phone-input-2": "^2.15.1",
18
+ "yup": "^1.6.1"
19
+ },
20
+ "peerDependencies": {
21
+ "react": "^18.2.0",
22
+ "react-dom": "^18.2.0",
23
+ "styled-components": ">=6.0.0"
24
+ },
25
+ "devDependencies": {
26
+ "@eslint/js": "^9.22.0",
27
+ "@types/node": "^22.14.1",
28
+ "@types/react": "^19.0.10",
29
+ "@types/react-dom": "^19.0.4",
30
+ "@types/styled-components": "^5.1.34",
31
+ "@vitejs/plugin-react": "^4.3.4",
32
+ "eslint": "^9.22.0",
33
+ "eslint-plugin-react-hooks": "^5.2.0",
34
+ "eslint-plugin-react-refresh": "^0.4.19",
35
+ "globals": "^16.0.0",
36
+ "react": "^18.2.0",
37
+ "react-dom": "^18.2.0",
38
+ "styled-components": ">=6.0.0",
39
+ "tsup": "^8.4.0",
40
+ "typescript": "~5.7.2",
41
+ "typescript-eslint": "^8.26.1",
42
+ "vite": "^6.3.1"
43
+ }
44
+ }
package/src/App.tsx ADDED
@@ -0,0 +1,33 @@
1
+ import MitreFormComponent from "./components/Form";
2
+
3
+ function App() {
4
+ return (
5
+ <main style={{
6
+ display: 'flex',
7
+ justifyContent: 'center',
8
+ alignItems: 'center',
9
+ minHeight: '100vh',
10
+ backgroundColor: '#FFF'
11
+ }}>
12
+ <div style={{
13
+ width: '100%',
14
+ maxWidth: '400px',
15
+ backgroundColor: '#CECECE',
16
+ padding: '20px',
17
+ borderRadius: '10px'
18
+ }}>
19
+ <MitreFormComponent
20
+ productId="16"
21
+ apiUrl="https://leads-hml.mitrerealty.com.br/api-leads"
22
+ apiToken="TEFORElOR19NSVRSRTptZlFXZnhvUHdNbWVZY0FidkF0QWJ3Q2RFYWtKckJBOXg5cGNsOTBvS1V0N2ZsU0d4TEtNdEZZd3k0NFlEc0c3"
23
+ utm_source="Google"
24
+ utm_medium="CPC"
25
+ utm_campaign="Campanha de Teste"
26
+ utm_term="Teste"
27
+ />
28
+ </div>
29
+ </main>
30
+ );
31
+ }
32
+
33
+ export default App
package/src/components/Alert/index.tsx ADDED
@@ -0,0 +1,59 @@
1
+ 'use client';
2
+
3
+ import React, { useEffect, useState, useCallback } from 'react';
4
+ import { AlertContainer, DismissButton } from './styles';
5
+ import { AlertType } from './styles';
6
+
7
+ import { HiX } from 'react-icons/hi';
8
+
9
+ interface AlertProps {
10
+ type?: AlertType;
11
+ children: React.ReactNode;
12
+ className?: string;
13
+ dismissible?: boolean;
14
+ onDismiss?: () => void;
15
+ autoDismiss?: number;
16
+ }
17
+
18
+ export const Alert = ({
19
+ type = 'info',
20
+ children,
21
+ className,
22
+ dismissible = false,
23
+ onDismiss,
24
+ autoDismiss
25
+ }: AlertProps) => {
26
+ const [isClosing, setIsClosing] = useState(false);
27
+
28
+ const handleDismiss = useCallback(() => {
29
+ setIsClosing(true);
30
+ setTimeout(() => onDismiss?.(), 300);
31
+ }, [onDismiss]);
32
+
33
+ useEffect(() => {
34
+ if (autoDismiss) {
35
+ const timer = setTimeout(handleDismiss, autoDismiss);
36
+ return () => clearTimeout(timer);
37
+ }
38
+ }, [autoDismiss, handleDismiss]);
39
+
40
+ return (
41
+ <AlertContainer
42
+ $type={type}
43
+ $dismissible={dismissible}
44
+ $isClosing={isClosing}
45
+ className={className}
46
+ role="alert"
47
+ >
48
+ {children}
49
+ {dismissible && (
50
+ <DismissButton
51
+ onClick={handleDismiss}
52
+ aria-label="Dismiss alert"
53
+ >
54
+ <HiX />
55
+ </DismissButton>
56
+ )}
57
+ </AlertContainer>
58
+ );
59
+ };
package/src/components/Alert/styles.ts ADDED
@@ -0,0 +1,95 @@
1
+ import styled, { css, keyframes } from "styled-components";
2
+
3
+ export type AlertType = "error" | "warning" | "info" | "success";
4
+
5
+ const fadeIn = keyframes`
6
+ from { opacity: 0; transform: translateY(-10px); }
7
+ to { opacity: 1; transform: translateY(0); }
8
+ `;
9
+
10
+ const fadeOut = keyframes`
11
+ from { opacity: 1; transform: translateY(0); }
12
+ to { opacity: 0; transform: translateY(-10px); }
13
+ `;
14
+
15
+ interface AlertContainerProps {
16
+ $type: AlertType;
17
+ $dismissible?: boolean;
18
+ $isClosing: boolean;
19
+ }
20
+
21
+ const typeStyles = {
22
+ error: css`
23
+ background-color: var(--red);
24
+ border: 1px solid var(--red);
25
+ color: var(--white);
26
+ svg {
27
+ color: var(--white);
28
+ }
29
+ `,
30
+ warning: css`
31
+ background-color: var(--yellow-500);
32
+ border: 1px solid var(--yellow-400);
33
+ color: var(--black);
34
+ svg {
35
+ color: var(--black);
36
+ }
37
+ `,
38
+ info: css`
39
+ background-color: var(--blue);
40
+ border: 1px solid var(--blue);
41
+ color: var(--white);
42
+ svg {
43
+ color: var(--white);
44
+ }
45
+ `,
46
+ success: css`
47
+ background-color: var(--green);
48
+ border: 1px solid var(--green-2);
49
+ color: var(--white);
50
+ svg {
51
+ color: var(--white);
52
+ }
53
+ `,
54
+ };
55
+
56
+ export const AlertContainer = styled.div<AlertContainerProps>`
57
+ position: fixed;
58
+ width: 500px;
59
+ top: 15px;
60
+ right: 15px;
61
+ padding: 1rem ${({ $dismissible }) => ($dismissible ? "2.5rem" : "1rem")} 1rem
62
+ 1rem;
63
+ margin-bottom: 1rem;
64
+ animation: ${({ $isClosing }) => ($isClosing ? fadeOut : fadeIn)} 0.3s
65
+ ease-out;
66
+ animation-fill-mode: forwards;
67
+ align-items: center;
68
+ gap: 0.5rem;
69
+ box-shadow: var(--shadow-500);
70
+ border-radius: 0.5rem;
71
+ font-size: 1rem;
72
+ font-weight: 500;
73
+
74
+ ${({ $type }) => typeStyles[$type]}
75
+ `;
76
+
77
+ export const DismissButton = styled.button`
78
+ position: absolute;
79
+ background: transparent;
80
+ right: 10px;
81
+ border: none;
82
+ cursor: pointer;
83
+ color: inherit;
84
+ opacity: 1;
85
+ transition: opacity 0.2s;
86
+
87
+ &:hover {
88
+ opacity: 0.7;
89
+ }
90
+
91
+ svg {
92
+ width: 1rem;
93
+ height: 1rem;
94
+ }
95
+ `;
package/src/components/Button/index.tsx ADDED
@@ -0,0 +1,51 @@
1
+ import { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
2
+
3
+ import {
4
+ Button as ButtonComponent,
5
+ Icon,
6
+ LoadingIcon,
7
+ Text,
8
+ TextSubmitting,
9
+ } from "./styles";
10
+
11
+ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
12
+ children: ReactNode;
13
+ icon?: ReactElement;
14
+ isSubmitting?: boolean;
15
+ submittingMessage?: string;
16
+ bgColor?: string;
17
+ bordercolor?: string;
18
+ color?: string;
19
+ height?: string;
20
+ };
21
+
22
+ export function Button({
23
+ children,
24
+ icon,
25
+ isSubmitting = false,
26
+ submittingMessage = "",
27
+ disabled = false,
28
+ color = "#2F2F2F",
29
+ ...rest
30
+ }: ButtonProps) {
31
+ return (
32
+ <ButtonComponent
33
+ isSubmitting={isSubmitting}
34
+ hasSubmittingMessage={submittingMessage.length > 0}
35
+ disabled={isSubmitting || disabled}
36
+ aria-disabled={isSubmitting || disabled}
37
+ hasIcon={!!icon}
38
+ color={color}
39
+ {...rest}
40
+ >
41
+ {icon && !isSubmitting && <Icon data-testid="button-icon">{icon}</Icon>}
42
+ {isSubmitting && <LoadingIcon hasText={submittingMessage.length > 0} />}
43
+ {(!isSubmitting || submittingMessage.length === 0) && (
44
+ <Text className="text">{children}</Text>
45
+ )}
46
+ {isSubmitting && submittingMessage.length > 0 && (
47
+ <TextSubmitting>{submittingMessage}</TextSubmitting>
48
+ )}
49
+ </ButtonComponent>
50
+ );
51
+ }
package/src/components/Button/styles.ts ADDED
@@ -0,0 +1,147 @@
1
+ import { darken } from "polished";
2
+ import styled, { css } from "styled-components";
3
+
4
+ type ButtonProps = {
5
+ hasIcon?: boolean;
6
+ isSubmitting?: boolean;
7
+ hasSubmittingMessage?: boolean;
8
+ bgColor?: string;
9
+ bordercolor?: string;
10
+ color?: string;
11
+ height?: string;
12
+ };
13
+
14
+ export const Icon = styled.span`
15
+ font-size: 0;
16
+ line-height: 0;
17
+ transition: all 0.25s ease;
18
+
19
+ transform: translate3d(-30px, 0px, 0px);
20
+ visibility: hidden;
21
+ opacity: 0;
22
+ margin-right: 0.625rem;
23
+ `;
24
+
25
+ export const Text = styled.span`
26
+ font-family: "Montserrat", sans-serif;
27
+ font-size: 1rem;
28
+ line-height: 1.5rem;
29
+ margin-bottom: -2px;
30
+
31
+ transition: all 0.25s ease;
32
+ `;
33
+
34
+ export const TextSubmitting = styled.span`
35
+ font-family: "Montserrat", sans-serif;
36
+ font-weight: 400;
37
+ font-size: 1rem;
38
+
39
+ transition: all 0.25s ease;
40
+ `;
41
+
42
+ export const LoadingIcon = styled.span.withConfig({
43
+ shouldForwardProp: (prop) => prop !== "hasText",
44
+ })<{ hasText?: boolean }>`
45
+ display: block;
46
+
47
+ width: 1rem;
48
+ height: 1rem;
49
+ border: 0.125rem solid var(--white);
50
+ border-radius: 50%;
51
+ animation: loadingAnimation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
52
+ border-color: var(--white) transparent transparent transparent;
53
+
54
+ margin-right: ${(props) => (props.hasText ? "0.625rem" : "0")};
55
+
56
+ @keyframes loadingAnimation {
57
+ 0% {
58
+ transform: rotate(0deg);
59
+ }
60
+ 100% {
61
+ transform: rotate(360deg);
62
+ }
63
+ }
64
+ `;
65
+
66
+ export const Button = styled.button.withConfig({
67
+ shouldForwardProp: (prop) =>
68
+ ![
69
+ "hasIcon",
70
+ "isSubmitting",
71
+ "hasSubmittingMessage",
72
+ "bgColor",
73
+ "bordercolor",
74
+ "color",
75
+ "height",
76
+ ].includes(prop),
77
+ })<ButtonProps>`
78
+ background: ${(props) => darken(0.1, props?.bgColor || "#F6C76B")};
79
+ color: ${(props) => props?.color || "#2F2F2F"};
80
+ border: 1px solid ${(props) => darken(0.1, props?.bordercolor || "#F6C76B")};
81
+ border-radius: 2px;
82
+
83
+ display: inline-flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ padding: 0 0.75rem;
87
+ height: ${(props) => props?.height || "3.125rem"};
88
+ position: relative;
89
+ font-size: 0;
90
+ line-height: 0;
91
+
92
+ transition: all 0.25s;
93
+
94
+ ${Icon} {
95
+ display: ${(props) => (props?.hasIcon ? "block" : "")};
96
+ }
97
+
98
+ ${Text} {
99
+ transform: ${(props) =>
100
+ props?.hasIcon ? "translate3d(-4.5px, 0px, 0px)" : "unset"};
101
+
102
+ @media print, screen and (min-width: 40em) {
103
+ transform: ${(props) =>
104
+ props?.hasIcon ? "translate3d(-14.5px, 0px, 0px)" : "unset"};
105
+ }
106
+
107
+ color: ${(props) => props?.color || "#2F2F2F"};
108
+ }
109
+
110
+ &:hover {
111
+ background: ${(props) => darken(0.2, props?.bgColor || "#F6C76B")};
112
+ border-color: ${(props) => darken(0.2, props?.bordercolor || "#F6C76B")};
113
+
114
+ ${Icon} {
115
+ opacity: 1;
116
+ visibility: visible;
117
+ transform: translate3d(0px, 0px, 0px);
118
+ }
119
+
120
+ ${Text} {
121
+ transform: ${(props) =>
122
+ props?.hasIcon ? "translate3d(-5px, 0px, 0px)" : "unset"};
123
+ }
124
+ }
125
+
126
+ ${Text} {
127
+ ${(props) =>
128
+ props.isSubmitting &&
129
+ !props.hasSubmittingMessage &&
130
+ css`
131
+ transform: unset;
132
+ opacity: 0;
133
+ `}
134
+ }
135
+
136
+ ${LoadingIcon} {
137
+ ${(props) =>
138
+ props.isSubmitting &&
139
+ !props.hasSubmittingMessage &&
140
+ css`
141
+ display: flex;
142
+ -webkit-box-align: center;
143
+ align-items: center;
144
+ position: absolute;
145
+ `}
146
+ }
147
+ `;