@sqrzro/admin 1.0.0-beta.1

package/src/core/StaticTextInput/index.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import Icon from '@core/Icon';
+import IconButton from '@core/IconButton';
+
+import type { InputProps, InputValue } from '@utility/interfaces';
+
+import styles from './StaticTextInput.module.css';
+
+interface StaticTextInputProps extends InputProps<InputValue, HTMLButtonElement> {
+    icon?: string;
+    isOpen?: boolean;
+    isOptional?: boolean;
+    label?: string | null;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    placeholder?: string;
+}
+
+const hasValue = (value?: InputValue): boolean => {
+    if (Array.isArray(value)) {
+        return Boolean(value.filter((item) => Boolean(item)).length);
+    }
+    return Boolean(value);
+};
+
+const StaticTextInput: React.FunctionComponent<StaticTextInputProps> = ({
+    hasError,
+    icon,
+    isDisabled,
+    isOpen,
+    isOptional,
+    label,
+    name,
+    onChange,
+    onClick,
+    onKeyDown,
+    placeholder = 'Select...',
+    value,
+}) => {
+    const handleNullChange = (): void => {
+        if (onChange) {
+            onChange({ target: { name, value: null } });
+        }
+    };
+
+    return (
+        <div
+            className={classNames(
+                styles.root,
+                hasError && styles.rootHasError,
+                isDisabled && styles.rootIsDisabled,
+                !hasValue(value) && styles.rootIsPlaceholder
+            )}
+            data-testid="static-text-input-root"
+        >
+            <input
+                className={styles.input}
+                name={name}
+                type="hidden"
+                value={value ? value.toString() : ''}
+            />
+
+            {label || placeholder}
+
+            {icon && !isDisabled && (
+                <div className={styles.icon}>
+                    <Icon icon={icon} />
+                </div>
+            )}
+
+            {onClick && (
+                <button
+                    className={styles.control}
+                    disabled={isDisabled}
+                    onClick={onClick}
+                    onKeyDown={onKeyDown}
+                    type="button"
+                >
+                    {isOpen ? 'Close' : 'Open'}
+                </button>
+            )}
+
+            {isOptional && hasValue(value) && (
+                <span className={classNames(styles.icon, styles.iconClear)}>
+                    <IconButton icon="x" onClick={handleNullChange} size="sm">
+                        Clear
+                    </IconButton>
+                </span>
+            )}
+        </div>
+    );
+};
+
+StaticTextInput.propTypes = {
+    name: PropTypes.string.isRequired,
+    hasError: PropTypes.bool,
+    icon: PropTypes.string,
+    isDisabled: PropTypes.bool,
+    isOpen: PropTypes.bool,
+    isOptional: PropTypes.bool,
+    label: PropTypes.string,
+    placeholder: PropTypes.string,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired),
+    ]),
+    onChange: PropTypes.func,
+    onClick: PropTypes.func,
+};
+
+export default StaticTextInput;

package/src/core/Styled/Styled.spec.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Styled from './index';
+
+describe('Styled', () => {
+    it('should render', () => {
+        render(<Styled>Lorem</Styled>);
+    });
+
+    it('should render without style', () => {
+        render(<Styled>Lorem</Styled>);
+
+        const root = screen.getByTestId('styled-root');
+
+        expect(root.nodeName).toBe('SPAN');
+        expect(root).toHaveTextContent('Lorem');
+    });
+
+    it('should render with style', () => {
+        render(<Styled>[primary]:Lorem</Styled>);
+
+        const root = screen.getByTestId('styled-root');
+
+        expect(root.nodeName).toBe('STRONG');
+        expect(root).toHaveTextContent('Lorem');
+        expect(root).toHaveStyle('color: var(--clr-primary)');
+    });
+
+    it('should render with no content', () => {
+        render(<Styled>{null}</Styled>);
+
+        const root = screen.getByTestId('styled-root');
+
+        expect(root.nodeName).toBe('SPAN');
+        expect(root).toHaveTextContent('');
+    });
+});

package/src/core/Styled/Styled.story.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Styled from './index';
+
+export default { title: 'Core/Styled', component: Styled };
+
+export const Default = (): React.ReactElement => <Styled>[primary]:Lorem Ipsum</Styled>;
+
+export const Error = (): React.ReactElement => <Styled>[error]:Lorem Ipsum</Styled>;
+
+export const Unstyled = (): React.ReactElement => <Styled>Lorem Ipsum</Styled>;

package/src/core/Styled/index.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef } from 'react';
+
+const formatStyle = (input: React.ReactNode): string | [string, string] => {
+    if (!input) {
+        return '';
+    }
+
+    const match = /^\[(?<style>[^]+)\]:(?<text>.+)/u.exec(input.toString());
+
+    if (!match) {
+        return input as string;
+    }
+
+    const { style, text } = match.groups as { style: string; text: string };
+    return [style, text];
+};
+
+interface StyledComponentProps {
+    children: React.ReactNode;
+}
+
+/**
+ * A little utility component that allows strings to be styled with a colour. An example where this
+ * is used by a Square Zero Admin component is the `meta` prop of a `ListItem`. By using the
+ * following syntax:
+ *
+ * ```
+ * [style]:content
+ * ```
+ *
+ * You are able to colour text that wouldn't otherwise be stylable. For example, the primary colour:
+ *
+ * ```
+ * [primary]:Lorem Ipsum Dolor
+ * ```
+ *
+ * If a style is specified, the text is also emboldened in order to emphasize the colour. If a
+ * string is passed that does match the format, it is simply rendered as-is.
+ *
+ * React's forwardRef is required to handle situations where `Styled` is used with a `Link`, due to
+ * the way the Next.js link works under the hood.
+ */
+const StyledComponent: React.ForwardRefRenderFunction<HTMLButtonElement, StyledComponentProps> = (
+    { children }: StyledComponentProps,
+    ref
+) => {
+    const formatted = formatStyle(children);
+
+    return Array.isArray(formatted) ? (
+        <strong ref={ref} data-testid="styled-root" style={{ color: `var(--clr-${formatted[0]})` }}>
+            {formatted[1]}
+        </strong>
+    ) : (
+        <span ref={ref} data-testid="styled-root">
+            {formatted}
+        </span>
+    );
+};
+
+const Styled = forwardRef<HTMLButtonElement, StyledComponentProps>(StyledComponent);
+
+export default Styled;

package/src/core/SummaryListItem/SummaryListItem.module.css

@@ -0,0 +1,28 @@
+.root {
+    background: var(--clr-white);
+    border-radius: .5rem;
+    margin-bottom: 1rem;
+    padding: 1rem 1.5rem;
+    position: relative;
+
+    @media (--media-sml) {
+        width: calc(50% - 1rem);
+    }
+
+    @media (--media-med) {
+        width: 24%;
+    }
+}
+
+.term {
+    color: var(--clr-grey600);
+    font-size: var(--fs-xsml);
+    font-weight: var(--fw-bold);
+    letter-spacing: .1em;
+    text-transform: uppercase;
+}
+
+.definition {
+    font-size: var(--fs-med);
+    font-weight: var(--fw-bold);
+}

package/src/core/SummaryListItem/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Link from '@components/Link';
+
+import Styled from '@core/Styled';
+
+import styles from './SummaryListItem.module.css';
+
+interface SummaryListItemDefinition {
+    key?: string;
+    label?: string;
+    render?: (key: string) => React.ReactNode;
+    to?: string | null;
+    type?: string;
+}
+
+export type SummaryListValue = SummaryListItemDefinition | number | string;
+
+export interface SummaryListObject {
+    label: string;
+    value: SummaryListValue;
+}
+
+const renderDefinition = (
+    definition: SummaryListItemDefinition | number | string
+): React.ReactNode => {
+    if (typeof definition !== 'object') {
+        return definition;
+    }
+
+    if (definition.render && typeof definition.render === 'function') {
+        return definition.render(definition.key || '');
+    }
+
+    if (definition.type === 'link' && definition.to) {
+        return <Link to={definition.to}>{definition.label}</Link>;
+    }
+
+    if (definition.type === 'styled') {
+        return <Styled>{definition.label}</Styled>;
+    }
+
+    return 'object';
+};
+
+const SummaryListItem: React.FunctionComponent<SummaryListObject> = ({ label, value }) => (
+    <div className={styles.root}>
+        <dt className={styles.term}>{label}</dt>
+        <dd className={styles.definition}>{renderDefinition(value)}</dd>
+    </div>
+);
+
+SummaryListItem.propTypes = {
+    label: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.shape({})])
+        .isRequired,
+};
+
+export default SummaryListItem;

package/src/core/TableActionsCell/TableActionsCell.module.css

@@ -0,0 +1,3 @@
+.inner {
+    position: relative;
+}

package/src/core/TableActionsCell/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ListItemActions from '@core/ListItemActions';
+
+import type { SimpleAction } from '@utility/interfaces';
+
+import cellStyles from '../TableCell/TableCell.module.css';
+import styles from './TableActionsCell.module.css';
+
+interface TableActionsCellProps {
+    actions: SimpleAction[] | ((data?: Record<string, unknown>) => SimpleAction[]);
+    data?: Record<string, unknown>;
+}
+
+const TableActionsCell: React.FunctionComponent<TableActionsCellProps> = ({ actions, data }) => (
+    <td className={cellStyles.root}>
+        <div className={styles.inner}>
+            <ListItemActions actions={actions} data={data} />
+        </div>
+    </td>
+);
+
+TableActionsCell.propTypes = {
+    actions: PropTypes.oneOfType([
+        PropTypes.arrayOf(
+            PropTypes.shape({
+                label: PropTypes.string.isRequired,
+                onClick: PropTypes.func.isRequired,
+            }).isRequired
+        ),
+        PropTypes.func,
+    ]).isRequired,
+    data: PropTypes.shape({}).isRequired,
+};
+
+export default TableActionsCell;

package/src/core/TableCell/TableCell.module.css

@@ -0,0 +1,16 @@
+.root {
+    border: var(--clr-grey300) solid;
+    border-width: .1rem 0;
+    font-size: var(--fs-sml);
+    padding: 1.5rem 1rem;
+    text-align: left;
+    white-space: nowrap;
+}
+
+tr:nth-child(2n - 1) .root {
+    background-color: var(--clr-grey100);
+}
+
+.rootIsRightAligned {
+    text-align: right;
+}

package/src/core/TableCell/index.tsx

@@ -0,0 +1,39 @@
+import React, { isValidElement } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import Styled from '@core/Styled';
+
+import styles from './TableCell.module.css';
+
+export type Columns = Record<string, string | [string, boolean?]>;
+
+interface TableCellProps {
+    value?: React.ReactElement | string;
+    isRightAligned?: boolean;
+}
+
+const renderCellValue = (value?: React.ReactElement | string): React.ReactNode => {
+    if (!value) {
+        return null;
+    }
+
+    if (isValidElement(value)) {
+        return value;
+    }
+
+    return <Styled>{value}</Styled>;
+};
+
+const TableCell: React.FunctionComponent<TableCellProps> = ({ isRightAligned, value }) => (
+    <td className={classNames(styles.root, isRightAligned && styles.rootIsRightAligned)}>
+        {renderCellValue(value)}
+    </td>
+);
+
+TableCell.propTypes = {
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+    isRightAligned: PropTypes.bool,
+};
+
+export default TableCell;

package/src/core/TableHead/TableHead.module.css

@@ -0,0 +1,12 @@
+.root {
+    border-bottom: .2rem var(--clr-grey300) solid;
+    font-size: var(--fs-sml);
+    font-weight: var(--fw-bold);
+    line-height: 1;
+    padding: 0 1rem 1rem;
+    text-align: left;
+}
+
+.rootIsRightAligned {
+    text-align: right;
+}

package/src/core/TableHead/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import Assistive from '@core/Assistive';
+import type { TransformedColumn } from '@core/TableRow';
+
+import styles from './TableHead.module.css';
+
+interface TableHeadProps {
+    hasActions?: boolean;
+    columns: TransformedColumn[];
+}
+
+const TableHead: React.FunctionComponent<TableHeadProps> = ({ hasActions, columns }) => (
+    <thead>
+        <tr>
+            {columns.map((item) => (
+                <th
+                    key={item.key}
+                    className={classNames(
+                        styles.root,
+                        item.isRightAligned && styles.rootIsRightAligned
+                    )}
+                >
+                    {item.title}
+                </th>
+            ))}
+            {hasActions && (
+                <th className={classNames(styles.root)}>
+                    <Assistive>Actions</Assistive>
+                </th>
+            )}
+        </tr>
+    </thead>
+);
+
+TableHead.propTypes = {
+    columns: PropTypes.arrayOf(
+        PropTypes.shape({
+            key: PropTypes.string.isRequired,
+            title: PropTypes.string.isRequired,
+        }).isRequired
+    ).isRequired,
+    hasActions: PropTypes.bool,
+};
+
+export default TableHead;

package/src/core/TableRow/index.tsx

@@ -0,0 +1,64 @@
+import React, { isValidElement } from 'react';
+import PropTypes from 'prop-types';
+
+import TableActionsCell from '@core/TableActionsCell';
+import TableCell from '@core/TableCell';
+
+import type { TransformedObject } from '@utility/interfaces';
+
+export interface TransformedColumn {
+    key: number | string;
+    title: string;
+    isRightAligned?: boolean;
+}
+
+interface TableRowProps {
+    columns: TransformedColumn[];
+    data: TransformedObject;
+}
+
+const parseValue = (value: unknown): React.ReactElement | string => {
+    if (!value) {
+        return '';
+    }
+
+    if (typeof value === 'object' && isValidElement(value)) {
+        return value;
+    }
+
+    return (value as string).toString();
+};
+
+const TableRow: React.FunctionComponent<TableRowProps> = ({ columns, data }) => (
+    <tr>
+        {columns.map((item) => (
+            <TableCell
+                key={item.key}
+                isRightAligned={item.isRightAligned}
+                value={parseValue(data[item.key])}
+            />
+        ))}
+        {data.$actions?.length ? <TableActionsCell actions={data.$actions} data={data} /> : null}
+    </tr>
+);
+
+TableRow.propTypes = {
+    columns: PropTypes.arrayOf(
+        PropTypes.shape({
+            key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+            title: PropTypes.string.isRequired,
+        }).isRequired
+    ).isRequired,
+    data: PropTypes.shape({
+        $id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        $original: PropTypes.shape({}).isRequired,
+        $actions: PropTypes.arrayOf(
+            PropTypes.shape({
+                label: PropTypes.string.isRequired,
+                onClick: PropTypes.func.isRequired,
+            }).isRequired
+        ),
+    }).isRequired,
+};
+
+export default TableRow;

package/src/core/Tabs/Tabs.module.css

@@ -0,0 +1,50 @@
+.root {
+    background-color: var(--clr-white);
+    box-shadow: 0 .3rem .3rem rgba(0, 0, 0, .02), 0 1rem 1rem rgba(0, 0, 0, .02);
+    padding: 0 clamp(1rem, 2.5vw, 3rem);
+    position: sticky;
+    top: 8rem;
+    z-index: 3;
+
+    &::before {
+        border-top: .1rem var(--clr-grey300) solid;
+        content: '';
+        left: clamp(1rem, 2.5vw, 3rem);
+        position: absolute;
+        right: clamp(1rem, 2.5vw, 3rem);
+    }
+}
+
+.rootTopbar {
+    position: relative;
+    top: 0;
+}
+
+.list {
+    display: flex;
+    padding: 1rem 0;
+}
+
+.item {
+    margin-right: 1rem;
+}
+
+.itemIsDisabled {
+    opacity: .3;
+    pointer-events: none;
+}
+
+.link {
+    color: var(--clr-grey700);
+    border-radius: .3rem;
+    display: block;
+    font-size: var(--fs-sml);
+    font-weight: var(--fw-bold);
+    line-height: 1;
+    padding: 1rem;
+}
+
+.linkIsActive {
+    background-color: var(--clr-grey200);
+    pointer-events: none;
+}

package/src/core/Tabs/index.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { useRouter } from 'next/router';
+import type { NextRouter } from 'next/router';
+import PropTypes from 'prop-types';
+
+import { EventService } from '@sqrzro/utility';
+
+import Link from '@components/Link';
+import useLayout from '@hooks/useLayout';
+
+import styles from './Tabs.module.css';
+
+export interface TabItem {
+    label: string;
+    route: string;
+    isDisabled?: boolean | ((item: TabItem, sceneData: Record<string, unknown>) => boolean) | null;
+}
+
+const checkDisabled = (item: TabItem, sceneData: Record<string, unknown>): boolean => {
+    if (!item.isDisabled) {
+        return false;
+    }
+
+    return typeof item.isDisabled === 'function'
+        ? item.isDisabled(item, sceneData)
+        : item.isDisabled;
+};
+
+const checkActive = (router: NextRouter, route: string): boolean => {
+    if (!router) {
+        return false;
+    }
+
+    return router.pathname === `/${route.replace(/^\//u, '')}`;
+};
+
+interface TabsProps {
+    data: TabItem[];
+}
+
+export const Tabs: React.FunctionComponent<TabsProps> = ({ data }) => {
+    const { applyLayoutClassName } = useLayout();
+    const router = useRouter();
+    const [sceneData, setSceneData] = useState({});
+
+    useEffect(() => {
+        const sub = EventService.subscribe('@scene/data', (_key, responseData) => {
+            setSceneData(responseData);
+        });
+
+        return (): void => {
+            EventService.unsubscribe(sub);
+        };
+    }, []);
+
+    return (
+        <nav className={classNames(styles.root, applyLayoutClassName(styles))}>
+            <ul className={styles.list}>
+                {data.map((item) => (
+                    <li
+                        key={item.label}
+                        className={classNames(
+                            styles.item,
+                            checkDisabled(item, sceneData) && styles.itemIsDisabled
+                        )}
+                    >
+                        <Link
+                            className={classNames(
+                                styles.link,
+                                checkActive(router, item.route) && styles.linkIsActive
+                            )}
+                            to={item.route}
+                        >
+                            {item.label}
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </nav>
+    );
+};
+
+Tabs.propTypes = {
+    data: PropTypes.arrayOf(
+        PropTypes.shape({
+            isDisabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+            label: PropTypes.string.isRequired,
+            route: PropTypes.string.isRequired,
+        }).isRequired
+    ).isRequired,
+};
+
+export default Tabs;