@hkdigital/lib-sveltekit 0.0.31

package/dist/constants/regexp/text.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Text related regexp's
+ *
+ * Letter (any language): \p{L}
+ * Letter latin: \p{Script=Latin}
+ *
+ * Number (any language): \p{N}
+ * Number (exclude letter numbers, e.g. roman): \p{Nd}
+ *
+ * @example
+ * import { Latin_Char_Number as lcn } from './latin.js';
+ * export const User_Username = `^[${lcn}]+${lcn}_-]{1,38}[${lcn}]$`;
+ *
+ * const re = new RegExp('^[${Latin_Number}]', 'u');
+ *
+ * Emoji:
+ *
+ * The v flag enables support
+ *
+ * RGI_Emoji in Unicode is defined as “the subset of all valid emoji
+ * (characters and sequences) recommended for general interchange”.
+ * With this, we can now match emoji regardless of how many code points
+ * they consist of under the hood!
+ *
+ * @see https://v8.dev/features/regexp-v-flag
+ *
+ * Punctuation:
+ * Puntuation marks are periods, commas, exclamation marks, question marks etc.
+ * Astral symbols are emoji
+ *
+ * @note
+ * \p{Punctuation} matches a small subset: !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~
+ * \p{IsPunctuation} matches a wide subset, including e.g. «, », ¿, ¡, §,
+ * ¶, ‘, ’, “, ”, and ‽.
+ *
+ * @see https://stackoverflow.com/questions/4328500/
+ *      how-can-i-strip-all-punctuation-from-a-string-in-javascript-using-regex
+ *
+ * @see https://en.wikipedia.org/
+ *      wiki/Unicode_character_property#General_Category
+ */
+export const CHAR: "\\p{Script=Latin}";
+export const NUMBER: "\\p{Nd}";
+export const CHAR_NUMBER: "\\p{Script=Latin}\\p{Nd}";
+export const EMOJI: "\\p{RGI_Emoji}";
+export const PUNCTUATION: "\\p{Punctuation}$+<=>\\^`\\|~";
+export const PUNCT: "\\p{Punctuation}$+<=>\\^`\\|~";

package/dist/constants/regexp/text.js

@@ -0,0 +1,49 @@
+/**
+ * Text related regexp's
+ *
+ * Letter (any language): \p{L}
+ * Letter latin: \p{Script=Latin}
+ *
+ * Number (any language): \p{N}
+ * Number (exclude letter numbers, e.g. roman): \p{Nd}
+ *
+ * @example
+ * import { Latin_Char_Number as lcn } from './latin.js';
+ * export const User_Username = `^[${lcn}]+${lcn}_-]{1,38}[${lcn}]$`;
+ *
+ * const re = new RegExp('^[${Latin_Number}]', 'u');
+ *
+ * Emoji:
+ *
+ * The v flag enables support
+ *
+ * RGI_Emoji in Unicode is defined as “the subset of all valid emoji
+ * (characters and sequences) recommended for general interchange”.
+ * With this, we can now match emoji regardless of how many code points
+ * they consist of under the hood!
+ *
+ * @see https://v8.dev/features/regexp-v-flag
+ *
+ * Punctuation:
+ * Puntuation marks are periods, commas, exclamation marks, question marks etc.
+ * Astral symbols are emoji
+ *
+ * @note
+ * \p{Punctuation} matches a small subset: !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~
+ * \p{IsPunctuation} matches a wide subset, including e.g. «, », ¿, ¡, §,
+ * ¶, ‘, ’, “, ”, and ‽.
+ *
+ * @see https://stackoverflow.com/questions/4328500/
+ *      how-can-i-strip-all-punctuation-from-a-string-in-javascript-using-regex
+ *
+ * @see https://en.wikipedia.org/
+ *      wiki/Unicode_character_property#General_Category
+ */
+
+export const CHAR = '\\p{Script=Latin}';
+export const NUMBER = '\\p{Nd}';
+export const CHAR_NUMBER = `${CHAR}${NUMBER}`;
+
+export const EMOJI = '\\p{RGI_Emoji}';
+export const PUNCTUATION = '\\p{Punctuation}$+<=>\\^`\\|~';
+export const PUNCT = PUNCTUATION;

package/dist/constants/regexp/user.d.ts

@@ -0,0 +1,6 @@
+export const RE_NAME: RegExp;
+export const RE_FULLNAME: RegExp;
+export const RE_SURNAME: RegExp;
+export const RE_USERNAME: RegExp;
+export const RE_EMAIL: RegExp;
+export const RE_PHONENUMBER: RegExp;

package/dist/constants/regexp/user.js

@@ -0,0 +1,33 @@
+/**
+ * User related regexps
+ *
+ * Inspired by
+ * @see https://ihateregex.io/expr/username/
+ * @see https://ihateregex.io/expr/discord-username/
+ */
+
+import { NUMBER as N, CHAR, CHAR_NUMBER as CN } from './text.js';
+
+export const RE_NAME = new RegExp(
+  `^[${CHAR}]+(([\\s'\\-\\.]{1}|[\\s]{1}[']{0,1})[${CHAR}]+){0,8}$`, 'v'
+);
+
+export const RE_FULLNAME = new RegExp(
+  `^[${CHAR}]{2,}[\\s][']?[${CHAR}]{1,}([\\s]?['\\-]?[${CHAR}]{1,})*$`, 'v'
+);
+
+export const RE_SURNAME = new RegExp(
+  `^[']?[${CHAR}]{1,}([\\s]?['\\-]?[${CHAR}]{1,})*$`, 'v'
+)
+
+export const RE_USERNAME = new RegExp(
+  `^[${CN}]{2,40}([\\-_\\.][${CN}]{1,40}){0,3}([#][${N}]{1,10}){0,1}$`, 'v'
+);
+
+export const RE_EMAIL = new RegExp(
+  `[^@ \t\r\n]+@[^@ \t\r\n]+\.[^@ \t\r\n]+`, 'v'
+);
+
+export const RE_PHONENUMBER = new RegExp(
+  `^[\\+]?[\\(]?[0-9]{3}[\\)]?[\\-\\s\\.]?[0-9]{3}[\\-\\s\\.]?[0-9]{4,6}$`, 'v'
+)

package/dist/constants/regexp/web.d.ts

@@ -0,0 +1 @@
+export const URL_SLUG: "^[\\p{Script=Latin}\\p{Nd}]+([-]{0,1}[\\p{Script=Latin}\\p{Nd}]+)*$";

package/dist/constants/regexp/web.js

@@ -0,0 +1,3 @@
+import { CHAR_NUMBER as CN } from './text.js';
+
+export const URL_SLUG = `^[${CN}]+([-]{0,1}[${CN}]+)*$`;

package/dist/constants/time.d.ts

@@ -0,0 +1,19 @@
+export const SECOND_MS: 1000;
+export const MINUTE_MS: number;
+export const HOUR_MS: number;
+export const DAY_MS: number;
+export const WEEK_MS: number;
+export const HOURLY: "hourly";
+export const DAILY: "daily";
+export const WEEKLY: "weekly";
+export const TWO_WEEKLY: "two-weekly";
+export const FOUR_WEEKLY: "four-weekly";
+export const INTERVALS_MS: {
+    hourly: number;
+    daily: number;
+    weekly: number;
+    "two-weekly": number;
+    "four-weekly": number;
+};
+export const TIME_2020_01_01: 1577836800000;
+export const TIME_2100_01_01: 4102444800000;

package/dist/constants/time.js

@@ -0,0 +1,28 @@
+// > Units
+
+export const SECOND_MS = 1000;
+export const MINUTE_MS = 60 * SECOND_MS;
+export const HOUR_MS = 60 * MINUTE_MS;
+export const DAY_MS = 24 * HOUR_MS;
+export const WEEK_MS = 7 * DAY_MS;
+
+// > Fixed length intervals
+
+export const HOURLY = 'hourly';
+export const DAILY = 'daily';
+export const WEEKLY = 'weekly';
+export const TWO_WEEKLY = 'two-weekly';
+export const FOUR_WEEKLY = 'four-weekly';
+
+export const INTERVALS_MS = {
+  [HOURLY]: HOUR_MS,
+  [DAILY]: DAY_MS,
+  [WEEKLY]: WEEK_MS,
+  [TWO_WEEKLY]: WEEK_MS * 2,
+  [FOUR_WEEKLY]: WEEK_MS * 4
+};
+
+// > Offsets
+
+export const TIME_2020_01_01 = 1577836800000; // 2020-01-01T00:00:00.000Z
+export const TIME_2100_01_01 = 4102444800000; // 2100-01-01T00:00:00.000Z

package/dist/css/test.css

@@ -0,0 +1,3 @@
+.test {
+  border: solid 8px red;
+}

package/dist/css/utilities.postcss

@@ -0,0 +1,44 @@
+/**
+ * Common utility CSS classes
+ * 
+ * Using tailwind layers
+ * @see https://tailwindcss.com/docs/functions-and-directives 
+ */
+
+@layer utilities {
+  .g-no-select {
+    user-select: none;
+    -webkit-user-select: none; /* ios safari */
+  }
+
+  input[type=text].g-no-select, textarea.g-no-select
+  {
+    user-select: text !important;
+    cursor: text;
+  }
+
+  .g-no-double-tab-zoom {
+    /* tailwind touch-manipulation */
+    touch-action: manipulation;
+  }
+
+  .g-no-pinch-zoom
+  {
+    touch-action: pan-x pan-y; /* no pinch zoom, but allow scroll  */
+  }  
+
+  .g-no-highlights {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+}
+
+/* .g-grid-layers {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+
+  & > * {
+    grid-area: 1/1/2/2;
+  }
+} */

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,9 @@
+//
+// @note all exports are in subfolders
+//
+// @see package.json > exports
+//
+// @example
+// import { TimeStampSource } from '@hkdigital/lib-sveltekit-test/classes';
+//
+//

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,24 @@
+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;

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/util/expect/index.d.ts

@@ -0,0 +1,39 @@
+/** Reusable schema's */
+/** Exports */
+/**
+ * Throws a validation error if value is not a string
+ *
+ * @param {*} value
+ */
+export function string(value: any): void;
+/**
+ * Throws a validation error if value is not an array of strings
+ *
+ * @param {*} value
+ */
+export function stringArray(value: any): void;
+/**
+ * Throws a validation error if value is not an array of objects
+ *
+ * @param {*} value
+ */
+export function objectArray(value: any): void;
+/**
+ * Expect a value to be a boolean and true
+ *
+ * @param {*} value
+ */
+export function _true(value: any): void;
+/**
+ * Throws a validation error if value is not a string
+ *
+ * @param {*} value
+ */
+export function notEmptyString(value: any): void;
+/**
+ * Throws a validation error if value is not a function
+ *
+ * @param {*} value
+ */
+declare function _function(value: any): void;
+export { _function as function, _function as function, _function as class, _class as class, _true as true, _true as true };