payaza-storefront-layouts 1.0.46 → 1.0.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/editor/payaza-form/AssetSelectionContext.d.ts +17 -0
- package/dist/editor/payaza-form/AssetSelectionContext.d.ts.map +1 -0
- package/dist/editor/payaza-form/AssetSelectionContext.js +59 -0
- package/dist/editor/payaza-form/PayazaFormEditor.d.ts.map +1 -1
- package/dist/editor/payaza-form/PayazaFormEditor.js +22 -21
- package/dist/editor/payaza-form/components/ImageField.d.ts.map +1 -1
- package/dist/editor/payaza-form/components/ImageField.js +15 -1
- package/dist/editor/payaza-form/index.d.ts +1 -0
- package/dist/editor/payaza-form/index.d.ts.map +1 -1
- package/dist/editor/payaza-form/index.js +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
interface AssetSelectionContextValue {
|
|
3
|
+
onOpenAssetSelect: (callback: (url: string) => void) => void;
|
|
4
|
+
assets?: string[];
|
|
5
|
+
isAssetLibraryAvailable: boolean;
|
|
6
|
+
}
|
|
7
|
+
interface AssetSelectionProviderProps {
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
onOpenAssets?: () => void;
|
|
10
|
+
assets?: string[];
|
|
11
|
+
}
|
|
12
|
+
export declare const setGlobalAssetSelectionHandler: (handler: ((url: string) => void) | null) => void;
|
|
13
|
+
export declare const getGlobalAssetSelectionHandler: () => ((url: string) => void) | null;
|
|
14
|
+
export declare const AssetSelectionProvider: React.FC<AssetSelectionProviderProps>;
|
|
15
|
+
export declare const useAssetSelection: () => AssetSelectionContextValue;
|
|
16
|
+
export {};
|
|
17
|
+
//# sourceMappingURL=AssetSelectionContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AssetSelectionContext.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/AssetSelectionContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAoD,SAAS,EAAqB,MAAM,OAAO,CAAC;AAE9G,UAAU,0BAA0B;IAClC,iBAAiB,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,uBAAuB,EAAE,OAAO,CAAC;CAClC;AAID,UAAU,2BAA2B;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAKD,eAAO,MAAM,8BAA8B,GAAI,SAAS,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,SAErF,CAAC;AAEF,eAAO,MAAM,8BAA8B,QAAO,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAE3E,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAkDxE,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO,0BAYpC,CAAC"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
|
|
3
|
+
const AssetSelectionContext = createContext(null);
|
|
4
|
+
// Global handler that host app can call
|
|
5
|
+
let globalAssetSelectionHandler = null;
|
|
6
|
+
export const setGlobalAssetSelectionHandler = (handler) => {
|
|
7
|
+
globalAssetSelectionHandler = handler;
|
|
8
|
+
};
|
|
9
|
+
export const getGlobalAssetSelectionHandler = () => {
|
|
10
|
+
return globalAssetSelectionHandler;
|
|
11
|
+
};
|
|
12
|
+
export const AssetSelectionProvider = ({ children, onOpenAssets, assets, }) => {
|
|
13
|
+
const [pendingCallback, setPendingCallback] = useState(null);
|
|
14
|
+
const callbackRef = useRef(null);
|
|
15
|
+
// Update ref when callback changes
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
callbackRef.current = pendingCallback;
|
|
18
|
+
}, [pendingCallback]);
|
|
19
|
+
// Set up global handler that host app can call
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
const handler = (url) => {
|
|
22
|
+
if (callbackRef.current) {
|
|
23
|
+
callbackRef.current(url);
|
|
24
|
+
setPendingCallback(null); // Clear callback after use
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
setGlobalAssetSelectionHandler(handler);
|
|
28
|
+
return () => {
|
|
29
|
+
setGlobalAssetSelectionHandler(null);
|
|
30
|
+
};
|
|
31
|
+
}, []);
|
|
32
|
+
const onOpenAssetSelect = useCallback((callback) => {
|
|
33
|
+
if (onOpenAssets) {
|
|
34
|
+
// Store the callback so the host app can call it when an asset is selected
|
|
35
|
+
setPendingCallback(() => callback);
|
|
36
|
+
// Open the asset library
|
|
37
|
+
onOpenAssets();
|
|
38
|
+
}
|
|
39
|
+
}, [onOpenAssets]);
|
|
40
|
+
const value = {
|
|
41
|
+
onOpenAssetSelect,
|
|
42
|
+
assets,
|
|
43
|
+
isAssetLibraryAvailable: !!onOpenAssets,
|
|
44
|
+
};
|
|
45
|
+
return (_jsx(AssetSelectionContext.Provider, { value: value, children: children }));
|
|
46
|
+
};
|
|
47
|
+
export const useAssetSelection = () => {
|
|
48
|
+
const context = useContext(AssetSelectionContext);
|
|
49
|
+
if (!context) {
|
|
50
|
+
// Return a no-op implementation if context is not available
|
|
51
|
+
return {
|
|
52
|
+
onOpenAssetSelect: () => {
|
|
53
|
+
console.warn('[AssetSelection] Asset library is not available');
|
|
54
|
+
},
|
|
55
|
+
isAssetLibraryAvailable: false,
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
return context;
|
|
59
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PayazaFormEditor.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/PayazaFormEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAU/C,OAAO,EAA4B,eAAe,EAAgB,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"PayazaFormEditor.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/PayazaFormEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAU/C,OAAO,EAA4B,eAAe,EAAgB,MAAM,mBAAmB,CAAC;AAQ5F,MAAM,WAAW,qBAAsB,SAAQ,mBAAmB;IAChE;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAgyB5D,CAAC"}
|
|
@@ -14,6 +14,7 @@ import { Info, Search, X } from 'lucide-react';
|
|
|
14
14
|
import { useDebounce } from '../../hooks/use-debounce';
|
|
15
15
|
import { AIGenerateModal } from '../shared/AIGenerateModal';
|
|
16
16
|
import { useAlertModal } from '../../components/ui/alert-modal';
|
|
17
|
+
import { AssetSelectionProvider } from './AssetSelectionContext';
|
|
17
18
|
export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, onSave, onPublish, onBack, onBackToSettings, onOpenAssets, onBackToTheme, title, className = '', customWidgets, storeName, storeDescription, assets, }) => {
|
|
18
19
|
const [activePageId, setActivePageId] = useState('home');
|
|
19
20
|
const [data, setData] = useState(initialData);
|
|
@@ -478,26 +479,26 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
|
|
|
478
479
|
if (!layoutJson || !pageSchema) {
|
|
479
480
|
return (_jsx("div", { className: "flex items-center justify-center h-full", children: _jsx("div", { className: "text-slate-400", children: "Layout not found" }) }));
|
|
480
481
|
}
|
|
481
|
-
return (_jsxs("div", { className: `flex flex-col h-full bg-white ${className} font-sans antialiased text-slate-900`, children: [_jsx(EditorHeader, { layoutName: layoutJson.layoutName || layoutId, storeName: storeName, activePage: activePageId, pages: pages, onPageSwitch: setActivePageId, onSave: handleSave, onPublish: onPublish && hasChangesSincePublish ? handlePublish : undefined, onBack: onBack, onBackToSettings: onBackToSettings, onOpenAssets: onOpenAssets, onBackToTheme: onBackToTheme, onUndo: handleUndo, onRedo: handleRedo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1, viewMode: viewMode, onViewModeChange: setViewMode, editorType: "payaza-form", isSaving: isSaving, isPublishing: isPublishing, onGenerateAI: () => setIsAIModalOpen(true), isGeneratingAI: isGeneratingAI }), _jsx(AIGenerateModal, { isOpen: isAIModalOpen, onClose: () => setIsAIModalOpen(false), onGenerate: handleAIGenerate, initialContext: {
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
482
|
+
return (_jsx(AssetSelectionProvider, { onOpenAssets: onOpenAssets, assets: assets, children: _jsxs("div", { className: `flex flex-col h-full bg-white ${className} font-sans antialiased text-slate-900`, children: [_jsx(EditorHeader, { layoutName: layoutJson.layoutName || layoutId, storeName: storeName, activePage: activePageId, pages: pages, onPageSwitch: setActivePageId, onSave: handleSave, onPublish: onPublish && hasChangesSincePublish ? handlePublish : undefined, onBack: onBack, onBackToSettings: onBackToSettings, onOpenAssets: onOpenAssets, onBackToTheme: onBackToTheme, onUndo: handleUndo, onRedo: handleRedo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1, viewMode: viewMode, onViewModeChange: setViewMode, editorType: "payaza-form", isSaving: isSaving, isPublishing: isPublishing, onGenerateAI: () => setIsAIModalOpen(true), isGeneratingAI: isGeneratingAI }), _jsx(AIGenerateModal, { isOpen: isAIModalOpen, onClose: () => setIsAIModalOpen(false), onGenerate: handleAIGenerate, initialContext: {
|
|
483
|
+
storeName: storeName || data?.name || '',
|
|
484
|
+
storeDescription: storeDescription || data?.description || '',
|
|
485
|
+
assets: assets || [],
|
|
486
|
+
}, isGenerating: isGeneratingAI }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsx("div", { className: "flex-1 overflow-hidden bg-[#f8f9fb] relative", children: _jsx(IframePreview, { layoutId: layoutId, config: data, activePageId: activePageId, viewMode: viewMode, selectedSection: selectedSection }) }), _jsx(ResizableSidebar, { initialWidth: 380, minWidth: 340, maxWidth: 500, className: "bg-white border-l border-slate-200 shadow-[-12px_0_32px_-4px_rgba(0,0,0,0.03)]", children: _jsxs("div", { className: "flex flex-col h-full bg-white relative", children: [_jsxs("div", { className: "bg-white/90 backdrop-blur-xl sticky top-0 z-30 border-b border-slate-100 px-6 pt-6 pb-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-6", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h3", { className: "text-[11px] font-black text-slate-900 uppercase tracking-[0.3em]", children: "Editor Panel" }), _jsxs("p", { className: "text-[9px] text-slate-400 font-bold uppercase tracking-widest flex items-center gap-1.5", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-900 shadow-[0_0_8px_rgba(0,0,0,0.2)]" }), "Customising ", activePageId] })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("div", { className: "p-2 rounded-xl bg-slate-50 text-slate-400 hover:text-slate-600 transition-all cursor-help", title: "Studio Info", children: _jsx(Info, { size: 14 }) }) })] }), _jsxs("div", { className: "relative group", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-slate-900", size: 14, strokeWidth: 2.5 }), _jsx("input", { type: "text", placeholder: "Search properties...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full h-12 pl-11 pr-10 bg-slate-50/50 border border-slate-200 rounded-xl text-[12px] font-bold text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900/20 focus:bg-white transition-all shadow-sm" }), searchQuery && (_jsx("button", { onClick: () => setSearchQuery(''), className: "absolute right-3 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center bg-slate-200 text-slate-500 hover:bg-slate-300 hover:text-slate-700 rounded-full transition-all", children: _jsx(X, { size: 12, strokeWidth: 3 }) }))] })] }), _jsx("div", { className: "flex-1 payaza-form-editor overflow-y-auto custom-scrollbar bg-[#fcfcfd] px-6 py-8", children: _jsx("div", { className: "space-y-6", children: filteredSchema.length > 0 ? (filteredSchema.map(([sectionKey, sectionSchema]) => {
|
|
487
|
+
const sectionData = pageSchema.data[sectionKey];
|
|
488
|
+
return (_jsx("div", { "data-section-key": sectionKey, className: selectedSection === sectionKey ? 'ring-2 ring-primary ring-inset rounded-xl bg-primary/5' : '', children: _jsx(FieldRenderer, { schemaField: sectionSchema, value: sectionData, path: [sectionKey], onChange: (value, fieldPath) => {
|
|
489
|
+
// fieldPath from FieldRenderer is relative to the section
|
|
490
|
+
// e.g., ['show'] for hero.show, ['sliders', 0, 'title'] for hero.sliders[0].title
|
|
491
|
+
handleFieldChange(sectionKey, fieldPath, value);
|
|
492
|
+
}, onArrayItemChange: (index, itemValue) => {
|
|
493
|
+
handleArrayItemChange(sectionKey, [], index, itemValue);
|
|
494
|
+
}, onArrayItemAdd: () => {
|
|
495
|
+
if (sectionSchema._itemSchema) {
|
|
496
|
+
handleArrayItemAdd(sectionKey, [], sectionSchema._itemSchema);
|
|
497
|
+
}
|
|
498
|
+
}, onArrayItemRemove: (index) => {
|
|
499
|
+
handleArrayItemRemove(sectionKey, [], index);
|
|
500
|
+
} }) }, sectionKey));
|
|
501
|
+
})) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-24 text-center px-6 bg-slate-50/50 rounded-3xl border border-dashed border-slate-200", children: [_jsx("div", { className: "w-20 h-20 bg-white rounded-full flex items-center justify-center mb-6 shadow-xl border border-slate-50", children: _jsx(Search, { size: 28, className: "text-slate-200", strokeWidth: 1.5 }) }), _jsx("p", { className: "text-[12px] font-black text-slate-500 uppercase tracking-widest mb-2", children: "No results found" }), _jsx("p", { className: "text-[10px] text-slate-400 font-bold uppercase tracking-widest max-w-[200px] leading-relaxed", children: "Try adjusting your search to find specific properties" })] })) }) }), _jsx("div", { className: "px-8 py-6 bg-white border-t border-slate-100 shadow-[0_-10px_40px_-10px_rgba(0,0,0,0.02)]", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.5)] animate-pulse" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("p", { className: "text-[10px] font-black text-slate-900 uppercase tracking-[0.1em]", children: "Studio Status" }), _jsx("p", { className: "text-[8px] font-bold text-slate-400 uppercase tracking-widest", children: "Live Syncing Enabled" })] })] }), _jsx("div", { className: "flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-50 border border-slate-100 shadow-sm", children: _jsx("span", { className: "text-[9px] font-black text-slate-400 uppercase tracking-[0.1em]", children: "Build v1.0.32" }) })] }) })] }) })] }), _jsx("style", { dangerouslySetInnerHTML: { __html: `
|
|
501
502
|
/* Custom Scrollbar */
|
|
502
503
|
.custom-scrollbar::-webkit-scrollbar {
|
|
503
504
|
width: 4px;
|
|
@@ -512,5 +513,5 @@ export const PayazaFormEditor = ({ layoutId, initialData, inventory, onChange, o
|
|
|
512
513
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
513
514
|
background: #cbd5e1;
|
|
514
515
|
}
|
|
515
|
-
` } })] }));
|
|
516
|
+
` } })] }) }));
|
|
516
517
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/ImageField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ImageField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/ImageField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsGhD,CAAC"}
|
|
@@ -1,10 +1,24 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Link2, X, Upload } from 'lucide-react';
|
|
4
|
+
import { useAssetSelection } from '../AssetSelectionContext';
|
|
4
5
|
export const ImageField = ({ label, value, onChange, placeholder, }) => {
|
|
5
6
|
const hasImage = value && value.startsWith('http');
|
|
6
7
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
8
|
+
const { onOpenAssetSelect, isAssetLibraryAvailable } = useAssetSelection();
|
|
9
|
+
const handleReplace = React.useCallback(() => {
|
|
10
|
+
if (isAssetLibraryAvailable) {
|
|
11
|
+
// Open asset library with callback to replace image
|
|
12
|
+
onOpenAssetSelect((selectedUrl) => {
|
|
13
|
+
onChange(selectedUrl);
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
else {
|
|
17
|
+
// Fallback: just clear the image if asset library is not available
|
|
18
|
+
onChange('');
|
|
19
|
+
}
|
|
20
|
+
}, [isAssetLibraryAvailable, onOpenAssetSelect, onChange]);
|
|
7
21
|
return (_jsxs("div", { className: "flex flex-col gap-3 group/field", children: [_jsxs("div", { className: "flex items-center justify-between px-0.5", children: [_jsx("label", { className: "text-[10px] font-black text-slate-400 uppercase tracking-[0.15em] group-focus-within/field:text-blue-500 transition-colors", children: label }), hasImage && (_jsx("span", { className: "text-[8px] font-black text-blue-500 bg-blue-50 px-1.5 py-0.5 rounded uppercase tracking-widest border border-blue-100/50", children: "Active" }))] }), _jsxs("div", { className: "space-y-4", children: [hasImage ? (_jsxs("div", { className: "relative group/img rounded-2xl overflow-hidden border border-slate-200 bg-slate-50 aspect-[16/9] flex items-center justify-center shadow-sm", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("img", { src: value, alt: label, className: "w-full h-full object-cover transition-all duration-700 group-hover/img:scale-110 group-hover/img:blur-[2px]", onError: (e) => {
|
|
8
22
|
e.target.style.display = 'none';
|
|
9
|
-
} }), _jsx("div", { className: "absolute inset-0 bg-slate-900/40 opacity-0 group-hover/img:opacity-100 transition-all duration-300 flex flex-col items-center justify-center gap-2 backdrop-blur-[1px]", children: _jsxs("div", { className: "flex items-center gap-2 transform translate-y-2 group-hover/img:translate-y-0 transition-all duration-300", children: [_jsx("button", { type: "button", onClick: () => onChange(''), className: "flex items-center justify-center w-10 h-10 bg-white/20 hover:bg-red-500 text-white rounded-xl backdrop-blur-md transition-all duration-200 border border-white/30", title: "Remove Image", children: _jsx(X, { size: 18, strokeWidth: 2.5 }) }), _jsxs("button", { type: "button", className: "flex items-center gap-2 px-5 py-2.5 bg-white text-slate-900 rounded-xl font-black text-[10px] uppercase tracking-wider transition-all duration-200 shadow-xl hover:scale-105 active:scale-95", children: [_jsx(Upload, { size: 14, strokeWidth: 3 }), "Replace"] })] }) })] })) : (_jsx("div", { className: "relative group/placeholder", children: _jsxs("div", { className: "rounded-2xl border-2 border-dashed border-slate-200 bg-[#fcfcfd] p-10 flex flex-col items-center justify-center gap-4 text-slate-400 hover:border-blue-400 hover:bg-blue-50/20 transition-all cursor-pointer overflow-hidden", children: [_jsx("div", { className: "w-14 h-14 rounded-[20px] bg-white border border-slate-100 flex items-center justify-center shadow-md group-hover/placeholder:scale-110 group-hover/placeholder:rotate-3 transition-all duration-500", children: _jsx(Upload, { size: 24, className: "text-slate-300 group-hover/placeholder:text-blue-500 transition-colors", strokeWidth: 2.5 }) }), _jsxs("div", { className: "flex flex-col items-center gap-1.5", children: [_jsx("span", { className: "text-[11px] font-black uppercase tracking-[0.1em] text-slate-600 group-hover/placeholder:text-blue-600 transition-colors", children: "Upload Assets" }), _jsx("span", { className: "text-[9px] font-bold text-slate-400 uppercase tracking-widest", children: "Supports PNG, JPG, WEBP" })] }), _jsx("div", { className: "absolute inset-0 opacity-[0.03] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] [background-size:16px_16px]" })] }) })), _jsxs("div", { className: "relative group/input", children: [_jsx("div", { className: "absolute left-4 top-1/2 -translate-y-1/2 text-slate-300 transition-colors group-focus-within/input:text-blue-500", children: _jsx(Link2, { size: 14, strokeWidth: 2.5 }) }), _jsx("input", { type: "text", className: "w-full h-12 pl-10 pr-4 bg-slate-50/50 border border-slate-200 rounded-xl text-[12px] font-bold text-slate-700 placeholder:text-slate-300 focus:outline-none focus:ring-4 focus:ring-blue-500/5 focus:border-blue-500/40 focus:bg-white transition-all shadow-sm group-hover/input:border-slate-300", value: value || '', placeholder: placeholder || `Enter asset URL...`, onChange: (e) => onChange(e.target.value) })] })] })] }));
|
|
23
|
+
} }), _jsx("div", { className: "absolute inset-0 bg-slate-900/40 opacity-0 group-hover/img:opacity-100 transition-all duration-300 flex flex-col items-center justify-center gap-2 backdrop-blur-[1px]", children: _jsxs("div", { className: "flex items-center gap-2 transform translate-y-2 group-hover/img:translate-y-0 transition-all duration-300", children: [_jsx("button", { type: "button", onClick: () => onChange(''), className: "flex items-center justify-center w-10 h-10 bg-white/20 hover:bg-red-500 text-white rounded-xl backdrop-blur-md transition-all duration-200 border border-white/30", title: "Remove Image", children: _jsx(X, { size: 18, strokeWidth: 2.5 }) }), _jsxs("button", { type: "button", onClick: handleReplace, className: "flex items-center gap-2 px-5 py-2.5 bg-white text-slate-900 rounded-xl font-black text-[10px] uppercase tracking-wider transition-all duration-200 shadow-xl hover:scale-105 active:scale-95", title: isAssetLibraryAvailable ? "Replace image from asset library" : "Replace image", children: [_jsx(Upload, { size: 14, strokeWidth: 3 }), "Replace"] })] }) })] })) : (_jsx("div", { className: "relative group/placeholder", children: _jsxs("div", { className: "rounded-2xl border-2 border-dashed border-slate-200 bg-[#fcfcfd] p-10 flex flex-col items-center justify-center gap-4 text-slate-400 hover:border-blue-400 hover:bg-blue-50/20 transition-all cursor-pointer overflow-hidden", children: [_jsx("div", { className: "w-14 h-14 rounded-[20px] bg-white border border-slate-100 flex items-center justify-center shadow-md group-hover/placeholder:scale-110 group-hover/placeholder:rotate-3 transition-all duration-500", children: _jsx(Upload, { size: 24, className: "text-slate-300 group-hover/placeholder:text-blue-500 transition-colors", strokeWidth: 2.5 }) }), _jsxs("div", { className: "flex flex-col items-center gap-1.5", children: [_jsx("span", { className: "text-[11px] font-black uppercase tracking-[0.1em] text-slate-600 group-hover/placeholder:text-blue-600 transition-colors", children: "Upload Assets" }), _jsx("span", { className: "text-[9px] font-bold text-slate-400 uppercase tracking-widest", children: "Supports PNG, JPG, WEBP" })] }), _jsx("div", { className: "absolute inset-0 opacity-[0.03] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] [background-size:16px_16px]" })] }) })), _jsxs("div", { className: "relative group/input", children: [_jsx("div", { className: "absolute left-4 top-1/2 -translate-y-1/2 text-slate-300 transition-colors group-focus-within/input:text-blue-500", children: _jsx(Link2, { size: 14, strokeWidth: 2.5 }) }), _jsx("input", { type: "text", className: "w-full h-12 pl-10 pr-4 bg-slate-50/50 border border-slate-200 rounded-xl text-[12px] font-bold text-slate-700 placeholder:text-slate-300 focus:outline-none focus:ring-4 focus:ring-blue-500/5 focus:border-blue-500/40 focus:bg-white transition-all shadow-sm group-hover/input:border-slate-300", value: value || '', placeholder: placeholder || `Enter asset URL...`, onChange: (e) => onChange(e.target.value) })] })] })] }));
|
|
10
24
|
};
|
|
@@ -2,6 +2,7 @@ export { PayazaFormEditor } from './PayazaFormEditor';
|
|
|
2
2
|
export type { PayazaFormEditorProps } from './PayazaFormEditor';
|
|
3
3
|
export { PayazaFormEditorFullPage } from './PayazaFormEditorFullPage';
|
|
4
4
|
export type { PayazaFormEditorFullPageProps } from './PayazaFormEditorFullPage';
|
|
5
|
+
export { getGlobalAssetSelectionHandler } from './AssetSelectionContext';
|
|
5
6
|
export * from './engine';
|
|
6
7
|
export * from './data-transformer';
|
|
7
8
|
export * from './layout-loader';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAChF,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC;AACzE,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { PayazaFormEditor } from './PayazaFormEditor';
|
|
2
2
|
export { PayazaFormEditorFullPage } from './PayazaFormEditorFullPage';
|
|
3
|
+
export { getGlobalAssetSelectionHandler } from './AssetSelectionContext';
|
|
3
4
|
export * from './engine';
|
|
4
5
|
export * from './data-transformer';
|
|
5
6
|
export * from './layout-loader';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "payaza-storefront-layouts",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.47",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Shared layout components for StoreFront applications",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -159,4 +159,4 @@
|
|
|
159
159
|
"publishConfig": {
|
|
160
160
|
"access": "public"
|
|
161
161
|
}
|
|
162
|
-
}
|
|
162
|
+
}
|