@basmilius/common 3.0.0

package/src/util/generateColorPalette.ts

@@ -0,0 +1,132 @@
+import { converter, formatHex } from 'culori';
+
+type Shade =
+    | 25
+    | 50
+    | 100
+    | 200
+    | 300
+    | 400
+    | 500
+    | 600
+    | 700
+    | 800
+    | 900
+    | 950;
+
+const toOklch = converter('oklch');
+
+const SHADES: Shade[] = [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+
+const POSITION: Record<Shade, number> = {
+    25: 0.00,
+    50: 0.05,
+    100: 0.10,
+    200: 0.20,
+    300: 0.35,
+    400: 0.48,
+    500: 0.55,
+    600: 0.65,
+    700: 0.75,
+    800: 0.85,
+    900: 0.93,
+    950: 0.98
+};
+
+function clamp(v: number, min = 0, max = 1) {
+    return Math.min(max, Math.max(min, v));
+}
+
+export default function (baseHex: string, prefix = 'color') {
+    const base = toOklch(baseHex);
+
+    if (!base || base.mode !== 'oklch') {
+        throw new Error('Invalid color');
+    }
+
+    const palette: Record<string, string> = {};
+
+    for (const shade of SHADES) {
+        const p = POSITION[shade];
+
+        let l =
+            shade < 500
+                ? base.l + (1 - base.l) * (1 - p / POSITION[500])
+                : base.l * (1 - (p - POSITION[500]) / (1 - POSITION[500]));
+
+        l = clamp(l);
+
+        const distanceFrom500 = Math.abs(p - POSITION[500]);
+        const chromaFalloff = 1 - distanceFrom500 * 1.4;
+
+        const c = (base.c ?? 0) * clamp(chromaFalloff, 0.2, 1);
+
+        palette[`--${prefix}-${shade}`] = formatHex({
+            mode: 'oklch',
+            l,
+            c,
+            h: base.h
+        });
+    }
+
+    return palette;
+}
+
+// Tailwind Like
+// import { converter, formatHex } from 'culori';
+// import { clamp } from 'lodash-es';
+//
+// type Shade =
+//     | 25 | 50 | 100 | 200 | 300 | 400
+//     | 500 | 600 | 700 | 800 | 900 | 950;
+//
+// const toOklch = converter('oklch');
+//
+// const SHADES: Shade[] = [
+//     25, 50, 100, 200, 300, 400,
+//     500,
+//     600, 700, 800, 900, 950
+// ];
+//
+// // Perceptual lightness curve (similar to Tailwind gray)
+// const LIGHTNESS_CURVE: Record<Shade, number> = {
+//     25: 0.99,
+//     50: 0.96,
+//     100: 0.92,
+//     200: 0.86,
+//     300: 0.78,
+//     400: 0.66,
+//     500: 0.55,
+//     600: 0.44,
+//     700: 0.33,
+//     800: 0.23,
+//     900: 0.15,
+//     950: 0.08
+// };
+//
+// export default function (baseHex: string, prefix = 'color', maxChroma = 0.08) {
+//     const base = toOklch(baseHex);
+//
+//     if (!base || base.mode !== 'oklch') {
+//         throw new Error('Invalid color');
+//     }
+//
+//     const palette: Record<string, string> = {};
+//
+//     for (const shade of SHADES) {
+//         let l = LIGHTNESS_CURVE[shade];
+//
+//         const distanceFromMiddle = Math.abs(shade === 500 ? 0 : (shade - 500) / 450);
+//         const c = clamp((base.c ?? 0) * maxChroma * (1 - distanceFromMiddle), 0, 1);
+//
+//         palette[`--${prefix}-${shade}`] = formatHex({
+//             mode: 'oklch',
+//             l,
+//             c,
+//             h: base.h
+//         });
+//     }
+//
+//     return palette;
+// }
+

package/src/util/guarded.ts

@@ -0,0 +1,73 @@
+import { isRequestError, isUnsanctionedRequest } from '@basmilius/http-client';
+import { showSnackbar } from '@flux-ui/components';
+import { ForbiddenException, HandledException, UnauthorizedException } from '../error';
+
+const ORIGINAL = Symbol();
+
+export default function <T extends Function>(fn: T): T;
+export default function <T extends Function>(fn: T, onError: (err: Error) => void): T;
+export default function <T extends Function>(fn: T, snackbarTitle: string, snackbarMessage: string): T;
+
+/**
+ * Adds basic global error checking on the provided function. Should
+ * be used when fetching remote data. Don't use try-catch with this
+ * function, because it throws exceptions that our global error handler
+ * will catch for you.
+ *
+ * ```typescript
+ * const {getOrder} = useService(OrderService);
+ * const _getOrder = guarded(getOrder);
+ * const _getOrder = guarded(getOrder, err => console.error(err));
+ * const _getOrder = guarded(getOrder, 'Error snackbar title', 'Error snackbar message');
+ * ```
+ */
+export default function <T extends Function>(fn: T, onErrorOrSnackbarTitle?: ((err: Error) => void) | string, snackbarMessage?: string): T {
+    if (isGuarded(fn)) {
+        // note(Bas): Always wrap the original function, so we don't get
+        //  double error handling.
+        fn = fn[ORIGINAL];
+    }
+
+    const wrapped = async (...args: any[]): Promise<T> => {
+        try {
+            return await fn(...args);
+        } catch (err) {
+            if (isRequestError(err) && err.statusCode === 403) {
+                throw new ForbiddenException();
+            }
+
+            if (isUnsanctionedRequest(err)) {
+                throw new UnauthorizedException();
+            }
+
+            if (onErrorOrSnackbarTitle) {
+                if (typeof onErrorOrSnackbarTitle === 'function') {
+                    onErrorOrSnackbarTitle(err as Error);
+                } else {
+                    showSnackbar({
+                        color: 'danger',
+                        icon: 'circle-exclamation',
+                        message: snackbarMessage,
+                        title: onErrorOrSnackbarTitle
+                    });
+                }
+
+                throw new HandledException();
+            }
+
+            throw err;
+        }
+    };
+
+    wrapped[ORIGINAL] = fn;
+
+    return wrapped as unknown as T;
+}
+
+function isGuarded<T extends Function>(fn: T | Guarded<T>): fn is Guarded<T> {
+    return ORIGINAL in fn;
+}
+
+type Guarded<T extends Function> = Function & {
+    readonly [ORIGINAL]: T;
+};

package/src/util/index.ts

@@ -0,0 +1,9 @@
+export { default as emptyNull } from './emptyNull';
+export { default as generateColorPalette } from './generateColorPalette';
+export { default as guarded } from './guarded';
+export { default as onError } from './onError';
+export { default as onErrorSnackbar } from './onErrorSnackbar';
+export { default as persistentRef } from './persistentRef';
+export { default as persistentStringRef } from './persistentStringRef';
+export { default as runBefore } from './runBefore';
+export { default as unrefAll } from './unrefAll';

package/src/util/onError.ts

@@ -0,0 +1,5 @@
+import guarded from './guarded';
+
+export default function <T extends Function>(onError: (err: Error) => void): T {
+    return ((fn: T) => guarded(fn, onError)) as unknown as T;
+}

package/src/util/onErrorSnackbar.ts

@@ -0,0 +1,15 @@
+import { isRequestError } from '@basmilius/http-client';
+import { showSnackbar } from '@flux-ui/components';
+import onError from './onError';
+
+export default <T extends Function>() => onError<T>(err => {
+    if (!isRequestError(err)) {
+        throw err;
+    }
+
+    showSnackbar({
+        color: 'danger',
+        icon: 'circle-exclamation',
+        message: err.errorDescription
+    });
+});

package/src/util/persistentRef.ts

@@ -0,0 +1,21 @@
+import { ref, type Ref, watch } from 'vue';
+
+type Deserializer<T> = (value: string) => T;
+type Serializer<T> = (value: T) => string;
+
+export default function <T>(key: string, defaultValue: T, serialize: Serializer<T> = JSON.stringify, deserialize: Deserializer<T> = JSON.parse): Ref<T | null> {
+    const storedValue = localStorage.getItem(key);
+    const initialValue = storedValue ? deserialize(storedValue) : defaultValue;
+
+    const persistentRef: Ref<T | null> = ref<T>(initialValue) as Ref<T | null>;
+
+    watch(persistentRef, value => {
+        if (value === null || value === undefined) {
+            localStorage.removeItem(key);
+        } else {
+            localStorage.setItem(key, serialize(value));
+        }
+    }, {deep: true, immediate: true});
+
+    return persistentRef;
+}

package/src/util/persistentStringRef.ts

@@ -0,0 +1,6 @@
+import type { Ref } from 'vue';
+import persistentRef from './persistentRef';
+
+export default function (key: string, defaultValue: string | null): Ref<string | null> {
+    return persistentRef(key, defaultValue, value => value ?? '', value => value === '' ? null : value);
+}

package/src/util/runBefore.ts

@@ -0,0 +1,8 @@
+export default function <T extends Function>(before: () => void): T {
+    return ((fn: T) => {
+        return (...args: any[]) => {
+            before();
+            return fn(...args);
+        };
+    }) as unknown as T;
+}

package/src/util/unrefAll.ts

@@ -0,0 +1,19 @@
+import { type Ref, unref } from 'vue';
+
+type UnrefAll<T extends readonly unknown[]> = {
+    [K in keyof T]: T[K] extends Ref<infer U> ? NonNullable<U> : T[K];
+};
+
+export default function <T extends readonly unknown[]>(...deps: T): UnrefAll<T> {
+    return deps
+        .map(unref)
+        .map(ensure) as UnrefAll<T>;
+}
+
+function ensure<T>(dep: T): T {
+    if (!dep) {
+        throw new Error('Dep is null or undefined.');
+    }
+
+    return dep;
+}