@se-studio/core-ui 1.0.45 → 1.0.47

package/src/showcase/README.md

@@ -0,0 +1,131 @@
+# CMS Showcase Infrastructure
+
+The CMS Showcase is a developer tool designed to test and preview CMS components and collections with mock data. This directory contains the shared infrastructure used by multiple projects to implement their own showcase pages.
+
+## Architecture
+
+The showcase is split into several key parts:
+
+- `ShowcasePage.tsx`: The main container component that handles the layout, top bar, and panels.
+- `ShowcaseRenderPage.tsx`: The iframe content component that renders the actual CMS component or collection with mock data.
+- `mockFactory.ts`: Logic for generating mock data based on component/collection types and control state.
+- `components/`: UI components for the showcase interface (Sidebar, Controls, TopBar, etc.).
+- `types.ts`: TypeScript definitions for the showcase state and control options.
+
+## Styling Conventions
+
+**IMPORTANT:** Because this code is shared across multiple projects, it **must not** rely on project-specific Tailwind configurations.
+
+All styling in this directory uses **hardcoded Tailwind arbitrary values** to ensure consistent rendering regardless of the host project's `tailwind.config.ts`.
+
+- **Colors:** Use hex codes, e.g., `text-[#374151]`, `bg-[#f9fafb]`, `border-[#e5e7eb]`.
+- **Spacing/Size:** Use pixel values, e.g., `text-[11px]`, `w-[300px]`, `p-[16px]`.
+- **Fonts:** Use standard weights, e.g., `font-[500]`, `font-[600]`.
+
+## Registration Pattern & `usedFields`
+
+The showcase uses the `usedFields` and `cardUsedFields` from the CMS registration system to determine which controls to show for a given component or collection. It also uses the `mock` and `cardMock` properties to generate realistic initial data.
+
+When you register a component using `defineComponent` or a collection using `defineCollection`, you provide a `Set<string>` of fields that the component actually uses. The `mockFactory` uses these sets to:
+1. Filter the generated mock data to only include relevant fields.
+2. Show or hide controls in the sidebar based on whether a field is "used".
+
+Example registration:
+
+```tsx
+export const HeroRegistration = defineComponent({
+  name: 'Hero', // Must match CMS componentType
+  renderer: Hero,
+  usedFields: new Set(['heading', 'preHeading', 'body', 'visual', 'links']),
+  mock: {
+    heading: 'Hero Heading',
+    body: 'Hero body text description.',
+    visual: { width: 1200, height: 600 },
+  },
+});
+```
+
+## Integration Guide
+
+To add a CMS Showcase to a project:
+
+1. Create a `page.tsx` for the main showcase interface:
+   ```tsx
+   import { ShowcasePage } from '@se-studio/core-ui';
+   import {
+     componentFieldsMap,
+     collectionFieldsMap,
+     projectRendererConfig,
+     // ... other props
+   } from '@/lib/cms';
+
+   export default async function Page({ searchParams }) {
+     return (
+       <ShowcasePage
+         searchParams={await searchParams}
+         rendererConfig={projectRendererConfig}
+         componentFieldsMap={componentFieldsMap}
+         collectionFieldsMap={collectionFieldsMap}
+         basePath="/cms-showcase"
+         // ... project-specific color options
+       />
+     );
+   }
+   ```
+
+2. Create a separate route for the preview iframe (e.g., `/cms-showcase/render/page.tsx`):
+   ```tsx
+   import { ShowcaseRenderPage } from '@se-studio/core-ui';
+   import {
+     componentFieldsMap,
+     collectionFieldsMap,
+     collectionCardFieldsMap,
+     componentMockMap,
+     collectionMockMap,
+     collectionCardMockMap,
+     projectRendererConfig
+   } from '@/lib/cms';
+
+   export default async function Page({ searchParams }) {
+     return (
+       <ShowcaseRenderPage
+         searchParams={await searchParams}
+         rendererConfig={projectRendererConfig}
+         componentFieldsMap={componentFieldsMap}
+         collectionFieldsMap={collectionFieldsMap}
+         collectionCardFieldsMap={collectionCardFieldsMap}
+         componentMockMap={componentMockMap}
+         collectionMockMap={collectionMockMap}
+         collectionCardMockMap={collectionCardMockMap}
+       />
+     );
+   }
+   ```
+
+3. Ensure your `cms.ts` exports all the maps built from registrations:
+   ```ts
+   // Build maps from registrations
+   const {
+     componentMap,
+     componentFieldsMap,
+     componentMockMap
+   } = buildComponentMaps(componentRegistrations);
+
+   const {
+     collectionMap,
+     collectionFieldsMap,
+     collectionCardFieldsMap,
+     collectionMockMap,
+     collectionCardMockMap
+   } = buildCollectionMaps(collectionRegistrations);
+
+   // Export maps for cms-showcase
+   export {
+     componentFieldsMap,
+     collectionFieldsMap,
+     collectionCardFieldsMap,
+     componentMockMap,
+     collectionMockMap,
+     collectionCardMockMap,
+   };
+   ```

package/dist/__tests__/setup.d.ts

@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom';
-//# sourceMappingURL=setup.d.ts.map

package/dist/__tests__/setup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/__tests__/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/__tests__/setup.js

@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom';
-//# sourceMappingURL=setup.js.map

package/dist/__tests__/setup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"setup.js","sourceRoot":"","sources":["../../src/__tests__/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}