@sqrzro/admin 2.1.0-bz.1 → 2.1.0-bz.11

package/dist/utility/formatters.d.ts

@@ -1 +0,0 @@
-export declare function formatDate(value?: Date): string;

package/dist/utility/formatters.js

@@ -1,8 +0,0 @@
-export function formatDate(value) {
-    if (!value) {
-        return '';
-    }
-    return `${value.getDate().toString().padStart(2, '0')}/${(value.getMonth() + 1)
-        .toString()
-        .padStart(2, '0')}/${value.getFullYear()}`;
-}

package/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

package/postcss.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-    plugins: [require('tailwindcss')],
-};

package/prettier.config.js

@@ -1 +0,0 @@
-module.exports = require('@sqrzro/prettier-config');

package/src/components/AppLayout/index.tsx

@@ -1,32 +0,0 @@
-import { Fragment } from 'react';
-import { Container, Link } from '@sqrzro/components';
-
-import { getConfig } from '../../services/ConfigService';
-
-import AppNavigation from '../AppNavigation';
-import MePanel from '../MePanel';
-
-export interface AppLayoutProps {
-    children: React.ReactNode;
-}
-
-function AppLayout({ children }: Readonly<AppLayoutProps>): React.ReactElement {
-    return (
-        <Fragment>
-            <header className="bg-gray-800">
-                <Container isFullWidth>
-                    <div className="flex h-16 items-center border-b border-gray-700">
-                        <Link className="h-9 w-9 rounded-full border-4 border-primary" href="/">
-                            <span className="sr-only">{getConfig().app.name}</span>
-                        </Link>
-                        <AppNavigation />
-                        <MePanel />
-                    </div>
-                </Container>
-            </header>
-            <main className="mb-10 block">{children}</main>
-        </Fragment>
-    );
-}
-
-export default AppLayout;

package/src/components/AppNavigation/index.tsx

@@ -1,39 +0,0 @@
-'use client';
-
-import clsx from 'clsx';
-
-import { Link } from '@sqrzro/components';
-import { useNavigation } from '@sqrzro/hooks';
-import type { NavigationData } from '@sqrzro/hooks';
-
-import { getConfig } from '../../services/ConfigService';
-
-function getNavigation(): NavigationData {
-    const { navigation } = getConfig();
-    return Object.entries(navigation).map(([href, label]) => ({ href, label }));
-}
-
-function AppNavigation(): React.ReactElement {
-    const navigation = useNavigation(getNavigation());
-
-    return (
-        <ul className="flex h-full items-center gap-2 pl-6">
-            {navigation.map(({ href, isActive, label }) => (
-                <li key={href} className="h-full">
-                    <Link
-                        className="block flex h-full items-center font-semibold text-white"
-                        href={href}
-                    >
-                        <span
-                            className={clsx('rounded px-3 py-2', isActive ? 'bg-gray-700' : null)}
-                        >
-                            {label}
-                        </span>
-                    </Link>
-                </li>
-            ))}
-        </ul>
-    );
-}
-
-export default AppNavigation;

package/src/components/BooleanFilter/index.tsx

@@ -1,28 +0,0 @@
-import { Dropdown } from '@sqrzro/components';
-
-import type { FilterComponentProps } from '../../interfaces';
-
-const data = [
-    {
-        id: '0',
-        name: 'No',
-    },
-    {
-        id: '1',
-        name: 'Yes',
-    },
-];
-
-function BooleanFilter({
-    name,
-    onChange,
-    value,
-}: Readonly<FilterComponentProps>): React.ReactElement {
-    return <Dropdown data={data} name={name} onChange={onChange} value={value} isPanelOnly />;
-}
-
-export function renderBooleanValue(value: string): string {
-    return data.find((item) => item.id === value)?.name || '';
-}
-
-export default BooleanFilter;

package/src/components/Config/index.tsx

@@ -1,17 +0,0 @@
-'use client';
-
-import { setConfig } from '../../services/ConfigService';
-import type { Config as ConfigObject } from '../../services/ConfigService';
-
-interface ConfigProps {
-    data?: ConfigObject;
-}
-
-function Config({ data }: Readonly<ConfigProps>): null {
-    if (data) {
-        setConfig(data);
-    }
-    return null;
-}
-
-export default Config;

package/src/components/Dashboard/index.tsx

@@ -1,15 +0,0 @@
-export interface DashboardProps {
-    children?: React.ReactNode;
-    title: string;
-}
-
-function Dashboard({ children, title }: Readonly<DashboardProps>): React.ReactElement {
-    return (
-        <div>
-            <h1 className="mx-auto text-center text-4xl font-semibold">{title}</h1>
-            {children}
-        </div>
-    );
-}
-
-export default Dashboard;

package/src/components/DateFilter/index.tsx

@@ -1,49 +0,0 @@
-import { CalendarInput } from '@sqrzro/components';
-
-import type { FilterComponentProps } from '../../interfaces';
-
-function DateFilter({ name, onChange, value }: Readonly<FilterComponentProps>): React.ReactElement {
-    return <CalendarInput name={name} onChange={onChange} value={value} isPanelOnly isRange />;
-}
-
-export function transformDateValue(value?: string | null): string {
-    //return value?.split(',').map((item) => new Date(item)) || [];
-    return value || '';
-}
-
-const LENGTH_OF_YEAR = 4;
-
-function renderDateString(value: string, noYear?: boolean): string {
-    const date = new Date(value);
-
-    if (Number.isNaN(date.getTime())) {
-        return '';
-    }
-
-    const day = date.getDate().toString().padStart(2, '0');
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const year = date.getFullYear();
-
-    return `${day}/${month}${noYear ? '' : `/${year}`}`;
-}
-
-export function renderDateValue(value: string): string {
-    if (value.includes(',')) {
-        const values = value.split(',');
-        const years = values.map((item) => parseInt(item.substring(0, LENGTH_OF_YEAR), 10));
-
-        return value
-            .split(',')
-            .map((item) =>
-                renderDateString(
-                    item,
-                    years[0] === years[1] && years[0] === new Date().getFullYear()
-                )
-            )
-            .join(' - ');
-    }
-
-    return renderDateString(value);
-}
-
-export default DateFilter;

package/src/components/DropdownFilter/index.tsx

@@ -1,19 +0,0 @@
-import { Dropdown } from '@sqrzro/components';
-import type { SimpleObject } from '@sqrzro/interfaces';
-
-import type { FilterComponentProps } from '../../interfaces';
-
-function DropdownFilter({
-    data,
-    name,
-    onChange,
-    value,
-}: Readonly<FilterComponentProps>): React.ReactElement {
-    return <Dropdown data={data} name={name} onChange={onChange} value={value} isPanelOnly />;
-}
-
-export function renderDropdownValue(value: string, data?: SimpleObject[]): string {
-    return data?.find((item) => item.id === value)?.name || '';
-}
-
-export default DropdownFilter;

package/src/components/FilterBar/index.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import { useFilters } from '@sqrzro/hooks';
-
-import FilterBarItem from '../FilterBarItem';
-import type { FilterObject } from '../FilterBarItem';
-
-export type FilterMap = FilterObject[];
-
-export interface FilterBarProps {
-    map: FilterMap;
-}
-
-function FilterBar({ map }: Readonly<FilterBarProps>): React.ReactElement {
-    const [filters, setFilter] = useFilters();
-
-    function handleChange(name: string, value: string): void {
-        setFilter(name, value);
-    }
-
-    return (
-        <ul className="sticky top-0 flex gap-2">
-            {map.map((filter) => (
-                <FilterBarItem
-                    key={filter.name}
-                    onChange={handleChange}
-                    value={filters.get(filter.name) || ''}
-                    {...filter}
-                />
-            ))}
-        </ul>
-    );
-}
-
-export default FilterBar;

package/src/components/FilterBarItem/index.tsx

@@ -1,126 +0,0 @@
-'use client';
-
-import { useRef } from 'react';
-
-import type { InputEvent, SimpleObject } from '@sqrzro/interfaces';
-import clsx from 'clsx';
-
-import type { FilterComponentProps } from '../../interfaces';
-
-import BooleanFilter, { renderBooleanValue } from '../BooleanFilter';
-import DateFilter, { renderDateValue, transformDateValue } from '../DateFilter';
-import DropdownFilter, { renderDropdownValue } from '../DropdownFilter';
-
-export interface FilterObject {
-    data?: SimpleObject[];
-    label: string;
-    name: string;
-    type: 'boolean' | 'date' | 'dropdown';
-}
-
-interface FilterBarItemProps extends FilterObject {
-    onChange: (name: string, value?: string) => void;
-    value?: string;
-}
-
-interface FilterMapItem {
-    component: React.FunctionComponent<FilterComponentProps>;
-    renderValue: (value: string, data?: SimpleObject[]) => string;
-    size?: string;
-    transformValue?: (value?: string) => string;
-}
-
-const map: Record<FilterObject['type'], FilterMapItem> = {
-    boolean: { component: BooleanFilter, renderValue: renderBooleanValue },
-    date: {
-        component: DateFilter,
-        renderValue: renderDateValue,
-        size: 'w-96',
-        transformValue: transformDateValue,
-    },
-    dropdown: { component: DropdownFilter, renderValue: renderDropdownValue },
-};
-
-const DEFAULT_SIZE = 'w-56';
-
-function FilterBarItem({
-    data,
-    label,
-    name,
-    onChange,
-    type,
-    value,
-}: Readonly<FilterBarItemProps>): React.ReactElement {
-    const panel = useRef<HTMLDivElement>(null);
-
-    function handleChange(event: InputEvent<string>): void {
-        onChange(name, event.target.value);
-        panel.current?.hidePopover();
-    }
-
-    function handleClear(): void {
-        onChange(name, '');
-    }
-
-    const { component: FilterComponent, renderValue, size, transformValue } = map[type];
-
-    return (
-        <li
-            className={clsx(
-                'relative inline-flex gap-2 rounded-full border px-5 py-2 text-xs text-white',
-                value ? 'border-solid border-gray-400' : 'border-dashed border-gray-500',
-                value ? 'bg-gray-700 pr-10' : 'text-slate-500'
-            )}
-        >
-            <p className="">{label}</p>
-            {value ? (
-                <p className="border-l border-l-slate-300 pl-2 font-semibold">
-                    {renderValue(value, data)}
-                </p>
-            ) : null}
-            <button
-                className={clsx(
-                    'absolute left-0 top-0 h-full select-none text-transparent',
-                    value ? 'right-10' : 'right-0'
-                )}
-                id={`${name}-control`}
-                popovertarget={`${name}-target`}
-                type="button"
-            >
-                Edit
-            </button>
-            {value ? (
-                <button
-                    className="absolute right-0 top-0 flex h-full w-10 select-none items-center justify-center"
-                    onClick={handleClear}
-                    type="button"
-                >
-                    <span className="sr-only">Remove</span>
-                    <span className="flex h-4 w-4 items-center justify-center rounded-full bg-white leading-none text-gray-800">
-                        &times;
-                    </span>
-                </button>
-            ) : null}
-            <div
-                ref={panel}
-                anchor={`${name}-control`}
-                className={`showpanel -ml-px mt-2 ${
-                    size || DEFAULT_SIZE
-                } left-[anchor(left)] top-[anchor(bottom)] origin-top-left rounded-md bg-white shadow-lg`}
-                id={`${name}-target`}
-                popover="auto"
-            >
-                <div className="py-1" role="none">
-                    <FilterComponent
-                        data={data}
-                        name={name}
-                        onChange={handleChange}
-                        value={transformValue ? transformValue(value) : value}
-                    />
-                </div>
-            </div>
-        </li>
-    );
-}
-
-export default FilterBarItem;

package/src/components/GridList/index.tsx

@@ -1,11 +0,0 @@
-import GridListItem from '../GridListItem';
-import List from '../List';
-import type { ListProps } from '../List';
-
-export type GridListProps<T> = Omit<ListProps<T>, 'renderItem'>;
-
-function GridList<T extends object>(props: ListProps<T>): React.ReactElement {
-    return <List {...props} className="grid grid-cols-3 gap-6" renderItem={GridListItem} />;
-}
-
-export default GridList;

package/src/components/GridListItem/index.tsx

@@ -1,31 +0,0 @@
-import { Link } from '@sqrzro/components';
-
-import { renderMeta } from '../ListItem';
-import type { ListObject } from '../ListItem';
-
-function GridListItem({
-    actions: Actions,
-    href,
-    id,
-    image,
-    meta,
-    title,
-}: Readonly<ListObject>): React.ReactElement {
-    return (
-        <li>
-            <article className="overflow-hidden rounded-md bg-white p-4 shadow">
-                {image ? <img alt="" className="mb-4 border border-gray-200" src={image} /> : null}
-                <h2 className="text-base font-semibold">
-                    {href ? <Link href={href}>{title}</Link> : title}
-                </h2>
-                {meta || Actions ? <hr className="my-4" /> : null}
-                <div className="flex items-center justify-between">
-                    {meta ? renderMeta(meta) : null}
-                    {Actions ? <Actions id={id} /> : null}
-                </div>
-            </article>
-        </li>
-    );
-}
-
-export default GridListItem;

package/src/components/Icon/index.tsx

@@ -1,33 +0,0 @@
-import ErrorIcon from '../../icons/ErrorIcon';
-import InfoIcon from '../../icons/InfoIcon';
-import SuccessIcon from '../../icons/SuccessIcon';
-import WarningIcon from '../../icons/WarningIcon';
-
-export type IconType = 'error' | 'info' | 'success' | 'warning';
-
-const icons: Record<IconType, () => React.ReactElement> = {
-    error: ErrorIcon,
-    info: InfoIcon,
-    success: SuccessIcon,
-    warning: WarningIcon,
-};
-
-export interface IconProps {
-    type?: keyof typeof icons;
-}
-
-function Icon({ type }: Readonly<IconProps>): React.ReactElement | null {
-    if (!type) {
-        return null;
-    }
-
-    const IconComponent = icons[type];
-
-    if (!IconComponent) {
-        return null;
-    }
-
-    return <IconComponent />;
-}
-
-export default Icon;

package/src/components/List/index.tsx

@@ -1,70 +0,0 @@
-import { Fragment } from 'react';
-import clsx from 'clsx';
-import { EmptyMessage } from '@sqrzro/components';
-import type { ErrorablePromise } from '@sqrzro/server';
-
-import FilterBar from '../FilterBar';
-import type { FilterMap } from '../FilterBar';
-import ListItem from '../ListItem';
-import type { ListObject } from '../ListItem';
-
-export interface ListComponentProps {
-    params?: Record<string, string>;
-    searchParams?: Record<string, string>;
-}
-
-export interface ListProps<T> {
-    actions?: ({ id }: { readonly id: number }) => React.ReactElement;
-    className?: string;
-    filters?: FilterMap;
-    fn: (
-        params?: Record<string, string>,
-        searchParams?: Record<string, string>
-    ) => ErrorablePromise<T[]>;
-    renderItem?: (props: ListObject) => React.ReactElement;
-    params?: Record<string, string>;
-    searchParams?: Record<string, string>;
-    transformer?: (item: T) => ListObject;
-}
-
-function defaultTransformer(): ListObject {
-    return {
-        id: 0,
-        title: '',
-    };
-}
-
-async function List<T extends object>({
-    actions,
-    className,
-    filters,
-    fn,
-    params,
-    renderItem = ListItem,
-    searchParams,
-    transformer,
-}: Readonly<ListProps<T>>): Promise<React.ReactElement> {
-    const [response, error] = await fn(params, searchParams);
-
-    if (error) {
-        return <div>ERRORROROR</div>;
-    }
-
-    const data = response.map(transformer || defaultTransformer);
-    const hasFilters = Boolean(Object.keys(searchParams || []).length);
-
-    return (
-        <Fragment>
-            {filters && (data.length || hasFilters) ? <FilterBar map={filters} /> : null}
-            {data.length ? (
-                <ul className={clsx(className)}>
-                    {data.map((item) => renderItem({ actions, ...item }))}
-                </ul>
-            ) : (
-                <EmptyMessage />
-            )}
-        </Fragment>
-    );
-}
-
-export default List;

package/src/components/ListAction/index.tsx

@@ -1,25 +0,0 @@
-import { ConfirmableButton } from '@sqrzro/components';
-import type { ConfirmableAction } from '@sqrzro/interfaces';
-
-interface ListActionProps extends ConfirmableAction<number> {
-    id: number;
-}
-
-function ListAction({
-    id,
-    onClick,
-    label,
-    variant,
-}: Readonly<ListActionProps>): React.ReactElement {
-    function handleClick(): void {
-        onClick(id);
-    }
-
-    return (
-        <ConfirmableButton onClick={handleClick} variant={variant} isText>
-            {label}
-        </ConfirmableButton>
-    );
-}
-
-export default ListAction;

package/src/components/ListActions/index.tsx

@@ -1,43 +0,0 @@
-'use client';
-
-import { useClickOutside } from '@sqrzro/hooks';
-import type { ConfirmableAction } from '@sqrzro/interfaces';
-
-import ListAction from '../ListAction';
-
-export interface ListActionsProps {
-    actions: ConfirmableAction<number>[];
-    id: number;
-}
-
-function ListActions({ actions, id }: Readonly<ListActionsProps>): React.ReactElement {
-    const [isOpen, setIsOpen, ref] = useClickOutside();
-
-    function toggleIsOpen(): void {
-        setIsOpen(!isOpen);
-    }
-
-    return (
-        <div ref={ref} className="flex flex-row-reverse items-center gap-4">
-            <button
-                className="h-4 rotate-90 text-xs leading-[1em] tracking-tighter text-slate-500"
-                onClick={toggleIsOpen}
-                type="button"
-            >
-                &bull;&bull;&bull;
-                <span className="sr-only">{isOpen ? 'Close' : 'Open'} Actions</span>
-            </button>
-            {isOpen ? (
-                <ul className="showpanel relative flex origin-right gap-4 bg-white before:absolute before:left-[-999em] before:right-full before:h-full before:bg-white/80">
-                    {actions.map(({ label, onClick, variant }) => (
-                        <li key={label}>
-                            <ListAction id={id} label={label} onClick={onClick} variant={variant} />
-                        </li>
-                    ))}
-                </ul>
-            ) : null}
-        </div>
-    );
-}
-
-export default ListActions;

package/src/components/ListItem/index.tsx

@@ -1,56 +0,0 @@
-import { Link } from '@sqrzro/components';
-import { Fragment } from 'react';
-
-export interface ListObject {
-    actions?: ({ id }: { id: number }) => React.ReactElement;
-    href?: string;
-    id: number;
-    image?: string;
-    meta?: string[];
-    title: string;
-}
-
-export function renderMeta(meta: Record<string, string> | string[]): React.ReactElement {
-    if (Array.isArray(meta)) {
-        return (
-            <ul className="flex gap-4 text-xs">
-                {meta.map((item) => (
-                    <li key={item}>{item}</li>
-                ))}
-            </ul>
-        );
-    }
-
-    return (
-        <dl className="w-full text-xs">
-            {Object.entries(meta).map(([key, value]) => (
-                <div key={key} className="flex justify-between p-2 odd:bg-gray-100">
-                    <dt>{key}</dt>
-                    <dd>{value}</dd>
-                </div>
-            ))}
-        </dl>
-    );
-}
-
-function ListItem({
-    actions: Actions,
-    href,
-    id,
-    meta,
-    title,
-}: Readonly<ListObject>): React.ReactElement {
-    return (
-        <li className="mb-4">
-            <article className="overflow-hidden rounded-md bg-white p-4 shadow">
-                <h2 className="font-semibold">{href ? <Link href={href}>{title}</Link> : title}</h2>
-                <div className="mt-2 flex items-center justify-between">
-                    {meta ? renderMeta(meta) : null}
-                    {Actions ? <Actions id={id} /> : null}
-                </div>
-            </article>
-        </li>
-    );
-}
-
-export default ListItem;