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

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright 2023 Richard Carter
+Copyright 2024 Richard Carter
 
 Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
 

package/README.md

@@ -1,14 +1,17 @@
 <div align="center">
 
-# Square Zero Admin
-  
-Square Zero Admin is an intentionally opionated collection of components, hooks, services and utilities that lets you very quickly build admin systems in Typescript & React.
+<h1>
+    <img src="assets/logo.svg" alt="" width="64" style="margin-bottom: 5px">
+    <br />
+    Square Zero Admin
+</h1>
 
-[Click here to get started](/story/guides-installation--page)
+<p>An intentionally opionated collection of components, hooks, services and utilities that lets you very quickly build admin systems in Typescript & React.</p>
+<p>[Click here to get started](/story/guides-installation--page)</p>
   
 <hr />
 
-[![GitHub license](https://img.shields.io/badge/license-ISC-blue.svg)](https://github.com/sqrzro/admin/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@sqrzro/admin.svg?style=flat)](https://www.npmjs.com/package/@sqrzro/admin) [![Build](https://github.com/sqrzro/admin/actions/workflows/development.yml/badge.svg)](https://github.com/sqrzro/admin/actions/workflows/development.yml)
+[![GitHub license](https://img.shields.io/badge/license-ISC-blue.svg)](https://github.com/sqrzro/sqrzro/admin/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@sqrzro/admin.svg?style=flat)](https://www.npmjs.com/package/@sqrzro/admin) [![Build](https://github.com/sqrzro/sqrzro/admin/actions/workflows/development.yml/badge.svg)](https://github.com/sqrzro/sqrzro/admin/actions/workflows/development.yml)
  
 </div>  
   

package/assets/images/check-white.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z" fill="white"/>
+</svg>

package/assets/images/chevron.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" fill="#64748B"/>
+</svg>

package/assets/images/close.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="#64748B"/>
+</svg>

package/assets/images/danger.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L12 10.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L13.4142 12L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L12 13.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L10.5858 12L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289Z" fill="#EF4444"/>
+</svg>

package/assets/images/eye.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="72" viewBox="0 0 24 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_61_10)">
+<path d="M2.42012 12.7132C2.28394 12.4975 2.21584 12.3897 2.17772 12.2234C2.14909 12.0985 2.14909 11.9015 2.17772 11.7766C2.21584 11.6103 2.28394 11.5025 2.42012 11.2868C3.54553 9.50484 6.8954 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7766C21.8517 11.9015 21.8517 12.0985 21.8231 12.2234C21.785 12.3897 21.7169 12.4975 21.5807 12.7132C20.4553 14.4952 17.1054 19 12.0004 19C6.8954 19 3.54553 14.4952 2.42012 12.7132Z" stroke="#1e293b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.0004 15C13.6573 15 15.0004 13.6569 15.0004 12C15.0004 10.3431 13.6573 9 12.0004 9C10.3435 9 9.0004 10.3431 9.0004 12C9.0004 13.6569 10.3435 15 12.0004 15Z" stroke="#1e293b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.7429 53.0923C11.1494 53.0322 11.5686 53 12.0004 53C17.1054 53 20.4553 57.5048 21.5807 59.2868C21.7169 59.5025 21.785 59.6103 21.8231 59.7767C21.8518 59.9016 21.8517 60.0987 21.8231 60.2236C21.7849 60.3899 21.7164 60.4985 21.5792 60.7156C21.2793 61.1901 20.8222 61.8571 20.2165 62.5805M6.72432 54.715C4.56225 56.1817 3.09445 58.2194 2.42111 59.2853C2.28428 59.5019 2.21587 59.6102 2.17774 59.7765C2.1491 59.9014 2.14909 60.0984 2.17771 60.2234C2.21583 60.3897 2.28393 60.4975 2.42013 60.7132C3.54554 62.4952 6.89541 67 12.0004 67C14.0588 67 15.8319 66.2676 17.2888 65.2766M3.00042 51L21.0004 69M9.8791 57.8787C9.3362 58.4216 9.00042 59.1716 9.00042 60C9.00042 61.6569 10.3436 63 12.0004 63C12.8288 63 13.5788 62.6642 14.1217 62.1213" stroke="#1e293b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_61_10">
+<rect width="24" height="72" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/info.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM11 8C11 7.44772 11.4477 7 12 7H12.01C12.5623 7 13.01 7.44772 13.01 8C13.01 8.55228 12.5623 9 12.01 9H12C11.4477 9 11 8.55228 11 8ZM12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="#3B82F6"/>
+</svg>

package/assets/images/success.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM17.2071 8.29289C17.5976 8.68342 17.5976 9.31658 17.2071 9.70711L11.2071 15.7071C10.8166 16.0976 10.1834 16.0976 9.79289 15.7071L6.79289 12.7071C6.40237 12.3166 6.40237 11.6834 6.79289 11.2929C7.18342 10.9024 7.81658 10.9024 8.20711 11.2929L10.5 13.5858L15.7929 8.29289C16.1834 7.90237 16.8166 7.90237 17.2071 8.29289Z" fill="#22C55E"/>
+</svg>

package/assets/images/warning.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 7C12.5523 7 13 7.44772 13 8V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V8C11 7.44772 11.4477 7 12 7ZM11 16C11 15.4477 11.4477 15 12 15H12.01C12.5623 15 13.01 15.4477 13.01 16C13.01 16.5523 12.5623 17 12.01 17H12C11.4477 17 11 16.5523 11 16Z" fill="#EAB308"/>
+</svg>

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 export interface AppLayoutProps {
     children: React.ReactNode;
+    logoutButton?: React.ReactNode;
     user?: {
         name: string;
     } | null;
 }
-declare function AppLayout({ children, user }: Readonly<AppLayoutProps>): React.ReactElement;
+declare function AppLayout({ children, logoutButton, user, }: Readonly<AppLayoutProps>): Promise<React.ReactElement>;
 export default AppLayout;

package/dist/components/AppLayout/index.js

@@ -1,12 +1,14 @@
-'use server';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { Container, Link } from '@sqrzro/components';
+import { Link, tw } from '@sqrzro/components';
 import { getConfig } from '../../services/ConfigService';
+import { getLayout } from '../../services/SettingsService';
 import AppNavigation from '../AppNavigation';
 import MePanel from '../MePanel';
-function AppLayout({ children, user }) {
+async function AppLayout({ children, logoutButton, user, }) {
     const config = getConfig();
-    return (_jsxs(Fragment, { children: [_jsx("header", { className: "bg-slate-800", children: _jsx(Container, { isFullWidth: true, children: _jsxs("div", { className: "flex h-16 items-center border-b border-slate-700", children: [_jsxs(Link, { className: "h-9 w-9", href: "/", children: [config.logo?.(), _jsx("span", { className: "sr-only", children: config.app.name })] }), _jsx(AppNavigation, {}), _jsx(MePanel, { user: user })] }) }) }), _jsx("main", { className: "mb-10 block", children: children })] }));
+    const layout = await getLayout();
+    return (_jsxs("div", { className: tw('', layout === 'sidebar' ? 'grid grid-cols-[12rem_1fr]' : null), children: [_jsx("header", { className: "bg-slate-800", children: _jsxs("div", { className: tw('flex items-center', layout === 'sidebar'
+                        ? 'h-screen flex-col'
+                        : 'h-16 border-b border-slate-700 px-4'), children: [_jsxs(Link, { className: tw(layout === 'sidebar' ? 'my-7 h-12 w-12' : 'h-9 w-9'), href: "/", children: [config.logo?.(), _jsx("span", { className: "sr-only", children: config.app.name })] }), _jsx(AppNavigation, { layout: layout }), _jsx(MePanel, { layout: layout, logoutButton: logoutButton, user: user })] }) }), _jsx("main", { className: "mb-10 block", children: children })] }));
 }
 export default AppLayout;

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

@@ -1,3 +1,5 @@
-/// <reference types="react" />
-declare function AppNavigation(): React.ReactElement;
+interface AppNavigationProps {
+    layout?: string;
+}
+declare function AppNavigation({ layout, }: Readonly<AppNavigationProps>): Promise<React.ReactElement>;
 export default AppNavigation;

package/dist/components/AppNavigation/index.js

@@ -1,17 +1,8 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { Link } from '@sqrzro/components';
-import { useNavigation } from '@sqrzro/hooks';
 import { getConfig } from '../../services/ConfigService';
-function getNavigation() {
-    const { navigation } = getConfig();
-    return Object.entries(navigation).map(([href, label]) => ({ href, label }));
-}
-function AppNavigation() {
-    const navigation = useNavigation(getNavigation());
-    return (_jsx("nav", { className: "h-full pl-6", children: _jsx("ul", { className: "flex h-full items-center gap-2", children: navigation.map(({ href, isActive, label }) => (_jsx("li", { className: "h-full", children: _jsx(Link, { className: clsx('relative flex h-full items-center px-1 font-semibold', isActive
-                        ? 'text-white before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-primary'
-                        : 'text-white/80 hover:text-white'), href: href, children: label }) }, href))) }) }));
+import { filterList } from '../../services/PermissionService';
+import AppNavigationComponent from '../AppNavigationComponent';
+async function AppNavigation({ layout, }) {
+    return (_jsx(AppNavigationComponent, { data: await filterList(getConfig().navigation), layout: layout }));
 }
 export default AppNavigation;

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

@@ -0,0 +1,11 @@
+interface ConfigNavigationObject {
+    href: string;
+    label: string;
+    permission?: string;
+}
+interface AppNavigationComponentProps {
+    data: ConfigNavigationObject[];
+    layout?: string;
+}
+declare function AppNavigationComponent({ data, layout, }: Readonly<AppNavigationComponentProps>): React.ReactElement;
+export default AppNavigationComponent;

package/dist/components/AppNavigationComponent/index.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link, tw } from '@sqrzro/components';
+import useNavigation from '../../hooks/useNavigation';
+function getActiveClassNames(layout) {
+    if (layout === 'sidebar') {
+        return 'bg-slate-700 text-white';
+    }
+    return 'before:bg-primary text-white before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1';
+}
+function AppNavigationComponent({ data, layout, }) {
+    const navigation = useNavigation(data);
+    return (_jsx("nav", { className: tw('h-full', layout === 'sidebar' ? 'w-full' : 'pl-6'), children: _jsx("ul", { className: tw('flex h-full gap-4', layout === 'sidebar' ? 'flex-col items-start' : 'items-center'), children: navigation.map(({ href, isActive, label }) => (_jsx("li", { className: tw(layout === 'sidebar' ? 'w-full' : 'h-full'), children: _jsx(Link, { className: tw(layout === 'sidebar'
+                        ? 'block px-4 py-3'
+                        : 'relative flex h-full items-center px-1 font-semibold', isActive
+                        ? getActiveClassNames(layout)
+                        : 'text-white/80 hover:text-white'), href: href, children: label }) }, href))) }) }));
+}
+export default AppNavigationComponent;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface ConfigNavigationObject {
+    href: string;
+    label: string;
+    permission?: string;
+}
+interface AppNavigationSubProps {
+    data: ConfigNavigationObject[];
+}
+declare function AppNavigationSub({ data }: Readonly<AppNavigationSubProps>): React.ReactElement;
+export default AppNavigationSub;

package/dist/components/AppNavigationSub/index.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
+import { Link } from '@sqrzro/components';
+function AppNavigationSub({ data }) {
+    const [isOpen, setIsOpen] = useState(false);
+    function toggleIsOpen() {
+        setIsOpen((prev) => !prev);
+    }
+    return (_jsxs(Fragment, { children: [_jsx("button", { onClick: toggleIsOpen, type: "button", children: "Open" }), isOpen ? (_jsx("ul", { children: data.map(({ href, label }) => (_jsx("li", { children: _jsx(Link, { href: href, children: label }) }, href))) })) : null] }));
+}
+export default AppNavigationSub;

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

@@ -0,0 +1,10 @@
+declare const classNames: {
+    root: string;
+    logo: string;
+    panel: string;
+    title: string;
+    link: string;
+    actions: string;
+    footer: string;
+};
+export default classNames;

package/dist/components/Auth/index.js

@@ -0,0 +1,10 @@
+const classNames = {
+    root: 'bg-slate-800 gap-8',
+    logo: 'mx-auto flex h-12 w-32 items-end',
+    panel: 'rounded bg-white p-8 shadow-lg pb-10',
+    title: 'text-lg font-semibold mb-6 leading-none',
+    link: 'font-semibold text-link',
+    actions: 'pt-2 w-full',
+    footer: '-mb-2',
+};
+export default classNames;

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { StyleVariant } from '@sqrzro/interfaces';
 export interface BadgeProps {
     children: React.ReactNode;
-    variant: StyleVariant;
+    variant?: StyleVariant | null;
 }
 declare function Badge({ children, variant }: Readonly<BadgeProps>): React.ReactElement;
 export default Badge;

package/dist/components/Badge/index.js

@@ -1,11 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-const variantMap = {
-    info: 'bg-sky-100 border-sky-300 text-sky-700',
-    warning: 'bg-yellow-100 border-yellow-300 text-yellow-700',
-    success: 'bg-emerald-100 border-emerald-300 text-emerald-600',
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tw } from '@sqrzro/components';
+const classMap = {
+    danger: 'bg-red-100 text-red-700',
+    error: 'bg-red-100 text-red-700',
+    info: 'bg-sky-100 text-sky-700',
+    warning: 'bg-yellow-100 text-yellow-700',
+    success: 'bg-green-100 text-green-700',
+};
+const dotMap = {
+    danger: 'fill-red-400',
+    error: 'fill-red-400',
+    info: 'fill-sky-400',
+    warning: 'fill-yellow-400',
+    success: 'fill-green-400',
 };
 function Badge({ children, variant }) {
-    return (_jsx("strong", { className: clsx('block rounded border px-2 py-1 text-xs', variantMap[variant]), children: children }));
+    return (_jsxs("strong", { className: tw('inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600', variant ? classMap[variant] : null), "data-testid": "badge-root", children: [_jsx("svg", { "aria-hidden": "true", className: tw('h-1.5 w-1.5 fill-slate-400', variant ? dotMap[variant] : null), viewBox: "0 0 6 6", children: _jsx("circle", { cx: "3", cy: "3", r: "3" }) }), children] }));
 }
 export default Badge;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { FilterComponentProps } from '../../interfaces';
 declare function BooleanFilter({ name, onChange, value, }: Readonly<FilterComponentProps>): React.ReactElement;
 export declare function renderBooleanValue(value: string): string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface DashboardProps {
     children?: React.ReactNode;
     title: string;

package/dist/components/Dashboard/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Dashboard({ children, title }) {
-    return (_jsxs("div", { children: [_jsx("h1", { className: "mx-auto text-center text-4xl font-semibold", children: title }), children] }));
+    return (_jsxs("div", { className: "py-8", children: [_jsx("h1", { className: "mx-auto text-center text-4xl font-semibold", children: title }), children] }));
 }
 export default Dashboard;

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

@@ -0,0 +1,5 @@
+export interface DataTableProps {
+    data: Record<string, React.ReactNode>;
+}
+declare function DataTable({ data }: Readonly<DataTableProps>): React.ReactElement;
+export default DataTable;

package/dist/components/DataTable/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function DataTable({ data }) {
+    return (_jsx("table", { children: _jsx("tbody", { children: Object.entries(data).map(([key, value]) => (_jsxs("tr", { className: "odd:bg-slate-100", children: [_jsx("th", { className: "p-2 font-normal", children: key }), _jsx("td", { className: "p-2 text-right", children: value })] }, key))) }) }));
+}
+export default DataTable;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { FilterComponentProps } from '../../interfaces';
 declare function DateFilter({ name, onChange, value }: Readonly<FilterComponentProps>): React.ReactElement;
 export declare function transformDateValue(value?: string | null): string;

package/dist/components/DateFilter/index.js

@@ -1,7 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CalendarInput } from '@sqrzro/components';
+import { formatDate } from '@sqrzro/utility';
+function parseValueUp(value) {
+    if (!value) {
+        return '';
+    }
+    if (Array.isArray(value)) {
+        return value.map((item) => formatDate(item, 'YYYY-MM-DD')).join(',');
+    }
+    return formatDate(value, 'YYYY-MM-DD');
+}
+function parseValueDown(value) {
+    if (!value) {
+        return null;
+    }
+    if (value.includes(',')) {
+        const [start, end] = value.split(',').map((item) => new Date(item));
+        return [start, end];
+    }
+    return new Date(value);
+}
 function DateFilter({ name, onChange, value }) {
-    return _jsx(CalendarInput, { name: name, onChange: onChange, value: value, isPanelOnly: true, isRange: true });
+    function handleChange(event) {
+        onChange({ target: { name, value: parseValueUp(event.target.value) } });
+    }
+    return (_jsx(CalendarInput, { name: name, onChange: handleChange, value: parseValueDown(value), isPanelOnly: true, isRange: true }));
 }
 export function transformDateValue(value) {
     return value || '';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { SimpleObject } from '@sqrzro/interfaces';
 import type { FilterComponentProps } from '../../interfaces';
 declare function DropdownFilter({ data, name, onChange, value, }: Readonly<FilterComponentProps>): React.ReactElement;

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

@@ -1,8 +1,9 @@
-/// <reference types="react" />
 import type { FilterObject } from '../FilterBarItem';
 export type { FilterObject } from '../FilterBarItem';
 export interface FilterBarProps {
-    map: FilterObject[];
+    hasSearch?: boolean;
+    layout?: string;
+    map?: FilterObject[];
 }
-declare function FilterBar({ map }: Readonly<FilterBarProps>): React.ReactElement;
+declare function FilterBar({ hasSearch, layout, map }: Readonly<FilterBarProps>): React.ReactElement;
 export default FilterBar;

package/dist/components/FilterBar/index.js

@@ -1,12 +1,39 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { TextInput, tw } from '@sqrzro/components';
 import { useFilters } from '@sqrzro/hooks';
+import { useRouter } from 'next/navigation';
+import FilterBarClearButton from '../FilterBarClearButton';
 import FilterBarItem from '../FilterBarItem';
-function FilterBar({ map }) {
+function FilterBar({ hasSearch, layout, map }) {
+    const router = useRouter();
     const [filters, setFilter] = useFilters();
+    const [search, setSearch] = useState(filters.get('search') || '');
     function handleChange(name, value) {
         setFilter(name, value);
+        router.refresh();
     }
-    return (_jsx("ul", { className: "relative flex gap-2 before:absolute before:left-[calc(50%-50vw)] before:top-full before:h-24 before:w-screen before:bg-slate-800", children: map.map((filter) => (_jsx(FilterBarItem, { onChange: handleChange, value: filters.get(filter.name) || '', ...filter }, filter.name))) }));
+    function handleSearchChange(event) {
+        setSearch(event.target.value || '');
+    }
+    function handleSearchClear() {
+        setSearch('');
+        setFilter('search', '');
+    }
+    function handleSearchKeyDown(event) {
+        if (event.key === 'Enter') {
+            setFilter('search', event.currentTarget.value);
+        }
+    }
+    return (_jsxs("ul", { className: tw('flex gap-2', layout === 'sidebar'
+            ? ''
+            : 'relative before:absolute before:left-[calc(50%-50vw)] before:top-full before:h-24 before:w-screen before:bg-slate-800'), children: [hasSearch ? (_jsxs("li", { className: "relative", children: [_jsx(TextInput, { classNames: {
+                            root: {
+                                default: tw('h-8 w-56 rounded-full border border-slate-400  px-3 text-xs text-white placeholder:text-slate-300', filters.get('search')
+                                    ? 'bg-slate-700'
+                                    : 'bg-transparent focus:bg-slate-700'),
+                            },
+                        }, name: "search", onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, placeholder: "Search...", value: search }), filters.get('search') ? (_jsx(FilterBarClearButton, { onClick: handleSearchClear })) : null] })) : null, (map || []).map((filter) => (_jsx(FilterBarItem, { onChange: handleChange, value: filters.get(filter.name) || '', ...filter }, filter.name)))] }));
 }
 export default FilterBar;

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

@@ -0,0 +1,5 @@
+interface FilterBarClearButtonProps {
+    onClick: () => void;
+}
+declare function FilterBarClearButton({ onClick, }: Readonly<FilterBarClearButtonProps>): React.ReactElement;
+export default FilterBarClearButton;

package/dist/components/FilterBarClearButton/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function FilterBarClearButton({ onClick, }) {
+    return (_jsxs("button", { className: "absolute right-0 top-0 flex h-full w-10 select-none items-center justify-center", onClick: onClick, type: "button", children: [_jsx("span", { className: "sr-only", children: "Remove" }), _jsx("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-white leading-none text-slate-800", children: "\u00D7" })] }));
+}
+export default FilterBarClearButton;

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

@@ -1,8 +1,9 @@
-/// <reference types="react" />
-import type { SimpleObject } from '@sqrzro/interfaces';
 export type FilterType = 'boolean' | 'date' | 'dropdown';
 export interface FilterObject {
-    data?: SimpleObject[];
+    data?: {
+        id: string;
+        name: string;
+    }[];
     label: string;
     name: string;
     type: FilterType;

package/dist/components/FilterBarItem/index.js

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import clsx from 'clsx';
+import { tw } from '@sqrzro/components';
+import { useClickOutside } from '@sqrzro/hooks';
 import BooleanFilter, { renderBooleanValue } from '../BooleanFilter';
 import DateFilter, { renderDateValue, transformDateValue } from '../DateFilter';
 import DropdownFilter, { renderDropdownValue } from '../DropdownFilter';
+import FilterBarClearButton from '../FilterBarClearButton';
 const map = {
     boolean: { component: BooleanFilter, renderValue: renderBooleanValue },
     date: {
@@ -17,15 +18,15 @@ const map = {
 };
 const DEFAULT_SIZE = 'w-56';
 function FilterBarItem({ data, label, name, onChange, type, value, }) {
-    const panel = useRef(null);
+    const [isOpen, setIsOpen, node] = useClickOutside();
     function handleChange(event) {
         onChange(name, event.target.value);
-        panel.current?.hidePopover();
+        setIsOpen(false);
     }
     function handleClear() {
         onChange(name, '');
     }
     const { component: FilterComponent, renderValue, size, transformValue } = map[type];
-    return (_jsxs("li", { className: clsx('relative inline-flex gap-2 rounded-full border px-5 py-2 text-xs text-white', value ? 'border-solid border-slate-400' : 'border-dashed border-slate-500', value ? 'bg-slate-700 pr-10' : 'text-slate-500'), children: [_jsx("p", { className: "", children: label }), value ? (_jsx("p", { className: "border-l border-l-slate-300 pl-2 font-semibold", children: renderValue(value, data) })) : null, _jsx("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", children: "Edit" }), value ? (_jsxs("button", { className: "absolute right-0 top-0 flex h-full w-10 select-none items-center justify-center", onClick: handleClear, type: "button", children: [_jsx("span", { className: "sr-only", children: "Remove" }), _jsx("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-white leading-none text-slate-800", children: "\u00D7" })] })) : null, _jsx("div", { ref: panel, anchor: `${name}-control`, className: clsx('show left-[anchor(left)] top-[anchor(bottom)] -ml-px mt-2 origin-top-left origin-top-left rounded bg-white shadow-lg', size || DEFAULT_SIZE), id: `${name}-target`, popover: "auto", children: _jsx("div", { className: "py-1", role: "none", children: _jsx(FilterComponent, { data: data, name: name, onChange: handleChange, value: transformValue ? transformValue(value) : value }) }) })] }));
+    return (_jsxs("li", { ref: node, className: tw('relative inline-flex h-8 items-center gap-2 rounded-full border px-5 text-xs text-white', value ? 'border-solid border-slate-400' : 'border-dashed border-slate-400', value ? 'bg-slate-700 pr-10' : 'text-slate-300'), children: [_jsx("p", { className: "", children: label }), value ? (_jsx("p", { className: "border-l border-l-slate-300 pl-2 font-semibold", children: renderValue(value, data) })) : null, _jsx("button", { className: tw('absolute left-0 top-0 h-full select-none text-transparent', value ? 'right-10' : 'right-0'), onClick: () => setIsOpen(!isOpen), type: "button", children: "Edit" }), value ? _jsx(FilterBarClearButton, { onClick: handleClear }) : null, _jsx("div", { className: tw('show absolute left-0 top-full z-10 -ml-px mt-2 origin-top-left origin-top-left rounded bg-white shadow-lg', size || DEFAULT_SIZE, isOpen ? 'block' : 'hidden'), children: _jsx("div", { className: "py-1", role: "none", children: _jsx(FilterComponent, { data: data, name: name, onChange: handleChange, value: transformValue ? transformValue(value) : value }) }) })] }));
 }
 export default FilterBarItem;

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

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import type { ListProps } from '../List';
-export type GridListProps<Item, Params> = Omit<ListProps<Item, Params>, 'renderItem'>;
-declare function GridList<Item extends object, Params = object>(props: GridListProps<Item, Params>): React.ReactElement;
+export type GridListProps<Item extends object, Params> = Omit<ListProps<Item, Params>, 'renderItem'>;
+declare function GridList<Item extends object, Params>(props: GridListProps<Item, Params>): React.ReactElement;
 export default GridList;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ListObject } from '../ListItem';
-declare function GridListItem({ actions: Actions, href, id, image, meta, subtitle, title, }: Readonly<ListObject>): React.ReactElement;
+declare function GridListItem({ description, href, id, image, imageHref, meta, title, }: Readonly<ListObject>): React.ReactElement;
 export default GridListItem;

package/dist/components/GridListItem/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import { Link } from '@sqrzro/components';
 import { renderMeta } from '../ListItem';
-function GridListItem({ actions: Actions, href, id, image, meta, subtitle, title, }) {
-    return (_jsx("li", { children: _jsxs("article", { className: "bg-panel overflow-hidden rounded p-4 shadow", children: [_jsx("div", { className: "mb-4 h-64 rounded border border border-slate-300 bg-slate-50 p-4", children: image ? (_jsx("img", { alt: "", className: "h-full w-full object-contain", src: image })) : null }), _jsx("h2", { className: "text-base font-semibold", children: href ? _jsx(Link, { href: href, children: title }) : title }), subtitle ? _jsx("p", { className: "text-xs text-slate-500", children: subtitle }) : null, meta || Actions ? _jsx("hr", { className: "my-4" }) : null, _jsxs("div", { className: "flex items-center justify-between", children: [meta ? renderMeta(meta) : null, Actions ? _jsx(Actions, { id: id }) : null] })] }) }));
+function GridListItem({ description, href, id, image, imageHref, meta, title, }) {
+    return (_jsx("li", { children: _jsxs("article", { className: "bg-panel overflow-hidden rounded p-4 shadow", children: [_jsx("div", { className: "relative mb-4 h-64 rounded border border border-slate-300 bg-slate-50 p-4", children: image ? (_jsxs(Fragment, { children: [_jsx("img", { alt: "", className: "h-full w-full object-contain", src: image }), imageHref ? (_jsx(Link, { className: "absolute inset-0", href: imageHref, scroll: false, children: _jsx("span", { className: "sr-only", children: "Edit Image" }) })) : null] })) : imageHref ? (_jsxs(Link, { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 font-semibold text-slate-500", href: imageHref, scroll: false, children: [_jsx("i", { className: "block h-12 w-12 rounded-full border-2 border-slate-300" }), "Add Image"] })) : null }), _jsx("h2", { className: "text-base font-semibold", children: href ? _jsx(Link, { href: href, children: title }) : title }), description ? _jsx("p", { className: "text-xs text-slate-500", children: description }) : null, meta ? (_jsxs(Fragment, { children: [_jsx("hr", { className: "my-4" }), _jsx("div", { className: "flex items-center justify-between", children: meta ? renderMeta(id, meta) : null })] })) : null, href ? (_jsxs(Fragment, { children: [_jsx("hr", { className: "my-4" }), _jsx(Link, { href: href, scroll: false, children: "Edit" })] })) : null] }) }));
 }
 export default GridListItem;

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import type { StyleVariant } from '@sqrzro/interfaces';
+type InfoPanelVariant = StyleVariant | 'mail';
 export interface InfoPanelProps {
     children: React.ReactNode;
-    variant?: StyleVariant;
+    variant?: InfoPanelVariant;
 }
 declare function InfoPanel({ children, variant }: Readonly<InfoPanelProps>): React.ReactElement;
 export default InfoPanel;

package/dist/components/InfoPanel/index.js

@@ -1,10 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-const variantMap = {
-    info: 'bg-sky-50 border-sky-200 text-sky-700',
-    warning: 'bg-yellow-50 border-yellow-100 text-yellow-700',
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tw } from '@sqrzro/components';
+const iconClassMap = {
+    danger: 'bg-[url(/admin/images/danger.svg)]',
+    error: 'bg-[url(/admin/images/danger.svg)]',
+    info: 'bg-[url(/admin/images/info.svg)]',
+    mail: 'bg-[url(/admin/images/mail.svg)]',
+    success: 'bg-[url(/admin/images/success.svg)]',
+    warning: 'bg-[url(/admin/images/warning.svg)]',
+};
+const classMap = {
+    danger: 'bg-red-100 text-red-700',
+    error: 'bg-red-100 text-red-700',
+    info: 'bg-sky-100 text-sky-700',
+    mail: 'bg-sky-100 text-sky-700',
+    success: 'bg-green-100 text-green-700',
+    warning: 'bg-yellow-100 text-yellow-700',
 };
 function InfoPanel({ children, variant = 'info' }) {
-    return (_jsx("aside", { className: clsx('rounded border px-3 py-2', variantMap[variant]), children: children }));
+    return (_jsxs("aside", { className: tw('flex gap-2 rounded p-4', classMap[variant]), children: [_jsx("i", { className: tw('aspect-square w-5 flex-none bg-contain bg-no-repeat', iconClassMap[variant]) }), _jsx("div", { children: children })] }));
 }
 export default InfoPanel;

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

@@ -1,24 +1,8 @@
-/// <reference types="react" />
-import type { EmptyMessageProps } from '@sqrzro/components';
-import type { Errorable } from '@sqrzro/interfaces';
 import type { FilterObject } from '../FilterBar';
-import type { ListObject } from '../ListItem';
-export interface ListComponentProps {
-    params?: Record<string, string>;
-    searchParams?: Record<string, string>;
-}
-export interface ListProps<Item, Params = object> {
-    actions?: ({ id }: {
-        readonly id: number;
-    }) => React.ReactElement;
-    columns?: number;
-    emptyMessageProps?: EmptyMessageProps;
+import type { ListComponentProps } from '../ListComponent';
+export interface ListProps<Item extends object, Params> extends Omit<ListComponentProps<Item, Params>, 'actions'> {
+    actions?: (data: Record<string, unknown>) => React.ReactNode;
     filters?: FilterObject[];
-    fn: (params?: Params, searchParams?: Record<string, string>) => Promise<Errorable<Item[]>>;
-    renderItem?: (props: ListObject) => React.ReactElement;
-    params?: Params;
-    searchParams?: Record<string, string>;
-    transformer?: (item: Item) => ListObject;
 }
-declare function List<Item extends object, Params = object>({ actions, columns, emptyMessageProps, filters, fn, params, renderItem, searchParams, transformer, }: Readonly<ListProps<Item, Params>>): Promise<React.ReactElement>;
+declare function List<Item extends object, Params>({ filters, hasSearch, ...props }: Readonly<ListProps<Item, Params>>): Promise<React.ReactElement>;
 export default List;