@sqrzro/admin 1.0.0-beta.1

package/src/core/ChkRad/ChkRad.spec.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ChkRad from './index';
+
+describe('ChkRad', () => {
+    it('should render', () => {
+        render(<ChkRad label="Lorem" name="lorem" />);
+    });
+
+    it('should render defaults', () => {
+        render(<ChkRad label="Lorem" name="lorem" />);
+        expect(screen.getByLabelText('Lorem')).toHaveAttribute('name', 'lorem');
+    });
+
+    it('should render disabled', () => {
+        render(<ChkRad label="Lorem" name="lorem" isDisabled />);
+
+        expect(screen.getByRole('checkbox')).toBeDisabled();
+        expect(screen.getByTestId('chkrad-root')).toHaveClass('root rootIsDisabled');
+    });
+
+    it('should render with react element as label', () => {
+        const Lorem: React.FunctionComponent = () => <span>Lorem</span>;
+        render(<ChkRad label={<Lorem />} name="lorem" />);
+
+        expect(screen.getByLabelText('Lorem')).toHaveAttribute('name', 'lorem');
+    });
+
+    it('should handle onChange', () => {
+        const mockFn = jest.fn();
+        render(<ChkRad label="Lorem" name="lorem" onChange={mockFn} value="lorem" />);
+
+        const checkbox = screen.getByRole('checkbox');
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(checkbox);
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            item: { id: 'lorem', name: 'Lorem' },
+            target: { name: 'lorem', value: 'lorem' },
+        });
+    });
+
+    it('should handle click if no onChange', () => {
+        const mockFn = jest.fn();
+        render(<ChkRad label="Lorem" name="lorem" />);
+
+        const checkbox = screen.getByRole('checkbox');
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(checkbox);
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should handle onChange with react element as label', () => {
+        const Lorem: React.FunctionComponent = () => <span>Lorem</span>;
+        const mockFn = jest.fn();
+        render(<ChkRad label={<Lorem />} name="lorem" onChange={mockFn} value="lorem" />);
+
+        const checkbox = screen.getByRole('checkbox');
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(checkbox);
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            item: { id: 'lorem', name: '[object Object]' },
+            target: { name: 'lorem', value: 'lorem' },
+        });
+    });
+});

package/src/core/ChkRad/index.tsx

@@ -0,0 +1,80 @@
+import React, { useRef } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { parseNumeric } from '@sqrzro/utility';
+
+import ChkRadIcon from '@core/ChkRadIcon';
+
+import type { InputProps } from '@utility/interfaces';
+
+import styles from './ChkRad.module.css';
+
+interface ChkRadProps extends InputProps<number | string> {
+    id?: string;
+    isChecked?: boolean;
+    label: React.ReactElement | string;
+    type?: 'checkbox' | 'radio';
+}
+
+const ChkRad: React.FunctionComponent<ChkRadProps> = ({
+    id,
+    isDisabled,
+    name,
+    label,
+    isChecked,
+    onChange,
+    type,
+    value,
+}) => {
+    const ref = useRef<HTMLDivElement>(null);
+
+    const handleChange = (event: React.ChangeEvent): void => {
+        const target = event.target as HTMLInputElement;
+        const parsedValue = parseNumeric(target.value);
+
+        const simpleEvent = {
+            item: { id: parsedValue, name: label.toString() },
+            target: { name, value: parsedValue },
+        };
+
+        if (onChange) {
+            onChange(simpleEvent);
+        }
+    };
+
+    return (
+        <label
+            className={classNames(styles.root, isDisabled && styles.rootIsDisabled)}
+            data-testid="chkrad-root"
+        >
+            <input
+                checked={Boolean(isChecked)}
+                className={styles.input}
+                disabled={isDisabled}
+                id={id || name}
+                name={name}
+                onChange={handleChange}
+                type={type || 'checkbox'}
+                value={value}
+            />
+            <ChkRadIcon type={type} />
+            <div ref={ref} className={styles.label}>
+                {label}
+            </div>
+        </label>
+    );
+};
+
+ChkRad.propTypes = {
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+    name: PropTypes.string.isRequired,
+    id: PropTypes.string,
+    isChecked: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    type: PropTypes.oneOf(['checkbox', 'radio']),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    onChange: PropTypes.func,
+};
+
+export default ChkRad;

package/src/core/ChkRadIcon/ChkRadIcon.module.css

@@ -0,0 +1,28 @@
+.root {
+    align-items: center;
+    border: .1rem var(--clr-grey500) solid;
+    border-radius: .3rem;
+    display: flex;
+    fill: var(--clr-white);
+    height: 2.4rem;
+    justify-content: center;
+    min-width: 2.4rem;
+    padding-bottom: .1rem;
+    top: 0;
+    width: 2.4rem;
+}
+
+.rootIsChecked,
+input:checked ~ .root {
+    background-color: var(--clr-primary);
+    border-color: var(--clr-primary);
+}
+
+input[disabled] ~ .root {
+    opacity: .3;
+    pointer-events: none;
+}
+
+.rootRadio {
+    border-radius: 50%;
+}

package/src/core/ChkRadIcon/index.tsx

@@ -0,0 +1,33 @@
+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 './ChkRadIcon.module.css';
+
+interface ChkRadIconProps {
+    isChecked?: boolean;
+    type?: 'checkbox' | 'radio';
+}
+
+const ChkRadIcon: React.FunctionComponent<ChkRadIconProps> = ({ isChecked, type = 'checkbox' }) => (
+    <i
+        className={classNames(
+            styles.root,
+            styles[`root${ucwords(type)}`],
+            isChecked && styles.rootIsChecked
+        )}
+    >
+        <Icon icon="check" />
+    </i>
+);
+
+ChkRadIcon.propTypes = {
+    isChecked: PropTypes.bool,
+    type: PropTypes.oneOf(['checkbox', 'radio']),
+};
+
+export default ChkRadIcon;

package/src/core/ChkRadList/ChkRadList.module.css

@@ -0,0 +1,10 @@
+.root {
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: repeat(2, 1fr);
+    margin-top: 1rem;
+
+    @media (--media-med) {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}

package/src/core/ChkRadList/index.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { parseNumeric, parseNumericArray } from '@sqrzro/utility';
+
+import ChkRad from '@core/ChkRad';
+
+import type { InputProps } from '@utility/interfaces';
+
+import styles from './ChkRadList.module.css';
+
+interface ChkRadDataItem {
+    isDisabled?: boolean;
+    label: string;
+    value: number | string;
+}
+
+export interface ChkRadListElementProps extends InputProps<(number | string)[] | number | string> {
+    data: ChkRadDataItem[];
+}
+
+interface ChkRadListProps extends ChkRadListElementProps {
+    type?: 'checkbox' | 'radio';
+}
+
+const getIsChecked = (
+    itemValue: number | string,
+    fieldValue?: (number | string)[] | number | string
+): boolean => {
+    if (!fieldValue) {
+        return false;
+    }
+
+    if (Array.isArray(fieldValue)) {
+        return parseNumericArray(fieldValue).includes(parseNumeric(itemValue));
+    }
+
+    return parseNumeric(fieldValue) === parseNumeric(itemValue);
+};
+
+const ChkRadList: React.FunctionComponent<ChkRadListProps> = ({
+    data,
+    isDisabled,
+    name,
+    onChange,
+    type,
+    value,
+}) => (
+    <ul className={styles.root}>
+        {data.map((item) => (
+            <li key={item.value}>
+                <ChkRad
+                    id={`${name}_${item.value}`}
+                    isChecked={getIsChecked(item.value, value)}
+                    isDisabled={item.isDisabled || isDisabled}
+                    label={item.label}
+                    name={name}
+                    onChange={onChange}
+                    type={type}
+                    value={parseNumeric(item.value)}
+                />
+            </li>
+        ))}
+    </ul>
+);
+
+ChkRadList.propTypes = {
+    data: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        }).isRequired
+    ).isRequired,
+    name: PropTypes.string.isRequired,
+    isDisabled: PropTypes.bool,
+    type: PropTypes.oneOf(['checkbox', 'radio']),
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired),
+    ]),
+    onChange: PropTypes.func,
+};
+
+export default ChkRadList;

package/src/core/CloseButton/CloseButton.spec.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import CloseButton from './index';
+
+describe('CloseButton', () => {
+    it('should render', () => {
+        render(<CloseButton />);
+        expect(screen.getByRole('button')).toBeInTheDocument();
+        expect(screen.getByRole('button')).toHaveTextContent('Close');
+    });
+
+    it('should have custom label', () => {
+        render(<CloseButton label="Lorem" />);
+        expect(screen.getByRole('button')).toHaveTextContent('Lorem');
+    });
+
+    it('should be submit', () => {
+        render(<CloseButton type="submit" />);
+        expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
+    });
+
+    it('should have size', () => {
+        render(<CloseButton size="sm" />);
+        expect(screen.getByRole('img', { hidden: true })).toHaveStyle({ width: '16px' });
+    });
+
+    it('should handle click', () => {
+        const mockFn = jest.fn();
+        render(<CloseButton onClick={mockFn} />);
+
+        userEvent.click(screen.getByRole('button'));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+});

package/src/core/CloseButton/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import IconButton from '@core/IconButton';
+
+interface CloseButtonProps {
+    label?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    // eslint-disable-next-line @typescript-eslint/sort-type-union-intersection-members
+    size?: 'sm' | 'md' | 'lg';
+    type?: 'button' | 'submit';
+}
+
+const CloseButton: React.FunctionComponent<CloseButtonProps> = ({
+    label = 'Close',
+    onClick,
+    size,
+    type,
+}) => (
+    <IconButton icon="x" onClick={onClick} size={size} type={type}>
+        {label}
+    </IconButton>
+);
+
+CloseButton.propTypes = {
+    size: PropTypes.oneOf(['sm', 'md', 'lg']),
+    type: PropTypes.oneOf(['button', 'submit']),
+    onClick: PropTypes.func,
+};
+
+export default CloseButton;

package/src/core/ConfirmModal/ConfirmModal.spec.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ConfirmService from '@services/ConfirmService';
+
+import ConfirmModal from './index';
+
+describe('ConfirmModal', () => {
+    it('should render', () => {
+        render(<ConfirmModal />);
+        expect(screen.queryByText('Are You Sure?')).not.toBeInTheDocument();
+    });
+
+    it('should render confirmation', async () => {
+        render(<ConfirmModal />);
+
+        await waitFor(() => {
+            ConfirmService.ask({ description: 'lorem' });
+        });
+
+        expect(screen.getByText('Are You Sure?')).toBeInTheDocument();
+        expect(screen.getByText('lorem')).toBeInTheDocument();
+    });
+
+    it('should render custom label', async () => {
+        render(<ConfirmModal />);
+
+        await waitFor(() => {
+            ConfirmService.ask({ description: 'lorem', label: 'Confirm Lorem' });
+        });
+
+        expect(screen.getByRole('button', { name: 'Confirm Lorem' })).toBeInTheDocument();
+    });
+
+    it('should handle onconfirm', async () => {
+        const mockFn = jest.fn();
+        render(<ConfirmModal />);
+
+        await waitFor(() => {
+            ConfirmService.ask({ description: 'lorem', onConfirm: mockFn });
+        });
+
+        userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle confirm with no onconfirm', async () => {
+        const mockFn = jest.fn();
+        render(<ConfirmModal />);
+
+        await waitFor(() => {
+            ConfirmService.ask({ description: 'lorem' });
+        });
+
+        userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should handle close (service)', async () => {
+        render(<ConfirmModal />);
+
+        await waitFor(() => {
+            ConfirmService.ask({ description: 'lorem' });
+        });
+
+        expect(screen.getByText('lorem')).toBeInTheDocument();
+
+        await waitFor(() => {
+            ConfirmService.close();
+        });
+
+        expect(screen.queryByText('lorem')).not.toBeInTheDocument();
+    });
+
+    it('should handle close (button)', async () => {
+        render(<ConfirmModal />);
+
+        await waitFor(() => {
+            ConfirmService.ask({ description: 'lorem' });
+        });
+
+        expect(screen.getByText('lorem')).toBeInTheDocument();
+
+        userEvent.click(screen.getByRole('button', { name: 'Close' }));
+        expect(screen.queryByText('lorem')).not.toBeInTheDocument();
+    });
+});

package/src/core/ConfirmModal/index.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+
+import { EventService } from '@sqrzro/utility';
+
+import type { ConfirmModalData } from '@services/ConfirmService';
+
+import ContentBlock from '@components/ContentBlock';
+import ModalActions from '@components/ModalActions';
+
+import useModal from '@hooks/useModal';
+
+const ConfirmModal: React.FunctionComponent = () => {
+    const [data, setData] = useState<ConfirmModalData | null>(null);
+    const { closeModal, Modal, openModal } = useModal();
+
+    const handleConfirm = (): void => {
+        if (data?.onConfirm) {
+            data.onConfirm();
+        }
+        closeModal();
+    };
+
+    const handleData = (_key: string, responseData: ConfirmModalData | null): void => {
+        setData(responseData);
+
+        if (responseData) {
+            openModal();
+        }
+    };
+
+    useEffect(() => {
+        const sub = EventService.subscribe<ConfirmModalData | null>('@confirm/send', handleData);
+
+        return (): void => {
+            EventService.unsubscribe(sub);
+        };
+    }, []);
+
+    return (
+        <Modal title="Are You Sure?" variant="danger">
+            {data?.description ? <ContentBlock>{data.description}</ContentBlock> : null}
+            <ModalActions
+                label={data?.label || 'Confirm'}
+                onClick={handleConfirm}
+                variant="danger"
+            />
+        </Modal>
+    );
+};
+
+export default ConfirmModal;