@lobb-js/studio 0.7.2 → 0.8.0

package/src/lib/store.svelte.ts

@@ -0,0 +1,13 @@
+import { LobbClient } from '@lobb-js/sdk';
+import { toast } from 'svelte-sonner';
+
+export function createLobb(url: string) {
+  const client = new LobbClient(url);
+  client.onResponse(async (response) => {
+    if (response.status >= 400) {
+      const body = await response.json();
+      toast.error(body.message);
+    }
+  });
+  return client;
+}

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.ts

@@ -0,0 +1,68 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+import { MediaQuery } from 'svelte/reactivity';
+import type { CTX } from "./store.types";
+
+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 function getFieldRelation(ctx: CTX, 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 recordHasChildrean(ctx: CTX, 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;
+};

package/src/main.ts

@@ -0,0 +1,18 @@
+import "./app.css";
+
+import { mount } from 'svelte'
+import App from './App.svelte'
+
+declare global {
+  interface Window {
+    APP_ENV: {
+        LOBB_URL: string
+    }
+  }
+}
+
+const app = mount(App, {
+  target: document.getElementById('app')!,
+})
+
+export default app

package/src/stories/detailView/detailViewForm.stories.svelte

@@ -0,0 +1,79 @@
+<script lang="ts" module>
+  import "../../app.css";
+
+  import DetailViewForm from '$lib/components/detailView/detailViewForm.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Calendar, Edit, Key } from "lucide-svelte";
+
+  const { Story } = defineMeta({
+    title: 'lobb/detailViewForm',
+    component: DetailViewForm,
+    args: {
+      value: {
+        name: "Malik",
+        age: 26,
+        bio: "This is a sample biography",
+        gender: "male",
+        birthDate: "1997-01-01",
+        appointmentTime: "14:30",
+        appointmentDateTime: "2025-10-31T15:00",
+        newsletter: true,
+      },
+      fields: [
+        {
+          key: "name",
+          label: "Name",
+          type: "input",
+          placeholder: "Enter your name",
+          icon: Key,
+          errorMessages: ["Name is required"],
+        },
+        {
+          key: "age",
+          label: "Age",
+          type: "input",
+          inputType: "number",
+          inputStep: 1,
+          icon: Edit,
+        },
+        {
+          key: "bio",
+          label: "Biography",
+          type: "textarea",
+          placeholder: "Tell us about yourself",
+        },
+        {
+          key: "gender",
+          label: "Gender",
+          type: "select",
+          options: ["male", "female", "other"],
+          placeholder: "Select gender",
+        },
+        {
+          key: "birthDate",
+          label: "Birth Date",
+          type: "date",
+          icon: Calendar,
+        },
+        {
+          key: "appointmentTime",
+          label: "Appointment Time",
+          type: "time",
+        },
+        {
+          key: "appointmentDateTime",
+          label: "Appointment Date & Time",
+          type: "datetime",
+        },
+        {
+          key: "newsletter",
+          label: "Subscribe to newsletter",
+          type: "switch",
+        },
+      ]
+    }
+  });
+</script>
+
+<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<Story name="Primary" />

package/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

package/vite-plugins/index.js

@@ -1,11 +1,13 @@
 import { contextualLibAlias } from "./contextual-lib-alias.js";
 import { lobbWorkspaceOptimize } from "./monorepo-workspace.js";
 import { lobbExtensionsPlugin } from "./lobb-extensions.js";
+import { lobbProxyPlugin } from "./lobb-proxy.js";
 
 export function lobbStudioPlugins() {
   return [
     contextualLibAlias(),
     lobbWorkspaceOptimize(),
     lobbExtensionsPlugin(),
+    lobbProxyPlugin(),
   ];
 }

package/vite-plugins/lobb-proxy.js

@@ -0,0 +1,36 @@
+import { createLogger } from "vite";
+
+export function lobbProxyPlugin() {
+  return {
+    name: "lobb-proxy",
+    apply: "serve",
+    config() {
+      const port = parseInt(process.env.LOBB_PORT ?? "3000", 10);
+      const config = {
+        server: {
+          printUrls: false,
+          proxy: {
+            "/api": {
+              target: `http://localhost:${port}`,
+              changeOrigin: true,
+              ws: true,
+            },
+          },
+        },
+      };
+      if (process.env.LOBB_PORT) {
+        // Suppress Vite's startup banner — Lobb prints its own URL instead.
+        // ANSI codes are stripped before matching so color doesn't interfere.
+        const logger = createLogger();
+        const originalInfo = logger.info.bind(logger);
+        logger.info = (msg, options) => {
+          const plain = msg.replace(/\x1b\[[0-9;]*m/g, "");
+          if (plain.includes("ready in") || plain.trim().startsWith("➜")) return;
+          originalInfo(msg, options);
+        };
+        config.customLogger = logger;
+      }
+      return config;
+    },
+  };
+}