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