Firebolt Lab

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.11.1",
+  "version": "0.11.2",
   "npmClient": "yarn",
   "command": {
     "publish": {

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",

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",

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",

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",

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",

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",

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",

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,

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",

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",

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 (
     <Router>
       <div className="container" style={{ fontSize: "30px" }}>
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "space-evenly",
-            marginBottom: "20px",
-            borderBottom: "2px solid",
-            padding: "10px",
-            alignItems: "center",
-          }}
-        >
-          <h4>Debug Lab</h4>
-          <Link style={{ textDecoration: "none" }} to="/debug/core">
-            Core{" "}
-          </Link>
-          <Link style={{ textDecoration: "none" }} to="/debug/form">
-            Form
-          </Link>
-        </div>
-        <div style={{ padding: "20px" }}>
-          <Switch>
-            <Route path="/debug/form">
-              <FormDemo />
-            </Route>
-            <Route path="/debug/core">
-              <CoreDemo />
-            </Route>
-            <Route exact path="/">
-              <p>home</p>
-            </Route>
-            <Route exact path="*">
-              <h1
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                }}
-              >
-                <img
-                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSAuhF8WgdyUkYM7UtRzt0ZbiwWbN_SlShhUuOX766kRAKtgXKKwmuZUO5eFCBIXC5VcXM&usqp=CAU"
-                  alt="Algo de errado não está certo."
-                />{" "}
-                {/* &#128540;&#128514;
-                <img src="https://pa1.narvii.com/6326/5c4a1bb861089e73828287285446e268c69e1012_00.gif" alt="Algo de errado não está certo." /> */}
-                <p style={{ fontSize: "100px" }}>&#129300;404&#128579;</p>
-              </h1>
-            </Route>
-          </Switch>
-        </div>
+        <Header />
+        <Switch>
+          <Route path="/debug/form">
+            <FormDemo />
+          </Route>
+          <Route path="/debug/core">
+            <CoreDemo />
+          </Route>
+          <Route exact path="/">
+            <Home />
+          </Route>
+          <Route exact path="*">
+            <NotFound />
+          </Route>
+        </Switch>
       </div>
     </Router>
   )

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,
+  }
+}

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 (
+    <div className={`header ${darkModeStyle}`}>
+      <Container>
+        <div className="header-menu">
+          <Link className="header-link" to="/">
+            <Text
+              as="h4"
+              variant="heading-medium"
+              variantDesk="display-small"
+              color={textColor}
+            >
+              Debug Lab 🧪
+            </Text>
+          </Link>
+          <div className="header-nav">
+            <Link className="header-link" to="/debug/core">
+              <Text
+                as="p"
+                variant="body-medium"
+                variantDesk="heading-small"
+                weight="semibold"
+                color={textColor}
+              >
+                Core
+              </Text>
+            </Link>
+            <Link className="header-link" to="/debug/form">
+              <Text
+                as="p"
+                variant="body-medium"
+                variantDesk="heading-small"
+                weight="semibold"
+                color={textColor}
+              >
+                Form
+              </Text>
+            </Link>
+            <button
+              onClick={toggleDarkMode}
+              className={`dark-mode-toggle ${darkModeStyle}`}
+              title={isDarkMode ? "Ativar modo claro" : "Ativar modo escuro"}
+            >
+              {isDarkMode ? "☀️" : "🌙"}
+            </button>
+          </div>
+        </div>
+      </Container>
+    </div>
+  )
+}
+
+export default Header

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;
+}

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 (
+    <div className="loader-container">
+      <Spinner size={80} color={COLOR_SUCCESS_30} />
+      <p className="loader-text">Carregando...</p>
+    </div>
+  )
+}
+
+export default Loader

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;
+}