@peassoft/mnr-web-topline 0.1.0

package/README.md

@@ -0,0 +1,44 @@
+# @peassoft/mnr-web-topline
+
+Topline widget for mem'n'rev web applications.
+
+## Usage Example
+
+```jsx
+import { useCallback } from 'react';
+import WebTopline, {
+  ToplineService,
+  ToplineUser,
+} from '@peassoft/mnr-web-topline';
+
+export default function Topline(): JSX.Element {
+  const handleReady = useCallback(
+    async(toplineService: ToplineService, toplineUser: ToplineUser | null) => {
+      toplineService
+        .on('userChange', user => {
+          //
+        })
+        .on('logout', () => {
+          //
+        })
+        .on('syncNotification', syncId => {
+          //
+        });
+
+      // Use toplineService and toplineUser somehow else
+    },
+    [],
+  );
+
+  return (
+    <WebTopline
+      onReady={handleReady}
+      onError={(err: Error) => {/* Handle the error */}}
+    />
+  );
+}
+```
+
+## API Reference
+
+Refer to the file `index.d.ts`.

package/dist/css/index.css

@@ -0,0 +1,192 @@
+.topline_root {
+  --color-palette-brightest: #f9f7f7;
+  --color-palette-bright: #dbe2ef;
+  --color-palette-dark: #3f72af;
+  --color-palette-darkest: #112d4e;
+  --color-background-main: #fff;
+  --color-text-main: #242629;
+  --color-border: var(--color-palette-dark);
+  --color-menu-bkg: var(--color-palette-brightest);
+  --color-menu-text: var(--color-palette-darkest);
+  --color-modal-overlay: rgba(0, 0, 0, 0.7);
+  --color-modal-heading-fg: var(--color-palette-darkest);
+}
+.topline_root {
+  box-sizing: border-box;
+  background-color: var(--color-background-main);
+}
+
+.topline_root *,
+.topline_root *::before,
+.topline_root *::after {
+  box-sizing: inherit;
+}
+
+.topline_root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  color: var(--color-text-main);
+}
+
+.topline_shell_cont {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-background-main);
+  padding-right: 0.5em;
+  position: relative;
+}
+
+.topline_shell_fullLogo {
+  width: 300px;
+  height: 40px;
+  display: none;
+}
+@media (min-width: 600px) {
+  .topline_shell_fullLogo {
+    display: block;
+  }
+}
+
+.topline_shell_shortLogo {
+  display: block;
+  width: 180px;
+  height: 40px;
+}
+@media (min-width: 600px) {
+  .topline_shell_shortLogo {
+    display: none;
+  }
+}
+
+.topline_shell_userAvatar {
+  display: block;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  border-radius: 0;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  width: 40px;
+  height: 40px;
+  color: var(--color-border);
+  cursor: pointer;
+  position: relative;
+}
+.topline_shell_userAvatar::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border: 1px solid var(--color-border);
+  border-radius: 50%;
+}
+.topline_shell_userAvatar svg {
+  width: 32px;
+  height: 32px;
+  fill: currentColor;
+}
+.topline_shell_userAvatar img {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+  border-radius: 50%;
+}
+
+.topline_shell_userMenu {
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  right: 0;
+  width: 300px;
+  border: 1px solid var(--color-border);
+  color: var(--color-menu-text);
+  background-color: var(--color-menu-bkg);
+  transform: translateY(100%);
+}
+
+.topline_shell_userMenuItem {
+  cursor: pointer;
+  padding: 1em;
+  outline-offset: -0.5em;
+}
+.topline_shell_userMenuItem:not(:last-child) {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.topline_login_btnsCont {
+  margin-top: 2em;
+}
+
+.topline_login_extraBlock {
+  margin-top: 2em;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.topline_login_extraBlockLabel {
+  margin: 0;
+}
+
+.topline_signup_btnsCont {
+  margin-top: 2em;
+}
+
+.topline_signup_extraBlockPrompt {
+  margin-top: 2em;
+  margin-bottom: 0;
+}
+
+.topline_signup_extraBlockBtnsCont {
+  margin-top: 1em;
+  display: flex;
+}
+
+.topline_passwordRecovery_btnsCont {
+  margin-top: 2em;
+}
+
+.topline_passwordRecovery_email {
+  font-weight: bolder;
+}
+
+.topline_c_modal_overlay {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-modal-overlay);
+  color: var(--color-text-main);
+}
+
+.topline_c_modal_window {
+  position: absolute;
+  width: calc(100% - 16px);
+  max-width: 500px;
+  height: calc(100% - 16px);
+  max-height: 600px;
+  background-color: var(--color-background-main);
+  border-radius: 8px;
+  overflow-y: auto;
+  padding: 1em 1.5em 2em;
+  font-size: 1em;
+}
+
+.topline_c_modal_heading {
+  margin: 0 0 1.6em;
+  font-size: 1.4em;
+  text-align: center;
+  color: var(--color-modal-heading-fg);
+  border-bottom: 1px solid currentColor;
+  padding-bottom: 0.5em;
+}

package/dist/en/hooks/use-topline/index.d.ts

@@ -0,0 +1,11 @@
+import { type ToplineService } from '../../modules/topline-service/index.js';
+/**
+ * @public
+ */
+export type UseTopline = Pick<ToplineService, 'grantToken' | 'upgradeGrantToken' | 'logIn' | 'createAccount'>;
+/**
+ * React hook to get access for Topline features
+ *
+ * @public
+ */
+export default function useTopline(): UseTopline;

package/dist/en/hooks/use-topline/index.js

@@ -0,0 +1,14 @@
+import { toplineService } from '../../modules/topline-service/index.js';
+/**
+ * React hook to get access for Topline features
+ *
+ * @public
+ */
+export default function useTopline() {
+  return {
+    grantToken: () => toplineService.grantToken(),
+    upgradeGrantToken: () => toplineService.upgradeGrantToken(),
+    logIn: () => toplineService.logIn(),
+    createAccount: () => toplineService.createAccount()
+  };
+}

package/dist/en/index.d.ts

@@ -0,0 +1,8 @@
+import Topline from './topline.js';
+import '../css/index.css';
+export default Topline;
+export type { ToplineProps } from './topline.js';
+export type { ToplineUser } from './types/data.js';
+export { type ToplineService, ToplineEventName, } from './modules/topline-service/index.js';
+export { default as useTopline } from './hooks/use-topline/index.js';
+export type { UseTopline } from './hooks/use-topline/index.js';

package/dist/en/index.js

@@ -0,0 +1,5 @@
+import Topline from './topline.js';
+import '../css/index.css';
+export default Topline;
+export { ToplineEventName } from './modules/topline-service/index.js';
+export { default as useTopline } from './hooks/use-topline/index.js';

package/dist/en/modules/env/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Return base URL for requests to backend API
+ */
+export declare function getApiBaseUrl(): string;
+/**
+ * Return URL for websocket connection
+ */
+export declare function getWebsocketUrl(): string;
+/**
+ * Return value of `credentials` setting for fetch requests
+ */
+export declare function getRequestCredentialsMode(): RequestCredentials;

package/dist/en/modules/env/index.js

@@ -0,0 +1,27 @@
+/**
+ * Return base URL for requests to backend API
+ */
+export function getApiBaseUrl() {
+  if (window.location.hostname === 'localhost') {
+    return 'http://localhost:5000';
+  }
+  return '/api';
+}
+/**
+ * Return URL for websocket connection
+ */
+export function getWebsocketUrl() {
+  if (window.location.hostname === 'localhost') {
+    return 'ws://localhost:5003';
+  }
+  return `wss://${window.location.hostname}/ws`;
+}
+/**
+ * Return value of `credentials` setting for fetch requests
+ */
+export function getRequestCredentialsMode() {
+  if (window.location.hostname === 'localhost') {
+    return 'include';
+  }
+  return 'same-origin';
+}

package/dist/en/modules/focus-marshal/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const globalRefs: {
+    userAvatar: React.RefObject<HTMLButtonElement | null>;
+    userMenuFirstItem: React.RefObject<HTMLDivElement | null>;
+    modalFirstItem: React.RefObject<HTMLInputElement | null>;
+};

package/dist/en/modules/focus-marshal/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export const globalRefs = {
+  userAvatar: React.createRef(),
+  userMenuFirstItem: React.createRef(),
+  modalFirstItem: React.createRef()
+};

package/dist/en/modules/keyboard-navigation/key-codes.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Keyboard key codes
+ */
+declare const keyCodes: Readonly<{
+    TAB: 9;
+    RETURN: 13;
+    ESC: 27;
+    SPACE: 32;
+    PAGEUP: 33;
+    PAGEDOWN: 34;
+    END: 35;
+    HOME: 36;
+    LEFT: 37;
+    UP: 38;
+    RIGHT: 39;
+    DOWN: 40;
+}>;
+export default keyCodes;

package/dist/en/modules/keyboard-navigation/key-codes.js

@@ -0,0 +1,18 @@
+/**
+ * Keyboard key codes
+ */
+const keyCodes = Object.freeze({
+  TAB: 9,
+  RETURN: 13,
+  ESC: 27,
+  SPACE: 32,
+  PAGEUP: 33,
+  PAGEDOWN: 34,
+  END: 35,
+  HOME: 36,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40
+});
+export default keyCodes;

package/dist/en/modules/keyboard-navigation/vertical-menu.d.ts

@@ -0,0 +1,14 @@
+import type { ToplineAction } from '../../types/app.js';
+export type ProcessKeyDownParams = {
+    currIndex: number;
+    e: Pick<React.KeyboardEvent, 'which' | 'preventDefault' | 'stopPropagation'>;
+    setCurrItemIdx: (idx: number) => unknown;
+    menuItemRefs: React.RefObject<HTMLDivElement | null>[];
+    actionName: ToplineAction;
+    onSelect: (actionName: ToplineAction) => unknown;
+    onClose: () => unknown;
+};
+/**
+ * Process pressed key for vertical menu
+ */
+export declare function processKeyDown(params: ProcessKeyDownParams): void;

package/dist/en/modules/keyboard-navigation/vertical-menu.js

@@ -0,0 +1,45 @@
+import keyCodes from './key-codes.js';
+/**
+ * Process pressed key for vertical menu
+ */
+export function processKeyDown(params) {
+  const {
+    currIndex,
+    e,
+    setCurrItemIdx,
+    menuItemRefs,
+    actionName,
+    onSelect,
+    onClose
+  } = params;
+  const itemsNum = menuItemRefs.length;
+  let nextIndex = -Infinity;
+  switch (e.which) {
+    case keyCodes.DOWN:
+      nextIndex = currIndex === itemsNum - 1 ? 0 : currIndex + 1;
+      break;
+    case keyCodes.UP:
+      nextIndex = currIndex === 0 ? itemsNum - 1 : currIndex - 1;
+      break;
+    case keyCodes.HOME:
+      nextIndex = 0;
+      break;
+    case keyCodes.END:
+      nextIndex = itemsNum - 1;
+  }
+  if (nextIndex > -Infinity) {
+    e.preventDefault();
+    e.stopPropagation();
+    setCurrItemIdx(nextIndex);
+    menuItemRefs[nextIndex]?.current?.focus();
+    return;
+  }
+  if (e.which === keyCodes.RETURN) {
+    onSelect(actionName);
+    return;
+  }
+  if (e.which === keyCodes.ESC) {
+    onClose();
+    return;
+  }
+}

package/dist/en/modules/local-db/actions/delete-all-data/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Delete all data from local database
+ */
+export default function deleteAllData(): Promise<void>;

package/dist/en/modules/local-db/actions/delete-all-data/index.js

@@ -0,0 +1,21 @@
+import { getDb, STORE_NAME } from '../../init-db.js';
+import createRequestError from '../../create-request-error.js';
+import { logError } from '../../../logger/index.js';
+/**
+ * Delete all data from local database
+ */
+export default function deleteAllData() {
+  return new Promise(resolve => {
+    const db = getDb();
+    if (!db) {
+      resolve();
+      return;
+    }
+    const req = db.transaction(STORE_NAME, 'readwrite').objectStore(STORE_NAME).clear();
+    req.onsuccess = () => resolve();
+    req.onerror = () => {
+      logError(createRequestError('deleteAllData'));
+      resolve();
+    };
+  });
+}

package/dist/en/modules/local-db/actions/get-all-data/index.d.ts

@@ -0,0 +1,11 @@
+import type { ToplineUser } from '../../../../types/data.js';
+type ReturnData = {
+    user: ToplineUser | null;
+    grantToken: string | null;
+    refreshToken: string | null;
+};
+/**
+ * Fetch all data from local database
+ */
+export default function getAllData(): Promise<ReturnData>;
+export {};

package/dist/en/modules/local-db/actions/get-all-data/index.js

@@ -0,0 +1,51 @@
+import { getDb, STORE_NAME } from '../../init-db.js';
+import createRequestError from '../../create-request-error.js';
+import { logError } from '../../../logger/index.js';
+/**
+ * Fetch all data from local database
+ */
+export default function getAllData() {
+  return new Promise(resolve => {
+    const db = getDb();
+    if (!db) {
+      resolve({
+        user: null,
+        grantToken: null,
+        refreshToken: null
+      });
+      return;
+    }
+    const req = db.transaction(STORE_NAME).objectStore(STORE_NAME).getAll();
+    req.onsuccess = function () {
+      const recordset = this.result;
+      let user = null;
+      let grantToken = null;
+      let refreshToken = null;
+      for (const record of recordset) {
+        switch (record.entityType) {
+          case 'user':
+            user = record.user;
+            break;
+          case 'grantToken':
+            grantToken = record.grantToken;
+            break;
+          case 'refreshToken':
+            refreshToken = record.refreshToken;
+        }
+      }
+      resolve({
+        user,
+        grantToken,
+        refreshToken
+      });
+    };
+    req.onerror = () => {
+      logError(createRequestError('getAllData'));
+      resolve({
+        user: null,
+        grantToken: null,
+        refreshToken: null
+      });
+    };
+  });
+}

package/dist/en/modules/local-db/actions/update-grant-token/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Update grant token
+ */
+export default function updateGrantToken(grantToken: string): Promise<void>;

package/dist/en/modules/local-db/actions/update-grant-token/index.js

@@ -0,0 +1,26 @@
+import { getDb, STORE_NAME } from '../../init-db.js';
+import createRequestError from '../../create-request-error.js';
+import { logError } from '../../../logger/index.js';
+/**
+ * Update grant token
+ */
+export default function updateGrantToken(grantToken) {
+  return new Promise(resolve => {
+    const db = getDb();
+    if (!db) {
+      resolve();
+      return;
+    }
+    const transaction = db.transaction(STORE_NAME, 'readwrite');
+    transaction.oncomplete = () => resolve();
+    transaction.onerror = () => {
+      logError(createRequestError('updateGrantToken'));
+      resolve();
+    };
+    const objectStore = transaction.objectStore(STORE_NAME);
+    objectStore.put({
+      entityType: 'grantToken',
+      grantToken
+    });
+  });
+}

package/dist/en/modules/local-db/actions/update-refresh-token/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Update refresh token
+ */
+export default function updateRefreshToken(refreshToken: string): Promise<void>;

package/dist/en/modules/local-db/actions/update-refresh-token/index.js

@@ -0,0 +1,26 @@
+import { getDb, STORE_NAME } from '../../init-db.js';
+import createRequestError from '../../create-request-error.js';
+import { logError } from '../../../logger/index.js';
+/**
+ * Update refresh token
+ */
+export default function updateRefreshToken(refreshToken) {
+  return new Promise(resolve => {
+    const db = getDb();
+    if (!db) {
+      resolve();
+      return;
+    }
+    const transaction = db.transaction(STORE_NAME, 'readwrite');
+    transaction.oncomplete = () => resolve();
+    transaction.onerror = () => {
+      logError(createRequestError('updateRefreshToken'));
+      resolve();
+    };
+    const objectStore = transaction.objectStore(STORE_NAME);
+    objectStore.put({
+      entityType: 'refreshToken',
+      refreshToken
+    });
+  });
+}

package/dist/en/modules/local-db/actions/update-user/index.d.ts

@@ -0,0 +1,5 @@
+import type { ToplineUser } from '../../../../types/data.js';
+/**
+ * Update user data
+ */
+export default function updateUser(user: ToplineUser): Promise<void>;

package/dist/en/modules/local-db/actions/update-user/index.js

@@ -0,0 +1,26 @@
+import { getDb, STORE_NAME } from '../../init-db.js';
+import createRequestError from '../../create-request-error.js';
+import { logError } from '../../../logger/index.js';
+/**
+ * Update user data
+ */
+export default function updateUser(user) {
+  return new Promise(resolve => {
+    const db = getDb();
+    if (!db) {
+      resolve();
+      return;
+    }
+    const transaction = db.transaction(STORE_NAME, 'readwrite');
+    transaction.oncomplete = () => resolve();
+    transaction.onerror = () => {
+      logError(createRequestError('updateUser'));
+      resolve();
+    };
+    const objectStore = transaction.objectStore(STORE_NAME);
+    objectStore.put({
+      entityType: 'user',
+      user
+    });
+  });
+}

package/dist/en/modules/local-db/create-request-error.d.ts

@@ -0,0 +1,5 @@
+import WebError from '@memnrev/web-error';
+/**
+ * Create error for failed request to local database
+ */
+export default function createRequestError(reason: string): WebError;

package/dist/en/modules/local-db/create-request-error.js

@@ -0,0 +1,9 @@
+import WebError from '@memnrev/web-error';
+/**
+ * Create error for failed request to local database
+ */
+export default function createRequestError(reason) {
+  return new WebError({
+    name: 'LocalDbRequestError'
+  }, `request to local database failed (${reason})`);
+}

package/dist/en/modules/local-db/index.d.ts

@@ -0,0 +1,6 @@
+export { initDb } from './init-db.js';
+export { default as getAllData } from './actions/get-all-data/index.js';
+export { default as deleteAllData } from './actions/delete-all-data/index.js';
+export { default as updateUser } from './actions/update-user/index.js';
+export { default as updateGrantToken } from './actions/update-grant-token/index.js';
+export { default as updateRefreshToken } from './actions/update-refresh-token/index.js';

package/dist/en/modules/local-db/index.js

@@ -0,0 +1,6 @@
+export { initDb } from './init-db.js';
+export { default as getAllData } from './actions/get-all-data/index.js';
+export { default as deleteAllData } from './actions/delete-all-data/index.js';
+export { default as updateUser } from './actions/update-user/index.js';
+export { default as updateGrantToken } from './actions/update-grant-token/index.js';
+export { default as updateRefreshToken } from './actions/update-refresh-token/index.js';

package/dist/en/modules/local-db/init-db.d.ts

@@ -0,0 +1,17 @@
+export declare const STORE_NAME = "main";
+/**
+ * Get IndexedDb database object
+ *
+ * Returns null if database initialization has failed.
+ *
+ * @public
+ */
+export declare function getDb(): IDBDatabase | null;
+/**
+ * Initialize local database
+ *
+ * @throws {LocalDbInitializationError}
+ *
+ * @public
+ */
+export declare function initDb(): Promise<void>;