@addev-be/ui 0.1.18

package/src/providers/UiProviders/index.tsx

@@ -0,0 +1,65 @@
+import '../../styles/index.scss';
+import '../../styles/animations.scss';
+
+import * as styles from './styles';
+
+import {
+  FC,
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+
+import { PortalsProvider } from '../PortalsProvider';
+import { SettingsProvider } from '../SettingsProvider';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { defaultTheme } from '../ThemeProvider/defaultTheme';
+
+export type UiProvidersProps = PropsWithChildren<{
+  $darkMode?: boolean;
+}>;
+
+export type UiContextType = {
+  rootRect: DOMRect;
+  getElementScreenRect: (element: HTMLElement) => DOMRect;
+};
+
+export const UiContext = createContext<UiContextType>({
+  rootRect: new DOMRect(),
+  getElementScreenRect: () => new DOMRect(),
+});
+
+export const UiProviders: FC<UiProvidersProps> = ({ $darkMode, children }) => {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  const getElementScreenRect = useCallback((element: HTMLElement) => {
+    const rootRect = rootRef.current?.getBoundingClientRect();
+    const rect = element.getBoundingClientRect();
+    rect.x -= (rootRect?.x ?? 0) + window.scrollX;
+    rect.y -= (rootRect?.y ?? 0) + window.scrollY;
+    return rect;
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      rootRect: rootRef.current?.getBoundingClientRect() ?? new DOMRect(),
+      getElementScreenRect,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rootRef.current]
+  );
+
+  return (
+    <ThemeProvider $theme={defaultTheme} $darkMode={$darkMode}>
+      <UiContext.Provider value={value}>
+        <styles.Root ref={rootRef}>
+          <SettingsProvider>
+            <PortalsProvider>{children}</PortalsProvider>
+          </SettingsProvider>
+        </styles.Root>
+      </UiContext.Provider>
+    </ThemeProvider>
+  );
+};

package/src/providers/UiProviders/styles.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const Root = styled.div.attrs({ className: 'Root' })`
+  position: relative;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  color: var(--color-neutral-900);
+  width: 100%;
+  height: 100%;
+`;

package/src/providers/hooks.ts

@@ -0,0 +1,8 @@
+import { PortalsContext } from './PortalsProvider';
+import { SettingsContext } from './SettingsProvider';
+import { UiContext } from './UiProviders';
+import { useContext } from 'react';
+
+export const usePortals = () => useContext(PortalsContext);
+export const useUi = () => useContext(UiContext);
+export const useSettings = () => useContext(SettingsContext);

package/src/providers/index.ts

@@ -0,0 +1,5 @@
+export * from './UiProviders';
+export * from './PortalsProvider';
+export * from './ThemeProvider';
+
+export * from './hooks';

package/src/services/WebSocketService.ts

@@ -0,0 +1,147 @@
+import { Config } from '../config';
+import { Request } from './base';
+import { v4 } from 'uuid';
+
+export class WebSocketService {
+  private static instance: WebSocketService;
+  private config: Config;
+  private socket: WebSocket | null = null;
+  public status: boolean | undefined = false;
+  private listeners: ((status: boolean | undefined) => void)[] = [];
+  private queue: Request[] = [];
+  private promises: {
+    [id: string]: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      resolve: (value: any) => void;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      reject: (reason?: any) => void;
+    };
+  } = {};
+
+  public onOpen?: () => void = () => {};
+  public onClose?: () => void = () => {};
+  public onMessage?: (message: string) => void = () => {};
+  public onError?: (error: unknown) => void = () => {};
+
+  constructor(config: Config) {
+    WebSocketService.instance = this;
+    this.config = config;
+  }
+
+  public static getInstance() {
+    return WebSocketService.instance;
+  }
+
+  private resetConnection() {
+    this.setStatus(undefined);
+    this.socket = new WebSocket(this.config.webSocketUrl);
+
+    this.socket.onopen = () => {
+      console.log('[WS] Connected');
+      const interval = setInterval(() => {
+        if (this.socket && this.socket.readyState === 1) {
+          clearInterval(interval);
+          this.setStatus(true);
+          this.onOpen?.();
+        }
+      }, 100);
+    };
+
+    this.socket.onclose = () => {
+      console.log('[WS] Disconnected');
+      setTimeout(() => this.connect(), this.status === true ? 500 : 5000);
+      this.onClose?.();
+      this.setStatus(false);
+    };
+
+    this.socket.onmessage = (event) => {
+      this.onMessage?.(event.data);
+      this.parseMessage(event.data);
+    };
+
+    this.socket.onerror = (error) => {
+      this.onError?.(error);
+      console.error('[WS] Error:', error);
+    };
+  }
+
+  public connect(force = false) {
+    if (this.status === false || force) {
+      this.resetConnection();
+    }
+  }
+
+  public subscribe(listener: (status: boolean | undefined) => void) {
+    this.listeners.push(listener);
+    listener(this.status);
+    return () => this.listeners.splice(this.listeners.indexOf(listener), 1);
+  }
+
+  public unsubscribe(listener: (status: boolean | undefined) => void) {
+    this.listeners.splice(this.listeners.indexOf(listener), 1);
+  }
+
+  private setStatus(status: boolean | undefined) {
+    const previousStatus = this.status;
+    this.status = status;
+    this.listeners.forEach((listener) => listener(status));
+    if (this.socket && !previousStatus && status) {
+      this.sendQueue();
+    }
+  }
+
+  private sendQueue() {
+    if (this.socket && this.status) {
+      let request: Request | undefined;
+      while ((request = this.queue.shift())) {
+        console.log('[WS] Sending queued request:', request);
+        this.socket?.send(JSON.stringify(request));
+      }
+      this.queue.forEach((request) =>
+        this.socket?.send(JSON.stringify(request))
+      );
+    }
+  }
+
+  public sendRequest<TReq, TRes>(name: string, data: TReq) {
+    const id = v4();
+    const promise = new Promise<TRes>((resolve, reject) => {
+      const request: Request = { id, name, data };
+      this.promises[id] = { resolve, reject };
+      if (!this.socket || !this.status) {
+        this.queue.push(request);
+        return;
+      }
+      console.log('[WS] Sending request:', request);
+      this.socket?.send(JSON.stringify(request));
+    });
+    return promise;
+  }
+
+  private parseMessage(message: string) {
+    try {
+      const response = JSON.parse(message);
+      if (!response.id) {
+        throw new Error('Received message is not valid');
+      }
+      if (this.promises[response.id]) {
+        console.log('[WS] Received response:', response);
+        if (
+          typeof response.data?.status === 'number' &&
+          response.data.status < 0
+        ) {
+          this.promises[response.id].reject(new Error(response.data.message));
+        } else {
+          this.promises[response.id].resolve(response.data);
+        }
+        delete this.promises[response.id];
+      } else {
+        console.log('[WS] Received request:', response);
+        // TODO : Implement request handling
+        throw new Error('Not yet implemented');
+      }
+    } catch (error) {
+      console.error('[WS] Error parsing message:', error);
+    }
+  }
+}

package/src/services/advancedRequests.ts

@@ -0,0 +1,100 @@
+import { useRequestHandler } from './hooks';
+
+export type FieldDTO<T extends string = string> = {
+  fieldName?: T;
+  fieldAlias?: string;
+  operator?:
+    | 'add'
+    | 'concat'
+    | 'divide'
+    | 'groupConcat'
+    | 'if'
+    | 'ifNull'
+    | 'jsonObject'
+    | 'length'
+    | 'modulo'
+    | 'multiply'
+    | 'subtract'
+    | 'sum'
+    | 'trim';
+  operands?: FieldDTO[];
+  constantValue?: string | number | boolean | null;
+  groupBy?: boolean;
+};
+
+export type ConditionDTO = {
+  field: FieldDTO;
+  operator:
+    | 'lessThan'
+    | 'lessThanOrEqual'
+    | 'lessThanOrEquals'
+    | 'equals'
+    | 'notEquals'
+    | 'greaterThanOrEqual'
+    | 'greaterThanOrEquals'
+    | 'greaterThan'
+    | 'like'
+    | 'contains'
+    | 'startsWith'
+    | 'endsWith'
+    | 'notLike'
+    | 'inRange'
+    | 'between'
+    | 'isNull'
+    | 'inArray'
+    | 'in'
+    | 'not'
+    | 'and'
+    | 'or';
+  value?:
+    | string
+    | number
+    | boolean
+    | null
+    | (string | number | boolean | null)[];
+  children?: boolean;
+};
+
+export type OrderByDTO = {
+  field: FieldDTO;
+  direction?: 'ASC' | 'DESC';
+};
+
+export type AdvancedRequestDTO = {
+  type: string;
+  fields: FieldDTO[];
+  conditions: ConditionDTO[];
+  orderBy?: OrderByDTO[];
+  start?: number;
+  length?: number;
+  getTotal?: boolean;
+  unique?: boolean;
+};
+
+export type AdvancedRequestRow<R> = {
+  [K in keyof R]: R[K] extends string | number | null
+    ? R[K]
+    : string | number | null;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AdvancedResponseDTO<T = any> = {
+  data: AdvancedRequestRow<T>[];
+  total?: number;
+};
+
+export type AdvancedRequestFieldDTO =
+  | string
+  | {
+      name: string;
+      fields: AdvancedRequestFieldDTO[];
+    };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useAdvancedRequestHandler = <T = any>() =>
+  useRequestHandler<AdvancedRequestDTO, AdvancedResponseDTO<T>>(
+    'AdvancedRequest'
+  );
+
+export const useRawAdvancedRequestHandler = () =>
+  useRequestHandler<AdvancedRequestDTO, string>('RawAdvancedRequest');

package/src/services/base.ts

@@ -0,0 +1,31 @@
+export type BaseModelDTO = {
+  id: string;
+  dateAdd: string;
+  dateUpd: string;
+  dateDel: string | null;
+};
+
+export const emptyBaseModel: BaseModelDTO = {
+  id: '',
+  dateAdd: new Date().toISOString(),
+  dateUpd: new Date().toISOString(),
+  dateDel: null,
+};
+
+export type ArchivableModelDTO = BaseModelDTO & {
+  archived: boolean | null;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Request<T = any> = {
+  id: string;
+  name: string;
+  data: T;
+};
+
+export const UUID_REGEX =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+export type GetObjectRequestDTO = {
+  id: string;
+};

package/src/services/hooks.ts

@@ -0,0 +1,13 @@
+import { WebSocketService } from './WebSocketService';
+import { useCallback } from 'react';
+
+export const useRequestHandler = <TReq, TRes>(
+  name: string
+): ((data: TReq) => Promise<TRes>) => {
+  return useCallback(
+    (data: TReq) => {
+      return WebSocketService.getInstance().sendRequest<TReq, TRes>(name, data);
+    },
+    [name]
+  );
+};

package/src/services/index.ts

@@ -0,0 +1,2 @@
+export * from './WebSocketService';
+export * from './hooks';

package/src/styles/animations.scss

@@ -0,0 +1,30 @@
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.25;
+  }
+}
+
+@keyframes spin {
+
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,42 @@
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url('../../assets/fonts/montserrat-200.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../../assets/fonts/montserrat-500.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../../assets/fonts/montserrat-700.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Basic fixes */
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}

package/src/typings.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
+
+export type DeepPartial<T> = {
+  [P in keyof T]?: DeepPartial<T[P]>;
+};

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "lib": ["dom", "es2015", "es2017", "es2019"],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx",
+    "types": ["vite/client", "vite-plugin-svgr/client"]
+  },
+  "include": ["src"]
+}