@lobb-js/studio 0.1.34 → 0.1.36

package/src/lib/index.ts

@@ -0,0 +1,36 @@
+// Main Studio component
+export { default as Studio } from "./components/Studio.svelte";
+
+// Lobb client and utilities
+export { Lobb } from "./Lobb";
+export * from "./utils";
+export * from "./eventSystem";
+export { ctx, lobb } from "./store.svelte";
+export type * from "./store.types";
+
+export function createSet(lastNumber: number): Set<number> {
+	const set = new Set() as Set<number>;
+	for (let i = 0; i <= lastNumber; i++) {
+		set.add(i);
+	}
+	return set;
+}
+
+export function moveElement<T>(array: T[], fromIndex: number, toIndex: number) {
+	if (
+		fromIndex < 0 || fromIndex >= array.length || toIndex < 0 ||
+		toIndex >= array.length
+	) {
+		throw new Error("Index out of bounds");
+	}
+	const [element] = array.splice(fromIndex, 1);
+	array.splice(toIndex, 0, element);
+	return array;
+}
+
+export function pxToRem(px: number) {
+	const rootFontSize = parseFloat(
+		getComputedStyle(document.documentElement).fontSize,
+	);
+	return px / rootFontSize;
+}

package/src/lib/store.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CTX } from './store.types';
+import { Lobb } from './Lobb';
+export declare const ctx: CTX;
+export declare const lobb: Lobb;

package/src/lib/store.svelte.ts

@@ -0,0 +1,33 @@
+import type { CTX } from './store.types';
+import { Lobb } from './Lobb';
+import { toast } from 'svelte-sonner';
+import pkg from '../../package.json';
+
+if (!window.APP_ENV) {
+  window.APP_ENV = {};
+}
+
+if (window.APP_ENV.LOBB_URL === '%LOBB_URL%') {
+  window.APP_ENV.LOBB_URL = null;
+}
+
+export const ctx: CTX = $state.raw({
+  studioVersion: pkg.version,
+  lobbUrl: window.APP_ENV.LOBB_URL || localStorage.getItem("lobb_url"),
+  extensions: {},
+  meta: {
+    collections: null,
+    extensions: null,
+    filter: null
+  },
+});
+
+export const lobb = new Lobb(ctx.lobbUrl);
+
+// logging the message if got any bad responses
+lobb.onResponse(async (response) => {
+  if (response.status >= 400) {
+    const body = await response.json();
+    toast.error(body.message);
+  }
+});

package/src/lib/store.types.d.ts

@@ -0,0 +1,26 @@
+import type { Extension } from "../extensions/extension.types";
+interface Collection {
+    category: string;
+    owner: string;
+    fields: Record<string, any>;
+    singleton: boolean;
+}
+type Collections = Record<string, Collection>;
+interface Meta {
+    version: string;
+    relations: Array<any>;
+    collections: Collections;
+    extensions: Record<string, any>;
+    filter: any;
+    events: any[];
+    event_context_type: string;
+    studio_workflows: any[];
+}
+export interface CTX {
+    studioVersion: string;
+    lobbUrl: string | null;
+    extensions: Record<string, Extension>;
+    meta: Meta;
+    currentUrl: URL;
+}
+export {};

package/src/lib/store.types.ts

@@ -0,0 +1,28 @@
+import type { Extension } from "../extensions/extension.types";
+
+interface Collection {
+    category: string;
+    owner: string;
+    fields: Record<string, any>;
+    singleton: boolean;
+}
+type Collections = Record<string, Collection>;
+
+interface Meta {
+    version: string;
+    relations: Array<any>;
+    collections: Collections;
+    extensions: Record<string, any>;
+    filter: any;
+    events: any[];
+    event_context_type: string;
+    studio_workflows: any[];
+}
+
+export interface CTX {
+    studioVersion: string;
+    lobbUrl: string | null;
+    extensions: Record<string, Extension>;
+    meta: Meta;
+    currentUrl: URL;
+}

package/src/lib/utils.d.ts

@@ -0,0 +1,27 @@
+import { type ClassValue } from "clsx";
+import { MediaQuery } from 'svelte/reactivity';
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, "child"> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};
+export declare const mediaQueries: {
+    sm: MediaQuery;
+    md: MediaQuery;
+    lg: MediaQuery;
+    xl: MediaQuery;
+    '2xl': MediaQuery;
+};
+export declare function getFileFromUser(): Promise<import("browser-fs-access").FileWithHandle>;
+export declare function getFieldRelation(collectionName: string, fieldName: string): any;
+export declare function getDiscriminatorFieldRelation(collectionName: string, fieldName: string): any;
+export declare function recordHasChildrean(collectionName: string): boolean;
+export declare function calculateDrawerWidth(): number;
+export declare function getChangedProperties(oldObj: Record<string, any>, newObj: Record<string, any>): Record<string, any>;
+export declare function parseFunction(functionString: string): any;

package/src/lib/utils.ts

@@ -0,0 +1,84 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+import { fileOpen } from 'browser-fs-access';
+import { MediaQuery } from 'svelte/reactivity';
+import { ctx } from "./store.svelte";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
+
+
+export const mediaQueries = {
+    sm: new MediaQuery('min-width: 640px'),
+    md: new MediaQuery('min-width: 768px'),
+    lg: new MediaQuery('min-width: 1024px'),
+    xl: new MediaQuery('min-width: 1280px'),
+    '2xl': new MediaQuery('min-width: 1536px'),
+}
+
+export async function getFileFromUser() {
+    return await fileOpen()
+};
+
+export function getFieldRelation(collectionName: string, fieldName: string) {
+    const relations = ctx.meta.relations;
+    for (let index = 0; index < relations.length; index++) {
+        const relation = relations[index];
+        if (relation.from.collection === collectionName && relation.from.field === fieldName) {
+            return relation;
+        }
+    }
+    return null;
+};
+
+export function getDiscriminatorFieldRelation(collectionName: string, fieldName: string) {
+    const relations = ctx.meta.relations;
+    for (let index = 0; index < relations.length; index++) {
+        const relation = relations[index];
+        if (relation.from.collection === collectionName && relation.from.discriminator === fieldName) {
+            return relation;
+        }
+    }
+    return null;
+};
+
+export function recordHasChildrean(collectionName: string) {
+    for (let index = 0; index < ctx.meta.relations.length; index++) {
+        const relation = ctx.meta.relations[index];
+        if (relation.to.collection === collectionName) {
+            return true;
+        }
+    }
+    return false;
+};
+
+export function calculateDrawerWidth() {
+    const backgroundDrawerButtons = document.querySelectorAll(".backgroundDrawerButton");
+    const drawersCount = Array.from(backgroundDrawerButtons).length;
+    const width = 672 - (30 * drawersCount);
+    return width;
+};
+
+export function getChangedProperties(oldObj: Record<string, any>, newObj: Record<string, any>) {
+    const changes: Record<string, any> = {};
+    for (const key of Object.keys(newObj)) {
+        if (oldObj[key] !== newObj[key]) {
+            changes[key] = newObj[key];
+        }
+    }
+    return changes;
+}
+
+export function parseFunction(functionString: string) {
+    const functionObj = new Function("return " + functionString)();
+    return functionObj;
+};