@tecof/theme-editor 0.0.4 → 0.0.5

package/README.md

@@ -170,6 +170,45 @@ import {
 | `lighten(hex, amount)` | Rengi açar |
 | `darken(hex, amount)` | Rengi koyulaştırır |
 
+## Custom Fields (Özel Alanlar)
+
+Kütüphane içinde Tecof platformuna özel olarak hazırlanmış gelişmiş Puck alanları (`fields`) bulunmaktadır:
+
+| Alan Adı | Özellikler |
+|----------|------------|
+| **`LanguageField`** | Çok dilli, sekmeli düz metin girişi. Uygulama ayarlarından tanımlı dilleri otomatik çeker. |
+| **`EditorField`** | Çok dilli, zengin metin editörü (TipTap tabanlı). Bold, italic, link, liste gibi temel araç çubuğuna sahiptir. |
+| **`UploadField`** | FilePond ve Vaul Drawer tabanlı medya yöneticisi. Yeni görsel yükleme ve sunucudaki eski medyaları seçme yeteneğine sahiptir. |
+| **`CodeEditorField`** | Monaco Editor tabanlı kod editörü. HTML, CSS, JSON gibi özel kod alanları eklemek için kullanılır. |
+
+**Örnek Kullanım:**
+
+```tsx
+import { 
+  createLanguageField, 
+  createEditorField, 
+  createUploadField, 
+  createCodeEditorField 
+} from "@tecof/theme-editor";
+
+const myComponent = {
+  fields: {
+    title: createLanguageField({ label: "Başlık" }),
+    content: createEditorField({ label: "İçerik" }),
+    images: createUploadField({ 
+      label: "Görseller", 
+      allowMultiple: true, 
+      maxFiles: 5 
+    }),
+    customHtml: createCodeEditorField({ 
+      label: "Özel Kod", 
+      defaultLanguage: "html" 
+    })
+  },
+  // ...
+};
+```
+
 ## iframe postMessage API
 
 `TecofEditor` iframe içinde çalıştığında parent ile iletişim kurar:

package/dist/index.d.mts

@@ -1,4 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default from 'react';
 
 interface ThemeColors {
     primary: string;
@@ -108,6 +110,32 @@ interface TecofRenderProps {
     /** Additional class name */
     className?: string;
 }
+interface MerchantInfoData {
+    /** Available language codes (e.g. ["tr", "en", "de"]) */
+    languages: string[];
+    /** Default language code (e.g. "tr") */
+    defaultLanguage: string;
+}
+interface LanguageFieldValue {
+    code: string;
+    value: string;
+}
+interface UploadedFile {
+    _id: string;
+    name: string;
+    size: number;
+    type: string;
+    mimeType?: string;
+    meta?: {
+        width?: number;
+        height?: number;
+        webp?: string;
+        thumbnail?: string;
+        medium?: string;
+        large?: string;
+        [key: string]: any;
+    };
+}
 
 /**
  * Tecof API Client — handles communication with the Tecof backend
@@ -116,6 +144,7 @@ interface TecofRenderProps {
  * Endpoints:
  *  - GET  /api/store/editor/:id   → get page by ID
  *  - PUT  /api/store/editor/:id   → save page by ID
+ *  - GET  /api/store/merchant-info → get merchant language config
  */
 declare class TecofApiClient {
     private apiUrl;
@@ -134,6 +163,21 @@ declare class TecofApiClient {
      * Fetch a published page by slug + locale (for rendering)
      */
     getPublishedPage(slug: string, locale?: string): Promise<ApiResponse<PageApiData>>;
+    /**
+     * Fetch merchant language config (for editor fields)
+     */
+    getMerchantInfo(): Promise<ApiResponse<MerchantInfoData>>;
+    /**
+     * Upload files via secretKey auth (for editor fields)
+     * Returns array of file records: [{ _id, name, size, type, meta }]
+     */
+    uploadFile(file: File, folder?: string): Promise<ApiResponse<any[]>>;
+    /**
+     * Fetch previously uploaded files (for media library selector)
+     */
+    getUploads(page?: number, limit?: number): Promise<ApiResponse<any[]>>;
+    /** CDN base URL (derived from apiUrl) */
+    get cdnUrl(): string;
 }
 
 interface TecofContextValue {
@@ -171,6 +215,153 @@ declare const TecofEditor: ({ pageId, config, accessToken, onSave, onChange, ove
  */
 declare const TecofRender: ({ data, config, className }: TecofRenderProps) => react_jsx_runtime.JSX.Element | null;
 
+interface LanguageFieldProps {
+    field: any;
+    name: string;
+    id: string;
+    value: LanguageFieldValue[];
+    onChange: (value: LanguageFieldValue[]) => void;
+    readOnly?: boolean;
+}
+interface LanguageFieldOptions {
+    /** Whether to render as textarea instead of input */
+    isTextarea?: boolean;
+    /** Number of rows for textarea mode */
+    textareaRows?: number;
+    /** Placeholder text */
+    placeholder?: string;
+}
+declare const LanguageField: ({ value, onChange, readOnly, isTextarea, textareaRows, placeholder, }: LanguageFieldProps & LanguageFieldOptions) => react_jsx_runtime.JSX.Element | null;
+declare const createLanguageField: (options?: LanguageFieldOptions & {
+    label?: string;
+}) => {
+    type: "custom";
+    label: string | undefined;
+    render: ({ value, onChange, readOnly, field, name, id }: LanguageFieldProps) => react_jsx_runtime.JSX.Element;
+};
+
+interface EditorFieldProps {
+    field: any;
+    name: string;
+    id: string;
+    value: LanguageFieldValue[];
+    onChange: (value: LanguageFieldValue[]) => void;
+    readOnly?: boolean;
+}
+interface EditorFieldOptions {
+    /** Placeholder text for empty editor */
+    placeholder?: string;
+}
+/**
+ * EditorField — A multilingual TipTap rich text editor field for Puck.
+ *
+ * Uses the same language tab system as LanguageField, but renders a
+ * TipTap editor with toolbar (bold, italic, underline, headings, lists,
+ * alignment, links, blockquote, undo/redo) instead of a plain text input.
+ *
+ * Value format: [{ code: "tr", value: "<p>HTML content</p>" }, ...]
+ */
+declare const EditorField: ({ value, onChange, readOnly, }: EditorFieldProps & EditorFieldOptions) => react_jsx_runtime.JSX.Element | null;
+/**
+ * Creates a Puck custom field definition for multilingual rich text (TipTap) editor.
+ *
+ * @example
+ * ```ts
+ * import { createEditorField } from '@tecof/theme-editor';
+ *
+ * const config = {
+ *   components: {
+ *     TextBlock: {
+ *       fields: {
+ *         content: createEditorField({ label: 'İçerik' }),
+ *       },
+ *       defaultProps: { content: [] },
+ *       render: ({ content }) => { ... },
+ *     },
+ *   },
+ * };
+ * ```
+ */
+declare const createEditorField: (options?: EditorFieldOptions & {
+    label?: string;
+}) => {
+    type: "custom";
+    label: string | undefined;
+    render: ({ value, onChange, readOnly, field, name, id }: EditorFieldProps) => react_jsx_runtime.JSX.Element;
+};
+
+interface UploadFieldProps {
+    field: any;
+    name: string;
+    id: string;
+    value: UploadedFile[];
+    onChange: (value: UploadedFile[]) => void;
+    readOnly?: boolean;
+}
+interface UploadFieldOptions {
+    allowMultiple?: boolean;
+    maxFiles?: number;
+    acceptedTypes?: string[];
+    maxFileSize?: string;
+    folder?: string;
+    label?: string;
+}
+declare const UploadField: react.ForwardRefExoticComponent<UploadFieldProps & UploadFieldOptions & react.RefAttributes<any>>;
+declare const createUploadField: (options?: UploadFieldOptions) => {
+    type: "custom";
+    label: string | undefined;
+    render: ({ value, onChange, readOnly, field, name, id }: UploadFieldProps) => react_jsx_runtime.JSX.Element;
+};
+
+interface CodeEditorFieldProps {
+    field: any;
+    name: string;
+    id: string;
+    value: string;
+    onChange: (value: string) => void;
+    readOnly?: boolean;
+}
+interface CodeEditorFieldOptions {
+    label?: string;
+    defaultLanguage?: string;
+    height?: string;
+    theme?: string;
+}
+/**
+ * CodeEditorField — A code editor custom field for Puck.
+ * Uses Monaco Editor (@monaco-editor/react).
+ */
+declare const CodeEditorField: react__default.ForwardRefExoticComponent<CodeEditorFieldProps & CodeEditorFieldOptions & react__default.RefAttributes<any>>;
+/**
+ * Creates a Puck custom field definition for code editing.
+ *
+ * @example
+ * ```ts
+ * import { createCodeEditorField } from '@tecof/theme-editor';
+ *
+ * const config = {
+ *   components: {
+ *     CustomHero: {
+ *       fields: {
+ *         customHtml: createCodeEditorField({
+ *           label: 'Özel HTML Kodu',
+ *           defaultLanguage: 'html',
+ *           height: '400px',
+ *         }),
+ *       },
+ *       defaultProps: { customHtml: '' },
+ *       render: ({ customHtml }) => <div dangerouslySetInnerHTML={{ __html: customHtml }} />,
+ *     },
+ *   },
+ * };
+ * ```
+ */
+declare const createCodeEditorField: (options?: CodeEditorFieldOptions) => {
+    type: "custom";
+    label: string | undefined;
+    render: ({ value, onChange, readOnly, field, name, id }: CodeEditorFieldProps) => react_jsx_runtime.JSX.Element;
+};
+
 declare function hexToHsl(hex: string): HSL;
 declare function hslToHex(h: number, s: number, l: number): string;
 declare function lighten(hex: string, amount: number): string;
@@ -179,4 +370,4 @@ 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 };
+export { type ApiResponse, CodeEditorField, EditorField, type HSL, LanguageField, type LanguageFieldValue, type MerchantInfoData, type PageApiData, type PuckContentItem, type PuckPageData, TecofApiClient, TecofEditor, type TecofEditorProps, TecofProvider, type TecofProviderProps, TecofRender, type TecofRenderProps, type ThemeColors, type ThemeConfig, type ThemeSpacing, type ThemeTypography, UploadField, type UploadedFile, createCodeEditorField, createEditorField, createLanguageField, createUploadField, darken, generateCSSVariables, getDefaultTheme, hexToHsl, hslToHex, lighten, mergeTheme, useTecof };

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default from 'react';
 
 interface ThemeColors {
     primary: string;
@@ -108,6 +110,32 @@ interface TecofRenderProps {
     /** Additional class name */
     className?: string;
 }
+interface MerchantInfoData {
+    /** Available language codes (e.g. ["tr", "en", "de"]) */
+    languages: string[];
+    /** Default language code (e.g. "tr") */
+    defaultLanguage: string;
+}
+interface LanguageFieldValue {
+    code: string;
+    value: string;
+}
+interface UploadedFile {
+    _id: string;
+    name: string;
+    size: number;
+    type: string;
+    mimeType?: string;
+    meta?: {
+        width?: number;
+        height?: number;
+        webp?: string;
+        thumbnail?: string;
+        medium?: string;
+        large?: string;
+        [key: string]: any;
+    };
+}
 
 /**
  * Tecof API Client — handles communication with the Tecof backend
@@ -116,6 +144,7 @@ interface TecofRenderProps {
  * Endpoints:
  *  - GET  /api/store/editor/:id   → get page by ID
  *  - PUT  /api/store/editor/:id   → save page by ID
+ *  - GET  /api/store/merchant-info → get merchant language config
  */
 declare class TecofApiClient {
     private apiUrl;
@@ -134,6 +163,21 @@ declare class TecofApiClient {
      * Fetch a published page by slug + locale (for rendering)
      */
     getPublishedPage(slug: string, locale?: string): Promise<ApiResponse<PageApiData>>;
+    /**
+     * Fetch merchant language config (for editor fields)
+     */
+    getMerchantInfo(): Promise<ApiResponse<MerchantInfoData>>;
+    /**
+     * Upload files via secretKey auth (for editor fields)
+     * Returns array of file records: [{ _id, name, size, type, meta }]
+     */
+    uploadFile(file: File, folder?: string): Promise<ApiResponse<any[]>>;
+    /**
+     * Fetch previously uploaded files (for media library selector)
+     */
+    getUploads(page?: number, limit?: number): Promise<ApiResponse<any[]>>;
+    /** CDN base URL (derived from apiUrl) */
+    get cdnUrl(): string;
 }
 
 interface TecofContextValue {
@@ -171,6 +215,153 @@ declare const TecofEditor: ({ pageId, config, accessToken, onSave, onChange, ove
  */
 declare const TecofRender: ({ data, config, className }: TecofRenderProps) => react_jsx_runtime.JSX.Element | null;
 
+interface LanguageFieldProps {
+    field: any;
+    name: string;
+    id: string;
+    value: LanguageFieldValue[];
+    onChange: (value: LanguageFieldValue[]) => void;
+    readOnly?: boolean;
+}
+interface LanguageFieldOptions {
+    /** Whether to render as textarea instead of input */
+    isTextarea?: boolean;
+    /** Number of rows for textarea mode */
+    textareaRows?: number;
+    /** Placeholder text */
+    placeholder?: string;
+}
+declare const LanguageField: ({ value, onChange, readOnly, isTextarea, textareaRows, placeholder, }: LanguageFieldProps & LanguageFieldOptions) => react_jsx_runtime.JSX.Element | null;
+declare const createLanguageField: (options?: LanguageFieldOptions & {
+    label?: string;
+}) => {
+    type: "custom";
+    label: string | undefined;
+    render: ({ value, onChange, readOnly, field, name, id }: LanguageFieldProps) => react_jsx_runtime.JSX.Element;
+};
+
+interface EditorFieldProps {
+    field: any;
+    name: string;
+    id: string;
+    value: LanguageFieldValue[];
+    onChange: (value: LanguageFieldValue[]) => void;
+    readOnly?: boolean;
+}
+interface EditorFieldOptions {
+    /** Placeholder text for empty editor */
+    placeholder?: string;
+}
+/**
+ * EditorField — A multilingual TipTap rich text editor field for Puck.
+ *
+ * Uses the same language tab system as LanguageField, but renders a
+ * TipTap editor with toolbar (bold, italic, underline, headings, lists,
+ * alignment, links, blockquote, undo/redo) instead of a plain text input.
+ *
+ * Value format: [{ code: "tr", value: "<p>HTML content</p>" }, ...]
+ */
+declare const EditorField: ({ value, onChange, readOnly, }: EditorFieldProps & EditorFieldOptions) => react_jsx_runtime.JSX.Element | null;
+/**
+ * Creates a Puck custom field definition for multilingual rich text (TipTap) editor.
+ *
+ * @example
+ * ```ts
+ * import { createEditorField } from '@tecof/theme-editor';
+ *
+ * const config = {
+ *   components: {
+ *     TextBlock: {
+ *       fields: {
+ *         content: createEditorField({ label: 'İçerik' }),
+ *       },
+ *       defaultProps: { content: [] },
+ *       render: ({ content }) => { ... },
+ *     },
+ *   },
+ * };
+ * ```
+ */
+declare const createEditorField: (options?: EditorFieldOptions & {
+    label?: string;
+}) => {
+    type: "custom";
+    label: string | undefined;
+    render: ({ value, onChange, readOnly, field, name, id }: EditorFieldProps) => react_jsx_runtime.JSX.Element;
+};
+
+interface UploadFieldProps {
+    field: any;
+    name: string;
+    id: string;
+    value: UploadedFile[];
+    onChange: (value: UploadedFile[]) => void;
+    readOnly?: boolean;
+}
+interface UploadFieldOptions {
+    allowMultiple?: boolean;
+    maxFiles?: number;
+    acceptedTypes?: string[];
+    maxFileSize?: string;
+    folder?: string;
+    label?: string;
+}
+declare const UploadField: react.ForwardRefExoticComponent<UploadFieldProps & UploadFieldOptions & react.RefAttributes<any>>;
+declare const createUploadField: (options?: UploadFieldOptions) => {
+    type: "custom";
+    label: string | undefined;
+    render: ({ value, onChange, readOnly, field, name, id }: UploadFieldProps) => react_jsx_runtime.JSX.Element;
+};
+
+interface CodeEditorFieldProps {
+    field: any;
+    name: string;
+    id: string;
+    value: string;
+    onChange: (value: string) => void;
+    readOnly?: boolean;
+}
+interface CodeEditorFieldOptions {
+    label?: string;
+    defaultLanguage?: string;
+    height?: string;
+    theme?: string;
+}
+/**
+ * CodeEditorField — A code editor custom field for Puck.
+ * Uses Monaco Editor (@monaco-editor/react).
+ */
+declare const CodeEditorField: react__default.ForwardRefExoticComponent<CodeEditorFieldProps & CodeEditorFieldOptions & react__default.RefAttributes<any>>;
+/**
+ * Creates a Puck custom field definition for code editing.
+ *
+ * @example
+ * ```ts
+ * import { createCodeEditorField } from '@tecof/theme-editor';
+ *
+ * const config = {
+ *   components: {
+ *     CustomHero: {
+ *       fields: {
+ *         customHtml: createCodeEditorField({
+ *           label: 'Özel HTML Kodu',
+ *           defaultLanguage: 'html',
+ *           height: '400px',
+ *         }),
+ *       },
+ *       defaultProps: { customHtml: '' },
+ *       render: ({ customHtml }) => <div dangerouslySetInnerHTML={{ __html: customHtml }} />,
+ *     },
+ *   },
+ * };
+ * ```
+ */
+declare const createCodeEditorField: (options?: CodeEditorFieldOptions) => {
+    type: "custom";
+    label: string | undefined;
+    render: ({ value, onChange, readOnly, field, name, id }: CodeEditorFieldProps) => react_jsx_runtime.JSX.Element;
+};
+
 declare function hexToHsl(hex: string): HSL;
 declare function hslToHex(h: number, s: number, l: number): string;
 declare function lighten(hex: string, amount: number): string;
@@ -179,4 +370,4 @@ 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 };
+export { type ApiResponse, CodeEditorField, EditorField, type HSL, LanguageField, type LanguageFieldValue, type MerchantInfoData, type PageApiData, type PuckContentItem, type PuckPageData, TecofApiClient, TecofEditor, type TecofEditorProps, TecofProvider, type TecofProviderProps, TecofRender, type TecofRenderProps, type ThemeColors, type ThemeConfig, type ThemeSpacing, type ThemeTypography, UploadField, type UploadedFile, createCodeEditorField, createEditorField, createLanguageField, createUploadField, darken, generateCSSVariables, getDefaultTheme, hexToHsl, hslToHex, lighten, mergeTheme, useTecof };