@webamoki/web-svelte 0.4.2 → 0.5.0

package/dist/components/form/Form.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" generics="S extends type.Any<Record<string, unknown>>">
+	import { toast } from 'svelte-sonner';
+	import { dateTransport } from '../../utils/index.js';
+	import { type } from 'arktype';
+	import type { Snippet } from 'svelte';
+	import { superForm, type SuperForm, type SuperValidated } from 'sveltekit-superforms';
+	import { arktypeClient } from 'sveltekit-superforms/adapters';
+	import type { SuperFormData } from 'sveltekit-superforms/client';
+
+	interface Props {
+		validated: SuperValidated<S['infer']> | S['infer'];
+		schema: S;
+		onSuccess?: (
+			form: Readonly<SuperValidated<S['infer'], App.Superforms.Message, S['infer']>>
+		) => void;
+		invalidateAll?: boolean;
+		children: Snippet<
+			[{ form: SuperForm<S['infer'], App.Superforms.Message>; data: SuperFormData<S['infer']> }]
+		>;
+		// TODO: Enforce use of resolve
+		action: string;
+		actionName: string;
+		class: string;
+	}
+
+	let {
+		validated,
+		schema,
+		onSuccess,
+		invalidateAll = false,
+		children,
+		action: _action,
+		actionName,
+		class: className
+	}: Props = $props();
+
+	const form = superForm(validated, {
+		validators: arktypeClient(schema),
+		dataType: 'json',
+		invalidateAll,
+		transport: dateTransport,
+		onUpdated({ form }) {
+			const text = form.message?.text;
+			if (text === undefined) return;
+
+			if (form.message?.success) {
+				toast.success(text);
+			} else {
+				toast.error(text);
+			}
+
+			if (form.valid) {
+				onSuccess?.(form);
+			}
+		}
+	});
+	const data = form.form;
+</script>
+
+<form class={className} action="{_action}?/{actionName}" method="POST" use:form.enhance>
+	{@render children({ form, data })}
+</form>

package/dist/components/form/Form.svelte.d.ts

@@ -0,0 +1,40 @@
+import { type } from 'arktype';
+import type { Snippet } from 'svelte';
+import { type SuperForm, type SuperValidated } from 'sveltekit-superforms';
+import type { SuperFormData } from 'sveltekit-superforms/client';
+declare function $$render<S extends type.Any<Record<string, unknown>>>(): {
+    props: {
+        validated: SuperValidated<S["infer"]> | S["infer"];
+        schema: S;
+        onSuccess?: (form: Readonly<SuperValidated<S["infer"], App.Superforms.Message, S["infer"]>>) => void;
+        invalidateAll?: boolean;
+        children: Snippet<[{
+            form: SuperForm<S["infer"], App.Superforms.Message>;
+            data: SuperFormData<S["infer"]>;
+        }]>;
+        action: string;
+        actionName: string;
+        class: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<S extends type.Any<Record<string, unknown>>> {
+    props(): ReturnType<typeof $$render<S>>['props'];
+    events(): ReturnType<typeof $$render<S>>['events'];
+    slots(): ReturnType<typeof $$render<S>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <S extends type.Any<Record<string, unknown>>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<S>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<S>['props']>, ReturnType<__sveltets_Render<S>['events']>, ReturnType<__sveltets_Render<S>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<S>['bindings']>;
+    } & ReturnType<__sveltets_Render<S>['exports']>;
+    <S extends type.Any<Record<string, unknown>>>(internal: unknown, props: ReturnType<__sveltets_Render<S>['props']> & {}): ReturnType<__sveltets_Render<S>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Form: $$IsomorphicComponent;
+type Form<S extends type.Any<Record<string, unknown>>> = InstanceType<typeof Form<S>>;
+export default Form;

package/dist/components/form/fields/HexColorField.svelte

@@ -6,10 +6,18 @@
 		value?: string;
 	}
 	let { value = $bindable(), ...fieldProps }: Props = $props();
+
+	function get() {
+		return `#${value}`;
+	}
+	function set(raw: string | undefined) {
+		if (raw === undefined) return undefined;
+		return raw.slice(1); // remove #
+	}
 </script>
 
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem()}
-		<ColorPicker bind:hex={value} label={value} isAlpha={false} position="responsive" />
+		<ColorPicker bind:hex={get, set} label={value} isAlpha={false} position="responsive" />
 	{/snippet}
 </FieldWrapper>

package/dist/utils/datetime/index.d.ts

@@ -1,7 +1,7 @@
 import { CalendarDate, Time, ZonedDateTime, type DateDuration } from '@internationalized/date';
+import type { Transport } from '@sveltejs/kit';
+import type { Day } from '../types/arktype.js';
 export declare const Days: readonly ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
-export type Day = (typeof Days)[number];
-export declare const Day: import("arktype/internal/methods/string.ts").StringType<"Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday", {}>;
 /**
  * Gets the day of the week for a given date.
  * @param date - The date to get the day of the week for.
@@ -166,3 +166,4 @@ export declare function unfreezeDate(raw: $state.Snapshot<CalendarDate>): Calend
  * @returns The unfrozen Time object.
  */
 export declare function unfreezeTime(raw: $state.Snapshot<Time>): Time;
+export declare const dateTransport: Transport;

package/dist/utils/datetime/index.js

@@ -1,5 +1,4 @@
-import { CalendarDate, DateFormatter, getDayOfWeek, getLocalTimeZone, startOfMonth, Time, toCalendarDate, today, toTime, ZonedDateTime } from '@internationalized/date';
-import { type } from 'arktype';
+import { CalendarDate, DateFormatter, fromDate, getDayOfWeek, getLocalTimeZone, startOfMonth, Time, toCalendarDate, today, toTime, ZonedDateTime } from '@internationalized/date';
 import { map, range } from 'ramda';
 const DEFAULT_TIME_ZONE = 'Europe/London';
 const DEFAULT_LOCALE = 'en-GB';
@@ -13,7 +12,6 @@ export const Days = [
     'Saturday',
     'Sunday'
 ];
-export const Day = type.enumerated(...Days);
 const DayIndex = Object.fromEntries(Days.map((day, index) => [day, index]));
 /** Gets the day index of the date */
 function getDayIndex(date) {
@@ -320,3 +318,21 @@ export function unfreezeDate(raw) {
 export function unfreezeTime(raw) {
     return new Time(raw.hour, raw.minute, raw.second, raw.millisecond);
 }
+// SerDe
+export const dateTransport = {
+    Time: {
+        encode: (t) => t instanceof Time && [t.hour, t.minute, t.second, t.millisecond],
+        decode: ([hour, minute, second, millisecond]) => new Time(hour, minute, second, millisecond)
+    },
+    CalendarDate: {
+        encode: (d) => d instanceof CalendarDate && [d.year, d.month, d.day],
+        decode: ([year, month, day]) => new CalendarDate(year, month, day)
+    },
+    ZonedDateTime: {
+        encode: (value) => value instanceof ZonedDateTime && [value.toAbsoluteString(), value.timeZone],
+        decode: ([absoluteString, timezone]) => {
+            const nativeDate = new Date(absoluteString);
+            return fromDate(nativeDate, timezone);
+        }
+    }
+};

package/dist/utils/index.d.ts

@@ -1 +1,5 @@
 export * from './datetime/index.js';
+export * from './types/arktype.js';
+export * from './types/db.js';
+export * from './types/consts.js';
+export * from './string.js';

package/dist/utils/index.js

@@ -1 +1,5 @@
 export * from './datetime/index.js';
+export * from './types/arktype.js';
+export * from './types/db.js';
+export * from './types/consts.js';
+export * from './string.js';

package/dist/utils/string.d.ts

@@ -0,0 +1 @@
+export declare function toTitleCase(str: string): string;

package/dist/utils/string.js

@@ -0,0 +1,4 @@
+/* --- String functions --- */
+export function toTitleCase(str) {
+    return str.toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase());
+}

package/dist/utils/types/arktype.d.ts

@@ -0,0 +1,16 @@
+import { Type } from 'arktype';
+import { Days } from '../datetime/index.js';
+import { Time as timeImport, CalendarDate as calendarImport } from '@internationalized/date';
+/** Type string which is trimmed before narrowing the type checking */
+export declare function trimTo(typeTo: Type<string>): import("arktype/internal/methods/object.ts").ObjectType<(In: string) => import("arktype/internal/attributes.ts").To<string>, {}>;
+export declare const Day: import("arktype/internal/methods/string.ts").StringType<"Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday", {}>;
+export type Day = (typeof Days)[number];
+export declare const Time: import("arktype/internal/methods/object.ts").ObjectType<timeImport, {}>;
+export declare const CalendarDate: import("arktype/internal/methods/object.ts").ObjectType<calendarImport, {}>;
+export declare const HexColor: import("arktype/internal/methods/string.ts").StringType<string, {}>;
+export declare const Email: import("arktype/internal/methods/object.ts").ObjectType<(In: string) => import("arktype").Out<string>, {}>;
+export declare const FirstName: import("arktype/internal/methods/object.ts").ObjectType<(In: string) => import("arktype").Out<string>, {}>;
+export declare const LastName: import("arktype/internal/methods/object.ts").ObjectType<(In: string) => import("arktype").Out<string>, {}>;
+export declare const Id: import("arktype/internal/methods/number.ts").NumberType<number, {}>;
+export declare const PasswordType: import("arktype/internal/methods/string.ts").StringType<string, {}>;
+export declare const Duration: import("arktype/internal/methods/number.ts").NumberType<number, {}>;

package/dist/utils/types/arktype.js

@@ -0,0 +1,82 @@
+import { Type, type } from 'arktype';
+import { Days } from '../datetime/index.js';
+import { Time as timeImport, CalendarDate as calendarImport } from '@internationalized/date';
+import { EMAIL_MAX, FIRST_NAME_MAX, LAST_NAME_MAX } from './consts.js';
+import { toTitleCase } from '../string.js';
+/** Type string which is trimmed before narrowing the type checking */
+export function trimTo(typeTo) {
+    return type('string.trim').to(typeTo);
+}
+export const Day = type.enumerated(...Days);
+export const Time = type.instanceOf(timeImport).configure({
+    problem: () => 'invalid time'
+});
+export const CalendarDate = type.instanceOf(calendarImport).configure({
+    problem: () => 'invalid date'
+});
+export const HexColor = type('string').narrow((value, ctx) => {
+    // Regex explanation:
+    // ^           : start of string
+    // [0-9A-Fa-f]{3} : three hex digits (short form)
+    // ([0-9A-Fa-f]{3})? : optional three more digits (long form #RRGGBB)
+    // $           : end of string
+    if (!/^[0-9A-Fa-f]{3}([0-9A-Fa-f]{3})?$/.test(value)) {
+        return ctx.reject({
+            problem: 'invalid hex color value'
+        });
+    }
+    return true;
+});
+export const Email = trimTo(type('string.email')
+    .configure({
+    problem: () => 'invalid email address'
+})
+    .atMostLength(EMAIL_MAX)).pipe((email) => email.toLowerCase());
+export const FirstName = trimTo(type.string.moreThanLength(0).atMostLength(FIRST_NAME_MAX)).pipe(toTitleCase);
+export const LastName = trimTo(type.string.moreThanLength(0).atMostLength(LAST_NAME_MAX)).pipe(toTitleCase);
+export const Id = type('number >= 0');
+const passwordMaxLength = 20;
+const passwordMinLength = 8;
+const allowedChars = /^[A-Za-z0-9!@$#()]+$/;
+export const PasswordType = type('string')
+    .atLeastLength(passwordMinLength)
+    .atMostLength(passwordMaxLength)
+    .configure({
+    problem: (ctx) => `Must be ${ctx.expected}`
+})
+    .narrow((data, ctx) => {
+    if (!allowedChars.test(data)) {
+        return ctx.reject({
+            problem: 'invalid characters. Only A–Z, a–z, 0–9, !@$#() are allowed.'
+        });
+    }
+    if (!/[A-Z]/.test(data)) {
+        return ctx.reject({
+            problem: 'must contain at least one uppercase letter.'
+        });
+    }
+    if (!/[a-z]/.test(data)) {
+        return ctx.reject({
+            problem: 'must contain at least one lowercase letter.'
+        });
+    }
+    if (!/[0-9]/.test(data)) {
+        return ctx.reject({
+            problem: 'must contain at least one number.'
+        });
+    }
+    if (!/[!@$#()]/.test(data)) {
+        return ctx.reject({
+            problem: 'must contain at least one special character (!@$#()).'
+        });
+    }
+    return true;
+});
+export const Duration = type('number').narrow((value, ctx) => {
+    if (!Number.isInteger(value) || value <= 0) {
+        return ctx.reject({
+            problem: 'invalid minutes'
+        });
+    }
+    return true;
+});

package/dist/utils/types/consts.d.ts

@@ -0,0 +1,5 @@
+export declare const FIRST_NAME_MAX = 25;
+export declare const LAST_NAME_MAX = 25;
+export declare const NAME_MAX = 50;
+export declare const EMAIL_MAX = 100;
+export declare const HEX_COLOR_MAX = 6;

package/dist/utils/types/consts.js

@@ -0,0 +1,5 @@
+export const FIRST_NAME_MAX = 25;
+export const LAST_NAME_MAX = 25;
+export const NAME_MAX = 50;
+export const EMAIL_MAX = 100;
+export const HEX_COLOR_MAX = 6;

package/dist/utils/types/db.d.ts

@@ -0,0 +1,56 @@
+import { CalendarDate, type Time } from '@internationalized/date';
+export declare function stringEnum<T extends string>(): import("drizzle-orm/column-builder", { with: { "resolution-mode": "require" } }).$Type<import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgVarcharBuilderInitial<"", [string, ...string[]], 50>, T>;
+export declare const name: () => import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgVarcharBuilderInitial<"", [string, ...string[]], 50>;
+export declare const hexColor: () => import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgVarcharBuilderInitial<"", [string, ...string[]], 6>;
+export declare const time: {
+    (): import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgCustomColumnBuilder<{
+        name: "";
+        dataType: "custom";
+        columnType: "PgCustomColumn";
+        data: Time;
+        driverParam: string;
+        enumValues: undefined;
+    }>;
+    <TConfig extends Record<string, any>>(fieldConfig?: TConfig | undefined): import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgCustomColumnBuilder<{
+        name: "";
+        dataType: "custom";
+        columnType: "PgCustomColumn";
+        data: Time;
+        driverParam: string;
+        enumValues: undefined;
+    }>;
+    <TName extends string>(dbName: TName, fieldConfig?: unknown): import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgCustomColumnBuilder<{
+        name: TName;
+        dataType: "custom";
+        columnType: "PgCustomColumn";
+        data: Time;
+        driverParam: string;
+        enumValues: undefined;
+    }>;
+};
+export declare const date: {
+    (): import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgCustomColumnBuilder<{
+        name: "";
+        dataType: "custom";
+        columnType: "PgCustomColumn";
+        data: CalendarDate;
+        driverParam: string;
+        enumValues: undefined;
+    }>;
+    <TConfig extends Record<string, any>>(fieldConfig?: TConfig | undefined): import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgCustomColumnBuilder<{
+        name: "";
+        dataType: "custom";
+        columnType: "PgCustomColumn";
+        data: CalendarDate;
+        driverParam: string;
+        enumValues: undefined;
+    }>;
+    <TName extends string>(dbName: TName, fieldConfig?: unknown): import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgCustomColumnBuilder<{
+        name: TName;
+        dataType: "custom";
+        columnType: "PgCustomColumn";
+        data: CalendarDate;
+        driverParam: string;
+        enumValues: undefined;
+    }>;
+};

package/dist/utils/types/db.js

@@ -0,0 +1,34 @@
+import { customType, varchar } from 'drizzle-orm/pg-core';
+import { HEX_COLOR_MAX, NAME_MAX } from './consts.js';
+import { CalendarDate, parseDate, parseTime } from '@internationalized/date';
+// General
+const STRING_ENUM_MAX = 50;
+export function stringEnum() {
+    return varchar({ length: STRING_ENUM_MAX }).$type();
+}
+export const name = () => varchar({ length: NAME_MAX });
+export const hexColor = () => varchar({ length: HEX_COLOR_MAX });
+// Date Time
+// TODO: Absolute date time
+export const time = customType({
+    dataType() {
+        return 'time(0)';
+    },
+    toDriver(time) {
+        return time.toString();
+    },
+    fromDriver(value) {
+        return parseTime(value);
+    }
+});
+export const date = customType({
+    dataType() {
+        return 'date';
+    },
+    toDriver(date) {
+        return date.toString();
+    },
+    fromDriver(value) {
+        return parseDate(value);
+    }
+});

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.2",
+  "version": "0.5.0",
   "license": "MIT",
   "files": [
     "dist",
@@ -78,10 +78,14 @@
     "svelte"
   ],
   "dependencies": {
+    "dotenv": "^17.2.3",
+    "drizzle-orm": "^0.44.5",
     "formsnap": "^2.0.1",
+    "pg": "^8.16.3",
     "ramda": "^0.31.3",
     "sorted-array-functions": "^1.3.0",
-    "svelte-awesome-color-picker": "^4.0.2"
+    "svelte-awesome-color-picker": "^4.0.2",
+    "svelte-sonner": "^1.0.5"
   },
   "scripts": {
     "dev": "vite dev",