mariohmol · Apr 13, 2026 · Apr 12, 2026 · Apr 12, 2026 · Apr 12, 2026 · Apr 12, 2026
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,17 @@
+name: CI
+
+on:
+  push:
+    branches: ["**"]
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - run: npm install --legacy-peer-deps --ignore-scripts
+      - run: CI=1 npx jest
diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json
@@ -0,0 +1,13 @@
+{
+  "files": {
+    "main.css": "/react-brazil/static/css/main.25f996dd.css",
+    "main.js": "/react-brazil/static/js/main.c8819b2c.js",
+    "index.html": "/react-brazil/index.html",
+    "main.25f996dd.css.map": "/react-brazil/static/css/main.25f996dd.css.map",
+    "main.c8819b2c.js.map": "/react-brazil/static/js/main.c8819b2c.js.map"
+  },
+  "entrypoints": [
+    "static/css/main.25f996dd.css",
+    "static/js/main.c8819b2c.js"
+  ]
+}
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/react-brazil/manifest.json"><title>react-brazil</title><script defer="defer" src="/react-brazil/static/js/main.c8819b2c.js"></script><link href="/react-brazil/static/css/main.25f996dd.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/docs/manifest.json b/docs/manifest.json
@@ -0,0 +1,8 @@
+{
+  "short_name": "react-brazil",
+  "name": "react-brazil",
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/docs/static/css/main.25f996dd.css b/docs/static/css/main.25f996dd.css
diff --git a/docs/static/css/main.25f996dd.css.map b/docs/static/css/main.25f996dd.css.map
diff --git a/docs/static/js/main.c8819b2c.js b/docs/static/js/main.c8819b2c.js
diff --git a/docs/static/js/main.c8819b2c.js.LICENSE.txt b/docs/static/js/main.c8819b2c.js.LICENSE.txt
@@ -0,0 +1,56 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+/** @license React v0.19.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.14.0
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.14.0
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.14.0
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
diff --git a/docs/static/js/main.c8819b2c.js.map b/docs/static/js/main.c8819b2c.js.map
diff --git a/example/package.json b/example/package.json
@@ -5,6 +5,7 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "ajv": "^8.18.0",
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-brazil": "file:..",
@@ -17,5 +18,17 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }
diff --git a/example/src/App.js b/example/src/App.js
@@ -1,46 +1,144 @@
 import React, { Component } from 'react'
 
 import {
-  BrazilFormatComponent,
   BrazilMaskComponent,
   BrazilValidateComponent
 } from 'react-brazil'
 
-import {
-  // estados,
-  // DATAERROR,
-  // DATARAW,
-  DATA,
-} from './utils';
+import { DATA, DATAERROR } from './utils';
 
-export default class App extends Component {
+const FORMATS = ['cpf', 'cnpj', 'cep', 'rg', 'telefone', 'placa', 'renavam', 'titulo', 'time', 'currency']
+
+const css = {
+  page:  { maxWidth: 860, margin: '0 auto', padding: '24px 16px', fontFamily: 'sans-serif' },
+  table: { width: '100%', borderCollapse: 'collapse', marginBottom: 32 },
+  th:    { textAlign: 'left', padding: '8px 12px', background: '#f6f8fa', borderBottom: '2px solid #ddd', fontWeight: 600 },
+  td:    { padding: '8px 12px', borderBottom: '1px solid #eee', verticalAlign: 'middle' },
+  badge: (ok, empty) => ({
+    display: 'inline-block',
+    padding: '2px 10px',
+    borderRadius: 12,
+    fontWeight: 600,
+    fontSize: 13,
+    background: empty ? '#f6f8fa' : ok ? '#dafbe1' : '#ffe3e3',
+    color:      empty ? '#888'    : ok ? '#1a7f37' : '#cf222e',
+    minWidth: 80,
+    textAlign: 'center',
+  }),
+  mono: { fontFamily: 'monospace', fontSize: 13 },
+}
+
+const inputStyle = {
+  padding: '6px 10px',
+  fontFamily: 'monospace',
+  border: '1px solid #ccc',
+  borderRadius: 4,
+  width: 200,
+  fontSize: 14,
+}
+
+class ValidatedRow extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { value: DATA[props.format] || '' }
+  }
+
+  render() {
+    const { format } = this.props
+    const { value } = this.state
+    // treat as empty when only mask placeholders remain (underscores)
+    const empty = !value || value.replace(/[_]/g, '').replace(/[^a-zA-Z0-9]/g, '').trim() === ''
 
+    return (
+      <tr>
+        <td style={css.td}><code>{format}</code></td>
+        <td style={css.td}>
+          <BrazilMaskComponent
+            defaultValue={DATA[format] || ''}
+            format={format}
+            style={inputStyle}
+            onChange={e => this.setState({ value: e.target.value })}
+          />
+        </td>
+        <td style={css.td}>
+          {empty ? (
+            <span style={css.badge(false, true)}>—</span>
+          ) : (
+            <BrazilValidateComponent format={format} value={value}>
+              {isValid => (
+                <span style={css.badge(isValid, false)}>
+                  {isValid ? '✓ valid' : '✗ invalid'}
+                </span>
+              )}
+            </BrazilValidateComponent>
+          )}
+        </td>
+      </tr>
+    )
+  }
+}
 
+export default class App extends Component {
   render() {
     return (
-      <div className="container">
+      <div style={css.page}>
         <h1>React Brazil</h1>
 
-        <h2>Format</h2>
-        {Object.keys(DATA).map(key=>(<div>
-          <h3>{key}: </h3>
-          <BrazilFormatComponent value={DATA[key]} format={key}/>
-          </div>))}
-
-          <h2>Mask</h2>
-          {Object.keys(DATA).map(key=>(<div>
-          <h3>{key}: </h3>
-         { typeof DATA[key] === 'string' ? 
-         <BrazilMaskComponent value={DATA[key]} format={key}/> : ''} 
-          </div>))}
-
-          <h2>Validate</h2>
-          {Object.keys(DATA).map(key=>(<div>
-          <h3>{key}: </h3>
-          <BrazilValidateComponent value={DATA[key]} format={key}/>
-          </div>))}
+        {/* ── MASK + LIVE VALIDATE ── */}
+        <h2>Mask &amp; Validate</h2>
+        <p style={{ color: '#555', marginBottom: 16 }}>
+          Inputs use <code>BrazilMaskComponent</code> pre-filled with example values.
+          Edit any field to see <code>BrazilValidateComponent</code> update in real time.
+        </p>
+        <table style={css.table}>
+          <thead>
+            <tr>
+              <th style={css.th}>Format</th>
+              <th style={css.th}>Masked input</th>
+              <th style={css.th}>Valid?</th>
+            </tr>
+          </thead>
+          <tbody>
+            {FORMATS.map(f => <ValidatedRow key={f} format={f} />)}
+          </tbody>
+        </table>
+
+        {/* ── STATIC VALID/INVALID ── */}
+        <h2>Static examples</h2>
+        <p style={{ color: '#555', marginBottom: 16 }}>
+          Known-valid vs known-invalid values passed directly to <code>BrazilValidateComponent</code>.
+        </p>
+        <table style={css.table}>
+          <thead>
+            <tr>
+              <th style={css.th}>Format</th>
+              <th style={css.th}>Valid value</th>
+              <th style={css.th}></th>
+              <th style={css.th}>Invalid value</th>
+              <th style={css.th}></th>
+            </tr>
+          </thead>
+          <tbody>
+            {FORMATS.map(key => DATA[key] && DATAERROR[key] && typeof DATA[key] === 'string' ? (
+              <tr key={key}>
+                <td style={css.td}><code>{key}</code></td>
+                <td style={{ ...css.td, ...css.mono }}>{DATA[key]}</td>
+                <td style={css.td}>
+                  <BrazilValidateComponent format={key} value={DATA[key]}>
+                    {isValid => <span style={css.badge(isValid, false)}>{isValid ? '✓ valid' : '✗ invalid'}</span>}
+                  </BrazilValidateComponent>
+                </td>
+                <td style={{ ...css.td, ...css.mono }}>{DATAERROR[key]}</td>
+                <td style={css.td}>
+                  <BrazilValidateComponent format={key} value={DATAERROR[key]}>
+                    {isValid => <span style={css.badge(isValid, false)}>{isValid ? '✓ valid' : '✗ invalid'}</span>}
+                  </BrazilValidateComponent>
+                </td>
+              </tr>
+            ) : null)}
+          </tbody>
+        </table>
       </div>
     )
   }
-
-}
+}
diff --git a/example/src/utils.js b/example/src/utils.js
@@ -38,7 +38,7 @@ export const DATA = {
     number: '1.234,56',
     time: '06:33',
     placa: 'ADJ-5468',
-    titulo: '2053.9588.0384'
+    titulo: '2053.9588.0310'
 }
 
 // const rawIE = {};
@@ -98,7 +98,7 @@ export const DATAERROR = {
     cpf: '15663188151',
     cnpj: '40841253000101',
     cep: '3123456',
-    rg: 'MG1012345',
+    rg: 'ZZ-10.123.456',
     telefone: '319999999',
     inscricaoestadual: {
         ac: '01004823001126',

diff --git a/jest.config.js b/jest.config.js
@@ -2,13 +2,13 @@ module.exports = {
     preset: 'ts-jest',
     testEnvironment: 'node',
     testMatch: ["tests/*.tsx", "**/?(*.)+(test).ts?(x)"],
-    "setupTestFrameworkScriptFile": "<rootDir>tests/setupTests.ts",
-    "roots": [
+    setupFilesAfterEnv: ["<rootDir>/tests/setupTests.ts"],
+    roots: [
         "<rootDir>/src",
         "<rootDir>/tests",
         "<rootDir>/node_modules/js-brasil"
-      ],
-    "transform": {
+    ],
+    transform: {
         "^.+\\.tsx?$": "ts-jest"
     },
     globals: {

diff --git a/package.json b/package.json
@@ -21,16 +21,17 @@
     "build": "rollup -c",
     "start": "rollup -c -w",
     "prepare": "npm run build",
-    "predeploy": "cd example && npm install && npm run build",
-    "deploy": "gh-pages -d example/build",
+    "predeploy": "node node_modules/.bin/rollup -c && cd example && npm install && npm run build",
+    "deploy": "cp -r example/build/. docs/",
+    "deploy:gh-pages": "npm run predeploy && npm run deploy",
+    "deploy:demo": "node node_modules/.bin/rollup -c && cd example && npm run build && cp -r build/. /var/www/test/react-brazil/",
     "publish-npm": "npm run build && npm publish"
   },
   "dependencies": {
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/react-text-mask": "^5.4.6",
     "js-brasil": "^1.4.3",
-    "node-sass": "^9.0.0",
     "react-text-mask": "^5.4.3"
   },
   "peerDependencies": {
@@ -53,12 +54,14 @@
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-scripts-ts": "^4.0.8",
-    "rollup": "^0.62.0",
+    "rollup": "^1.32.1",
     "rollup-plugin-babel": "^3.0.7",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^2.0.3",
+    "fastparse": "^1.1.2",
+    "rollup-plugin-postcss": "^1.6.3",
+    "sass": "^1.77.0",
     "rollup-plugin-typescript2": "^0.25.2",
     "rollup-plugin-url": "^1.4.0",
     "ts-jest": "^24.0.2",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/react-brazil/manifest.json"><title>react-brazil</title><script defer="defer" src="/react-brazil/static/js/main.c8819b2c.js"></script><link href="/react-brazil/static/css/main.25f996dd.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>