@websline/system-components 0.0.1

package/dist/components/molecules/richTextEditor/RichTextEditor.svelte

@@ -0,0 +1,144 @@
+<script>
+	import { onMount, onDestroy } from "svelte";
+	import RichTextEditorToolbar from "./RichTextEditorToolbar.svelte";
+	import { richTextEditorVariants } from "./richTextEditor.variants.js";
+
+	/**
+	 * TODO: Transform into runes. Currently not possible because re-rendering is not executed correctly. Best to check, for example, whether the Bold button is correctly marked when set.
+	 */
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {classes} [classes] CSS class overrides for editor parts
+	 * @property {string} [content=""] The initial content of the editor
+	 * @property {string} [fieldName=""] The name of the field for form submissions
+	 * @property {boolean} [hideToolbar=false] Whether to hide the toolbar
+	 * @property {"small" | "medium" | "large"} [size="medium"] RichTextEditor size
+	 * @property {string} [placeholder=""] Placeholder text for the editor
+	 */
+
+	/** @type {Props} */
+
+	export let classes = {};
+	export let content = "";
+	export let fieldName = "";
+	export let hideToolbar = false;
+	export let placeholder = "Beginne mit dem Schreiben..."; // Placeholder text for the editor
+	export let size = "medium";
+
+	let element;
+	let editor;
+	let htmlInputValue;
+
+	const initEditor = async () => {
+		const { Editor } = await import("@tiptap/core");
+		const StarterKit = (await import("@tiptap/starter-kit")).default;
+		const Link = (await import("@tiptap/extension-link")).default;
+		const TextAlign = (await import("@tiptap/extension-text-align")).default;
+		const Color = (await import("@tiptap/extension-color")).default;
+		const TextStyle = (await import("@tiptap/extension-text-style")).default;
+		const Highlight = (await import("@tiptap/extension-highlight")).default;
+		const Underline = (await import("@tiptap/extension-underline")).default;
+		const Placeholder = (await import("@tiptap/extension-placeholder")).default;
+		const DOMPurify = (await import("dompurify")).default;
+
+		editor = new Editor({
+			element: element,
+			extensions: [
+				StarterKit,
+				TextStyle,
+				Color,
+				Highlight.configure({
+					multicolor: true,
+				}),
+				Link.configure({
+					openOnClick: false,
+				}),
+				TextAlign.configure({
+					types: ["paragraph", "heading"],
+				}),
+				Underline,
+				Placeholder.configure({
+					placeholder,
+					showOnlyWhenEditable: true,
+					showOnlyCurrent: true,
+				}),
+			],
+			editorProps: {
+				handlePaste(view, event) {
+					const html = event.clipboardData.getData("text/html");
+
+					if (html) {
+						const cleaned = DOMPurify.sanitize(html, {
+							ALLOWED_TAGS: ["b", "strong", "i", "em", "u", "s", "strike", "p", "br"],
+							ALLOWED_ATTR: [],
+						});
+
+						const normalized = cleanHTMLWhitespace(cleaned);
+
+						editor.commands.insertContent(normalized);
+
+						return true;
+					}
+
+					return false;
+				},
+			},
+			content,
+			onTransaction: () => {
+				editor = editor;
+				htmlInputValue = editor.getHTML();
+			},
+		});
+
+		editor.commands.focus("end");
+	};
+
+	onMount(() => {
+		initEditor();
+	});
+
+	onDestroy(() => {
+		if (editor) {
+			editor.destroy();
+		}
+	});
+
+	const cleanHTMLWhitespace = (html) => {
+		const dom = document.createElement("div");
+		dom.innerHTML = html;
+
+		// remove empty paragraphs
+		dom.querySelectorAll("p").forEach((p) => {
+			if (!p.textContent.trim() || p.innerHTML.trim() === "&nbsp;") {
+				p.remove();
+			}
+		});
+
+		// reduce multiple spaces to a single space
+		const walker = document.createTreeWalker(dom, NodeFilter.SHOW_TEXT, null, false);
+		while (walker.nextNode()) {
+			const node = walker.currentNode;
+			node.nodeValue = node.nodeValue
+				.replace(/\s*\n\s*/g, " ")
+				.replace(/\s{2,}/g, " ");
+		}
+
+		return dom.innerHTML.trim();
+	};
+
+	let { base, field, toolbar } = richTextEditorVariants();
+</script>
+
+<div class={base({ class: classes.base })}>
+	{#if !hideToolbar}
+		<div class={toolbar({ class: classes.toolbar })}>
+			<RichTextEditorToolbar {editor} />
+		</div>
+	{/if}
+	{#if fieldName}
+		<input type="hidden" name={fieldName} bind:value={htmlInputValue} />
+	{/if}
+	<div class={field({ class: classes.field, hideToolbar, size })} bind:this={element}>
+	</div>
+</div>

package/dist/components/molecules/richTextEditor/RichTextEditor.svelte.d.ts

@@ -0,0 +1,87 @@
+export default RichTextEditor;
+type RichTextEditor = SvelteComponent<{
+    size?: string;
+    placeholder?: string;
+    content?: string;
+    hideToolbar?: boolean;
+    classes?: Props;
+    fieldName?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const RichTextEditor: $$__sveltets_2_IsomorphicComponent<{
+    size?: string;
+    placeholder?: string;
+    content?: string;
+    hideToolbar?: boolean;
+    classes?: {
+        /**
+         * CSS class overrides for editor parts
+         */
+        classes?: any;
+        /**
+         * The initial content of the editor
+         */
+        content?: string;
+        /**
+         * The name of the field for form submissions
+         */
+        fieldName?: string;
+        /**
+         * Whether to hide the toolbar
+         */
+        hideToolbar?: boolean;
+        /**
+         * RichTextEditor size
+         */
+        size?: "small" | "medium" | "large";
+        /**
+         * Placeholder text for the editor
+         */
+        placeholder?: string;
+    };
+    fieldName?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Props = {
+    /**
+     * CSS class overrides for editor parts
+     */
+    classes?: any;
+    /**
+     * The initial content of the editor
+     */
+    content?: string;
+    /**
+     * The name of the field for form submissions
+     */
+    fieldName?: string;
+    /**
+     * Whether to hide the toolbar
+     */
+    hideToolbar?: boolean;
+    /**
+     * RichTextEditor size
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Placeholder text for the editor
+     */
+    placeholder?: string;
+};
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/molecules/richTextEditor/RichTextEditorToolbar.svelte

@@ -0,0 +1,5 @@
+<script>
+	let { editor } = $props();
+</script>
+
+Toolbar in progress...

package/dist/components/molecules/richTextEditor/RichTextEditorToolbar.svelte.d.ts

@@ -0,0 +1,11 @@
+export default RichTextEditorToolbar;
+type RichTextEditorToolbar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const RichTextEditorToolbar: import("svelte").Component<{
+    editor: any;
+}, {}, "">;
+type $$ComponentProps = {
+    editor: any;
+};

package/dist/components/molecules/richTextEditor/richTextEditor.variants.d.ts

@@ -0,0 +1,64 @@
+export const richTextEditorVariants: import("tailwind-variants").TVReturnType<{
+    hideToolbar: {
+        true: {
+            field: string;
+        };
+    };
+    size: {
+        small: {
+            field: string;
+        };
+        medium: {
+            field: string;
+        };
+        large: {
+            field: string;
+        };
+    };
+}, {
+    base: string;
+    toolbar: string;
+    field: string;
+}, undefined, {
+    hideToolbar: {
+        true: {
+            field: string;
+        };
+    };
+    size: {
+        small: {
+            field: string;
+        };
+        medium: {
+            field: string;
+        };
+        large: {
+            field: string;
+        };
+    };
+}, {
+    base: string;
+    toolbar: string;
+    field: string;
+}, import("tailwind-variants").TVReturnType<{
+    hideToolbar: {
+        true: {
+            field: string;
+        };
+    };
+    size: {
+        small: {
+            field: string;
+        };
+        medium: {
+            field: string;
+        };
+        large: {
+            field: string;
+        };
+    };
+}, {
+    base: string;
+    toolbar: string;
+    field: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/molecules/richTextEditor/richTextEditor.variants.js

@@ -0,0 +1,30 @@
+import { tv } from "tailwind-variants";
+
+const richTextEditorVariants = tv({
+	slots: {
+		base: "body-default text-neutral-800 dark:text-white",
+		toolbar: "px-5 py-4 border-neutral-500 border border-b-0 rounded-t-sm",
+		field:
+			"[&>div]:transition-[border] [&>div]:duration-300 [&>div]:border [&>div]:border-neutral-500 [&>div]:rounded-b-sm [&>div]:hover:border-neutral-800 [&>div]:outline-none [&>div]:p-5 [&>div]:h-full [&>.ProseMirror-focused]:!border-blue-500 [&>div]:dark:hover:border-neutral-200 [&>.ProseMirror-focused]:dark:!border-blue-400 [&>div>p.is-empty]:before:content-[attr(data-placeholder)] [&>div>p.is-empty]:before:float-left [&>div>p.is-empty]:before:h-0 [&>div>p.is-empty]:before:text-neutral-500",
+	},
+	variants: {
+		hideToolbar: {
+			true: {
+				field: "[&>div]:rounded-t-sm",
+			},
+		},
+		size: {
+			small: {
+				field: "h-auto",
+			},
+			medium: {
+				field: "h-40",
+			},
+			large: {
+				field: "h-64",
+			},
+		},
+	},
+});
+
+export { richTextEditorVariants };

package/dist/components/molecules/toggleGroup/ToggleGroup.svelte

@@ -0,0 +1,61 @@
+<script>
+	import { setContext } from "svelte";
+	import { crossfade } from "svelte/transition";
+	import { cubicInOut } from "svelte/easing";
+	import {
+		toggleGroupVariants,
+		toggleGroupTabVariants,
+	} from "./toggleGroup.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {"default" | "raised"} [appearance="default"] The appearance variant of the component
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {"small" | "medium"} [size="medium"] The size variant of the component
+	 * @property {string} [value=""] The value of the toggle group
+	 * @property {"default" | "tabs"} [variant="default"] The variant of the toggle group
+	 */
+
+	const [send, receive] = crossfade({
+		duration: 250,
+		easing: cubicInOut,
+	});
+
+	/** @type {Props} */
+	let {
+		appearance = "default",
+		children,
+		class: className = "",
+		size = "medium",
+		value,
+		variant = "default",
+	} = $props();
+
+	let toggleGroupEl;
+
+	setContext("toggle-group-store", () => {
+		return {
+			appearance,
+			send,
+			receive,
+			size,
+			update: (newValue) => {
+				value = newValue;
+			},
+			value,
+			variant,
+		};
+	});
+
+	let stylesByVariant = $derived.by(() => {
+		if (variant === "tabs") {
+			return toggleGroupTabVariants({ appearance, class: className, size, variant });
+		}
+
+		return toggleGroupVariants({ appearance, class: className, size, variant });
+	});
+</script>
+
+<div bind:this={toggleGroupEl} class={stylesByVariant} role="tablist">
+	{@render children?.()}
+</div>

package/dist/components/molecules/toggleGroup/ToggleGroup.svelte.d.ts

@@ -0,0 +1,49 @@
+export default ToggleGroup;
+type ToggleGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ToggleGroup: import("svelte").Component<{
+    /**
+     * The appearance variant of the component
+     */
+    appearance?: "default" | "raised";
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * The size variant of the component
+     */
+    size?: "small" | "medium";
+    /**
+     * The value of the toggle group
+     */
+    value?: string;
+    /**
+     * The variant of the toggle group
+     */
+    variant?: "default" | "tabs";
+}, {}, "">;
+type Props = {
+    /**
+     * The appearance variant of the component
+     */
+    appearance?: "default" | "raised";
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * The size variant of the component
+     */
+    size?: "small" | "medium";
+    /**
+     * The value of the toggle group
+     */
+    value?: string;
+    /**
+     * The variant of the toggle group
+     */
+    variant?: "default" | "tabs";
+};

package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte

@@ -0,0 +1,47 @@
+<script>
+	import { getContext } from "svelte";
+	import {
+		toggleGroupItemVariants,
+		toggleGroupItemTabVariants,
+	} from "./toggleGroupItem.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {string} [value=""] The value of the toggle group item
+	 */
+
+	/** @type {Props} */
+	let { children, class: className = "", value: localeValue } = $props();
+
+	let store = getContext("toggle-group-store");
+	let { appearance, send, receive, size, variant } = $derived(store());
+	let isActive = $derived(store().value === localeValue);
+
+	let stylesByVariant = $derived.by(() => {
+		if (variant === "tabs") {
+			return toggleGroupItemTabVariants();
+		}
+
+		return toggleGroupItemVariants();
+	});
+</script>
+
+<div class={stylesByVariant.base()}>
+	<button
+		class={stylesByVariant.button({ appearance, class: className, isActive, size })}
+		role="tab"
+		onclick={() => {
+			store().update(localeValue);
+		}}
+		type="button">
+		<span class={stylesByVariant.span()}>{@render children?.()}</span>
+		{#if isActive}
+			<div
+				class={stylesByVariant.trigger({ appearance })}
+				in:send={{ key: "active-tab" }}
+				out:receive={{ key: "active-tab" }}>
+			</div>
+		{/if}
+	</button>
+</div>

package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte.d.ts

@@ -0,0 +1,25 @@
+export default ToggleGroupItem;
+type ToggleGroupItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ToggleGroupItem: import("svelte").Component<{
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * The value of the toggle group item
+     */
+    value?: string;
+}, {}, "">;
+type Props = {
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * The value of the toggle group item
+     */
+    value?: string;
+};

package/dist/components/molecules/toggleGroup/toggleGroup.variants.d.ts

@@ -0,0 +1,35 @@
+export const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
+    appearance: {
+        default: string;
+        raised: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+    };
+}, undefined, "flex rounded-sm gap-1", {
+    appearance: {
+        default: string;
+        raised: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    appearance: {
+        default: string;
+        raised: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+    };
+}, undefined, "flex rounded-sm gap-1", unknown, unknown, undefined>>;
+export const toggleGroupTabVariants: import("tailwind-variants").TVReturnType<{} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+        };
+    };
+}, undefined, "flex gap-5 h-10 border-b border-b-neutral-500", any, undefined, import("tailwind-variants").TVReturnType<any, undefined, "flex gap-5 h-10 border-b border-b-neutral-500", unknown, unknown, undefined>>;

package/dist/components/molecules/toggleGroup/toggleGroup.variants.js

@@ -0,0 +1,21 @@
+import { tv } from "tailwind-variants";
+
+const toggleGroupVariants = tv({
+	base: "flex rounded-sm gap-1",
+	variants: {
+		appearance: {
+			default: "bg-neutral-100 dark:bg-neutral-900",
+			raised: "bg-neutral-300 dark:bg-neutral-700",
+		},
+		size: {
+			small: "h-6 p-0.5",
+			medium: "h-10 p-1",
+		},
+	},
+});
+
+const toggleGroupTabVariants = tv({
+	base: "flex gap-5 h-10 border-b border-b-neutral-500",
+});
+
+export { toggleGroupVariants, toggleGroupTabVariants };

package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.d.ts

@@ -0,0 +1,110 @@
+export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
+    isActive: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    size: {
+        small: {
+            button: string;
+        };
+        medium: {
+            button: string;
+        };
+    };
+}, {
+    base: string;
+    button: string;
+    span: string;
+    trigger: string;
+}, undefined, {
+    isActive: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    size: {
+        small: {
+            button: string;
+        };
+        medium: {
+            button: string;
+        };
+    };
+}, {
+    base: string;
+    button: string;
+    span: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<{
+    isActive: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    size: {
+        small: {
+            button: string;
+        };
+        medium: {
+            button: string;
+        };
+    };
+}, {
+    base: string;
+    button: string;
+    span: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnType<{
+    isActive: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    base: string;
+    button: string;
+    span: string;
+    trigger: string;
+}, undefined, {
+    isActive: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    base: string;
+    button: string;
+    span: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<{
+    isActive: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    base: string;
+    button: string;
+    span: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;