diff --git a/debug/App.tsx b/debug/App.tsx
index 776a435..e7b4d5e 100644
--- a/debug/App.tsx
+++ b/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(
-
+
+
+
,
);
diff --git a/debug/package-lock.json b/debug/package-lock.json
index 4807c12..7f604c2 100644
--- a/debug/package-lock.json
+++ b/debug/package-lock.json
@@ -5,8 +5,8 @@
"packages": {
"": {
"dependencies": {
- "@orangesix/react": "*",
- "bootstrap": "^5.3.3"
+ "@orangesix/react": "^1.0.3",
+ "@stitches/react": "^1.2.8"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.3.1",
@@ -846,16 +846,6 @@
"sweetalert2": "^11.11.0"
}
},
- "node_modules/@popperjs/core": {
- "version": "2.11.8",
- "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
- "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
- "peer": true,
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/popperjs"
- }
- },
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.18.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz",
@@ -1064,6 +1054,14 @@
"win32"
]
},
+ "node_modules/@stitches/react": {
+ "version": "1.2.8",
+ "resolved": "https://registry.npmjs.org/@stitches/react/-/react-1.2.8.tgz",
+ "integrity": "sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==",
+ "peerDependencies": {
+ "react": ">= 16.3.0"
+ }
+ },
"node_modules/@tootallnate/once": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -1321,24 +1319,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/bootstrap": {
- "version": "5.3.3",
- "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
- "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
- "funding": [
- {
- "type": "github",
- "url": "https://github.com/sponsors/twbs"
- },
- {
- "type": "opencollective",
- "url": "https://opencollective.com/bootstrap"
- }
- ],
- "peerDependencies": {
- "@popperjs/core": "^2.11.8"
- }
- },
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3989,9 +3969,9 @@
}
},
"node_modules/sweetalert2": {
- "version": "11.12.2",
- "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.12.2.tgz",
- "integrity": "sha512-Rwv5iRYlApkDSXeX22aLhhWMlWPzFxnNBVLZajkFKYhaVEfQkMOPQQRhBtSFxKBPCoko9U3SccWm9hI4o3Id0Q==",
+ "version": "11.12.3",
+ "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.12.3.tgz",
+ "integrity": "sha512-tgGJSgfSV/xK113JEvhjwqKAuBYLXsZf0z+tGlHKQNnsLMi4eSNuzn9tt5hUdvjOVTLSPDgo0Lc+tnjy9Uj7Og==",
"funding": {
"type": "individual",
"url": "https://github.com/sponsors/limonte"
@@ -4845,12 +4825,6 @@
"sweetalert2": "^11.11.0"
}
},
- "@popperjs/core": {
- "version": "2.11.8",
- "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
- "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
- "peer": true
- },
"@rollup/rollup-android-arm-eabi": {
"version": "4.18.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz",
@@ -4963,6 +4937,12 @@
"dev": true,
"optional": true
},
+ "@stitches/react": {
+ "version": "1.2.8",
+ "resolved": "https://registry.npmjs.org/@stitches/react/-/react-1.2.8.tgz",
+ "integrity": "sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==",
+ "requires": {}
+ },
"@tootallnate/once": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -5177,12 +5157,6 @@
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
"dev": true
},
- "bootstrap": {
- "version": "5.3.3",
- "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
- "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
- "requires": {}
- },
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -7184,9 +7158,9 @@
"dev": true
},
"sweetalert2": {
- "version": "11.12.2",
- "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.12.2.tgz",
- "integrity": "sha512-Rwv5iRYlApkDSXeX22aLhhWMlWPzFxnNBVLZajkFKYhaVEfQkMOPQQRhBtSFxKBPCoko9U3SccWm9hI4o3Id0Q=="
+ "version": "11.12.3",
+ "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.12.3.tgz",
+ "integrity": "sha512-tgGJSgfSV/xK113JEvhjwqKAuBYLXsZf0z+tGlHKQNnsLMi4eSNuzn9tt5hUdvjOVTLSPDgo0Lc+tnjy9Uj7Og=="
},
"tar": {
"version": "6.2.1",
diff --git a/debug/package.json b/debug/package.json
index 9d7af45..deef128 100644
--- a/debug/package.json
+++ b/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",
diff --git a/debug/src/core/index.tsx b/debug/src/core/index.tsx
index 2a80431..fadfae0 100644
--- a/debug/src/core/index.tsx
+++ b/debug/src/core/index.tsx
@@ -3,9 +3,31 @@ import { Box } from "../../../src/box";
const Core = () => {
return (
-
- Nando
-
+
+
+ Box 25
+ Box 25
+
+
+ Box 50
+
+
+ Box 50
+
+
);
};
-export default Core;
\ No newline at end of file
+export default Core;
diff --git a/debug/src/theme/theme.ts b/debug/src/theme/theme.ts
new file mode 100644
index 0000000..a294c18
--- /dev/null
+++ b/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 });
\ No newline at end of file
diff --git a/debug/tsconfig.json b/debug/tsconfig.json
index 5b2b600..3b09e9f 100644
--- a/debug/tsconfig.json
+++ b/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
}
}
diff --git a/debug/vite.config.js b/debug/vite.config.js
index 6306ce3..17a3bcd 100644
--- a/debug/vite.config.js
+++ b/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()
]
});
diff --git a/package.json b/package.json
index ecd7543..6cd08e0 100644
--- a/package.json
+++ b/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",
diff --git a/rollup.config.js b/rollup.config.js
index 45bb8d3..31e9fa4 100644
--- a/rollup.config.js
+++ b/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"]
+ }),
]
};
});
diff --git a/src/api/@types/css.d.ts b/src/api/@types/css.d.ts
new file mode 100644
index 0000000..f81fc26
--- /dev/null
+++ b/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";
\ No newline at end of file
diff --git a/src/api/@types/index.d.ts b/src/api/@types/index.d.ts
new file mode 100644
index 0000000..0fecceb
--- /dev/null
+++ b/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;
+
+export * from "./css";
\ No newline at end of file
diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 0000000..3b300ff
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1 @@
+export * from "./theme";
\ No newline at end of file
diff --git a/src/api/theme.tsx b/src/api/theme.tsx
new file mode 100644
index 0000000..770dd4e
--- /dev/null
+++ b/src/api/theme.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import { createStitches } from "@stitches/react";
+
+export const ThemeDefault = {
+ prefix: "os",
+ theme: {
+ colors: {
+ primary: "#0D6EFD",
+ secondary: "#6C757D",
+ success: "#198754",
+ danger: "#DC3545",
+ warning: "#FFC107",
+ info: "#0DCAF0",
+ light: "#F8F9FA",
+ dark: "#212529",
+
+ blue100: "#CFE2FF",
+ blue200: "#9EC5FE",
+ blue300: "#6EA8FE",
+ blue400: "#3D8BFD",
+ blue500: "#0D6EFD",
+ blue600: "#0A58CA",
+ blue700: "#084298",
+ blue800: "#052C65",
+ blue900: "#031633",
+ },
+ space: {
+ "0": "0px",
+ "px": "1px",
+ "1": ".25rem",
+ "2": ".5rem",
+ "3": ".75rem",
+ "4": "1rem",
+ "5": "1.25rem",
+ "6": "1.5rem",
+ "7": "1.75rem",
+ "8": "2rem",
+ },
+ sizes: {
+ "5": "5%",
+ "10": "10%",
+ "12-5": "12.5%",
+ "15": "15%",
+ "17-5": "17.5%",
+ "20": "20%",
+ "22-5": "22.5%",
+ "25": "25%",
+ "30": "30%",
+ "33": "33%",
+ "35": "35%",
+ "40": "40%",
+ "50": "50%",
+ "55": "55%",
+ "60": "60%",
+ "65": "65%",
+ "75": "75%",
+ "85": "85%",
+ "100": "100%"
+ }
+ },
+ media: {
+ sm: "(max-width: 576px)",
+ md: "(min-width: 576px) and (max-width: 768px)",
+ lg: "(min-width: 768px) and (max-width: 992px)",
+ xl: "(min-width: 992px) and (max-width: 1200px)"
+ }
+};
+
+export type ThemeProps = typeof ThemeDefault;
+
+const ThemeStitches = createStitches(ThemeDefault);
+
+export const ThemeProvider: any = React.createContext({ ...ThemeStitches });
+
+ThemeProvider.displayName = "OrangeSixTheme";
\ No newline at end of file
diff --git a/src/box/@types/index.d.ts b/src/box/@types/index.d.ts
new file mode 100644
index 0000000..d6585f6
--- /dev/null
+++ b/src/box/@types/index.d.ts
@@ -0,0 +1,53 @@
+import React from "react";
+import { AlignItemsProps, APIComponentProps, JustifyContentProps } from "../../api/@types";
+
+export interface BoxProps extends APIComponentProps {
+
+ /**
+ * A propriedade `direction` determina o valor do estilo CSS `flex-direction`,
+ * definindo a direção em que os itens flexíveis são dispostos dentro de um contêiner flexível.
+ */
+ direction?: "row" | "column"
+
+ /**
+ * A propriedade `align` determina o alinhamento do conteúdo base na propriedade `direction`.
+ * Essa propriedade ajusta os estilos CSS `align-items`, permitindo um controle preciso do layout.
+ */
+ align?: AlignItemsProps
+
+ /**
+ * A propriedade `justify` determina o alinhamento do conteúdo base na propriedade `direction`.
+ * Essa propriedade ajusta os estilos CSS `justify-content`, permitindo um controle preciso do layout.
+ */
+ justify?: JustifyContentProps
+
+ /**
+ * A propriedade `children` representa o conteúdo ou elementos filho que serão
+ * renderizados dentro deste componente. Pode incluir texto, elementos React,
+ * ou até mesmo outros componentes.
+ */
+ children: React.ReactNode
+}
+
+/**
+ * Componente - `Box`
+ *
+ * Um componente versátil que pode ser utilizado para criar seções ou caixas em uma página.
+ * Permite personalizar o estilo e o conteúdo através de propriedades.
+ *
+ * Exemplo de uso:
+ * ```tsx
+ *
+ * ...conteúdo HTML
+ *
+ * ```
+ */
+export declare const Box: React.FC;
\ No newline at end of file
diff --git a/src/box/box.tsx b/src/box/box.tsx
new file mode 100644
index 0000000..e43785a
--- /dev/null
+++ b/src/box/box.tsx
@@ -0,0 +1,48 @@
+import { BoxProps } from "./@types";
+import { Container } from "./styled";
+import { CSS } from "@stitches/react";
+import { ThemeProps, ThemeProvider } from "../api";
+import React, { HTMLAttributes, useContext } from "react";
+
+/**
+ * Componente - `Box`
+ *
+ * Um componente versátil que pode ser utilizado para criar seções ou caixas em uma página.
+ * Permite personalizar o estilo e o conteúdo através de propriedades.
+ *
+ * Exemplo de uso:
+ * ```tsx
+ *
+ * ...conteúdo HTML
+ *
+ * ```
+ */
+export const Box = ({ children, ...props }: BoxProps) => {
+ const theme: ThemeProps = useContext(ThemeProvider);
+
+ const css: CSS = {
+ $$size: (props.size ?? "100") + "%",
+ $$margin: `var(--${theme.prefix}-space-${(props.margin ?? "2")})`,
+ $$padding: `var(--${theme.prefix}-space-${(props.padding ?? "1")})`,
+ $$align: props.align ?? "initial",
+ $$justify: props.justify ?? "initial"
+ };
+
+ const attr: HTMLAttributes<"div"> & Omit = {
+ css: { ...css, ...props.css },
+ className: props.className ?? "debug",
+ direction: props.direction
+ };
+
+ return (
+ {children}
+ );
+};
\ No newline at end of file
diff --git a/src/box/index.ts b/src/box/index.ts
new file mode 100644
index 0000000..b3cdd9d
--- /dev/null
+++ b/src/box/index.ts
@@ -0,0 +1 @@
+export * from "./box";
\ No newline at end of file
diff --git a/src/box/styled.ts b/src/box/styled.ts
new file mode 100644
index 0000000..cea4bb7
--- /dev/null
+++ b/src/box/styled.ts
@@ -0,0 +1,34 @@
+import { CSS } from "@stitches/react";
+import { ThemeProvider } from "../api";
+
+const ContainerStyle: CSS = {
+ display: "flex",
+ flexWrap: "wrap",
+ position: "relative",
+ width: "calc($$size - $$margin)",
+ margin: "$$margin calc($$margin / 2)",
+ padding: "$$padding",
+ alignItems: "$$align",
+ justifyContent: "$$justify",
+
+ "@sm": {
+ width: "calc(100% - $$margin)"
+ },
+
+ variants: {
+ direction: {
+ row: {
+ flexDirection: "row"
+ },
+ column: {
+ flexDirection: "column"
+ }
+ }
+ },
+
+ defaultVariants: {
+ direction: "row"
+ }
+};
+
+export const Container = ThemeProvider._currentValue.styled("div", ContainerStyle);
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index be3f3e2..db79688 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,23 +1,19 @@
{
"compilerOptions": {
+ "baseUrl": "./",
"target": "ESNext",
"module": "ESNext",
"jsx": "react",
- "declaration": false,
- "sourceMap": true,
- "outDir": "dist",
"strict": true,
- "esModuleInterop": true,
"skipLibCheck": true,
- "forceConsistentCasingInFileNames": true
+ "allowSyntheticDefaultImports": true
},
"include": [
"src/**/*"
],
"exclude": [
- "dist",
"doc",
- "node_modules",
- "rollup.config.js"
+ "dist",
+ "debug"
]
}
\ No newline at end of file