@yogiswara/honcho-editor-ui 3.9.1 → 4.0.0

package/dist/components/editor/SectionAlbum/HBaseDialog.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogActions, DialogContent, IconButton, Stack, Typography, Box, } from "@mui/material";
+import useColors from '../../../themes/colors';
+import { CloseOutlined } from "@mui/icons-material";
+export function HBaseDialog(props) {
+    const colors = useColors();
+    return (_jsxs(Dialog, { disableScrollLock: true, open: true, onClose: () => { }, "aria-labelledby": "responsive-dialog-title", PaperProps: {
+            sx: {
+                borderRadius: "28px",
+                // Shrink the max-width and width if it is centered
+                maxWidth: props.isCentered
+                    ? { xs: 328, sm: "260px", md: "260px" }
+                    : { xs: 328, sm: "456px", md: "456px" },
+                width: props.isCentered
+                    ? { xs: "328px", sm: "260px", md: "260px" }
+                    : { xs: "328px", sm: "456px", md: "456px" },
+                margin: { xs: 0, sm: "auto" },
+            },
+        }, children: [_jsx(DialogContent, { sx: { padding: props.hasFullWidthContent
+                        ? { xs: "24px 0 0 0", sm: "24px 0 0 0" }
+                        : { xs: "24px 24px 0 24px", sm: "24px 24px 0 24px" }
+                }, children: _jsxs(Stack, { spacing: 2, direction: "column", children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: props.isCentered ? "center" : "space-between", position: props.isCentered ? "relative" : undefined, sx: {
+                                px: props.hasFullWidthContent
+                                    ? { xs: "24px", sm: "24px" }
+                                    : 0
+                            }, children: [_jsx(Typography, { color: colors.onSurface, textAlign: props.isCentered ? "center" : "left", variant: "labelLarge", children: props.title }), props.onClose && (props.isCentered ? (_jsx(Box, { sx: { position: "absolute", right: 0 }, children: _jsx(CloseButton, { onClick: props.onClose }) })) : (_jsx(CloseButton, { onClick: props.onClose })))] }), _jsx(Typography, { variant: "bodyMedium", textAlign: props.isCentered ? "center" : "left", color: colors.onSurface, children: props.description })] }) }), props.action && (_jsx(DialogActions, { sx: { padding: 3, pt: props.paddingTop || "24px" }, children: _jsx(Stack, { direction: "row", justifyContent: props.isCentered ? "center" : "flex-end", alignItems: "center", gap: 1, sx: props.isCentered ? { width: "100%" } : {}, children: props.action }) }))] }));
+}
+export function HBaseDialogMiddle(props) {
+    const colors = useColors();
+    return (_jsx(Dialog, { disableScrollLock: true, open: true, onClose: () => { }, "aria-labelledby": "responsive-dialog-title", PaperProps: {
+            sx: {
+                borderRadius: "28px",
+                maxWidth: { xs: 328, sm: "456px", md: "456px" },
+                width: { xs: "328px", sm: "456px", md: "456px" },
+                //maxHeight: 306,
+                margin: { xs: 0, sm: "auto" },
+                pb: "24px"
+            },
+        }, children: _jsx(DialogContent, { sx: { padding: props.hasFullWidthContent
+                    ? { xs: "24px 0 0 0", sm: "24px 0 0 0" }
+                    : { xs: "24px 24px 0 24px", sm: "24px 24px 0 24px" }
+            }, children: _jsxs(Stack, { spacing: 2, direction: "column", alignItems: "center", children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: props.onClose ? "space-between" : "center", sx: {
+                            px: props.hasFullWidthContent
+                                ? { xs: "24px", sm: "24px" }
+                                : 0,
+                            width: "100%"
+                        }, children: [_jsx(Typography, { color: colors.onSurface, variant: "labelLarge", children: props.title }), props.onClose && (_jsx(CloseButton, { onClick: props.onClose }))] }), _jsx(Typography, { variant: "bodyMedium", color: colors.onSurface, textAlign: "center", children: props.description }), props.action && (_jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", gap: 1, sx: { pt: 1 }, children: props.action }))] }) }) }));
+}
+export function PositiveButton(props) {
+    const colors = useColors();
+    return (_jsx(Button, { variant: "text", disabled: props.disabled, sx: {
+            padding: props.padding,
+            ":hover": {
+                backgroundColor: "transparent",
+            },
+        }, onClick: props.onClick, children: _jsx(Typography, { variant: "buttonMedium", 
+            // Change color if disabled so the UI reflects the locked state
+            color: props.disabled ? "text.disabled" : colors.onSurface, children: props.text }) }));
+}
+export function NegativeButton(props) {
+    const colors = useColors();
+    return (_jsx(Button, { variant: "text", disabled: props.disabled, sx: {
+            borderRadius: 100,
+            // Change color if disabled so the UI reflects the locked state
+            color: props.disabled ? "text.disabled" : (props.color || colors.error),
+            backgroundColor: props.backgroundColor || "transparent",
+            padding: props.padding,
+            ":hover": {
+                backgroundColor: props.backgroundColorHover || "transparent",
+            },
+        }, onClick: props.onClick, children: props.text }));
+}
+function CloseButton(props) {
+    return (_jsx(IconButton, { onClick: props.onClick, children: _jsx(CloseOutlined, { htmlColor: "black" }) }));
+}

package/dist/components/editor/svg/IcChevron.d.ts

@@ -0,0 +1,5 @@
+import { SvgIconProps } from '@mui/material';
+export declare function IcChevronDown(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IcChevronUp(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IcChevronArrowDarkColor(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IcChevronArrowLightColor(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/editor/svg/IcChevron.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgIcon } from '@mui/material';
+export function IcChevronDown(props) {
+    return (_jsx(SvgIcon, { ...props, viewBox: "0 0 20 20", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M4.16406 7.5L9.9974 13.3333L15.8307 7.5", stroke: "#656369", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+;
+export function IcChevronUp(props) {
+    return (_jsx(SvgIcon, { ...props, viewBox: "0 0 20 20", children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { clipPath: "url(#clip0_25667_16969)", children: _jsx("path", { d: "M9.9974 1.66797C12.0818 3.94993 13.2664 6.91133 13.3307 10.0013C13.2664 13.0913 12.0818 16.0527 9.9974 18.3346M9.9974 1.66797C7.913 3.94993 6.72844 6.91133 6.66406 10.0013C6.72844 13.0913 7.913 16.0527 9.9974 18.3346M9.9974 1.66797C5.39502 1.66797 1.66406 5.39893 1.66406 10.0013C1.66406 14.6037 5.39502 18.3346 9.9974 18.3346M9.9974 1.66797C14.5998 1.66797 18.3307 5.39893 18.3307 10.0013C18.3307 14.6037 14.5998 18.3346 9.9974 18.3346M2.08075 7.5013H17.9141M2.08073 12.5013H17.9141", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_25667_16969", children: _jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }) }));
+}
+export function IcChevronArrowDarkColor(props) {
+    return (_jsx(SvgIcon, { ...props, viewBox: "0 0 20 20", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M4.16406 7.5L9.9974 13.3333L15.8307 7.5", stroke: "#1C1B1F", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+export function IcChevronArrowLightColor(props) {
+    return (_jsx(SvgIcon, { ...props, viewBox: "0 0 20 20", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.5 15.8307L13.3333 9.9974L7.5 4.16406", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}

package/dist/components/editor/svg/IcPencilIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material';
+export declare function IcPencilIconWhite(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IcPencilIconDark(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/editor/svg/IcPencilIcon.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from '@mui/material';
+export function IcPencilIconWhite(props) {
+    return (_jsx(SvgIcon, { ...props, viewBox: "0 0 20 20", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M14.5289 8.57532L11.4247 5.47109M2.5 17.5L5.12647 17.2082C5.44736 17.1725 5.6078 17.1547 5.75777 17.1061C5.89082 17.0631 6.01744 17.0022 6.13419 16.9252C6.26579 16.8384 6.37994 16.7243 6.60824 16.496L16.8571 6.24715C17.7143 5.38993 17.7143 4.00012 16.8571 3.14291C15.9999 2.2857 14.6101 2.2857 13.7529 3.14291L3.50401 13.3918C3.27571 13.6201 3.16155 13.7342 3.07478 13.8658C2.99779 13.9826 2.93693 14.1092 2.89386 14.2422C2.84531 14.3922 2.82748 14.5526 2.79183 14.8735L2.5 17.5Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+;
+export function IcPencilIconDark(props) {
+    return (_jsx(SvgIcon, { ...props, viewBox: "0 0 20 20", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M14.5289 8.57532L11.4247 5.47109M2.5 17.5L5.12647 17.2082C5.44736 17.1725 5.6078 17.1547 5.75777 17.1061C5.89082 17.0631 6.01744 17.0022 6.13419 16.9252C6.26579 16.8384 6.37994 16.7243 6.60824 16.496L16.8571 6.24715C17.7143 5.38993 17.7143 4.00012 16.8571 3.14291C15.9999 2.2857 14.6101 2.2857 13.7529 3.14291L3.50401 13.3918C3.27571 13.6201 3.16155 13.7342 3.07478 13.8658C2.99779 13.9826 2.93693 14.1092 2.89386 14.2422C2.84531 14.3922 2.82748 14.5526 2.79183 14.8735L2.5 17.5Z", stroke: "#1C1B1F", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+;

package/dist/components/editor/svg/IcPlusButton.d.ts

@@ -0,0 +1,2 @@
+import { SvgIconOwnProps } from "@mui/material";
+export default function IcPlusButton(props: SvgIconOwnProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/editor/svg/IcPlusButton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from "@mui/material";
+export default function IcPlusButton(props) {
+    return (_jsx(SvgIcon, { ...props, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M10.0013 4.16602V15.8327M4.16797 9.99935H15.8346", stroke: "#1C1B1F", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}

package/dist/components/editor/svg/IcTrashIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgIconProps } from '@mui/material';
+export declare function IcTrashIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/editor/svg/IcTrashIcon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from '@mui/material';
+export function IcTrashIcon(props) {
+    return (_jsx(SvgIcon, { ...props, viewBox: "0 0 20 20", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.5 2.5H12.5M2.5 5H17.5M15.8333 5L15.2489 13.7661C15.1612 15.0813 15.1174 15.7389 14.8333 16.2375C14.5833 16.6765 14.206 17.0294 13.7514 17.2497C13.235 17.5 12.5759 17.5 11.2578 17.5H8.74221C7.42409 17.5 6.76503 17.5 6.24861 17.2497C5.79396 17.0294 5.41674 16.6765 5.16665 16.2375C4.88259 15.7389 4.83875 15.0813 4.75107 13.7661L4.16667 5", stroke: "#DC362E", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+;

package/dist/hooks/editor/useHonchoEditorBulk.d.ts

@@ -12,6 +12,14 @@ export interface PhotoData {
     isSelected: boolean;
     adjustments?: Partial<AdjustmentValues>;
 }
+export interface GalleryDataProps {
+    photos: any[];
+    isLoading: boolean;
+    isLoadingMore: boolean;
+    hasMore: boolean;
+    loadMore: () => void;
+    reloadGallery: () => void;
+}
 export interface CopyCheckboxes {
     color: {
         temperature: boolean;
@@ -113,6 +121,7 @@ export interface UseHonchoEditorBulkReturn {
         selectedCount: number;
         totalImages: number;
         historySize: number;
+        isReady: boolean;
     };
     updateFromSocket: (imageId: string, adjustmentTaskId: string, adjustment: ColorAdjustment, preset_id?: string) => Promise<void>;
     adjustSelected: (delta: Partial<AdjustmentState>) => void;
@@ -137,22 +146,4 @@ export interface UseHonchoEditorBulkReturn {
         };
     };
 }
-/**
- * Helper function to create selective adjustments based on checkboxes
- */
-/**
- * Hook for bulk photo editing with multi-image backend synchronization.
- *
- * **Multi-Image Backend Sync:**
- * - Each selected image maintains its own history and backend state
- * - History operations (undo/redo) trigger separate controller.setHistoryIndex() calls for each selected image
- * - Preset application triggers separate controller.createEditorConfig() calls for each selected image
- * - Adjustment changes trigger separate controller.createEditorConfig() calls for each selected image
- *
- * **Key Features:**
- * - Individual history tracking per image with backend persistence
- * - Bulk operations that respect per-image differences
- * - Automatic backend synchronization for all state changes
- * - Comprehensive logging of multi-image operations
- */
-export declare function useHonchoEditorBulk(controller: Controller, eventID: string, firebaseUid: string): UseHonchoEditorBulkReturn;
+export declare function useHonchoEditorBulk(controller: Controller, eventID: string, firebaseUid: string, galleryHookData: GalleryDataProps): UseHonchoEditorBulkReturn;