@sqrzro/admin 1.0.0-beta.1

package/src/core/NavigationItem/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import Link from '@components/Link';
+import useLayout from '@hooks/useLayout';
+
+import type { NavigationObject } from '@utility/interfaces';
+
+import styles from './NavigationItem.module.css';
+
+interface NavigationItemProps extends NavigationObject {
+    isActive?: boolean;
+}
+
+const NavigationItem: React.FunctionComponent<NavigationItemProps> = ({
+    isActive,
+    label,
+    to,
+    onClick,
+}) => {
+    const { applyLayoutClassName } = useLayout();
+    const rootClass = classNames(styles.root, applyLayoutClassName(styles));
+
+    if (to) {
+        return (
+            <li className={rootClass}>
+                <Link
+                    className={classNames(
+                        styles.link,
+                        applyLayoutClassName(styles, 'link'),
+                        isActive && styles.linkIsActive
+                    )}
+                    onClick={onClick}
+                    to={to}
+                >
+                    {label}
+                </Link>
+            </li>
+        );
+    }
+
+    return (
+        <li className={rootClass}>
+            <button className={styles.link} onClick={onClick} type="button">
+                {label}
+            </button>
+        </li>
+    );
+};
+
+NavigationItem.propTypes = {
+    label: PropTypes.string.isRequired,
+    isActive: PropTypes.bool,
+    to: PropTypes.string,
+    onClick: PropTypes.func,
+};
+
+export default NavigationItem;

package/src/core/Pagination/Pagination.module.css

@@ -0,0 +1,15 @@
+.root {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 2rem;
+    transition: opacity .3s;
+}
+
+.rootIsDisabled {
+    opacity: .3;
+    pointer-events: none;
+}
+
+.item:not(:last-child) {
+    margin-right: .5rem;
+}

package/src/core/Pagination/index.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { filterDuplicates } from '@sqrzro/utility';
+
+import PaginationItem from '@core/PaginationItem';
+
+import type { PaginationObject } from '@utility/interfaces';
+
+import styles from './Pagination.module.css';
+
+/**
+ * Find an index. In many cases this is simply the active page. However, with the first and
+ * last pages, the index is moved 'in' one space (i.e. when the active page is 1, the index is
+ * 2). This ensures that the first 3 links are shown on the first page, and the last 3 on the
+ * last page.
+ */
+const getIndex = (activePage: number, pageCount: number): number => {
+    if (activePage === 1) {
+        return 2;
+    }
+    if (activePage === pageCount) {
+        return pageCount - 1;
+    }
+    return activePage;
+};
+
+/**
+ * Reduce the links to their final array. If it's the first value, or the previous value is the
+ * number before the current one (i.e. the current is 4 and the previous is 3), add it to the array.
+ * Otherwise (i.e. the current is 5 and the previous is 2), add a hyphen and then the value. This
+ * will then get interpreted as an ellipsis in the pagination when rendered.
+ */
+const reduceLinks = (
+    acc: (number | '-')[],
+    cur: number,
+    index: number,
+    arr: (number | '-')[]
+): (number | '-')[] => {
+    if (index === 0 || arr[index - 1] === cur - 1) {
+        return [...acc, cur];
+    }
+    return [...acc, '-', cur];
+};
+
+/**
+ * The idea of the pagination is to always have the following links available:
+ * - The first page
+ * - The previous page (if applicable)
+ * - The current page
+ * - The next page (if applicable)
+ * - The last page
+ *
+ * There are situations where some of these will be the same page (i.e. on page 2, the previous page
+ * and the first page will both be page 1). When on the first page, links to the first 3 pages are
+ * displayed (rather than 2, which would be the default if the above rules are followed). The same
+ * is true with the last page
+ */
+const getLinks = (activePage: number, pageCount: number): (number | '-')[] => {
+    const index = getIndex(activePage, pageCount);
+
+    return filterDuplicates<number>([1, index - 1, index, index + 1, pageCount])
+        .filter((item) => item > 0 && item <= pageCount)
+        .reduce(reduceLinks, []);
+};
+
+interface PaginationProps extends PaginationObject {
+    isDisabled?: boolean;
+}
+
+const Pagination: React.FunctionComponent<PaginationProps> = ({
+    activePage,
+    isDisabled,
+    pageCount,
+}) => {
+    if (pageCount === 1) {
+        return null;
+    }
+
+    return (
+        <ul className={classNames(styles.root, isDisabled && styles.rootIsDisabled)}>
+            {/* eslint-disable react/no-array-index-key */}
+            {getLinks(activePage, pageCount).map((item, index) => (
+                <li key={index} className={styles.item}>
+                    <PaginationItem activePage={activePage} pageNumber={item} />
+                </li>
+            ))}
+            {/* eslint-enable react/no-array-index-key */}
+        </ul>
+    );
+};
+
+Pagination.propTypes = {
+    activePage: PropTypes.number.isRequired,
+    pageCount: PropTypes.number.isRequired,
+    isDisabled: PropTypes.bool,
+};
+
+export default Pagination;

package/src/core/PaginationItem/PaginationItem.module.css

@@ -0,0 +1,33 @@
+.gap {
+    align-items: center;
+    color: var(--clr-grey400);
+    display: flex;
+    height: 4rem;
+    justify-content: center;
+    letter-spacing: .3rem;
+    padding-left: .3rem;
+    width: 4rem;
+}
+
+.link {
+    align-items: center;
+    background-color: var(--clr-white);
+    border: .1rem var(--clr-grey400) solid;
+    border-radius: .2rem;
+    color: var(--clr-grey800);
+    display: flex;
+    height: 4rem;
+    justify-content: center;
+    width: 4rem;
+
+    &:hover {
+        background-color: var(--clr-grey100);
+    }
+}
+
+.linkIsActive {
+    background-color: var(--clr-grey700);
+    border-color: var(--clr-grey700);
+    color: var(--clr-white);
+    pointer-events: none;
+}

package/src/core/PaginationItem/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import Link from '@components/Link';
+
+import styles from './PaginationItem.module.css';
+
+interface PaginationItemProps {
+    activePage: number;
+    pageNumber: number | '-';
+}
+
+const getLinkUrl = (pageNumber: number | '-'): string => {
+    const windowLocation = `${window.location.pathname}${window.location.search}`;
+    const cleanUrl = windowLocation.replace(/(?:\?|&)page=[0-9]+/u, '');
+    const hasQuery = Boolean(/\?/u.exec(windowLocation) && !/\?page/u.exec(windowLocation));
+
+    return `${cleanUrl}${hasQuery ? '&' : '?'}page=${pageNumber}`;
+};
+
+const PaginationItem: React.FunctionComponent<PaginationItemProps> = ({
+    activePage,
+    pageNumber,
+}) => {
+    if (pageNumber === '-') {
+        return (
+            <span className={styles.gap} data-testid="pagination-item-gap">
+                &bull;&bull;&bull;
+            </span>
+        );
+    }
+
+    return (
+        <Link
+            className={classNames(styles.link, activePage === pageNumber && styles.linkIsActive)}
+            data-testid="pagination-item-link"
+            to={getLinkUrl(pageNumber)}
+        >
+            {pageNumber}
+        </Link>
+    );
+};
+
+PaginationItem.propTypes = {};
+
+export default PaginationItem;

package/src/core/Panel/Panel.module.css

@@ -0,0 +1,15 @@
+.root {
+    background-color: var(--clr-white);
+    border-radius: .5rem;
+    margin-bottom: 1rem;
+    padding: 2rem clamp(1rem, 2.5vw, 2rem);
+    width: 100%;
+}
+
+.rootIsPadded {
+    padding: 3rem clamp(1.5rem, 3.75vw, 3rem);
+}
+
+.rootIsSpaced {
+    margin-bottom: 2rem;
+}

package/src/core/Panel/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import styles from './Panel.module.css';
+
+interface PanelProps {
+    children: React.ReactNode;
+    isPadded?: boolean;
+    isSpaced?: boolean;
+}
+
+const Panel: React.FunctionComponent<PanelProps> = ({ children, isPadded, isSpaced }) => (
+    <div
+        className={classNames(
+            styles.root,
+            isPadded && styles.rootIsPadded,
+            isSpaced && styles.rootIsSpaced
+        )}
+    >
+        {children}
+    </div>
+);
+
+Panel.propTypes = {
+    children: PropTypes.node.isRequired,
+    isPadded: PropTypes.bool,
+    isSpaced: PropTypes.bool,
+};
+
+export default Panel;

package/src/core/RadialProgress/RadialProgress.module.css

@@ -0,0 +1,78 @@
+@keyframes spin {
+    0% {
+        opacity: 1;
+        transform: rotate(0);
+    }
+
+    100% {
+        opacity: 1;
+        transform: rotate(180deg);
+    }
+}
+
+.root {
+    border-radius: 50%;
+    overflow: hidden;
+    padding: .2rem;
+    position: relative;
+}
+
+.semi1 {
+    animation: spin 5s linear;
+    animation-fill-mode: forwards;
+    background-color: var(--clr-white);
+    height: 100%;
+    left: -50%;
+    position: absolute;
+    transform-origin: 100% 50%;
+    top: 0;
+    width: 100%;
+}
+
+.semi2 {
+    animation: spin 5s linear;
+    animation-delay: 5s;
+    animation-fill-mode: forwards;
+    background-color: var(--clr-white);
+    height: 100%;
+    opacity: 0;
+    position: absolute;
+    right: -50%;
+    top: 0;
+    transform-origin: 0 50%;
+    width: 100%;
+}
+
+.mask {
+    background-color: var(--clr-grey800);
+    height: 100%;
+    left: -50%;
+    position: absolute;
+    transform-origin: 100% 50%;
+    top: 0;
+    width: 100%;
+}
+
+.maskError {
+    background-color: var(--clr-error);
+}
+
+.maskSuccess {
+    background-color: var(--clr-success);
+}
+
+.icon {
+    background-color: var(--clr-grey800);
+    border-radius: 50%;
+    display: block;
+    fill: white;
+    position: relative;
+}
+
+.iconError {
+    background-color: var(--clr-error);
+}
+
+.iconSuccess {
+    background-color: var(--clr-success);
+}

package/src/core/RadialProgress/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { ucwords } from '@sqrzro/utility';
+
+import Icon from '@core/Icon';
+
+import styles from './RadialProgress.module.css';
+
+const DURATION_FACTOR = 2000;
+
+interface RadialProgressProps {
+    duration: number;
+    icon: string;
+    variant?: string;
+}
+
+const RadialProgress: React.FunctionComponent<RadialProgressProps> = ({
+    duration,
+    icon,
+    variant,
+}) => {
+    const adjustedDuration = duration / DURATION_FACTOR;
+
+    return (
+        <div className={styles.root}>
+            <div className={styles.semi1} style={{ animationDuration: `${adjustedDuration}s` }} />
+            <div
+                className={classNames(styles.mask, variant && styles[`mask${ucwords(variant)}`])}
+            />
+            <div
+                className={styles.semi2}
+                style={{
+                    animationDuration: `${adjustedDuration}s`,
+                    animationDelay: `${adjustedDuration}s`,
+                }}
+            />
+            <div className={classNames(styles.icon, variant && styles[`icon${ucwords(variant)}`])}>
+                <Icon icon={icon} size={30} />
+            </div>
+        </div>
+    );
+};
+
+RadialProgress.propTypes = {
+    duration: PropTypes.number.isRequired,
+    icon: PropTypes.string.isRequired,
+    variant: PropTypes.string,
+};
+
+export default RadialProgress;

package/src/core/StaticTextInput/StaticTextInput.module.css

@@ -0,0 +1,79 @@
+.root {
+    background-color: var(--clr-white);
+    border: .1rem var(--clr-grey400) solid;
+    border-radius: .3rem;
+    color: var(--clr-grey600);
+    display: flex;
+    flex-direction: column;
+    font-family: inherit;
+    font-size: var(--fs-med);
+    height: var(--input-height);
+    justify-content: center;
+    padding: 0 1.2rem;
+    position: relative;
+    transition: border-color .2s;
+    width: 100%;
+}
+
+.rootIsDisabled {
+    opacity: .3;
+    pointer-events: none;
+}
+
+.rootHasError {
+    border-color: var(--clr-error);
+}
+
+.rootIsPlaceholder {
+    color: var(--clr-grey500);
+}
+
+.icon {
+    align-items: center;
+    bottom: 0;
+    fill: var(--clr-grey600);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 4rem;
+    z-index: 2;
+
+    &::before {
+        border-left: .1rem var(--clr-grey400) solid;
+        bottom: .6rem;
+        content: '';
+        left: 0;
+        position: absolute;
+        top: .6rem;
+    }
+}
+
+.iconClear {
+    pointer-events: all;
+    right: 4rem;
+    z-index: 3;
+}
+
+.control {
+    background-color: transparent;
+    border: .1rem transparent solid;
+    border-radius: .3rem;
+    cursor: pointer;
+    height: calc(100% + .2rem);
+    left: -.1rem;
+    overflow: hidden;
+    position: absolute;
+    top: -.1rem;
+    text-indent: -999em;
+    width: calc(100% + .2rem);
+
+    &:focus {
+        border-color: var(--clr-primary);
+        outline: none;
+    }
+}

package/src/core/StaticTextInput/StaticTextInput.spec.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import StaticTextInput from './index';
+
+describe('StaticTextInput', () => {
+    it('should render', () => {
+        render(<StaticTextInput name="lorem" />);
+    });
+
+    it('should handle defaults', () => {
+        render(<StaticTextInput name="lorem" />);
+
+        const root = screen.getByTestId('static-text-input-root');
+
+        expect(root).toHaveClass('root rootIsPlaceholder');
+        expect(root).toHaveTextContent(/^Select...$/u);
+        expect(screen.queryByRole('img', { hidden: true })).toBeNull();
+        expect(screen.getByDisplayValue('')).toHaveAttribute('type', 'hidden');
+    });
+
+    it('should handle defaults (with onclick)', () => {
+        const mockFn = jest.fn();
+        render(<StaticTextInput name="lorem" onClick={mockFn} />);
+        expect(screen.getByText('Open')).not.toBeDisabled();
+    });
+
+    it('should not include clear if empty string', () => {
+        render(<StaticTextInput name="lorem" value={['']} isOptional />);
+        expect(screen.queryByText('Clear')).toBeNull();
+    });
+
+    it('should have error', () => {
+        render(<StaticTextInput name="lorem" hasError />);
+        expect(screen.getByTestId('static-text-input-root')).toHaveClass(
+            'root rootHasError rootIsPlaceholder'
+        );
+    });
+
+    it('should have icon', () => {
+        render(<StaticTextInput icon="arrowLeft" name="lorem" />);
+        expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+    });
+
+    it('should be disabled', () => {
+        const mockFn = jest.fn();
+        render(<StaticTextInput icon="arrowLeft" name="lorem" onClick={mockFn} isDisabled />);
+
+        expect(screen.getByTestId('static-text-input-root')).toHaveClass(
+            'root rootIsDisabled rootIsPlaceholder'
+        );
+        expect(screen.getByText('Open')).toBeDisabled();
+        expect(screen.queryByRole('img', { hidden: true })).toBeNull();
+    });
+
+    it('should be open', () => {
+        const mockFn = jest.fn();
+        render(<StaticTextInput name="lorem" onClick={mockFn} isOpen />);
+
+        expect(screen.queryByText('Open')).not.toBeInTheDocument();
+        expect(screen.getByText('Close')).toBeInTheDocument();
+    });
+
+    it('should be optional', () => {
+        render(<StaticTextInput name="lorem" isOptional />);
+        expect(screen.queryByText('Clear')).toBeNull();
+    });
+
+    it('should be optional with value', () => {
+        render(<StaticTextInput name="lorem" value="lorem" isOptional />);
+
+        const button = screen.getByText('Clear');
+        expect(button).toBeInTheDocument();
+
+        userEvent.click(button);
+    });
+
+    it('should be optional with onchange', () => {
+        const mockFn = jest.fn();
+        render(<StaticTextInput name="lorem" onChange={mockFn} value="lorem" isOptional />);
+
+        const button = screen.getByText('Clear');
+        expect(button).toBeInTheDocument();
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(button);
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({ target: { name: 'lorem', value: null } });
+    });
+
+    it('should have label', () => {
+        render(<StaticTextInput label="Lorem" name="lorem" />);
+        expect(screen.getByTestId('static-text-input-root')).toHaveTextContent(/^Lorem$/u);
+    });
+
+    it('should have custom placeholder', () => {
+        render(<StaticTextInput name="lorem" placeholder="Lorem" />);
+        expect(screen.getByTestId('static-text-input-root')).toHaveTextContent(/^Lorem$/u);
+    });
+
+    it('should have value', () => {
+        render(<StaticTextInput name="lorem" value="lorem" />);
+
+        expect(screen.getByTestId('static-text-input-root')).toHaveClass('root');
+        expect(screen.getByDisplayValue('lorem')).toHaveAttribute('type', 'hidden');
+    });
+
+    it('should have value (array)', () => {
+        render(<StaticTextInput name="lorem" value={['lorem', 'ipsum']} />);
+
+        expect(screen.getByTestId('static-text-input-root')).toHaveClass('root');
+        expect(screen.getByDisplayValue('lorem,ipsum')).toHaveAttribute('type', 'hidden');
+    });
+
+    it('should have value (empty array)', () => {
+        render(<StaticTextInput name="lorem" value={[]} />);
+
+        expect(screen.getByTestId('static-text-input-root')).toHaveClass('root rootIsPlaceholder');
+        expect(screen.getByDisplayValue('')).toHaveAttribute('type', 'hidden');
+    });
+
+    it('should handle onclick', () => {
+        const mockFn = jest.fn();
+        render(<StaticTextInput name="lorem" onClick={mockFn} />);
+
+        const button = screen.getByText('Open');
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(button);
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+});