@tecof/theme-editor 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tecof
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,212 @@
+# @tecof/theme-editor
+
+Tecof platform için Puck CMS tabanlı sayfa editörü ve render kütüphanesi. API client, context provider ve Puck wrapper bileşenleri içerir.
+
+## Kurulum
+
+```bash
+npm install @tecof/theme-editor @puckeditor/core react react-dom
+```
+
+## Hızlı Başlangıç
+
+### 1. Puck Config Oluştur
+
+```tsx
+// puck-config.tsx
+import type { Config } from "@puckeditor/core";
+import { Header } from "./components/puck/Header";
+import { HeroSection } from "./components/puck/Hero";
+import { Footer } from "./components/puck/Footer";
+
+export const puckConfig: Config = {
+  components: {
+    Header,
+    HeroSection,
+    Footer,
+  },
+};
+```
+
+### 2. Editör Sayfası
+
+```tsx
+// app/editor/[slug]/page.tsx
+"use client";
+
+import { TecofProvider, TecofEditor } from "@tecof/theme-editor";
+import "@tecof/theme-editor/styles.css";
+import "@puckeditor/core/puck.css";
+import { puckConfig } from "@/puck-config";
+
+export default function EditorPage() {
+  return (
+    <TecofProvider
+      apiUrl="https://api.example.com"
+      accessToken="your-merchant-token"
+      config={puckConfig}
+    >
+      <TecofEditor
+        slug="home"
+        onSave={(data) => console.log("Saved:", data)}
+      />
+    </TecofProvider>
+  );
+}
+```
+
+### 3. Public Sayfa (Render)
+
+```tsx
+// app/[slug]/page.tsx
+import { TecofProvider, TecofRender } from "@tecof/theme-editor";
+import { puckConfig } from "@/puck-config";
+
+export default function PublicPage() {
+  return (
+    <TecofProvider
+      apiUrl="https://api.example.com"
+      accessToken="your-merchant-token"
+      config={puckConfig}
+    >
+      <TecofRender slug="home" />
+    </TecofProvider>
+  );
+}
+```
+
+Direkt data ile de render edebilirsiniz:
+
+```tsx
+<TecofRender data={puckData} />
+```
+
+## API
+
+### `<TecofProvider />`
+
+Tüm Tecof bileşenlerini sarar, API client ve Puck config context'i sağlar.
+
+| Prop | Tip | Açıklama |
+|------|-----|----------|
+| `apiUrl` | `string` | Backend API base URL |
+| `accessToken` | `string` | Merchant access token |
+| `config` | `Config` | Puck component configuration |
+| `children` | `ReactNode` | Alt bileşenler |
+
+### `<TecofEditor />`
+
+Puck `<Puck>` wrapper — sayfa editörü. Otomatik fetch/save ve iframe postMessage desteği.
+
+| Prop | Tip | Açıklama |
+|------|-----|----------|
+| `slug` | `string` | Düzenlenecek sayfa slug'ı |
+| `onSave` | `(data) => void` | Kayıt sonrası callback |
+| `onPublish` | `(data) => void` | Yayınlama sonrası callback |
+| `onChange` | `(data) => void` | Her değişiklikte callback |
+| `overrides` | `object` | Puck UI override'ları |
+| `plugins` | `any[]` | Ek Puck plugin'leri |
+| `className` | `string` | CSS class |
+
+### `<TecofRender />`
+
+Puck `<Render>` wrapper — yayınlanmış sayfaları render eder.
+
+| Prop | Tip | Açıklama |
+|------|-----|----------|
+| `slug` | `string` | Sayfa slug'ı (otomatik fetch) |
+| `data` | `PuckPageData` | Direkt puck data (fetch yapmaz) |
+| `fallback` | `ReactNode` | Yükleme sırasında gösterilecek bileşen |
+| `className` | `string` | CSS class |
+
+### `useTecof()`
+
+Provider context'ine erişim hook'u:
+
+```tsx
+const { apiClient, config, accessToken, apiUrl } = useTecof();
+```
+
+### `TecofApiClient`
+
+Standalone API client:
+
+```tsx
+import { TecofApiClient } from "@tecof/theme-editor";
+
+const client = new TecofApiClient("https://api.example.com", "token");
+
+// Sayfa draft'ını getir
+const page = await client.getPage("home");
+
+// Sayfa kaydet
+await client.savePage("home", puckData);
+
+// Yayınlanmış sayfayı getir
+const published = await client.getPublishedPage("about");
+```
+
+### Utility Fonksiyonları
+
+```tsx
+import {
+  getDefaultTheme,
+  generateCSSVariables,
+  mergeTheme,
+  hexToHsl,
+  hslToHex,
+  lighten,
+  darken,
+} from "@tecof/theme-editor";
+```
+
+| Fonksiyon | Açıklama |
+|-----------|----------|
+| `getDefaultTheme()` | Varsayılan tema config'i döner |
+| `generateCSSVariables(theme)` | ThemeConfig → CSS custom properties |
+| `mergeTheme(base, overrides)` | Tema config deep-merge |
+| `hexToHsl(hex)` | Hex → HSL dönüşümü |
+| `hslToHex(h, s, l)` | HSL → Hex dönüşümü |
+| `lighten(hex, amount)` | Rengi açar |
+| `darken(hex, amount)` | Rengi koyulaştırır |
+
+## iframe postMessage API
+
+`TecofEditor` iframe içinde çalıştığında parent ile iletişim kurar:
+
+```ts
+// Parent → Editor
+iframe.postMessage({ type: "puck:publish" }, "*");   // Kaydet
+iframe.postMessage({ type: "puck:undo" }, "*");      // Geri al
+iframe.postMessage({ type: "puck:redo" }, "*");      // Yinele
+iframe.postMessage({ type: "puck:viewport", width: "375px" }, "*"); // Viewport
+
+// Editor → Parent
+window.addEventListener("message", (e) => {
+  if (e.data.type === "puck:save") { /* değişiklik var */ }
+  if (e.data.type === "puck:saved") { /* başarıyla kaydedildi */ }
+});
+```
+
+## Backend API Endpoints
+
+Kütüphane aşağıdaki endpoint'leri kullanır (`Authorization` header ile):
+
+| Method | Endpoint | Açıklama |
+|--------|----------|----------|
+| `GET` | `/api/store/page/:slug` | Sayfa draft'ını getir |
+| `PUT` | `/api/store/page/:slug` | Sayfa draft'ını kaydet |
+| `GET` | `/api/store/published/:slug` | Yayınlanmış sayfayı getir |
+
+## Geliştirme
+
+```bash
+npm run dev        # Watch mode
+npm run build      # Production build
+npm run lint       # ESLint
+npm run test       # Vitest
+```
+
+## Lisans
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,170 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ThemeColors {
+    primary: string;
+    secondary: string;
+    accent: string;
+    background: string;
+    foreground: string;
+    muted: string;
+    mutedForeground: string;
+    border: string;
+    card: string;
+    cardForeground: string;
+    destructive: string;
+}
+interface ThemeTypography {
+    fontFamily: string;
+    headingFontFamily: string;
+    baseFontSize: number;
+    lineHeight: number;
+    headingScale: {
+        h1: number;
+        h2: number;
+        h3: number;
+        h4: number;
+        h5: number;
+        h6: number;
+    };
+    fontWeightNormal: number;
+    fontWeightMedium: number;
+    fontWeightBold: number;
+}
+interface ThemeSpacing {
+    containerMaxWidth: number;
+    sectionPaddingY: number;
+    sectionPaddingX: number;
+    componentGap: number;
+    borderRadius: number;
+    borderRadiusLg: number;
+    borderRadiusSm: number;
+}
+interface ThemeConfig {
+    colors: ThemeColors;
+    typography: ThemeTypography;
+    spacing: ThemeSpacing;
+    customTokens?: Record<string, string>;
+}
+interface HSL {
+    h: number;
+    s: number;
+    l: number;
+}
+interface PuckContentItem {
+    type: string;
+    props: Record<string, any>;
+}
+interface PuckPageData {
+    content: PuckContentItem[];
+    root: {
+        props: Record<string, any>;
+    };
+    zones: Record<string, any>;
+}
+interface ApiResponse<T = any> {
+    success: boolean;
+    data?: T;
+    message?: string;
+}
+interface PageApiData {
+    _id?: string;
+    slug: string;
+    title?: string;
+    puckData: PuckPageData;
+    status?: string;
+    [key: string]: any;
+}
+interface TecofProviderProps {
+    /** Tecof backend API base URL */
+    apiUrl: string;
+    /** Merchant secret key */
+    secretKey: string;
+    /** React children */
+    children: React.ReactNode;
+}
+interface TecofEditorProps {
+    /** Page ID to load and edit */
+    pageId: string;
+    /** Puck component configuration (Config from @puckeditor/core) */
+    config: any;
+    /** Called after successful save */
+    onSave?: (data: PuckPageData) => void;
+    /** Called after successful publish */
+    onPublish?: (data: PuckPageData) => void;
+    /** Called on every editor change */
+    onChange?: (data: PuckPageData) => void;
+    /** Puck UI overrides */
+    overrides?: Record<string, any>;
+    /** Additional Puck plugins */
+    plugins?: any[];
+    /** Additional class name */
+    className?: string;
+}
+interface TecofRenderProps {
+    /** Pre-fetched puck data */
+    data: PuckPageData;
+    /** Puck component configuration (Config from @puckeditor/core) */
+    config: any;
+    /** Additional class name */
+    className?: string;
+}
+
+/**
+ * Tecof API Client — handles communication with the Tecof backend
+ * for page CRUD operations using merchant secret key.
+ *
+ * Endpoints:
+ *  - GET  /api/store/editor/:id   → get page by ID
+ *  - PUT  /api/store/editor/:id   → save page by ID
+ */
+declare class TecofApiClient {
+    private apiUrl;
+    private secretKey;
+    constructor(apiUrl: string, secretKey: string);
+    private get headers();
+    /**
+     * Fetch a page by ID (for the editor)
+     */
+    getPage(pageId: string): Promise<ApiResponse<PageApiData>>;
+    /**
+     * Save a page by ID
+     */
+    savePage(pageId: string, puckData: PuckPageData, title?: string): Promise<ApiResponse<PageApiData>>;
+}
+
+interface TecofContextValue {
+    apiClient: TecofApiClient;
+    secretKey: string;
+    apiUrl: string;
+}
+declare const TecofProvider: ({ apiUrl, secretKey, children }: TecofProviderProps) => react_jsx_runtime.JSX.Element;
+declare function useTecof(): TecofContextValue;
+
+/**
+ * TecofEditor — Puck CMS page editor.
+ *
+ * - Fetches page by ID via secretKey auth
+ * - Saves on publish
+ * - Supports iframe postMessage (undo/redo/publish/viewport)
+ *
+ * Requires `<TecofProvider>` ancestor for API client.
+ */
+declare const TecofEditor: ({ pageId, config, onSave, onPublish, onChange, overrides, plugins: extraPlugins, className, }: TecofEditorProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * TecofRender — Puck page renderer.
+ *
+ * Pass `data` (PuckPageData) and `config` (Puck Config) directly.
+ * No API fetch, no provider required.
+ */
+declare const TecofRender: ({ data, config, className }: TecofRenderProps) => react_jsx_runtime.JSX.Element | null;
+
+declare function hexToHsl(hex: string): HSL;
+declare function hslToHex(h: number, s: number, l: number): string;
+declare function lighten(hex: string, amount: number): string;
+declare function darken(hex: string, amount: number): string;
+declare function generateCSSVariables(theme: ThemeConfig): string;
+declare function getDefaultTheme(): ThemeConfig;
+declare function mergeTheme(base: ThemeConfig, overrides: Partial<ThemeConfig>): ThemeConfig;
+
+export { type ApiResponse, type HSL, type PageApiData, type PuckContentItem, type PuckPageData, TecofApiClient, TecofEditor, type TecofEditorProps, TecofProvider, type TecofProviderProps, TecofRender, type TecofRenderProps, type ThemeColors, type ThemeConfig, type ThemeSpacing, type ThemeTypography, darken, generateCSSVariables, getDefaultTheme, hexToHsl, hslToHex, lighten, mergeTheme, useTecof };

package/dist/index.d.ts

@@ -0,0 +1,170 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ThemeColors {
+    primary: string;
+    secondary: string;
+    accent: string;
+    background: string;
+    foreground: string;
+    muted: string;
+    mutedForeground: string;
+    border: string;
+    card: string;
+    cardForeground: string;
+    destructive: string;
+}
+interface ThemeTypography {
+    fontFamily: string;
+    headingFontFamily: string;
+    baseFontSize: number;
+    lineHeight: number;
+    headingScale: {
+        h1: number;
+        h2: number;
+        h3: number;
+        h4: number;
+        h5: number;
+        h6: number;
+    };
+    fontWeightNormal: number;
+    fontWeightMedium: number;
+    fontWeightBold: number;
+}
+interface ThemeSpacing {
+    containerMaxWidth: number;
+    sectionPaddingY: number;
+    sectionPaddingX: number;
+    componentGap: number;
+    borderRadius: number;
+    borderRadiusLg: number;
+    borderRadiusSm: number;
+}
+interface ThemeConfig {
+    colors: ThemeColors;
+    typography: ThemeTypography;
+    spacing: ThemeSpacing;
+    customTokens?: Record<string, string>;
+}
+interface HSL {
+    h: number;
+    s: number;
+    l: number;
+}
+interface PuckContentItem {
+    type: string;
+    props: Record<string, any>;
+}
+interface PuckPageData {
+    content: PuckContentItem[];
+    root: {
+        props: Record<string, any>;
+    };
+    zones: Record<string, any>;
+}
+interface ApiResponse<T = any> {
+    success: boolean;
+    data?: T;
+    message?: string;
+}
+interface PageApiData {
+    _id?: string;
+    slug: string;
+    title?: string;
+    puckData: PuckPageData;
+    status?: string;
+    [key: string]: any;
+}
+interface TecofProviderProps {
+    /** Tecof backend API base URL */
+    apiUrl: string;
+    /** Merchant secret key */
+    secretKey: string;
+    /** React children */
+    children: React.ReactNode;
+}
+interface TecofEditorProps {
+    /** Page ID to load and edit */
+    pageId: string;
+    /** Puck component configuration (Config from @puckeditor/core) */
+    config: any;
+    /** Called after successful save */
+    onSave?: (data: PuckPageData) => void;
+    /** Called after successful publish */
+    onPublish?: (data: PuckPageData) => void;
+    /** Called on every editor change */
+    onChange?: (data: PuckPageData) => void;
+    /** Puck UI overrides */
+    overrides?: Record<string, any>;
+    /** Additional Puck plugins */
+    plugins?: any[];
+    /** Additional class name */
+    className?: string;
+}
+interface TecofRenderProps {
+    /** Pre-fetched puck data */
+    data: PuckPageData;
+    /** Puck component configuration (Config from @puckeditor/core) */
+    config: any;
+    /** Additional class name */
+    className?: string;
+}
+
+/**
+ * Tecof API Client — handles communication with the Tecof backend
+ * for page CRUD operations using merchant secret key.
+ *
+ * Endpoints:
+ *  - GET  /api/store/editor/:id   → get page by ID
+ *  - PUT  /api/store/editor/:id   → save page by ID
+ */
+declare class TecofApiClient {
+    private apiUrl;
+    private secretKey;
+    constructor(apiUrl: string, secretKey: string);
+    private get headers();
+    /**
+     * Fetch a page by ID (for the editor)
+     */
+    getPage(pageId: string): Promise<ApiResponse<PageApiData>>;
+    /**
+     * Save a page by ID
+     */
+    savePage(pageId: string, puckData: PuckPageData, title?: string): Promise<ApiResponse<PageApiData>>;
+}
+
+interface TecofContextValue {
+    apiClient: TecofApiClient;
+    secretKey: string;
+    apiUrl: string;
+}
+declare const TecofProvider: ({ apiUrl, secretKey, children }: TecofProviderProps) => react_jsx_runtime.JSX.Element;
+declare function useTecof(): TecofContextValue;
+
+/**
+ * TecofEditor — Puck CMS page editor.
+ *
+ * - Fetches page by ID via secretKey auth
+ * - Saves on publish
+ * - Supports iframe postMessage (undo/redo/publish/viewport)
+ *
+ * Requires `<TecofProvider>` ancestor for API client.
+ */
+declare const TecofEditor: ({ pageId, config, onSave, onPublish, onChange, overrides, plugins: extraPlugins, className, }: TecofEditorProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * TecofRender — Puck page renderer.
+ *
+ * Pass `data` (PuckPageData) and `config` (Puck Config) directly.
+ * No API fetch, no provider required.
+ */
+declare const TecofRender: ({ data, config, className }: TecofRenderProps) => react_jsx_runtime.JSX.Element | null;
+
+declare function hexToHsl(hex: string): HSL;
+declare function hslToHex(h: number, s: number, l: number): string;
+declare function lighten(hex: string, amount: number): string;
+declare function darken(hex: string, amount: number): string;
+declare function generateCSSVariables(theme: ThemeConfig): string;
+declare function getDefaultTheme(): ThemeConfig;
+declare function mergeTheme(base: ThemeConfig, overrides: Partial<ThemeConfig>): ThemeConfig;
+
+export { type ApiResponse, type HSL, type PageApiData, type PuckContentItem, type PuckPageData, TecofApiClient, TecofEditor, type TecofEditorProps, TecofProvider, type TecofProviderProps, TecofRender, type TecofRenderProps, type ThemeColors, type ThemeConfig, type ThemeSpacing, type ThemeTypography, darken, generateCSSVariables, getDefaultTheme, hexToHsl, hslToHex, lighten, mergeTheme, useTecof };