@sqrzro/admin 1.0.0-beta.1

package/src/services/DateService.ts

@@ -0,0 +1,137 @@
+import {
+    addMonths as fnsAddMonths,
+    getDay as fnsGetDay,
+    getDaysInMonth as fnsGetDaysInMonth,
+    set as fnsSet,
+    subDays as fnsSubDays,
+    subMonths as fnsSubMonths,
+    parseISO,
+} from 'date-fns';
+
+import FormatService from './FormatService';
+
+import type { SimpleObject } from '@utility/interfaces';
+
+const DAYS_IN_WEEK = 7;
+const MONTHS_IN_YEAR = 12;
+const DAYS_IN_30_DAYS = 30;
+const DAYS_IN_MONTH = 31;
+
+const FIRST_YEAR = 1900;
+
+const SUNDAY = 6;
+
+interface DateItem {
+    id: number;
+    name: string | null;
+}
+
+const getDays = (): DateItem[] =>
+    Array(DAYS_IN_MONTH)
+        .fill(0)
+        .map((_item, index: number) => ({ id: index + 1, name: `${index + 1}` }));
+
+const getMonths = (): DateItem[] =>
+    Array(MONTHS_IN_YEAR)
+        .fill(0)
+        .map((_item, index: number) => ({
+            id: index + 1,
+            name: FormatService.date(new Date(FIRST_YEAR, index, 1), 'MMMM'),
+        }));
+
+const getYears = (
+    startYear: number = FIRST_YEAR,
+    endYear: number = new Date().getFullYear()
+): DateItem[] =>
+    Array(endYear - startYear + 1)
+        .fill(0)
+        .map((_item, index: number) => ({ id: endYear - index, name: `${endYear - index}` }));
+
+const isToday = (date: string): boolean => FormatService.date(new Date(), 'y-MM-dd') === date;
+
+// Most date libraries start the week on Sunday (US). We want to start on Monday (UK).
+const adjustDayOfWeek = (num: number): number => (num === 0 ? SUNDAY : num - 1);
+
+const getDayOfWeek = (date: string): number => {
+    const parsed = parseISO(date);
+    const num = adjustDayOfWeek(fnsGetDay(parsed));
+
+    return Number.isNaN(num) ? -1 : num;
+};
+
+const getDaysInMonth = (date: string): number => {
+    const parsed = parseISO(date);
+    const num = fnsGetDaysInMonth(parsed);
+
+    return Number.isNaN(num) ? -1 : num;
+};
+
+const addMonths = (date: string, amount: number): string => {
+    const parsed = parseISO(`${date}-01`);
+    return FormatService.date(fnsAddMonths(parsed, amount), 'y-MM');
+};
+
+const subMonths = (date: string, amount: number): string => {
+    const parsed = parseISO(`${date}-01`);
+    return FormatService.date(fnsSubMonths(parsed, amount), 'y-MM');
+};
+
+// Quick Date
+
+const QUICK_DATE_FORMAT = 'Y-MM-dd';
+
+const getToday = (): Date => new Date();
+
+const getYesterday = (): Date => fnsSubDays(new Date(), 1);
+
+const getLast7Days = (): Date[] => [fnsSubDays(new Date(), DAYS_IN_WEEK), new Date()];
+
+const getLast30Days = (): Date[] => [fnsSubDays(new Date(), DAYS_IN_30_DAYS), new Date()];
+
+// Get the first day of this month, and today
+const getThisMonth = (): Date[] => [fnsSet(new Date(), { date: 1 }), getToday()];
+
+// Get the first day of last month, and the day before the first day of this month
+const getLastMonth = (): Date[] => [
+    fnsSet(fnsSubMonths(new Date(), 1), { date: 1 }),
+    fnsSubDays(getThisMonth()[0], 1),
+];
+
+const getQuickDateId = (value: Date | Date[]): string => {
+    if (Array.isArray(value)) {
+        return value.map((item) => FormatService.date(item, QUICK_DATE_FORMAT)).join(',');
+    }
+
+    const formatted = FormatService.date(value, QUICK_DATE_FORMAT);
+    return `${formatted},${formatted}`;
+};
+
+const getQuickDates = (): SimpleObject[] => {
+    const dates = {
+        Today: getToday(),
+        Yesterday: getYesterday(),
+        'Last 7 Days': getLast7Days(),
+        'Last 30 Days': getLast30Days(),
+        'This Month': getThisMonth(),
+        'Last Month': getLastMonth(),
+    };
+
+    return Object.entries(dates).map(([key, value]) => ({
+        id: getQuickDateId(value),
+        name: key,
+    }));
+};
+
+const DateService = {
+    addMonths,
+    getDaysInMonth,
+    getDayOfWeek,
+    getDays,
+    getMonths,
+    getQuickDates,
+    getYears,
+    isToday,
+    subMonths,
+};
+
+export default DateService;

package/src/services/DownloadService.spec.ts

@@ -0,0 +1,29 @@
+import DownloadService from './DownloadService';
+
+import { ApiService } from '@sqrzro/utility';
+
+jest.mock('@services/FilterService', () => ({
+    getUrlForFilters: (): string => 'lorem',
+}));
+
+describe('DownloadService', () => {
+    it('should make url', () => {
+        expect(ApiService.makeUrl).toHaveBeenCalledTimes(0);
+        const url = DownloadService.makeUrl('lorem');
+        expect(ApiService.makeUrl).toHaveBeenCalledTimes(1);
+        expect(ApiService.makeUrl).toHaveBeenLastCalledWith('lorem');
+
+        expect(url).toBe('lorem?lorem');
+    });
+
+    it('should download', () => {
+        jest.spyOn(window, 'open').mockImplementation(() => null);
+
+        expect(window.open).toHaveBeenCalledTimes(0);
+        DownloadService.download('lorem');
+        expect(window.open).toHaveBeenCalledTimes(1);
+        expect(window.open).toHaveBeenLastCalledWith('lorem?lorem');
+
+        (window.open as jest.Mock).mockClear();
+    });
+});

package/src/services/DownloadService.ts

@@ -0,0 +1,14 @@
+import { ApiService, AuthService } from '@sqrzro/utility';
+
+import FilterService from '@services/FilterService';
+
+const makeUrl = (alias: string): string => {
+    const query = FilterService.getUrlForFilters({ dl: '1', token: AuthService.getToken() }, false);
+    return `${ApiService.makeUrl(alias)}?${query}`;
+};
+
+const download = (alias: string): void => {
+    window.open(makeUrl(alias));
+};
+
+export default { download, makeUrl };

package/src/services/FilterComponentService.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable react/display-name */
+
+import React from 'react';
+
+import type { FilterField, FilterOptions } from '@filters/interfaces';
+
+import BooleanFilter, { renderSummary as renderBooleanSummary } from '@filters/BooleanFilter';
+import DateFilter, { renderSummary as renderDateSummary } from '@filters/DateFilter';
+import DropdownFilter, { renderSummary as renderDropdownSummary } from '@filters/DropdownFilter';
+import QuickDateFilter, { renderSummary as renderQuickDateSummary } from '@filters/QuickDateFilter';
+
+const booleanFilter = (options: FilterOptions): FilterField => ({
+    ...options,
+    renderField: (props): React.ReactNode => <BooleanFilter {...props} />,
+    renderSummary: renderBooleanSummary,
+});
+
+const dateFilter = (options: FilterOptions): FilterField => ({
+    ...options,
+    panelOptions: { size: 'lg' },
+    renderField: (props): React.ReactNode => <DateFilter {...props} />,
+    renderSummary: renderDateSummary,
+});
+
+const dropdownFilter = (options: FilterOptions): FilterField => ({
+    ...options,
+    panelOptions: { isScrollable: true },
+    renderField: (props): React.ReactNode => <DropdownFilter {...props} />,
+    renderSummary: renderDropdownSummary,
+});
+
+const quickDateFilter = (options: FilterOptions): FilterField => ({
+    ...options,
+    panelOptions: [{}, { size: 'lg' }],
+    renderField: (props): React.ReactNode => <QuickDateFilter {...props} />,
+    renderSummary: renderQuickDateSummary,
+});
+
+const FilterComponentService = {
+    boolean: booleanFilter,
+    date: dateFilter,
+    dropdown: dropdownFilter,
+    quickDate: quickDateFilter,
+};
+
+export default FilterComponentService;

package/src/services/FilterService.spec.ts

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

package/src/services/FilterService.ts

@@ -0,0 +1,58 @@
+import { parseSearch, stringifySearch } from '@sqrzro/utility';
+
+/* eslint-disable @typescript-eslint/consistent-indexed-object-style */
+interface Query {
+    [key: string]: Query | Query[] | string[] | string;
+}
+/* eslint-enable */
+
+export type FilterMap = Map<string, string[] | string | null>;
+
+export interface FilterOptions {
+    shouldFilterPage?: boolean;
+}
+
+const FILTERED_KEYS = ['id', 'alias'];
+
+const parseQueryEntry = (entry: Query | Query[] | string[] | string): string[] | string => {
+    if (Array.isArray(entry)) {
+        return entry.map((item) => item.toString());
+    }
+
+    return entry.toString();
+};
+
+const parseQuery = (query?: Query, options?: FilterOptions): FilterMap => {
+    const map = new Map<string, string[] | string | null>();
+
+    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 entries) {
+        map.set(key, parseQueryEntry(value));
+    }
+
+    return map;
+};
+
+const makeUrl = (data: FilterMap, includePathname = true): string =>
+    `${includePathname ? `${window.location.pathname}?` : ''}${stringifySearch(
+        Object.fromEntries(data)
+    )}`;
+
+const getUrlForFilters = (data?: Query, includePathname: boolean = true): string => {
+    const filters = parseQuery({ ...parseSearch(window.location.search), ...(data || {}) });
+    return makeUrl(filters, includePathname);
+};
+
+export default { getUrlForFilters, makeUrl, parseQuery };

package/src/services/FormatService.spec.ts

@@ -0,0 +1,83 @@
+import FormatService from './FormatService';
+
+describe('Format Service', () => {
+    describe('formatDate', () => {
+        const conversions: Record<string, Date | string> = {
+            '': '',
+            '05/08/1990': new Date(1990, 7, 5),
+            '12/12/2012': '2012-12-12',
+            '25/12/1999': '1999-12-25 15:00',
+        };
+
+        const date = new Date(2000, 8, 16, 15, 23);
+
+        it('should format date corrrectly', () => {
+            Object.entries(conversions).map(([expected, actual]) =>
+                expect(FormatService.date(actual)).toBe(expected)
+            );
+        });
+
+        it('should handle custom formats', () => {
+            expect(FormatService.date(date, 'do MMMM yyyy')).toBe('16th September 2000');
+            expect(FormatService.date(date, 'd-MMM-yy')).toBe('16-Sep-00');
+        });
+
+        it('should handle error', () => {
+            expect(FormatService.date('lorem-ipsum')).toBe('');
+        });
+    });
+
+    describe('formatDatetime', () => {
+        it('should format datetime correctly', () => {
+            const date = new Date(2000, 8, 16, 15, 23);
+            expect(FormatService.datetime(date)).toBe('16/09/2000 15:23');
+        });
+    });
+
+    describe('formatMoney', () => {
+        const conversions: Record<number | string, string> = {
+            '': '',
+            0: '£0.00',
+            100: '£100.00',
+            '-50': '-£50.00',
+            123.564: '£123.56',
+            123.567: '£123.57',
+            1000: '£1,000.00',
+            1000000: '£1,000,000.00',
+        };
+
+        it('should format money correctly', () => {
+            Object.entries(conversions).map(([actual, expected]) =>
+                expect(FormatService.money(actual)).toBe(expected)
+            );
+        });
+
+        it('should handle an array', () => {
+            expect(FormatService.money([])).toBe('');
+        });
+    });
+
+    describe('twoDigits', () => {
+        /* eslint-disable quote-props */
+        const conversions: Record<number | string, string> = {
+            '': '',
+            0: '00',
+            '10': '10',
+            '-5': '-05',
+            '6': '06',
+            7: '07',
+            1000: '1000',
+        };
+        /* eslint-enable */
+
+        it('should format two digits correctly', () => {
+            Object.entries(conversions).map(([actual, expected]) =>
+                expect(FormatService.twoDigits(actual)).toBe(expected)
+            );
+        });
+
+        it('should handle an array', () => {
+            expect(FormatService.twoDigits([])).toBe('');
+        });
+    });
+});

package/src/services/FormatService.ts

@@ -0,0 +1,55 @@
+import { format as fnsFormat, parseISO } from 'date-fns';
+
+const TWO_DIGITS = 10;
+
+const formatDate = (value?: unknown, formatString: string = 'dd/MM/Y'): string => {
+    if (!value || (typeof value !== 'string' && !(value instanceof Date))) {
+        return '';
+    }
+
+    const parsed = typeof value === 'string' ? parseISO(value) : value;
+
+    try {
+        return fnsFormat(parsed, formatString);
+    } catch (err) {
+        return '';
+    }
+};
+
+const formatDatetime = (value?: unknown): string => 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,');
+
+const formatMoney = (value?: unknown): string => {
+    if (!value || (typeof value !== 'string' && typeof value !== 'number')) {
+        return '';
+    }
+
+    const isNegative = value.toString().startsWith('-');
+    const numberValue = isNegative ? value.toString().substring(1) : value.toString();
+
+    return `${isNegative ? '-' : ''}£${addCommas(parseFloat(numberValue).toFixed(2))}`;
+};
+
+const formatTwoDigits = (value?: unknown): string => {
+    if (!value || (typeof value !== 'string' && typeof value !== 'number')) {
+        return '';
+    }
+
+    const isNegative = value.toString().startsWith('-');
+    const numberValue = isNegative ? value.toString().substring(1) : value.toString();
+
+    return `${isNegative ? '-' : ''}${
+        parseInt(numberValue, 10) < TWO_DIGITS ? '0' : ''
+    }${numberValue}`;
+};
+
+const FormatService = {
+    date: formatDate,
+    datetime: formatDatetime,
+    money: formatMoney,
+    twoDigits: formatTwoDigits,
+};
+
+export default FormatService;

package/src/services/ToastService.spec.ts

@@ -0,0 +1,44 @@
+import { waitFor } from '@testing-library/react';
+import ToastService from './ToastService';
+
+import { EventService } from '@sqrzro/utility';
+
+describe('ToastService', () => {
+    beforeEach(() => {
+        (EventService.publish as jest.Mock).mockClear();
+    });
+
+    it('should success', async () => {
+        expect(EventService.publish).toHaveBeenCalledTimes(0);
+
+        ToastService.success('lorem');
+        expect(EventService.publish).toHaveBeenCalledTimes(1);
+        expect(EventService.publish).toHaveBeenLastCalledWith('@toast/send', {});
+
+        await waitFor(() => {
+            expect(EventService.publish).toHaveBeenCalledTimes(2);
+        });
+
+        expect(EventService.publish).toHaveBeenLastCalledWith('@toast/send', {
+            type: 'success',
+            message: 'lorem',
+        });
+    });
+
+    it('should error', async () => {
+        expect(EventService.publish).toHaveBeenCalledTimes(0);
+
+        ToastService.error('lorem');
+        expect(EventService.publish).toHaveBeenCalledTimes(1);
+        expect(EventService.publish).toHaveBeenLastCalledWith('@toast/send', {});
+
+        await waitFor(() => {
+            expect(EventService.publish).toHaveBeenCalledTimes(2);
+        });
+
+        expect(EventService.publish).toHaveBeenLastCalledWith('@toast/send', {
+            type: 'error',
+            message: 'lorem',
+        });
+    });
+});

package/src/services/ToastService.ts

@@ -0,0 +1,19 @@
+import { EventService } from '@sqrzro/utility';
+
+const INTERVAL = 200;
+
+const 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);
+
+const error = (message: string): void => send('error', message);
+
+const ToastService = { success, error };
+
+export default ToastService;

package/src/styles/layout.css

@@ -0,0 +1,64 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 62.5%;
+}
+
+body {
+    background-color: var(--clr-grey200);
+    color: var(--clr-grey800);
+    font-family: var(--ff-body);
+    font-size: var(--fs-med);
+    line-height: var(--lh-body);
+    overflow-y: scroll;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    margin: 0;
+}
+
+ul,
+ol,
+dl {
+    list-style: none;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding-left: 0;
+}
+
+dd {
+    margin-left: 0;
+}
+
+a {
+    color: var(--clr-link);
+    cursor: pointer;
+    font-weight: var(--fw-bold);
+    text-decoration: none;
+
+    &:hover {
+        color: var(--clr-link-hover);
+    }
+}
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+hr {
+    border: 0;
+    border-top: .1rem var(--clr-grey300) solid;
+    margin: 3rem 0;
+}