@petrarca/sonnet-playground 0.2.0 → 0.4.0

package/README.md

@@ -0,0 +1,142 @@
+# @petrarca/sonnet-playground
+
+Playground framework and built-in component demos for the Petrarca Sonnet
+component library.
+
+## What's included
+
+**Playground framework** — Registry, overview tile grid, and `createPlaygroundModule()`
+factory. Wire a playground into any `sonnet-shell` app with a few lines.
+
+**Built-in demos** — Pre-built showcase pages for all Sonnet components:
+Typography, Color Palette, Core UI, Advanced Components, JSON Editor, Forms,
+Form Components, Form Widgets, Data Components, Graph Visualization, Shell API.
+
+**PlaygroundSection** — Shared section wrapper (`default` and `card` variants)
+used by all playground pages.
+
+---
+
+## Install
+
+```bash
+pnpm add @petrarca/sonnet-playground
+```
+
+Peer dependencies: `react`, `react-dom`, `@petrarca/sonnet-shell`,
+`@petrarca/sonnet-ui`, `@petrarca/sonnet-forms`, `@petrarca/sonnet-graph`.
+
+---
+
+## Basic usage
+
+```ts
+// src/modules/playground/index.ts
+import {
+  createPlaygroundRegistry,
+  createPlaygroundModule,
+} from "@petrarca/sonnet-playground";
+
+const registry = createPlaygroundRegistry();
+
+// Optionally add app-specific pages:
+registry.register({
+  id: "app.my-page",
+  title: "My Page",
+  description: "Custom demo page.",
+  icon: SomeIcon,
+  color: "teal",
+  path: "my-page",
+  component: React.lazy(() => import("./pages/MyPage")),
+  group: "App",
+  order: 0,
+});
+
+export default createPlaygroundModule(registry);
+```
+
+```ts
+// src/modules/registry.ts
+import { createModuleRegistry } from "@petrarca/sonnet-shell";
+import home from "./home";
+import playground from "./playground";
+
+export const registry = createModuleRegistry([
+  home,
+  playground, // pinBottom: true is set automatically by createPlaygroundModule
+]);
+```
+
+`createPlaygroundModule` returns a `ShellModule` — pass it directly to
+`createModuleRegistry` alongside your app's own modules.
+
+---
+
+## Adding app-specific pages
+
+Register your own pages alongside the built-in demos by calling
+`registry.register()` before passing the registry to `createPlaygroundModule`.
+Pages appear in the overview tile grid grouped under your chosen `group` label.
+
+```ts
+// src/modules/playground/index.ts
+import { lazy } from "react";
+import { Search } from "lucide-react";
+import {
+  createPlaygroundRegistry,
+  createPlaygroundModule,
+} from "@petrarca/sonnet-playground";
+
+const registry = createPlaygroundRegistry();
+
+// Register app-specific pages
+registry.register({
+  id: "app.my-widget",
+  title: "My Widget",
+  description: "Interactive demo of MyWidget with live configuration.",
+  icon: Search,
+  color: "teal",
+  path: "my-widget",
+  component: lazy(() => import("./pages/PlayMyWidget")),
+  group: "App Components",  // appears as a group heading in the overview
+  order: 0,
+});
+
+export default createPlaygroundModule(registry);
+```
+
+Pages are lazy-loaded automatically — wrap the component in `React.lazy()`
+as shown above. The framework handles the `Suspense` boundary.
+
+`group` is optional. Pages without a group appear under the default group in
+the overview. Pages with the same `group` string are grouped together.
+
+---
+
+## Pages subpath
+
+Individual built-in pages are available at `@petrarca/sonnet-playground/pages`
+for consumers who want to cherry-pick or re-export them:
+
+```tsx
+import { PlayTypography, PlayColorPalette } from "@petrarca/sonnet-playground/pages";
+```
+
+---
+
+## createPlaygroundModule options
+
+| Option | Type | Default |
+|---|---|---|
+| `icon` | `LucideIcon` | `FlaskConical` |
+| `label` | `string` | `"Playground"` |
+| `basePath` | `string` | `"/playground"` |
+| `overviewTitle` | `string` | `"Developer Playground"` |
+| `overviewSubtitle` | `string` | `""` |
+| `grouped` | `boolean` | `true` |
+
+---
+
+## License
+
+See [LICENSE.md](../../LICENSE.md).

package/dist/PlayAdvancedComponents-ZYK66UII.js

@@ -0,0 +1,8 @@
+import {
+  PlayAdvancedComponents
+} from "./chunk-4Y4JFKAK.js";
+import "./chunk-C2EZ2ECG.js";
+export {
+  PlayAdvancedComponents as default
+};
+//# sourceMappingURL=PlayAdvancedComponents-ZYK66UII.js.map

package/dist/PlayColorPalette-IWECRZUS.js

@@ -0,0 +1,8 @@
+import {
+  PlayColorPalette
+} from "./chunk-DA3BIB5N.js";
+import "./chunk-C2EZ2ECG.js";
+export {
+  PlayColorPalette as default
+};
+//# sourceMappingURL=PlayColorPalette-IWECRZUS.js.map

package/dist/PlayCoreComponents-GXFMB24T.js

@@ -0,0 +1,8 @@
+import {
+  PlayCoreComponents
+} from "./chunk-YOOWJORD.js";
+import "./chunk-C2EZ2ECG.js";
+export {
+  PlayCoreComponents as default
+};
+//# sourceMappingURL=PlayCoreComponents-GXFMB24T.js.map

package/dist/PlayDataComponents-M4SJ4XEL.js

@@ -0,0 +1,8 @@
+import {
+  PlayDataComponents
+} from "./chunk-YEBK2TUW.js";
+import "./chunk-C2EZ2ECG.js";
+export {
+  PlayDataComponents as default
+};
+//# sourceMappingURL=PlayDataComponents-M4SJ4XEL.js.map

package/dist/PlayFormComponents-4E2A2Y2W.js

@@ -0,0 +1,8 @@
+import {
+  PlayFormComponents
+} from "./chunk-32DDRRWU.js";
+import "./chunk-C2EZ2ECG.js";
+export {
+  PlayFormComponents as default
+};
+//# sourceMappingURL=PlayFormComponents-4E2A2Y2W.js.map

package/dist/PlayFormWidgets-IWJJQ5XL.js

@@ -0,0 +1,8 @@
+import {
+  PlayFormWidgets
+} from "./chunk-DZB6WFHA.js";
+import "./chunk-C2EZ2ECG.js";
+export {
+  PlayFormWidgets as default
+};
+//# sourceMappingURL=PlayFormWidgets-IWJJQ5XL.js.map

package/dist/PlayForms-FOF3XE6G.js

@@ -0,0 +1,7 @@
+import {
+  PlayForms
+} from "./chunk-6DZ3TSV4.js";
+export {
+  PlayForms as default
+};
+//# sourceMappingURL=PlayForms-FOF3XE6G.js.map

package/dist/PlayGraph-3F56PREG.js

@@ -0,0 +1,7 @@
+import {
+  PlayGraph
+} from "./chunk-VOC5VZG2.js";
+export {
+  PlayGraph as default
+};
+//# sourceMappingURL=PlayGraph-3F56PREG.js.map

package/dist/PlayJsonEditor-SYZYEJEA.js

@@ -0,0 +1,7 @@
+import {
+  PlayJsonEditor
+} from "./chunk-FZ3ZC7VM.js";
+export {
+  PlayJsonEditor as default
+};
+//# sourceMappingURL=PlayJsonEditor-SYZYEJEA.js.map

package/dist/PlayShellApi-5O6VYR2X.js

@@ -0,0 +1,8 @@
+import {
+  PlayShellApi
+} from "./chunk-CQ6PGFRV.js";
+import "./chunk-C2EZ2ECG.js";
+export {
+  PlayShellApi as default
+};
+//# sourceMappingURL=PlayShellApi-5O6VYR2X.js.map

package/dist/PlayShellApi-5O6VYR2X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/PlayTypography-T6SMPHUB.js

@@ -0,0 +1,8 @@
+import {
+  PlayTypography
+} from "./chunk-7IBZEHLI.js";
+import "./chunk-C2EZ2ECG.js";
+export {
+  PlayTypography as default
+};
+//# sourceMappingURL=PlayTypography-T6SMPHUB.js.map

package/dist/PlayTypography-T6SMPHUB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}