@hkdigital/lib-core 0.3.1

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/state-labels/drag-states.d.ts

@@ -0,0 +1,5 @@
+export const IDLE: "idle";
+export const DRAGGING: "dragging";
+export const DRAG_PREVIEW: "drag-preview";
+export const DROPPING: "dropping";
+export const DRAG_DISABLED: "drag-disabled";

package/dist/constants/state-labels/drag-states.js

@@ -0,0 +1,6 @@
+// Draggable states
+export const IDLE = 'idle';                     // Not being dragged
+export const DRAGGING = 'dragging';             // Currently being dragged
+export const DRAG_PREVIEW = 'drag-preview';     // Mouse down, before drag
+export const DROPPING = 'dropping';             // Just dropped, animating
+export const DRAG_DISABLED = 'drag-disabled';   // Dragging not allowed

package/dist/constants/state-labels/drop-states.d.ts

@@ -0,0 +1,4 @@
+export const READY: "ready";
+export const DRAG_OVER: "drag-over";
+export const CAN_DROP: "can-drop";
+export const CANNOT_DROP: "cannot-drop";

package/dist/constants/state-labels/drop-states.js

@@ -0,0 +1,6 @@
+export const READY = 'ready';                   // Waiting for drag
+export const DRAG_OVER = 'drag-over';           // Item dragged over zone
+export const CAN_DROP = 'can-drop';             // Valid drop target
+export const CANNOT_DROP = 'cannot-drop';       // Invalid drop target
+// export const DROP_DISABLED = 'drop-disabled';   // Dropping not allowed
+// export const ACTIVE_DROP = 'active-drop';       // Currently processing drop

package/dist/constants/state-labels/input-states.d.ts

@@ -0,0 +1,8 @@
+export const PRISTINE: "pristine";
+export const DIRTY: "dirty";
+export const FOCUSED: "focused";
+export const UNFOCUSED: "unfocused";
+export const VALID: "valid";
+export const INVALID: "invalid";
+export const REQUIRED: "required";
+export const DISABLED: "disabled";

package/dist/constants/state-labels/input-states.js

@@ -0,0 +1,11 @@
+export const PRISTINE = 'pristine';
+export const DIRTY = 'dirty';
+
+export const FOCUSED = 'focused';
+export const UNFOCUSED = 'unfocused';
+
+export const VALID = 'valid';
+export const INVALID = 'invalid';
+
+export const REQUIRED = 'required';
+export const DISABLED = 'disabled';

package/dist/constants/state-labels/submit-states.d.ts

@@ -0,0 +1,4 @@
+export const IDLE: "idle";
+export const SUBMITTING: "submitting";
+export const SUBMIT_OK: "submit-ok";
+export const SUBMIT_FAILED: "submit-failed";

package/dist/constants/state-labels/submit-states.js

@@ -0,0 +1,4 @@
+export const IDLE = 'idle';
+export const SUBMITTING = 'submitting';
+export const SUBMIT_OK = 'submit-ok';
+export const SUBMIT_FAILED = 'submit-failed';

package/dist/constants/time.d.ts

@@ -0,0 +1,18 @@
+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_2025_01_01: 1577836800000;

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_2025_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/utilities.css

@@ -0,0 +1,43 @@
+/**
+ * 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 */
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  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/design/design-config.d.ts

@@ -0,0 +1,157 @@
+export namespace DESIGN {
+    let width: number;
+    let height: number;
+}
+export namespace CLAMPING {
+    namespace ui {
+        let min: number;
+        let max: number;
+    }
+    namespace textBase {
+        let min_1: number;
+        export { min_1 as min };
+        let max_1: number;
+        export { max_1 as max };
+    }
+    namespace textHeading {
+        let min_2: number;
+        export { min_2 as min };
+        let max_2: number;
+        export { max_2 as max };
+    }
+    namespace textUi {
+        let min_3: number;
+        export { min_3 as min };
+        let max_3: number;
+        export { max_3 as max };
+    }
+}
+export const TEXT_POINT_SIZES: number[];
+export const VIEWPORT_POINT_SIZES: number[];
+export namespace TEXT_BASE_SIZES {
+    namespace sm {
+        let size: number;
+        let lineHeight: number;
+    }
+    namespace md {
+        let size_1: number;
+        export { size_1 as size };
+        let lineHeight_1: number;
+        export { lineHeight_1 as lineHeight };
+    }
+    namespace lg {
+        let size_2: number;
+        export { size_2 as size };
+        let lineHeight_2: number;
+        export { lineHeight_2 as lineHeight };
+    }
+}
+export namespace TEXT_HEADING_SIZES {
+    namespace h1 {
+        let size_3: number;
+        export { size_3 as size };
+        let lineHeight_3: number;
+        export { lineHeight_3 as lineHeight };
+    }
+    namespace h2 {
+        let size_4: number;
+        export { size_4 as size };
+        let lineHeight_4: number;
+        export { lineHeight_4 as lineHeight };
+    }
+    namespace h3 {
+        let size_5: number;
+        export { size_5 as size };
+        let lineHeight_5: number;
+        export { lineHeight_5 as lineHeight };
+    }
+    namespace h4 {
+        let size_6: number;
+        export { size_6 as size };
+        let lineHeight_6: number;
+        export { lineHeight_6 as lineHeight };
+    }
+    namespace h5 {
+        let size_7: number;
+        export { size_7 as size };
+        let lineHeight_7: number;
+        export { lineHeight_7 as lineHeight };
+    }
+}
+export namespace TEXT_UI_SIZES {
+    export namespace sm_1 {
+        let size_8: number;
+        export { size_8 as size };
+        let lineHeight_8: number;
+        export { lineHeight_8 as lineHeight };
+    }
+    export { sm_1 as sm };
+    export namespace md_1 {
+        let size_9: number;
+        export { size_9 as size };
+        let lineHeight_9: number;
+        export { lineHeight_9 as lineHeight };
+    }
+    export { md_1 as md };
+    export namespace lg_1 {
+        let size_10: number;
+        export { size_10 as size };
+        let lineHeight_10: number;
+        export { lineHeight_10 as lineHeight };
+    }
+    export { lg_1 as lg };
+}
+export namespace RADIUS_SIZES {
+    export let none: string;
+    export namespace xs {
+        let size_11: number;
+        export { size_11 as size };
+    }
+    export namespace sm_2 {
+        let size_12: number;
+        export { size_12 as size };
+    }
+    export { sm_2 as sm };
+    export namespace md_2 {
+        let size_13: number;
+        export { size_13 as size };
+    }
+    export { md_2 as md };
+    export namespace lg_2 {
+        let size_14: number;
+        export { size_14 as size };
+    }
+    export { lg_2 as lg };
+    export let full: string;
+}
+export namespace BORDER_WIDTH_SIZES {
+    namespace thin {
+        let size_15: number;
+        export { size_15 as size };
+    }
+    namespace normal {
+        let size_16: number;
+        export { size_16 as size };
+    }
+    namespace thick {
+        let size_17: number;
+        export { size_17 as size };
+    }
+}
+export namespace STROKE_WIDTH_SIZES {
+    export namespace thin_1 {
+        let size_18: number;
+        export { size_18 as size };
+    }
+    export { thin_1 as thin };
+    export namespace normal_1 {
+        let size_19: number;
+        export { size_19 as size };
+    }
+    export { normal_1 as normal };
+    export namespace thick_1 {
+        let size_20: number;
+        export { size_20 as size };
+    }
+    export { thick_1 as thick };
+}

package/dist/design/design-config.js

@@ -0,0 +1,73 @@
+/* == Design dimensions == */
+
+export const DESIGN = {
+  width: 1024,
+  height: 768
+};
+
+/* == Scaling-clamping behaviour == */
+
+export const CLAMPING = {
+  ui: { min: 0.3, max: 2 },
+  textBase: { min: 0.75, max: 1.5 },
+  textHeading: { min: 0.75, max: 2.25 },
+  textUi: { min: 0.5, max: 1.25 }
+};
+
+/* == Text == */
+
+export const TEXT_POINT_SIZES = [
+  1, 2, 4, 6, 8, 10, 11, 12, 16, 20, 24, 28, 32, 36, 50
+];
+
+export const VIEWPORT_POINT_SIZES = [
+  1, 2, 4, 5, 6, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 120, 140, 160, 180,
+  200
+];
+
+export const TEXT_BASE_SIZES = {
+  sm: { size: 14, lineHeight: 1.25 },
+  md: { size: 16, lineHeight: 1.25 },
+  lg: { size: 18, lineHeight: 1.25 }
+};
+
+export const TEXT_HEADING_SIZES = {
+  h1: { size: 32, lineHeight: 1.25 },
+  h2: { size: 28, lineHeight: 1.25 },
+  h3: { size: 24, lineHeight: 1.25 },
+  h4: { size: 20, lineHeight: 1.25 },
+  h5: { size: 16, lineHeight: 1.25 }
+};
+
+export const TEXT_UI_SIZES = {
+  sm: { size: 14, lineHeight: 1 },
+  md: { size: 16, lineHeight: 1 },
+  lg: { size: 18, lineHeight: 1 }
+};
+
+/* == Border radius == */
+
+export const RADIUS_SIZES = {
+  none: '0px',
+  xs: { size: 5 },
+  sm: { size: 10 },
+  md: { size: 25 },
+  lg: { size: 35 },
+  full: '9999px'
+};
+
+/* == Border width == */
+
+export const BORDER_WIDTH_SIZES = {
+  thin: { size: 1 },
+  normal: { size: 2 },
+  thick: { size: 4 }
+};
+
+/* == Stroke width == */
+
+export const STROKE_WIDTH_SIZES = {
+  thin: { size: 1 },
+  normal: { size: 2 },
+  thick: { size: 4 }
+};

package/dist/design/tailwind-theme-extend.d.ts

@@ -0,0 +1,23 @@
+export const spacing: {
+    [x: string]: string;
+};
+export const fontSize: {
+    [x: string]: string | [string, {
+        lineHeight: number;
+    }];
+};
+export const borderRadius: {
+    [x: string]: string;
+};
+export const borderWidth: {
+    [key: string]: string;
+};
+export const strokeWidth: {
+    [key: string]: string;
+};
+export const outlineWidth: {
+    [key: string]: string;
+};
+export const outlineOffset: {
+    [key: string]: string;
+};