@sqrzro/admin 1.0.0-beta.1

package/src/components/Scene/Scene.spec.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+
+import { EventService } from '@sqrzro/utility';
+import * as Router from 'next/router';
+
+import { createMockRouter } from '@utility/MockRouter';
+
+import Scene from './index';
+
+const mockTabs = [{ route: 'lorem', label: 'Lorem ' }];
+
+describe('Scene', () => {
+    it('should render', () => {
+        render(<Scene title="Lorem">Lorem</Scene>);
+    });
+
+    it('should render no tabs', () => {
+        render(<Scene title="Lorem">Lorem</Scene>);
+        expect(screen.queryByRole('list')).toBeNull();
+    });
+
+    it('should not render empty tabs', () => {
+        render(
+            <Scene tabs={[]} title="Lorem">
+                Lorem
+            </Scene>
+        );
+        expect(screen.queryByRole('list')).toBeNull();
+    });
+
+    it('should render tabs', () => {
+        render(
+            <Scene tabs={mockTabs} title="Lorem">
+                Lorem
+            </Scene>
+        );
+
+        expect(screen.getByRole('list')).toBeDefined();
+        expect(screen.queryAllByRole('listitem')[0]).toHaveTextContent(/^Lorem$/u);
+    });
+
+    it('should not render empty tabs', () => {
+        render(
+            <Scene tabs={[]} title="Lorem">
+                Lorem
+            </Scene>
+        );
+        expect(screen.queryByRole('list')).toBeNull();
+    });
+
+    it('should render disabled tabs', () => {
+        const mockDisabledTabs = [
+            { route: 'lorem', label: 'Lorem', isDisabled: true },
+            { route: 'ipsum', label: 'Ipsum' },
+        ];
+        render(
+            <Scene tabs={mockDisabledTabs} title="Lorem">
+                Lorem
+            </Scene>
+        );
+        expect(screen.queryAllByRole('listitem')[0]).toHaveClass('itemIsDisabled');
+    });
+
+    it('should render disabled tabs with a function', () => {
+        const mockDisabledTabs = [
+            { route: 'lorem', label: 'Lorem', isDisabled: (): boolean => true },
+            { route: 'ipsum', label: 'Ipsum' },
+        ];
+        render(
+            <Scene tabs={mockDisabledTabs} title="Lorem">
+                Lorem
+            </Scene>
+        );
+        expect(screen.queryAllByRole('listitem')[0]).toHaveClass('itemIsDisabled');
+    });
+
+    it('should render active tab', () => {
+        jest.spyOn(Router, 'useRouter').mockImplementationOnce(() => createMockRouter('lorem'));
+
+        render(
+            <Scene tabs={mockTabs} title="Lorem">
+                Lorem
+            </Scene>
+        );
+        expect(screen.queryAllByRole('link')[0]).toHaveClass('linkIsActive');
+    });
+
+    it('should render wide', () => {
+        render(
+            <Scene title="Lorem" isWide>
+                Lorem
+            </Scene>
+        );
+        expect(screen.getByText('Lorem')).toHaveClass('root rootIsWide');
+    });
+
+    it('should handle scene data', async () => {
+        const mockFn = jest.fn();
+
+        const mockDisabledTabs = [
+            { route: 'lorem', label: 'Lorem', isDisabled: mockFn },
+            { route: 'ipsum', label: 'Ipsum' },
+        ];
+
+        render(
+            <Scene tabs={mockDisabledTabs} title="Lorem">
+                Lorem
+            </Scene>
+        );
+
+        expect(mockFn).toHaveBeenCalledTimes(1);
+
+        await waitFor(() => {
+            EventService.publish('@scene/data', { lorem: 'lorem' });
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(2);
+        expect(mockFn).toHaveBeenLastCalledWith(mockDisabledTabs[0], {
+            lorem: 'lorem',
+        });
+    });
+});

package/src/components/Scene/Scene.story.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import Scene from './index';
+
+export default { title: 'Components/Scene', component: Scene };
+
+export const Default = (): React.ReactElement => <Scene title="Lorem">Lorem</Scene>;

package/src/components/Scene/index.tsx

@@ -0,0 +1,58 @@
+import React, { Fragment, useEffect } from 'react';
+import Head from 'next/head';
+import PropTypes from 'prop-types';
+
+import { EventService } from '@sqrzro/utility';
+
+import Container from '@core/Container';
+import ErrorBoundary from '@core/ErrorBoundary';
+import Tabs from '@core/Tabs';
+import type { TabItem } from '@core/Tabs';
+import useAppContext from '@hooks/useAppContext';
+
+import ConfirmService from '@services/ConfirmService';
+
+interface SceneProps {
+    children: React.ReactNode;
+    isWide?: boolean;
+    tabs?: TabItem[];
+    title: string;
+}
+
+const Scene: React.FunctionComponent<SceneProps> = ({ children, isWide, tabs, title }) => {
+    const { name } = useAppContext();
+
+    useEffect(() => {
+        ConfirmService.close();
+        EventService.publish('@app/title', title);
+    }, [title]);
+
+    return (
+        <Fragment>
+            <Head>
+                <title>
+                    {title} | {name}
+                </title>
+            </Head>
+            {tabs && tabs.length > 0 && <Tabs data={tabs} />}
+            <Container isWide={isWide}>
+                <ErrorBoundary>{children}</ErrorBoundary>
+            </Container>
+        </Fragment>
+    );
+};
+
+Scene.propTypes = {
+    children: PropTypes.node.isRequired,
+    title: PropTypes.string.isRequired,
+    isWide: PropTypes.bool,
+    tabs: PropTypes.arrayOf(
+        PropTypes.shape({
+            isDisabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+            label: PropTypes.string.isRequired,
+            route: PropTypes.string.isRequired,
+        }).isRequired
+    ),
+};
+
+export default Scene;

package/src/components/SummaryList/SummaryList.module.css

@@ -0,0 +1,16 @@
+.root {
+    margin-bottom: 3rem;
+
+    @media (--media-sml) {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        margin-bottom: 2rem;
+    }
+}
+
+.rootIsDisabled {
+    opacity: .3;
+    pointer-events: none;
+    transition: opacity .3s;
+}

package/src/components/SummaryList/SummaryList.spec.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import SummaryList from './index';
+
+const mockData = [
+    {
+        label: 'Lorem',
+        value: 'Lorem Ipsum',
+    },
+    {
+        label: 'Ipsum',
+        value: 'Adiscit Exceptor',
+    },
+];
+
+describe('SummaryList', () => {
+    it('should render', () => {
+        render(<SummaryList data={mockData} />);
+    });
+
+    it('should render defaults', () => {
+        render(<SummaryList data={mockData} />);
+
+        expect(screen.getByTestId('summary-list-root')).toHaveClass('root');
+        expect(screen.queryAllByRole('definition')).toHaveLength(2);
+    });
+
+    it('should render disabled', () => {
+        render(<SummaryList data={mockData} isDisabled />);
+        expect(screen.getByTestId('summary-list-root')).toHaveClass('root rootIsDisabled');
+    });
+
+    it('should render def with render function', () => {
+        const mockFunctionData = [
+            {
+                label: 'Lorem',
+                value: { render: (): React.ReactNode => <div>Lorem Ipsum</div> },
+            },
+        ];
+        render(<SummaryList data={mockFunctionData} />);
+        expect(screen.getByText('Lorem Ipsum')).toBeInTheDocument();
+    });
+
+    it('should render def with a link', () => {
+        const mockLinkData = [
+            {
+                label: 'Lorem',
+                value: { label: 'Lorem', type: 'link', to: 'lorem' },
+            },
+        ];
+        render(<SummaryList data={mockLinkData} />);
+        expect(screen.getByRole('link')).toHaveTextContent('Lorem');
+    });
+
+    it('should render styled', () => {
+        const mockStyledData = [
+            {
+                label: 'Lorem',
+                value: { type: 'styled', label: '[primary]:Styled' },
+            },
+        ];
+        render(<SummaryList data={mockStyledData} />);
+        expect(screen.getByText('Styled')).toHaveStyle('color: var(--clr-primary)');
+    });
+
+    it('should return if invalid type', () => {
+        const mockInvalidData = [
+            {
+                label: 'Lorem',
+                value: { type: 'invalid' },
+            },
+        ];
+        render(<SummaryList data={mockInvalidData} />);
+        expect(screen.getByText('object')).toBeInTheDocument();
+    });
+});

package/src/components/SummaryList/SummaryList.story.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import SummaryList from './index';
+
+const mockData = [
+    { label: 'Lorem', value: 'Lorem' },
+    { label: 'Ipsum', value: 'Ipsum' },
+];
+
+export default { title: 'Components/SummaryList', component: SummaryList };
+
+export const Default = (): React.ReactElement => <SummaryList data={mockData} />;

package/src/components/SummaryList/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import SummaryListItem from '@core/SummaryListItem';
+import type { SummaryListObject } from '@core/SummaryListItem';
+
+import styles from './SummaryList.module.css';
+
+interface SummaryListProps {
+    data: SummaryListObject[];
+    isDisabled?: boolean;
+}
+
+const SummaryList: React.FunctionComponent<SummaryListProps> = ({ data, isDisabled }) => (
+    <dl
+        className={classNames(styles.root, isDisabled && styles.rootIsDisabled)}
+        data-testid="summary-list-root"
+    >
+        {data.map((item) => (
+            <SummaryListItem key={item.label} label={item.label} value={item.value} />
+        ))}
+    </dl>
+);
+
+SummaryList.propTypes = {
+    data: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.shape({})])
+                .isRequired,
+        }).isRequired
+    ).isRequired,
+    isDisabled: PropTypes.bool,
+};
+
+export default SummaryList;

package/src/components/Switch/Switch.module.css

@@ -0,0 +1,86 @@
+.root {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    position: relative;
+}
+
+.rootIsDisabled {
+    opacity: .3;
+    pointer-events: none;
+}
+
+.rootIsMultiline {
+    align-items: flex-start;
+}
+
+.icon {
+    align-items: center;
+    background-color: var(--clr-white);
+    border: .1rem var(--clr-grey500) solid;
+    border-radius: 1.2rem;
+    display: flex;
+    fill: var(--clr-white);
+    height: 2.4rem;
+    justify-content: center;
+    min-width: 3.6rem;
+    padding-bottom: .1rem;
+    position: relative;
+    top: 0;
+    width: 2.4rem;
+
+    &::before {
+        background-color: var(--clr-grey500);
+        border-radius: 50%;
+        content: '';
+        height: 1.8rem;
+        left: .2rem;
+        position: absolute;
+        top: .2rem;
+        transition: transform .2s;
+        width: 1.8rem;
+    }
+}
+
+input:checked ~ .icon {
+    background-color: var(--clr-primary);
+    border-color: var(--clr-primary);
+
+    &::before {
+        background-color: var(--clr-white);
+        transform: translateX(1.2rem);
+    }
+}
+
+.iconIsMultiline {
+    top: .2rem;
+}
+
+.label {
+    color: var(--clr-grey600);
+    display: block;
+    font-size: var(--fs-sml);
+    font-weight: var(--fw-bold);
+    padding-left: 1.5rem;
+}
+
+.labelIsDisabled {
+    pointer-events: none;
+}
+
+.input {
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+}
+
+.extra {
+    color: var(--clr-grey500);
+    display: block;
+    font-size: var(--fs-sml);
+    line-height: 1.4;
+    padding-left: 1.5rem;
+    padding-top: .4rem;
+}

package/src/components/Switch/Switch.spec.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Switch from './index';
+
+describe('WebsiteInput', () => {
+    it('should render', () => {
+        render(<Switch label="Lorem" name="lorem" />);
+    });
+
+    it('should handle defaults', () => {
+        render(<Switch label="Lorem" name="lorem" />);
+
+        expect(screen.getByTestId('switch-root')).toHaveClass('root');
+
+        const input = screen.queryAllByRole('checkbox');
+        expect(input).toHaveLength(1);
+
+        const checked = screen.queryAllByRole('checkbox', { checked: true });
+        expect(checked).toHaveLength(0);
+    });
+
+    it('should be multiline', () => {
+        render(<Switch label="Lorem" name="lorem" isMultiline />);
+        expect(screen.getByTestId('switch-root')).toHaveClass('root rootIsMultiline');
+    });
+
+    it('should be disabled', () => {
+        render(<Switch label="Lorem" name="lorem" isDisabled />);
+        expect(screen.getByTestId('switch-root')).toHaveClass('root rootIsDisabled');
+    });
+
+    it('should have extra', () => {
+        render(<Switch extra="Ipsum" label="Lorem" name="lorem" />);
+
+        expect(screen.getByTestId('switch-root')).toHaveClass('root rootIsMultiline');
+        expect(screen.getByText('Ipsum')).toBeDefined();
+    });
+
+    it('should handle click', () => {
+        const mockFn = jest.fn();
+        render(<Switch label="Lorem" name="lorem" onChange={mockFn} />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getByTestId('switch-root'));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle change if no onchange', () => {
+        const mockFn = jest.fn();
+        render(<Switch label="Lorem" name="lorem" />);
+
+        userEvent.click(screen.getByTestId('switch-root'));
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should render value', () => {
+        render(<Switch label="Lorem" name="lorem" value={1} />);
+
+        const checked = screen.queryAllByRole('checkbox', { checked: true });
+        expect(checked).toHaveLength(1);
+    });
+});

package/src/components/Switch/index.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import Assistive from '@core/Assistive';
+
+import type { InputProps, SimpleEvent } from '@utility/interfaces';
+
+import styles from './Switch.module.css';
+
+interface SwitchProps extends InputProps {
+    extra?: string;
+    label: React.ReactNode | string;
+    isMultiline?: boolean;
+}
+
+const Switch: React.FunctionComponent<SwitchProps> = ({
+    extra,
+    name,
+    label,
+    value,
+    isDisabled,
+    isMultiline,
+    onChange,
+}) => {
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        if (onChange) {
+            const simpleEvent: SimpleEvent = { target: { name, value: event.target.checked } };
+            onChange(simpleEvent);
+        }
+    };
+
+    return (
+        <label
+            className={classNames(
+                styles.root,
+                isDisabled && styles.rootIsDisabled,
+                (isMultiline || extra) && styles.rootIsMultiline
+            )}
+            data-testid="switch-root"
+        >
+            <input
+                aria-checked={Boolean(value)}
+                checked={Boolean(value)}
+                className={styles.input}
+                disabled={isDisabled}
+                id={name}
+                name={name}
+                onChange={handleChange}
+                type="checkbox"
+                value="1"
+            />
+            <i
+                className={classNames(
+                    styles.icon,
+                    (isMultiline || extra) && styles.iconIsMultiline
+                )}
+                id={`${name}_icon`}
+            >
+                <Assistive>Yes</Assistive>
+            </i>
+            <div>
+                <span
+                    className={classNames(styles.label, isDisabled && styles.labelIsDisabled)}
+                    aria-hidden
+                >
+                    {label}
+                </span>
+                {extra ? <small className={styles.extra}>{extra}</small> : null}
+            </div>
+        </label>
+    );
+};
+
+Switch.propTypes = {
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+    name: PropTypes.string.isRequired,
+    extra: PropTypes.string,
+    isDisabled: PropTypes.bool,
+    isMultiline: PropTypes.bool,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+    onChange: PropTypes.func,
+};
+
+export default Switch;

package/src/components/Table/Table.module.css

@@ -0,0 +1,14 @@
+.root {
+    overflow-x: auto;
+}
+
+.table {
+    border-collapse: collapse;
+    transition: opacity .3s;
+    width: 100%;
+}
+
+.tableIsDisabled {
+    opacity: .3;
+    pointer-events: none;
+}