@sqrzro/admin 2.0.0 → 2.1.0-bz.1

package/src/components/FilterLink/index.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Link from '../Link';
-
-import Icon from '../../core/Icon';
-
-import FilterService from '../../services/FilterService';
-import type { FilterMap } from '../../utility/interfaces';
-
-// Import styles from './FilterLink.module.css';
-
-interface FilterLinkProps {
-    children: React.ReactNode;
-    filters: FilterMap;
-}
-
-function FilterLink({ children, filters }: FilterLinkProps): React.ReactElement {
-    return (
-        <Link
-            className="/*styles.root*/"
-            to={FilterService.setFiltersUrlFromContext(null, filters)}
-        >
-            <i className="/*styles.icon*/">
-                <Icon icon="filter" size={12} />
-            </i>
-            {children}
-        </Link>
-    );
-}
-
-FilterLink.propTypes = {
-    children: PropTypes.node.isRequired,
-};
-
-export default FilterLink;

package/src/components/Form/Form.spec.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import Button from '../Button';
-import FormField from '../FormField';
-import TextInput from '../TextInput';
-
-import Form from './index';
-
-describe('Form', () => {
-    it('should render', () => {
-        const mockFn = jest.fn();
-        render(
-            <Form onSubmit={mockFn}>
-                <div>Lorem</div>
-            </Form>
-        );
-
-        expect(screen.getByText('Lorem')).toBeInTheDocument();
-    });
-
-    it('should handle onsubmit', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        const mockSubmitFn = jest.fn();
-
-        render(
-            <Form onSubmit={mockSubmitFn}>
-                <FormField name="name" onChange={mockFn} render={TextInput} value="lorem" />
-                <Button type="submit">Submit</Button>
-            </Form>
-        );
-
-        await user.click(screen.getByRole('button'));
-        expect(mockSubmitFn).toHaveBeenCalledTimes(1);
-    });
-});

package/src/components/Form/index.tsx

@@ -1,25 +0,0 @@
-'use client';
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export interface FormProps {
-    children: React.ReactNode;
-    onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
-}
-
-function Form({ children, onSubmit }: FormProps): React.ReactElement {
-    const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
-        event.preventDefault();
-        onSubmit(event);
-    };
-
-    return <form onSubmit={handleSubmit}>{children}</form>;
-}
-
-Form.propTypes = {
-    children: PropTypes.node.isRequired,
-    onSubmit: PropTypes.func,
-};
-
-export default Form;

package/src/components/FormActions/FormActions.spec.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import FormActions from './index';
-
-describe('FormActions', () => {
-    it('should render', () => {
-        render(<FormActions label="Lorem" />);
-    });
-});

package/src/components/FormActions/FormActions.story.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import StorybookPanel from '../../utility/StorybookPanel';
-
-import Button from '../Button';
-import FormActions from './index';
-
-export default { title: 'Components/FormActions', component: FormActions };
-
-export function Basic(): React.ReactElement {
-    return (
-        <StorybookPanel>
-            <FormActions label="Lorem Ipsum" />
-        </StorybookPanel>
-    );
-}
-
-export function WithChildren(): React.ReactElement {
-    return (
-        <StorybookPanel>
-            <FormActions label="Lorem Ipsum">
-                <Button variant="danger">Dolor</Button>
-                <Button variant="bordered">Adiscit Exceptor</Button>
-            </FormActions>
-        </StorybookPanel>
-    );
-}

package/src/components/FormActions/index.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import FixedActions from '../../core/FixedActions';
-
-interface FormActionsProps {
-    children?: React.ReactNode;
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    label: string;
-}
-
-function FormActions({
-    children,
-    label,
-    isDisabled,
-    isLoading,
-}: FormActionsProps): React.ReactElement {
-    return (
-        <FixedActions isDisabled={isDisabled} isLoading={isLoading} label={label} type="submit">
-            {children}
-        </FixedActions>
-    );
-}
-
-FormActions.propTypes = {
-    label: PropTypes.string.isRequired,
-    children: PropTypes.node,
-    isDisabled: PropTypes.bool,
-    isLoading: PropTypes.bool,
-};
-
-export default FormActions;

package/src/components/FormField/FormField.module.css

@@ -1,71 +0,0 @@
-.root {
-    clear: both;
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-template-rows: repeat(3, auto);
-    margin-bottom: 3rem;
-    position: relative;
-
-    &:last-child {
-        margin-bottom: .5rem;
-    }
-
-    @media (--media-lrg) {
-        grid-template-columns: min(50rem, 100%) auto;
-    }
-}
-
-.rootHasError {
-    &::before {
-        background-color: var(--clr-error5);
-        bottom: -1.5rem;
-        content: '';
-        left: clamp(-3rem, -3.75vw, -1.5rem);
-        position: absolute;
-        right: clamp(-3rem, -3.75vw, -1.5rem);
-        top: -1.5rem;
-    }
-}
-
-.rootIsShallow {
-    margin-bottom: 1.5rem;
-
-    &:last-child {
-        margin-bottom: .5rem;
-    }
-}
-
-.rootIsFullWidth {
-    grid-template-columns: 1fr auto;
-}
-
-.label {
-    margin-bottom: 1rem;
-    position: relative;
-}
-
-.field {
-    grid-area: 2 / 1 / 3 / 2;
-    position: relative;
-}
-
-.action {
-    display: flex;
-    grid-area: 2 / 2 / 3 / 3;
-    margin-left: 1rem;
-    position: relative;
-
-    & > * {
-        width: auto;
-    }
-
-    & > *:not(:last-child) {
-        margin-right: .5rem;
-    }
-}
-
-.error {
-    grid-area: 3 / 1 / 4 / 2;
-    margin-top: 1rem;
-    position: relative;
-}

package/src/components/FormField/FormField.spec.tsx

@@ -1,177 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import TextInput from '../TextInput';
-import TestChangeHandler from '../../utility/TestChangeHandler';
-
-import FormField from './index';
-
-describe('FormField', () => {
-    it('should render', () => {
-        render(<FormField name="lorem" render={TextInput} />);
-    });
-
-    it('should render defaults', () => {
-        render(<FormField name="lorem" render={TextInput} />);
-
-        expect(screen.getByRole('textbox')).toHaveAttribute('name', 'lorem');
-        expect(screen.getByRole('textbox')).toHaveAttribute('id', 'ff_lorem');
-
-        expect(screen.getByTestId('form-field-root')).toHaveClass('root');
-        expect(screen.queryByRole('button')).toBeNull();
-        expect(screen.queryByText('(Optional)')).toBeNull();
-    });
-
-    it('should have action', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(
-            <FormField
-                action={{ label: 'Lorem', onClick: mockFn }}
-                name="lorem"
-                render={TextInput}
-            />
-        );
-
-        expect(screen.getByRole('button')).toHaveTextContent(/^Lorem$/u);
-        expect(screen.getByRole('button')).not.toBeDisabled();
-
-        expect(mockFn).toHaveBeenCalledTimes(0);
-        await user.click(screen.getByRole('button'));
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    });
-
-    it('should have variant action', () => {
-        const mockFn = jest.fn();
-        render(
-            <FormField
-                action={{ label: 'Lorem', onClick: mockFn, variant: 'danger' }}
-                name="lorem"
-                render={TextInput}
-            />
-        );
-
-        expect(screen.getByRole('button')).toHaveClass('root rootDanger');
-    });
-
-    it('should have disabled action', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(
-            <FormField
-                action={{ isDisabled: true, label: 'Lorem', onClick: mockFn }}
-                name="lorem"
-                render={TextInput}
-            />
-        );
-
-        expect(screen.getByRole('button')).toBeDisabled();
-
-        await user.click(screen.getByRole('button'));
-        expect(mockFn).toHaveBeenCalledTimes(0);
-    });
-
-    it('should have action while disabled', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(
-            <FormField
-                action={{ label: 'Lorem', onClick: mockFn }}
-                name="lorem"
-                render={TextInput}
-                isDisabled
-            />
-        );
-
-        expect(screen.getByRole('button')).toBeDisabled();
-
-        await user.click(screen.getByRole('button'));
-        expect(mockFn).toHaveBeenCalledTimes(0);
-    });
-
-    it('should have error', () => {
-        render(<FormField error="Lorem" name="lorem" render={TextInput} />);
-
-        expect(screen.getByTestId('form-field-root')).toHaveClass('root rootHasError');
-        expect(screen.getByText('Lorem')).not.toBeNull();
-    });
-
-    it('should have label', () => {
-        render(<FormField label="Lorem" name="lorem" render={TextInput} />);
-
-        expect(screen.getByText('Lorem')).not.toBeNull();
-        expect(screen.getByText('Lorem')).toHaveAttribute('for', 'ff_lorem');
-    });
-
-    it('should have custom id', () => {
-        render(<FormField id="ipsum" label="Lorem" name="lorem" render={TextInput} />);
-
-        expect(screen.getByRole('textbox')).toHaveAttribute('id', 'ipsum');
-        expect(screen.getByText('Lorem')).toHaveAttribute('for', 'ipsum');
-    });
-
-    it('should render component', () => {
-        render(<FormField name="lorem" render={(): React.ReactElement => <div>Lorem</div>} />);
-        expect(screen.getByTestId('form-field-root')).toHaveTextContent(/^Lorem$/u);
-    });
-
-    it('should have value', () => {
-        render(<FormField name="lorem" render={TextInput} value="Lorem" />);
-        expect(screen.getByRole('textbox')).toHaveValue('Lorem');
-    });
-
-    it('should be disabled', () => {
-        render(<FormField name="lorem" render={TextInput} isDisabled />);
-        expect(screen.getByRole('textbox')).toBeDisabled();
-    });
-
-    it('should be optional', () => {
-        render(<FormField label="Lorem" name="lorem" render={TextInput} isOptional />);
-        expect(screen.getByText('(Optional)')).not.toBeNull();
-    });
-
-    it('should have full width', () => {
-        render(<FormField name="lorem" render={TextInput} isFullWidth />);
-        expect(screen.getByTestId('form-field-root')).toHaveClass('root rootIsFullWidth');
-    });
-
-    it('should handle onchange', async () => {
-        const user = userEvent.setup();
-
-        render(
-            <TestChangeHandler>
-                <FormField name="lorem" render={TextInput} />
-            </TestChangeHandler>
-        );
-
-        await user.type(screen.getByRole('textbox'), 'lorem');
-        expect(screen.getByRole('textbox')).toHaveValue('lorem');
-        expect(screen.getByTestId('test-change-handler-value')).toHaveTextContent('lorem');
-    });
-
-    it('should handle private ($) onchange', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(<FormField $onChange={mockFn} name="lorem" render={TextInput} />);
-
-        await user.type(screen.getByRole('textbox'), 'l');
-        expect(mockFn).toHaveBeenCalledTimes(1);
-        expect(mockFn).toHaveBeenLastCalledWith({ target: { name: 'lorem', value: 'l' } });
-    });
-
-    it('should handle onkeydown', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(<FormField name="lorem" onKeyDown={mockFn} render={TextInput} />);
-
-        expect(mockFn).toHaveBeenCalledTimes(0);
-        await user.type(screen.getByRole('textbox'), 'a');
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    });
-});

package/src/components/FormField/FormField.stories.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-
-import TextInput from '../TextInput';
-
-import FormField from './index';
-
-export default { title: 'Components/FormField', component: FormField };
-
-export function Default(): React.ReactElement {
-    return <FormField label="Lorem Ipsum" name="lorem" render={TextInput} />;
-}
-
-export function WithoutLabel(): React.ReactElement {
-    return <FormField name="lorem" render={TextInput} />;
-}
-
-export function WithError(): React.ReactElement {
-    return <FormField error="Lorem Ipsum" name="lorem" render={TextInput} />;
-}
-
-export function Optional(): React.ReactElement {
-    return <FormField label="Lorem Ipsum" name="lorem" render={TextInput} isOptional />;
-}
-
-export function CustomRender(): React.ReactElement {
-    return (
-        <FormField
-            label="Lorem Ipsum"
-            name="lorem"
-            render={(props): JSX.Element => <span>{JSON.stringify(props)}</span>}
-        />
-    );
-}
-
-export function WithAction(): React.ReactElement {
-    return (
-        <FormField
-            action={{ label: 'Lorem', onClick: () => null }}
-            label="Lorem Ipsum"
-            name="lorem"
-            render={TextInput}
-        />
-    );
-}

package/src/components/FormField/index.tsx

@@ -1,14 +0,0 @@
-'use client';
-
-import React from 'react';
-import { FormFieldComponent } from '@sqrzro/components';
-import type { FormFieldProps } from '@sqrzro/components';
-import type { InputValue } from '@sqrzro/interfaces';
-
-import Button from '../Button';
-
-function FormField<T extends InputValue>(props: FormFieldProps<T>): React.ReactElement {
-    return <FormFieldComponent<T> {...props} renderAction={Button} />;
-}
-
-export default FormField;

package/src/components/FormRepeater/FormRepeater.module.css

@@ -1,7 +0,0 @@
-.root {
-    margin-bottom: 3rem;
-
-    &:last-child {
-        margin-bottom: .5rem;
-    }
-}

package/src/components/FormRepeater/FormRepeater.spec.tsx

@@ -1,156 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import TextInput from '../TextInput';
-
-import TestChangeHandler from '../../utility/TestChangeHandler';
-
-import FormRepeater from './index';
-
-describe('FormRepeater', () => {
-    it('should render', () => {
-        render(<FormRepeater name="lorem" render={TextInput} />);
-    });
-
-    it('should render the initial field', () => {
-        render(<FormRepeater name="lorem" render={TextInput} />);
-        expect(screen.getByRole('textbox')).toBeInTheDocument();
-        expect(screen.getByRole('textbox')).toHaveValue('');
-    });
-
-    it('should render an additional empty field', () => {
-        render(<FormRepeater name="lorem" render={TextInput} value={['Lorem']} />);
-        expect(screen.getAllByRole('textbox')).toHaveLength(2);
-        expect(screen.getAllByRole('textbox')[0]).toHaveValue('Lorem');
-        expect(screen.getAllByRole('textbox')[1]).toHaveValue('');
-    });
-
-    it('should render remove buttons', () => {
-        render(<FormRepeater name="lorem" render={TextInput} value={['Lorem']} />);
-        expect(screen.getByText('Remove')).toBeInTheDocument();
-    });
-
-    it('should render labels', () => {
-        render(
-            <FormRepeater
-                label="Lorem"
-                name="lorem"
-                render={TextInput}
-                value={['Lorem', 'Ipsum']}
-            />
-        );
-        expect(screen.getByText('Lorem')).toBeInTheDocument();
-    });
-
-    it('should have unique ids for each textinput', () => {
-        render(<FormRepeater name="lorem" render={TextInput} value={['Lorem', 'Ipsum']} />);
-        expect(screen.getAllByRole('textbox')[0]).toHaveAttribute('id', 'f_lorem_0');
-        expect(screen.getAllByRole('textbox')[1]).toHaveAttribute('id', 'f_lorem_1');
-    });
-
-    it('should handle max properly', () => {
-        render(
-            <FormRepeater
-                max={3}
-                name="lorem"
-                render={TextInput}
-                value={['Lorem', 'Ipsum', 'Dolor']}
-            />
-        );
-        expect(screen.getAllByRole('textbox')).toHaveLength(3);
-        expect(screen.getAllByText('Remove')).toHaveLength(3);
-    });
-
-    it('should handle onChange ', async () => {
-        const user = userEvent.setup();
-
-        render(
-            <TestChangeHandler>
-                <FormRepeater name="lorem" render={TextInput} />
-            </TestChangeHandler>
-        );
-
-        await user.type(screen.getAllByRole('textbox')[0], 'Ipsum');
-        expect(screen.getAllByRole('textbox')[0]).toHaveValue('Ipsum');
-        expect(screen.getByTestId('test-change-handler-value')).toHaveTextContent('["Ipsum"]');
-    });
-
-    it('should handle onChange with existing ', async () => {
-        const user = userEvent.setup();
-
-        render(
-            <TestChangeHandler defaultValue={['Lorem']}>
-                <FormRepeater name="lorem" render={TextInput} />
-            </TestChangeHandler>
-        );
-
-        await user.type(screen.getAllByRole('textbox')[0], 'Ipsum');
-
-        expect(screen.getAllByRole('textbox')[0]).toHaveValue('LoremIpsum');
-        expect(screen.getByTestId('test-change-handler-value')).toHaveTextContent('["LoremIpsum"]');
-    });
-
-    it('should handle onChange with new', async () => {
-        const user = userEvent.setup();
-
-        render(
-            <TestChangeHandler defaultValue={['Lorem']}>
-                <FormRepeater name="lorem" render={TextInput} />
-            </TestChangeHandler>
-        );
-
-        await user.type(screen.getAllByRole('textbox')[1], 'Ipsum');
-
-        expect(screen.getAllByRole('textbox')[1]).toHaveValue('Ipsum');
-        expect(screen.getByTestId('test-change-handler-value')).toHaveTextContent(
-            '["Lorem","Ipsum"]'
-        );
-    });
-
-    it('should handle change if no onChange', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(<FormRepeater name="lorem" render={TextInput} />);
-
-        expect(mockFn).toHaveBeenCalledTimes(0);
-        await user.type(screen.getAllByRole('textbox')[0], 'a');
-        expect(mockFn).toHaveBeenCalledTimes(0);
-    });
-
-    it('should handle remove', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(
-            <FormRepeater
-                name="lorem"
-                onChange={mockFn}
-                render={TextInput}
-                value={['Lorem', 'Ipsum', 'Dolor']}
-            />
-        );
-
-        expect(screen.getAllByRole('textbox')).toHaveLength(4);
-        expect(mockFn).toHaveBeenCalledTimes(0);
-
-        await user.click(screen.getAllByText('Remove')[0]);
-
-        expect(mockFn).toHaveBeenCalledTimes(1);
-        expect(mockFn).toHaveBeenLastCalledWith({
-            target: { name: 'lorem', value: ['Ipsum', 'Dolor'] },
-        });
-    });
-
-    it('should handle remove if no onChange', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(<FormRepeater name="lorem" render={TextInput} value={['Lorem']} />);
-
-        expect(mockFn).toHaveBeenCalledTimes(0);
-        await user.click(screen.getAllByText('Remove')[0]);
-        expect(mockFn).toHaveBeenCalledTimes(0);
-    });
-});