@sqrzro/admin 2.0.0 → 2.1.0-bz.1

package/src/core/ListItem/index.tsx

@@ -1,109 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import ListItemActions from '../ListItemActions';
-import ListItemMetaItem from '../ListItemMetaItem';
-import type { ValueObject } from '../ListItemMetaItem';
-import ListItemTitle from '../ListItemTitle';
-
-import Panel from '../Panel';
-
-import type { SimpleObject, TransformedObject } from '../../utility/interfaces';
-
-// Import styles from './ListItem.module.css';
-
-export interface ListItemObject<T extends SimpleObject = SimpleObject>
-    extends TransformedObject<T> {
-    $shouldPreloadTitle?: boolean;
-    content?: string;
-    meta?: (React.ReactElement | ValueObject | string | null | undefined)[];
-    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLHeadingElement>;
-    reference?: string;
-    secondary?: { title: string };
-    title?: string;
-    to?: string;
-}
-
-function ListItem<T extends SimpleObject>({
-    $actions,
-    $original,
-    $shouldPreloadTitle,
-    content,
-    meta,
-    onClick,
-    reference,
-    secondary,
-    title,
-    to,
-}: ListItemObject<T>): React.ReactElement {
-    return (
-        <Panel>
-            <article>
-                {title ? (
-                    <div className="/*styles.inner*/">
-                        <ListItemTitle
-                            isPreload={$shouldPreloadTitle}
-                            onClick={onClick}
-                            reference={reference}
-                            to={to}
-                        >
-                            {title}
-                        </ListItemTitle>
-                        {secondary ? <p className="/*styles.title*/">{secondary.title}</p> : null}
-                    </div>
-                ) : null}
-
-                {content ? <div className="/*styles.content*/">{content}</div> : null}
-
-                {meta || $actions ? (
-                    <footer className="/*styles.footer*/">
-                        {meta ? (
-                            <ul className="/*styles.meta*/">
-                                {/* eslint-disable react/no-array-index-key */}
-                                {meta.map((item, index) => (
-                                    <ListItemMetaItem key={index} value={item} />
-                                ))}
-                                {/* eslint-enable react/no-array-index-key */}
-                            </ul>
-                        ) : null}
-
-                        {$actions ? <ListItemActions actions={$actions} data={$original} /> : null}
-                    </footer>
-                ) : null}
-            </article>
-        </Panel>
-    );
-}
-
-ListItem.propTypes = {
-    $original: PropTypes.shape({}).isRequired,
-    $actions: PropTypes.oneOfType([
-        PropTypes.arrayOf(
-            PropTypes.shape({
-                label: PropTypes.string.isRequired,
-                onClick: PropTypes.func.isRequired,
-            }).isRequired
-        ),
-        PropTypes.func,
-    ]),
-    $shouldPreloadTitle: PropTypes.bool,
-    content: PropTypes.string,
-    meta: PropTypes.arrayOf(
-        PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.shape({
-                to: PropTypes.string.isRequired,
-                label: PropTypes.string.isRequired,
-            }),
-            PropTypes.element,
-        ])
-    ),
-    secondary: PropTypes.shape({
-        title: PropTypes.string.isRequired,
-    }),
-    title: PropTypes.string,
-    to: PropTypes.string,
-    onClick: PropTypes.func,
-};
-
-export default ListItem;

package/src/core/ListItemAction/ListItemAction.module.css

@@ -1,33 +0,0 @@
-.root {
-    background: transparent;
-    border: 0;
-    color: var(--clr-link);
-    cursor: pointer;
-    font-family: inherit;
-    font-size: var(--fs-sml);
-    font-weight: var(--fw-bold);
-    line-height: 3rem;
-    margin-left: 2rem;
-    padding: 0;
-
-    &:focus {
-        outline: none;
-    }
-
-    &:hover {
-        color: var(--clr-link-hover);
-    }
-}
-
-.rootDanger {
-    color: var(--clr-danger);
-
-    &:hover {
-        color: var(--clr-danger-dark);
-    }
-}
-
-.rootIsDisabled {
-    opacity: .3;
-    pointer-events: none;
-}

package/src/core/ListItemAction/index.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import useVariant from '../../hooks/useVariant';
-
-import type { Action, ButtonVariant } from '../../utility/interfaces';
-
-// Import styles from './ListItemAction.module.css';
-
-function ListItemAction({ isDisabled, label, onClick, variant }: Action): React.ReactElement {
-    const { applyVariantClassName } = useVariant<ButtonVariant>(variant);
-
-    return (
-        <button
-            className="clsx(styles.root, applyVariantClassName(styles), {[styles.rootIsDisabled]: isDisabled })"
-            onClick={onClick}
-            type="button"
-        >
-            {label}
-        </button>
-    );
-}
-
-ListItemAction.propTypes = {
-    label: PropTypes.string.isRequired,
-    onClick: PropTypes.func.isRequired,
-};
-
-export default ListItemAction;

package/src/core/ListItemActions/ListItemActions.module.css

@@ -1,94 +0,0 @@
-.root {
-    align-items: center;
-    bottom: -.5rem;
-    display: flex;
-    flex-direction: row-reverse;
-    height: 3rem;
-    left: -2rem;
-    position: absolute;
-    right: 0;
-}
-
-td .root {
-    bottom: auto;
-    left: auto;
-    top: calc(50% - 15px);
-}
-
-.control {
-    background: var(--clr-white);
-    border: .1rem var(--clr-grey400) solid;
-    border-radius: .3rem;
-    cursor: pointer;
-    height: 3rem;
-    overflow: hidden;
-    position: relative;
-    text-indent: 5rem;
-    width: 3rem;
-
-    &:focus {
-        border: .1rem var(--clr-grey400) dashed;
-        outline: none;
-    }
-
-    & i,
-    & i::before,
-    & i::after {
-        background-color: var(--clr-link);
-        border-radius: 50%;
-        left: calc(50% - .2rem);
-        position: absolute;
-        height: .4rem;
-        top: calc(50% - .2rem);
-        width: .4rem;
-    }
-
-    & i::before {
-        content: '';
-        left: -.6rem;
-    }
-
-    & i::after {
-        content: '';
-        left: auto;
-        right: -.6rem;
-    }
-}
-
-.list {
-    background: var(--clr-white80);
-    display: flex;
-    flex: 1;
-    justify-content: flex-end;
-    margin-right: 2rem;
-    opacity: 0;
-    pointer-events: none;
-    transform: translate3d(1rem, 0, 0);
-    transition: opacity .2s, transform .2s;
-}
-
-tr:nth-child(2n - 1) .list {
-    background-color: var(--clr-grey10080);
-}
-
-.listIsOpen {
-    opacity: 1;
-    pointer-events: all;
-    transform: translate3d(0, 0, 0);
-}
-
-.item {
-    background-color: var(--clr-white);
-
-    &:first-child {
-        background: linear-gradient(90deg, var(--clr-white0), var(--clr-white) 1rem);
-    }
-}
-
-tr:nth-child(2n - 1) .item {
-    background-color: var(--clr-grey100);
-
-    &:first-child {
-        background: linear-gradient(90deg, var(--clr-grey1000), var(--clr-grey100) 1rem);
-    }
-}

package/src/core/ListItemActions/index.tsx

@@ -1,42 +0,0 @@
-'use client';
-
-import React from 'react';
-import clsx from 'clsx';
-import { useClickOutside } from '@sqrzro/hooks';
-
-import ListItemAction from '../ListItemAction';
-
-import type { Action, ActionFunction } from '../../utility/interfaces';
-
-// Import styles from './ListItemActions.module.css';
-
-interface ListItemActionsProps<T> {
-    actions: Action[] | ActionFunction<T>;
-    data?: T;
-}
-
-function ListItemActions<T>({ actions, data }: ListItemActionsProps<T>): React.ReactElement {
-    const [isOpen, setIsOpen, node] = useClickOutside();
-
-    const toggleOpen = (): void => setIsOpen(!isOpen);
-
-    const transformed = typeof actions === 'function' ? actions(data) : actions;
-
-    return (
-        <div ref={node} className="/*styles.root*/">
-            <button className="/*styles.control*/" onClick={toggleOpen} type="button">
-                {isOpen ? 'Close' : 'Open'}
-                <i />
-            </button>
-            <ul className="/*clsx(styles.list, isOpen && styles.listIsOpen)*/">
-                {transformed.filter(Boolean).map((item) => (
-                    <li key={item.label} className="/*styles.item*/">
-                        <ListItemAction {...item} />
-                    </li>
-                ))}
-            </ul>
-        </div>
-    );
-}
-
-export default ListItemActions;

package/src/core/ListItemMetaItem/ListItemMetaItem.module.css

@@ -1,18 +0,0 @@
-.root {
-    &:not(:last-child) {
-        align-items: center;
-        display: flex;
-        margin-right: 1.5rem;
-        position: relative;
-
-        &::after {
-            background-color: var(--clr-grey400);
-            border-radius: 50%;
-            content: '';
-            height: .4rem;
-            margin-left: 1.5rem;
-            top: .5em;
-            width: .4rem;
-        }
-    }
-}

package/src/core/ListItemMetaItem/index.tsx

@@ -1,54 +0,0 @@
-import React, { isValidElement } from 'react';
-import PropTypes from 'prop-types';
-
-import Link from '../../components/Link';
-
-import Styled from '../Styled';
-
-// Import styles from './ListItemMetaItem.module.css';
-
-export interface ValueObject {
-    to: string;
-    label: string;
-}
-
-interface ListItemMetaItemProps {
-    value?: React.ReactElement | ValueObject | string | null;
-}
-
-function ListItemMetaItem({ value }: ListItemMetaItemProps): React.ReactElement | null {
-    if (isValidElement(value)) {
-        return <li className="/*styles.root*/">{value}</li>;
-    }
-
-    if (typeof value !== 'object') {
-        return (
-            <li className="/*styles.root*/">
-                <Styled>{value}</Styled>
-            </li>
-        );
-    }
-
-    if (value?.to) {
-        return (
-            <li className="/*styles.root*/">
-                <Link to={value.to}>{value.label}</Link>
-            </li>
-        );
-    }
-
-    return null;
-}
-
-ListItemMetaItem.propTypes = {
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.shape({
-            to: PropTypes.string.isRequired,
-            label: PropTypes.string.isRequired,
-        }),
-        PropTypes.element,
-    ]),
-};
-
-export default ListItemMetaItem;

package/src/core/ListItemTitle/ListItemTitle.module.css

@@ -1,22 +0,0 @@
-.root {
-    align-items: center;
-    display: flex;
-    font-size: var(--fs-lrg);
-    font-weight: var(--fw-bold);
-    gap: .7em;
-}
-
-.rootIsLink {
-    color: var(--clr-link);
-    cursor: pointer;
-
-    &:hover {
-        color: var(--clr-link-hover);
-    }
-
-    & a {
-        align-items: center;
-        display: flex;
-        gap: .7em;
-    }
-}

package/src/core/ListItemTitle/ListItemTitle.spec.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import ListItemTitle from './index';
-
-describe('ListItemTitle', () => {
-    it('should render', () => {
-        render(<ListItemTitle>Lorem</ListItemTitle>);
-    });
-
-    it('should render defaults', () => {
-        render(<ListItemTitle>Lorem</ListItemTitle>);
-        expect(screen.getByText('Lorem')).toHaveTextContent(/^Lorem$/u);
-    });
-
-    it('should render reference', () => {
-        render(<ListItemTitle reference="Ipsum">Lorem</ListItemTitle>);
-        expect(screen.getByRole('heading')).toHaveTextContent(/^LoremIpsum$/u);
-
-        expect(screen.getByTestId('tag-root')).toBeInTheDocument();
-        expect(screen.getByTestId('tag-root')).toHaveTextContent(/^Ipsum$/u);
-    });
-
-    it('should render reference with link ', () => {
-        render(
-            <ListItemTitle reference="Ipsum" to="lorem">
-                Lorem
-            </ListItemTitle>
-        );
-        expect(screen.getByRole('link')).toHaveTextContent(/^LoremIpsum$/u);
-
-        expect(screen.getByTestId('tag-root')).toBeInTheDocument();
-        expect(screen.getByTestId('tag-root')).toHaveTextContent(/^Ipsum$/u);
-    });
-
-    it('should handle to', () => {
-        render(<ListItemTitle to="lorem">Lorem</ListItemTitle>);
-        expect(screen.getByRole('link')).toHaveAttribute('href', '/lorem');
-    });
-
-    it('should handle onclick without to', async () => {
-        const user = userEvent.setup();
-
-        const mockFn = jest.fn();
-        render(<ListItemTitle onClick={mockFn}>Lorem</ListItemTitle>);
-        expect(screen.getByRole('button')).toBeInTheDocument();
-
-        expect(mockFn).toHaveBeenCalledTimes(0);
-        await user.click(screen.getByRole('button'));
-        expect(mockFn).toHaveBeenCalledTimes(1);
-    });
-});

package/src/core/ListItemTitle/index.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-
-import { EventService } from '@sqrzro/utility';
-
-import Link from '../../components/Link';
-import Tag from '../../components/Tag';
-
-import Styled from '../Styled';
-
-// Import styles from './ListItemTitle.module.css';
-
-interface ListItemTitleProps {
-    children: React.ReactNode;
-    isPreload?: boolean;
-    reference?: string;
-    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLHeadingElement>;
-    to?: string | null;
-}
-
-function ListItemTitle({
-    children,
-    isPreload,
-    onClick,
-    reference,
-    to,
-}: ListItemTitleProps): React.ReactElement {
-    const handlePreloadTitle = (
-        event: React.MouseEvent<HTMLAnchorElement | HTMLHeadingElement>
-    ): void => {
-        if (onClick) {
-            onClick(event);
-        }
-
-        if (!isPreload) {
-            return;
-        }
-
-        EventService.publish('@app/title', children);
-    };
-
-    if (to) {
-        return (
-            <h2 className="/*clsx(styles.root, styles.rootIsLink)*/">
-                <Link onClick={handlePreloadTitle} to={to}>
-                    <Styled>{children}</Styled>
-                    {reference ? <Tag>{reference}</Tag> : null}
-                </Link>
-            </h2>
-        );
-    }
-
-    const clickProps = {
-        // ClassName: clsx(styles.root, styles.rootIsLink),
-        onClick,
-        role: 'button',
-        tabIndex: 0,
-    };
-
-    const props = onClick
-        ? clickProps
-        : {
-              /* ClassName: styles.root*/
-          };
-
-    return (
-        <h2 {...props}>
-            <Styled>{children}</Styled>
-            {reference ? <Tag>{reference}</Tag> : null}
-        </h2>
-    );
-}
-
-ListItemTitle.propTypes = {
-    children: PropTypes.node.isRequired,
-    isPreload: PropTypes.bool,
-    to: PropTypes.string,
-    onClick: PropTypes.func,
-};
-
-export default ListItemTitle;

package/src/core/Loader/Loader.module.css

@@ -1,57 +0,0 @@
-@keyframes anim {
-    0% {
-        opacity: 1;
-    }
-
-    40% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-.root {
-    display: flex;
-    height: 1rem;
-    justify-content: space-between;
-    margin: 8rem auto;
-    width: 4rem;
-
-    & span {
-        overflow: hidden;
-        position: absolute;
-        text-indent: 5rem;
-        width: 0;
-    }
-
-    & i {
-        animation: anim 1s;
-        animation-fill-mode: both;
-        animation-iteration-count: infinite;
-        background-color: var(--clr-grey700);
-        border-radius: 50%;
-        height: 1rem;
-        width: 1rem;
-
-        &:nth-child(3) {
-            animation-delay: .2s;
-        }
-
-        &:nth-child(4) {
-            animation-delay: .4s;
-        }
-    }
-}
-
-.rootIsMini {
-    height: .8rem;
-    margin: 0;
-    width: 3.2rem;
-
-    & i {
-        height: .8rem;
-        width: .8rem;
-    }
-}

package/src/core/Loader/Loader.stories.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import Loader from './index';
-import type { LoaderProps } from './index';
-
-export default {
-    title: 'Core/Loader',
-    component: Loader,
-} as ComponentMeta<typeof Loader>;
-
-const Template: ComponentStory<typeof Loader> = (args: LoaderProps): React.ReactElement => (
-    <Loader {...args} />
-);
-
-export const Basic = Template.bind({});
-
-export const Mini = Template.bind({});
-
-Mini.args = {
-    isMini: true,
-};

package/src/core/Loader/index.tsx

@@ -1,2 +0,0 @@
-export { LoaderProps } from '@sqrzro/components';
-export { LoaderComponent as default } from '@sqrzro/components';

package/src/core/MeActions/MeActions.module.css

@@ -1,47 +0,0 @@
-.root {
-    font-size: var(--fs-sml);
-    margin-left: auto;
-    position: relative;
-    width: 4rem;
-}
-
-.rootSidebar {
-    @media (--media-med) {
-        margin: auto auto 0;
-    }
-}
-
-.name {
-    background-color: transparent;
-    border: .2rem var(--clr-white) solid;
-    border-radius: 50%;
-    color: var(--clr-white);
-    cursor: pointer;
-    display: block;
-    font-family: inherit;
-    font-weight: var(--fw-bold);
-    height: 4rem;
-    padding: 0;
-    position: relative;
-    text-align: center;
-    width: 100%;
-
-    &:focus {
-        outline: none;
-
-        &::before {
-            border: .1rem var(--clr-grey500) solid;
-            border-radius: 50%;
-            bottom: .2rem;
-            content: '';
-            left: .2rem;
-            position: absolute;
-            right: .2rem;
-            top: .2rem;
-        }
-    }
-
-    & abbr[title] {
-        text-decoration: none;
-    }
-}