includio-cms 0.0.2

package/README.md

@@ -0,0 +1,58 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/admin/api/upload.d.ts

@@ -0,0 +1,2 @@
+import { type RequestHandler } from '@sveltejs/kit';
+export declare const POST: RequestHandler;

package/dist/admin/api/upload.js

@@ -0,0 +1,12 @@
+import { uploadFile } from '../../core/server/media/operations/uploadFile.js';
+import { json } from '@sveltejs/kit';
+export const POST = async ({ request }) => {
+    const form = await request.formData();
+    const file = form.get('file');
+    const folderId = form.get('folderId');
+    if (!file || file.size === 0) {
+        return new Response('No file', { status: 400 });
+    }
+    const dbFile = await uploadFile(file, folderId);
+    return json(dbFile);
+};

package/dist/admin/client/admin/admin-after-login-layout.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import * as Sidebar from '../../../components/ui/sidebar/index.js';
+	import AppSidebar from '../../components/layout/app-sidebar.svelte';
+	import type { Snippet } from 'svelte';
+	import SiteHeader from '../../components/layout/site-header.svelte';
+	import { getRemotes } from '../../context/remotes.js';
+	import { setContentLanguage } from '../../state/content-language.svelte.js';
+
+	let { children }: { children: Snippet } = $props();
+
+	const remotes = getRemotes();
+
+	const languages = await remotes.getLanguages();
+	setContentLanguage(languages[0]);
+</script>
+
+<Sidebar.Provider
+	style="--sidebar-width: calc(var(--spacing) * 72); --header-height: calc(var(--spacing) * 12);"
+>
+	<AppSidebar variant="inset" />
+	<Sidebar.Inset>
+		<SiteHeader />
+		<div class="flex flex-1 flex-col">
+			<div class="@container/main flex flex-1 flex-col gap-2">
+				<div class="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+					<div class="px-4 lg:px-6">
+						{@render children()}
+					</div>
+				</div>
+			</div>
+		</div>
+	</Sidebar.Inset>
+</Sidebar.Provider>

package/dist/admin/client/admin/admin-after-login-layout.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const AdminAfterLoginLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+type AdminAfterLoginLayout = ReturnType<typeof AdminAfterLoginLayout>;
+export default AdminAfterLoginLayout;

package/dist/admin/client/admin/admin-layout.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import '../../styles/admin.css';
+	import { ModeWatcher } from 'mode-watcher';
+	import { Toaster } from '../../../components/ui/sonner/index.js';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<ModeWatcher />
+<Toaster />
+
+{@render children()}

package/dist/admin/client/admin/admin-layout.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import '../../styles/admin.css';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const AdminLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+type AdminLayout = ReturnType<typeof AdminLayout>;
+export default AdminLayout;

package/dist/admin/client/admin/dashboard-page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { breadcrumbs } from '../../state/breadcrumbs.svelte';
+
+	breadcrumbs.state = [{ label: 'Dashboard', href: '/admin/dashboard' }];
+</script>
+
+<h1>Admin Panel</h1>

package/dist/admin/client/admin/dashboard-page.svelte.d.ts

@@ -0,0 +1,18 @@
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DashboardPage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DashboardPage = InstanceType<typeof DashboardPage>;
+export default DashboardPage;

package/dist/admin/client/collection/collection-page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import Plus from '@tabler/icons-svelte/icons/plus';
+	import Button from '../../../components/ui/button/button.svelte';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import DataTable from './data-table.svelte';
+	import { columns } from './columns.js';
+
+	import { breadcrumbs } from '../../state/breadcrumbs.svelte';
+	import { getRemotes } from '../../context/remotes.js';
+	import { getContentLanguage } from '../../state/content-language.svelte.js';
+
+	const remotes = getRemotes();
+
+	const collection = $derived(await remotes.getCollection(page.params.collection || ''));
+
+	const collectionEntriesQuery = $derived(remotes.getEntries(collection.slug));
+
+	async function onCreateEntry() {
+		const newEntry = await remotes.createNewEntry({ type: 'collection', slug: collection.slug });
+		goto(`/admin/entries/${newEntry.id}`);
+	}
+
+	$effect(() => {
+		breadcrumbs.state = [
+			{
+				label: collection.labels?.plural || collection.slug
+			}
+		];
+	});
+</script>
+
+{#if collection}
+	<Button onclick={onCreateEntry} size="lg"><Plus /> Create new</Button>
+
+	{#await collectionEntriesQuery then entries}
+		{@const items = entries.map((entry) => ({
+			id: entry.id,
+			collection: entry.slug,
+			name:
+				collection.entryAdminTitle && entry.data[collection.entryAdminTitle]
+					? (entry.data[collection.entryAdminTitle] as Record<string, string>)[
+							getContentLanguage()
+						] || entry.id
+					: entry.id,
+			url: `/admin/entries/${entry.id}`,
+			status: entry.status,
+			createdAt: entry.createdAt,
+			updatedAt: entry.updatedAt
+		}))}
+		<DataTable data={items} {columns} />
+	{/await}
+{/if}

package/dist/admin/client/collection/collection-page.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CollectionPage: import("svelte").Component<Record<string, never>, {}, "">;
+type CollectionPage = ReturnType<typeof CollectionPage>;
+export default CollectionPage;

package/dist/admin/client/collection/columns.d.ts

@@ -0,0 +1,10 @@
+import type { ColumnDef } from '@tanstack/table-core';
+export interface CollectionDataTableRow {
+    id: string;
+    name: string;
+    status: string;
+    createdAt: Date;
+    updatedAt: Date;
+    url: string;
+}
+export declare const columns: ColumnDef<CollectionDataTableRow>[];

package/dist/admin/client/collection/columns.js

@@ -0,0 +1,32 @@
+import { renderComponent } from '../../../components/ui/data-table/render-helpers.js';
+import EntryLink from './entry-link.svelte';
+export const columns = [
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        cell: (info) => {
+            return renderComponent(EntryLink, {
+                name: info.row.original.name,
+                url: info.row.original.url
+            });
+        }
+    },
+    {
+        accessorKey: 'status',
+        header: 'Status'
+    },
+    {
+        accessorKey: 'createdAt',
+        header: 'Created At',
+        cell: (info) => {
+            return new Date(info.row.original.createdAt).toLocaleString('pl');
+        }
+    },
+    {
+        accessorKey: 'updatedAt',
+        header: 'Updated At',
+        cell: (info) => {
+            return new Date(info.row.original.updatedAt).toLocaleString('pl');
+        }
+    }
+];

package/dist/admin/client/collection/data-table.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" generics="TData, TValue">
+	import { type ColumnDef, getCoreRowModel } from '@tanstack/table-core';
+	import { createSvelteTable, FlexRender } from '../../../components/ui/data-table/index.js';
+	import * as Table from '../../../components/ui/table/index.js';
+
+	type DataTableProps<TData, TValue> = {
+		columns: ColumnDef<TData, TValue>[];
+		data: TData[];
+	};
+
+	let { data, columns }: DataTableProps<TData, TValue> = $props();
+
+	const table = createSvelteTable({
+		get data() {
+			return data;
+		},
+		columns,
+		getCoreRowModel: getCoreRowModel()
+	});
+</script>
+
+<div class="rounded-md border">
+	<Table.Root>
+		<Table.Header>
+			{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+				<Table.Row>
+					{#each headerGroup.headers as header (header.id)}
+						<Table.Head>
+							{#if !header.isPlaceholder}
+								<FlexRender
+									content={header.column.columnDef.header}
+									context={header.getContext()}
+								/>
+							{/if}
+						</Table.Head>
+					{/each}
+				</Table.Row>
+			{/each}
+		</Table.Header>
+		<Table.Body>
+			{#each table.getRowModel().rows as row (row.id)}
+				<Table.Row data-state={row.getIsSelected() && 'selected'}>
+					{#each row.getVisibleCells() as cell (cell.id)}
+						<Table.Cell>
+							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+						</Table.Cell>
+					{/each}
+				</Table.Row>
+			{:else}
+				<Table.Row>
+					<Table.Cell colspan={columns.length} class="h-24 text-center">No results.</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>

package/dist/admin/client/collection/data-table.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type ColumnDef } from '@tanstack/table-core';
+type DataTableProps<TData, TValue> = {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+};
+declare function $$render<TData, TValue>(): {
+    props: DataTableProps<TData, TValue>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData, TValue> {
+    props(): ReturnType<typeof $$render<TData, TValue>>['props'];
+    events(): ReturnType<typeof $$render<TData, TValue>>['events'];
+    slots(): ReturnType<typeof $$render<TData, TValue>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData, TValue>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TValue>['props']>, ReturnType<__sveltets_Render<TData, TValue>['events']>, ReturnType<__sveltets_Render<TData, TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TValue>['exports']>;
+    <TData, TValue>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TValue>['props']> & {}): ReturnType<__sveltets_Render<TData, TValue>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<TData, TValue> = InstanceType<typeof DataTable<TData, TValue>>;
+export default DataTable;

package/dist/admin/client/collection/entry-link.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	type Props = {
+		name: string;
+		url: string;
+	};
+
+	let { name, url }: Props = $props();
+</script>
+
+<a href={url} class="hover:underline">
+	{name}
+</a>

package/dist/admin/client/collection/entry-link.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    name: string;
+    url: string;
+};
+declare const EntryLink: import("svelte").Component<Props, {}, "">;
+type EntryLink = ReturnType<typeof EntryLink>;
+export default EntryLink;

package/dist/admin/client/entry/entry-page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import Entry from './entry.svelte';
+
+	import { getRemotes } from '../../context/remotes.js';
+
+	const remotes = getRemotes();
+
+	let entry = $derived(await remotes.getEntryById(page.params.entryId || ''));
+</script>
+
+{#key entry}
+	<Entry {entry} />
+{/key}

package/dist/admin/client/entry/entry-page.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const EntryPage: import("svelte").Component<Record<string, never>, {}, "">;
+type EntryPage = ReturnType<typeof EntryPage>;
+export default EntryPage;

package/dist/admin/client/entry/entry.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { PUBLIC_URL } from '$env/static/public';
+	import FieldsForm from '../../components/fields/fields-form.svelte';
+	import slugify from '../../imports/slugify.js';
+	import { breadcrumbs } from '../../state/breadcrumbs.svelte';
+	import { isCollection } from '../../utils/is-collection.js';
+	import Button from '../../../components/ui/button/button.svelte';
+	import { generateZodSchemaFromFields } from '../../../core/fields/fieldSchemaToTs.js';
+	import type { RawEntry } from '../../../types/entries.js';
+
+	import { toast } from 'svelte-sonner';
+	import { defaults, superForm } from 'sveltekit-superforms';
+	import { zod, zodClient } from 'sveltekit-superforms/adapters';
+
+	import { getRemotes } from '../../context/remotes.js';
+	import { getContentLanguage } from '../../state/content-language.svelte.js';
+
+	const remotes = getRemotes();
+
+	type Props = {
+		entry: RawEntry;
+	};
+
+	let { entry }: Props = $props();
+
+	let collection = await remotes.getRecordBySlug(entry.slug);
+	const languages = await remotes.getLanguages();
+
+	let collectionSchema = generateZodSchemaFromFields(collection.fields, languages);
+
+	let isPreview = $state(false);
+
+	let previewUrl = $derived(
+		collection.previewUrl
+			? `${PUBLIC_URL}/${generateSlug(collection.previewUrl)}?preview=true`
+			: undefined
+	);
+
+	function generateSlug(pattern: string) {
+		const replacedPattern = pattern.replace(/{([^}]+)}/g, (_, key) => {
+			const keyValue = entry.data[key as keyof typeof entry.data];
+			if (keyValue === undefined) {
+				console.error(`Key not found in form data: ${key}`);
+			}
+
+			return slugify(String(keyValue), {
+				lower: true,
+				strict: true,
+				trim: true
+			});
+		});
+
+		return replacedPattern;
+	}
+
+	async function onDelete() {
+		await remotes.deleteEntryCommand(entry.id);
+		toast.success('Entry deleted');
+		goto(`/admin/collections/${collection.slug}`);
+	}
+
+	const form = superForm(defaults(entry.data, zod(collectionSchema)), {
+		validators: zodClient(collectionSchema),
+		SPA: true,
+		dataType: 'json',
+		resetForm: false,
+		onUpdate: async ({ form }) => {
+			if (form.valid) {
+				await remotes.updateEntryCommand({
+					id: entry.id,
+					data: {
+						data: form.data
+					}
+				});
+				toast.success('Entry saved!');
+			}
+		}
+	});
+
+	$effect(() => {
+		breadcrumbs.state = isCollection(collection)
+			? [
+					{
+						label: collection.labels?.plural || collection.slug,
+						href: `/admin/collections/${collection.slug}`
+					},
+					{
+						label:
+							(
+								entry.data[collection.entryAdminTitle || ''] as Record<string, string> | undefined
+							)?.[getContentLanguage()] || entry.id
+					}
+				]
+			: [
+					{
+						label: collection.label || collection.slug
+					}
+				];
+	});
+</script>
+
+<div class="flex items-stretch">
+	<FieldsForm {form} fields={collection.fields} class="grow">
+		{#snippet children()}
+			<Button type="button" variant="destructive" class="mt-2 w-full" onclick={onDelete}
+				>Delete</Button
+			>
+
+			<p>Status: {entry.status}</p>
+			<p>Created: {entry.createdAt.toLocaleString('pl')}</p>
+			<p>Updated: {entry.updatedAt.toLocaleString('pl')}</p>
+
+			{#if entry.publishedAt}
+				<p>Published: {entry.publishedAt.toLocaleString('pl')}</p>
+			{/if}
+			<p class="text-muted-foreground text-xs">ID: {entry.id}</p>
+		{/snippet}
+
+		{#snippet after()}
+			{#if entry.status === 'draft'}
+				<Button
+					onclick={() => {
+						remotes.updateEntryCommand({
+							id: entry.id,
+							data: { status: 'published' }
+						});
+					}}
+					type="button"
+					class="mt-2 w-full">Publish</Button
+				>
+			{:else}
+				<Button
+					type="button"
+					class="mt-2 w-full"
+					onclick={() => {
+						remotes.updateEntryCommand({
+							id: entry.id,
+							data: { status: 'draft' }
+						});
+					}}>Unpublish</Button
+				>
+			{/if}
+
+			{#if previewUrl}
+				<Button
+					type="button"
+					onclick={() => {
+						isPreview = !isPreview;
+					}}
+					class="mt-2 w-full"
+					variant="outline">{isPreview ? 'Hide' : 'Show'} Preview</Button
+				>
+			{/if}
+		{/snippet}
+	</FieldsForm>
+
+	{#if isPreview}
+		<div class="flex w-[768px] shrink-0 flex-col space-y-4 pl-4">
+			<h2 class="text-lg font-semibold">
+				Preview: <a href={previewUrl} target="_blank"> {previewUrl}</a>
+			</h2>
+			<div class="grow border p-4">
+				<iframe title="Preview" src={previewUrl} class="h-full w-full"></iframe>
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/admin/client/entry/entry.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { RawEntry } from '../../../types/entries.js';
+type Props = {
+    entry: RawEntry;
+};
+declare const Entry: import("svelte").Component<Props, {}, "">;
+type Entry = ReturnType<typeof Entry>;
+export default Entry;

package/dist/admin/client/index.d.ts

@@ -0,0 +1,7 @@
+export { default as AdminAfterLoginLayout } from './admin/admin-after-login-layout.svelte';
+export { default as AdminLayout } from './admin/admin-layout.svelte';
+export { default as EntryPage } from './entry/entry-page.svelte';
+export { default as CollectionPage } from './collection/collection-page.svelte';
+export { default as DashboardPage } from './admin/dashboard-page.svelte';
+export { default as LoginPage } from './login/login-page.svelte';
+export { default as MediaPage } from './media/media-page.svelte';

package/dist/admin/client/index.js

@@ -0,0 +1,7 @@
+export { default as AdminAfterLoginLayout } from './admin/admin-after-login-layout.svelte';
+export { default as AdminLayout } from './admin/admin-layout.svelte';
+export { default as EntryPage } from './entry/entry-page.svelte';
+export { default as CollectionPage } from './collection/collection-page.svelte';
+export { default as DashboardPage } from './admin/dashboard-page.svelte';
+export { default as LoginPage } from './login/login-page.svelte';
+export { default as MediaPage } from './media/media-page.svelte';