@lobb-js/studio 0.1.31

package/src/lib/components/sidebar/sidebarElements.svelte

@@ -0,0 +1,144 @@
+<script lang="ts" module>
+    export interface SideBarElement {
+        name: string;
+        onclick?: () => Promise<void> | void;
+        href?: string;
+        icon?: any;
+        path?: string;
+        meta?: Record<string, any>;
+    }
+
+    export type SideBarData = Array<SideBarElement>;
+
+    export interface SidebarElementsProps {
+        data: SideBarData;
+        path?: string[];
+        elementRightSide?: Snippet<[SideBarElement]>;
+    }
+</script>
+
+<script lang="ts">
+    import { Ban } from "lucide-svelte";
+    import type { Snippet } from "svelte";
+    import SidebarElements from "./sidebarElements.svelte";
+    import Button from "../ui/button/button.svelte";
+    import { location } from "@wjfe/n-savant";
+
+    let {
+        data = $bindable(),
+        path = [],
+        elementRightSide,
+    }: SidebarElementsProps = $props();
+
+    const elementsToShow = data.reduce<Array<string | SideBarElement>>(
+        (acc, item, index) => {
+            const firstPath = item.path?.split("/")[0];
+            if (firstPath && item.path && !acc.includes(firstPath)) {
+                acc.push(firstPath);
+            } else if (!item.path) {
+                acc.push(item);
+            }
+            return acc;
+        },
+        [],
+    );
+
+    let expandedHeights: number[] = $state(Array(data?.length).fill(0));
+
+    async function handleElementClick(element: SideBarElement) {
+        if (element.onclick) {
+            await element.onclick();
+        }
+    }
+
+    function getDirElements(dirName: string) {
+        let elements = data.filter((item) => item.path?.startsWith(dirName));
+        elements = elements.map((item) => {
+            return {
+                ...item,
+                path: item.path?.split("/").slice(1).join("/"),
+            };
+        });
+        return elements;
+    }
+</script>
+
+<div class="flex flex-col">
+    {#if elementsToShow.length}
+        {#each elementsToShow as element, index}
+            {#if typeof element === "string"}
+                {@const directoryName = element.split("/")[0]}
+                <button
+                    class="
+						flex items-center justify-between p-2 gap-2 text-muted-foreground
+						rounded-md cursor-default
+					"
+                >
+                    <div class="flex items-center gap-2">
+                        <div class="text-xs">
+                            {directoryName}
+                        </div>
+                    </div>
+                </button>
+                {#if getDirElements(directoryName)}
+                    <div
+                        class="overflow-hidden"
+                        style="
+						height: {true ? expandedHeights[index] : 0}px;
+					"
+                    >
+                        <div
+                            bind:clientHeight={expandedHeights[index]}
+                            class="border-l ml-4 pl-2"
+                        >
+                            <SidebarElements
+                                data={getDirElements(element)}
+                                path={[...path, element]}
+                                {elementRightSide}
+                            />
+                        </div>
+                    </div>
+                {/if}
+            {:else}
+                {@const elementPath = [...path, element]}
+                {@const isselected = location.url.pathname === element.href}
+                <Button
+                    onclick={() => handleElementClick(element)}
+                    href={element.href}
+                    variant="ghost"
+                    class="
+						flex items-center justify-between p-2 gap-2 hover:bg-soft text-muted-foreground
+						rounded-md {isselected ? 'bg-muted' : ''}
+					"
+                    title={element.name}
+                >
+                    <div class="flex items-center gap-2 truncate">
+                        {#if element.icon}
+                            <element.icon size="17.5" />
+                        {/if}
+                        <div
+                            class="
+								text-xs
+								{isselected ? 'text-primary font-medium' : ''}
+							"
+                        >
+                            {element.name}
+                        </div>
+                    </div>
+                    <div class="flex gap-2 items-center">
+                        {#if elementRightSide}
+                            {@render elementRightSide(element)}
+                        {/if}
+                    </div>
+                </Button>
+            {/if}
+        {/each}
+    {:else}
+        <div
+            class="flex justify-center items-center gap-2 text-muted-foreground"
+        >
+            <Ban size="17.5" />
+            <div class="text-xs text-center">No result</div>
+        </div>
+    {/if}
+</div>

package/src/lib/components/sidebar/sidebarTrigger.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import type { SidebarProperties } from "./sidebar.svelte";
+    import { PanelLeftClose, PanelLeftOpen } from "lucide-svelte";
+    import { getContext } from "svelte";
+    import type { HTMLButtonAttributes } from "svelte/elements";
+
+    interface Props {
+        class?: HTMLButtonAttributes["class"];
+    }
+
+    let { class: className }: Props = $props();
+
+    const sidebarProperties: SidebarProperties =
+        getContext("sidebarProperties");
+</script>
+
+{#if sidebarProperties.collapsed}
+    <PanelLeftOpen
+        class="text-muted-foreground hover:bg-transparent cursor-pointer hover:text-foreground {className}"
+        size="18"
+        onclick={() => {
+            sidebarProperties.collapsed = !sidebarProperties.collapsed;
+        }}
+    />
+{:else}
+    <PanelLeftClose
+        class="text-muted-foreground hover:bg-transparent cursor-pointer hover:text-foreground {className}"
+        size="18"
+        onclick={() => {
+            sidebarProperties.collapsed = !sidebarProperties.collapsed;
+        }}
+    />
+{/if}

package/src/lib/components/singletone.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { Save } from "lucide-svelte";
+    import DetailViewForm from "./detailView/detailViewForm.svelte";
+    import { getCollectionFields } from "./detailView/utils";
+    import SidebarTrigger from "./sidebar/sidebarTrigger.svelte";
+    import Button from "./ui/button/button.svelte";
+    import { onMount } from "svelte";
+    import { lobb } from "$lib";
+  import { toast } from "svelte-sonner";
+  import Skeleton from "./ui/skeleton/skeleton.svelte";
+
+    interface Props {
+        collectionName: string;
+    }
+
+    let {
+        collectionName,
+    }: Props = $props();
+
+    let entry = $state({});
+    let loading = $state(true);
+    let singletonExists = $state(true);
+    const formFields = getCollectionFields(collectionName);
+
+    onMount(async () => {
+        const result = await lobb.readSingleton(collectionName);
+        const json = await result.json();
+        if (result.status === 404) {
+            singletonExists = false;
+        } else {
+            entry = json.data;
+        }
+        loading = false;
+    });
+
+    async function handleSave() {
+        const response = await lobb.updateSingleton(collectionName, entry);
+        if (response.status < 400) {
+            toast.success("The Singleton was updated successfully");
+        }
+    }
+</script>
+
+<div>
+    <div class="flex justify-between items-center gap-2 p-2 border-b bg-background h-10">
+        <div class="flex items-center gap-1">
+            <SidebarTrigger />
+        </div>
+        <div>
+            <Button
+                class="h-7 px-2 font-normal text-xs"
+                Icon={Save}
+                onclick={handleSave}
+            >
+                Save
+            </Button>
+        </div>
+    </div>
+
+    {#if loading}
+        <div class="flex flex-col gap-2 p-2 w-full">
+            <Skeleton class="h-8 w-full" />
+            <Skeleton class="h-8 w-[80%]" />
+            <Skeleton class="h-8 w-[60%]" />
+        </div>
+    {:else}
+        <DetailViewForm bind:value={entry} fields={formFields} />
+    {/if}
+</div>

package/src/lib/components/ui/accordion/accordion-content.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	class={cn(
+		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</AccordionPrimitive.Content>

package/src/lib/components/ui/accordion/accordion-item.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />

package/src/lib/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
+	import ChevronDown from "@lucide/svelte/icons/chevron-down";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps["level"];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		bind:ref
+		class={cn(
+			"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDown
+			class="text-muted-foreground size-4 shrink-0 transition-transform duration-200"
+		/>
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

package/src/lib/components/ui/accordion/index.ts

@@ -0,0 +1,17 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+
+const Root = AccordionPrimitive.Root;
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};

package/src/lib/components/ui/alert/alert-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("text-sm [&_p]:leading-relaxed", className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/ui/alert/alert-title.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 5,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	aria-level={level}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/ui/alert/alert.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "[&>svg]:text-foreground relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive:
+					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div bind:this={ref} class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
+	{@render children?.()}
+</div>

package/src/lib/components/ui/alert/index.ts

@@ -0,0 +1,14 @@
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+};

package/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogPrimitive.ActionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />

package/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogPrimitive.CancelProps = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	{...restProps}
+/>

package/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		portalProps?: AlertDialogPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPrimitive.Portal>

package/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

package/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+		className
+	)}
+	{...restProps}
+/>

package/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		class: className,
+		level = 3,
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	class={cn("text-lg font-semibold", className)}
+	{level}
+	{...restProps}
+/>

package/src/lib/components/ui/alert-dialog/index.ts

@@ -0,0 +1,40 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+import Title from "./alert-dialog-title.svelte";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+
+const Root = AlertDialogPrimitive.Root;
+const Trigger = AlertDialogPrimitive.Trigger;
+const Portal = AlertDialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription,
+};

package/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Ellipsis from "@lucide/svelte/icons/ellipsis";
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	role="presentation"
+	aria-hidden="true"
+	class={cn("flex size-9 items-center justify-center", className)}
+	{...restProps}
+>
+	<Ellipsis class="size-4" />
+	<span class="sr-only">More</span>
+</span>

package/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li bind:this={ref} class={cn("inline-flex items-center gap-1.5", className)} {...restProps}>
+	{@render children?.()}
+</li>