@sqrzro/admin 1.0.0-beta.1

package/src/styles/variables.css

@@ -0,0 +1,85 @@
+@custom-media --media-sml (min-width: 580px);
+@custom-media --media-med (min-width: 740px);
+@custom-media --media-lrg (min-width: 900px);
+
+:root {
+    /*
+     * Colours
+     */
+    --clr-black: #000;
+    --clr-white: #fff;
+    --clr-primary: #2ecc40;
+    --clr-secondary: #ee3768;
+    --clr-secondary-dark: #d3184a;
+    --clr-tertiary: #efad2b;
+    --clr-grey100: #f7fafc;
+    --clr-grey200: #edf2f7;
+    --clr-grey300: #e2e8f0;
+    --clr-grey400: #cbd5e0;
+    --clr-grey500: #a0aec0;
+    --clr-grey600: #718096;
+    --clr-grey700: #4a5568;
+    --clr-grey800: #2d3748;
+    --clr-grey900: #1a202c;
+    --clr-link: #0074d9;
+    --clr-link-hover: #1e40af;
+    --clr-success: #2ecc40;
+    --clr-warning: #efad2b;
+    --clr-danger: #ee3768;
+    --clr-danger-dark: #d3184a;
+    --clr-error: #ee3768;
+    --clr-error-dark: #d3184a;
+    --clr-pending: #a0aec0;
+    --clr-brand: #2ecc40;
+
+    /*
+     * Opacity Variants
+     */
+    --clr-white0: rgba(255, 255, 255, 0);
+    --clr-white80: rgba(255, 255, 255, .8);
+    --clr-primary5: rgba(46, 204, 64, .05);
+    --clr-primary10: rgba(46, 204, 64, .1);
+    --clr-primary20: rgba(46, 204, 64, .2);
+    --clr-grey1000: rgba(rgb(247, 250, 252), 0);
+    --clr-grey10080: rgba(rgb(247, 250, 252), .8);
+    --clr-warning5: rgba(239, 173, 43, .05);
+    --clr-error5: rgba(238, 55, 104, .05);
+
+    /*
+     * Font Families
+     */
+    --ff-body: ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+    /*
+     * Font Sizes
+     */
+    --fs-xxsml: 1rem;
+    --fs-xsml: 1.2rem;
+    --fs-sml: 1.3rem;
+    --fs-med: 1.4rem;
+    --fs-lrg: 1.8rem;
+    --fs-xlrg: 2.2rem;
+    --fs-xxlrg: 3.2rem;
+    --fs-xxxlrg: 4.8rem;
+
+    /*
+     * Line Heights
+     */
+    --lh-body: 1.5;
+    --lh-tight: 1.2;
+
+    /*
+     * Font Weights
+     */
+    --fw-body: 400;
+    --fw-semibold: 500;
+    --fw-bold: 600;
+
+    /*
+     * Structure
+     */
+    --banner-height: 6rem;
+    --banner-width: 22rem;
+    --header-height: 8rem;
+    --input-height: 4.4rem;
+}

package/src/typings.d.ts

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

package/src/utility/MockRouter/index.ts

@@ -0,0 +1,45 @@
+/* istanbul ignore file */
+
+import type { NextRouter } from 'next/router';
+
+const getPathname = (pathname?: string): string => {
+    if (!pathname) {
+        return '/';
+    }
+    return /^\//u.exec(pathname) ? pathname : `/${pathname}`;
+};
+
+export const createMockRouter = (
+    pathname?: string,
+    query?: Record<string, string>
+): NextRouter => ({
+    asPath: getPathname(pathname),
+    back: (): null => null,
+    basePath: '',
+    beforePopState: (): null => null,
+    events: {
+        emit: (): null => null,
+        off: (): null => null,
+        on: (): null => null,
+    },
+    isFallback: false,
+    isLocaleDomain: false,
+    isPreview: false,
+    isReady: false,
+    pathname: getPathname(pathname),
+    prefetch: async (): Promise<void> =>
+        new Promise((resolve): void => {
+            resolve();
+        }),
+    push: async (): Promise<boolean> =>
+        new Promise((resolve): void => {
+            resolve(true);
+        }),
+    query: query || {},
+    reload: (): null => null,
+    replace: async (): Promise<boolean> =>
+        new Promise((resolve): void => {
+            resolve(true);
+        }),
+    route: '',
+});

package/src/utility/StorybookPanel/StorybookPanel.module.css

@@ -0,0 +1,9 @@
+.root {
+    background-color: #edf2f7;
+    min-height: 20rem;
+    transform: scale(1);
+}
+
+.rootIsDeep {
+    min-height: 30rem;
+}

package/src/utility/StorybookPanel/index.tsx

@@ -0,0 +1,25 @@
+import React, { Fragment } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import styles from './StorybookPanel.module.css';
+
+interface StorybookPanelProps {
+    children: React.ReactNode;
+    isDeep?: boolean;
+}
+
+const StorybookPanel: React.FunctionComponent<StorybookPanelProps> = ({ children, isDeep }) => (
+    <Fragment>
+        {/* eslint-disable @typescript-eslint/naming-convention, react/no-danger */}
+        <style dangerouslySetInnerHTML={{ __html: '.docs-story { background-color: #edf2f7 }' }} />
+        <div className={classNames(styles.root, isDeep && styles.rootIsDeep)}>{children}</div>
+    </Fragment>
+);
+
+StorybookPanel.propTypes = {
+    children: PropTypes.node.isRequired,
+    isDeep: PropTypes.bool,
+};
+
+export default StorybookPanel;

package/src/utility/TestChangeHandler/TestChangeHandler.module.css

@@ -0,0 +1,7 @@
+.value {
+    color: var(--clr-grey600);
+    display: flex;
+    font-size: var(--fs-sml);
+    font-style: italic;
+    padding-top: 1rem;
+}

package/src/utility/TestChangeHandler/TestChangeHandler.spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import TestChangeHandler from './index';
+
+describe('TestChangeHandler', () => {
+    it('should return with valid element', () => {
+        render(
+            <TestChangeHandler>
+                <div>Lorem</div>
+            </TestChangeHandler>
+        );
+        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent(
+            /^LoremThe current value of the above component is:$/u
+        );
+    });
+
+    it('should return null with invalid element', () => {
+        render(<TestChangeHandler>Lorem</TestChangeHandler>);
+        expect(screen.getByTestId('test-change-handler-root')).toHaveTextContent(
+            /^The current value of the above component is:$/u
+        );
+    });
+});

package/src/utility/TestChangeHandler/index.tsx

@@ -0,0 +1,54 @@
+import React, { Children, cloneElement, isValidElement, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import type { InputValue, SimpleEvent } from '@utility/interfaces';
+
+import styles from './TestChangeHandler.module.css';
+
+interface TestChangeHandlerProps {
+    children: React.ReactNode;
+    defaultValue?: InputValue;
+}
+
+const TestChangeHandler: React.FunctionComponent<TestChangeHandlerProps> = ({
+    children,
+    defaultValue,
+}) => {
+    const [value, setValue] = useState<InputValue | undefined>(defaultValue);
+
+    const onChange = (event: SimpleEvent): void => {
+        setValue(event.target.value);
+    };
+
+    const injectedChildren = Children.map(children, (child) => {
+        if (!isValidElement(child)) {
+            return null;
+        }
+
+        return cloneElement(child, { value, onChange });
+    });
+
+    return (
+        <div data-testid="test-change-handler-root">
+            {injectedChildren}
+            <div className={styles.value}>
+                The current value of the above component is:&nbsp;
+                <strong data-testid="test-change-handler-value">{JSON.stringify(value)}</strong>
+            </div>
+        </div>
+    );
+};
+
+TestChangeHandler.propTypes = {
+    children: PropTypes.node.isRequired,
+    defaultValue: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.bool,
+        PropTypes.arrayOf(
+            PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).isRequired
+        ),
+    ]),
+};
+
+export default TestChangeHandler;

package/src/utility/create-app.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { AppInitialProps } from 'next/app';
+
+import { ApiService } from '@sqrzro/utility';
+
+import App from '@components/App';
+import type { AppType } from '@components/App';
+import type { Config } from '@hooks/useAppContext';
+import { AppPropTypes } from '@utility/prop-types';
+
+const createApp = (config: Config): AppType => {
+    ApiService.registerConfig({ path: config.paths?.api });
+
+    /* eslint-disable @typescript-eslint/naming-convention */
+    const AdminApp: AppType = ({ Component, Logo, router }) => (
+        <App Component={Component} Logo={Logo} config={config} router={router} />
+    );
+    /* eslint-enable */
+
+    AdminApp.propTypes = AppPropTypes;
+
+    // Ensure no page is statically generated
+    // eslint-disable-next-line @typescript-eslint/require-await
+    AdminApp.getInitialProps = async (): Promise<AppInitialProps> => ({ pageProps: null });
+
+    return AdminApp;
+};
+
+export default createApp;

package/src/utility/interfaces.ts

@@ -0,0 +1,119 @@
+import type { FunctionComponent, KeyboardEventHandler, MouseEventHandler } from 'react';
+import type { NextRouter } from 'next/router';
+
+/*
+ * ---------------------------------------------------------------------------------
+ * Interfaces
+ * ---------------------------------------------------------------------------------
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface LayoutComponent extends FunctionComponent<{ children: React.ReactNode }> {}
+
+export interface SceneComponentType extends FunctionComponent<{ router: NextRouter }> {
+    Layout?: LayoutComponent;
+    hasLayout?: boolean;
+}
+
+export interface SimpleAction {
+    isDisabled?: boolean | null;
+    label: string;
+    onClick: () => void;
+    variant?: ButtonVariant | ButtonVariant[];
+}
+
+export interface NavigationObject {
+    label: string;
+    to?: string | null;
+    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    permission?: string;
+}
+
+export type Remote = string | [string, Record<string, string[] | string | null>];
+
+export interface SimpleObject {
+    id: number | string;
+    name: string;
+}
+
+type SimpleActionFunction = (data?: Record<string, unknown>) => SimpleAction[];
+
+export interface TransformedObject {
+    [key: string]: unknown;
+    $id: number | string;
+    $actions?: SimpleAction[] | SimpleActionFunction | null;
+    $original?: Record<string, unknown>;
+}
+
+export type Transformer<T = Record<string, unknown>> =
+    | ((item: T) => TransformedObject)
+    | [(item: T) => TransformedObject, SimpleAction[] | SimpleActionFunction];
+
+export interface SimpleEventTarget<T = InputValue> {
+    name: string;
+    value: T;
+
+    /*
+     * These are added purely to get around `Form` element handling both `SimpleEvent` and
+     * `React.ChangeEvent<HTMLInputElement>` in the same function.
+     */
+    readonly checked?: boolean;
+    readonly type?: string;
+}
+
+export type InputValue = File | InputValue[] | boolean | number | string | null;
+
+export interface SimpleEvent<T = InputValue> {
+    item?: SimpleObject;
+    target: SimpleEventTarget<T>;
+}
+
+export type SimpleEventHandler<P = InputValue, T = SimpleEvent<P>> = (event: T) => void;
+
+export type StyleVariant =
+    | 'bordered'
+    | 'danger'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'tertiary'
+    | 'warning';
+
+export type ButtonVariant = StyleVariant | 'link';
+
+export interface InputProps<T = InputValue, E = HTMLInputElement> {
+    /** Whether or not the field has a validation error */
+    hasError?: boolean;
+    id?: string;
+    isDisabled?: boolean;
+
+    /** The name of the field */
+    name: string;
+    onChange?: SimpleEventHandler<T>;
+    onKeyDown?: KeyboardEventHandler<E>;
+
+    /** The value of the field */
+    value?: T;
+}
+
+export interface PaginationObject {
+    activePage: number;
+    pageCount: number;
+}
+
+/*
+ * ---------------------------------------------------------------------------------
+ * Checks
+ * ---------------------------------------------------------------------------------
+ */
+
+export const isString = (variable: unknown): variable is string => typeof variable === 'string';
+
+export const isStringArray = (variable: unknown): variable is string[] =>
+    Array.isArray(variable) && (variable.length === 0 || isString(variable[0]));
+
+export const isSimpleObject = (variable: unknown): variable is SimpleObject =>
+    isString((variable as SimpleObject).name);
+
+export const isSimpleObjectArray = (variable: unknown): variable is SimpleObject[] =>
+    Array.isArray(variable) && (variable.length === 0 || isSimpleObject(variable[0]));

package/src/utility/prop-types.ts

@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types';
+
+import type { ButtonVariant, StyleVariant } from '@utility/interfaces';
+
+export const NextRouterPropType = PropTypes.shape({
+    asPath: PropTypes.string.isRequired,
+    back: PropTypes.func.isRequired,
+    basePath: PropTypes.string.isRequired,
+    beforePopState: PropTypes.func.isRequired,
+    events: PropTypes.shape({
+        emit: PropTypes.func.isRequired,
+        off: PropTypes.func.isRequired,
+        on: PropTypes.func.isRequired,
+    }).isRequired,
+    isFallback: PropTypes.bool.isRequired,
+    isLocaleDomain: PropTypes.bool.isRequired,
+    isPreview: PropTypes.bool.isRequired,
+    isReady: PropTypes.bool.isRequired,
+    pathname: PropTypes.string.isRequired,
+    prefetch: PropTypes.func.isRequired,
+    push: PropTypes.func.isRequired,
+    query: PropTypes.shape({}).isRequired,
+    reload: PropTypes.func.isRequired,
+    replace: PropTypes.func.isRequired,
+    route: PropTypes.string.isRequired,
+});
+
+const styleVariantPropTypes: StyleVariant[] = [
+    'bordered',
+    'danger',
+    'primary',
+    'secondary',
+    'success',
+    'tertiary',
+];
+
+const buttonVariantPropTypes: ButtonVariant[] = [...styleVariantPropTypes, 'link'];
+
+export const StyleVariantPropType = PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOf(styleVariantPropTypes).isRequired),
+    PropTypes.oneOf(styleVariantPropTypes).isRequired,
+]);
+
+export const ButtonVariantPropType = PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOf(buttonVariantPropTypes).isRequired),
+    PropTypes.oneOf(buttonVariantPropTypes).isRequired,
+]);
+
+export const AppPropTypes = {
+    Component: PropTypes.func.isRequired,
+    config: PropTypes.shape({
+        auth: PropTypes.shape({}),
+        name: PropTypes.string.isRequired,
+        navigation: PropTypes.arrayOf(
+            PropTypes.oneOfType([
+                PropTypes.shape({
+                    label: PropTypes.string.isRequired,
+                    to: PropTypes.string,
+                }).isRequired,
+                PropTypes.string.isRequired,
+            ]).isRequired
+        ).isRequired,
+        paths: PropTypes.shape({}).isRequired,
+        style: PropTypes.shape({}),
+    }),
+    Logo: PropTypes.func,
+};

package/tests/setupFilesAfterEnv.js

@@ -0,0 +1,10 @@
+require('@testing-library/jest-dom');
+require('regenerator-runtime/runtime');
+
+require('jest-fetch-mock').enableMocks();
+
+const { ApiService } = require('@sqrzro/utility');
+
+beforeEach(() => {
+    ApiService.registerConfig({ path: 'http://example.com' });
+});

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "baseUrl": "./src",
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "importHelpers": true,
+        "isolatedModules": true,
+        "jsx": "react",
+        "lib": ["esnext", "dom", "dom.iterable"],
+        "module": "esnext",
+        "moduleResolution": "node",
+        "paths": {
+            "@components/*": ["./components/*"],
+            "@core/*": ["./core/*"],
+            "@filters/*": ["./filters/*"],
+            "@hooks/*": ["./hooks/*"],
+            "@services/*": ["./services/*"],
+            "@utility/*": ["./utility/*"]
+        },
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        "strict": true,
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/tsconfig.types.json

@@ -0,0 +1,9 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "declaration": true,
+        "declarationDir": "dist/types",
+        "outDir": "dist/types"
+    },
+    "exclude": ["src/**/*.spec.ts", "src/**/*.spec.tsx", "src/**/*.story.tsx"]
+}