@seedgrid/fe-playground 2026.3.19 → 2026.3.26
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 +66 -5
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -1,17 +1,78 @@
|
|
|
1
1
|
# @seedgrid/fe-playground
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Wrapper leve em torno do `SgPlayground`, um componente baseado em Sandpack que combina editor, preview e runtime SeedGrid dentro de um card responsivo.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Características
|
|
6
|
+
|
|
7
|
+
- Presets (`auto`, `basic`, `seedgrid`, `editor`, `full`) que ajustam dependências, shims e comportamento do bundler.
|
|
8
|
+
- Experiência integrada com botões e cartões SeedGrid (`SgButton`, `SgCard`), incluindo cabeçalho customizável e modos colapsáveis.
|
|
9
|
+
- Suporte a registries NPM privadas através de `npmRegistries`, controle de tamanho (`resizable`, `height`, `expandedHeight`) e carregamento automático de dependências (`seedgridDependency`).
|
|
10
|
+
- Ambiente seguro para bibliotecas pesadas: evita o download de lucide, markdown-it e qrcode quando o preset não exige.
|
|
11
|
+
- Hooks internos do Sandpack via `SandpackProvider`, `SandpackCodeEditor` e `SandpackPreview`.
|
|
12
|
+
|
|
13
|
+
## Instalação
|
|
6
14
|
|
|
7
15
|
```bash
|
|
8
16
|
pnpm add @seedgrid/fe-playground @seedgrid/fe-components
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Como utilizar
|
|
12
20
|
|
|
13
21
|
```tsx
|
|
14
22
|
import { SgPlayground } from "@seedgrid/fe-playground";
|
|
15
23
|
|
|
16
|
-
|
|
17
|
-
|
|
24
|
+
export function PlaygroundExample() {
|
|
25
|
+
return (
|
|
26
|
+
<SgPlayground
|
|
27
|
+
code={`<>Olá SeedGrid!</>`}
|
|
28
|
+
preset="seedgrid"
|
|
29
|
+
interactive
|
|
30
|
+
title="Experimentando componentes"
|
|
31
|
+
description="Duplo clique para editar o código do componente."
|
|
32
|
+
expandedHeight="500px"
|
|
33
|
+
resizable
|
|
34
|
+
previewPadding={24}
|
|
35
|
+
/>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Props em destaque
|
|
41
|
+
|
|
42
|
+
- `code`: string com JSX/TSX inicial.
|
|
43
|
+
- `preset`: escolhe configurações prontas (`auto`, `basic`, `seedgrid`, `editor`, `full`).
|
|
44
|
+
- `interactive`: ativa interação no preview.
|
|
45
|
+
- `dependencies`: adiciona dependências extras ao sandbox.
|
|
46
|
+
- `npmRegistries`: lista de registries private com `registryUrl`, `enabledScopes` e `registryAuthToken`.
|
|
47
|
+
- `expandable`, `collapsible`, `defaultOpen`: controla se o card inicia aberto e pode ser recolhido.
|
|
48
|
+
- `seedgridDependency`: força uma versão específica da runtime SeedGrid.
|
|
49
|
+
|
|
50
|
+
## Recursos
|
|
51
|
+
|
|
52
|
+
- [Sandpack React](https://sandpack.codesandbox.io) para editor + preview isolado.
|
|
53
|
+
- Fidelity SeedGrid com `SgButton`, `SgCard` e estilos compartilhados.
|
|
54
|
+
- Presets que simulam o ambiente dos componentes oficiais do design system.
|
|
55
|
+
|
|
56
|
+
## Exemplo avançado
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
<SgPlayground
|
|
60
|
+
code={`<Badge label="Novo!" color="success" />`}
|
|
61
|
+
preset="full"
|
|
62
|
+
withCard
|
|
63
|
+
collapsible
|
|
64
|
+
defaultOpen={false}
|
|
65
|
+
npmRegistries={[
|
|
66
|
+
{
|
|
67
|
+
registryUrl: "https://registry.npmjs.org/",
|
|
68
|
+
enabledScopes: ["@seedgrid"],
|
|
69
|
+
limitToScopes: true
|
|
70
|
+
}
|
|
71
|
+
]}
|
|
72
|
+
dependencies={{
|
|
73
|
+
"@seedgrid/fe-components": "workspace:*",
|
|
74
|
+
"@seedgrid/fe-theme": "workspace:*"
|
|
75
|
+
}}
|
|
76
|
+
/>
|
|
77
|
+
```
|
|
78
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seedgrid/fe-playground",
|
|
3
|
-
"version": "2026.3.
|
|
3
|
+
"version": "2026.3.26",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": {
|
|
@@ -24,12 +24,6 @@
|
|
|
24
24
|
"files": [
|
|
25
25
|
"dist"
|
|
26
26
|
],
|
|
27
|
-
"scripts": {
|
|
28
|
-
"clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
|
|
29
|
-
"build": "pnpm run clean && tsc -p tsconfig.json",
|
|
30
|
-
"dev": "tsc -p tsconfig.json --watch --preserveWatchOutput",
|
|
31
|
-
"typecheck": "tsc -p tsconfig.json --noEmit"
|
|
32
|
-
},
|
|
33
27
|
"peerDependencies": {
|
|
34
28
|
"@seedgrid/fe-components": "^0.2.10",
|
|
35
29
|
"react": "^18.2.0 || ^19.0.0",
|
|
@@ -39,11 +33,17 @@
|
|
|
39
33
|
"@codesandbox/sandpack-react": "^2.20.0"
|
|
40
34
|
},
|
|
41
35
|
"devDependencies": {
|
|
42
|
-
"@seedgrid/fe-components": "workspace:*",
|
|
43
36
|
"@types/react": "^19.0.0",
|
|
44
37
|
"@types/react-dom": "^19.0.0",
|
|
45
38
|
"react": "19.0.0",
|
|
46
39
|
"react-dom": "19.0.0",
|
|
47
|
-
"typescript": "^5.5.4"
|
|
40
|
+
"typescript": "^5.5.4",
|
|
41
|
+
"@seedgrid/fe-components": "2026.3.26"
|
|
42
|
+
},
|
|
43
|
+
"scripts": {
|
|
44
|
+
"clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
|
|
45
|
+
"build": "pnpm run clean && tsc -p tsconfig.json",
|
|
46
|
+
"dev": "tsc -p tsconfig.json --watch --preserveWatchOutput",
|
|
47
|
+
"typecheck": "tsc -p tsconfig.json --noEmit"
|
|
48
48
|
}
|
|
49
|
-
}
|
|
49
|
+
}
|