@yogiswara/honcho-editor-ui 3.2.0 → 3.2.2

package/dist/components/editor/HSliderColorMobile.js

@@ -123,6 +123,7 @@ export default function HSliderColorMobile(props) {
                                 right: 0,
                                 zIndex: 1,
                                 touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
+                                userSelect: 'none',
                             } }), _jsx(Slider, { sx: {
                                 width: "100%",
                                 color: colors.surface,
@@ -161,6 +162,7 @@ export default function HSliderColorMobile(props) {
                                 right: 0,
                                 zIndex: 1,
                                 touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
+                                userSelect: 'none',
                             } }), _jsx(Slider, { sx: {
                                 width: "100%",
                                 color: colors.surface,
@@ -199,6 +201,7 @@ export default function HSliderColorMobile(props) {
                                 right: 0,
                                 zIndex: 1,
                                 touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
+                                userSelect: 'none',
                             } }), _jsx(Slider, { sx: {
                                 width: "100%",
                                 color: colors.surface,
@@ -237,6 +240,7 @@ export default function HSliderColorMobile(props) {
                                 right: 0,
                                 zIndex: 1,
                                 touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
+                                userSelect: 'none',
                             } }), _jsx(Slider, { sx: {
                                 width: "100%",
                                 color: colors.surface,

package/dist/components/editor/HSliderLightMobile.js

@@ -105,6 +105,7 @@ export default function HSliderLightMobile(props) {
                                 right: 0,
                                 zIndex: 1,
                                 touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
+                                userSelect: 'none',
                             } }), _jsx(Slider, { sx: {
                                 width: "100%",
                                 color: colors.onSurfaceVariant,
@@ -118,10 +119,12 @@ export default function HSliderLightMobile(props) {
                                     boxShadow: 'none',
                                     opacity: 1,
                                     pointerEvents: 'auto',
+                                    zIndex: 2,
                                 },
                                 '& .MuiSlider-thumb:hover': {
                                     boxShadow: 'none',
                                     pointerEvents: 'auto',
+                                    zIndex: 2,
                                 }
                             }, slotProps: {
                                 thumb: {
@@ -142,6 +145,7 @@ export default function HSliderLightMobile(props) {
                                 right: 0,
                                 zIndex: 1,
                                 touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
+                                userSelect: 'none',
                             } }), _jsx(Slider, { sx: {
                                 width: "100%",
                                 color: colors.onSurfaceVariant,
@@ -155,10 +159,12 @@ export default function HSliderLightMobile(props) {
                                     boxShadow: 'none',
                                     opacity: 1,
                                     pointerEvents: 'auto',
+                                    zIndex: 2,
                                 },
                                 '& .MuiSlider-thumb:hover': {
                                     boxShadow: 'none',
                                     pointerEvents: 'auto',
+                                    zIndex: 2,
                                 }
                             }, slotProps: {
                                 thumb: {
@@ -179,6 +185,7 @@ export default function HSliderLightMobile(props) {
                                 right: 0,
                                 zIndex: 1,
                                 touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
+                                userSelect: 'none',
                             } }), _jsx(Slider, { sx: {
                                 width: "100%",
                                 color: colors.onSurfaceVariant,
@@ -192,10 +199,12 @@ export default function HSliderLightMobile(props) {
                                     boxShadow: 'none',
                                     opacity: 1,
                                     pointerEvents: 'auto',
+                                    zIndex: 2,
                                 },
                                 '& .MuiSlider-thumb:hover': {
                                     boxShadow: 'none',
                                     pointerEvents: 'auto',
+                                    zIndex: 2,
                                 }
                             }, slotProps: {
                                 thumb: {
@@ -216,6 +225,7 @@ export default function HSliderLightMobile(props) {
                                 right: 0,
                                 zIndex: 1,
                                 touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
+                                userSelect: 'none',
                             } }), _jsx(Slider, { sx: {
                                 width: "100%",
                                 color: colors.onSurfaceVariant,
@@ -229,10 +239,12 @@ export default function HSliderLightMobile(props) {
                                     boxShadow: 'none',
                                     opacity: 1,
                                     pointerEvents: 'auto',
+                                    zIndex: 2,
                                 },
                                 '& .MuiSlider-thumb:hover': {
                                     boxShadow: 'none',
                                     pointerEvents: 'auto',
+                                    zIndex: 2,
                                 }
                             }, slotProps: {
                                 thumb: {
@@ -253,6 +265,7 @@ export default function HSliderLightMobile(props) {
                                 right: 0,
                                 zIndex: 1,
                                 touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
+                                userSelect: 'none',
                             } }), _jsx(Slider, { sx: {
                                 width: "100%",
                                 color: colors.onSurfaceVariant,
@@ -266,10 +279,12 @@ export default function HSliderLightMobile(props) {
                                     boxShadow: 'none',
                                     opacity: 1,
                                     pointerEvents: 'auto',
+                                    zIndex: 2,
                                 },
                                 '& .MuiSlider-thumb:hover': {
                                     boxShadow: 'none',
                                     pointerEvents: 'auto',
+                                    zIndex: 2,
                                 }
                             }, slotProps: {
                                 thumb: {
@@ -290,6 +305,7 @@ export default function HSliderLightMobile(props) {
                                 right: 0,
                                 zIndex: 1,
                                 touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
+                                userSelect: 'none',
                             } }), _jsx(Slider, { sx: {
                                 width: "100%",
                                 color: colors.onSurfaceVariant,
@@ -303,10 +319,12 @@ export default function HSliderLightMobile(props) {
                                     boxShadow: 'none',
                                     opacity: 1,
                                     pointerEvents: 'auto',
+                                    zIndex: 2,
                                 },
                                 '& .MuiSlider-thumb:hover': {
                                     boxShadow: 'none',
                                     pointerEvents: 'auto',
+                                    zIndex: 2,
                                 }
                             }, slotProps: {
                                 thumb: {

package/dist/services/base.d.ts

@@ -0,0 +1,57 @@
+import { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
+import { Observable } from "rxjs/internal/Observable";
+export declare const api: any;
+export interface ResponseData<T> {
+    code?: number;
+    message?: string;
+    data?: T;
+    error_message?: string;
+}
+export declare class ResponseError extends Error {
+    code: number;
+    error_message: string;
+    isEmptyData: boolean;
+    constructor(code: number, error_message: string, originalError?: Error, isEmptyData?: boolean);
+}
+export declare class EmptyDataError extends Error {
+    constructor();
+}
+export declare function handleResponse<T>(res: AxiosResponse<ResponseData<T>>): T;
+export declare function handleError(error: any): Observable<any>;
+export declare function isResponseError(error: any): Boolean;
+/**
+ * @deprecated use axiosGetObservable, axiosPostObservable, axiosPutObservable, axiosDeleteObservable instead
+ * @param promise
+ */
+export declare function fromAxiosToObservable<T>(promise: Promise<AxiosResponse<ResponseData<T>>>): Observable<T>;
+export declare const apiV3: any;
+export declare class BaseServices {
+    protected axios: AxiosInstance;
+    protected constructor(axios: AxiosInstance);
+    protected axiosGetObservable<T>(url: string, params?: AxiosRequestConfig<any> | undefined): Observable<T>;
+    protected axiosPostObservable<T>(url: string, data: any, params?: AxiosRequestConfig<any> | undefined): Observable<T>;
+    protected axiosPutObservable<T>(url: string, data: any, params?: AxiosRequestConfig<any> | undefined): Observable<T>;
+    protected axiosDeleteObservable<T>(url: string, params?: AxiosRequestConfig<any> | undefined): Observable<T>;
+}
+export interface Result<T> {
+    getStatus(): "loading" | "success" | "error" | "not-found" | "idle";
+    getData(): T;
+    getDataOrNull(): T | null | undefined;
+    getError(): any;
+}
+export declare class ResultImpl<T> implements Result<T> {
+    private readonly status;
+    private readonly data;
+    private readonly error;
+    getStatus(): "loading" | "success" | "error" | "not-found" | "idle";
+    getData(): T;
+    getError(): any;
+    getDataOrNull(): T | null | undefined;
+    private constructor();
+    static success<T>(data: T): Result<T>;
+    static loading<T>(): Result<T>;
+    static error<T>(err: any): Result<T>;
+    static notFound<T>(): Result<T>;
+    static idle<T>(): Result<T>;
+}
+export declare function fromPromise<T>(promise: Promise<T>): Observable<T>;

package/dist/services/base.js

@@ -0,0 +1,243 @@
+import axios from "axios";
+import axiosRetry from 'axios-retry';
+import { Observable } from "rxjs/internal/Observable";
+import { catchError, from, map } from "rxjs";
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:8080";
+const apiConfig = (version) => {
+    return axios.create({
+        baseURL: `${BASE_URL}/${version}/`,
+        timeout: 60000 * 2,
+    });
+};
+export const api = axios.create({
+    baseURL: `${BASE_URL}`,
+    timeout: 60000 * 2,
+});
+axiosRetry(api, { retries: 3, retryDelay: axiosRetry.linearDelay() });
+export class ResponseError extends Error {
+    constructor(code, error_message, originalError, isEmptyData = false) {
+        super(`${code}: ${error_message}`);
+        this.isEmptyData = false;
+        this.code = code;
+        this.error_message = error_message;
+        this.isEmptyData = isEmptyData;
+        if (originalError && originalError.stack) {
+            this.stack += `\nCaused by: ${originalError.stack}`;
+        }
+        // we need to set prototype to make this object can check by
+        // instanceof ResponseError
+        Object.setPrototypeOf(this, ResponseError.prototype);
+    }
+}
+export class EmptyDataError extends Error {
+    constructor() {
+        super("Data Empty, server not send any data in response");
+        // we need to set prototype to make this object can check by
+        // instanceof EmptyDataError
+        Object.setPrototypeOf(this, EmptyDataError.prototype);
+    }
+}
+// get data from response
+export function handleResponse(res) {
+    if (!res.data.data) {
+        throw new EmptyDataError();
+    }
+    return res.data.data;
+}
+function mapError(error) {
+    if (error.isAxiosError) {
+        if (error.response) {
+            if (typeof error.response.data === "string") {
+                return {
+                    code: error.response.status,
+                    message: `${error.response.status}: ${error.response.statusText}`,
+                    data: undefined,
+                    error_message: error.response.data,
+                };
+            }
+            else {
+                return error.response?.data;
+            }
+        }
+        else if (error.request) {
+            return {
+                code: 400,
+                message: "`${error.name}: failed connect to server check your connection`",
+                data: undefined,
+                error_message: "failed connect to server",
+            };
+        }
+        else {
+            return {
+                code: 400,
+                message: error.message,
+                data: undefined,
+                error_message: error.message,
+            };
+        }
+    }
+    else {
+        return {
+            code: 500,
+            message: String(error),
+            data: undefined,
+            error_message: String(error),
+        };
+    }
+}
+// handle error from response convert it and throw it as ResponseError
+export function handleError(error) {
+    if (error instanceof EmptyDataError) {
+        // if data is empty just throw error
+        throw new ResponseError(204, "Data Empty, server not send any data in response", error, true);
+    }
+    let response = mapError(error);
+    throw new ResponseError(response.code || 500, response.error_message || "Unknown error", error);
+}
+export function isResponseError(error) {
+    return !!((error.code) && (error.error_message));
+}
+/**
+ * @deprecated use axiosGetObservable, axiosPostObservable, axiosPutObservable, axiosDeleteObservable instead
+ * @param promise
+ */
+export function fromAxiosToObservable(promise) {
+    return from(promise).pipe(map(handleResponse), catchError(handleError));
+}
+export const apiV3 = apiConfig('v3');
+export class BaseServices {
+    constructor(axios) {
+        this.axios = axios;
+    }
+    axiosGetObservable(url, params) {
+        return new Observable(subscriber => {
+            const controller = new AbortController();
+            const paramsData = { signal: controller.signal, ...params };
+            this.axios.get(url, paramsData)
+                .then(res => {
+                console.debug({ res, url, params }, "success GET request");
+                subscriber.next(res);
+                subscriber.complete();
+            })
+                .catch((error) => {
+                console.error({ error, url, params }, "Failed GET request");
+                subscriber.error(error);
+            });
+            return () => {
+                console.debug({ url, params, method: "GET" }, "Abort request");
+                controller.abort();
+            };
+        }).pipe(map(handleResponse), catchError(handleError));
+    }
+    axiosPostObservable(url, data, params) {
+        return new Observable(subscriber => {
+            const controller = new AbortController();
+            const paramsData = { signal: controller.signal, ...params };
+            this.axios.post(url, data, paramsData)
+                .then(res => {
+                console.debug({ res, url, params }, "success POST request");
+                subscriber.next(res);
+                subscriber.complete();
+            })
+                .catch((error) => {
+                console.error({ error, url, params }, "Failed POST request");
+                subscriber.error(error);
+            });
+            return () => {
+                console.debug({ url, params, method: "POST" }, "Abort request");
+                controller.abort();
+            };
+        }).pipe(map(handleResponse), catchError(handleError));
+    }
+    axiosPutObservable(url, data, params) {
+        return new Observable(subscriber => {
+            const controller = new AbortController();
+            const paramsData = { signal: controller.signal, ...params };
+            this.axios.put(url, data, paramsData)
+                .then(res => {
+                console.debug({ res, url, params }, "success PUT request");
+                subscriber.next(res);
+                subscriber.complete();
+            })
+                .catch((error) => {
+                console.error({ error, url, params }, "Failed PUT request");
+                subscriber.error(error);
+            });
+            return () => {
+                console.debug({ url, params, method: "PUT" }, "Abort request");
+                controller.abort();
+            };
+        }).pipe(map(handleResponse), catchError(handleError));
+    }
+    axiosDeleteObservable(url, params) {
+        return new Observable(subscriber => {
+            const controller = new AbortController();
+            const paramsData = { signal: controller.signal, ...params };
+            this.axios.delete(url, paramsData)
+                .then(res => {
+                console.debug({ res, url, params }, "success DELETE request");
+                subscriber.next(res);
+                subscriber.complete();
+            })
+                .catch((error) => {
+                console.error({ error, url, params }, "Failed DELETE request");
+                subscriber.error(error);
+            });
+            return () => {
+                console.debug({ url, params, method: "DELETE" }, "Abort request");
+                controller.abort();
+            };
+        }).pipe(map(handleResponse), catchError(handleError));
+    }
+}
+export class ResultImpl {
+    getStatus() {
+        return this.status;
+    }
+    getData() {
+        if (this.data)
+            return this.data;
+        throw new Error("Data is not available");
+    }
+    getError() {
+        if (this.error)
+            return this.error;
+        throw new Error("Error is not available");
+    }
+    getDataOrNull() {
+        return this.data;
+    }
+    constructor(status, data, error) {
+        this.status = "idle";
+        this.status = status;
+        this.data = data;
+        this.error = error;
+    }
+    static success(data) {
+        return new ResultImpl("success", data, null);
+    }
+    static loading() {
+        return new ResultImpl("loading");
+    }
+    static error(err) {
+        return new ResultImpl("error", null, err);
+    }
+    static notFound() {
+        return new ResultImpl("not-found");
+    }
+    static idle() {
+        return new ResultImpl("idle");
+    }
+}
+export function fromPromise(promise) {
+    return new Observable(subscriber => {
+        promise.then(value => {
+            console.debug({ value }, "Promise success");
+            subscriber.next(value);
+            subscriber.complete();
+        }).catch(err => {
+            console.error({ err }, "Promise error");
+            subscriber.error(err);
+        });
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",