@sqrzro/admin 1.0.0-beta.7 → 2.0.0

package/src/components/AutoSuggest/index.tsx

@@ -1,31 +1,31 @@
+'use client';
+
 import React, { useState } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
+import { useAccessiblePanel, useClickOutside } from '@sqrzro/hooks';
 import { ApiService } from '@sqrzro/utility';
 
-import ErrorMessage from '@components/ErrorMessage';
-import TextInput from '@components/TextInput';
-
-import DropdownPanel from '@core/DropdownPanel';
-import type { DropdownItem } from '@core/DropdownPanel';
-import InputPanel from '@core/InputPanel';
+import ErrorMessage from '../ErrorMessage';
+import TextInput from '../TextInput';
 
-import useAccessiblePanel from '@hooks/useAccessiblePanel';
-import useClickOutside from '@hooks/useClickOutside';
+import DropdownList from '../../core/DropdownList';
+import type { DropdownItem } from '../../core/DropdownList';
+import InputPanel from '../../core/InputPanel';
 
-import type { InputEvent, InputProps } from '@utility/interfaces';
+import type { InputEvent, InputProps } from '../../utility/interfaces';
 
-import styles from './AutoSuggest.module.css';
+// Import styles from './AutoSuggest.module.css';
 
-const transformSuggestions = (data: (DropdownItem | string)[] | null): DropdownItem[] => {
+function 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<string> {
+export interface AutoSuggestProps extends InputProps<string> {
     /**
      * An array of strings to filter for the suggestions. If a `remote` prop is specified, this is
      * ignored.
@@ -39,7 +39,7 @@ interface AutoSuggestProps extends InputProps<string> {
 /**
  * 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`.
+ * `TextInput` and a `DropdownList`.
  *
  * ## Request Methods
  *
@@ -82,22 +82,22 @@ interface AutoSuggestProps extends InputProps<string> {
  * [{ id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'carrot' }]
  * ```
  */
-const AutoSuggest: React.FunctionComponent<AutoSuggestProps> = ({
+function AutoSuggest({
     data,
     name,
     remote,
     value,
     hasError,
     onChange,
-}) => {
+}: AutoSuggestProps): React.ReactElement {
     const [suggestions, setSuggestions] = useState<(DropdownItem | string)[] | null>(null);
 
-    const [isOpen, setIsOpen, node] = useClickOutside();
+    const [isOpen, setIsOpen, node] = useClickOutside({ shouldHandleEnterKey: true });
     const [isError, setIsError] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
 
-    const getLocalData = (search: string): void => {
-        if (!data || !data.length) {
+    function getLocalData(search: string): void {
+        if (!data?.length) {
             return;
         }
 
@@ -108,9 +108,9 @@ const AutoSuggest: React.FunctionComponent<AutoSuggestProps> = ({
 
         setIsOpen(Boolean(response.length));
         setSuggestions(response);
-    };
+    }
 
-    const getData = async (search: string): Promise<void> => {
+    async function getData(search: string): Promise<void> {
         if (!remote) {
             getLocalData(search);
             return;
@@ -130,9 +130,9 @@ const AutoSuggest: React.FunctionComponent<AutoSuggestProps> = ({
 
         setIsLoading(false);
         setIsOpen(true);
-    };
+    }
 
-    const handleChange = (event: InputEvent<string>): void => {
+    function handleChange(event: InputEvent<string>): void {
         if (onChange) {
             onChange(event);
         }
@@ -143,9 +143,9 @@ const AutoSuggest: React.FunctionComponent<AutoSuggestProps> = ({
         }
 
         void getData(event.target.value);
-    };
+    }
 
-    const handleSuggest = (item: DropdownItem): void => {
+    function handleSuggest(item: DropdownItem): void {
         const simpleEvent = {
             target: { name, value: item.id },
         };
@@ -155,7 +155,7 @@ const AutoSuggest: React.FunctionComponent<AutoSuggestProps> = ({
         }
 
         setIsOpen(false);
-    };
+    }
 
     if (isError) {
         return <ErrorMessage isMini />;
@@ -171,7 +171,7 @@ const AutoSuggest: React.FunctionComponent<AutoSuggestProps> = ({
     });
 
     return (
-        <div ref={node} className={classNames(styles.root, isOpen && styles.rootOpen)}>
+        <div ref={node} className="/*clsx(styles.root, isOpen && styles.rootOpen)*/">
             <TextInput
                 hasError={hasError}
                 isAutocomplete={false}
@@ -183,7 +183,7 @@ const AutoSuggest: React.FunctionComponent<AutoSuggestProps> = ({
             />
             {isOpen && suggestions && suggestions.length ? (
                 <InputPanel isScrollable>
-                    <DropdownPanel
+                    <DropdownList
                         data={transformed}
                         name={name}
                         onChange={({ item }): void => handleSuggest(item)}
@@ -193,7 +193,7 @@ const AutoSuggest: React.FunctionComponent<AutoSuggestProps> = ({
             ) : null}
         </div>
     );
-};
+}
 
 AutoSuggest.propTypes = {
     name: PropTypes.string.isRequired,

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

@@ -50,4 +50,12 @@ describe('Button', () => {
         expect(screen.getByRole('button')).toHaveClass('root rootIsDisabled');
         expect(screen.getByRole('button')).toBeDisabled();
     });
+
+    it('should render loading', () => {
+        render(<Button isLoading>Lorem</Button>);
+
+        expect(screen.getByRole('button')).toHaveClass('root rootIsLoading');
+        expect(screen.getByRole('button')).toHaveTextContent(/^Loading.../u);
+        expect(screen.getByRole('button')).toBeDisabled();
+    });
 });

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import Button from './index';
+import type { ButtonProps } from './index';
+
+export default {
+    title: 'Components/Button',
+    component: Button,
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args: ButtonProps): React.ReactElement => (
+    <Button {...args} />
+);
+
+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 BorderedDanger = Template.bind({});
+
+BorderedDanger.args = {
+    children: 'Lorem Ipsum',
+    variant: ['bordered', 'danger'],
+};
+
+export const FullWidth = Template.bind({});
+
+FullWidth.args = {
+    children: 'Lorem Ipsum',
+    isFullWidth: true,
+};
+
+export const Disabled = Template.bind({});
+
+Disabled.args = {
+    children: 'Lorem Ipsum',
+    isDisabled: true,
+};
+
+export const Loading = Template.bind({});
+
+Loading.args = {
+    children: 'Lorem Ipsum',
+    isLoading: true,
+};

package/src/components/Button/index.tsx

@@ -1,99 +1,15 @@
-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>;
+'use client';
 
-    /** If specified, the Button will be created as a Link element. */
-    to?: string;
+import React from 'react';
+import { ButtonComponent } from '@sqrzro/components';
+import type { ButtonProps } from '@sqrzro/components';
 
-    /** The type of button. Button's with a type of `submit` will submit a parent form */
-    type?: 'button' | 'submit';
+function Button(props: ButtonProps): React.ReactElement {
+    const classNames = {
+        root: 'bg-blue-600 border-2 border-red-200',
+    };
 
-    /** With the exception of `bordered` these variants correspond to the theme colours */
-    variant?: ButtonVariant | ButtonVariant[];
+    return <ButtonComponent classNames={classNames} {...props} />;
 }
 
-/**
- * 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.spec.tsx

@@ -89,6 +89,8 @@ describe('CalendarInput', () => {
     });
 
     it('should handle open (and clickoutside)', async () => {
+        const user = userEvent.setup();
+
         render(
             <Fragment>
                 <CalendarInput name="lorem" value="lorem" />
@@ -98,83 +100,95 @@ describe('CalendarInput', () => {
 
         expect(screen.queryByRole('table')).not.toBeInTheDocument();
 
-        userEvent.click(screen.getByRole('button', { name: 'Open' }));
+        await user.click(screen.getByRole('button', { name: 'Open' }));
         expect(screen.getByRole('table')).toBeInTheDocument();
 
-        userEvent.click(screen.getByText('[DOM]'));
+        await user.click(screen.getByText('[DOM]'));
         await waitForElementToBeRemoved(screen.queryAllByRole('table'));
     });
 
-    it('should handle no onChange (just close datepanel)', () => {
+    it('should handle no onChange (just close datepanel)', async () => {
+        const user = userEvent.setup();
+
         render(<CalendarInput name="lorem" />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Open' }));
+        await user.click(screen.getByRole('button', { name: 'Open' }));
         expect(screen.getByRole('table')).toBeInTheDocument();
 
-        userEvent.click(screen.getByRole('button', { name: '15' }));
+        await user.click(screen.getByRole('button', { name: '15' }));
 
         expect(screen.queryByRole('table')).not.toBeInTheDocument();
     });
 
-    it('should handle onChange', () => {
+    it('should handle onChange', async () => {
+        const user = userEvent.setup();
+
         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' }));
+        await user.click(screen.getByRole('button', { name: 'Open' }));
 
         expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getByRole('button', { name: '15' }));
+        await user.click(screen.getByRole('button', { name: '15' }));
         expect(mockFn).toHaveBeenCalledTimes(1);
         expect(mockFn).toHaveBeenLastCalledWith({ target: { name: 'lorem', value } });
     });
 
-    it('should handle change with no onChange', () => {
+    it('should handle change with no onChange', async () => {
+        const user = userEvent.setup();
+
         const mockFn = jest.fn();
         render(<CalendarInput name="lorem" />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Open' }));
+        await user.click(screen.getByRole('button', { name: 'Open' }));
 
         expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getByRole('button', { name: '15' }));
+        await user.click(screen.getByRole('button', { name: '15' }));
         expect(mockFn).toHaveBeenCalledTimes(0);
     });
 
-    it('should navigate months', () => {
+    it('should navigate months', async () => {
+        const user = userEvent.setup();
+
         render(<CalendarInput name="lorem" value="2020-09-19" isPanelOnly />);
 
         expect(screen.getByText('September 2020')).toBeInTheDocument();
 
-        userEvent.click(screen.getByText('Previous'));
+        await user.click(screen.getByText('Previous'));
         expect(screen.getByText('August 2020')).toBeInTheDocument();
 
-        userEvent.click(screen.getByText('Next'));
-        userEvent.click(screen.getByText('Next'));
+        await user.click(screen.getByText('Next'));
+        await user.click(screen.getByText('Next'));
         expect(screen.getByText('October 2020')).toBeInTheDocument();
     });
 
-    it('should pass value to datepanel', () => {
+    it('should pass value to datepanel', async () => {
+        const user = userEvent.setup();
+
         const value = format(new Date(), 'Y-MM-08');
         render(<CalendarInput name="lorem" value={value} />);
 
-        userEvent.click(screen.getByRole('button', { name: 'Open' }));
+        await user.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', () => {
+    it('should handle range selection', async () => {
+        const user = userEvent.setup();
+
         MockDate.set('2020-09-19');
 
         const mockFn = jest.fn();
         render(<CalendarInput name="lorem" onChange={mockFn} isPanelOnly isRange />);
 
-        userEvent.click(screen.getByRole('button', { name: '15' }));
+        await user.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' }));
+        await user.click(screen.getByRole('button', { name: '20' }));
         expect(screen.getByTestId('calendar-day-root-15')).toHaveClass('rootIsSelected');
         expect(screen.getByTestId('calendar-day-root-20')).toHaveClass('rootIsSelected');
 
@@ -188,11 +202,13 @@ describe('CalendarInput', () => {
             },
         });
 
-        userEvent.click(screen.getByRole('button', { name: '12' }));
+        await user.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' }));
+        await user.click(screen.getByRole('button', { name: '30' }));
+
         expect(screen.getByTestId('calendar-day-root-30')).toHaveClass('rootIsSelected');
 
         expect(mockFn).toHaveBeenCalledTimes(2);

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

@@ -4,8 +4,8 @@ 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';
+import TestChangeHandler from '../../utility/TestChangeHandler';
+import StorybookPanel from '../../utility/StorybookPanel';
 
 export default {
     title: 'Components/CalendarInput',

package/src/components/CalendarInput/index.tsx

@@ -1,18 +1,20 @@
+'use client';
+
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
-import FormatService from '@services/FormatService';
+import FormatService from '../../services/FormatService';
 
-import Calendar from '@core/Calendar';
-import InputPanel from '@core/InputPanel';
-import StaticTextInput from '@core/StaticTextInput';
+import Calendar from '../../core/Calendar';
+import InputPanel from '../../core/InputPanel';
+import StaticTextInput from '../../core/StaticTextInput';
 
-import useClickOutside from '@hooks/useClickOutside';
+import { useClickOutside } from '@sqrzro/hooks';
 
-import type { InputEvent, InputProps, InputValue } from '@utility/interfaces';
+import type { InputEvent, InputProps, InputValue } from '../../utility/interfaces';
 
-import styles from './CalendarInput.module.css';
+// Import styles from './CalendarInput.module.css';
 
 export interface CalendarInputProps extends InputProps<string> {
     disabledDates?: string[] | ((date: string) => boolean);
@@ -21,7 +23,7 @@ export interface CalendarInputProps extends InputProps<string> {
     isRange?: boolean;
 }
 
-const formatLabel = (value?: InputValue, isRange?: boolean): string => {
+function formatLabel(value?: InputValue, isRange?: boolean): string {
     if (!value || typeof value !== 'string') {
         return '';
     }
@@ -37,9 +39,9 @@ const formatLabel = (value?: InputValue, isRange?: boolean): string => {
     }
 
     return splitValues.map((item) => FormatService.date(item)).join(' - ');
-};
+}
 
-const CalendarInput: React.FunctionComponent<CalendarInputProps> = ({
+function CalendarInput({
     disabledDates,
     hasError,
     isDisabled,
@@ -49,18 +51,20 @@ const CalendarInput: React.FunctionComponent<CalendarInputProps> = ({
     name,
     value,
     onChange,
-}) => {
+}: CalendarInputProps): React.ReactElement {
     const [isOpen, setIsOpen, node] = useClickOutside();
 
-    const toggleIsOpen = (): void => setIsOpen(!isOpen);
+    function toggleIsOpen(): void {
+        setIsOpen(!isOpen);
+    }
 
-    const handleChange = (event: InputEvent<string>): void => {
+    function handleChange(event: InputEvent<string>): void {
         if (onChange) {
             onChange(event);
         }
 
         setIsOpen(false);
-    };
+    }
 
     const label = formatLabel(value, isRange);
 
@@ -77,7 +81,7 @@ const CalendarInput: React.FunctionComponent<CalendarInputProps> = ({
     }
 
     return (
-        <div ref={node} className={classNames(styles.root, isOpen && styles.rootIsOpen)}>
+        <div ref={node} className="/*clsx(styles.root, isOpen && styles.rootIsOpen)*/">
             <StaticTextInput
                 hasError={hasError}
                 icon="calendar"
@@ -89,7 +93,7 @@ const CalendarInput: React.FunctionComponent<CalendarInputProps> = ({
                 onClick={toggleIsOpen}
                 value={value || ''}
             />
-            {isOpen && !isDisabled && (
+            {isOpen && !isDisabled ? (
                 <InputPanel>
                     <Calendar
                         disabledDates={disabledDates}
@@ -99,10 +103,10 @@ const CalendarInput: React.FunctionComponent<CalendarInputProps> = ({
                         value={value || ''}
                     />
                 </InputPanel>
-            )}
+            ) : null}
         </div>
     );
-};
+}
 
 CalendarInput.propTypes = {
     name: PropTypes.string.isRequired,

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

@@ -16,12 +16,14 @@ describe('CheckboxList', () => {
         render(<CheckboxList data={mockData} name="lorem" />);
     });
 
-    it('should handle onChange', () => {
+    it('should handle onChange', async () => {
+        const user = userEvent.setup();
+
         const mockFn = jest.fn();
         render(<CheckboxList data={mockData} name="lorem" onChange={mockFn} value={['banana']} />);
 
         expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getAllByRole('checkbox')[0]);
+        await user.click(screen.getAllByRole('checkbox')[0]);
 
         expect(mockFn).toHaveBeenCalledTimes(1);
         expect(mockFn).toHaveBeenLastCalledWith({
@@ -30,12 +32,14 @@ describe('CheckboxList', () => {
         });
     });
 
-    it('should handle onChange with numeric value', () => {
+    it('should handle onChange with numeric value', async () => {
+        const user = userEvent.setup();
+
         const mockFn = jest.fn();
         render(<CheckboxList data={mockData} name="lorem" onChange={mockFn} value={['2']} />);
 
         expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getAllByRole('checkbox')[3]);
+        await user.click(screen.getAllByRole('checkbox')[3]);
 
         expect(mockFn).toHaveBeenCalledTimes(1);
         expect(mockFn).toHaveBeenLastCalledWith({
@@ -44,12 +48,14 @@ describe('CheckboxList', () => {
         });
     });
 
-    it('should handle onChange without value', () => {
+    it('should handle onChange without value', async () => {
+        const user = userEvent.setup();
+
         const mockFn = jest.fn();
         render(<CheckboxList data={mockData} name="lorem" onChange={mockFn} />);
 
         expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getAllByRole('checkbox')[0]);
+        await user.click(screen.getAllByRole('checkbox')[0]);
 
         expect(mockFn).toHaveBeenCalledTimes(1);
         expect(mockFn).toHaveBeenLastCalledWith({
@@ -58,12 +64,14 @@ describe('CheckboxList', () => {
         });
     });
 
-    it('should handle onChange (removing item)', () => {
+    it('should handle onChange (removing item)', async () => {
+        const user = userEvent.setup();
+
         const mockFn = jest.fn();
         render(<CheckboxList data={mockData} name="lorem" onChange={mockFn} value={['banana']} />);
 
         expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getAllByRole('checkbox')[1]);
+        await user.click(screen.getAllByRole('checkbox')[1]);
 
         expect(mockFn).toHaveBeenCalledTimes(1);
         expect(mockFn).toHaveBeenLastCalledWith({
@@ -72,12 +80,14 @@ describe('CheckboxList', () => {
         });
     });
 
-    it('should handle click if no onChange', () => {
+    it('should handle click if no onChange', async () => {
+        const user = userEvent.setup();
+
         const mockFn = jest.fn();
         render(<CheckboxList data={mockData} name="lorem" />);
 
         expect(mockFn).toHaveBeenCalledTimes(0);
-        userEvent.click(screen.getAllByRole('checkbox')[0]);
+        await user.click(screen.getAllByRole('checkbox')[0]);
         expect(mockFn).toHaveBeenCalledTimes(0);
     });
 });