@sqrzro/admin 1.0.0-beta.1

package/src/core/FixedActions/FixedActions.module.css

@@ -0,0 +1,24 @@
+.root {
+    --top: calc((var(--header-height) - var(--input-height)) / 2);
+
+    display: flex;
+    flex-direction: row;
+    position: fixed;
+    right: clamp(1rem, 2.5vw, 3rem);
+    top: var(--top);
+    z-index: 4;
+
+    & > * {
+        width: auto;
+    }
+
+    & > *:not(:first-child) {
+        margin-left: 1rem;
+    }
+}
+
+.rootTopbar {
+    --top: calc((var(--header-height) - var(--input-height)) / 2);
+
+    top: calc(var(--banner-height) + var(--top));
+}

package/src/core/FixedActions/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import useLayout from '@hooks/useLayout';
+
+import Button from '@components/Button';
+
+import styles from './FixedActions.module.css';
+
+interface FixedActionsProps {
+    children?: React.ReactNode;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    label: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    to?: string;
+    type?: 'button' | 'submit';
+}
+
+const FixedActions: React.FunctionComponent<FixedActionsProps> = ({
+    children,
+    label,
+    isDisabled,
+    isLoading,
+    onClick,
+    to,
+    type,
+}) => {
+    const { applyLayoutClassName } = useLayout();
+
+    return (
+        <div className={classNames(styles.root, applyLayoutClassName(styles))}>
+            {children}
+            <Button isDisabled={isDisabled || isLoading} onClick={onClick} to={to} type={type}>
+                {label}
+            </Button>
+        </div>
+    );
+};
+
+FixedActions.propTypes = {
+    label: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    isDisabled: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    to: PropTypes.string,
+    type: PropTypes.oneOf(['button', 'submit']),
+    onClick: PropTypes.func,
+};
+
+export default FixedActions;

package/src/core/FormError/FormError.module.css

@@ -0,0 +1,7 @@
+.root {
+    border-radius: .3rem;
+    color: var(--clr-error);
+    font-size: var(--fs-sml);
+    font-weight: var(--fw-bold);
+    line-height: 1;
+}

package/src/core/FormError/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './FormError.module.css';
+
+interface FormErrorProps {
+    message: string;
+}
+
+const FormError: React.FunctionComponent<FormErrorProps> = ({ message }) => (
+    <div className={styles.root}>{message}</div>
+);
+
+FormError.propTypes = {
+    message: PropTypes.string.isRequired,
+};
+
+export default FormError;

package/src/core/FormLabel/FormLabel.module.css

@@ -0,0 +1,15 @@
+.root {
+    color: var(--clr-grey600);
+    display: flex;
+    font-size: var(--fs-sml);
+    font-weight: var(--fw-semibold);
+    line-height: 1;
+}
+
+.optional {
+    color: var(--clr-grey500);
+    font-size: var(--fs-xsml);
+    font-style: italic;
+    margin-left: 1rem;
+    padding-top: .1rem;
+}

package/src/core/FormLabel/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './FormLabel.module.css';
+
+interface FormLabelProps {
+    children: React.ReactNode;
+    htmlFor: string;
+    isOptional?: boolean;
+}
+
+const FormLabel: React.FunctionComponent<FormLabelProps> = ({ children, htmlFor, isOptional }) => (
+    <label className={styles.root} htmlFor={htmlFor}>
+        {children}
+        {isOptional && <small className={styles.optional}>(Optional)</small>}
+    </label>
+);
+
+FormLabel.propTypes = {
+    children: PropTypes.node.isRequired,
+    htmlFor: PropTypes.string.isRequired,
+    isOptional: PropTypes.bool,
+};
+
+export default FormLabel;

package/src/core/FormLegend/FormLegend.module.css

@@ -0,0 +1,13 @@
+.root {
+    border-bottom: .1rem var(--clr-grey300) solid;
+    color: var(--clr-grey600);
+    float: left;
+    font-size: var(--fs-lrg);
+    font-weight: var(--fw-bold);
+    line-height: 1;
+    margin-bottom: 3rem;
+    margin-left: -.2rem;
+    margin-top: -.5rem;
+    padding-bottom: 2rem;
+    width: 100%;
+}

package/src/core/FormLegend/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './FormLegend.module.css';
+
+interface FormLegendProps {
+    children: React.ReactNode;
+}
+
+const FormLegend: React.FunctionComponent<FormLegendProps> = ({ children }) => (
+    <legend className={styles.root}>{children}</legend>
+);
+
+FormLegend.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+
+export default FormLegend;

package/src/core/Header/Header.module.css

@@ -0,0 +1,35 @@
+.root {
+    background-color: var(--clr-white);
+    box-shadow: 0 .3rem .3rem rgba(0, 0, 0, .02), 0 1rem 1rem rgba(0, 0, 0, .02);
+    display: flex;
+    flex-direction: column;
+    height: 6rem;
+    justify-content: center;
+    padding: 0 clamp(1rem, 2.5vw, 3rem);
+    position: sticky;
+    text-align: left;
+    top: 0;
+    z-index: 2;
+
+    @media (--media-sml) {
+        height: var(--header-height);
+    }
+}
+
+.rootTopbar {
+    position: relative;
+}
+
+.title {
+    color: var(--clr-grey600);
+    font-size: var(--fs-lrg);
+    font-weight: var(--fw-bold);
+
+    @media (--media-sml) {
+        font-size: var(--fs-xlrg);
+    }
+}
+
+.titleDanger {
+    color: var(--clr-danger);
+}

package/src/core/Header/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { ucwords } from '@sqrzro/utility';
+
+import useLayout from '@hooks/useLayout';
+
+import type { StyleVariant } from '@utility/interfaces';
+
+import styles from './Header.module.css';
+
+interface HeaderProps {
+    title?: string | null;
+    variant?: StyleVariant;
+}
+
+const Header: React.FunctionComponent<HeaderProps> = ({ title, variant }) => {
+    const { applyLayoutClassName } = useLayout();
+
+    return (
+        <header className={classNames(styles.root, applyLayoutClassName(styles))}>
+            <h1
+                className={classNames(styles.title, variant && styles[`title${ucwords(variant)}`])}
+                data-testid="header-title"
+            >
+                {title || '•••'}
+            </h1>
+        </header>
+    );
+};
+
+Header.propTypes = {
+    title: PropTypes.string,
+};
+
+export default Header;

package/src/core/Icon/Icon.spec.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Icon from './index';
+
+describe('Icon', () => {
+    it('should render', () => {
+        render(<Icon icon="x" />);
+    });
+
+    it('should render defaults', () => {
+        render(<Icon icon="x" />);
+
+        const img = screen.getByRole('img', { hidden: true });
+        // eslint-disable-next-line testing-library/no-node-access
+        expect(img?.querySelector('path')?.getAttribute('d')?.startsWith('M4.293')).toBe(true);
+        expect(img.style).toHaveProperty('width', '20px');
+    });
+
+    it('should render size', () => {
+        render(<Icon icon="x" size={16} />);
+
+        const img = screen.getByRole('img', { hidden: true });
+        expect(img.style).toHaveProperty('width', '16px');
+    });
+
+    it('should render invalid icon', () => {
+        render(<Icon icon="UNDEFINED" />);
+        expect(screen.queryByTestId('icon-root')).not.toBeInTheDocument();
+    });
+});

package/src/core/Icon/index.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable react/forbid-component-props */
+
+import React from 'react';
+import {
+    ArrowLeftIcon,
+    ArrowRightIcon,
+    CalendarIcon,
+    CheckCircleIcon,
+    CheckIcon,
+    ChevronDownIcon,
+    ExclamationCircleIcon,
+    FilterIcon,
+    UploadIcon,
+    XIcon,
+} from '@heroicons/react/solid';
+import PropTypes from 'prop-types';
+
+const DEFAULT_SIZE = 20;
+
+interface Props extends React.SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const iconMap: Record<string, (props: Props) => JSX.Element> = {
+    arrowLeft: ArrowLeftIcon,
+    arrowRight: ArrowRightIcon,
+    calendar: CalendarIcon,
+    checkCircle: CheckCircleIcon,
+    check: CheckIcon,
+    chevronDown: ChevronDownIcon,
+    exclamationCircle: ExclamationCircleIcon,
+    filter: FilterIcon,
+    upload: UploadIcon,
+    x: XIcon, // eslint-disable-line id-length
+};
+
+interface IconProps {
+    icon: string;
+    size?: number;
+}
+
+const Icon: React.FunctionComponent<IconProps> = ({ icon, size }) => {
+    const Component = iconMap[icon];
+
+    return Component ? (
+        <Component
+            data-testid="icon-root"
+            role="img"
+            style={{
+                display: 'block',
+                fill: 'inherit',
+                stroke: 'inherit',
+                width: `${size || DEFAULT_SIZE}px`,
+            }}
+        />
+    ) : null;
+};
+
+Icon.propTypes = {
+    icon: PropTypes.string.isRequired,
+    size: PropTypes.number,
+};
+
+export default Icon;

package/src/core/IconButton/Icon/Icon.spec.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Icon from './index';
+
+describe('Icon', () => {
+    it('should render', () => {
+        render(<Icon icon="x" />);
+    });
+
+    it('should render defaults', () => {
+        render(<Icon icon="x" />);
+
+        const img = screen.getByRole('img', { hidden: true });
+        // eslint-disable-next-line testing-library/no-node-access
+        expect(img?.querySelector('path')?.getAttribute('d')?.startsWith('M4.293')).toBe(true);
+        expect(img.style).toHaveProperty('width', '20px');
+    });
+
+    it('should render size', () => {
+        render(<Icon icon="x" size={16} />);
+
+        const img = screen.getByRole('img', { hidden: true });
+        expect(img.style).toHaveProperty('width', '16px');
+    });
+
+    it('should render invalid icon', () => {
+        render(<Icon icon="UNDEFINED" />);
+        expect(screen.queryByTestId('icon-root')).not.toBeInTheDocument();
+    });
+});

package/src/core/IconButton/Icon/index.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable react/forbid-component-props */
+
+import React from 'react';
+import {
+    ArrowLeftIcon,
+    ArrowRightIcon,
+    CalendarIcon,
+    CheckCircleIcon,
+    CheckIcon,
+    ChevronDownIcon,
+    ExclamationCircleIcon,
+    FilterIcon,
+    UploadIcon,
+    XIcon,
+} from '@heroicons/react/solid';
+import PropTypes from 'prop-types';
+
+const DEFAULT_SIZE = 20;
+
+interface Props extends React.SVGProps<SVGSVGElement> {
+    size?: number;
+}
+
+const iconMap: Record<string, (props: Props) => JSX.Element> = {
+    arrowLeft: ArrowLeftIcon,
+    arrowRight: ArrowRightIcon,
+    calendar: CalendarIcon,
+    checkCircle: CheckCircleIcon,
+    check: CheckIcon,
+    chevronDown: ChevronDownIcon,
+    exclamationCircle: ExclamationCircleIcon,
+    filter: FilterIcon,
+    upload: UploadIcon,
+    x: XIcon, // eslint-disable-line id-length
+};
+
+interface IconProps {
+    icon: string;
+    size?: number;
+}
+
+const Icon: React.FunctionComponent<IconProps> = ({ icon, size }) => {
+    const Component = iconMap[icon];
+
+    return Component ? (
+        <Component
+            data-testid="icon-root"
+            role="img"
+            style={{
+                display: 'block',
+                fill: 'inherit',
+                stroke: 'inherit',
+                width: `${size || DEFAULT_SIZE}px`,
+            }}
+        />
+    ) : null;
+};
+
+Icon.propTypes = {
+    icon: PropTypes.string.isRequired,
+    size: PropTypes.number,
+};
+
+export default Icon;

package/src/core/IconButton/IconButton.module.css

@@ -0,0 +1,32 @@
+.root {
+    align-items: center;
+    background: none;
+    border: .1rem transparent solid;
+    border-radius: .7rem;
+    cursor: pointer;
+    display: flex;
+    fill: var(--clr-grey600);
+    height: 4rem;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    width: 4rem;
+
+    &:focus {
+        border: .1rem var(--clr-grey400) dashed;
+        outline: none;
+    }
+}
+
+.rootSm {
+    height: 3rem;
+    width: 3rem;
+}
+
+.rootWhite {
+    fill: var(--clr-white);
+
+    &:focus {
+        border-color: var(--clr-white);
+    }
+}

package/src/core/IconButton/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { ucwords } from '@sqrzro/utility';
+
+import Assistive from '@core/Assistive';
+import Icon from '@core/Icon';
+
+import styles from './IconButton.module.css';
+
+const iconSizeMap: Record<string, number> = { sm: 16, md: 24 };
+
+interface IconButtonProps {
+    children: React.ReactNode;
+    icon: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    // eslint-disable-next-line @typescript-eslint/sort-type-union-intersection-members
+    size?: 'sm' | 'md' | 'lg';
+    type?: 'button' | 'submit';
+    variant?: 'white';
+}
+
+const IconButton: React.FunctionComponent<IconButtonProps> = ({
+    children,
+    icon,
+    onClick,
+    size,
+    type,
+    variant,
+}) => (
+    <button
+        className={classNames(
+            styles.root,
+            styles[`root${ucwords(size || 'md')}`],
+            variant && styles[`root${ucwords(variant)}`]
+        )}
+        onClick={onClick}
+        type={type === 'submit' ? 'submit' : 'button'}
+    >
+        <Icon icon={icon} size={iconSizeMap[size || 'md']} />
+        <Assistive>{children}</Assistive>
+    </button>
+);
+
+IconButton.propTypes = {
+    children: PropTypes.node.isRequired,
+    icon: PropTypes.string.isRequired,
+    size: PropTypes.oneOf(['sm', 'md', 'lg']),
+    type: PropTypes.oneOf(['button', 'submit']),
+    variant: PropTypes.oneOf(['white']),
+    onClick: PropTypes.func,
+};
+
+export default IconButton;

package/src/core/InputPanel/InputPanel.module.css

@@ -0,0 +1,70 @@
+@keyframes enter {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 1rem, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes enterReverse {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 1rem, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.root {
+    animation: enter .2s;
+    background-color: var(--clr-white);
+    border: .1rem var(--clr-grey400) solid;
+    border-radius: .3rem;
+    box-shadow: 0 .3rem .5rem rgba(0, 0, 0, .05);
+    left: 0;
+    min-width: 100%;
+    position: absolute;
+    top: calc(100% + .5rem);
+}
+
+.rootIsReverse {
+    animation-name: enterReverse;
+    bottom: calc(100% + .5rem);
+    top: auto;
+}
+
+.rootMd {
+    width: 30rem;
+}
+
+.rootLg {
+    width: 50rem;
+}
+
+.inner {
+    max-height: 25rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-arrow-color: var(--clr-grey500);
+    scrollbar-base-color: var(--clr-grey500);
+
+    &::-webkit-scrollbar {
+        width: .5rem;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--clr-grey300);
+        border-radius: 0;
+    }
+}

package/src/core/InputPanel/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { ucwords } from '@sqrzro/utility';
+
+import styles from './InputPanel.module.css';
+
+interface InputPanelProps {
+    children: React.ReactNode;
+    isScrollable?: boolean;
+    // eslint-disable-next-line @typescript-eslint/sort-type-union-intersection-members
+    size?: 'sm' | 'md' | 'lg';
+}
+
+const InputPanel: React.FunctionComponent<InputPanelProps> = ({ children, isScrollable, size }) => (
+    <div className={classNames(styles.root, size && styles[`root${ucwords(size)}`])}>
+        {isScrollable ? <div className={styles.inner}>{children}</div> : children}
+    </div>
+);
+
+InputPanel.propTypes = {
+    children: PropTypes.node.isRequired,
+    isScrollable: PropTypes.bool,
+    size: PropTypes.oneOf(['sm', 'md', 'lg']),
+};
+
+export default InputPanel;

package/src/core/ListItem/ListItem.module.css

@@ -0,0 +1,28 @@
+.inner {
+    border-bottom: .1rem var(--clr-grey300) solid;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1.5rem;
+}
+
+.content {
+    border-bottom: .1rem var(--clr-grey300) solid;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1.5rem;
+}
+
+.footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 2rem;
+    position: relative;
+    width: 100%;
+}
+
+.meta {
+    color: var(--clr-grey600);
+    display: flex;
+    font-size: var(--fs-sml);
+    line-height: 2rem;
+}

package/src/core/ListItem/ListItem.story.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import ListItem from './index';
+
+export default { title: 'Core/ListItem', component: ListItem };
+
+export const Default = (): React.ReactElement => (
+    <ListItem
+        $id={1}
+        meta={['Dolor', 'Adiscit']}
+        secondary={{ title: 'Dolor Adiscit' }}
+        title="Lorem Ipsum"
+        to="http://example.com"
+    />
+);
+
+export const Basic = (): React.ReactElement => <ListItem $id={1} title="Lorem Ipsum" />;
+
+export const WithMeta = (): React.ReactElement => (
+    <ListItem $id={1} meta={['Dolor', 'Adiscit']} title="Lorem Ipsum" />
+);
+
+export const WithSecondary = (): React.ReactElement => (
+    <ListItem $id={1} secondary={{ title: 'Dolor Adiscit' }} title="Lorem Ipsum" />
+);
+
+export const WithTo = (): React.ReactElement => (
+    <ListItem $id={1} title="Lorem Ipsum" to="http://example.com" />
+);