@brycks/core-front 0.13.0 → 0.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,10 +10,10 @@ Design system React da Brycks (`@brycks/core-front` no npm): tokens, temas light
|
|
|
10
10
|
```mermaid
|
|
11
11
|
flowchart LR
|
|
12
12
|
LIB["brycks-core-front"] -->|npm publish| NPM["npm: @brycks/core-front"]
|
|
13
|
-
NPM
|
|
13
|
+
NPM -->|semver| APPS["apps consumidores"]
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
-
|
|
16
|
+
- Os apps instalam a versão publicada no registry npm.
|
|
17
17
|
- Sem deploy de infra: o "deploy" é publicar uma nova versão.
|
|
18
18
|
|
|
19
19
|
## Stack
|
|
@@ -21,6 +21,7 @@ flowchart LR
|
|
|
21
21
|
- React `>=18` (peer) + TypeScript; zero dependência de runtime.
|
|
22
22
|
- Build com Vite (modo lib) + `vite-plugin-dts`; saída ESM e CJS com `preserveModules` (tree-shaking).
|
|
23
23
|
- ESLint 9 (flat config) com `typescript-eslint` e `react-hooks`.
|
|
24
|
+
- Testes com Vitest + jsdom + Testing Library.
|
|
24
25
|
|
|
25
26
|
## Uso
|
|
26
27
|
|
|
@@ -29,12 +30,16 @@ npm install @brycks/core-front
|
|
|
29
30
|
```
|
|
30
31
|
|
|
31
32
|
```tsx
|
|
32
|
-
import { ThemeProvider, Button, Text, Stack } from '@brycks/core-front'
|
|
33
|
+
import { ThemeProvider, createTheme, Button, Text, Stack } from '@brycks/core-front'
|
|
33
34
|
import '@brycks/core-front/styles.css'
|
|
34
35
|
|
|
36
|
+
const theme = createTheme({
|
|
37
|
+
light: { primary: { default: '#2563eb' } },
|
|
38
|
+
})
|
|
39
|
+
|
|
35
40
|
export function App() {
|
|
36
41
|
return (
|
|
37
|
-
<ThemeProvider
|
|
42
|
+
<ThemeProvider theme={theme} defaultMode="system">
|
|
38
43
|
<Stack gap={4} p={6}>
|
|
39
44
|
<Text variant="bodyLarge">Bem-vindo</Text>
|
|
40
45
|
<Button intent="primary">Começar</Button>
|
|
@@ -44,9 +49,12 @@ export function App() {
|
|
|
44
49
|
}
|
|
45
50
|
```
|
|
46
51
|
|
|
47
|
-
- Modo do tema: `'light' | 'dark' | 'system'`; `useTheme()` expõe `mode`, `setMode` e `toggleMode
|
|
52
|
+
- Modo do tema: `'light' | 'dark' | 'system'`; `useTheme()` expõe `mode`, `resolvedMode`, `setMode` e `toggleMode`.
|
|
53
|
+
- Tema custom: `createTheme({ light, dark, tokens })`, declarado fora do componente. Os overrides vão para um `<style data-brycks-theme>` na camada `brycks.theme`.
|
|
54
|
+
- Sem flash de tema: renderize `getThemeScript()` num `<script>` inline no `<head>`, antes do bundle.
|
|
48
55
|
- Tokens para estilo próprio: `import { colors, spacing, radii, shadows } from '@brycks/core-front/tokens'`.
|
|
49
56
|
- Todas as cores do tema viram CSS variables: `var(--brycks-background-app)`, `var(--brycks-foreground-default)`, `var(--brycks-border-default)`…
|
|
57
|
+
- Textos padrão dos componentes: `LocaleProvider` com os pacotes `en` (padrão), `ptBR` e `es`, via `@brycks/core-front/locale`.
|
|
50
58
|
- Lista de componentes por categoria: [CLAUDE.md › Componentes](CLAUDE.md#componentes-por-categoria).
|
|
51
59
|
|
|
52
60
|
## Entradas do pacote
|
|
@@ -55,17 +63,20 @@ export function App() {
|
|
|
55
63
|
|---|---|
|
|
56
64
|
| `@brycks/core-front` | Tudo (componentes, tema, hooks, tokens) |
|
|
57
65
|
| `@brycks/core-front/tokens` | Tokens de design |
|
|
58
|
-
| `@brycks/core-front/themes` | `ThemeProvider`, temas light/dark |
|
|
66
|
+
| `@brycks/core-front/themes` | `ThemeProvider`, `createTheme`, temas light/dark |
|
|
59
67
|
| `@brycks/core-front/hooks` | Hooks utilitários |
|
|
68
|
+
| `@brycks/core-front/locale` | `LocaleProvider`, `useLabels`, pacotes de idioma |
|
|
60
69
|
| `@brycks/core-front/components/{layout,form,feedback,navigation,data,utility}` | Componentes por categoria |
|
|
61
70
|
| `@brycks/core-front/styles.css` | CSS base (obrigatório importar uma vez) |
|
|
62
71
|
|
|
72
|
+
- Componentes de media (Image, Video, Carousel…) só saem pela raiz.
|
|
73
|
+
|
|
63
74
|
## Desenvolvimento local
|
|
64
75
|
|
|
65
76
|
```bash
|
|
66
77
|
npm install
|
|
67
78
|
npm run dev # playground Vite
|
|
68
|
-
npm run typecheck && npm run lint && npm run build
|
|
79
|
+
npm run typecheck && npm run lint && npm test && npm run build
|
|
69
80
|
npm run check:tokens # confere se todo var(--brycks-*) existe
|
|
70
81
|
```
|
|
71
82
|
|
|
@@ -73,8 +84,8 @@ npm run check:tokens # confere se todo var(--brycks-*) existe
|
|
|
73
84
|
|
|
74
85
|
## Publicar
|
|
75
86
|
|
|
76
|
-
- Suba a versão em `package.json` e rode `npm publish` (o `prepublishOnly` faz o build; acesso público).
|
|
77
|
-
- Depois
|
|
87
|
+
- Suba a versão em `package.json` seguindo semver (breaking change na API pública = major) e rode `npm publish` (o `prepublishOnly` faz o build; acesso público).
|
|
88
|
+
- Depois, cada app consumidor atualiza a dependência e roda `npm install && npm run build`.
|
|
78
89
|
|
|
79
90
|
## Licença
|
|
80
91
|
|