diff --git a/lerna.json b/lerna.json index 0c14e7f2..fa0c8f20 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "packages/*" ], - "version": "0.11.1", + "version": "0.11.2", "npmClient": "yarn", "command": { "publish": { diff --git a/package.json b/package.json index 0979d259..bf2c26eb 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "prepare": "husky" }, "devDependencies": { + "@consumidor-positivo/aurora": "0.1.1", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-transform-class-properties": "^7.27.1", "@babel/preset-typescript": "^7.27.1", diff --git a/packages/atlas-theme/package.json b/packages/atlas-theme/package.json index 4e90c426..fd042513 100644 --- a/packages/atlas-theme/package.json +++ b/packages/atlas-theme/package.json @@ -1,6 +1,6 @@ { "name": "@iq-firebolt/atlas-theme", - "version": "0.11.1", + "version": "0.11.2", "description": "> ATLAS Theme", "author": "iq team", "homepage": "https://github.com/IQ-tech/firebolt#readme", diff --git a/packages/aurora-theme/package.json b/packages/aurora-theme/package.json index 1410790f..bb56b34c 100644 --- a/packages/aurora-theme/package.json +++ b/packages/aurora-theme/package.json @@ -1,6 +1,6 @@ { "name": "@iq-firebolt/aurora-theme", - "version": "0.11.1", + "version": "0.11.2", "description": "> AURORA Theme", "author": "iq team", "homepage": "https://github.com/IQ-tech/firebolt#readme", diff --git a/packages/blueberry/package.json b/packages/blueberry/package.json index 245919ef..fbd0a412 100644 --- a/packages/blueberry/package.json +++ b/packages/blueberry/package.json @@ -1,6 +1,6 @@ { "name": "@iq-firebolt/blueberry-theme", - "version": "0.11.1", + "version": "0.11.2", "description": "> TODO: description", "author": "iq team", "homepage": "https://github.com/IQ-tech/firebolt#readme", diff --git a/packages/br-addons/package.json b/packages/br-addons/package.json index dc2474db..961c4c53 100644 --- a/packages/br-addons/package.json +++ b/packages/br-addons/package.json @@ -1,6 +1,6 @@ { "name": "@iq-firebolt/br-addons", - "version": "0.11.1", + "version": "0.11.2", "description": "> TODO: description", "author": "iq team", "homepage": "https://github.com/IQ-tech/firebolt#readme", diff --git a/packages/client-core/package.json b/packages/client-core/package.json index d0d56f8d..dc88bc4d 100644 --- a/packages/client-core/package.json +++ b/packages/client-core/package.json @@ -1,6 +1,6 @@ { "name": "@iq-firebolt/client-core", - "version": "0.11.1", + "version": "0.11.2", "description": "> TODO: description", "author": "iq team", "homepage": "https://github.com/IQ-tech/firebolt#readme", diff --git a/packages/client/package.json b/packages/client/package.json index 3abb34a2..5257898e 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -1,6 +1,6 @@ { "name": "@iq-firebolt/client", - "version": "0.11.1", + "version": "0.11.2", "description": "> TODO: description", "author": "iq team", "homepage": "https://github.com/IQ-tech/firebolt#readme", @@ -36,8 +36,8 @@ }, "dependencies": { "@babel/runtime": "^7.16.3", - "@iq-firebolt/client-core": "0.11.1", - "@iq-firebolt/validators": "0.11.1", + "@iq-firebolt/client-core": "0.11.2", + "@iq-firebolt/validators": "0.11.2", "classnames": "^2.3.1", "fast-levenshtein": "^3.0.0", "regex-parser": "^2.2.11", diff --git a/packages/entities/package.json b/packages/entities/package.json index 997312e1..69337ecb 100644 --- a/packages/entities/package.json +++ b/packages/entities/package.json @@ -1,6 +1,6 @@ { "name": "@iq-firebolt/entities", - "version": "0.11.1", + "version": "0.11.2", "description": "> TODO: description", "author": "iq team", "private": true, diff --git a/packages/json-schema/package.json b/packages/json-schema/package.json index 6dd5b274..64393645 100644 --- a/packages/json-schema/package.json +++ b/packages/json-schema/package.json @@ -1,6 +1,6 @@ { "name": "@iq-firebolt/json-schema", - "version": "0.11.1", + "version": "0.11.2", "description": "json schema lib", "author": "iq team", "homepage": "https://github.com/IQ-tech/firebolt#readme", diff --git a/packages/lab/package.json b/packages/lab/package.json index 87a5e01b..5da5f543 100644 --- a/packages/lab/package.json +++ b/packages/lab/package.json @@ -1,14 +1,14 @@ { "name": "@iq-firebolt/lab", - "version": "0.11.1", + "version": "0.11.2", "private": true, "license": "Apache-2.0", "dependencies": { - "@iq-firebolt/blueberry-theme": "0.11.1", - "@iq-firebolt/br-addons": "0.11.1", - "@iq-firebolt/client": "0.11.1", - "@iq-firebolt/client-core": "0.11.1", - "@iq-firebolt/material-theme": "0.11.1", + "@iq-firebolt/blueberry-theme": "0.11.2", + "@iq-firebolt/br-addons": "0.11.2", + "@iq-firebolt/client": "0.11.2", + "@iq-firebolt/client-core": "0.11.2", + "@iq-firebolt/material-theme": "0.11.2", "iq-blueberry": "^0.0.88", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/packages/lab/src/app/App.jsx b/packages/lab/src/app/App.jsx index 8e615fd6..10fde933 100644 --- a/packages/lab/src/app/App.jsx +++ b/packages/lab/src/app/App.jsx @@ -1,60 +1,31 @@ import FormDemo from "./pages/debug/FormDemo" import CoreDemo from "./pages/debug/Core" -import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom" +import { BrowserRouter as Router, Switch, Route } from "react-router-dom" +import Header from "./components/Header" import "iq-blueberry/dist/styles.css" +import "./darkmode.css" +import { NotFound } from "./components/NotFound" +import Home from "./pages/Home" const App = () => { return (
-
-

Debug Lab

- - Core{" "} - - - Form - -
-
- - - - - - - - -

home

- - -

- Algo de errado não está certo.{" "} - {/* 😜😂 - Algo de errado não está certo. */} -

🤔404🙃

-

- - -
+
+ + + + + + + + + + + + + +
) diff --git a/packages/lab/src/app/components/Header/hook.js b/packages/lab/src/app/components/Header/hook.js new file mode 100644 index 00000000..91188f03 --- /dev/null +++ b/packages/lab/src/app/components/Header/hook.js @@ -0,0 +1,26 @@ +import { useState, useEffect } from "react" + +export const useDarkMode = () => { + const [isDarkMode, setIsDarkMode] = useState(() => { + const saved = localStorage.getItem("darkMode") + return saved === "true" + }) + + useEffect(() => { + localStorage.setItem("darkMode", isDarkMode) + if (isDarkMode) { + document.body.classList.add("dark-mode") + } else { + document.body.classList.remove("dark-mode") + } + }, [isDarkMode]) + + const toggleDarkMode = () => { + setIsDarkMode(!isDarkMode) + } + + return { + isDarkMode, + toggleDarkMode, + } +} diff --git a/packages/lab/src/app/components/Header/index.jsx b/packages/lab/src/app/components/Header/index.jsx new file mode 100644 index 00000000..073000ce --- /dev/null +++ b/packages/lab/src/app/components/Header/index.jsx @@ -0,0 +1,63 @@ +import { Link } from "react-router-dom" +import { useDarkMode } from "./hook" +import "./styles.css" +import { Container, Text } from "@consumidor-positivo/aurora" + +const Header = () => { + const { isDarkMode, toggleDarkMode } = useDarkMode() + + const textColor = isDarkMode ? "white" : "common" + const darkModeStyle = isDarkMode ? "dark" : "light" + + return ( +
+ +
+ + + Debug Lab 🧪 + + +
+ + + Core + + + + + Form + + + +
+
+ +
+ ) +} + +export default Header diff --git a/packages/lab/src/app/components/Header/styles.css b/packages/lab/src/app/components/Header/styles.css new file mode 100644 index 00000000..78668d9d --- /dev/null +++ b/packages/lab/src/app/components/Header/styles.css @@ -0,0 +1,66 @@ +.header { + background-color: #313131; + height: 96px; + border-bottom: 2px solid #04d98c; + display: flex; + align-items: center; +} + +.header.light { + background-color: #f6f7fa; + border-bottom: 2px solid #e2e4e9; + color: #000; +} + +.header-menu { + display: flex; + justify-content: space-between; + align-items: center; +} + +.header-nav { + display: flex; + gap: 16px; + justify-content: center; + align-items: center; + + @media (min-width: 768px) { + gap: 32px; + } +} + +.header h4 { + margin: 0; +} + +.header-link { + text-decoration: none; +} + +.dark-mode-toggle { + height: 50px; + width: 50px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 100%; + border: 2px solid; + cursor: pointer; + font-size: 24px; + transition: all 0.3s ease; +} + +.dark-mode-toggle.light { + background: #004155; + border-color: #e2e4e9; +} + +.dark-mode-toggle.dark { + background-color: #333; + color: #e0e0e0; + border-color: #555; +} + +.dark-mode-toggle:hover { + opacity: 0.8; +} diff --git a/packages/lab/src/app/components/Loader/index.jsx b/packages/lab/src/app/components/Loader/index.jsx new file mode 100644 index 00000000..0ac6bc9c --- /dev/null +++ b/packages/lab/src/app/components/Loader/index.jsx @@ -0,0 +1,13 @@ +import { COLOR_BRAND_BLUE_50, COLOR_SUCCESS_30, Spinner } from "@consumidor-positivo/aurora" +import "./styles.css" + +const Loader = () => { + return ( +
+ +

Carregando...

+
+ ) +} + +export default Loader diff --git a/packages/lab/src/app/components/Loader/styles.css b/packages/lab/src/app/components/Loader/styles.css new file mode 100644 index 00000000..e7c9bd46 --- /dev/null +++ b/packages/lab/src/app/components/Loader/styles.css @@ -0,0 +1,17 @@ +.loader-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 24px; + height: 80vh; +} +.loader-text { + margin: 0; + font-size: 24px; + color: #666; +} + +body.dark-mode .loader-text { + color: #e0e0e0; +} diff --git a/packages/lab/src/app/components/NotFound/index.jsx b/packages/lab/src/app/components/NotFound/index.jsx new file mode 100644 index 00000000..46349718 --- /dev/null +++ b/packages/lab/src/app/components/NotFound/index.jsx @@ -0,0 +1,19 @@ +export const NotFound = () => { + return ( +

+ Algo de errado não está certo. +

🤔404🙃

+

+ ) +} \ No newline at end of file diff --git a/packages/lab/src/app/components/templates/DefaultTemplate.jsx b/packages/lab/src/app/components/templates/DefaultTemplate.jsx deleted file mode 100644 index 719f7ae6..00000000 --- a/packages/lab/src/app/components/templates/DefaultTemplate.jsx +++ /dev/null @@ -1,87 +0,0 @@ -import { useEffect } from "react" -import { StepForm, FireboltForm, useFirebolt } from "@iq-firebolt/client/src" -// import Theme from "@iq-firebolt/blueberry-theme" -import { CheckboxGroup } from "iq-blueberry" -/* import Theme from "@iq-firebolt/material-theme" */ -// import Theme from "../../../../../atlas-theme/index" - -import Theme from "../../../../../aurora-theme/index" - -const mockFields = [ - { - "slug": "full_name", - "ui:widget": "Text", - "ui:props": { - "label": "Nome completo", - "placeholder": "Nome completo", - }, - "validators": [{ "type": "required" }], - "meta": {}, - }, - { - "slug": "name", - "ui:widget": "Text", - "ui:props": { - "label": "Nome completo", - "placeholder": "Nome completo", - }, - "validators": [{ "type": "required" }, { "type": "name" }], - "meta": {}, - }, - { - "slug": "cpf", - "ui:widget": "Text", - "ui:props": { - "label": "teste", - "mask": [ - "/\\d/", - "/\\d/", - "/\\d/", - ".", - "/\\d/", - "/\\d/", - "/\\d/", - ".", - "/\\d/", - "/\\d/", - "/\\d/", - "-", - "/\\d/", - "/\\d/", - ], - }, - "ui:styles": { - "size": "half", - }, - "validators": [{ "type": "required" }, { "type": "cpf" }], - "meta": {}, - }, - { - "slug": "hehe", - "ui:widget": "Check", - "ui:props": { - "label": "Email", - "placeholder": "contato@email.com", - }, - "validators": [{ "type": "required" }], - "meta": {}, - }, -] - -const DefaultTemplate = ({ fireboltStep }) => { - return ( -
-
-

{fireboltStep?.friendlyName}

-
- fireboltStep.goNextStep(payload)} - onGoBack={fireboltStep.goPreviousStep} - > -
-
- ) -} - -export default DefaultTemplate diff --git a/packages/lab/src/app/components/templates/DefaultTemplate/index.jsx b/packages/lab/src/app/components/templates/DefaultTemplate/index.jsx new file mode 100644 index 00000000..449314e9 --- /dev/null +++ b/packages/lab/src/app/components/templates/DefaultTemplate/index.jsx @@ -0,0 +1,54 @@ +import { StepForm } from "@iq-firebolt/client/src" + +import Theme from "../../../../../../aurora-theme/index" +import { + Button, + Container, + ProgressBar, + Text, +} from "@consumidor-positivo/aurora" +import "./styles.css" + +const DefaultTemplate = ({ fireboltStep }) => { + return ( + +
+ +
+ + {fireboltStep?.friendlyName} + +
+ fireboltStep.goNextStep(payload)} + onGoBack={fireboltStep.goPreviousStep} + customActionsChild={({ formData }) => ( +
+ + +
+ )} + > +
+ + ) +} + +export default DefaultTemplate diff --git a/packages/lab/src/app/components/templates/DefaultTemplate/styles.css b/packages/lab/src/app/components/templates/DefaultTemplate/styles.css new file mode 100644 index 00000000..6b8b4bd5 --- /dev/null +++ b/packages/lab/src/app/components/templates/DefaultTemplate/styles.css @@ -0,0 +1,15 @@ +.default-template-container { + max-width: 600px; + margin: 40px auto; +} + +.default-template-actions { + display: flex; + flex-direction: column; + gap: 24px; + margin-top: 24px; +} + +.default-template-title { + margin-bottom: 16px; +} diff --git a/packages/lab/src/app/darkmode.css b/packages/lab/src/app/darkmode.css new file mode 100644 index 00000000..a6530105 --- /dev/null +++ b/packages/lab/src/app/darkmode.css @@ -0,0 +1,37 @@ +/* Dark Mode Styles */ +body { + transition: background-color 0.3s ease, color 0.3s ease; +} + +body.dark-mode { + background-color: #1a1a1a; + color: #e0e0e0; +} + +body.dark-mode .container { + background-color: #1a1a1a; + color: #e0e0e0; +} + +body.dark-mode a { + color: #6eb3ff; +} + +body.dark-mode a:hover { + color: #9cc9ff; +} + +body.dark-mode input, +body.dark-mode select, +body.dark-mode textarea { + background-color: #2a2a2a; + color: #e0e0e0; + border-color: #444; +} + +body.dark-mode .au-text--color-common, +body.dark-mode .au-text--color-secondary, +body.dark-mode .au-field__header-label, +body.dark-mode .au-checkbox__label { + color: #e0e0e0 !important; +} diff --git a/packages/lab/src/app/pages/Home/index.jsx b/packages/lab/src/app/pages/Home/index.jsx new file mode 100644 index 00000000..f873a241 --- /dev/null +++ b/packages/lab/src/app/pages/Home/index.jsx @@ -0,0 +1,30 @@ +import { Container, Text } from "@consumidor-positivo/aurora" +import "./styles.css" + +const Home = () => { + return ( + +
+ + Welcome to Firebolt Lab ✨ + + + Explore and debug your forms easily! + +
+ + + Visit the documentation to get started. + + +
+ + ) +} + +export default Home diff --git a/packages/lab/src/app/pages/Home/styles.css b/packages/lab/src/app/pages/Home/styles.css new file mode 100644 index 00000000..2ddbeaa0 --- /dev/null +++ b/packages/lab/src/app/pages/Home/styles.css @@ -0,0 +1,35 @@ +.home-container { + margin: 40px auto; + height: 70vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} + +.home-link { + text-decoration: none; + display: inline-block; + border-radius: 32px; + padding: 12px 24px; + border: 2px solid #04d98c; + color: #013220; + margin-top: 16px; + transition: all 0.3s ease; +} + +.home-link:hover { + background-color: #04d98c; + transform: translateY(-2px); +} + +body.dark-mode .home-link { + border-color: #04d98c; + color: #04d98c; +} + +body.dark-mode .home-link:hover { + background-color: #04d98c; + color: #013220; +} diff --git a/packages/lab/src/app/pages/debug/Core.jsx b/packages/lab/src/app/pages/debug/Core.jsx index aa65deee..ce4f55f5 100644 --- a/packages/lab/src/app/pages/debug/Core.jsx +++ b/packages/lab/src/app/pages/debug/Core.jsx @@ -3,6 +3,7 @@ import { useEffect, useState, useRef } from "react" import { createFireboltForm } from "@iq-firebolt/client-core" import * as S from "./styles.js" import transmorphersPropsPresets from "../../constants/transmorphers-props-presets" +import { Button } from "@consumidor-positivo/aurora" // import BrPropsPresets from "@iq-firebolt/br-presets" @@ -58,15 +59,13 @@ const CoreTest = () => { return (

stepSlug: {stepSlug}

-
- {/* */} - - - + +
) diff --git a/packages/lab/src/app/pages/debug/FormDemo.jsx b/packages/lab/src/app/pages/debug/FormDemo.jsx index 84670255..12906bff 100644 --- a/packages/lab/src/app/pages/debug/FormDemo.jsx +++ b/packages/lab/src/app/pages/debug/FormDemo.jsx @@ -4,6 +4,7 @@ import CustomFormTemplate from "../../components/templates/CustomFormTemplate" import { createFireboltProvider, Wizard } from "@iq-firebolt/client/src" import transmorphersPropsPresets from "../../constants/transmorphers-props-presets" import { propsPresets } from "@iq-firebolt/br-addons" +import Loader from "../../components/Loader" const withFirebolt = createFireboltProvider({ formAccess: { @@ -274,7 +275,7 @@ const FormDemo = () => { return (
Carregando....

} + fallback={} onFinishForm={(payload) => { // console.log("finish form:", payload); }} diff --git a/packages/lab/src/app/pages/debug/styles.js b/packages/lab/src/app/pages/debug/styles.js index ab811f4a..469ca305 100644 --- a/packages/lab/src/app/pages/debug/styles.js +++ b/packages/lab/src/app/pages/debug/styles.js @@ -1,8 +1,9 @@ export const styleButton = { - fontSize: "15px", - width: "100px", - height: "30px", - margin: "20px", + display: "flex", + justifyContent: "center", + alignItems: "center", + gap: "8px", + margin: "16px" } export const styleContainer = { diff --git a/packages/lab/src/index.html b/packages/lab/src/index.html index ef6afe21..f18cf6c8 100644 --- a/packages/lab/src/index.html +++ b/packages/lab/src/index.html @@ -4,7 +4,7 @@ - Document + Firebolt Lab
diff --git a/packages/material-theme/package.json b/packages/material-theme/package.json index 3782181a..b158f34a 100644 --- a/packages/material-theme/package.json +++ b/packages/material-theme/package.json @@ -1,6 +1,6 @@ { "name": "@iq-firebolt/material-theme", - "version": "0.11.1", + "version": "0.11.2", "description": "> TODO: description", "author": "iq team", "homepage": "https://github.com/IQ-tech/firebolt#readme", diff --git a/packages/validators/package.json b/packages/validators/package.json index 6d490ec4..64dacbeb 100644 --- a/packages/validators/package.json +++ b/packages/validators/package.json @@ -1,6 +1,6 @@ { "name": "@iq-firebolt/validators", - "version": "0.11.1", + "version": "0.11.2", "description": "> TODO: description", "author": "iq team", "homepage": "https://github.com/IQ-tech/firebolt#readme", diff --git a/yarn.lock b/yarn.lock index 472888fb..16f9516f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1116,6 +1116,19 @@ optionalDependencies: "@rollup/rollup-linux-x64-gnu" "4.21.1" +"@consumidor-positivo/aurora@0.1.1": + version "0.1.1" + resolved "https://registry.yarnpkg.com/@consumidor-positivo/aurora/-/aurora-0.1.1.tgz#b9cf6d299b0e5fd28b10f00543827bfc88b77e6e" + integrity sha512-RuacqzarRJRh9w9iUhrZk5vDBHWsPYF9RcT7SafPMlo3aX8/Wy834gGgRffBCEu0YATfi0aqyP6YMN16eLitWA== + dependencies: + dotenv "16.4.5" + react-aria-components "1.3.3" + react-if "4.1.6" + vite-plugin-dts "4.0.0-beta.1" + vitest "3.2.4" + optionalDependencies: + "@rollup/rollup-linux-x64-gnu" "4.21.1" + "@csstools/color-helpers@^5.1.0": version "5.1.0" resolved "https://registry.yarnpkg.com/@csstools/color-helpers/-/color-helpers-5.1.0.tgz#106c54c808cabfd1ab4c602d8505ee584c2996ef" @@ -11456,7 +11469,7 @@ vite-plugin-dts@4.0.0-beta.1: optionalDependencies: fsevents "~2.3.3" -vitest@^3.2.4: +vitest@3.2.4, vitest@^3.2.4: version "3.2.4" resolved "https://registry.yarnpkg.com/vitest/-/vitest-3.2.4.tgz#0637b903ad79d1539a25bc34c0ed54b5c67702ea" integrity sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==