@sqrzro/admin 1.0.0-beta.1

package/src/components/Table/Table.spec.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import type { Columns } from '@core/TableCell';
+import type { Transformer } from '@utility/interfaces';
+
+import Table from './index';
+
+const Lorem: React.FunctionComponent = () => <span>Lorem</span>;
+
+const mockColumns = { name: 'Name', number: 'Number' };
+
+const mockData = [
+    {
+        id: '1',
+        name: 'Lorem Ipsum',
+        number: 1312,
+    },
+    {
+        id: '2',
+        name: 'Dolor Sit Amet',
+        number: 3934,
+    },
+];
+
+const mockTotals = { number: 2131 };
+
+describe('Table', () => {
+    it('should render', () => {
+        render(<Table columns={mockColumns} />);
+    });
+
+    it('should render empty message', () => {
+        render(<Table columns={mockColumns} />);
+        expect(screen.getByRole('heading')).toHaveTextContent(/^No results found$/u);
+    });
+
+    it('should render data', () => {
+        render(<Table columns={mockColumns} data={mockData} />);
+        expect(screen.queryAllByRole('cell')).toHaveLength(4);
+        expect(screen.queryAllByRole('cell')[0]).toHaveTextContent(/^Lorem Ipsum$/u);
+    });
+
+    it('should render transformer', () => {
+        const transformer: Transformer = (item) => ({
+            $id: item.id as string,
+            name: <Lorem>{item.name as string}</Lorem>,
+            number: parseInt(item.number as string, 10) * 2,
+        });
+
+        render(<Table columns={mockColumns} data={mockData} transformer={transformer} />);
+        expect(screen.queryAllByRole('cell')).toHaveLength(4);
+
+        expect(screen.queryAllByRole('cell')[0]).toHaveTextContent(/^Lorem$/u);
+        expect(screen.queryAllByRole('cell')[1]).toHaveTextContent(/^2624$/u);
+    });
+
+    it('should align headers', () => {
+        const mockColumnsWithType: Columns = { name: 'Name', number: ['Number', true] };
+        render(<Table columns={mockColumnsWithType} data={mockData} />);
+
+        expect(screen.getByText('Number')).toHaveClass('rootIsRightAligned');
+    });
+
+    it('should render totals', () => {
+        render(<Table columns={mockColumns} data={mockData} totals={mockTotals} />);
+        expect(screen.queryAllByRole('cell')).toHaveLength(6);
+        expect(screen.queryAllByRole('cell')[5]).toHaveTextContent(/^2131$/u);
+    });
+
+    it('should render disabled', () => {
+        render(<Table columns={mockColumns} data={mockData} isDisabled />);
+        expect(screen.getByRole('table')).toHaveClass('tableIsDisabled');
+    });
+
+    it('should render an empty cell', () => {
+        const mockEmptyColumns = { name: 'Name' };
+        const mockEmptyData = [{ id: 1, name: '' }];
+
+        render(<Table columns={mockEmptyColumns} data={mockEmptyData} />);
+        expect(screen.queryAllByRole('cell')[0]).toHaveTextContent('');
+    });
+
+    it('should render actions', () => {
+        const mockFn = jest.fn();
+
+        const transformer: Transformer = (item) => ({
+            $id: item.id as string,
+            name: <Lorem>{item.name as string}</Lorem>,
+            number: parseInt(item.number as string, 10) * 2,
+        });
+
+        const actions = [
+            {
+                label: 'Lorem Action',
+                onClick: mockFn,
+            },
+        ];
+
+        render(
+            <Table columns={mockColumns} data={mockData} transformer={[transformer, actions]} />
+        );
+
+        const buttons = screen.queryAllByText('Lorem Action');
+
+        expect(buttons).toHaveLength(2);
+        expect(buttons[0]).toBeInstanceOf(HTMLButtonElement);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.click(buttons[0]);
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should have pagination', () => {
+        render(
+            <Table
+                columns={mockColumns}
+                data={mockData}
+                pagination={{ activePage: 1, pageCount: 2 }}
+            />
+        );
+
+        expect(screen.queryAllByTestId('pagination-item-link')).toHaveLength(2);
+        expect(screen.queryAllByTestId('pagination-item-link')[0]).toHaveTextContent(/^1$/u);
+        expect(screen.getByText(/^1$/u)).toHaveClass('link linkIsActive');
+    });
+});

package/src/components/Table/Table.story.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import type { Story } from '@storybook/react';
+
+import Tag from '@components/Tag';
+import type { Columns } from '@core/TableCell';
+
+import type { SimpleAction, TransformedObject } from '@utility/interfaces';
+
+import Table from './index';
+import type { TableProps } from './index';
+
+export default {
+    title: 'Components/Table',
+    component: Table,
+};
+
+const columns = { name: 'Name', number: 'Number' };
+const columnsWithType: Columns = { name: 'Name', number: ['Number', true] };
+const columnsWithTag = { name: 'Name', number: 'Number', tag: 'Tag' };
+
+const data = [
+    {
+        id: '1',
+        name: 'Lorem Ipsum',
+        number: 1312,
+        isEnabled: true,
+    },
+    {
+        id: '2',
+        name: 'Dolor Sit Amet',
+        number: 3934,
+        isEnabled: false,
+    },
+];
+
+const transformer = (item: Record<string, unknown>): TransformedObject => ({
+    ...item,
+    $id: item.id as number,
+    name: `[[${item.name as string}]]`,
+});
+
+const transformerWithTags = (item: Record<string, unknown>): TransformedObject => ({
+    ...transformer(item),
+    tag: (
+        <Tag variant={item.isEnabled ? 'success' : 'danger'}>
+            {item.isEnabled ? 'Enabled' : 'Disabled'}
+        </Tag>
+    ),
+});
+
+const actions: SimpleAction[] = [
+    {
+        label: 'Lorem',
+        onClick: (): null => null,
+    },
+    {
+        label: 'Ipsum',
+        onClick: (): null => null,
+        variant: 'danger',
+    },
+];
+
+const Template: Story<TableProps> = (props) => <Table {...props} />;
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+    columns,
+    data,
+};
+
+export const RightAligned = Template.bind({});
+
+RightAligned.args = {
+    columns: columnsWithType,
+    data,
+};
+
+export const Transformed = Template.bind({});
+
+Transformed.args = {
+    columns,
+    data,
+    transformer,
+};
+
+export const WithActions = Template.bind({});
+
+WithActions.args = {
+    columns,
+    data,
+    transformer: [transformer, actions],
+};
+
+export const WithTags = Template.bind({});
+
+WithTags.args = {
+    columns: columnsWithTag,
+    data,
+    transformer: transformerWithTags,
+};

package/src/components/Table/index.tsx

@@ -0,0 +1,114 @@
+import React, { Fragment } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { spliceArray } from '@sqrzro/utility';
+
+import EmptyMessage from '@core/EmptyMessage';
+import Pagination from '@core/Pagination';
+import Panel from '@core/Panel';
+import TableCell from '@core/TableCell';
+import TableHead from '@core/TableHead';
+import type { Columns } from '@core/TableCell';
+import TableRow from '@core/TableRow';
+import type { TransformedColumn } from '@core/TableRow';
+
+import type { PaginationObject, TransformedObject, Transformer } from '@utility/interfaces';
+
+import styles from './Table.module.css';
+
+const DEFAULT_TRANSFORMER = (item: Record<string, unknown>): TransformedObject => ({
+    $id: item.id as number,
+    $original: item,
+    ...item,
+});
+
+const transformData = (
+    data: Record<string, unknown>[],
+    transformer: Transformer
+): TransformedObject[] => {
+    const [transformFn, actions] = Array.isArray(transformer) ? transformer : [transformer];
+    return data.map((item) => ({ ...transformFn(item), $actions: actions, $original: item }));
+};
+
+const transformColumns = (columns: Columns): TransformedColumn[] =>
+    Object.entries(columns).map(([key, item]) => ({
+        key,
+        title: Array.isArray(item) ? item[0] : item,
+        isRightAligned: Array.isArray(item) ? item[1] : false,
+    }));
+
+export interface TableProps {
+    columns: Columns;
+    data?: Record<string, unknown>[];
+    isDisabled?: boolean;
+    pagination?: PaginationObject;
+    totals?: Record<string, number> | null;
+    transformer?: Transformer;
+}
+
+const Table: React.FunctionComponent<TableProps> = ({
+    columns,
+    data,
+    isDisabled,
+    pagination,
+    totals,
+    transformer,
+}) => {
+    if (!data || !data.length) {
+        return <EmptyMessage />;
+    }
+
+    const transformedColumns = transformColumns(columns);
+    const transformedData = transformData(data, transformer || DEFAULT_TRANSFORMER);
+
+    return (
+        <Fragment>
+            <Panel>
+                <div className={styles.root}>
+                    <table
+                        className={classNames(styles.table, isDisabled && styles.tableIsDisabled)}
+                    >
+                        <TableHead
+                            columns={transformedColumns}
+                            hasActions={Boolean(transformedData[0].$actions?.length)}
+                        />
+                        <tbody>
+                            {transformedData.map((item) => (
+                                <TableRow key={item.$id} columns={transformedColumns} data={item} />
+                            ))}
+                        </tbody>
+                        {totals && (
+                            <tfoot>
+                                <tr>
+                                    <TableCell value="Totals:" />
+                                    {spliceArray(transformedColumns, 0, 1).map((item) => (
+                                        <TableCell
+                                            key={item.key}
+                                            isRightAligned={item.isRightAligned}
+                                            value={totals[item.key].toString()}
+                                        />
+                                    ))}
+                                </tr>
+                            </tfoot>
+                        )}
+                    </table>
+                </div>
+            </Panel>
+            {pagination ? <Pagination isDisabled={isDisabled} {...pagination} /> : null}
+        </Fragment>
+    );
+};
+
+Table.propTypes = {
+    columns: PropTypes.shape({}).isRequired,
+    data: PropTypes.arrayOf(PropTypes.shape({}).isRequired),
+    isDisabled: PropTypes.bool,
+    pagination: PropTypes.shape({
+        activePage: PropTypes.number.isRequired,
+        pageCount: PropTypes.number.isRequired,
+    }),
+    totals: PropTypes.shape({}),
+};
+
+export default Table;

package/src/components/Tag/Tag.module.css

@@ -0,0 +1,37 @@
+.root {
+    background-color: var(--clr-grey700);
+    border: .1rem transparent solid;
+    border-radius: .3rem;
+    color: var(--clr-white);
+    display: inline-block;
+    font-weight: var(--fw-bold);
+    line-height: 2.8rem;
+    margin: -.5rem 0;
+    padding: 0 .8rem;
+}
+
+.rootPrimary {
+    background-color: var(--clr-primary);
+}
+
+.rootSecondary {
+    background-color: var(--clr-secondary);
+}
+
+.rootSuccess {
+    background-color: var(--clr-success);
+}
+
+.rootWarning {
+    background-color: var(--clr-warning);
+}
+
+.rootDanger {
+    background-color: var(--clr-danger);
+}
+
+.rootBorderedDanger {
+    background-color: var(--clr-white);
+    border-color: var(--clr-danger);
+    color: var(--clr-danger);
+}

package/src/components/Tag/Tag.spec.tsx

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

package/src/components/Tag/Tag.story.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable react/no-multi-comp */
+
+import React from 'react';
+import type { Story } from '@storybook/react';
+
+import Tag from './index';
+import type { TagProps } from './index';
+
+export default {
+    title: 'Components/Tag',
+    component: Tag,
+};
+
+const Template: Story<TagProps> = (props) => <Tag {...props} />;
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+    children: 'Lorem Ipsum',
+};
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+    children: 'Lorem Ipsum',
+    variant: 'primary',
+};
+
+export const Success = Template.bind({});
+
+Success.args = {
+    children: 'Lorem Ipsum',
+    variant: 'success',
+};
+
+export const Warning = Template.bind({});
+
+Warning.args = {
+    children: 'Lorem Ipsum',
+    variant: 'warning',
+};
+
+export const Danger = Template.bind({});
+
+Danger.args = {
+    children: 'Lorem Ipsum',
+    variant: 'danger',
+};
+
+export const BorderedDanger = Template.bind({});
+
+BorderedDanger.args = {
+    children: 'Lorem Ipsum',
+    variant: ['bordered', 'danger'],
+};

package/src/components/Tag/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import useVariant from '@hooks/useVariant';
+
+import type { StyleVariant } from '@utility/interfaces';
+import { StyleVariantPropType } from '@utility/prop-types';
+
+import styles from './Tag.module.css';
+
+export interface TagProps {
+    children: React.ReactNode;
+    variant?: StyleVariant | StyleVariant[];
+}
+
+const Tag: React.FunctionComponent<TagProps> = ({ children, variant }) => {
+    const { applyVariantClassName } = useVariant(variant);
+    return <div className={classNames(styles.root, applyVariantClassName(styles))}>{children}</div>;
+};
+
+Tag.propTypes = {
+    children: PropTypes.node.isRequired,
+    variant: StyleVariantPropType,
+};
+
+export default Tag;

package/src/components/TextArea/TextArea.module.css

@@ -0,0 +1,23 @@
+.root {
+    background-color: var(--clr-white);
+    border: .1rem var(--clr-grey400) solid;
+    border-radius: .3rem;
+    color: var(--clr-grey600);
+    display: block;
+    font-family: inherit;
+    font-size: var(--fs-med);
+    resize: vertical;
+    padding: 1rem 1.2rem;
+    transition: border-color .2s;
+    width: 100%;
+
+    &:focus {
+        border-color: var(--clr-primary);
+        color: var(--clr-grey700);
+        outline: none;
+    }
+}
+
+.rootHasError {
+    border-color: var(--clr-error);
+}

package/src/components/TextArea/TextArea.spec.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TextArea from './index';
+
+describe('TextArea', () => {
+    it('should render', () => {
+        render(<TextArea name="lorem" />);
+    });
+
+    it('should render defaults', () => {
+        render(<TextArea name="lorem" />);
+
+        const input = screen.getByRole('textbox');
+
+        expect(input).not.toBeDisabled();
+        expect(input).toHaveValue('');
+        expect(input).toHaveClass('root');
+    });
+
+    it('should have value', () => {
+        render(<TextArea name="lorem" value="lorem" />);
+        expect(screen.getByRole('textbox')).toHaveValue('lorem');
+    });
+
+    it('should handle onChange', () => {
+        const mockFn = jest.fn();
+        render(<TextArea name="lorem" onChange={mockFn} />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+
+        const input = screen.getByRole('textbox');
+        userEvent.type(input, 'lorem');
+
+        expect(mockFn).toHaveBeenCalledTimes(5);
+        expect(mockFn).toHaveBeenLastCalledWith({ target: { name: 'lorem', value: 'lorem' } });
+    });
+
+    it('should handle onchange without onchange', () => {
+        const mockFn = jest.fn();
+        render(<TextArea name="lorem" />);
+
+        const input = screen.getByRole('textbox');
+        userEvent.type(input, 'lorem');
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should handle keydown', () => {
+        const mockFn = jest.fn();
+        render(<TextArea name="lorem" onKeyDown={mockFn} />);
+
+        expect(mockFn).toHaveBeenCalledTimes(0);
+        userEvent.type(screen.getByRole('textbox'), 'a');
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render error', () => {
+        render(<TextArea name="lorem" hasError />);
+        expect(screen.getByRole('textbox')).toHaveClass('root rootHasError');
+    });
+
+    it('should render disabled', () => {
+        render(<TextArea name="lorem" isDisabled />);
+
+        const input = screen.getByRole('textbox');
+
+        expect(input).toBeDisabled();
+        expect(input).toHaveClass('root rootIsDisabled');
+    });
+
+    it('should render placeholder', () => {
+        render(<TextArea name="lorem" placeholder="lorem" />);
+        expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'lorem');
+    });
+});

package/src/components/TextArea/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import type { TextInputProps } from '@components/TextInput';
+
+import styles from './TextArea.module.css';
+
+const TextArea: React.FunctionComponent<TextInputProps> = ({
+    name,
+    placeholder,
+    value,
+    hasError,
+    isDisabled,
+    onChange,
+    onKeyDown,
+}) => {
+    const handleChange = (event: React.ChangeEvent): void => {
+        const target = event.target as HTMLInputElement;
+        const simpleEvent = { target: { name, value: target.value } };
+
+        if (onChange) {
+            onChange(simpleEvent);
+        }
+    };
+
+    return (
+        <textarea
+            className={classNames(
+                styles.root,
+                hasError && styles.rootHasError,
+                isDisabled && styles.rootIsDisabled
+            )}
+            disabled={isDisabled}
+            id={`c_${name}`}
+            name={name}
+            onChange={handleChange}
+            onKeyDown={onKeyDown}
+            placeholder={placeholder}
+            rows={6}
+            value={value?.toString()}
+        />
+    );
+};
+
+TextArea.propTypes = {
+    /** The name of the field. An ID is also generated from this (`c_${name}`). */
+    name: PropTypes.string.isRequired,
+
+    /** If set to trute, the `TextArea` will be styled to indicate this */
+    hasError: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    placeholder: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    onKeyDown: PropTypes.func,
+};
+
+export default TextArea;

package/src/components/TextInput/TextInput.module.css

@@ -0,0 +1,57 @@
+.rootHasPrefix {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.rootHasSuffix {
+    display: flex;
+}
+
+.rootIsDisabled {
+    opacity: .3;
+    pointer-events: none;
+}
+
+.input {
+    appearance: none;
+    background-color: var(--clr-white);
+    border: .1rem var(--clr-grey400) solid;
+    border-radius: .3rem;
+    color: var(--clr-grey600);
+    display: block;
+    font-family: inherit;
+    font-size: var(--fs-med);
+    height: var(--input-height);
+    padding: 0 1.2rem;
+    transition: border-color .2s;
+    width: 100%;
+
+    &::-ms-reveal,
+    &::-ms-clear {
+        display: none;
+    }
+
+    &::-webkit-input-placeholder {
+        color: var(--clr-grey500);
+    }
+
+    &:focus {
+        border-color: var(--clr-primary);
+        color: var(--clr-grey700);
+        outline: none;
+    }
+}
+
+.inputHasError {
+    border-color: var(--clr-error);
+}
+
+.inputHasPrefix {
+    border-left: 0;
+    border-radius: 0 .3rem .3rem 0;
+}
+
+.inputHasSuffix {
+    border-radius: .3rem 0 0 .3rem;
+    border-right: 0;
+}