@peteai/presentation-editor 0.0.1

package/dist/components/presentation-editor/types.d.ts

@@ -0,0 +1,118 @@
+import { type JSONContent } from '@tiptap/core';
+export type ActiveSidebar = 'images' | 'layers' | null;
+export type Image = {
+    id: string;
+    src: string;
+    width: number;
+    height: number;
+};
+export type Dragged = {
+    id: string;
+    hidden: boolean;
+    sticky: boolean;
+    image: Image;
+    x: number;
+    y: number;
+    offsetX: number;
+    offsetY: number;
+    initialScale: number;
+    scale: number | null;
+};
+export type CursorTooltip = {
+    x: number;
+    y: number;
+    text: string;
+};
+interface BaseLayer {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotate: number | null;
+    opacity: number | null;
+    sortOrder: number;
+}
+export interface HtmlLayer extends BaseLayer {
+    type: 'html';
+    scale: number | null;
+    html: JSONContent;
+}
+export type LayerBorder = {
+    borderStyle: 'solid' | 'dashed' | 'dotted' | null;
+    borderWidth: number | null;
+    borderColor: string | null;
+};
+export interface ImageLayer extends BaseLayer, LayerBorder {
+    type: 'image';
+    scale: number | null;
+    image: Image;
+    offsetX: number | null;
+    offsetY: number | null;
+    cornerRadius: number | null;
+    flipX: boolean;
+    flipY: boolean;
+}
+export type Layer = HtmlLayer | ImageLayer;
+export type Slide = {
+    id: string;
+    backgroundColor: string | null;
+    layers: Layer[];
+    sortOrder: number;
+};
+export type ActiveAction = {
+    type: string;
+    cursor?: string;
+    tooltip?: CursorTooltip | null;
+    clientX: number;
+    clientY: number;
+    layer: Layer;
+};
+export type SlideAddAction = {
+    type: 'slideAdd';
+    slide: Slide;
+};
+export type SlideRemoveAction = {
+    type: 'slideRemove';
+    slide: Slide;
+    newSlide?: Slide;
+};
+export type LayerAddAction = {
+    type: 'layerAdd' | 'layerRemove';
+    layer: Layer;
+};
+export type SlideChangesAction = {
+    type: 'slide';
+    undo: object;
+    redo: object;
+};
+export type LayerChangesAction = {
+    type: 'layer';
+    layer: {
+        id: string;
+        type: string;
+    };
+    undo: object;
+    redo: object;
+};
+export type Action = SlideAddAction | SlideRemoveAction | LayerAddAction | SlideChangesAction | LayerChangesAction;
+export type HistoryAction = Action & {
+    slideId: string;
+};
+interface BaseLayerGuide {
+    id: string;
+    type: string;
+    style: 'solid' | 'dashed' | 'dotted';
+}
+export interface LineLayerGuide extends BaseLayerGuide {
+    type: 'horizontal' | 'vertical';
+    x: number;
+    y: number;
+    length: number;
+}
+export interface BoxLayerGuide extends BaseLayerGuide {
+    type: 'box';
+    inset: number;
+}
+export type ActiveLayerGuide = LineLayerGuide | BoxLayerGuide;
+export {};

package/dist/components/presentation-editor/types.js

@@ -0,0 +1 @@
+import {} from '@tiptap/core';

package/dist/components/presentation-editor/utils.d.ts

@@ -0,0 +1,5 @@
+import type { Slide } from './types.js';
+export declare const arraysEqual: (a: unknown[], b: unknown[]) => boolean;
+export declare const checkImage: (url: string) => Promise<HTMLImageElement>;
+export declare const getSlides: () => Slide[];
+export declare const cognitionSlideToJson: (slide: any) => Slide;

package/dist/components/presentation-editor/utils.js

@@ -0,0 +1,348 @@
+import uniqid from 'uniqid';
+export const arraysEqual = (a, b) => {
+    // Check if the arrays have the same length
+    if (a.length !== b.length) {
+        return false;
+    }
+    // Compare each element of the arrays
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) {
+            return false;
+        }
+    }
+    // If all elements are equal, return true
+    return true;
+};
+export const checkImage = (url) => new Promise((resolve, reject) => {
+    // check that is a valid url
+    // then if valid url
+    const image = new Image();
+    image.crossOrigin = 'anonymous';
+    image.src = url;
+    image.onload = () => resolve(image);
+    image.onerror = reject;
+});
+export const getSlides = () => [
+    {
+        id: uniqid(),
+        backgroundColor: '#5ce1e6',
+        sortOrder: 1,
+        layers: [
+            {
+                id: uniqid(),
+                x: 200,
+                y: 250,
+                width: 1400,
+                height: 200,
+                type: 'html',
+                sortOrder: 1,
+                scale: null,
+                rotate: null,
+                opacity: null,
+                html: {
+                    type: 'doc',
+                    content: [
+                        {
+                            type: 'bulletList',
+                            attrs: {
+                                fontSize: 80,
+                            },
+                            content: [
+                                {
+                                    type: 'listItem',
+                                    content: [
+                                        {
+                                            type: 'paragraph',
+                                            content: [
+                                                {
+                                                    type: 'text',
+                                                    text: 'first',
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: 'listItem',
+                                    content: [
+                                        {
+                                            type: 'paragraph',
+                                            content: [
+                                                {
+                                                    type: 'text',
+                                                    text: 'second',
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: 'listItem',
+                                    content: [
+                                        {
+                                            type: 'paragraph',
+                                            content: [
+                                                {
+                                                    type: 'text',
+                                                    text: 'third',
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                        {
+                            type: 'paragraph',
+                            attrs: {
+                                fontSize: 120,
+                            },
+                            content: [
+                                {
+                                    type: 'text',
+                                    text: 'Second ',
+                                },
+                                {
+                                    type: 'text',
+                                    marks: [
+                                        {
+                                            type: 'textStyle',
+                                            attrs: {
+                                                color: '#b91c1c',
+                                            },
+                                        },
+                                    ],
+                                    text: 'text layer',
+                                },
+                                {
+                                    type: 'text',
+                                    text: ' with some text to check overlapping!',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            },
+            {
+                id: uniqid(),
+                x: 200,
+                y: 300,
+                width: 400,
+                height: 200,
+                type: 'html',
+                sortOrder: 2,
+                scale: 2,
+                rotate: 45,
+                opacity: null,
+                html: {
+                    type: 'doc',
+                    content: [
+                        {
+                            type: 'paragraph',
+                            attrs: {
+                                color: '#ff914d',
+                                lineHeight: 1.2,
+                                fontSize: 112,
+                                textAlign: 'center',
+                                textTransform: 'uppercase',
+                            },
+                            content: [
+                                {
+                                    type: 'text',
+                                    text: 'Some text',
+                                    marks: [{ type: 'bold' }],
+                                },
+                            ],
+                        },
+                    ],
+                },
+            },
+            {
+                id: uniqid(),
+                x: 1100,
+                y: 100,
+                width: 600,
+                height: 200,
+                type: 'html',
+                sortOrder: 3,
+                scale: null,
+                rotate: null,
+                opacity: null,
+                html: {
+                    type: 'doc',
+                    content: [
+                        {
+                            type: 'paragraph',
+                            attrs: {
+                                fontSize: 128,
+                                textTransform: 'uppercase',
+                            },
+                            content: [
+                                {
+                                    type: 'text',
+                                    text: 'Another one',
+                                    marks: [{ type: 'bold' }],
+                                },
+                            ],
+                        },
+                        {
+                            type: 'paragraph',
+                            attrs: {
+                                fontSize: 64,
+                                textAlign: 'right',
+                            },
+                            content: [
+                                {
+                                    type: 'text',
+                                    text: 'Second paragraph',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            },
+        ],
+    },
+];
+const buildParagraphContent = ({ text, fontSize = 40, textAlign, }) => ({
+    type: 'paragraph',
+    attrs: {
+        ...(fontSize && { fontSize }),
+        ...(textAlign && { textAlign }),
+    },
+    content: [{ type: 'text', text }],
+});
+const buildBulletListContent = ({ bullets }) => ({
+    type: 'bulletList',
+    content: bullets.map((bullet) => ({
+        type: 'listItem',
+        attrs: {
+            fontSize: 40,
+        },
+        content: [buildParagraphContent({ text: bullet })],
+    })),
+});
+const buildHeadlineLayer = ({ sortOrder, text, isTitle, withSubheadline, }) => ({
+    id: uniqid(),
+    x: 200,
+    y: isTitle ? (withSubheadline ? 300 : 450) : 50,
+    width: 1520,
+    height: 200,
+    type: 'html',
+    sortOrder,
+    scale: null,
+    rotate: null,
+    opacity: null,
+    html: {
+        type: 'doc',
+        content: [
+            {
+                type: 'paragraph',
+                attrs: {
+                    fontSize: isTitle ? 120 : 74.6666666667,
+                    textAlign: 'center',
+                },
+                content: [{ type: 'text', text, marks: [{ type: 'bold' }] }],
+            },
+        ],
+    },
+});
+const buildSubheadlineLayer = ({ sortOrder, text, }) => ({
+    id: uniqid(),
+    x: 400,
+    y: 500,
+    width: 1120,
+    height: 200,
+    type: 'html',
+    sortOrder,
+    scale: null,
+    rotate: null,
+    opacity: null,
+    html: {
+        type: 'doc',
+        content: [buildParagraphContent({ text, fontSize: 80, textAlign: 'center' })],
+    },
+});
+const buildHtmlLayerParagraphFields = ({ text }) => ({
+    html: {
+        type: 'doc',
+        content: [buildParagraphContent({ text })],
+    },
+});
+const buildHtmlLayerBulletsFields = ({ bullets }) => ({
+    html: {
+        type: 'doc',
+        content: [buildBulletListContent({ bullets })],
+    },
+});
+const buildImageLayerFields = (image) => ({
+    image,
+});
+const buildColumnLayer = ({ sortOrder, slide, isRight, }) => {
+    const type = slide[isRight ? 'right_type' : 'left_type'];
+    return {
+        id: uniqid(),
+        x: isRight ? 1020 : 100,
+        y: 220,
+        width: 800,
+        height: 800,
+        type: type === 'image' ? 'image' : 'html',
+        sortOrder,
+        scale: null,
+        rotate: null,
+        opacity: null,
+        ...(type === 'image'
+            ? buildImageLayerFields(slide[isRight ? 'right_image' : 'left_image'])
+            : type === 'bullets'
+                ? buildHtmlLayerBulletsFields({
+                    bullets: slide[isRight ? 'right_bullets' : 'left_bullets'],
+                })
+                : buildHtmlLayerParagraphFields({ text: slide[isRight ? 'right_text' : 'left_text'] })),
+    };
+};
+let slideSortOrder = 1;
+export const cognitionSlideToJson = (slide) => {
+    let sortOrder = 1;
+    const layers = [];
+    if (slide.type === 'title') {
+        layers.push(buildHeadlineLayer({
+            sortOrder: sortOrder++,
+            text: slide.headline,
+            isTitle: true,
+            withSubheadline: !!slide.subheadline,
+        }));
+        if (slide.subheadline) {
+            layers.push(buildSubheadlineLayer({ sortOrder: sortOrder++, text: slide.subheadline }));
+        }
+    }
+    else if (slide.type === 'columns') {
+        layers.push(buildHeadlineLayer({ sortOrder: sortOrder++, text: slide.headline }));
+        layers.push(buildColumnLayer({ sortOrder: sortOrder++, slide }));
+        layers.push(buildColumnLayer({ sortOrder: sortOrder++, slide, isRight: true }));
+    }
+    else if (slide.type === 'bullets') {
+        layers.push(buildHeadlineLayer({ sortOrder: sortOrder++, text: slide.headline }));
+        layers.push({
+            id: uniqid(),
+            x: 560,
+            y: 220,
+            width: 800,
+            height: 800,
+            type: 'html',
+            sortOrder: sortOrder++,
+            scale: null,
+            rotate: null,
+            opacity: null,
+            html: {
+                type: 'doc',
+                content: [buildBulletListContent({ bullets: slide.bullets })],
+            },
+        });
+    }
+    return {
+        id: uniqid(),
+        sortOrder: slideSortOrder++,
+        backgroundColor: '#5ce1e6',
+        layers,
+    };
+};

package/dist/components/ui/button/button.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const buttonVariants = tv({
+		base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		// ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+				destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+				outline: 'border-input bg-background hover:bg-accent hover:text-accent-foreground border',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-10 px-4 py-2',
+				xs: 'h-8 rounded-md px-2',
+				sm: 'h-9 rounded-md px-3',
+				lg: 'h-11 rounded-md px-8',
+				icon: 'h-10 w-10',
+				'icon-xs': 'h-8 w-8',
+			},
+			active: {
+				true: '',
+			},
+		},
+		compoundVariants: [
+			{
+				active: true,
+				variant: 'outline',
+				class: 'border-2 border-primary',
+			},
+			{
+				active: true,
+				variant: 'ghost',
+				class: 'bg-primary/15 text-accent-foreground hover:bg-primary/15',
+			},
+		],
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+	export type ButtonActive = VariantProps<typeof buttonVariants>['active'];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+			active?: ButtonActive;
+		};
+</script>
+
+<script lang="ts">
+	import { cn } from '../../../utils.js';
+
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		active = false,
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size, active }), className)}
+		{href}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size, active }), className)}
+		{type}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}