@sqrzro/admin 2.0.0 → 2.1.0-bz.1

package/src/core/ConnectedRepeater/index.tsx

@@ -1,284 +0,0 @@
-'use client';
-
-/* eslint-disable @typescript-eslint/naming-convention */
-
-import React, { Fragment, useEffect, useState } from 'react';
-import useDeepCompareEffect from 'use-deep-compare-effect';
-import PropTypes from 'prop-types';
-
-import { ApiService } from '@sqrzro/utility';
-
-import SummaryList from '../../components/SummaryList';
-import type { SummaryListObject, SummaryListValue } from '../SummaryListItem';
-import ConnectedRepeaterComponent from '../ConnectedRepeaterComponent';
-import type { ConnectedRepeaterRenderProps } from '../ConnectedRepeaterComponent';
-import Filters from '../Filters';
-import type { Columns } from '../TableCell';
-
-import useFilters from '../../hooks/useFilters';
-
-import type { FilterField } from '../../filters/interfaces';
-import type {
-    Action,
-    FilterMap,
-    PaginationObject,
-    QueryValue,
-    Remote,
-    SimpleObject,
-    TransformerWithActions,
-} from '../../utility/interfaces';
-
-interface ResponseMeta {
-    totals?: Record<string, number> | null;
-    page?: { current_page: string; last_page: string };
-    summary?: Record<string, string>;
-}
-
-export interface RepeaterFunctions {
-    reloadData: () => void;
-}
-
-export interface ConnectedRepeaterElementProps<T extends SimpleObject> {
-    actions?: Action[];
-    columns?: Columns;
-    filters?: FilterField[];
-    hasSearch?: boolean;
-    hasSummaryToggle?: boolean;
-    isDisabled?: boolean;
-    remote: Remote;
-    setFunctions?: (functions: RepeaterFunctions) => void;
-    summary?: SummaryListObject[];
-    transformer: TransformerWithActions<T>;
-}
-
-interface ConnectedRepeaterProps<T extends SimpleObject> extends ConnectedRepeaterElementProps<T> {
-    render: (props: ConnectedRepeaterRenderProps<T>) => React.ReactElement;
-}
-
-const mergeFilterMaps = (fD1: FilterMap, fD2?: FilterMap): FilterMap => {
-    const newFilterMap: FilterMap = new Map(fD1);
-
-    if (!fD2) {
-        return newFilterMap;
-    }
-
-    for (const [key, value] of Object.entries(fD2)) {
-        newFilterMap.set(key, value as QueryValue);
-    }
-
-    return newFilterMap;
-};
-
-/**
- * There are situations where a developer will want to predefine some filters, that should not be
- * editable through the UI. In this case, the predefined filters are merged with the ones that the
- * FilterService gets from the URL.
- * @param remote
- * @param filterData
- * @returns
- */
-const parseRemote = (remote: Remote, filterData: FilterMap): Remote => {
-    if (typeof remote === 'string') {
-        return [remote, {}, filterData];
-    }
-    if (remote.length === 2) {
-        return [remote[0], remote[1], filterData];
-    }
-    return [remote[0], remote[1], mergeFilterMaps(filterData, remote[2])];
-};
-
-const transformPagination = (data: {
-    current_page: string;
-    last_page: string;
-}): PaginationObject => ({
-    activePage: parseInt(data.current_page, 10),
-    pageCount: parseInt(data.last_page, 10),
-});
-
-/**
- * Note: There are two ways the  data for `<SummaryList>` can be defined - either just passed
- * through as a normal `SummaryListItem` or via a `Record<string, string>` from the remote
- * response. If that's the case, the Record needs to be converted to a SummaryListItem, using the
- * `value` of the Record as the key. For example, take a remote response with a `summary` object of
- * the following:
- *
- * ```
- * { lorem: 'ipsum' }
- * ```
- *
- * In this instance, you would pass a `summary` prop like so:
- *
- * ```
- * { label: 'Lorem', value: 'lorem' }
- * ```
- *
- * The parser function would then take the value of 'lorem' and replace it with the remote value
- * with the matching key, which would leave you with the following:
- *
- * ```
- * { label: 'Lorem', value: 'ipsum' }
- * ```
- */
-
-const parseSummaryValue = (
-    value: SummaryListValue,
-    remoteSummary: Record<string, string>
-): SummaryListValue => {
-    if (typeof value === 'string' || typeof value === 'number') {
-        return remoteSummary[value];
-    }
-
-    if (typeof value.key === 'undefined') {
-        return '';
-    }
-
-    return { ...value, key: remoteSummary[value.key] };
-};
-
-const parseSummary = (
-    summary: SummaryListObject[],
-    remoteSummary: Record<string, string>
-): SummaryListObject[] =>
-    summary.map((item) => ({ ...item, value: parseSummaryValue(item.value, remoteSummary) }));
-
-function ConnectedRepeater<T extends SimpleObject>({
-    actions,
-    columns,
-    filters,
-    hasSearch,
-    hasSummaryToggle,
-    isDisabled,
-    remote,
-    render,
-    setFunctions,
-    summary,
-    transformer,
-}: ConnectedRepeaterProps<T>): React.ReactElement {
-    const [filterData] = useFilters();
-
-    const [data, setData] = useState<T[]>();
-    const [pagination, setPagination] = useState<PaginationObject>();
-    const [totals, setTotals] = useState<Record<string, number> | null>();
-
-    const [error, setError] = useState('');
-
-    const [isLoading, setIsLoading] = useState(true);
-    const [isRefreshing, setIsRefreshing] = useState(true);
-
-    const [isSummaryOpen, setIsSummaryOpen] = useState(false);
-    const [remoteSummary, setRemoteSummary] = useState<SummaryListObject[]>([]);
-
-    const toggleIsSummaryOpen = (): void => setIsSummaryOpen(!isSummaryOpen);
-
-    const getData = async (): Promise<void> => {
-        setIsRefreshing(true);
-
-        if (summary) {
-            setRemoteSummary(summary.map((item) => ({ ...item, value: '-' })));
-        }
-
-        try {
-            const response = await ApiService.get<T[]>(parseRemote(remote, filterData));
-
-            setIsLoading(false);
-            setIsRefreshing(false);
-
-            setData(response.data);
-
-            const meta = response.meta as ResponseMeta;
-
-            setTotals(meta.totals);
-
-            if (meta.summary) {
-                setRemoteSummary(parseSummary(summary || [], meta.summary));
-            }
-
-            if (meta.page) {
-                setPagination(transformPagination(meta.page));
-            }
-        } catch (err) {
-            if (err instanceof Error) {
-                setError(err.toString());
-            }
-
-            setIsLoading(false);
-        }
-    };
-
-    useEffect(() => {
-        if (setFunctions) {
-            const functions: RepeaterFunctions = { reloadData: async () => getData() };
-            setFunctions(functions);
-        }
-    }, [filterData]);
-
-    useDeepCompareEffect(() => {
-        void getData();
-    }, [filterData]);
-
-    const summaryAction = {
-        label: isSummaryOpen ? 'Hide Summary' : 'Show Summary',
-        onClick: toggleIsSummaryOpen,
-    };
-
-    const parsedActions =
-        summary && hasSummaryToggle ? [...(actions || []), summaryAction] : actions;
-
-    return (
-        <Fragment>
-            {hasSearch || filters?.length ? (
-                <Filters
-                    actions={parsedActions}
-                    fields={filters}
-                    hasSearch={hasSearch}
-                    isDisabled={!data?.length}
-                />
-            ) : null}
-            {summary && (!hasSummaryToggle || (hasSummaryToggle && isSummaryOpen)) ? (
-                <SummaryList data={remoteSummary} isDisabled={isDisabled || isRefreshing} />
-            ) : null}
-            <ConnectedRepeaterComponent<T>
-                columns={columns}
-                data={data}
-                error={error}
-                isDisabled={isDisabled || isRefreshing}
-                isLoading={isLoading}
-                pagination={pagination}
-                render={render}
-                totals={totals}
-                transformer={transformer}
-            />
-        </Fragment>
-    );
-}
-
-ConnectedRepeater.propTypes = {
-    render: PropTypes.func.isRequired,
-    actions: PropTypes.arrayOf(
-        PropTypes.shape({
-            label: PropTypes.string.isRequired,
-            onClick: PropTypes.func.isRequired,
-        }).isRequired
-    ),
-    columns: PropTypes.shape({}),
-    filters: PropTypes.arrayOf(
-        PropTypes.shape({
-            label: PropTypes.string.isRequired,
-            name: PropTypes.string.isRequired,
-            renderField: PropTypes.func.isRequired,
-        }).isRequired
-    ),
-    hasSearch: PropTypes.bool,
-    hasSummaryToggle: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    setFunctions: PropTypes.func,
-    summary: PropTypes.arrayOf(
-        PropTypes.shape({
-            label: PropTypes.string.isRequired,
-            value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.shape({})])
-                .isRequired,
-        }).isRequired
-    ),
-};
-
-export default ConnectedRepeater;

package/src/core/ConnectedRepeaterComponent/index.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-
-import ErrorMessage from '../../components/ErrorMessage';
-
-import EmptyMessage from '../EmptyMessage';
-import Loader from '../Loader';
-
-import type { Columns } from '../TableCell';
-import type {
-    PaginationObject,
-    SimpleObject,
-    TransformerWithActions,
-} from '../../utility/interfaces';
-
-export interface ConnectedRepeaterRenderProps<T extends SimpleObject> {
-    columns?: Columns;
-    data?: T[];
-    isDisabled?: boolean;
-    pagination?: PaginationObject;
-    totals?: Record<string, number> | null;
-    transformer: TransformerWithActions<T>;
-}
-
-interface ConnectedRepeaterComponentProps<T extends SimpleObject> {
-    columns?: Columns;
-    data?: T[];
-    error?: string;
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    pagination?: PaginationObject;
-    render: (props: ConnectedRepeaterRenderProps<T>) => React.ReactElement;
-    totals?: Record<string, number> | null;
-    transformer: TransformerWithActions<T>;
-}
-
-function ConnectedRepeaterComponent<T extends SimpleObject>({
-    columns,
-    data,
-    error,
-    isDisabled,
-    isLoading,
-    pagination,
-    render,
-    totals,
-    transformer,
-}: ConnectedRepeaterComponentProps<T>): React.ReactElement {
-    if (error) {
-        return <ErrorMessage>{error}</ErrorMessage>;
-    }
-
-    if (isLoading) {
-        return <Loader />;
-    }
-
-    if (!data?.length) {
-        return <EmptyMessage />;
-    }
-
-    const props: ConnectedRepeaterRenderProps<T> = {
-        columns,
-        data,
-        isDisabled,
-        pagination,
-        totals,
-        transformer,
-    };
-
-    return render(props);
-}
-
-export default ConnectedRepeaterComponent;

package/src/core/Container/Container.module.css

@@ -1,13 +0,0 @@
-.root {
-    margin: 0 auto;
-    padding: 3rem clamp(1rem, 2.5vw, 3rem);
-}
-
-.rootTopbar {
-    margin: auto;
-    max-width: 110rem;
-}
-
-.root.rootIsWide {
-    max-width: none;
-}

package/src/core/Container/index.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import useLayout from '../../hooks/useLayout';
-
-// Import styles from './Container.module.css';
-
-interface ContainerProps {
-    children: React.ReactNode;
-    isWide?: boolean;
-}
-
-function Container({ children, isWide }: ContainerProps): React.ReactElement {
-    const { applyLayoutClassName } = useLayout();
-
-    return (
-        <div className="clsx(styles.root,isWide && styles.rootIsWide,applyLayoutClassName(styles))">
-            {children}
-        </div>
-    );
-}
-
-Container.propTypes = {
-    children: PropTypes.node.isRequired,
-    isWide: PropTypes.bool,
-};
-
-export default Container;

package/src/core/DataPanelItem/index.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import type { InputValue } from '../../utility/interfaces';
-
-export interface DataPanelObject<T = InputValue> {
-    label: string;
-    value?: T;
-}
-
-function DataPanelItem<T>({ label, value }: DataPanelObject<T>): React.ReactElement {
-    return (
-        <div>
-            <dt>{label}</dt>
-            <dd>{String(value)}</dd>
-        </div>
-    );
-}
-
-export default DataPanelItem;

package/src/core/EmptyMessage/EmptyMessage.module.css

@@ -1,18 +0,0 @@
-.root {
-    align-items: center;
-    color: var(--clr-grey600);
-    display: flex;
-    flex-direction: column;
-    height: 20rem;
-    justify-content: center;
-}
-
-.title {
-    font-size: var(--fs-xlrg);
-    font-weight: var(--fs-body);
-    margin-bottom: 1rem;
-}
-
-.description {
-    margin-bottom: 3rem;
-}

package/src/core/EmptyMessage/EmptyMessage.stories.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { EmptyMessageProps } from '@sqrzro/components';
-
-import EmptyMessage from './index';
-
-export default {
-    title: 'Core/EmptyMessage',
-    component: EmptyMessage,
-} as ComponentMeta<typeof EmptyMessage>;
-
-const Template: ComponentStory<typeof EmptyMessage> = (
-    args: EmptyMessageProps
-): React.ReactElement => <EmptyMessage {...args} />;
-
-export const Basic = Template.bind({});
-
-Basic.args = {
-    children: 'Lorem Ipsum',
-};
-
-export const Danger = Template.bind({});
-
-Custom.args = {
-    title: 'Lorem Ipsum',
-    description: 'Lorem ipsum dolor sit amet exceptor',
-};
-
-export const Bordered = Template.bind({});
-
-WithAction.args = {
-    action: { label: 'Lorem Ipsum', onClick: () => null },
-};

package/src/core/EmptyMessage/index.tsx

@@ -1,15 +0,0 @@
-'use client';
-
-import React from 'react';
-import { EmptyMessageComponent } from '@sqrzro/components';
-import type { EmptyMessageProps } from '@sqrzro/components';
-
-function EmptyMessage(props: EmptyMessageProps): React.ReactElement {
-    const classNames = {
-        root: 'bg-blue-600 border-2 border-red-200',
-    };
-
-    return <EmptyMessageComponent classNames={classNames} {...props} />;
-}
-
-export default EmptyMessage;

package/src/core/FilterItem/FilterItem.module.css

@@ -1,104 +0,0 @@
-.root {
-    margin-bottom: 1rem;
-    position: relative;
-    transition: opacity .3s;
-
-    @media (--media-med) {
-        margin-bottom: 0;
-        margin-right: .5rem;
-        max-width: 28rem;
-    }
-}
-
-.rootIsDisabled {
-    opacity: .3;
-    pointer-events: none;
-}
-
-.inner {
-    align-items: center;
-    background-color: var(--clr-white);
-    border: .1rem var(--clr-grey400) solid;
-    border-radius: .3rem;
-    color: var(--clr-grey600);
-    display: flex;
-    fill: var(--clr-grey600);
-    font-size: var(--fs-sml);
-    font-weight: var(--fw-bold);
-    height: var(--input-height);
-    padding: 0 1.5rem 0 1.2rem;
-    position: relative;
-}
-
-.innerHasValue {
-    color: var(--clr-grey800);
-    fill: var(--clr-primary);
-    padding: 0 5.5rem 0 1.2rem;
-}
-
-.icon {
-    min-width: 1.2rem;
-}
-
-.count {
-    background-color: var(--clr-primary);
-    border-radius: 50%;
-    color: var(--clr-white);
-    display: block;
-    height: 1.6rem;
-    font-size: var(--fs-xxsml);
-    font-weight: var(--fw-bold);
-    line-height: 1.6rem;
-    min-width: 1.6rem;
-    text-align: center;
-    width: 1.6rem;
-}
-
-.label {
-    overflow: hidden;
-    padding-left: .8rem;
-    padding-bottom: .1rem;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%;
-}
-
-.control {
-    background-color: transparent;
-    border: 0;
-    cursor: pointer;
-    height: 100%;
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    text-indent: 80rem;
-    width: 100%;
-}
-
-.controlHasValue {
-    width: calc(100% - 4rem);
-}
-
-.close {
-    align-items: center;
-    bottom: 0;
-    fill: var(--clr-grey600);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 4rem;
-
-    &::before {
-        border-left: .1rem var(--clr-grey400) solid;
-        bottom: .6rem;
-        content: '';
-        left: 0;
-        position: absolute;
-        top: .6rem;
-    }
-}