@sqrzro/admin 1.0.0-beta.1

package/src/components/AutoSuggest/index.tsx

@@ -0,0 +1,216 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { ApiService, parseNumeric } from '@sqrzro/utility';
+
+import DropdownPanel from '@core/DropdownPanel';
+import type { DropdownItem } from '@core/DropdownPanel';
+import ErrorMessage from '@core/ErrorMessage';
+import InputPanel from '@core/InputPanel';
+
+import TextInput from '@components/TextInput';
+
+import useAccessiblePanel from '@hooks/useAccessiblePanel';
+import useClickOutside from '@hooks/useClickOutside';
+
+import type { InputProps, SimpleEvent } from '@utility/interfaces';
+
+import styles from './AutoSuggest.module.css';
+
+const transformSuggestions = (data: (DropdownItem | string)[] | null): DropdownItem[] => {
+    if (!data) {
+        return [];
+    }
+    return data.map((item) => (typeof item === 'object' ? item : { id: item, name: item }));
+};
+
+interface AutoSuggestProps extends InputProps {
+    /**
+     * An array of strings to filter for the suggestions. If a `remote` prop is specified, this is
+     * ignored.
+     */
+    data?: (DropdownItem | string)[] | null;
+
+    /** The URL for the endpoint that will return the suggestions */
+    remote?: string | null;
+}
+
+/**
+ * As a user types, suggestions based on they've typed are displayed in a panel below. When a user
+ * clicks a suggestion, the value is updated. Under the hood, it is more or less a combination of a
+ * `TextInput` and a `DropdownPanel`.
+ *
+ * ## Request Methods
+ *
+ * At its most basic, the suggestions are a predefined array of `data`. However,
+ * if the `remote` prop is specified, the AutoSuggest will `GET` that endpoint as the user types.
+ * The following will be appended onto the query:
+ *
+ * ````
+ * ?search={value}
+ * ```
+ *
+ * The endpoint should then handle filtering the data, and returning an array of the results. If the
+ * value of the input changes before the previous `GET` request has completed, that one is
+ * cancelled and a new one started, with the updated search query.
+ *
+ * ## Data Formats
+ *
+ * The data returned should be one of two formats. The choice of format has an impact on how the
+ * value is stored, and the label that is displayed.
+ *
+ * The most basic format is an array of strings. The value is stored as the string itself, and the
+ * label displays the same string. This is most useful for situations where no relationships are
+ * required on the backend, and the `AutoSuggest` is purely being used to assist the user in
+ * defining a value.
+ *
+ * An example of this data would be:
+ *
+ * ```
+ * ['apple', 'banana', 'carrot']
+ * ```
+ *
+ * The second format is an array of objects. The value is stored as the `id` of the object, and the
+ * label displays the `name` of the object. This is most useful for situations where a relationship
+ * is required on the backend, and the `AutoSuggest` is being used to assist the user in defining
+ * a value. With this format, the `AutoSuggest` works more like a `Dropdown`.
+ *
+ * For example:
+ *
+ * ```
+ * [{ id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'carrot' }]
+ * ```
+ */
+const AutoSuggest: React.FunctionComponent<AutoSuggestProps> = ({
+    data,
+    name,
+    remote,
+    value,
+    hasError,
+    onChange,
+}) => {
+    const [suggestions, setSuggestions] = useState<(DropdownItem | string)[] | null>(null);
+
+    const [isOpen, setIsOpen, node] = useClickOutside();
+    const [isError, setIsError] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const getLocalData = (search: string): void => {
+        if (!data || !data.length) {
+            return;
+        }
+
+        const rgx = new RegExp(`^${search}.*`, 'iu');
+        const response = data.filter((item) =>
+            rgx.exec(typeof item === 'string' ? item : item.name)
+        );
+
+        setIsOpen(Boolean(response.length));
+        setSuggestions(response);
+    };
+
+    const getData = async (search: string): Promise<void> => {
+        if (!remote) {
+            getLocalData(search);
+            return;
+        }
+
+        setIsLoading(true);
+
+        try {
+            const response = await ApiService.get<{ data: string[] }>([remote, { search }], {
+                isCancellable: true,
+            });
+
+            setSuggestions(response.data.data);
+        } catch (err) {
+            setIsError(true);
+        }
+
+        setIsLoading(false);
+        setIsOpen(true);
+    };
+
+    const handleChange = (event: SimpleEvent): void => {
+        if (onChange) {
+            onChange(event);
+        }
+
+        if (!event.target.value) {
+            setIsOpen(false);
+            return;
+        }
+
+        void getData(event.target.value.toString());
+    };
+
+    const handleSuggest = (item: DropdownItem): void => {
+        const simpleEvent: SimpleEvent = {
+            target: { name, value: item.id },
+        };
+
+        if (onChange) {
+            onChange(simpleEvent);
+        }
+
+        setIsOpen(false);
+    };
+
+    if (isError) {
+        return <ErrorMessage isMini />;
+    }
+
+    const parsedValue = parseNumeric(value);
+    const transformed = transformSuggestions(suggestions);
+
+    const { handleKeyboard } = useAccessiblePanel<HTMLInputElement>({
+        data: transformed,
+        name,
+        onChange,
+        value: parsedValue,
+    });
+
+    return (
+        <div ref={node} className={classNames(styles.root, isOpen && styles.rootOpen)}>
+            <TextInput
+                autocomplete={false}
+                hasError={hasError}
+                isLoading={isLoading}
+                name={name}
+                onChange={handleChange}
+                onKeyDown={handleKeyboard}
+                value={parsedValue}
+            />
+            {isOpen && suggestions && suggestions.length ? (
+                <InputPanel isScrollable>
+                    <DropdownPanel
+                        data={transformed}
+                        name={name}
+                        onChange={({ item }): void => handleSuggest(item)}
+                        value={parsedValue}
+                    />
+                </InputPanel>
+            ) : null}
+        </div>
+    );
+};
+
+AutoSuggest.propTypes = {
+    name: PropTypes.string.isRequired,
+    data: PropTypes.arrayOf(
+        PropTypes.oneOfType([
+            PropTypes.string.isRequired,
+            PropTypes.shape({
+                id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+                name: PropTypes.string.isRequired,
+            }).isRequired,
+        ]).isRequired
+    ),
+    hasError: PropTypes.bool,
+    remote: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+};
+
+export default AutoSuggest;

package/src/components/Button/Button.module.css

@@ -0,0 +1,95 @@
+.root {
+    -webkit-appearance: none;
+    align-items: center;
+    background-color: var(--clr-link);
+    border: .2rem var(--clr-link) solid;
+    border-radius: .5rem;
+    color: var(--clr-white);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    font-family: inherit;
+    font-size: var(--fs-sml);
+    font-weight: var(--fw-bold);
+    height: var(--input-height);
+    justify-content: center;
+    min-width: 10rem;
+    padding: 0 1.8rem;
+    position: relative;
+    text-align: center;
+    transition: background-color .15s, border-color .15s;
+    white-space: nowrap;
+
+    &:hover {
+        background-color: var(--clr-link-hover);
+        border-color: var(--clr-link-hover);
+        color: var(--clr-white);
+    }
+
+    &:focus {
+        outline: none;
+
+        &::before {
+            border: .1rem var(--clr-grey500) dashed;
+            border-radius: .7rem;
+            bottom: -.5rem;
+            content: '';
+            left: -.5rem;
+            position: absolute;
+            right: -.5rem;
+            top: -.5rem;
+        }
+    }
+}
+
+.rootLink {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--clr-link);
+
+    &:hover {
+        background-color: transparent;
+        border-color: transparent;
+        color: var(--clr-link-hover);
+    }
+}
+
+.rootBordered {
+    background-color: transparent;
+    color: var(--clr-link);
+
+    &:hover {
+        background-color: transparent;
+        border-color: var(--clr-link-hover);
+        color: var(--clr-link-hover);
+    }
+}
+
+.rootDanger {
+    background-color: var(--clr-danger);
+    border-color: var(--clr-danger);
+
+    &:hover {
+        background-color: var(--clr-danger-dark);
+        border-color: var(--clr-danger-dark);
+    }
+}
+
+.rootBorderedDanger {
+    background-color: transparent;
+    border-color: var(--clr-danger);
+    color: var(--clr-danger);
+}
+
+.rootIsDisabled {
+    background-color: var(--clr-grey400);
+    border-color: var(--clr-grey400);
+    color: var(--clr-grey700);
+    opacity: .3;
+    pointer-events: none;
+    user-select: none;
+}
+
+.rootIsFullWidth {
+    width: 100%;
+}

package/src/components/Button/Button.spec.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Button from './index';
+
+describe('Button', () => {
+    it('should render', () => {
+        render(<Button>Lorem</Button>);
+    });
+
+    it('should render default', () => {
+        render(<Button>Lorem</Button>);
+
+        const button = screen.getByRole('button');
+
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveAttribute('type', 'button');
+        expect(button).toHaveTextContent(/^Lorem$/u);
+    });
+
+    it('should render link', () => {
+        render(<Button to="lorem">Lorem</Button>);
+
+        const link = screen.getByRole('link');
+
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute('href', '/lorem');
+        expect(link).toHaveTextContent(/^Lorem$/u);
+    });
+
+    it('should render type', () => {
+        render(<Button type="submit">Lorem</Button>);
+
+        const button = screen.getByRole('button');
+
+        expect(button).toHaveAttribute('type', 'submit');
+    });
+
+    it('should render variant', () => {
+        render(<Button variant="secondary">Lorem</Button>);
+
+        const button = screen.getByRole('button');
+
+        expect(button).toHaveClass('root rootSecondary');
+    });
+
+    it('should render variant array', () => {
+        render(<Button variant={['danger', 'bordered']}>Lorem</Button>);
+
+        const button = screen.getByRole('button');
+        expect(button).toHaveClass('root rootBorderedDanger');
+    });
+
+    it('should render variant array with null', () => {
+        render(<Button variant={['danger', 'bordered']}>Lorem</Button>);
+
+        const button = screen.getByRole('button');
+        expect(button).toHaveClass('root rootBorderedDanger');
+    });
+
+    it('should render disabled', () => {
+        render(<Button isDisabled>Lorem</Button>);
+
+        const button = screen.getByRole('button');
+
+        expect(button).toHaveClass('root rootIsDisabled');
+        expect(button).toBeDisabled();
+    });
+});

package/src/components/Button/Button.story.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { Story } from '@storybook/react';
+
+import Button from './index';
+import type { ButtonProps } from './index';
+
+export default {
+    title: 'Components/Button',
+    component: Button,
+};
+
+const Template: Story<ButtonProps> = (props) => <Button {...props} />;
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+    children: 'Lorem Ipsum',
+};
+
+export const Danger = Template.bind({});
+
+Danger.args = {
+    children: 'Lorem Ipsum',
+    variant: 'danger',
+};
+
+export const Bordered = Template.bind({});
+
+Bordered.args = {
+    children: 'Lorem Ipsum',
+    variant: 'bordered',
+};
+
+export const Disabled = Template.bind({});
+
+Disabled.args = {
+    children: 'Lorem Ipsum',
+    isDisabled: true,
+};

package/src/components/Button/index.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import Link from '@components/Link';
+
+import useVariant from '@hooks/useVariant';
+
+import type { ButtonVariant } from '@utility/interfaces';
+import { ButtonVariantPropType } from '@utility/prop-types';
+
+import styles from './Button.module.css';
+
+export interface ButtonProps {
+    /** Probably the button text, but could be any HTML element or React component */
+    children: React.ReactNode;
+
+    /** If set to true, the Button will be greyed out and non-interactive */
+    isDisabled?: boolean | null;
+    isFullWidth?: boolean | null;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+
+    /** If specified, the Button will be created as a Link element. */
+    to?: string;
+
+    /** The type of button. Button's with a type of `submit` will submit a parent form */
+    type?: 'button' | 'submit';
+
+    /** With the exception of `bordered` these variants correspond to the theme colours */
+    variant?: ButtonVariant | ButtonVariant[];
+}
+
+/**
+ * Either a `Link` component or a `button` element, depending on whether a `to` prop is specified.
+ *
+ * As a `Link`, it provides navigation between pages, and as a `button` it will handle the
+ * `onClick` function when clicked (if one is specified).
+ *
+ * ## to & onClick
+ *
+ * Although it is possible to omit both the `to` and `onClick` props, there will
+ * be nearly zero situations where this would be useful. It is also possible to include both props.
+ * This will create a `Link` component, and handle the `onClick` function before navigation.
+ *
+ * ## Styles
+ *
+ * The `Button` will stretch to the full width of its parent element. If you wish to have a smaller
+ * width, you can wrap it in a `div`, and then wrap that `div` in a component with a flex property.
+ * Components like `ListActions` and `ModalActions` do this for you.
+ */
+const Button: React.FunctionComponent<ButtonProps> = ({
+    to,
+    children,
+    type,
+    variant,
+    isDisabled,
+    isFullWidth,
+    onClick,
+}) => {
+    const { applyVariantClassName } = useVariant<ButtonVariant>(variant);
+
+    const className = classNames(
+        styles.root,
+        applyVariantClassName(styles),
+        isDisabled && styles.rootIsDisabled,
+        isFullWidth && styles.rootIsFullWidth
+    );
+
+    if (to) {
+        return (
+            <Link className={className} onClick={onClick} to={to}>
+                {children}
+            </Link>
+        );
+    }
+
+    return (
+        <button
+            className={className}
+            disabled={isDisabled || false}
+            onClick={onClick}
+            type={type === 'submit' ? 'submit' : 'button'}
+        >
+            {children}
+        </button>
+    );
+};
+
+Button.propTypes = {
+    children: PropTypes.node.isRequired,
+    isDisabled: PropTypes.bool,
+    isFullWidth: PropTypes.bool,
+    to: PropTypes.string,
+    type: PropTypes.oneOf(['button', 'submit']),
+    variant: ButtonVariantPropType,
+    onClick: PropTypes.func,
+};
+
+export default Button;

package/src/components/CalendarInput/CalendarInput.module.css

@@ -0,0 +1,8 @@
+.root {
+    position: relative;
+    z-index: 1;
+}
+
+.rootIsOpen {
+    z-index: 2;
+}