doc: readme.md

app.js

@@ -1,5 +1,4 @@
 import routes from "./routes/index.js"; //pega o valor retornado do gereneciador de rotas
-import {BuildComponent} from "./rosaura/rozaura/index.js"
 //função chamda dentro da index.js, retorna component
 export default function(){
     return routes() //retorna o valor do gerenciador de rotas

index.html

@@ -14,5 +14,4 @@
 </body>
 </html>
 
-<script type="module" src="./index.js"></script>
-
+<script type="module" src="./index.js"></script>

index.js

@@ -1,12 +1,10 @@
-
-
-import Rosaura from "./rosaura/rozaura/index.js"; //Rosaura é o objecto geral que gerencia o framework
+import {BuildRootComponent} from "./rosaura/rozaura/index.js"; //Rosaura é o objecto geral que gerencia o framework
 import app from "./app.js"; //app é a função que rotorna o componente a ser mostrado no root element
 
 //função principal a ser chamada
 //usa a função que referencia o root elemente, e atribui o elemento dentro 
-const main =function(){
-    Rosaura.BuildRootComponent(app()) //Instancia o root
+const main = function(){
+    BuildRootComponent(app()) //Instancia o root
 }
 main() //chamada damain
 

readme.md

@@ -1,7 +1,191 @@
-# Mini FrameWork
-brevemente nova documentação
+# Rosaura Framework
 
-# Roda em live server
+Rosaura é um framework leve e flexível para a construção de aplicações web dinâmicas. Ele permite a criação de componentes reutilizáveis e a manipulação eficiente de rotas e estados. 
 
+## Índice
+
+- [Visão Geral](#visão-geral)
+- [Estrutura do Projeto](#estrutura-do-projeto)
+- [Instalação](#instalação)
+- [Uso](#uso)
+  - [Criando Componentes](#criando-componentes)
+  - [Gerenciando Rotas](#gerenciando-rotas)
+  - [Manipulação de Variáveis de Estado](#manipulação-de-variáveis-de-estado)
+  - [Formulários e Inputs](#formulários-e-inputs)
+- [Exemplos](#exemplos)
+- [Contribuição](#contribuição)
+- [Licença](#licença)
+
+## Visão Geral 
+
+O Rosaura Framework foi desenvolvido para facilitar a criação de aplicações web, proporcionando uma estrutura para a construção de componentes, gerenciamento de rotas e vinculação de dados. É ideal para desenvolvedores que buscam uma alternativa leve e fácil de usar para frameworks mais pesados.
+
+## Estrutura do Projeto
+
+/project-root
+├── assets
+├── rosaura
+│ ├── rozaura
+│ ├── ...
+├── routes
+├── src
+│ ├── Components
+│ ├── Pages
+│ ├── ...
+├── index.html
+├── index.js
+└── app.js
+
+
+### Principais Pastas e Arquivos
+
+- **assets**: Contém arquivos estáticos como imagens e ícones.
+- **rosaura**: Contém o núcleo do framework, incluindo funções e componentes principais.
+- **routes**: Define as rotas da aplicação.
+- **src**: Contém componentes e páginas personalizadas.
+- **index.html**: O arquivo HTML principal da aplicação.
+- **index.js**: O ponto de entrada da aplicação.
+- **app.js**: Define a estrutura e o gerenciamento de rotas da aplicação.
+
+## Instalação 🚀
+
+Para usar o Rosaura Framework, clone este repositório e abra o arquivo `index.html` em seu navegador, em `live server`
+
+```bash
+git clone https://github.com/luis687687/rosaura.git
+cd rosaura
+open index.html
+```
+
+# Uso 🔥
+## Criando Componentes 💡
+Os componentes são construídos usando a função `BuildComponent`. Por exemplo, para criar um botão simples:
+
+
+```js
+import Rosaura, { BuildComponent } from "../../../rosaura/rozaura/index.js";
+const MeuBotao = () => {
+    return BuildComponent({
+        type: "button",
+        attributes: { id: "meuBotao" },
+        events: {
+            click: () => alert("Botão clicado!")
+        },
+        childElements: ["Clique Aqui"]
+    });
+};
+```
+
+# Gerenciando Rotas 🚗
+O Rosaura Framework fornece um sistema de roteamento simples. As rotas são definidas em `app.js` usando `RosauraRouter` e `RosauraRoute`.
+
+```js
+import Rosaura from "./rosaura/rozaura/index.js";
+import Page1 from "./src/Pages/Page1/index.js";
+import Page2 from "./src/Pages/Page2/index.js";
+
+export default () => {
+    return Rosaura.RosauraRouter(
+        Rosaura.RosauraRoute({
+            routes: [
+                { element: Page1, path: "/page1", attributes: {} },
+                { element: Page2, path: "/page2", attributes: {} }
+            ]
+        })
+    );
+};
+```
+
+# Manipulação de Variáveis de Estado 🎮
+Utilize `defVariable` para criar variáveis de estado e `varMonitor` para monitorar alterações. Por exemplo:
+
+```js
+import { defVariable, varMonitor, varPrint } from "../../../rosaura/rozaura/index.js";
+
+export default ({})=>{
+  const [contador, setContador] = defVariable(0);
+  varMonitor(() => {
+      novoValor = contador.value
+      console.log("O contador foi atualizado para:", novoValor);
+  }, [contador]);
+  return(
+    BuildComponent({
+      childElements: [
+        BuildComponent({text: varPrint("Contador de cliques {} ", [contador]),style: {width: "fit-content"}}),
+         BuildComponent({
+                    style: {
+                        background: 'brown',
+                        color: 'white',
+                        width: 'fit-content',
+                        padding: '10px 30px',
+                        borderRadius: '8px',
+                        cursor: 'pointer'
+                    },
+                    text: "Clica",
+                    events: { click: _ => setContador(contador.value + 1)}
+                })
+      ]
+    })
+  )
+}
+
+```
+
+# Formulários e Inputs 📝
+O Rosaura oferece componentes de formulário e input prontos para uso. Por exemplo, para criar um formulário:
+
+import FormComponent from "../../Components/FormComponent/index.js";
+import InputComponent from "../../Components/InputComponent/index.js";
+
+```js
+const MeuFormulario = () => {
+    const [text, setText] = defVariable()
+    return FormComponent({
+        childElements: [
+            BuildComponent({type:"h1", text: varPrint("Valor da input {}", [text])})
+            InputComponent({ name: "nome", value: "", onChange: (value) => setText(value) }),
+            BuildComponent({
+                type: "input",
+                events: {
+                    click: () => alert("Formulário enviado!")
+                },
+                attibutes: {
+                  type: "submit"
+                },
+                text: "Enviar"
+            })
+        ]
+    });
+};
+```
+
+# Exemplos
+## Exemplo de Uso de `varPrint`
+
+```js
+import { varPrint, defVariable } from "../../../rosaura/rozaura/index.js";
+const [variable, setVariable] = defVariable(0)
+setInterval( _ => setVariable(variable.value + 1 ), 2000)
+const MeuComponente = () => {
+    return BuildComponent({
+        text: varPrint("Texto dinâmico aqui {} à cada 2s ", [variable])
+    });
+};
+```
+
+# Exemplo de Uso de `routeIn`
+```js
+import routeIn from "../../../rosaura/rozaura/RosauraRouter/routeIn/index.js";
+export default ({routerref}) => {
+  routeIn((params) => {
+      console.log("Rota aberta com parâmetros da url:", params);
+  }, { routerref });
+  return(
+    BuildComponent({
+      text: "Página 1"
+    })
+  )
+}
+```
+`params` contém um objecto com os parâmetros da url actual
 
-# Leia readmeRosaura.pdf

src/Pages/Page1/index.js

@@ -1,4 +1,4 @@
-import Rosaura, {BuildComponent, useFile, varPrint, useCss} from "../../../rosaura/rozaura/index.js"
+import Rosaura, {BuildComponent, varPrint} from "../../../rosaura/rozaura/index.js"
 import Card from "../../Components/Card/index.js"
 import LeftBar from "../../Components/LeftBar/index.js"
 import Title from "../../Components/Title/index.js"

src/Pages/Teste2/index.js

@@ -1,44 +1,26 @@
 import { BuildComponent, defVariable, routeIn, varPrint } from "../../../rosaura/rozaura/index.js"
 
-export default ({routerref}) => {
-
-
-    const [mensagem, setMensagem] = defVariable("Luis")
-
-    var c = 0;
-
-    routeIn( (objecto) => {
-        const {params} = objecto
-        console.log(params)
-        setMensagem(params.luis)
-        window.onresize = () => {
-
-            console.log(" Resized from route /teste2", window.innerWidth)
-        }
-
-    }, {routerref})
-
-
+export default ({}) => {
 
+    const [variavel_de_estado, setVariavelDeEstado] = defVariable(0)
     return(
         BuildComponent({
+            style: { alignItems: "center", justifyContent:"center", gap: '20px'},
             childElements: [
+                BuildComponent({text: varPrint("Contador de cliques {} ", [variavel_de_estado]),style: {width: "fit-content"}}),
                 BuildComponent({
-                    text: varPrint("Valor do parâmetro: {} ", [mensagem]),
-                    type: 'h1'
-                }),
-                BuildComponent( {
-                    type: "a",
-                    text: 'ir para outra',
-                    attributes: {
-                        href: '/teste'
-                    }
+                    style: {
+                        background: 'brown',
+                        color: 'white',
+                        width: 'fit-content',
+                        padding: '10px 30px',
+                        borderRadius: '8px',
+                        cursor: 'pointer'
+                    },
+                    text: "Clica",
+                    events: { click: _ => setVariavelDeEstado(variavel_de_estado.value + 1)}
                 })
-            ],
-            style: {
-                alignItems: "center",
-                justifyContent: 'center'
-            }
+            ]
         })
     )
 }