@sqrzro/admin 1.0.0-beta.1

package/src/components/CalendarInput/CalendarInput.spec.tsx

@@ -0,0 +1,206 @@
+import React, { Fragment } from 'react';
+import { format } from 'date-fns';
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import MockDate from 'mockdate';
+import userEvent from '@testing-library/user-event';
+
+import CalendarInput from './index';
+
+describe('CalendarInput', () => {
+    it('should render', () => {
+        render(<CalendarInput name="lorem" />);
+    });
+
+    it('should render default', () => {
+        render(<CalendarInput name="lorem" />);
+
+        expect(screen.getByText(/^Select\.\.\.$/u)).toBeInTheDocument();
+        expect(screen.queryAllByRole('table')).toHaveLength(0);
+    });
+
+    it('should render label', () => {
+        render(<CalendarInput name="lorem" value="2020-09-19" />);
+        expect(screen.getByText(/^19\/09\/2020$/u)).toBeInTheDocument();
+    });
+
+    it('should render range label', () => {
+        render(<CalendarInput name="lorem" value="2020-09-19,2020-09-22" isRange />);
+        expect(screen.getByText(/^19\/09\/2020 - 22\/09\/2020$/u)).toBeInTheDocument();
+    });
+
+    it('should render non-range label', () => {
+        render(<CalendarInput name="lorem" value="2020-09-19,2020-09-19" isRange />);
+        expect(screen.getByText(/^19\/09\/2020$/u)).toBeInTheDocument();
+    });
+
+    it('should have error', () => {
+        render(<CalendarInput name="lorem" value="2020-09-19" hasError />);
+        expect(screen.getByText('19/09/2020')).toHaveClass('root rootHasError');
+    });
+
+    it('should render panel only', () => {
+        render(<CalendarInput name="lorem" isPanelOnly />);
+        expect(screen.queryAllByRole('table')).toHaveLength(1);
+    });
+
+    it('should render panel only with value', () => {
+        render(<CalendarInput name="lorem" value="2020-09-19" isPanelOnly />);
+
+        expect(screen.queryAllByRole('table')).toHaveLength(1);
+        expect(screen.getByText('September 2020')).toBeDefined();
+    });
+
+    it('should disable dates', () => {
+        render(
+            <CalendarInput
+                disabledDates={['2020-09-20']}
+                name="lorem"
+                value="2020-09-19"
+                isPanelOnly
+            />
+        );
+
+        expect(screen.getByText('20')).toHaveAttribute('disabled');
+    });
+
+    it('should disable dates via function', () => {
+        MockDate.set('2020-09-19');
+
+        render(
+            <CalendarInput
+                disabledDates={(date): boolean => date === '2020-09-20'}
+                name="lorem"
+                isPanelOnly
+            />
+        );
+
+        expect(screen.getByText('20')).toHaveAttribute('disabled');
+    });
+
+    it('should highlight dates', () => {
+        render(<CalendarInput name="lorem" value="2020-09-19,2020-09-21" isPanelOnly isRange />);
+        expect(screen.getByTestId('calendar-day-root-20')).toHaveClass('root rootIsHighlighted');
+    });
+
+    it('should render today', () => {
+        MockDate.set('2020-09-19');
+        render(<CalendarInput name="lorem" isPanelOnly />);
+        expect(screen.getByTestId('calendar-day-root-19')).toHaveClass('rootIsToday');
+    });
+
+    it('should handle open (and clickoutside)', async () => {
+        render(
+            <Fragment>
+                <CalendarInput name="lorem" value="lorem" />
+                <div>[DOM]</div>
+            </Fragment>
+        );
+
+        expect(screen.queryAllByRole('table')).toHaveLength(0);
+
+        userEvent.click(screen.getByRole('button', { name: 'Open' }));
+        expect(screen.queryAllByRole('table')).toHaveLength(1);
+
+        userEvent.click(screen.getByText('[DOM]'));
+        await waitForElementToBeRemoved(screen.queryAllByRole('table'));
+    });
+
+    it('should handle no onChange (just close datepanel)', () => {
+        render(<CalendarInput name="lorem" />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Open' }));
+        expect(screen.queryAllByRole('table')).toHaveLength(1);
+
+        userEvent.click(screen.getByRole('button', { name: '15' }));
+
+        expect(screen.queryAllByRole('table')).toHaveLength(0);
+    });
+
+    it('should handle onChange', () => {
+        const mockFn = jest.fn();
+        const value = format(new Date(), 'Y-MM-15');
+
+        render(<CalendarInput name="lorem" onChange={mockFn} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Open' }));
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getByRole('button', { name: '15' }));
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({ target: { name: 'lorem', value } });
+    });
+
+    it('should handle change with no onChange', () => {
+        const mockFn = jest.fn();
+        render(<CalendarInput name="lorem" />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Open' }));
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getByRole('button', { name: '15' }));
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should navigate months', () => {
+        render(<CalendarInput name="lorem" value="2020-09-19" isPanelOnly />);
+
+        expect(screen.getByText('September 2020')).toBeInTheDocument();
+
+        userEvent.click(screen.getByText('Previous'));
+        expect(screen.getByText('August 2020')).toBeInTheDocument();
+
+        userEvent.click(screen.getByText('Next'));
+        userEvent.click(screen.getByText('Next'));
+        expect(screen.getByText('October 2020')).toBeInTheDocument();
+    });
+
+    it('should pass value to datepanel', () => {
+        const value = format(new Date(), 'Y-MM-08');
+        render(<CalendarInput name="lorem" value={value} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Open' }));
+
+        expect(screen.getByTestId('calendar-day-root-7')).toHaveClass('root');
+        expect(screen.getByTestId('calendar-day-root-8')).toHaveClass('root rootIsSelected');
+    });
+
+    it('should handle range selection', () => {
+        MockDate.set('2020-09-19');
+
+        const mockFn = jest.fn();
+        render(<CalendarInput name="lorem" onChange={mockFn} isPanelOnly isRange />);
+
+        userEvent.click(screen.getByRole('button', { name: '15' }));
+        expect(screen.getByTestId('calendar-day-root-15')).toHaveClass('rootIsSelected');
+        expect(mockFn).toHaveBeenCalledTimes(0);
+
+        userEvent.click(screen.getByRole('button', { name: '20' }));
+        expect(screen.getByTestId('calendar-day-root-15')).toHaveClass('rootIsSelected');
+        expect(screen.getByTestId('calendar-day-root-20')).toHaveClass('rootIsSelected');
+
+        expect(screen.getByTestId('calendar-day-root-17')).toHaveClass('rootIsHighlighted');
+
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            target: {
+                name: 'lorem',
+                value: '2020-09-15,2020-09-20',
+            },
+        });
+
+        userEvent.click(screen.getByRole('button', { name: '12' }));
+        expect(screen.getByTestId('calendar-day-root-12')).toHaveClass('rootIsSelected');
+        expect(screen.getByTestId('calendar-day-root-15')).not.toHaveClass('rootIsSelected');
+
+        userEvent.click(screen.getByRole('button', { name: '30' }));
+        expect(screen.getByTestId('calendar-day-root-30')).toHaveClass('rootIsSelected');
+
+        expect(mockFn).toHaveBeenCalledTimes(2);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            target: {
+                name: 'lorem',
+                value: '2020-09-12,2020-09-30',
+            },
+        });
+    });
+});

package/src/components/CalendarInput/CalendarInput.story.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { Story } from '@storybook/react';
+
+import CalendarInput from './index';
+import type { CalendarInputProps } from './index';
+
+import TestChangeHandler from '@utility/TestChangeHandler';
+import StorybookPanel from '@utility/StorybookPanel';
+
+export default {
+    title: 'Components/CalendarInput',
+    component: CalendarInput,
+    decorators: [
+        (storyFn: () => React.ReactElement): React.ReactElement => (
+            <StorybookPanel isDeep>
+                <TestChangeHandler>{storyFn()}</TestChangeHandler>
+            </StorybookPanel>
+        ),
+    ],
+};
+
+const Template: Story<CalendarInputProps> = (props) => <CalendarInput {...props} />;
+
+export const Basic = Template.bind({});
+
+export const WithRange = Template.bind({});
+
+WithRange.args = {
+    isRange: true,
+};
+
+export const PanelOnly = Template.bind({});
+
+PanelOnly.args = {
+    isPanelOnly: true,
+};
+
+export const PanelOnlyWithRange = Template.bind({});
+
+PanelOnlyWithRange.args = {
+    isPanelOnly: true,
+    isRange: true,
+};
+
+export const Disabled = Template.bind({});
+
+Disabled.args = {
+    isDisabled: true,
+};
+
+export const WithValue = Template.bind({});
+
+WithValue.args = {
+    value: '2020-09-19',
+};
+
+export const WithRangeValue = Template.bind({});
+
+WithRangeValue.args = {
+    isRange: true,
+    value: '2020-09-19,2020-09-23',
+};

package/src/components/CalendarInput/index.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import FormatService from '@services/FormatService';
+
+import Calendar from '@core/Calendar';
+import InputPanel from '@core/InputPanel';
+import StaticTextInput from '@core/StaticTextInput';
+
+import useClickOutside from '@hooks/useClickOutside';
+
+import type { InputProps, InputValue, SimpleEvent } from '@utility/interfaces';
+
+import styles from './CalendarInput.module.css';
+
+export interface CalendarInputProps extends InputProps {
+    disabledDates?: string[] | ((date: string) => boolean);
+    isOptional?: boolean;
+    isPanelOnly?: boolean;
+    isRange?: boolean;
+}
+
+const formatLabel = (value?: InputValue, isRange?: boolean): string => {
+    if (!value || typeof value !== 'string') {
+        return '';
+    }
+
+    if (!isRange) {
+        return FormatService.date(value);
+    }
+
+    const splitValues = value.split(',');
+
+    if (splitValues[0] === splitValues[1]) {
+        return FormatService.date(splitValues[0]);
+    }
+
+    return splitValues.map((item) => FormatService.date(item)).join(' - ');
+};
+
+const CalendarInput: React.FunctionComponent<CalendarInputProps> = ({
+    disabledDates,
+    hasError,
+    isDisabled,
+    isOptional,
+    isPanelOnly,
+    isRange,
+    name,
+    value,
+    onChange,
+}) => {
+    const [isOpen, setIsOpen, node] = useClickOutside();
+
+    const toggleIsOpen = (): void => setIsOpen(!isOpen);
+
+    const handleChange = (event: SimpleEvent): void => {
+        if (onChange) {
+            onChange(event);
+        }
+
+        setIsOpen(false);
+    };
+
+    const label = formatLabel(value, isRange);
+
+    if (isPanelOnly) {
+        return (
+            <Calendar
+                disabledDates={disabledDates}
+                isRange={isRange}
+                name={name}
+                onChange={handleChange}
+                value={value ? value.toString() : ''}
+            />
+        );
+    }
+
+    return (
+        <div ref={node} className={classNames(styles.root, isOpen && styles.rootIsOpen)}>
+            <StaticTextInput
+                hasError={hasError}
+                icon="calendar"
+                isDisabled={isDisabled}
+                isOptional={isOptional}
+                label={label}
+                name={name}
+                onChange={handleChange}
+                onClick={toggleIsOpen}
+                value={value || ''}
+            />
+            {isOpen && !isDisabled && (
+                <InputPanel>
+                    <Calendar
+                        disabledDates={disabledDates}
+                        isRange={isRange}
+                        name={name}
+                        onChange={handleChange}
+                        value={value ? value.toString() : ''}
+                    />
+                </InputPanel>
+            )}
+        </div>
+    );
+};
+
+CalendarInput.propTypes = {
+    name: PropTypes.string.isRequired,
+    disabledDates: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.string.isRequired),
+        PropTypes.func,
+    ]),
+    hasError: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    isOptional: PropTypes.bool,
+    isPanelOnly: PropTypes.bool,
+    isRange: PropTypes.bool,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+};
+
+export default CalendarInput;

package/src/components/CheckboxList/CheckboxList.spec.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import CheckboxList from './index';
+
+const mockData = [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Banana', value: 'banana' },
+    { label: 'Carrot', value: 'carrot', isDisabled: true },
+    { label: 'Dog', value: 2 },
+];
+
+describe('CheckboxList', () => {
+    it('should render', () => {
+        render(<CheckboxList data={mockData} name="lorem" />);
+    });
+
+    it('should handle onChange', () => {
+        const mockFn = jest.fn();
+        render(<CheckboxList data={mockData} name="lorem" onChange={mockFn} value={['banana']} />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getAllByRole('checkbox')[0]);
+
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            item: { id: 'apple', name: 'Apple' },
+            target: { name: 'lorem', value: ['banana', 'apple'] },
+        });
+    });
+
+    it('should handle onChange with numeric value', () => {
+        const mockFn = jest.fn();
+        render(<CheckboxList data={mockData} name="lorem" onChange={mockFn} value={['2']} />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getAllByRole('checkbox')[3]);
+
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            item: { id: 2, name: 'Dog' },
+            target: { name: 'lorem', value: [] },
+        });
+    });
+
+    it('should handle onChange without value', () => {
+        const mockFn = jest.fn();
+        render(<CheckboxList data={mockData} name="lorem" onChange={mockFn} />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getAllByRole('checkbox')[0]);
+
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            item: { id: 'apple', name: 'Apple' },
+            target: { name: 'lorem', value: ['apple'] },
+        });
+    });
+
+    it('should handle onChange (removing item)', () => {
+        const mockFn = jest.fn();
+        render(<CheckboxList data={mockData} name="lorem" onChange={mockFn} value={['banana']} />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getAllByRole('checkbox')[1]);
+
+        expect(mockFn).toHaveBeenCalledTimes(1);
+        expect(mockFn).toHaveBeenLastCalledWith({
+            item: { id: 'banana', name: 'Banana' },
+            target: { name: 'lorem', value: [] },
+        });
+    });
+
+    it('should handle click if no onChange', () => {
+        const mockFn = jest.fn();
+        render(<CheckboxList data={mockData} name="lorem" />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(screen.getAllByRole('checkbox')[0]);
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+});

package/src/components/CheckboxList/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { toggleArrayItem } from '@sqrzro/utility';
+
+import ChkRadList from '@core/ChkRadList';
+import type { ChkRadListElementProps } from '@core/ChkRadList';
+
+import type { SimpleEvent } from '@utility/interfaces';
+
+const CheckboxList: React.FunctionComponent<ChkRadListElementProps> = ({
+    name,
+    onChange,
+    value,
+    ...props
+}) => {
+    const handleChange = (event: SimpleEvent<(number | string)[] | number | string>): void => {
+        if (
+            (typeof value !== 'undefined' && !Array.isArray(value)) ||
+            !onChange ||
+            (typeof event.target.value !== 'string' && typeof event.target.value !== 'number')
+        ) {
+            return;
+        }
+
+        const newArray = toggleArrayItem(value || [], event.target.value);
+
+        const simpleEvent: SimpleEvent<(number | string)[]> = {
+            item: event.item,
+            target: { name, value: newArray },
+        };
+
+        onChange(simpleEvent);
+    };
+
+    return (
+        <ChkRadList
+            {...props}
+            name={`${name}[]`}
+            onChange={handleChange}
+            type="checkbox"
+            value={value}
+        />
+    );
+};
+
+CheckboxList.propTypes = {
+    name: PropTypes.string.isRequired,
+    value: PropTypes.arrayOf(PropTypes.string.isRequired),
+    onChange: PropTypes.func,
+};
+
+export default CheckboxList;

package/src/components/ConnectedDropdown/index.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { ApiService } from '@sqrzro/utility';
+
+import Dropdown from '@components/Dropdown';
+import ErrorMessage from '@core/ErrorMessage';
+
+import type { InputProps, Remote } from '@utility/interfaces';
+
+interface ConnnectedDropdownProps extends InputProps {
+    isPanelOnly?: boolean;
+    remote: Remote;
+}
+
+const parseRemote = (remote: Remote): Remote => {
+    if (Array.isArray(remote)) {
+        return [remote[0], { ...remote[1], simpleview: '1' }];
+    }
+    return [remote, { simpleview: '1' }];
+};
+
+const ConnectedDropdown: React.FunctionComponent<ConnnectedDropdownProps> = ({
+    remote,
+    ...props
+}) => {
+    const [data, setData] = useState<Record<string, unknown>[]>();
+    const [isError, setIsError] = useState(false);
+
+    const getData = async (): Promise<void> => {
+        try {
+            const response = await ApiService.get<{ data: Record<string, unknown>[] }>(
+                parseRemote(remote)
+            );
+            setData(response.data.data);
+        } catch (err) {
+            setIsError(true);
+        }
+    };
+
+    useEffect(() => {
+        void getData();
+    }, []);
+
+    if (isError) {
+        return <ErrorMessage isMini />;
+    }
+
+    return <Dropdown data={data} isDisabled={!data} {...props} />;
+};
+
+ConnectedDropdown.propTypes = {
+    name: PropTypes.string.isRequired,
+};
+
+export default ConnectedDropdown;

package/src/components/ConnectedList/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import ConnectedRepeater from '@core/ConnectedRepeater';
+import type { ConnectedRepeaterElementProps } from '@core/ConnectedRepeater';
+
+import List from '@components/List';
+
+const ConnectedList: React.FunctionComponent<ConnectedRepeaterElementProps> = (props) => (
+    <ConnectedRepeater
+        {...props}
+        render={(renderProps): React.ReactElement => <List {...renderProps} />}
+    />
+);
+
+export default ConnectedList;

package/src/components/ConnectedScene/index.tsx

@@ -0,0 +1,95 @@
+import React, { Children, cloneElement, isValidElement, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { ApiService, EventService } from '@sqrzro/utility';
+
+import ErrorMessage from '@core/ErrorMessage';
+import Loader from '@core/Loader';
+import type { TabItem } from '@core/Tabs';
+
+import Scene from '@components/Scene';
+
+import type { Remote } from '@utility/interfaces';
+
+interface ConnectedSceneProps {
+    children: React.ReactNode;
+    remote: Remote;
+    tabs?: TabItem[];
+    title: string | ((data: Record<string, unknown>) => string);
+}
+
+const ConnectedScene: React.FunctionComponent<ConnectedSceneProps> = ({
+    children,
+    remote,
+    tabs,
+    title,
+}) => {
+    const [data, setData] = useState<Record<string, unknown>>();
+    const [error, setError] = useState('');
+
+    const getData = async (): Promise<void> => {
+        const [alias, params] = Array.isArray(remote) ? remote : [remote, {}];
+
+        try {
+            const response = await ApiService.get(alias, params);
+            EventService.publish('@scene/data', response.data);
+        } catch (err) {
+            if (err instanceof Error) {
+                setError(err.toString());
+            }
+        }
+    };
+
+    useEffect(() => {
+        const sub = EventService.subscribe('@scene/data', (_key, responseData) => {
+            setData(responseData);
+        });
+
+        void getData();
+
+        return (): void => {
+            EventService.unsubscribe(sub);
+        };
+    }, []);
+
+    if (!isValidElement(children)) {
+        return null;
+    }
+
+    if (error) {
+        return <ErrorMessage isScene>{error}</ErrorMessage>;
+    }
+
+    if (!data) {
+        return <Loader />;
+    }
+
+    const childrenWithData = Children.map(children, (child: React.ReactElement) => {
+        if (!child) {
+            return null;
+        }
+        return cloneElement(child, { data });
+    });
+
+    const renderedTitle = typeof title === 'function' ? title(data) : title;
+
+    return (
+        <Scene tabs={tabs} title={renderedTitle}>
+            {childrenWithData}
+        </Scene>
+    );
+};
+
+ConnectedScene.propTypes = {
+    children: PropTypes.node.isRequired,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    tabs: PropTypes.arrayOf(
+        PropTypes.shape({
+            isDisabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]).isRequired,
+            label: PropTypes.string.isRequired,
+            route: PropTypes.string.isRequired,
+        }).isRequired
+    ),
+};
+
+export default ConnectedScene;