@hkdigital/lib-core 0.3.1

package/dist/schemas/validate-url.js

@@ -0,0 +1,180 @@
+// > Imports
+
+import * as v from 'valibot';
+// import { UrlOrEmptyString } from '../valibot/url.js';
+
+const ValidateTrim = v.custom((value) => {
+	if (/^\s|\s$/.test(value)) {
+		throw new Error('Should not start or end with whitespace');
+	}
+	return true;
+});
+
+// > Exports
+
+/**
+ * Schema to validate an URL
+ */
+export const ValidateUrl = v.pipe(v.string(), v.url(), ValidateTrim);
+
+/**
+ * Schema to validate an URL or empty string.
+ */
+export const ValidateUrlOrEmptyString = v.union([v.literal(''), v.pipe(v.string(), v.url())]);
+
+// export const ValidateHumanUrl
+
+/**
+ * Schema to validate an URL path
+ */
+export const ValidateUrlPath = v.pipe(
+	v.string(),
+	ValidateTrim,
+	v.transform((value) => {
+		return {
+			url: new URL(value, 'http://localhost'),
+			value
+		};
+	}),
+	v.custom(({ url }) => {
+		if (url.search) {
+			return false;
+		}
+		return true;
+	}, 'Value should not contain search path'),
+	v.custom(({ url }) => {
+		if (url.hash) {
+			return false;
+		}
+		return true;
+	}, 'Value should not contain hash path'),
+	v.transform(({ url }) => {
+		return url.pathname;
+	})
+);
+
+/**
+ * Schema to validate a relative URL
+ */
+export const ValidateRelativeUrl = v.pipe(
+	v.string(),
+	ValidateTrim,
+	v.custom((value) => {
+		try {
+			return new URL(value, 'http://localhost');
+
+			// eslint-disable-next-line no-unused-vars
+		} catch (e) {
+			throw new Error('Invalid relative URL');
+		}
+	})
+);
+
+export const ValidateAbsOrRelUrl = v.pipe(
+	v.string(),
+	ValidateTrim,
+	v.custom((value) => {
+		try {
+			if (/^https?:\/\//.test(value)) {
+				// Absolute url using protocol http(s)
+				return new URL(value);
+			} else {
+				// Relative URL
+				return new URL(value, 'http://localhost');
+			}
+
+			// eslint-disable-next-line no-unused-vars
+		} catch (e) {
+			throw new Error('Invalid relative URL');
+		}
+	})
+);
+
+/**
+ * Schema to validate an url that may miss the protocol part
+ *
+ * @note an empty string is not allowed!
+ */
+// export const HumanUrl = v.pipe(
+//   v.custom( ( value ) => {
+//       if( value.includes('://') )
+//       {
+//         v.parse( Url, value );
+//         return true;
+//       }
+//     } )
+//   );
+
+// 	// v.transform((value) => {
+// 	// 	if (!value.length || value.includes('://')) {
+// 	// 		return value;
+// 	// 	} else {
+// 	// 		// Prefix 'url' with 'https://'
+// 	// 		return `https://${value}`;
+// 	// 	}
+// 	// }),
+// 	// v.url()
+// );
+
+/**
+ * Schema to validate url path, without a search and hash part
+ */
+// export const UrlPath = v.pipe(
+// 	v.string(),
+// 	v.transform((value) => {
+// 		// Convert relative url to URL object
+// 		// @note removes ../../ parts
+// 		try {
+// 			return new URL(value, 'http://localhost');
+
+// 			// eslint-disable-next-line no-unused-vars
+// 		} catch (e) {
+// 			return null;
+// 		}
+// 	}),
+// 	v.custom((urlOrNull) => {
+// 		return urlOrNull ? true : false;
+// 	}, 'Invalid URL pathname'),
+// 	v.transform((url) => {
+// 		return url.pathname;
+// 	})
+// );
+
+/**
+ * Schema to validate a url path, which consists of
+ * a path and optionally search and hash parts
+ */
+// export const RelativeUrl = v.pipe(
+// 	v.string(),
+// 	v.transform((value) => {
+// 		// Convert relative url to URL object
+// 		// @note removes ../../ parts
+// 		try {
+// 			return new URL(value, 'http://localhost');
+
+// 			// eslint-disable-next-line no-unused-vars
+// 		} catch (e) {
+// 			return null;
+// 		}
+// 	}),
+// 	v.custom((urlOrNull) => {
+// 		return urlOrNull ? true : false;
+// 	}, 'Invalid URL pathname or search part'),
+// 	v.transform((url) => {
+// 		return (
+// 			`${url.pathname}` +
+// 			`${url.search.length <= 1 ? '' : url.search}` +
+// 			`${url.hash.length <= 1 ? '' : url.hash}`
+// 		);
+// 	})
+// );
+
+/**
+ * Schema to validate an absolute or relative url
+ *
+ * @note an empty string is not allowed!
+ */
+// export const AbsOrRelUrl = v.union([
+// 	v.pipe(v.string(), v.trim(), v.url()),
+// 	v.pipe(v.string(), v.nonEmpty(), RelativeUrl)
+// ]);

package/dist/server/index.d.ts

@@ -0,0 +1 @@
+export * from "./logger.js";

package/dist/server/index.js

@@ -0,0 +1 @@
+export * from './logger.js';

package/dist/server/logger.d.ts

@@ -0,0 +1,25 @@
+export type LoggerContext = {
+    route?: {
+        id: string;
+    };
+    componentName?: string;
+};
+export type ExtendedLogger = pino.Logger & LoggerExtension;
+export type LoggerExtension = {
+    context: (context: LoggerContext) => ExtendedLogger;
+};
+/**
+ * @typedef {object} LoggerContext
+ * @property {{ id: string }} [route]
+ * @property {string} [componentName]
+ */
+/**
+ * @typedef {pino.Logger & LoggerExtension} ExtendedLogger
+ */
+/**
+ * @typedef {Object} LoggerExtension
+ * @property {( context: LoggerContext )=> ExtendedLogger} context
+ */
+/** @type {pino.Logger & LoggerExtension} */
+export const logger: pino.Logger & LoggerExtension;
+import pino from 'pino';

package/dist/server/logger.js

@@ -0,0 +1,94 @@
+/**
+ * @example
+ *
+ * import { logger } from './logger.js';
+ *
+ * logger.info('Hello there!');
+ * logger.info( { a: 1, b: 2 }, 'Test vars');
+ *
+ * export function load({ route }) {
+ *   logger.context({route}).info('Log');
+ * }
+ *
+ * @note
+ * Set a 'handleError' hook to log errors captured by svelte
+ *
+ * // hooks.server.js
+ * export const handleError = ({ status, error, message }) => {
+ *	  if (status !== 404) {
+ *		  logger.error(error);
+ *	  }
+ *
+ *	  // do not return sensitive data here as it will be sent to the client
+ * 	  return { message };
+ *  };
+ *
+ * @see https://kit.svelte.dev/docs/hooks#shared-hooks-handleerror
+ * @see https://stolthq.com/blog/structured-logging-sveltekit
+ */
+
+import pino from 'pino';
+import { dev } from '$app/environment';
+
+// import { browser, building, dev, version } from '$app/environment';
+
+// > Setup
+
+/** @type {pino.LoggerOptions} */
+let options = {};
+
+if (dev) {
+	options = {
+		level: 'debug',
+		transport: {
+			target: 'pino-pretty',
+			options: {
+				colorize: true
+			}
+		}
+	};
+}
+
+// > Exports
+
+// ?? function routeLogger( ... )
+
+/**
+ * @typedef {object} LoggerContext
+ * @property {{ id: string }} [route]
+ * @property {string} [componentName]
+ */
+
+/**
+ * @typedef {pino.Logger & LoggerExtension} ExtendedLogger
+ */
+
+/**
+ * @typedef {Object} LoggerExtension
+ * @property {( context: LoggerContext )=> ExtendedLogger} context
+ */
+
+/** @type {pino.Logger & LoggerExtension} */
+// @ts-ignore
+const logger = pino(options);
+
+Object.assign(logger, {
+	/**
+	 * @param {LoggerContext} _
+	 *
+	 * @returns {pino.Logger}
+	 */
+	context({ route, componentName }) {
+		if (route) {
+			// @ts-ignore
+			return this.child({ route: route.id });
+		} else if (componentName) {
+			// @ts-ignore
+			return this.child({ componentName });
+		} else {
+			throw new Error(`Missing input parameter`);
+		}
+	}
+});
+
+export { logger };

package/dist/states/index.d.ts

@@ -0,0 +1 @@
+export * from "./navigation.svelte.js";

package/dist/states/index.js

@@ -0,0 +1 @@
+export * from './navigation.svelte.js';

package/dist/states/navigation.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @note call nav.init() during component initialization phase
+ */
+export const nav: Navigation & {
+    init: () => null;
+};
+declare class Navigation {
+    /** @type {{ url: { pathname: string } }} */
+    page: {
+        url: {
+            pathname: string;
+        };
+    };
+    /** @type {string} */
+    pathname: string;
+    stage: {
+        before: boolean;
+        navigating: boolean;
+        after: boolean;
+    };
+    init(): void;
+}
+export {};

package/dist/states/navigation.svelte.js

@@ -0,0 +1,55 @@
+import { onMount } from 'svelte';
+
+import { lazySingleton } from '../util/singleton/index.js';
+
+import { beforeNavigate, onNavigate, afterNavigate } from '$app/navigation';
+
+import { page } from '$app/stores';
+import { get } from 'svelte/store';
+
+class Navigation {
+	// TODO: complete page type
+
+	/** @type {{ url: { pathname: string } }} */
+	page = $state(get(page));
+
+	/** @type {string} */
+	pathname = $derived(this.page.url.pathname);
+
+	stage = $state.raw({ before: false, navigating: true, after: false });
+
+	constructor() {
+		beforeNavigate(() => {
+			this.stage = { before: true, navigating: false, after: false };
+		});
+
+		onNavigate(() => {
+			this.stage = { before: false, navigating: true, after: false };
+		});
+
+		// onNavigate(async () => {
+		//   console.log('onNavigate can be used to perform async page transitions');
+		//   return new Promise((resolve) => {
+		//     setTimeout(resolve, 1000);
+		//   });
+		// });
+
+		afterNavigate(() => {
+			this.stage = { before: false, navigating: false, after: true };
+		});
+
+		onMount(() => {
+			return page.subscribe((value) => {
+				// console.log('***update page url');
+				this.page = value;
+			});
+		});
+	} // end constructor
+
+	init() {}
+} // end class
+
+/**
+ * @note call nav.init() during component initialization phase
+ */
+export const nav = lazySingleton({ class: Navigation });

package/dist/stores/index.d.ts

@@ -0,0 +1 @@
+export * as theme from "./theme.js";

package/dist/stores/index.js

@@ -0,0 +1 @@
+export * as theme from './theme.js';

package/dist/stores/theme.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Set meta theme color for both light and dark mode
+ *
+ * @param {string} value - HTML Color
+ */
+export function setMetaThemeColor(value: string): void;
+/**
+ * Set meta theme color for light mode
+ *
+ * @param {string} value - HTML Color
+ */
+export function setMetaThemeColorBase(value: string): void;
+/**
+ * Set meta theme color for dark mode only
+ *
+ * @param {string} value - HTML Color
+ */
+export function setMetaThemeColorDark(value: string): void;
+export namespace metaThemeColorBase {
+    let subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    function get(): void;
+}
+export namespace metaThemeColorDark {
+    let subscribe_1: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    export { subscribe_1 as subscribe };
+    export function get_1(): void;
+    export { get_1 as get };
+}

package/dist/stores/theme.js

@@ -0,0 +1,80 @@
+/**
+ * @example Set theme color in a layout file
+ *
+ * // +layout.svelte
+ * <script>
+ * import { theme as themeStore } from './theme.js';
+ *
+ * const { metaThemeColorBase, metaThemeColorDark } = themeStore;
+ * </script>
+ *
+ * <svelte:head>
+ *   <meta
+ *     name="theme-color"
+ *     media="(prefers-color-scheme: light)"
+ *     content={$metaThemeColorBase}
+ *   />
+ *   <meta
+ *     name="theme-color"
+ *     media="(prefers-color-scheme: dark)"
+ *     content={$metaThemeColorDark}
+ *   />
+ * </svelte:head>
+ */
+
+import { writable, get } from 'svelte/store';
+
+// > Internals
+
+const DEFAULT_THEME_COLOR_BASE = '#fffffe';
+const DEFAULT_THEME_COLOR_DARK = '#000001';
+
+/** @type {import('svelte/store').Writable<string>} */
+const themeColorBase = writable(DEFAULT_THEME_COLOR_BASE);
+
+/** @type {import('svelte/store').Writable<string|null>} */
+const themeColorDark = writable(DEFAULT_THEME_COLOR_DARK);
+
+// > Exports
+
+/**
+ * Set meta theme color for both light and dark mode
+ *
+ * @param {string} value - HTML Color
+ */
+export function setMetaThemeColor(value) {
+	themeColorBase.set(value);
+	themeColorDark.set(value);
+}
+
+/**
+ * Set meta theme color for light mode
+ *
+ * @param {string} value - HTML Color
+ */
+export function setMetaThemeColorBase(value) {
+	themeColorBase.set(value);
+}
+
+/**
+ * Set meta theme color for dark mode only
+ *
+ * @param {string} value - HTML Color
+ */
+export function setMetaThemeColorDark(value) {
+	themeColorDark.set(value);
+}
+
+export const metaThemeColorBase = {
+	subscribe: themeColorBase.subscribe,
+	get: () => {
+		get(themeColorBase);
+	}
+};
+
+export const metaThemeColorDark = {
+	subscribe: themeColorDark.subscribe,
+	get: () => {
+		get(themeColorDark);
+	}
+};

package/dist/themes/hkdev/components/blocks/text-block.css

@@ -0,0 +1,34 @@
+/* .on-primary-dark
+{
+  & [data-title-text-button-block] {
+    & > .title-box {
+      @apply text-white;
+    }
+
+    & > .text-box {
+      ...text color
+    }  
+  }
+} */
+
+[data-title-text-button-block] {
+  &.block-width {
+    @apply w-1/2;
+  }
+
+  & > .title-box {
+    @apply text-heading-h3;
+    @apply uppercase;
+  }
+
+  & > .content-box .p {
+    @apply text-base-md;
+  }
+
+  & > .content-box:has(+ .footer-box) {
+    @apply mb-30p; /* 10p + 20p */
+  }
+
+  & > .footer-box {
+  }
+}

package/dist/themes/hkdev/components/boxes/game-box.css

@@ -0,0 +1,11 @@
+@import '../../global/on-colors.css';
+
+  [data-boxes='game-box'] {
+    /*& .game-box-padding-20p {
+      @apply mt-20p;
+      @apply mr-20p;
+      @apply mb-20p;
+      @apply ml-20p;
+    }*/
+  }
+

package/dist/themes/hkdev/components/buttons/button-icon-steeze.css

@@ -0,0 +1,22 @@
+@define-mixin component-button-icon-steeze {
+
+  /* @note using CSS vars defined in the parent button postcss */
+
+  /* Type-based styling for text buttons */
+  [data-component="button"][data-type="icon-steeze"] {
+
+    /*&[data-size="sm"] {
+      @apply px-8ut py-8ut;
+    }
+
+    &[data-size="md"] {
+      @apply px-16ut py-12ut;
+    }
+
+    &[data-size="lg"] {
+      @apply px-32ut py-16ut;
+    }*/
+
+  }
+
+}

package/dist/themes/hkdev/components/buttons/button-text.css

@@ -0,0 +1,32 @@
+@define-mixin component-button-text {
+
+  /* @note using CSS vars defined in the parent button postcss */
+
+  /* Type-based styling for text buttons */
+  [data-component="button"][data-type="text"] {
+
+    /* Typography settings */
+    @apply font-ui text-ui-md;
+    @apply uppercase;
+    @apply whitespace-nowrap;
+
+    /* Size settings */
+
+    &[data-size="md"] {
+      @apply rounded-sm;
+      @apply py-8ut px-16ut;
+      min-width: var(--btn-min-width);
+      min-height: var(--btn-min-height);
+    }
+
+    /* Role-specific text adjustments */
+    &[data-role="primary"] {
+      @apply font-extrabold;
+    }
+
+    &[data-role="secondary"] {
+      @apply font-bold;
+    }
+  }
+
+}