@sqrzro/admin 2.0.0 → 2.1.0-bz.1

package/src/core/Filters/index.tsx

@@ -1,168 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import Button from '../../components/Button';
-import TextInput from '../../components/TextInput';
-
-import FilterItem from '../FilterItem';
-
-import useFilters from '../../hooks/useFilters';
-
-import type { FilterField } from '../../filters/interfaces';
-import type { Action, InputEvent, QueryValue } from '../../utility/interfaces';
-
-// Import styles from './Filters.module.css';
-
-interface FiltersProps {
-    actions?: Action[];
-    fields?: FilterField[];
-    hasSearch?: boolean;
-    isDisabled?: boolean;
-}
-
-const flattenFilter = (filter?: QueryValue): string[] | string | undefined => {
-    if (!filter) {
-        return filter;
-    }
-
-    if (Array.isArray(filter)) {
-        return filter.map((item) => item.toString());
-    }
-    return filter.toString();
-};
-
-/**
- * Render a series of `FilterFields`. It will also render a search input if `hasSearch` is true, and
- * a series of `Actions` if `actions` is provided.
- */
-function Filters({ actions, fields, hasSearch, isDisabled }: FiltersProps): React.ReactElement {
-    const [filters, setFilters] = useFilters();
-    const [pendingSearch, setPendingSearch] = useState('');
-
-    const [isOpen, setIsOpen] = useState(false);
-
-    const toggleIsOpen = (): void => setIsOpen(!isOpen);
-
-    useEffect(() => {
-        setPendingSearch(filters.get('search')?.toString() || '');
-    }, [filters.get('search')]);
-
-    const handleCancel = (event: InputEvent): void => {
-        const newFilters = new Map(filters);
-
-        newFilters.delete(event.target.value as string);
-        setFilters(newFilters);
-    };
-
-    const handleChange = (event: InputEvent): void => {
-        const newFilters = new Map(filters);
-
-        /*
-         * `event.target.value` can be null, so the optional check (?.) is required for typescript.
-         * However, no null value can be passed from a filter, so this can be ignored by test
-         * coverage.
-         */
-        /* istanbul ignore next */
-        const value = Array.isArray(event.target.value)
-            ? event.target.value.map((item) => item?.toString() || '')
-            : event.target.value?.toString() || '';
-
-        newFilters.set(event.target.name, value);
-        setFilters(newFilters);
-    };
-
-    const handleSearch = (event: React.KeyboardEvent): void => {
-        if (event.key === 'Enter') {
-            handleChange({ target: { name: 'search', value: pendingSearch } });
-        }
-    };
-
-    const handleSearchClear = (): void => {
-        handleChange({ target: { name: 'search', value: '' } });
-        setPendingSearch('');
-    };
-
-    return (
-        <aside className="/*styles.root*/" data-testid="filters-root">
-            <div className="/*clsx(styles.control, isOpen && styles.controlIsOpen)*/">
-                <Button onClick={toggleIsOpen} variant="bordered">
-                    Filters{filters.size ? ` (${filters.size})` : '...'}
-                </Button>
-            </div>
-            <div
-                className="/*clsx(styles.content, isOpen && styles.contentIsOpen)*/"
-                data-testid="filters-content"
-            >
-                <div className="/*styles.section*/">
-                    {hasSearch ? (
-                        <div className="/*styles.search*/">
-                            <TextInput
-                                name="search"
-                                onChange={(event): void => setPendingSearch(event.target.value)}
-                                onClear={handleSearchClear}
-                                onKeyDown={handleSearch}
-                                placeholder="Search..."
-                                value={pendingSearch}
-                                isClearable
-                            />
-                        </div>
-                    ) : null}
-                    {hasSearch && fields?.length ? (
-                        <i className="/*styles.divider*/" data-testid="filters-divider" />
-                    ) : null}
-                    {fields?.map((item) => (
-                        <FilterItem
-                            key={item.label}
-                            onCancel={handleCancel}
-                            onChange={handleChange}
-                            value={flattenFilter(filters.get(item.name))}
-                            {...item}
-                        />
-                    ))}
-                </div>
-                {actions?.length ? (
-                    <div className="/*styles.actions*/">
-                        {actions.map((item) => (
-                            <Button
-                                key={item.label}
-                                isDisabled={isDisabled || item.isDisabled}
-                                onClick={item.onClick}
-                                variant={item.variant || 'bordered'}
-                            >
-                                {item.label}
-                            </Button>
-                        ))}
-                    </div>
-                ) : null}
-            </div>
-            <div className="/*clsx(styles.close, isOpen && styles.closeIsOpen)*/">
-                <Button onClick={toggleIsOpen} variant="link">
-                    Close Filters
-                </Button>
-            </div>
-        </aside>
-    );
-}
-
-Filters.propTypes = {
-    actions: PropTypes.arrayOf(
-        PropTypes.shape({
-            label: PropTypes.string.isRequired,
-            onClick: PropTypes.func.isRequired,
-        }).isRequired
-    ),
-    fields: PropTypes.arrayOf(
-        PropTypes.shape({
-            label: PropTypes.string.isRequired,
-            name: PropTypes.string.isRequired,
-            renderField: PropTypes.func.isRequired,
-        }).isRequired
-    ),
-    hasSearch: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-};
-
-export default Filters;

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

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

package/src/core/FixedActions/FixedActions.spec.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import FixedActions from './index';
-
-jest.mock(
-    '../../hooks/useModalOffset',
-    () => (): Record<string, string> => ({ marginRight: '0px' })
-);
-
-describe('FixedActions', () => {
-    it('should render children', () => {
-        render(<FixedActions label="Lorem">Ipsum</FixedActions>);
-        expect(screen.getByText('Ipsum')).toBeInTheDocument();
-    });
-
-    it('render button label correctly', () => {
-        render(<FixedActions label="Lorem" />);
-        expect(screen.getByRole('button', { name: 'Lorem' })).toBeInTheDocument();
-    });
-
-    it('should set button type', () => {
-        render(<FixedActions label="Lorem" type="submit" />);
-        expect(screen.getByRole('button', { name: 'Lorem' })).toHaveAttribute('type', 'submit');
-    });
-
-    it('should be disabled', () => {
-        render(<FixedActions label="Lorem" isDisabled />);
-        expect(screen.getByRole('button', { name: 'Lorem' })).toBeDisabled();
-    });
-
-    it('should be loading', () => {
-        render(<FixedActions label="Lorem" isLoading />);
-        expect(screen.getByRole('button', { name: 'Lorem' })).toBeDisabled();
-    });
-
-    it('should have href', () => {
-        render(<FixedActions label="Lorem" to="lorem" />);
-        expect(screen.getByRole('link', { name: 'Lorem' })).toHaveAttribute('href', '/lorem');
-    });
-
-    it('should handle click', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(<FixedActions label="Lorem" onClick={mockFn} />);
-
-        expect(mockFn).toHaveBeenCalledTimes(0);
-        await user.click(screen.getByRole('button', { name: 'Lorem' }));
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    });
-});

package/src/core/FixedActions/index.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import useLayout from '../../hooks/useLayout';
-import useModalOffset from '../../hooks/useModalOffset';
-
-import Button from '../../components/Button';
-
-// Import styles from './FixedActions.module.css';
-
-export interface FixedActionsProps {
-    children?: React.ReactNode;
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    label: string;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    to?: string;
-    type?: 'button' | 'submit';
-}
-
-function FixedActions({
-    children,
-    label,
-    isDisabled,
-    isLoading,
-    onClick,
-    to,
-    type,
-}: FixedActionsProps): React.ReactElement {
-    const { applyLayoutClassName } = useLayout();
-    const style = useModalOffset('marginRight');
-
-    return (
-        <div className="/*clsx(styles.root, applyLayoutClassName(styles))*/" style={style}>
-            {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/FormLegend/FormLegend.module.css

@@ -1,13 +0,0 @@
-.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

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

package/src/core/Header/Header.stories.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import Header from './index';
-import type { HeaderProps } from './index';
-
-export default {
-    title: 'Core/Header',
-    component: Header,
-} as ComponentMeta<typeof Header>;
-
-const Template: ComponentStory<typeof Header> = (args: HeaderProps): React.ReactElement => (
-    <Header {...args} />
-);
-
-export const Basic = Template.bind({});
-
-Basic.args = {
-    title: 'Lorem Ipsum',
-};

package/src/core/Header/index.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import { ucwords } from '@sqrzro/utility';
-
-import useLayout from '../../hooks/useLayout';
-
-import type { StyleVariant } from '../../utility/interfaces';
-
-export interface HeaderProps {
-    title?: string | null;
-    variant?: StyleVariant;
-}
-
-function Header({ title, variant }: HeaderProps): React.ReactElement {
-    const { applyLayoutClassName } = useLayout();
-
-    return (
-        <header className="border-b border-b-gray-300 p-4">
-            <h1 className="text-2xl text-gray-600" data-testid="header-title">
-                {title || '•••'}
-            </h1>
-        </header>
-    );
-}
-
-Header.propTypes = {
-    title: PropTypes.string,
-};
-
-export default Header;

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

@@ -1,30 +0,0 @@
-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} />);
-        expect(screen.getByRole('img', { hidden: true })).toHaveStyle('width: 16px');
-    });
-
-    it('should render invalid icon', () => {
-        render(<Icon icon="UNDEFINED" />);
-        expect(screen.queryByTestId('icon-root')).not.toBeInTheDocument();
-    });
-});

package/src/core/Icon/index.tsx

@@ -1,70 +0,0 @@
-/* eslint-disable react/forbid-component-props */
-
-import React from 'react';
-import {
-    ArrowLeftIcon,
-    ArrowRightIcon,
-    ArrowUpTrayIcon,
-    CalendarIcon,
-    CheckCircleIcon,
-    CheckIcon,
-    ChevronDownIcon,
-    ExclamationCircleIcon,
-    FunnelIcon,
-    LockClosedIcon,
-    XMarkIcon,
-} from '@heroicons/react/20/solid';
-import PropTypes from 'prop-types';
-
-type HeroIcon = React.ForwardRefExoticComponent<
-    React.SVGProps<SVGSVGElement> & { title?: string; titleId?: string }
->;
-
-const DEFAULT_SIZE = 20;
-
-interface Props extends React.SVGProps<SVGSVGElement> {
-    size?: number;
-}
-
-const iconMap: Record<string, HeroIcon> = {
-    arrowLeft: ArrowLeftIcon,
-    arrowRight: ArrowRightIcon,
-    calendar: CalendarIcon,
-    checkCircle: CheckCircleIcon,
-    check: CheckIcon,
-    chevronDown: ChevronDownIcon,
-    exclamationCircle: ExclamationCircleIcon,
-    filter: FunnelIcon,
-    lockClosed: LockClosedIcon,
-    upload: ArrowUpTrayIcon,
-    x: XMarkIcon, // eslint-disable-line id-length
-};
-
-interface IconProps {
-    icon: string;
-    size?: number;
-}
-
-function Icon({ icon, size }: IconProps): React.ReactElement | null {
-    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

@@ -1,32 +0,0 @@
-.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

@@ -1,53 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import { ucwords } from '@sqrzro/utility';
-
-import Assistive from '../Assistive';
-import Icon from '../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-constituents
-    size?: 'sm' | 'md' | 'lg';
-    type?: 'button' | 'submit';
-    variant?: 'white';
-}
-
-function IconButton({
-    children,
-    icon,
-    onClick,
-    size,
-    type,
-    variant,
-}: IconButtonProps): React.ReactElement {
-    return (
-        <button
-            className="clsx(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/ListItem/ListItem.module.css

@@ -1,28 +0,0 @@
-.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

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