@codefluss/section-renderer 0.0.1-alpha.1

package/README.md

@@ -0,0 +1,220 @@
+# @codefluss/section-renderer
+
+Framework-agnostic SSR renderer for page sections. Works seamlessly with Next.js, Remix, TanStack
+Start, and any React framework.
+
+## Features
+
+- ✅ **SSR-Native** - All plugin renderers are server-side compatible
+- ✅ **Framework-Agnostic** - Works with Next.js, Remix, TanStack Start
+- ✅ **Type-Safe** - Full TypeScript support with compile-time plugin validation
+- ✅ **Zero Client JS** - Renders completely on the server
+- ✅ **Tree-Shakeable** - Only bundle the plugins you use
+- ✅ **Design System** - Built-in design system with customization
+
+## Installation
+
+```bash
+pnpm add @codefluss/section-renderer
+```
+
+## Quick Start
+
+### Next.js 15 (App Router)
+
+```tsx
+// app/page/[slug]/page.tsx
+import { SectionRenderer } from '@codefluss/section-renderer';
+
+export default async function Page({ params }) {
+  const pageData = await fetchPage(params.slug);
+
+  return (
+    <main>
+      {pageData.sections.map(section => (
+        <SectionRenderer key={section.id} section={section} language='de' />
+      ))}
+    </main>
+  );
+}
+```
+
+### Remix
+
+```tsx
+// routes/page.$slug.tsx
+import { SectionRenderer } from '@codefluss/section-renderer';
+
+export async function loader({ params }) {
+  return json(await fetchPage(params.slug));
+}
+
+export default function PageRoute() {
+  const { sections } = useLoaderData<typeof loader>();
+
+  return (
+    <main>
+      {sections.map(section => (
+        <SectionRenderer key={section.id} section={section} language='de' />
+      ))}
+    </main>
+  );
+}
+```
+
+### TanStack Start
+
+```tsx
+// routes/page.$slug.tsx
+import { createFileRoute } from '@tanstack/react-router';
+import { SectionRenderer } from '@codefluss/section-renderer';
+
+export const Route = createFileRoute('/page/$slug')({
+  loader: async ({ params }) => fetchPage(params.slug),
+  component: PageComponent,
+});
+
+function PageComponent() {
+  const { sections } = Route.useLoaderData();
+
+  return (
+    <main>
+      {sections.map(section => (
+        <SectionRenderer key={section.id} section={section} language='de' />
+      ))}
+    </main>
+  );
+}
+```
+
+## Data Structure
+
+### Page Section
+
+```typescript
+const section: PageSection = {
+  id: 'section-1',
+  type: 'section',
+  elements: [
+    {
+      id: 'heading-1',
+      pluginId: 'heading',
+      data: {
+        content_i18n: {
+          de: 'Willkommen',
+          en: 'Welcome',
+        },
+        level: 1,
+      },
+    },
+    {
+      id: 'text-1',
+      pluginId: 'text',
+      data: {
+        content_i18n: {
+          de: 'Dies ist ein Beispieltext',
+          en: 'This is example text',
+        },
+      },
+    },
+  ],
+  layout: {
+    background: {
+      type: 'gradient',
+      gradient: {
+        type: 'linear',
+        angle: 135,
+        stops: [
+          { color: '#667eea', position: 0 },
+          { color: '#764ba2', position: 100 },
+        ],
+      },
+    },
+    spacing: {
+      padding: { top: 48, right: 32, bottom: 48, left: 32 },
+    },
+    width: {
+      mode: 'boxed',
+      maxWidth: '1200px',
+    },
+  },
+};
+```
+
+## Supported Plugins
+
+- `heading` - Headings (H1-H6)
+- `text` - Single-line text
+- `paragraph` - Multi-line text
+- `image` - Responsive images
+- `container` - Layout containers
+- `canvas-2d` - 2D canvas (SSR fallback)
+- `background-3d` - 3D backgrounds (SSR fallback)
+- `configurator-3d` - 3D configurators (SSR fallback)
+
+## Custom Design System
+
+```typescript
+import { createDesignSystem, SectionRenderer } from '@codefluss/section-renderer';
+
+const myDesignSystem = createDesignSystem({
+  fonts: {
+    get: (key) => ({
+      family: 'Roboto, sans-serif',
+      size: key === 'heading' ? '48px' : '16px',
+      lineHeight: '1.5',
+      weight: key === 'heading' ? 'bold' : 'normal',
+    }),
+  },
+  colors: {
+    get: (key) => ({
+      value: key === 'primary' ? '#ff0000' : '#000000',
+      opacity: 1,
+    }),
+  },
+});
+
+// Use custom design system
+<SectionRenderer
+  section={section}
+  designSystem={myDesignSystem}
+/>
+```
+
+## API Reference
+
+### SectionRenderer
+
+```typescript
+interface SectionRendererProps {
+  section: PageSection;
+  language?: string;
+  designSystem?: PluginDesignSystem;
+  className?: string;
+}
+```
+
+### Utilities
+
+```typescript
+// Get plugin renderer
+const renderer = getPluginRenderer('heading');
+
+// Check if plugin is supported
+const isSupported = isPluginSupported('heading');
+
+// Get all supported plugins
+const plugins = getSupportedPlugins();
+```
+
+## TypeScript
+
+Full TypeScript support out of the box:
+
+```typescript
+import type { PageSection, SectionElement, PluginId } from '@codefluss/section-renderer';
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Section Renderer - Main Exports
+ *
+ * Framework-agnostic SSR renderer for page sections
+ */
+export { SectionRenderer } from "./section-renderer";
+export type { SectionRendererProps, PageSection, SectionElement, PluginId, PluginRenderer, PluginRendererMap, } from "./types";
+export { getPluginRenderer, isPluginSupported, getSupportedPlugins, PLUGIN_RENDERERS, } from "./utils/plugin-loader";
+export { defaultDesignSystem, createDesignSystem, storyDependencies, cn, } from "./utils/design-system";
+export { propertyDefinitionsToArgTypes, commonFormFieldArgTypes, } from "./utils/storybook-argtypes";
+export { createDesignSystemFromJson, resolveTypographyStyles, resolveColorValue, resolveSpacingStyles, resolveGapStyles, resolveBoxModelStyles, resolveContainerGridStyles, resolveFormFieldStyles, resolveCheckboxRadioStyles, resolveButtonStyles, } from "./utils/design-system-resolver";
+export type { BoxModelStyles, FormFieldStyles, CheckboxRadioStyles, ButtonStyles, } from "./utils/design-system-resolver";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAGrD,YAAY,EACX,oBAAoB,EACpB,WAAW,EACX,cAAc,EACd,QAAQ,EACR,cAAc,EACd,iBAAiB,GACjB,MAAM,SAAS,CAAC;AAGjB,OAAO,EACN,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,GAChB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACN,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,EAAE,GACF,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACN,6BAA6B,EAC7B,uBAAuB,GACvB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EACN,0BAA0B,EAC1B,uBAAuB,EACvB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,0BAA0B,EAC1B,sBAAsB,EACtB,0BAA0B,EAC1B,mBAAmB,GACnB,MAAM,gCAAgC,CAAC;AAExC,YAAY,EACX,cAAc,EACd,eAAe,EACf,mBAAmB,EACnB,YAAY,GACZ,MAAM,gCAAgC,CAAC"}