@sqrzro/admin 1.0.0-beta.7 → 2.0.0

package/src/services/FilterService.spec.ts

@@ -1,87 +1,105 @@
+import type { FilterMap } from '../utility/interfaces';
+
 import FilterService from './FilterService';
 
 describe('FilterService', () => {
-    describe('parseQuery', () => {
+    describe('getFiltersFromContext', () => {
         it('should handle no arguments', () => {
-            expect(FilterService.parseQuery()).toEqual(new Map());
+            expect(FilterService.getFiltersFromContext(null)).toEqual(new Map());
         });
 
-        it('should parse a value', () => {
-            const search = { lorem: 'ipsum' };
+        it('should parse a value (location)', () => {
+            const location = { pathname: '', search: 'filter[lorem]=ipsum' };
 
             const result = new Map();
             result.set('lorem', 'ipsum');
 
-            expect(FilterService.parseQuery(search)).toEqual(result);
+            expect(FilterService.getFiltersFromContext({ location })).toEqual(result);
         });
 
-        it('should parse an array', () => {
-            const search = { lorem: ['1', '2'] };
+        it('should parse an array (location)', () => {
+            const location = { pathname: '', search: 'filter[lorem][0]=1&filter[lorem][1]=2' };
 
             const result = new Map();
             result.set('lorem', ['1', '2']);
 
-            expect(FilterService.parseQuery(search)).toEqual(result);
+            expect(FilterService.getFiltersFromContext({ location })).toEqual(result);
         });
 
-        it('should filter default keys', () => {
-            const search = { alias: 'lorem' };
+        it('should filter no value (location)', () => {
+            const location = { pathname: '', search: 'filter[lorem]=' };
             const result = new Map();
 
-            expect(FilterService.parseQuery(search)).toEqual(result);
+            expect(FilterService.getFiltersFromContext({ location })).toEqual(result);
         });
 
-        it('should filter no value', () => {
-            const search = { lorem: '' };
+        it('should parse a value (query)', () => {
+            const query = { filter: { lorem: 'ipsum' } };
+
             const result = new Map();
+            result.set('lorem', 'ipsum');
 
-            expect(FilterService.parseQuery(search)).toEqual(result);
+            expect(FilterService.getFiltersFromContext({ query })).toEqual(result);
         });
 
-        it('should not filter page', () => {
-            const search = { page: '1' };
+        it('should parse an array (query)', () => {
+            const query = { filter: { lorem: ['1', '2'] } };
 
             const result = new Map();
-            result.set('page', '1');
+            result.set('lorem', ['1', '2']);
 
-            expect(FilterService.parseQuery(search)).toEqual(result);
+            expect(FilterService.getFiltersFromContext({ query })).toEqual(result);
         });
 
-        it('should filter page', () => {
-            const search = { page: '1' };
+        it('should filter no value (query)', () => {
+            const query = { filter: { lorem: '' } };
             const result = new Map();
 
-            expect(FilterService.parseQuery(search, { shouldFilterPage: true })).toEqual(result);
+            expect(FilterService.getFiltersFromContext({ query })).toEqual(result);
         });
     });
 
-    describe('makeUrl', () => {
-        it('should make url', () => {
-            const data = new Map<string, string>();
-            data.set('lorem', 'ipsum');
+    describe('setFiltersUrlFromContext', () => {
+        it('should make basic url (location)', () => {
+            const location = { pathname: 'lorem', search: '' };
+
+            const filters: FilterMap = new Map();
+            filters.set('lorem', 'ipsum');
 
-            expect(FilterService.makeUrl(data)).toBe('/?lorem=ipsum');
+            expect(FilterService.setFiltersUrlFromContext({ location }, filters)).toBe(
+                encodeURI('/lorem?filter[lorem]=ipsum')
+            );
         });
 
-        it('should make url without pathname', () => {
-            const data = new Map<string, string>();
-            data.set('lorem', 'ipsum');
+        it('should make url with an array (location)', () => {
+            const location = { pathname: 'lorem', search: '' };
 
-            expect(FilterService.makeUrl(data, false)).toBe('lorem=ipsum');
+            const filters: FilterMap = new Map();
+            filters.set('lorem', ['1', '2']);
+
+            expect(FilterService.setFiltersUrlFromContext({ location }, filters)).toBe(
+                encodeURI('/lorem?filter[lorem][0]=1&filter[lorem][1]=2')
+            );
         });
 
-        it('should make url with array', () => {
-            const data = new Map<string, string[]>();
-            data.set('lorem', ['ipsum', 'dolor']);
+        it('should make url with no value (location)', () => {
+            const location = { pathname: 'lorem', search: '' };
+            const filters: FilterMap = new Map();
 
-            expect(FilterService.makeUrl(data)).toBe(encodeURI('/?lorem[0]=ipsum&lorem[1]=dolor'));
+            expect(FilterService.setFiltersUrlFromContext({ location }, filters)).toBe(
+                encodeURI('/lorem')
+            );
         });
-    });
 
-    describe('getUrlForFilters', () => {
-        it('should get basic url', () => {
-            const url = FilterService.getUrlForFilters();
-            expect(url).toBe('/?');
+        it('should make basic url with existing query (location)', () => {
+            const location = { pathname: 'lorem', search: '?ipsum=dolor' };
+
+            const filters: FilterMap = new Map();
+            filters.set('lorem', 'ipsum');
+
+            expect(FilterService.setFiltersUrlFromContext({ location }, filters)).toBe(
+                encodeURI('/lorem?ipsum=dolor&filter[lorem]=ipsum')
+            );
         });
     });
 });

package/src/services/FilterService.ts

@@ -1,58 +1,80 @@
-import { parseSearch, stringifySearch } from '@sqrzro/utility';
+import { UrlService, ifWindow, parseSearch } from '@sqrzro/utility';
 
-/* eslint-disable @typescript-eslint/consistent-indexed-object-style */
-interface Query {
-    [key: string]: Query | Query[] | string[] | string;
-}
-/* eslint-enable */
+import type { FilterMap } from '../utility/interfaces';
 
-export type FilterMap = Map<string, string[] | string>;
+interface FilterContext {
+    location?: { pathname: string; search: string };
+    path?: string;
+    query?: { filter?: Record<string, string[] | string> };
+}
 
-export interface FilterOptions {
-    shouldFilterPage?: boolean;
+function getDefaultContext(context: FilterContext | null): FilterContext | null {
+    if (context) {
+        return context;
+    }
+    return ifWindow((win) => win, null);
 }
 
-const FILTERED_KEYS = ['id', 'alias'];
+/**
+ * Take either a query string (from a window.location.search, for example) or a query object (e.g.
+ * from an Express-style Request object), and return a filter map.
+ *
+ * @param ctx Either a window element or an Express-style Request object
+ * @returns A filter map for the specified filters
+ */
+function getFiltersFromContext(ctx: FilterContext | null): FilterMap {
+    const map: FilterMap = new Map();
+    const context = getDefaultContext(ctx);
 
-const parseQueryEntry = (entry: Query | Query[] | string[] | string): string[] | string => {
-    if (Array.isArray(entry)) {
-        return entry.map((item) => item.toString());
+    if (!context) {
+        return map;
     }
 
-    return entry.toString();
-};
+    const search = context.location ? parseSearch(context.location.search) : context.query;
 
-const parseQuery = (query?: Query, options?: FilterOptions): FilterMap => {
-    const map = new Map<string, string[] | string>();
+    if (!search?.filter || typeof search.filter !== 'object') {
+        return map;
+    }
 
-    const entries = Object.entries(query || {}).filter(([key, value]) => {
-        if (value === '') {
-            return false;
-        }
-        if (FILTERED_KEYS.includes(key)) {
-            return false;
-        }
-        if (options?.shouldFilterPage && key === 'page') {
-            return false;
-        }
-        return true;
-    });
+    for (const [key, value] of Object.entries(search.filter)) {
+        if (value) {
+            const stringValue = Array.isArray(value)
+                ? value.map((item) => String(item))
+                : value.toString();
 
-    for (const [key, value] of entries) {
-        map.set(key, parseQueryEntry(value));
+            map.set(key, stringValue);
+        }
     }
 
     return map;
-};
+}
+
+/**
+ * Take either a query string (from a window.location.search, for example) or a query object (e.g.
+ * from an Express-style Request object), and a filter map of the specified filter values, and
+ * return a url that can be used to apply those specified filters.
+ *
+ * @param ctx Either a window element or an Express-style Request object
+ * @param filters A filter map for the specified filters
+ * @returns A url with the specified filters applied
+ */
+function setFiltersUrlFromContext(ctx: FilterContext | null, filters: FilterMap): string {
+    const context = getDefaultContext(ctx);
 
-const makeUrl = (data: FilterMap, includePathname = true): string =>
-    `${includePathname ? `${window.location.pathname}?` : ''}${stringifySearch(
-        Object.fromEntries(data)
-    )}`;
+    if (!context) {
+        return '';
+    }
+
+    const pathname = context.location ? context.location.pathname : context.path;
+    const search = context.location ? parseSearch(context.location.search) : context.query;
+
+    return UrlService.build(pathname || '', search, filters);
+}
 
-const getUrlForFilters = (data?: Query, includePathname: boolean = true): string => {
-    const filters = parseQuery({ ...parseSearch(window.location.search), ...(data || {}) });
-    return makeUrl(filters, includePathname);
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const FilterService = {
+    getFiltersFromContext,
+    setFiltersUrlFromContext,
 };
 
-export default { getUrlForFilters, makeUrl, parseQuery };
+export default FilterService;

package/src/services/FormatService.spec.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
 import FormatService from './FormatService';
 
 describe('Format Service', () => {

package/src/services/FormatService.ts

@@ -2,7 +2,7 @@ import { format as fnsFormat, parseISO } from 'date-fns';
 
 const TWO_DIGITS = 10;
 
-const formatDate = (value?: unknown, formatString: string = 'dd/MM/Y'): string => {
+function formatDate(value?: unknown, formatString: string = 'dd/MM/Y'): string {
     if (!value || (typeof value !== 'string' && !(value instanceof Date))) {
         return '';
     }
@@ -14,14 +14,18 @@ const formatDate = (value?: unknown, formatString: string = 'dd/MM/Y'): string =
     } catch (err) {
         return '';
     }
-};
+}
 
-const formatDatetime = (value?: unknown): string => formatDate(value, 'dd/MM/Y HH:mm');
+function formatDatetime(value?: unknown): string {
+    return formatDate(value, 'dd/MM/Y HH:mm');
+}
 
 // eslint-disable-next-line prefer-named-capture-group
-const addCommas = (value: string): string => value.replace(/(\d)(?=(\d{3})+(?!\d))/gu, '$1,');
+function addCommas(value: string): string {
+    return value.replace(/(\d)(?=(\d{3})+(?!\d))/gu, '$1,');
+}
 
-const formatMoney = (value?: unknown): string => {
+function formatMoney(value?: unknown): string {
     if (!value || (typeof value !== 'string' && typeof value !== 'number')) {
         return '';
     }
@@ -30,9 +34,9 @@ const formatMoney = (value?: unknown): string => {
     const numberValue = isNegative ? value.toString().substring(1) : value.toString();
 
     return `${isNegative ? '-' : ''}£${addCommas(parseFloat(numberValue).toFixed(2))}`;
-};
+}
 
-const formatTwoDigits = (value?: unknown): string => {
+function formatTwoDigits(value?: unknown): string {
     if (!value || (typeof value !== 'string' && typeof value !== 'number')) {
         return '';
     }
@@ -43,8 +47,9 @@ const formatTwoDigits = (value?: unknown): string => {
     return `${isNegative ? '-' : ''}${
         parseInt(numberValue, 10) < TWO_DIGITS ? '0' : ''
     }${numberValue}`;
-};
+}
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
 const FormatService = {
     date: formatDate,
     datetime: formatDatetime,

package/src/services/ToastService.ts

@@ -2,18 +2,23 @@ import { EventService } from '@sqrzro/utility';
 
 const INTERVAL = 200;
 
-const send = (type: string, message: string): void => {
+function send(type: string, message: string): void {
     EventService.publish('@toast/send', {});
 
     setTimeout(() => {
         EventService.publish('@toast/send', { type, message });
     }, INTERVAL);
-};
+}
 
-const success = (message: string): void => send('success', message);
+function success(message: string): void {
+    return send('success', message);
+}
 
-const error = (message: string): void => send('error', message);
+function error(message: string): void {
+    return send('error', message);
+}
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
 const ToastService = { success, error };
 
 export default ToastService;

package/src/styles/tailwind.css

@@ -0,0 +1,57 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    @keyframes backdropEnter {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    dialog {
+        background-color: transparent;
+        padding: 0;
+    }
+
+    dialog::backdrop {
+        animation: backdropEnter .3s;
+        @apply bg-slate-800/80;
+    }
+
+    svg {
+        height: 100%;
+        width: 100%;
+    }
+}
+
+@layer components {
+    @keyframes alertEnter {
+        0% {
+            opacity: 0;
+            transform: translate3d(0, 2rem, 0);
+        }
+
+        100% {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+    }
+
+    .alert {
+        animation: alertEnter .15s ease-in-out;
+        animation-delay: .2s;
+        animation-fill-mode: both;
+    }
+
+    .app-logo svg {
+        height: calc(100% - 1.5rem);
+        max-height: 2.5rem;
+        max-width: 2.5rem;
+        width: calc(100% - 1.5rem);
+    }
+}

package/src/typings.d.ts

@@ -1,4 +1,4 @@
 declare module '*.module.css' {
-    const classNames: Record<string, string>;
-    export = classNames;
+    const clsx: Record<string, string>;
+    export = clsx;
 }

package/src/utility/MockRouter/index.ts

@@ -22,6 +22,7 @@ export const createMockRouter = (
         off: (): null => null,
         on: (): null => null,
     },
+    forward: () => null,
     isFallback: false,
     isLocaleDomain: false,
     isPreview: false,

package/src/utility/icons.tsx

@@ -2,34 +2,50 @@
 
 import React from 'react';
 
-export const AuthenticatorIcon = (): JSX.Element => (
-    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-        <path
-            clipRule="evenodd"
-            d="M6.19881 1.39934C6.65631 0.84017 7.30087 0.5 8 0.5H16C16.6991 0.5 17.3437 0.84017 17.8012 1.39934C18.2564 1.95572 18.5 2.69238 18.5 3.44444V20.5556C18.5 21.3076 18.2564 22.0443 17.8012 22.6007C17.3437 23.1598 16.6991 23.5 16 23.5H8C7.30087 23.5 6.65631 23.1598 6.19881 22.6007C5.74359 22.0443 5.5 21.3076 5.5 20.5556V3.44444C5.5 2.69238 5.74359 1.95572 6.19881 1.39934ZM8 1.5C7.63826 1.5 7.26541 1.67491 6.97276 2.03258C6.67784 2.39304 6.5 2.8999 6.5 3.44444V20.5556C6.5 21.1001 6.67784 21.607 6.97276 21.9674C7.26541 22.3251 7.63826 22.5 8 22.5H16C16.3617 22.5 16.7346 22.3251 17.0272 21.9674C17.3222 21.607 17.5 21.1001 17.5 20.5556V3.44444C17.5 2.8999 17.3222 2.39304 17.0272 2.03258C16.7346 1.67491 16.3617 1.5 16 1.5H8ZM11.5 19.3333C11.5 19.0572 11.7239 18.8333 12 18.8333H12.01C12.2861 18.8333 12.51 19.0572 12.51 19.3333C12.51 19.6095 12.2861 19.8333 12.01 19.8333H12C11.7239 19.8333 11.5 19.6095 11.5 19.3333Z"
-            fill="currentColor"
-            fillRule="evenodd"
-        />
-    </svg>
-);
+export function AuthenticatorIcon(): JSX.Element {
+    return (
+        <svg
+            fill="none"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                clipRule="evenodd"
+                d="M6.19881 1.39934C6.65631 0.84017 7.30087 0.5 8 0.5H16C16.6991 0.5 17.3437 0.84017 17.8012 1.39934C18.2564 1.95572 18.5 2.69238 18.5 3.44444V20.5556C18.5 21.3076 18.2564 22.0443 17.8012 22.6007C17.3437 23.1598 16.6991 23.5 16 23.5H8C7.30087 23.5 6.65631 23.1598 6.19881 22.6007C5.74359 22.0443 5.5 21.3076 5.5 20.5556V3.44444C5.5 2.69238 5.74359 1.95572 6.19881 1.39934ZM8 1.5C7.63826 1.5 7.26541 1.67491 6.97276 2.03258C6.67784 2.39304 6.5 2.8999 6.5 3.44444V20.5556C6.5 21.1001 6.67784 21.607 6.97276 21.9674C7.26541 22.3251 7.63826 22.5 8 22.5H16C16.3617 22.5 16.7346 22.3251 17.0272 21.9674C17.3222 21.607 17.5 21.1001 17.5 20.5556V3.44444C17.5 2.8999 17.3222 2.39304 17.0272 2.03258C16.7346 1.67491 16.3617 1.5 16 1.5H8ZM11.5 19.3333C11.5 19.0572 11.7239 18.8333 12 18.8333H12.01C12.2861 18.8333 12.51 19.0572 12.51 19.3333C12.51 19.6095 12.2861 19.8333 12.01 19.8333H12C11.7239 19.8333 11.5 19.6095 11.5 19.3333Z"
+                fill="currentColor"
+                fillRule="evenodd"
+            />
+        </svg>
+    );
+}
 
-export const YubikeyIcon = (): JSX.Element => (
-    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M11.5 20.1667C11.5 19.8905 11.7239 19.6667 12 19.6667H12.01C12.2861 19.6667 12.51 19.8905 12.51 20.1667C12.51 20.4428 12.2861 20.6667 12.01 20.6667H12C11.7239 20.6667 11.5 20.4428 11.5 20.1667Z"
-            fill="currentColor"
-        />
-        <path
-            clipRule="evenodd"
-            d="M12 9C9.79086 9 8 10.7909 8 13C8 15.2091 9.79086 17 12 17C14.2091 17 16 15.2091 16 13C16 10.7909 14.2091 9 12 9ZM9 13C9 11.3431 10.3431 10 12 10C13.6569 10 15 11.3431 15 13C15 14.6569 13.6569 16 12 16C10.3431 16 9 14.6569 9 13Z"
-            fill="currentColor"
-            fillRule="evenodd"
-        />
-        <path
-            clipRule="evenodd"
-            d="M7.5 0.5H16.5V5.54825C16.97 5.6399 17.4083 5.85994 17.7575 6.18974C18.2292 6.63525 18.5 7.24579 18.5 7.88889V21.1111C18.5 21.7542 18.2292 22.3648 17.7575 22.8103C17.2868 23.2549 16.6541 23.5 16 23.5H8C7.34589 23.5 6.71322 23.2549 6.24247 22.8103C5.77076 22.3648 5.5 21.7542 5.5 21.1111V7.88889C5.5 7.2458 5.77076 6.63525 6.24247 6.18974C6.59167 5.85994 7.02995 5.6399 7.5 5.54825V0.5ZM15.5 1.5V5.5H15V2H14V5.5H13.5V3H12.5V5.5H11.5V3H10.5V5.5H10V2H9V5.5H8.5V1.5H15.5ZM8 6.5C7.59325 6.5 7.2085 6.65287 6.9291 6.91675C6.65067 7.17971 6.5 7.53005 6.5 7.88889V21.1111C6.5 21.4699 6.65067 21.8203 6.9291 22.0833C7.2085 22.3471 7.59325 22.5 8 22.5H16C16.4068 22.5 16.7915 22.3471 17.0709 22.0833C17.3493 21.8203 17.5 21.4699 17.5 21.1111V7.88889C17.5 7.53005 17.3493 7.17971 17.0709 6.91675C16.7915 6.65287 16.4068 6.5 16 6.5H8Z"
-            fill="currentColor"
-            fillRule="evenodd"
-        />
-    </svg>
-);
+export function YubikeyIcon(): JSX.Element {
+    return (
+        <svg
+            fill="none"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M11.5 20.1667C11.5 19.8905 11.7239 19.6667 12 19.6667H12.01C12.2861 19.6667 12.51 19.8905 12.51 20.1667C12.51 20.4428 12.2861 20.6667 12.01 20.6667H12C11.7239 20.6667 11.5 20.4428 11.5 20.1667Z"
+                fill="currentColor"
+            />
+            <path
+                clipRule="evenodd"
+                d="M12 9C9.79086 9 8 10.7909 8 13C8 15.2091 9.79086 17 12 17C14.2091 17 16 15.2091 16 13C16 10.7909 14.2091 9 12 9ZM9 13C9 11.3431 10.3431 10 12 10C13.6569 10 15 11.3431 15 13C15 14.6569 13.6569 16 12 16C10.3431 16 9 14.6569 9 13Z"
+                fill="currentColor"
+                fillRule="evenodd"
+            />
+            <path
+                clipRule="evenodd"
+                d="M7.5 0.5H16.5V5.54825C16.97 5.6399 17.4083 5.85994 17.7575 6.18974C18.2292 6.63525 18.5 7.24579 18.5 7.88889V21.1111C18.5 21.7542 18.2292 22.3648 17.7575 22.8103C17.2868 23.2549 16.6541 23.5 16 23.5H8C7.34589 23.5 6.71322 23.2549 6.24247 22.8103C5.77076 22.3648 5.5 21.7542 5.5 21.1111V7.88889C5.5 7.2458 5.77076 6.63525 6.24247 6.18974C6.59167 5.85994 7.02995 5.6399 7.5 5.54825V0.5ZM15.5 1.5V5.5H15V2H14V5.5H13.5V3H12.5V5.5H11.5V3H10.5V5.5H10V2H9V5.5H8.5V1.5H15.5ZM8 6.5C7.59325 6.5 7.2085 6.65287 6.9291 6.91675C6.65067 7.17971 6.5 7.53005 6.5 7.88889V21.1111C6.5 21.4699 6.65067 21.8203 6.9291 22.0833C7.2085 22.3471 7.59325 22.5 8 22.5H16C16.4068 22.5 16.7915 22.3471 17.0709 22.0833C17.3493 21.8203 17.5 21.4699 17.5 21.1111V7.88889C17.5 7.53005 17.3493 7.17971 17.0709 6.91675C16.7915 6.65287 16.4068 6.5 16 6.5H8Z"
+                fill="currentColor"
+                fillRule="evenodd"
+            />
+        </svg>
+    );
+}

package/src/utility/interfaces.ts

@@ -22,13 +22,18 @@ export interface InputEvent<
     target: InputEventTarget<T>;
 }
 
+export type InputEventHandler<
+    T extends InputValue = InputValue,
+    O extends SimpleObject = SimpleObject
+> = (event: InputEvent<T, O>) => void;
+
 export interface InputProps<V extends InputValue, T extends V = V, E = HTMLInputElement> {
     hasError?: boolean;
     id?: string;
     isAutoFocus?: boolean;
     isDisabled?: boolean;
     name: string;
-    onChange?: (event: InputEvent<T>) => void;
+    onChange?: InputEventHandler<T>;
     onKeyDown?: KeyboardEventHandler<E>;
     value?: V;
 }
@@ -55,14 +60,31 @@ export interface Action {
     variant?: ButtonVariant | ButtonVariant[];
 }
 
+type NavigationObjectDisabledFunction = (
+    item: NavigationObject,
+    sceneData?: Record<string, unknown>
+) => boolean;
+
 export interface NavigationObject {
+    isActive?: boolean;
+    isDisabled?: NavigationObjectDisabledFunction | boolean;
     label: string;
     to?: string;
     onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
     permission?: string;
 }
 
-export type Remote = string | [string, Record<string, string[] | string>];
+export type NavigationData = NavigationObject[] | [string, NavigationObject[]];
+
+export interface Query {
+    [key: string]: Query | Query[] | string[] | string;
+}
+
+export type QueryValue = Query | Query[] | string[] | string;
+
+export type FilterMap = Map<string, QueryValue>;
+
+export type Remote = string | [string, Query?, FilterMap?];
 
 export interface SimpleObject {
     [key: string]: unknown;
@@ -89,17 +111,6 @@ export type TransformerWithActions<T extends SimpleObject = SimpleObject, O = Tr
     | Transformer<T, O>
     | [Transformer<T, O>, Action[] | ActionFunction<T>];
 
-export type StyleVariant =
-    | 'bordered'
-    | 'danger'
-    | 'primary'
-    | 'secondary'
-    | 'success'
-    | 'tertiary'
-    | 'warning';
-
-export type ButtonVariant = StyleVariant | 'link';
-
 export interface PaginationObject {
     activePage: number;
     pageCount: number;
@@ -111,14 +122,21 @@ export interface PaginationObject {
  * ---------------------------------------------------------------------------------
  */
 
-export const isString = (variable: unknown): variable is string => typeof variable === 'string';
+export function isString(variable: unknown): variable is string {
+    return typeof variable === 'string';
+}
 
-export const isStringArray = (variable: unknown): variable is string[] =>
-    Array.isArray(variable) && (variable.length === 0 || isString(variable[0]));
+export function isStringArray(variable: unknown): variable is string[] {
+    return Array.isArray(variable) && (variable.length === 0 || isString(variable[0]));
+}
 
-export const isStrictSimpleObject = (variable: unknown): variable is StrictSimpleObject =>
-    isString((variable as StrictSimpleObject).id) &&
-    isString((variable as StrictSimpleObject).name);
+export function isStrictSimpleObject(variable: unknown): variable is StrictSimpleObject {
+    return (
+        isString((variable as StrictSimpleObject).id) &&
+        isString((variable as StrictSimpleObject).name)
+    );
+}
 
-export const isStrictSimpleObjectArray = (variable: unknown): variable is StrictSimpleObject[] =>
-    Array.isArray(variable) && (variable.length === 0 || isStrictSimpleObject(variable[0]));
+export function isStrictSimpleObjectArray(variable: unknown): variable is StrictSimpleObject[] {
+    return Array.isArray(variable) && (variable.length === 0 || isStrictSimpleObject(variable[0]));
+}

package/src/utility/middleware.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+import { ApiService, TestService } from '@sqrzro/utility';
+
+async function middleware(request: NextRequest): Promise<NextResponse> {
+    //return NextResponse.redirect(new URL('/auth/login', request.url));
+}
+
+export default middleware;

package/src/utility/prop-types.ts

@@ -1,7 +1,10 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
 import PropTypes from 'prop-types';
+import { AuthIdentifier } from '@sqrzro/hooks';
 
-import { AppLayout, AuthIdentifier } from '@hooks/useAppContext';
-import type { ButtonVariant, StyleVariant } from '@utility/interfaces';
+import { AppLayout } from '../services/ConfigService';
+import type { ButtonVariant, StyleVariant } from '../utility/interfaces';
 
 export const NextRouterPropType = PropTypes.shape({
     asPath: PropTypes.string.isRequired,
@@ -13,6 +16,7 @@ export const NextRouterPropType = PropTypes.shape({
         off: PropTypes.func.isRequired,
         on: PropTypes.func.isRequired,
     }),
+    forward: PropTypes.func.isRequired,
     isFallback: PropTypes.bool.isRequired,
     isLocaleDomain: PropTypes.bool.isRequired,
     isPreview: PropTypes.bool.isRequired,