proteum 1.0.0-1

package/client/services/socket/index.ts

@@ -0,0 +1,147 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+import type { ClientContext } from '../../context';
+
+import type { TDialogControls } from '@client/components/Dialog/Manager';
+
+/*----------------------------------
+- TYPE
+----------------------------------*/
+
+type TEventsList = {[name: string]: TEventCallback[]};
+
+type TEventCallback = (data: any) => void
+
+let netwokrStatusToast: TDialogControls;
+
+/*----------------------------------
+- SERVICE
+----------------------------------*/
+class SocketScope {
+
+    public ws?: WebSocket;
+    public events: TEventsList = {}
+
+    public constructor( 
+        public path: string, 
+        public context: ClientContext, 
+        events: {[name: string]: TEventCallback} = {} 
+    ) {
+        this.connect();
+
+        for (const event in events)
+            this.events[event] = [events[event]];
+    }
+    
+    private connect() {
+        
+        const protocol = window.location.protocol === 'http:' ? 'ws:' : 'wss:';
+        const url = protocol + '//' + this.context.request.host + this.path;
+
+        try {
+            this.ws = new WebSocket(url);
+        } catch (error) {
+            console.warn(`[socket] Connection failed for ${url}`, error);
+            return;
+        }
+
+        this.ws.onopen = () => {
+            console.log(`[socket] Connected to the live data provider:`, url);
+
+            if (netwokrStatusToast) {
+                netwokrStatusToast.close(true);
+                this.context.toast.success("Your connection has been restored", null, null, {
+                    autohide: 3
+                });
+            }
+        }
+
+        this.ws.onmessage = (event: MessageEvent<any>) => {
+
+            const [name, rawData] = event.data.split('>');
+            if (this.events[name] === undefined) {
+                console.warn("Unknown command: " + name + `. Raw command:`, event.data);
+                return;
+            }
+
+            let data;
+            try {
+                data = JSON.parse(rawData);
+            } catch (error) {
+                console.warn(`[socket] Error decoding data`, rawData, error);
+                return;
+            }
+
+            for (const callback of this.events[name])
+                callback(data);
+
+        }
+
+        this.ws.onerror = (event) => {
+            console.log(`[socket] Network error for ${url}`, event);
+            this.close();
+        }
+
+        this.ws.onclose = (event) => {
+
+            // Fermeture volontaire = on ne retente pas de se connecter
+            if (event.wasClean) {
+                console.log(`[socket] Disconnected from ${url}. Reason: `, event.reason);
+                return;
+            }
+
+            if (!netwokrStatusToast)
+                netwokrStatusToast = this.context.toast.error("You're offline", "Please check your connection", null, {
+                    autohide: false, 
+                    prison: true
+                });
+            console.log(`[socket] Disconnected from ${url}. Retry in 5 seconds ...`, event);
+            setTimeout(() => this.connect(), 5000);
+        }
+
+    }
+
+    public close() {
+        if (this.ws)
+            this.ws.close();
+    }
+
+    public on(event: string, callback: TEventCallback) {
+
+        if (this.events[event] === undefined)
+            this.events[event] = [callback]
+        else
+            this.events[event].push(callback)
+
+        return this;
+    }
+
+    public off(event: string) {
+
+        delete this.events[event];
+
+        return this;
+    }
+
+}
+
+export default class SocketClient {
+
+    public scopes: { [name: string]: SocketScope } = {}
+
+    public constructor( public context: ClientContext ) {
+
+        
+    }
+
+    public open(path: string, commands: {[name: string]: TEventCallback} = {}) {
+
+        if (!(path in this.scopes))
+            this.scopes[path] = new SocketScope(path, this.context, commands);
+
+        return this.scopes[path]
+    }
+
+}

package/client/utils/dom.ts

@@ -0,0 +1,77 @@
+import type { RefObject } from 'preact';
+import { history } from '@client/services/router/request/history';
+
+type ElementOrSelector = HTMLElement | string;
+export const deepContains = (
+    parents: ElementOrSelector | ElementOrSelector[],
+    children: HTMLElement
+): boolean => {
+
+    if (!Array.isArray(parents))
+        parents = [parents];
+
+    let node: HTMLElement | null = children;
+    while (node) {
+        for (const parent of parents) {
+            //console.log('Checking if', parent, 'matches with', node);
+            if (
+                // HTML Element
+                node === parent 
+                || 
+                // CSS Selector
+                (typeof parent === 'string' && node.matches && node.matches(parent))
+            )
+                return true;
+        }
+
+        node = node.parentNode as HTMLElement | null;
+    }
+
+    return false;
+}
+
+// Usage: React.useEffect( blurable([ <element>, <function> ]) );
+export const blurable = (...args: [HTMLElement, Function][]) => {
+
+    if (!history)
+        return;
+
+    const blur = (e: MouseEvent) => {
+
+        if (e.target === null)
+            return;
+
+        for (const [refElement, masquer] of args) {
+
+            //console.log("refElement", refElement, e.target?.matches);
+
+            if (!deepContains([refElement], e.target))
+                masquer();
+                
+        }
+    }
+
+    window.addEventListener('mousedown', blur);
+
+    const unlisten = history.listen(() => {
+        for (const [, masquer] of args) {
+
+            masquer();
+
+        }
+    })
+
+    return () => {
+        window.removeEventListener('mousedown', blur);
+        unlisten();
+    }
+}
+
+export const focusContent = ( container: HTMLElement ) => {
+
+    const toFocus = container.querySelector<HTMLInputElement | HTMLTextAreaElement | HTMLButtonElement>(
+        'input, textarea, button.btn.primary, footer > button.btn'
+    ) || container;  // Is it useful ? Creating unwanted scroll issue on showing popover
+
+    toFocus?.focus();
+}

package/common/app/index.ts

@@ -0,0 +1,9 @@
+import type ClientApplication from '@client/app';
+import type ServerApplication from '@server/app';
+
+export type ClientOrServerApplication = ClientApplication | ServerApplication;
+
+export type TAppArrowFunction<
+    TRegisteredData = void,
+    TApplication extends ClientOrServerApplication = ClientOrServerApplication
+> = (app: TApplication) => TRegisteredData

package/common/data/chaines/index.ts

@@ -0,0 +1,54 @@
+/*----------------------------------
+- TRANSFORM
+----------------------------------*/
+
+/**
+ * Normalize a string into an ID
+ * @param name The string to normalize
+ * @returns A ID string
+ */
+export const nameToID = (name: string) => name.toLowerCase().replace(/[^a-z1-9]/gi, '');
+
+export const ucfirst = (chaine: string): string => {
+    return chaine.charAt(0).toUpperCase() + chaine.slice(1);
+} 
+
+export const linkify = (texte: string): string => {
+    const regex = /((http|https)\:\/\/([a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?))/gi;
+    return texte.replace(regex, '<a href="$1" target="_blank">$3</a>');
+}
+
+export const trim = (s: string, c: string) => {
+    if (c === "]") c = "\\]";
+    if (c === "\\") c = "\\\\";
+    return s.replace(new RegExp(
+        "^[" + c + "]+|[" + c + "]+$", "g"
+    ), "");
+}  
+
+export const trimLeft = (chaine: string, toTrim: string) => chaine.startsWith(toTrim)
+    ? chaine.substring(toTrim.length) : chaine;
+
+export const trimRight = (chaine: string, toTrim: string) => chaine.endsWith(toTrim)
+    ? chaine.substring(0, -toTrim.length) : chaine;
+
+export const escapeRegExp = (string: string) =>
+    string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+
+/*----------------------------------
+- EXTRACT
+----------------------------------*/
+export const getKeywords = (str: string, delimiter: string = ' ') => str
+
+    // Minuscule
+    .toLowerCase()
+
+    // condenseWhitespace ( https://github.com/sindresorhus/condense-whitespace/blob/main/index.js )
+    .trim().replace(/\s{2,}/gu, ' ')
+
+    // Ne garde que les caractères alĥanumériques, ainsi que .
+    // https://stackoverflow.com/questions/20690499/concrete-javascript-regex-for-accented-characters-diacritics
+    .replace(/[^\.0-9A-Za-zÀ-ÖØ-öø-ÿ]/ig, ' ')
+
+// TODO: remove stopwords: https://github.com/fergiemcdowall/stopword
+export const getSlug = (str: string) => getKeywords(str, '-')

package/common/data/dates.ts

@@ -0,0 +1,179 @@
+import dayjs from 'dayjs';
+/*
+// Function to calculate the difference in the specified unit
+function dateDiffInUnits(date1, date2) {
+  const msPerSecond = 1000;
+  const msPerMinute = msPerSecond * 60;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerMonth = msPerDay * 30; // Approximation
+  const msPerYear = msPerDay * 365; // Approximation
+
+  const diffInMs = date2 - date1;
+  
+  return {
+    years: diffInMs / msPerYear,
+    months: diffInMs / msPerMonth,
+    days: diffInMs / msPerDay,
+    hours: diffInMs / msPerHour,
+    minutes: diffInMs / msPerMinute,
+    seconds: diffInMs / msPerSecond,
+  };
+}
+
+// Function to determine the best unit based on the differences
+function chooseBestUnit(diffs) {
+  if (Math.abs(diffs.years) >= 1) return 'year';
+  if (Math.abs(diffs.months) >= 1) return 'month';
+  if (Math.abs(diffs.days) >= 1) return 'day';
+  if (Math.abs(diffs.hours) >= 1) return 'hour';
+  if (Math.abs(diffs.minutes) >= 1) return 'minute';
+  return 'second';
+}
+
+// Function to format the relative time between two dates
+function formatRelativeTime(date1, date2, locale = 'en') {
+  const diffs = dateDiffInUnits(date1, date2);
+  const bestUnit = chooseBestUnit(diffs);
+  const diff = diffs[bestUnit];
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+  return rtf.format(Math.round(diff), bestUnit);
+}
+
+// Example dates
+const date1 = new Date('2023-07-01');
+const date2 = new Date('2024-07-13');
+
+// Format the relative time automatically choosing the best unit
+console.log(formatRelativeTime(date1, date2)); // Output: "in 1 year"
+
+*/
+
+export type TDateInfo = {
+    isPast: boolean,
+    delta: number,
+    text: string
+}
+
+export const timeSince = (date: Date | number | string): TDateInfo | null => {
+
+    if (date === undefined)
+        return null;
+
+    // Timeago ne prend que des dates et des timestamp
+    if (typeof date === 'string') {
+        date = Date.parse(date);
+        if (isNaN(date))
+            return null;
+    }
+
+    // Get metas
+    const now = Date.now()
+    const timestamp = date instanceof Date ? date.getTime() : date;
+    const deltaSeconds = Math.abs( Math.round( (now - timestamp) / 1000 ));
+    const isPast = now > timestamp;
+
+    return {
+        text: date,//timeAgo.format(date),
+        isPast,
+        delta: deltaSeconds
+    };
+}
+
+export const tempsRelatif = (time: number, nbChiffresInit?: number) => {
+
+    const nbChiffres = nbChiffresInit === undefined ? 2 : nbChiffresInit;
+
+    const jours = Math.floor(time / (60 * 60 * 24));
+
+    if (jours >= 1) {
+
+        return jours + (jours === 1 ? ' day' : ' days')
+
+    } else {
+
+        const heures = Math.floor((time % (60 * 60 * 24)) / (60 * 60));
+        const minutes = Math.floor((time % (60 * 60)) / (60));
+        const secondes = Math.floor(time % (60));
+
+        return [heures, minutes, secondes].filter(
+            (nb: number | false, i: number) => nb > 0 || 4 - i <= nbChiffres
+        ).map(
+            (nb: number) => nb < 10 ? '0' + nb : nb
+        ).join(':');
+    }
+}
+
+export const chaineDate = (chaine: string): boolean => {
+    // 2019-09-09T11:28:21.778Z
+    const regexDate = /[0-9]{4}\-[0-9]{2}\-[0-9]{2}T[0-9]{2}\:[0-9]{2}\:[0-9]{2}\.[0-9]{3}Z/;
+    return regexDate.test( chaine );
+}
+
+
+
+
+
+// Based on https://github.com/sebastiansandqvist/s-ago/blob/master/index.ts
+type TUnit = {
+    max: number,
+    divisor?: number,
+    past: string,
+    future: string
+}
+
+const units: {[name: string]: TUnit} = {
+    seconds: { max: 60000, past: 'just now', future: 'now' },
+    minute: { max: 2760000, divisor: 60000, past: 'a minute ago', future: 'in a minute' }, // max: 46 minutes
+    hour: { max: 72000000, divisor: 3600000, past: 'an hour ago', future: 'in an hour' }, // max: 20 hours
+    day: { max: 518400000, divisor: 86400000, past: 'yesterday', future: 'tomorrow' }, // max: 6 days
+    week: { max: 2419200000, divisor: 604800000, past: 'last week', future: 'in a week' }, // max: 28 days
+    month: { max: 28512000000, divisor: 2592000000, past: 'last month', future: 'in a month' }, // max: 11 months
+    year: { max: Infinity, divisor: 31536000000, past: 'last year', future: 'in a year' },
+};
+
+export function ago(date: Date | string, { min, max }: { min?: string, max?: string } = {}): string {
+
+    if (!date)
+        return '-';
+
+    if (typeof date === 'string')
+        date = new Date(date);
+
+    const minUnit = min ? units[min].max : 0;
+    const diff = Date.now() - date.getTime();
+    const delta = Math.abs(diff);
+
+    let unitName!: string;
+    let unit!: TUnit;
+    for (unitName in units) {
+        unit = units[unitName];
+        if (unit.max >= minUnit && (delta < unit.max || unitName === max))
+            break;
+    }
+
+    if (unit.divisor === undefined)
+        return diff < 0 ? unit.future : unit.past;
+
+    var val = Math.round(delta / unit.divisor);
+    if (diff < 0) 
+        return val <= 1 ? unit.future : 'in ' + val + ' ' + unitName + 's';
+    else
+        return val <= 1 ? unit.past : val + ' ' + unitName + 's ago';
+
+};
+
+export const daysAgo = (date: string) => {
+
+    const days = dayjs().diff(date, 'days')
+
+    if (days === 0)
+        return 'Today';
+    else if (days === 1)
+        return 'Yesterday';
+    else if (days <= 7)
+        return days + ' days ago'
+    else 
+        return dayjs(date).format('DD/MM');
+
+}

package/common/data/markdown.ts

@@ -0,0 +1,73 @@
+import markdownIt from 'markdown-it';
+const md = markdownIt({
+    html: false,                // Enable HTML tags in source
+    xhtmlOut: false,            // Use '/' to close single tags (<br />). This is only for full CommonMark compatibility.
+    breaks: true,              // Convert '\n' in paragraphs into <br>
+    langPrefix: 'language-',    // CSS language prefix for fenced blocks. Can be useful for external highlighters.
+    linkify: false,             // Autoconvert URL-like text to links
+});
+
+const rules = md.renderer.rules;
+
+// ------------------------
+
+var link_open_default = rules.link_open || function (tokens, idx, options, env, self) {
+    return self.renderToken(tokens, idx, options);
+};
+
+// Target = _blank
+rules.link_open = function (tokens, idx, options, env, self) {
+
+    const aIndex = tokens[idx].attrIndex('target');
+    if (aIndex < 0) {
+        tokens[idx].attrPush(['target', '_blank']);
+    } else {
+        tokens[idx].attrs[ aIndex ][1] = '_blank';
+    }
+
+    return link_open_default(tokens, idx, options, env, self);
+};
+
+// ------------------------
+
+var image_default = rules.image || function (tokens, idx, options, env, self) {
+    return self.renderToken(tokens, idx, options);
+};
+
+// img => figure
+rules.image = function (tokens, idx, options, env, self) {
+
+    const rendu = image_default(tokens, idx, options, env, self);
+
+    return `<figure>${rendu}</figure>`
+};
+
+// ------------------------
+
+md.block.ruler.after('list', 'test', (state, startLine, endLine, silent) => {
+    
+    for (const token of state.tokens) {
+        if (token.type === 'bullet_list_open') {
+
+            const aIndex = token.attrIndex('class');
+            if (aIndex < 0) {
+                token.attrPush(['class', 'liste']); // add new attribute
+            } else {
+                token.attrs[ aIndex ][1] = 'liste';    // replace value of existing attr
+            }
+
+        } else if (token.type === 'ordered_list_open') {
+            
+            const aIndex = token.attrIndex('class');
+            if (aIndex < 0) {
+                token.attrPush(['class', 'steps']); // add new attribute
+            } else {
+                token.attrs[ aIndex ][1] = 'steps';    // replace value of existing attr
+            }
+
+        }
+    }
+
+}, { alt: ['paragraph', 'reference', 'blockquote'] })
+
+export default md;

package/common/data/rte/nodes.ts

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { Klass, LexicalNode } from 'lexical';
+
+import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { HashtagNode } from '@lexical/hashtag';
+import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { MarkNode } from '@lexical/mark';
+import { OverflowNode } from '@lexical/overflow';
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
+
+import { CollapsibleContainerNode } from '@client/components/Rte/plugins/CollapsiblePlugin/CollapsibleContainerNode';
+import { CollapsibleContentNode } from '@client/components/Rte/plugins/CollapsiblePlugin/CollapsibleContentNode';
+import { CollapsibleTitleNode } from '@client/components/Rte/plugins/CollapsiblePlugin/CollapsibleTitleNode';
+import { AutocompleteNode } from '@client/components/Rte/nodes/AutocompleteNode';
+import { EmojiNode } from '@client/components/Rte/nodes/EmojiNode';
+import { ImageNode } from '@client/components/Rte/nodes/ImageNode';
+import { InlineImageNode } from '@client/components/Rte/nodes/InlineImageNode/InlineImageNode';
+import { KeywordNode } from '@client/components/Rte/nodes/KeywordNode';
+import { LayoutContainerNode } from '@client/components/Rte/nodes/LayoutContainerNode';
+import { LayoutItemNode } from '@client/components/Rte/nodes/LayoutItemNode';
+import { MentionNode } from '@client/components/Rte/nodes/MentionNode';
+import { PageBreakNode } from '@client/components/Rte/nodes/PageBreakNode';
+import { PollNode } from '@client/components/Rte/nodes/PollNode';
+import { StickyNode } from '@client/components/Rte/nodes/StickyNode';
+import { TweetNode } from '@client/components/Rte/nodes/TweetNode';
+import { YouTubeNode } from '@client/components/Rte/nodes/YouTubeNode';
+
+import HeadingWithAnchorNode from '@client/components/Rte/nodes/HeadingNode';
+import ReferenceLinkNode from '@client/components/Rte/nodes/ReferenceLinkNode';
+
+const PlaygroundNodes: Array<Klass<LexicalNode>> = [
+    /*HeadingNode, */HeadingWithAnchorNode,
+    {
+        replace: HeadingNode,
+        with: (node) => {
+            return new HeadingWithAnchorNode( node.getTag() );
+        }
+    },
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    HashtagNode,
+    CodeHighlightNode,
+    AutoLinkNode,
+    LinkNode,
+    OverflowNode,
+    PollNode,
+    StickyNode,
+    ImageNode, InlineImageNode,
+    MentionNode,
+    EmojiNode,
+    AutocompleteNode,
+    KeywordNode,
+    HorizontalRuleNode,
+    TweetNode,
+    YouTubeNode,
+    MarkNode,
+    CollapsibleContainerNode,
+    CollapsibleContentNode,
+    CollapsibleTitleNode,
+    PageBreakNode,
+    LayoutContainerNode,
+    LayoutItemNode,
+
+    // Custom
+    ReferenceLinkNode
+];
+
+export default PlaygroundNodes;