#1 Box - Create component

debug/App.tsx

@@ -1,9 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+
 import Core from "./src/core/index";
+import { Theme } from "./src/theme/theme";
+import { ThemeProvider } from "../src/api";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
-        <Core></Core>
+        <ThemeProvider.Provider value={Theme}>
+            <Core></Core>
+        </ThemeProvider.Provider>
     </React.StrictMode>,
 );

debug/package.json

@@ -5,8 +5,8 @@
     "sass:dev": "sass --load-path=node_modules/bootstrap/scss assets/scss/theme.scss assets/css/style.css --watch"
   },
   "dependencies": {
-    "@orangesix/react": "*",
-    "bootstrap": "^5.3.3"
+    "@orangesix/react": "^1.0.3",
+    "@stitches/react": "^1.2.8"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.1",

debug/src/core/index.tsx

@@ -3,9 +3,31 @@ import { Box } from "../../../src/box";
 
 const Core = () => {
     return (
-        <Box>
-            <h1>Nando</h1>
-        </Box>
+        <div className="container-fluid d-flex flex-wrap">
+            <Box css={{
+                "@md": {
+                    width: "calc(50% - $$margin)"
+                }
+            }}
+                 align="flex-end"
+                 justify="space-between"
+                 padding="4"
+                 size="25">
+                <p>Box 25</p>
+                <p>Box 25</p>
+            </Box>
+            <Box size="50">
+                <p>Box 50</p>
+            </Box>
+            <Box css={{
+                "@md": {
+                    width: "calc(50% - $$margin)"
+                }
+            }}
+                 size="25">
+                <p>Box 50</p>
+            </Box>
+        </div>
     );
 };
-export default Core;
+export default Core;

debug/src/theme/theme.ts

@@ -0,0 +1,6 @@
+import { createStitches } from "@stitches/react";
+import { ThemeDefault } from "../../../src/api";
+
+const ThemeCustom = {};
+
+export const Theme = createStitches({ ...ThemeDefault, ...ThemeCustom });

debug/tsconfig.json

@@ -1,48 +1,21 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    // Qual versão o typescript vai interpretar (ESNext - sempre a versão mais atual).
-
     "module": "ESNext",
-    // Define o sistema de módulo do typescript.
-
     "baseUrl": "./",
-    // Define um diretório base a partir do qual resolver nomes de módulos.
-
     "moduleResolution": "node",
-    // Especifique a estratégia de resolução do módulo.
-
     "jsx": "react",
-    // Controla como as construções JSX são emitidas em arquivos JavaScript
-
     "experimentalDecorators": true,
-    // Habilita a utilização de decorators.
-
+    "esModuleInterop": true,
     "noEmitOnError": true,
-    // Não emita arquivos de saída do compilador.
-
     "strict": true,
-    // Aplicar a regra de validações estrita do typescript.
-
     "allowJs": true,
-    // Permita que arquivos JavaScript sejam importados dentro do seu projeto.
-
     "checkJs": false,
-    // Realiza validações em arquivo javascript.
-
     "noImplicitAny": false,
-    // O TypeScript retornará a um tipo de any para uma variável quando não puder inferir o tipo.
-
     "strictNullChecks": true,
-    // Emite erro quando tentar utilizar variável undefined ou null.
-
     "noUnusedLocals": true,
-    // Relate erros em variáveis locais não utilizadas.
-
     "noUnusedParameters": true,
-    // Relate erros em parâmetros não utilizados em funções.
-
-    "allowSyntheticDefaultImports": true
-    // Permite escrever uma importação como "import React from "react"";
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
   }
 }

debug/vite.config.js

@@ -1,9 +1,8 @@
 import { defineConfig } from "vite";
-
-import react from "@vitejs/plugin-react";
+import viteReact from "@vitejs/plugin-react";
 
 export default defineConfig({
     plugins: [
-        react()
+        viteReact()
     ]
 });

package.json

@@ -15,6 +15,7 @@
     "lint:fix": "eslint . --ext .ts --ext .tsx --fix"
   },
   "dependencies": {
+    "@stitches/react": "^1.2.8",
     "axios": "^1.7.2",
     "bootstrap": "^5.3.3",
     "jquery": "^3.7.1",
@@ -35,7 +36,6 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@stitches/react": "^1.2.8",
     "@types/jest": "^29.5.12",
     "@types/jquery": "^3.5.30",
     "@types/node": "^20.14.9",

rollup.config.js

@@ -88,11 +88,6 @@ const components = __folder.map(folder => {
         ],
         external: __dependeciesExternal,
         plugins: [
-            RollupResolve({
-                extensions: [".js", ".jsx", ".ts", ".tsx"]
-            }),
-            RollupCommonJs(),
-            RollupTypescript({ tsconfig: "./tsconfig.json" }),
             RollupBabel({
                 exclude: "node_modules/**",
                 babelHelpers: "bundled",
@@ -111,7 +106,14 @@ const components = __folder.map(folder => {
                 ],
                 verbose: true
             }),
-            RollupTerser()
+            RollupTerser(),
+            RollupCommonJs(),
+            RollupTypescript({
+                tsconfig: "./tsconfig.json"
+            }),
+            RollupResolve({
+                extensions: [".js", ".jsx", ".ts", ".tsx"]
+            }),
         ]
     };
 });

src/api/@types/css.d.ts

@@ -0,0 +1,18 @@
+export type AlignItemsProps =
+    | "stretch"
+    | "center"
+    | "flex-start"
+    | "flex-end"
+    | "baseline"
+    | "initial"
+    | "inherit";
+
+type JustifyContentProps =
+    | "flex-start"
+    | "flex-end"
+    | "center"
+    | "space-between"
+    | "space-around"
+    | "space-evenly"
+    | "initial"
+    | "inherit";

src/api/@types/index.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import { CSS } from "@stitches/react";
+import { ThemeProps } from "../theme";
+
+export interface APIComponentProps {
+
+    /**
+     * Adiciona no atributo `class` do componente o valor atribuido nessa propriedade
+     */
+    className?: string
+
+    /**
+     * Define o tamanho da box do componente de acordo com o valores obtidos no arquivo
+     * de configuração do tema "SIZES"
+     */
+    size?: keyof ThemeProps["theme"]["sizes"]
+
+    /**
+     * Define a margin do componente de acordo com o valores obtidos no arquivo
+     * de configuração do tema "SPACE"
+     */
+    margin?: keyof ThemeProps["theme"]["space"],
+
+    /**
+     * Define o padding do componente de acordo com o valores obtidos no arquivo
+     * de configuração do tema "SPACE"
+     */
+    padding?: keyof ThemeProps["theme"]["space"],
+
+    /**
+     * Define o CSS individual para o componente
+     */
+    css?: CSS
+}
+
+export declare const ThemeDefault: ThemeProps;
+
+export declare const ThemeProvider: React.Context<any>;
+
+export * from "./css";

src/api/index.ts

@@ -0,0 +1 @@
+export * from "./theme";