@sqrzro/admin 2.1.0-bz.9 → 2.1.0-r19.3

package/dist/components/SettingsForm/index.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EditableForm, EditableRadioFormField, EditableSwitchFormField } from '@sqrzro/components';
+import { useEditableForm } from '@sqrzro/hooks';
+import { submitSettingsForm } from '../../services/SettingsService';
+const options = { sidebar: 'Side bar', topbar: 'Top bar' };
+function SettingsForm({ defaults }) {
+    const { fieldProps, formProps } = useEditableForm({
+        defaults,
+        onSubmit: submitSettingsForm,
+    });
+    return (_jsxs(EditableForm, { title: "Appearance", ...formProps, children: [_jsx(EditableRadioFormField, { ...fieldProps('layout'), options: options, renderValue: (value) => (value ? options[value] || '-' : '-') }), _jsx(EditableSwitchFormField, { ...fieldProps('isDark'), label: "Dark mode" })] }));
+}
+export default SettingsForm;

package/dist/components/SettingsPage/index.d.ts

@@ -0,0 +1,2 @@
+declare function SettingsPage(): Promise<React.ReactElement>;
+export default SettingsPage;

package/dist/components/SettingsPage/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getLayout } from '../../services/SettingsService';
+import Page from '../Page';
+import SettingsForm from '../SettingsForm';
+async function SettingsPage() {
+    const layout = await getLayout();
+    return (_jsx(Page, { title: "Settings", children: _jsx("div", { className: "flex flex-col gap-6", children: _jsx(SettingsForm, { defaults: { layout } }) }) }));
+}
+export default SettingsPage;

package/dist/components/Table/index.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import type { Errorable } from '@sqrzro/interfaces';
-import type { TableClientComponentProps } from '../TableClientComponent';
-export interface TableProps<T> extends Omit<TableClientComponentProps, 'data'> {
-    fn: (filters?: Record<string, string>) => Promise<Errorable<T[]>>;
-    searchParams?: Record<string, string>;
+import type { FilterObject } from '../FilterBar';
+import type { TableComponentProps } from '../TableComponent';
+export interface TableProps<Item extends object, Params> extends Omit<TableComponentProps<Item, Params>, 'actions'> {
+    actions?: (data: Record<string, unknown>) => React.ReactNode;
+    filters?: FilterObject[];
 }
-declare function Table<T>({ columns, fn, searchParams, }: Readonly<TableProps<T>>): Promise<React.ReactElement>;
+declare function Table<Item extends object, Params>({ filters, hasSearch, ...props }: Readonly<TableProps<Item, Params>>): Promise<React.ReactElement>;
 export default Table;

package/dist/components/Table/index.js

@@ -1,17 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import TableClientComponent from '../TableClientComponent';
-function defaultTransformer(item) {
-    return {
-        id: item.id,
-        ...item,
-    };
-}
-async function Table({ columns, fn, searchParams, }) {
-    const [response, error] = await fn(searchParams);
-    if (error) {
-        return _jsx("div", { children: "Error" });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, Suspense } from 'react';
+import { getLayout } from '../../services/SettingsService';
+import FilterBar from '../FilterBar';
+import Panel from '../Panel';
+import TableComponent from '../TableComponent';
+async function Table({ filters, hasSearch, ...props }) {
+    const layout = await getLayout();
+    let searchParams; // eslint-disable-line @typescript-eslint/init-declarations
+    try {
+        const { headers } = await import('next/headers');
+        searchParams = new URLSearchParams((await headers()).get('x-search-params') || '');
+    }
+    catch (err) {
+        searchParams = new URLSearchParams();
     }
-    const data = response.map(defaultTransformer);
-    return _jsx(TableClientComponent, { columns: columns, data: data });
+    return (_jsxs(Fragment, { children: [filters || hasSearch ? (_jsx(FilterBar, { hasSearch: hasSearch, layout: layout, map: filters })) : null, _jsx(Panel, { children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(TableComponent, { ...props, searchParams: searchParams }) }) })] }));
 }
 export default Table;

package/dist/components/TableClientComponent/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface TableItemObject {
     [key: string]: string;
     id: string;

package/dist/components/TableClientComponent/index.js

@@ -1,15 +1,7 @@
 'use client';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import clsx from 'clsx';
-import { Link } from '@sqrzro/components';
+import { Link, tw } from '@sqrzro/components';
 import { usePathname, useSearchParams } from 'next/navigation';
-function toggleArrayItem(array, item) {
-    if (array.includes(item)) {
-        return array.filter((itm) => itm !== item);
-    }
-    return [...array, item];
-}
 function createFilterLink(pathname, searchParams, filters) {
     const updatedSearchParams = new URLSearchParams({
         ...Object.fromEntries(searchParams),
@@ -48,10 +40,9 @@ function parseColumns(columns) {
 function TableClientComponent({ columns, data, }) {
     const pathname = usePathname();
     const searchParams = useSearchParams();
-    const [selected, setSelected] = useState([]);
     const parsedColumns = parseColumns(columns);
     const hasTitles = parsedColumns.some((column) => column.title);
-    return (_jsx("div", { className: "bg-white shadow-sm", children: _jsxs("table", { className: "w-full", children: [hasTitles ? (_jsx("thead", { children: _jsx("tr", { children: parsedColumns.map((column) => (_jsx("th", { className: clsx('p-4', column.type === 'number' ? 'text-right' : 'text-left'), children: column.title ? (_jsxs(Link, { href: createSortLink(pathname, searchParams, column.key), children: [column.title, ' '] })) : null }, column.key))) }) })) : null, _jsx("tbody", { children: data.map((item) => (_jsx("tr", { className: "odd:bg-slate-100", children: parsedColumns.map((column) => (_jsx("td", { className: clsx('border-x border-transparent p-4', getSortIconProps(searchParams, column.key).dir
+    return (_jsx("div", { className: "bg-white shadow-sm", children: _jsxs("table", { className: "w-full", children: [hasTitles ? (_jsx("thead", { children: _jsx("tr", { children: parsedColumns.map((column) => (_jsx("th", { className: tw('p-4', column.type === 'number' ? 'text-right' : 'text-left'), children: column.title ? (_jsxs(Link, { href: createSortLink(pathname, searchParams, column.key), children: [column.title, ' '] })) : null }, column.key))) }) })) : null, _jsx("tbody", { children: data.map((item) => (_jsx("tr", { className: "odd:bg-slate-100", children: parsedColumns.map((column) => (_jsx("td", { className: tw('border-x border-transparent p-4', getSortIconProps(searchParams, column.key).dir
                                 ? 'border-sky-300 bg-sky-300/10'
                                 : '', column.type === 'number' ? 'text-right' : 'text-left'), children: item[column.key] }, column.key))) }, item.id))) })] }) }));
 }

package/dist/components/TableComponent/index.d.ts

@@ -0,0 +1,11 @@
+import type { Errorable } from '@sqrzro/interfaces';
+import type { TableClientComponentProps, TableItemObject } from '../TableClientComponent';
+export interface TableComponentProps<Item, Params> extends Omit<TableClientComponentProps, 'data'> {
+    fn: (params?: Params, searchParams?: URLSearchParams) => Promise<Errorable<Item[]>>;
+    hasSearch?: boolean;
+    params?: Params;
+    searchParams?: URLSearchParams;
+    transformer?: (item: Item) => TableItemObject;
+}
+declare function TableComponent<Item extends object, Params>({ columns, fn, params, searchParams, transformer, }: Readonly<TableComponentProps<Item, Params>>): Promise<React.ReactElement>;
+export default TableComponent;

package/dist/components/TableComponent/index.js

@@ -0,0 +1,17 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import TableClientComponent from '../TableClientComponent';
+function defaultTransformer(item) {
+    return {
+        id: item.id,
+        ...item,
+    };
+}
+async function TableComponent({ columns, fn, params, searchParams, transformer, }) {
+    const [response, error] = await fn(params, searchParams);
+    if (error) {
+        return _jsxs("div", { children: ["Error - ", error.message] });
+    }
+    const data = response.map(transformer || defaultTransformer);
+    return _jsx(TableClientComponent, { columns: columns, data: data });
+}
+export default TableComponent;

package/dist/components/Tabs/index.d.ts

@@ -1,8 +1,3 @@
-/// <reference types="react" />
-import type { LinkableAction } from '@sqrzro/interfaces';
-interface TabBarProps {
-    basePath?: string;
-    data: LinkableAction[];
-}
-declare function Tabs({ basePath, data }: Readonly<TabBarProps>): React.ReactElement;
+import type { TabsComponentProps } from '../TabsComponent';
+declare function Tabs({ basePath, data }: Readonly<TabsComponentProps>): Promise<React.ReactElement>;
 export default Tabs;

package/dist/components/Tabs/index.js

@@ -1,25 +1,8 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Link } from '@sqrzro/components';
-import { useNavigation } from '@sqrzro/hooks';
-import clsx from 'clsx';
-function Tabs({ basePath = '', data }) {
-    const navigation = useNavigation([basePath, data]);
-    return (_jsx("nav", { className: "border-b border-slate-700", children: _jsx("ul", { className: "flex gap-4", children: navigation.map(({ href, isActive, label }) => (_jsx("li", { children: _jsx(Link, { className: clsx('block px-1 pb-2 font-semibold', isActive
-                        ? 'border-primary border-b-4 text-white'
-                        : 'text-white/80 hover:text-white'), href: href, children: label }) }, href))) }) }));
-    // return (
-    //     <nav className="border-y border-slate-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>
-    // );
+import { filterNull } from '@sqrzro/utility';
+import { filterList } from '../../services/PermissionService';
+import TabsComponent from '../TabsComponent';
+async function Tabs({ basePath, data }) {
+    return _jsx(TabsComponent, { basePath: basePath, data: await filterList(filterNull(data)) });
 }
 export default Tabs;

package/dist/components/TabsComponent/index.d.ts

@@ -0,0 +1,7 @@
+import type { NavigationAction } from '../../interfaces';
+export interface TabsComponentProps {
+    basePath?: string;
+    data: NavigationAction[];
+}
+declare function TabsComponent({ basePath, data }: Readonly<TabsComponentProps>): React.ReactElement;
+export default TabsComponent;

package/dist/components/TabsComponent/index.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link, tw } from '@sqrzro/components';
+import useNavigation from '../../hooks/useNavigation';
+function TabsComponent({ basePath = '', data }) {
+    const navigation = useNavigation(data, { basePath });
+    return (_jsx("nav", { children: _jsx("ul", { className: "flex gap-4", children: navigation.map(({ href, isActive, label }) => (_jsx("li", { children: _jsx(Link, { className: tw('block border-b-4 border-transparent px-1 pb-2 font-semibold', isActive ? 'border-primary' : 'opacity-80 hover:opacity-100'), href: href, children: label }) }, href))) }) }));
+}
+export default TabsComponent;

package/dist/components/index.d.ts

@@ -1,31 +1,38 @@
-export { Button, CalendarInput, ConnectedDropdown, DateFormField, DateInput, Dropdown, DropdownFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextFormField, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, ModalForm, MultiFormField, NumberFormField, NumberInput, Switch, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
+export { Autocomplete, AutocompleteFormField, Button, CalendarInput, CheckboxInput, ConfirmableButton, ConfirmableForm, ContentFormField, DateFormField, DateInput, DefinitionList, Dropdown, DropdownFormField, EditableAutocompleteFormField, EditableContentFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMoneyFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextAreaFormField, EditableTextFormField, EmptyMessage, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, LoadingModal, Mail, MailBlock, MailButton, Modal, ModalActions, ModalForm, MoneyFormField, MoneyInput, MultiFormField, NumberFormField, NumberInput, ObjectFormField, RadioInput, Switch, SwitchFormField, TextArea, TextAreaFormField, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
+export type { DropdownItem, EditableFormFieldProps, FormFieldProps, LinkProps, MailProps, MailBlockProps, MailButtonProps, NumberInputProps, } from '@sqrzro/components';
 export type { AppLayoutProps } from './AppLayout';
 export { default as AppLayout } from './AppLayout';
 export type { BadgeProps } from './Badge';
 export { default as Badge } from './Badge';
 export type { DashboardProps } from './Dashboard';
 export { default as Dashboard } from './Dashboard';
+export type { DataTableProps } from './DataTable';
+export { default as DataTable } from './DataTable';
 export type { FilterBarProps, FilterObject } from './FilterBar';
 export { default as FilterBar } from './FilterBar';
 export type { GridListProps } from './GridList';
 export { default as GridList } from './GridList';
 export type { InfoPanelProps } from './InfoPanel';
 export { default as InfoPanel } from './InfoPanel';
-export type { ListComponentProps, ListProps } from './List';
+export type { ListProps } from './List';
 export { default as List } from './List';
+export type { ListClientComponentProps } from './ListClientComponent';
+export { default as ListClientComponent } from './ListClientComponent';
 export type { ListObject } from './ListItem';
-export type { ListActionsProps } from './ListActions';
+export type { ListAction, 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 { PaginatedListProps } from './PaginatedList';
+export { default as PaginatedList } from './PaginatedList';
 export type { PanelProps } from './Panel';
 export { default as Panel } from './Panel';
 export type { PageActionsProps } from './PageActions';
 export { default as PageActions } from './PageActions';
 export type { RootLayoutProps } from './RootLayout';
 export { default as RootLayout } from './RootLayout';
+export { default as SettingsPage } from './SettingsPage';
 export type { TableColumnObject } from './TableClientComponent';
 export type { TableProps } from './Table';
 export { default as Table } from './Table';
+export type { TableItemObject } from './TableClientComponent';

package/dist/components/index.js

@@ -1,16 +1,19 @@
 // Exported from @sqrzro/components
-export { Button, CalendarInput, ConnectedDropdown, DateFormField, DateInput, Dropdown, DropdownFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextFormField, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, ModalForm, MultiFormField, NumberFormField, NumberInput, Switch, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
+export { Autocomplete, AutocompleteFormField, Button, CalendarInput, CheckboxInput, ConfirmableButton, ConfirmableForm, ContentFormField, DateFormField, DateInput, DefinitionList, Dropdown, DropdownFormField, EditableAutocompleteFormField, EditableContentFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMoneyFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextAreaFormField, EditableTextFormField, EmptyMessage, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, LoadingModal, Mail, MailBlock, MailButton, Modal, ModalActions, ModalForm, MoneyFormField, MoneyInput, MultiFormField, NumberFormField, NumberInput, ObjectFormField, RadioInput, Switch, SwitchFormField, TextArea, TextAreaFormField, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
 export { default as AppLayout } from './AppLayout';
 export { default as Badge } from './Badge';
 export { default as Dashboard } from './Dashboard';
+export { default as DataTable } from './DataTable';
 export { default as FilterBar } from './FilterBar';
 export { default as GridList } from './GridList';
 export { default as InfoPanel } from './InfoPanel';
 export { default as List } from './List';
+export { default as ListClientComponent } from './ListClientComponent';
 export { default as ListActions } from './ListActions';
-export { default as LoginForm } from './LoginForm';
 export { default as Page } from './Page';
+export { default as PaginatedList } from './PaginatedList';
 export { default as Panel } from './Panel';
 export { default as PageActions } from './PageActions';
 export { default as RootLayout } from './RootLayout';
+export { default as SettingsPage } from './SettingsPage';
 export { default as Table } from './Table';

package/dist/hooks/useNavigation.d.ts

@@ -0,0 +1,11 @@
+import type { NavigationAction } from '../interfaces';
+interface NavigationObject {
+    href: string;
+    isActive: boolean;
+    label: string;
+}
+interface UseNavigationOptions {
+    basePath?: string;
+}
+declare function useNavigation(data: NavigationAction[], options?: UseNavigationOptions): NavigationObject[];
+export default useNavigation;

package/dist/hooks/useNavigation.js

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { joinUrl } from '@sqrzro/utility';
+import { usePathname } from 'next/navigation';
+function getActiveHref(pathname, hrefs) {
+    return (hrefs
+        .filter((href) => href && pathname.startsWith(`/${href.replace(/^\//u, '')}`))
+        .sort((first, second) => {
+        if (!first || !second) {
+            return 0;
+        }
+        return second.length - first.length;
+    })[0] || '');
+}
+function useNavigation(data, options) {
+    const [activeHref, setActiveHref] = useState('');
+    const pathname = usePathname();
+    const hrefs = data.map(({ href }) => joinUrl(options?.basePath, href));
+    useEffect(() => {
+        setActiveHref(getActiveHref(pathname, hrefs));
+    }, [pathname]);
+    return data.map(({ href, label }) => ({
+        href: joinUrl(options?.basePath, href),
+        isActive: joinUrl(options?.basePath, href) === activeHref,
+        label,
+    }));
+}
+export default useNavigation;