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

package/src/components/LoginForm/index.tsx

@@ -1,34 +0,0 @@
-'use client';
-
-import { Form, FormField, FormSubmit, PasswordInput, TextInput } from '@sqrzro/components';
-import type { UseFormReturn } from '@sqrzro/hooks';
-import type { UserObject } from '@sqrzro/server';
-
-export type LoginFormProps = UseFormReturn<UserObject>;
-
-function LoginForm({ fieldProps, formProps }: Readonly<LoginFormProps>): React.ReactElement {
-    return (
-        <div className="flex h-screen flex-col items-center justify-center bg-slate-800 pb-[10vh]">
-            <div className="mx-auto mb-8 h-12 w-12 rounded-full border-4 border-primary" />
-            <div className="w-full max-w-sm rounded-lg bg-white p-8 shadow-lg">
-                <h1 className="mb-8 text-center text-xl font-semibold">Sign in to continue</h1>
-                <Form {...formProps}>
-                    <FormField label="Email" {...fieldProps('email')} render={TextInput} />
-                    <FormField
-                        label="Password"
-                        {...fieldProps('password')}
-                        render={PasswordInput}
-                    />
-                    <div className="mt-8 text-center">
-                        <a className="mb-6 block text-primary" href="/#">
-                            Forgot Password?
-                        </a>
-                        <FormSubmit isFullWidth>Sign In</FormSubmit>
-                    </div>
-                </Form>
-            </div>
-        </div>
-    );
-}
-
-export default LoginForm;

package/src/components/MeActions/index.tsx

@@ -1,21 +0,0 @@
-'use client';
-
-import { removeSession } from '@sqrzro/server';
-import { useRouter } from 'next/navigation';
-
-function MeActions(): React.ReactElement {
-    const router = useRouter();
-
-    async function handleLogout(): Promise<void> {
-        await removeSession();
-        router.refresh();
-    }
-
-    return (
-        <button className="text-xs text-gray-300" onClick={handleLogout} type="button">
-            Log Out
-        </button>
-    );
-}
-
-export default MeActions;

package/src/components/MePanel/index.tsx

@@ -1,21 +0,0 @@
-'use server';
-
-import { getIdFromSession } from '@sqrzro/server';
-
-import MeActions from '../MeActions';
-
-async function MePanel(): Promise<React.ReactElement> {
-    const id = await getIdFromSession();
-
-    return (
-        <div className="ml-auto flex items-center gap-3">
-            <div className="flex flex-col items-end text-white">
-                <strong>{id}</strong>
-                <MeActions />
-            </div>
-            <div className="h-9 w-9 rounded-full border-4 border-gray-500" />
-        </div>
-    );
-}
-
-export default MePanel;

package/src/components/Page/index.tsx

@@ -1,60 +0,0 @@
-import { Fragment } from 'react';
-import { Button, Container } from '@sqrzro/components';
-import type { LinkableAction } from '@sqrzro/interfaces';
-
-import Tabs from '../Tabs';
-
-export interface PageProps {
-    actions?: LinkableAction[];
-    basePath?: string;
-    children: React.ReactNode;
-    isFullWidth?: boolean;
-    tabs?: LinkableAction[];
-    title: string;
-}
-
-function Page({
-    actions,
-    basePath,
-    children,
-    isFullWidth,
-    tabs,
-    title,
-}: Readonly<PageProps>): React.ReactElement {
-    return (
-        <Fragment>
-            <header className="bg-gray-800 pb-32 text-white">
-                <Container isFullWidth={isFullWidth}>
-                    <div className="flex items-center justify-between py-10">
-                        <h1 className="min-h-10 text-3xl font-semibold">{title}</h1>
-                        <div id="page-actions" />
-                        {/* {actions ? (
-                            <div className="sticky top-0">
-                                {actions.map(({ href, label, onClick }) => (
-                                    <Button
-                                        key={href}
-                                        href={href}
-                                        onClick={onClick}
-                                        variant="primary"
-                                    >
-                                        {label}
-                                    </Button>
-                                ))}
-                            </div>
-                        ) : null} */}
-                    </div>
-                    {tabs ? (
-                        <div className="-mt-4 mb-8">
-                            <Tabs basePath={basePath} data={tabs} />
-                        </div>
-                    ) : null}
-                </Container>
-            </header>
-            <Container isFullWidth={isFullWidth}>
-                <div className="-mt-32 flex flex-col gap-8">{children}</div>
-            </Container>
-        </Fragment>
-    );
-}
-
-export default Page;

package/src/components/PageActions/index.tsx

@@ -1,22 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-export interface PageActionsProps {
-    children: React.ReactNode;
-}
-
-function PageActions({ children }: Readonly<PageActionsProps>): React.ReactElement | null {
-    const ref = useRef<HTMLElement | null>(null);
-    const [mounted, setMounted] = useState(false);
-
-    useEffect(() => {
-        ref.current = document.getElementById('page-actions');
-        setMounted(true);
-    }, []);
-
-    return mounted && ref.current ? createPortal(children, ref.current) : null;
-}
-
-export default PageActions;

package/src/components/Panel/Panel.spec.tsx

@@ -1,10 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import Panel from './index';
-
-describe('Panel', () => {
-    it('should render', () => {
-        render(<Panel />);
-        expect(screen.queryByText('Panel')).toBeInTheDocument();
-    });
-});

package/src/components/Panel/Panel.stories.tsx

@@ -1,9 +0,0 @@
-import Panel from './index';
-
-export default { title: 'Components/Panel', component: Panel };
-
-export const Default = (): React.ReactElement => <Panel>Example Panel</Panel>;
-
-export const WithTitle = (): React.ReactElement => (
-    <Panel title="Example Title">Example Panel</Panel>
-);

package/src/components/Panel/index.tsx

@@ -1,15 +0,0 @@
-interface PanelProps {
-    children: React.ReactNode;
-    title?: string;
-}
-
-function Panel({ children, title }: Readonly<PanelProps>): React.ReactElement {
-    return (
-        <article>
-            {title ? <h3>{title}</h3> : null}
-            {children}
-        </article>
-    );
-}
-
-export default Panel;

package/src/components/RootLayout/index.tsx

@@ -1,39 +0,0 @@
-import { Suspense } from 'react';
-
-import { ClassNames, Toaster, registerClassNames } from '@sqrzro/components';
-
-import { setConfig } from '../../services/ConfigService';
-import type { Config as ConfigObject } from '../../services/ConfigService';
-
-import classNames from '../../styles/config';
-
-import Config from '../Config';
-
-export interface RootLayoutProps {
-    children: React.ReactNode;
-    config?: ConfigObject;
-}
-
-function RootLayout({ children, config }: Readonly<RootLayoutProps>): React.ReactElement {
-    registerClassNames(classNames);
-
-    if (config) {
-        setConfig(config);
-    }
-
-    return (
-        <html lang="en">
-            <head />
-            <body>
-                <Config data={config} />
-                <ClassNames data={classNames} />
-                {children}
-                <Suspense fallback={null}>
-                    <Toaster />
-                </Suspense>
-            </body>
-        </html>
-    );
-}
-
-export default RootLayout;

package/src/components/Table/index.tsx

@@ -1,34 +0,0 @@
-import type { ErrorablePromise } from '@sqrzro/server';
-
-import TableClientComponent from '../TableClientComponent';
-import type { TableClientComponentProps, TableItemObject } from '../TableClientComponent';
-
-function defaultTransformer<T>(item: T): TableItemObject {
-    return {
-        id: (item as unknown as TableItemObject).id,
-        ...item,
-    };
-}
-
-export interface TableProps<T> extends Omit<TableClientComponentProps, 'data'> {
-    fn: (filters?: Record<string, string>) => ErrorablePromise<T[]>;
-    searchParams?: Record<string, string>;
-}
-
-async function Table<T>({
-    columns,
-    fn,
-    searchParams,
-}: Readonly<TableProps<T>>): Promise<React.ReactElement> {
-    const [response, error] = await fn(searchParams);
-
-    if (error) {
-        return <div>Error</div>;
-    }
-
-    const data = response.map(defaultTransformer);
-
-    return <TableClientComponent columns={columns} data={data} />;
-}
-
-export default Table;

package/src/components/TableClientComponent/index.tsx

@@ -1,112 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import clsx from 'clsx';
-import { Link } from '@sqrzro/components';
-import { usePathname, useSearchParams } from 'next/navigation';
-
-export interface TableItemObject {
-    [key: string]: string;
-    id: string;
-}
-
-interface TableColumnObject {
-    key: string;
-    title: string;
-    type?: 'string';
-}
-
-export interface TableClientComponentProps {
-    columns: TableColumnObject[];
-    data: TableItemObject[];
-}
-
-function toggleArrayItem<T>(array: T[], item: T): T[] {
-    if (array.includes(item)) {
-        return array.filter((itm) => itm !== item);
-    }
-    return [...array, item];
-}
-
-function createFilterLink(
-    pathname: string,
-    searchParams: URLSearchParams,
-    filters: Record<string, string>
-): string {
-    const updatedSearchParams = new URLSearchParams({
-        ...Object.fromEntries(searchParams),
-        ...filters,
-    });
-
-    return `${pathname}?${updatedSearchParams.toString()}`;
-}
-
-function getDir(currentDir: string | null, isSortActive?: boolean): string {
-    if (isSortActive) {
-        return currentDir === 'asc' ? 'desc' : 'asc';
-    }
-    return 'asc';
-}
-
-function createSortLink(pathname: string, searchParams: URLSearchParams, sort: string): string {
-    const dir = getDir(searchParams.get('dir'), searchParams.get('sort') === sort);
-    return createFilterLink(pathname, searchParams, { sort, dir });
-}
-
-function getSortIconProps(searchParams: URLSearchParams, sort: string): { dir: string | null } {
-    if (searchParams.get('sort') === sort) {
-        return { dir: searchParams.get('dir') };
-    }
-    return { dir: null };
-}
-
-function TableClientComponent({
-    columns,
-    data,
-}: Readonly<TableClientComponentProps>): React.ReactElement {
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-
-    const [selected, setSelected] = useState<string[]>([]);
-
-    return (
-        <div className="bg-white shadow-sm">
-            <table className="w-full">
-                <thead>
-                    <tr>
-                        {columns.map((column) => (
-                            <th key={column.key} className="p-4 text-left">
-                                <Link href={createSortLink(pathname, searchParams, column.key)}>
-                                    {column.title}{' '}
-                                    {/*getSortIconProps(searchParams, column.key).dir*/}
-                                </Link>
-                            </th>
-                        ))}
-                    </tr>
-                </thead>
-                <tbody>
-                    {data.map((item) => (
-                        <tr key={item.id} className="odd:bg-slate-100">
-                            {columns.map((column) => (
-                                <td
-                                    key={column.key}
-                                    className={clsx(
-                                        'border-x border-transparent p-4',
-                                        getSortIconProps(searchParams, column.key).dir
-                                            ? 'border-sky-300 bg-sky-300/10'
-                                            : ''
-                                    )}
-                                >
-                                    {item[column.key]}
-                                </td>
-                            ))}
-                        </tr>
-                    ))}
-                </tbody>
-            </table>
-        </div>
-    );
-}
-
-export default TableClientComponent;

package/src/components/Tabs/index.tsx

@@ -1,25 +0,0 @@
-import { Link } from '@sqrzro/components';
-import type { LinkableAction } from '@sqrzro/interfaces';
-
-interface TabBarProps {
-    basePath?: string;
-    data: LinkableAction[];
-}
-
-function Tabs({ basePath = '', data }: Readonly<TabBarProps>): React.ReactElement {
-    return (
-        <nav className="border-y border-gray-700">
-            <ul className="flex gap-4 font-semibold">
-                {data.map(({ href, label }) => (
-                    <li key={href}>
-                        <Link className="block py-2 text-white" href={`${basePath}${href || ''}`}>
-                            {label}
-                        </Link>
-                    </li>
-                ))}
-            </ul>
-        </nav>
-    );
-}
-
-export default Tabs;

package/src/components/index.ts

@@ -1,68 +0,0 @@
-// Exported from @sqrzro/components
-
-export {
-    Button,
-    CalendarInput,
-    ConnectedDropdown,
-    DateFormField,
-    DateInput,
-    Dropdown,
-    EditableDateFormField,
-    EditableDropdownFormField,
-    EditableForm,
-    EditableFormField,
-    EditableMultiFormField,
-    EditableNumberFormField,
-    EditableSwitchFormField,
-    EditableTextFormField,
-    Fieldset,
-    Form,
-    FormField,
-    FormSubmit,
-    ImageInput,
-    ImageFormField,
-    Link,
-    ModalForm,
-    NumberInput,
-    Switch,
-    TextFormField,
-    TextInput,
-    Toaster,
-} from '@sqrzro/components';
-
-// Exported from @sqrzro/admin
-
-export type { AppLayoutProps } from './AppLayout';
-export { default as AppLayout } from './AppLayout';
-
-export type { DashboardProps } from './Dashboard';
-export { default as Dashboard } from './Dashboard';
-
-export type { FilterBarProps } from './FilterBar';
-export { default as FilterBar } from './FilterBar';
-
-export type { GridListProps } from './GridList';
-export { default as GridList } from './GridList';
-
-export type { ListComponentProps, ListProps } from './List';
-export { default as List } from './List';
-
-export type { ListObject } from './ListItem';
-
-export type { ListActionsProps } from './ListActions';
-export { default as ListActions } from './ListActions';
-
-export type { LoginFormProps } from './LoginForm';
-export { default as LoginForm } from './LoginForm';
-
-export type { PageProps } from './Page';
-export { default as Page } from './Page';
-
-export type { PageActionsProps } from './PageActions';
-export { default as PageActions } from './PageActions';
-
-export type { RootLayoutProps } from './RootLayout';
-export { default as RootLayout } from './RootLayout';
-
-export type { TableProps } from './Table';
-export { default as Table } from './Table';

package/src/icons/ErrorIcon/index.tsx

@@ -1,19 +0,0 @@
-function ErrorIcon(): React.ReactElement {
-    return (
-        <svg
-            aria-hidden="true"
-            className="h-5 w-5 text-red-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                clipRule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
-                fillRule="evenodd"
-            />
-        </svg>
-    );
-}
-
-export default ErrorIcon;

package/src/icons/InfoIcon/index.tsx

@@ -1,19 +0,0 @@
-function InfoIcon(): React.ReactElement {
-    return (
-        <svg
-            aria-hidden="true"
-            className="h-5 w-5 text-blue-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                clipRule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
-                fillRule="evenodd"
-            />
-        </svg>
-    );
-}
-
-export default InfoIcon;

package/src/icons/SuccessIcon/index.tsx

@@ -1,19 +0,0 @@
-function SuccessIcon(): React.ReactElement {
-    return (
-        <svg
-            aria-hidden="true"
-            className="h-5 w-5 text-green-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                clipRule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
-                fillRule="evenodd"
-            />
-        </svg>
-    );
-}
-
-export default SuccessIcon;

package/src/icons/WarningIcon/index.tsx

@@ -1,19 +0,0 @@
-function WarningIcon(): React.ReactElement {
-    return (
-        <svg
-            aria-hidden="true"
-            className="h-5 w-5 text-yellow-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                clipRule="evenodd"
-                d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
-                fillRule="evenodd"
-            />
-        </svg>
-    );
-}
-
-export default WarningIcon;

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from './components';
-export * from './interfaces';
-export * from './services/ConfigService';

package/src/interfaces.ts

@@ -1,3 +0,0 @@
-import type { InputProps, SimpleObject } from '@sqrzro/interfaces';
-
-export type FilterComponentProps = InputProps<string> & { data?: SimpleObject[] };

package/src/react.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react'; // eslint-disable-line @typescript-eslint/no-unused-vars
-
-declare module 'react' {
-    // This is a temporary fix until React supports the Popover API properly.
-    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
-        anchor?: string;
-        popover?: string;
-    }
-    interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
-        popovertarget?: string;
-    }
-}

package/src/services/ConfigService.ts

@@ -1,24 +0,0 @@
-export interface Config {
-    app: {
-        name: string;
-        url: string;
-    };
-    navigation: Record<string, string>;
-}
-
-let cachedConfig: Config = {
-    app: {
-        name: 'Square Zero',
-        url: 'http://localhost:8080',
-    },
-    navigation: {},
-};
-
-export function setConfig(config: Config): Config {
-    cachedConfig = config;
-    return cachedConfig;
-}
-
-export function getConfig(): Config {
-    return cachedConfig;
-}