@sqrzro/admin 2.0.0 → 2.1.0-bz.0

package/.babelrc.json

@@ -0,0 +1,16 @@
+{
+    "sourceType": "unambiguous",
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "chrome": 100
+                }
+            }
+        ],
+        "@babel/preset-typescript",
+        "@babel/preset-react"
+    ],
+    "plugins": []
+}

package/.eslintignore

@@ -0,0 +1,6 @@
+dist
+jest.config.js
+node_modules
+prettier.config.js
+scripts/*.js
+tailwind.config.js

package/.eslintrc

@@ -1,8 +1,5 @@
 {
     "root": true,
     "plugins": ["@sqrzro"],
-    "extends": ["plugin:@sqrzro/react"],
-    "parserOptions": {
-        "project": "tsconfig.eslint.json"
-    }
+    "extends": ["plugin:@sqrzro/react"]
 }

package/.sqrzrorc

@@ -0,0 +1,5 @@
+{
+    "styles": "tailwind",
+    "template": "next",
+    "version": "1.12.0"
+}

package/.storybook/main.js

@@ -1,12 +1,11 @@
 module.exports = {
-    addons: [
-        '@storybook/addon-links',
-        '@storybook/addon-essentials',
-        '@storybook/addon-interactions',
-    ],
-    core: {
-        builder: '@storybook/builder-webpack5',
-    },
-    framework: '@storybook/react',
-    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-};
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', "@storybook/addon-mdx-gfm"],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  stories: ['../src/**/*.stories.tsx'],
+  docs: {
+    autodocs: true
+  }
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,20 @@
+
+> @sqrzro/admin@2.0.0 build /Users/richard/Sites/@sqrzro/sqrzro/packages/admin
+> pnpm clean && pnpm build:css && pnpm build:ts
+
+
+> @sqrzro/admin@2.0.0 clean /Users/richard/Sites/@sqrzro/sqrzro/packages/admin
+> rimraf ./dist
+
+
+> @sqrzro/admin@2.0.0 build:css /Users/richard/Sites/@sqrzro/sqrzro/packages/admin
+> tailwindcss -i "./src/styles/tailwind.css" -o "./dist/styles.css"
+
+
+Rebuilding...
+
+Done in 140ms.
+
+> @sqrzro/admin@2.0.0 build:ts /Users/richard/Sites/@sqrzro/sqrzro/packages/admin
+> tsc -p tsconfig.build.json
+

package/.turbo/turbo-prettier.log

@@ -1,215 +1,43 @@
-$ prettier --write "./src/**/*.tsx" "./src/**/*.ts"
-(node:10718) [DEP0128] DeprecationWarning: Invalid 'main' field in '/Users/richard/Sites/@sqrzro/sqrzro/node_modules/@sqrzro/prettier-config/package.json' of 'index2.js'. Please either fix that or report it to the module author
-(Use `node --trace-deprecation ...` to show where the warning was created)
-src/components/Alert/index.tsx 192ms
-src/components/Allow/Allow.spec.tsx 11ms
-src/components/Allow/index.tsx 9ms
-src/components/AppLayout/AppLayout.stories.tsx 8ms
-src/components/AppLayout/index.tsx 10ms
-src/components/AutoSuggest/AutoSuggest.spec.tsx 28ms
-src/components/AutoSuggest/AutoSuggest.story.tsx 9ms
-src/components/AutoSuggest/index.tsx 21ms
-src/components/Button/Button.spec.tsx 13ms
-src/components/Button/Button.stories.tsx 9ms
-src/components/Button/index.tsx 5ms
-src/components/CalendarInput/CalendarInput.spec.tsx 23ms
-src/components/CalendarInput/CalendarInput.story.tsx 8ms
-src/components/CalendarInput/index.tsx 10ms
-src/components/CheckboxList/CheckboxList.spec.tsx 14ms
-src/components/CheckboxList/index.tsx 9ms
-src/components/ConnectedDropdown/index.tsx 8ms
-src/components/ConnectedList/index.tsx 5ms
-src/components/ConnectedTable/index.tsx 5ms
-src/components/ContentBlock/ContentBlock.spec.tsx 5ms
-src/components/ContentBlock/index.tsx 6ms
-src/components/DataPanel/index.tsx 6ms
-src/components/DateInput/DateInput.spec.tsx 12ms
-src/components/DateInput/index.tsx 14ms
-src/components/ErrorMessage/ErrorMessage.spec.tsx 6ms
-src/components/ErrorMessage/index.tsx 7ms
-src/components/Fieldset/Fieldset.spec.tsx 5ms
-src/components/Fieldset/Fieldset.story.tsx 5ms
-src/components/Fieldset/index.tsx 5ms
-src/components/FileInput/FileInput.spec.tsx 8ms
-src/components/FileInput/FileInput.story.tsx 4ms
-src/components/FileInput/index.tsx 8ms
-src/components/FilterLink/FilterLink.spec.tsx 7ms
-src/components/FilterLink/index.tsx 6ms
-src/components/Form/Form.spec.tsx 6ms
-src/components/Form/index.tsx 5ms
-src/components/FormActions/FormActions.spec.tsx 4ms
-src/components/FormActions/FormActions.story.tsx 6ms
-src/components/FormActions/index.tsx 5ms
-src/components/FormField/FormField.spec.tsx 17ms
-src/components/FormField/FormField.stories.tsx 6ms
-src/components/FormField/index.tsx 5ms
-src/components/FormRepeater/FormRepeater.spec.tsx 12ms
-src/components/FormRepeater/index.tsx 9ms
-src/components/ImageInput/ImageInput.spec.tsx 7ms
-src/components/ImageInput/ImageInput.story.tsx 5ms
-src/components/ImageInput/index.tsx 10ms
-src/components/InfoPanel/index.tsx 6ms
-src/components/InfoPanel/InfoPanel.spec.tsx 4ms
-src/components/InfoPanel/InfoPanel.story.tsx 5ms
-src/components/Link/__mocks__/index.tsx 4ms
-src/components/Link/index.tsx 7ms
-src/components/Link/Link.spec.tsx 8ms
-src/components/List/index.tsx 10ms
-src/components/List/List.spec.tsx 38ms
-src/components/List/List.story.tsx 8ms
-src/components/ListActions/index.tsx 4ms
-src/components/ListActions/ListActions.spec.tsx 4ms
-src/components/ListActions/ListActions.story.tsx 5ms
-src/components/LoginForm/index.tsx 7ms
-src/components/LoginForm/LoginForm.spec.tsx 9ms
-src/components/LoginForm/LoginForm.story.tsx 5ms
-src/components/Message/index.tsx 6ms
-src/components/Message/Message.spec.tsx 4ms
-src/components/Modal/index.tsx 6ms
-src/components/ModalActions/index.tsx 7ms
-src/components/ModalActions/ModalActions.spec.tsx 6ms
-src/components/ModalActions/ModalActions.story.tsx 4ms
-src/components/MoneyInput/index.tsx 4ms
-src/components/MoneyInput/MoneyInput.spec.tsx 6ms
-src/components/MoneyInput/MoneyInput.story.tsx 4ms
-src/components/PasswordForm/index.tsx 5ms
-src/components/RadioList/index.tsx 5ms
-src/components/RadioList/RadioList.spec.tsx 6ms
+
+> @sqrzro/admin@2.0.0 prettier /Users/richard/Sites/@sqrzro/sqrzro/packages/admin
+> prettier --write "./src/**/*.tsx" "./src/**/*.ts"
+
+src/components/AppLayout/index.tsx 172ms
+src/components/AppNavigation/index.tsx 18ms
+src/components/BooleanFilter/index.tsx 13ms
+src/components/Config/index.tsx 7ms
+src/components/Dashboard/index.tsx 6ms
+src/components/DateFilter/index.tsx 15ms
+src/components/DropdownFilter/index.tsx 9ms
+src/components/FilterBar/index.tsx 10ms
+src/components/FilterBarItem/index.tsx 18ms
+src/components/GridList/index.tsx 6ms
+src/components/GridListItem/index.tsx 11ms
+src/components/Icon/index.tsx 7ms
+src/components/List/index.tsx 11ms
+src/components/ListAction/index.tsx 8ms
+src/components/ListActions/index.tsx 13ms
+src/components/ListItem/index.tsx 9ms
+src/components/LoginForm/index.tsx 8ms
+src/components/MeActions/index.tsx 5ms
+src/components/MePanel/index.tsx 6ms
+src/components/Page/index.tsx 9ms
+src/components/PageActions/index.tsx 8ms
+src/components/Panel/index.tsx 7ms
+src/components/Panel/Panel.spec.tsx 6ms
+src/components/Panel/Panel.stories.tsx 5ms
 src/components/RootLayout/index.tsx 7ms
-src/components/SummaryList/index.tsx 5ms
-src/components/SummaryList/SummaryList.spec.tsx 7ms
-src/components/SummaryList/SummaryList.story.tsx 4ms
-src/components/Switch/index.tsx 7ms
-src/components/Switch/Switch.spec.tsx 7ms
-src/components/Table/index.tsx 11ms
-src/components/Table/Table.spec.tsx 12ms
-src/components/Table/Table.story.tsx 11ms
-src/components/TextArea/index.tsx 6ms
-src/components/TextArea/TextArea.spec.tsx 7ms
-src/components/TextInput/index.tsx 4ms
-src/components/TextInput/TextInput.spec.tsx 12ms
-src/components/TextInput/TextInput.stories.tsx 5ms
-src/components/WebsiteInput/index.tsx 4ms
-src/components/WebsiteInput/WebsiteInput.spec.tsx 5ms
-src/components/WeekCalendar/index.tsx 8ms
-src/core/AlertComponent/AlertComponent.spec.tsx 8ms
-src/core/AlertComponent/AlertComponent.story.tsx 6ms
-src/core/AlertComponent/index.tsx 7ms
-src/core/AppHeader/index.tsx 5ms
-src/core/AppLogo/index.tsx 4ms
-src/core/AppLogoImage/index.tsx 3ms
-src/core/AppLogoPlaceholder/index.tsx 5ms
-src/core/Assistive/index.tsx 4ms
-src/core/AuthForm/AuthForm.spec.tsx 7ms
-src/core/AuthForm/index.tsx 7ms
-src/core/Banner/index.tsx 5ms
-src/core/Calendar/index.tsx 10ms
-src/core/CalendarDay/index.tsx 7ms
-src/core/CalendarMonth/index.tsx 10ms
-src/core/CalendarNavigation/index.tsx 7ms
-src/core/CalendarWeek/index.tsx 8ms
-src/core/ChkRadList/index.tsx 7ms
-src/core/CloseButton/CloseButton.spec.tsx 5ms
-src/core/CloseButton/index.tsx 5ms
-src/core/ConfirmModal/ConfirmModal.spec.tsx 7ms
-src/core/ConfirmModal/index.tsx 5ms
-src/core/ConnectedRepeater/index.tsx 16ms
-src/core/ConnectedRepeaterComponent/index.tsx 6ms
-src/core/Container/index.tsx 4ms
-src/core/DataPanelItem/index.tsx 4ms
-src/core/EmptyMessage/EmptyMessage.stories.tsx 4ms
-src/core/EmptyMessage/index.tsx 4ms
-src/core/FilterItem/index.tsx 11ms
-src/core/Filters/Filters.spec.tsx 35ms
-src/core/Filters/index.tsx 11ms
-src/core/FixedActions/FixedActions.spec.tsx 7ms
-src/core/FixedActions/index.tsx 5ms
-src/core/FormLegend/index.tsx 4ms
-src/core/Header/Header.stories.tsx 5ms
-src/core/Header/index.tsx 7ms
-src/core/Icon/Icon.spec.tsx 6ms
-src/core/Icon/index.tsx 6ms
-src/core/IconButton/index.tsx 6ms
-src/core/ListItem/index.tsx 10ms
-src/core/ListItem/ListItem.story.tsx 7ms
-src/core/ListItemAction/index.tsx 4ms
-src/core/ListItemActions/index.tsx 6ms
-src/core/ListItemMetaItem/index.tsx 6ms
-src/core/ListItemTitle/index.tsx 6ms
-src/core/ListItemTitle/ListItemTitle.spec.tsx 6ms
-src/core/Loader/index.tsx 3ms
-src/core/Loader/Loader.stories.tsx 4ms
-src/core/MeActions/index.tsx 6ms
-src/core/MePanel/index.tsx 6ms
-src/core/ModalComponent/index.tsx 5ms
-src/core/ModalComponent/ModalComponent.spec.tsx 6ms
-src/core/Navigation/index.tsx 5ms
-src/core/Navigation/Navigation.spec.tsx 8ms
-src/core/NavigationDivider/index.tsx 3ms
-src/core/NavigationItem/index.tsx 4ms
-src/core/Panel/index.tsx 5ms
-src/core/Panel/Panel.spec.tsx 4ms
-src/core/PasswordForgotForm/index.tsx 6ms
-src/core/PasswordResetForm/index.tsx 6ms
-src/core/RadialProgress/index.tsx 5ms
-src/core/SettingsForm/index.tsx 5ms
-src/core/SummaryListItem/index.tsx 6ms
-src/core/TabItem/index.tsx 4ms
-src/core/Tabs/index.tsx 5ms
-src/core/Tabs/Tabs.spec.tsx 5ms
-src/core/Toast/index.tsx 7ms
-src/core/Toast/Toast.spec.tsx 7ms
-src/core/TwoFactor/index.tsx 7ms
-src/core/TwoFactor/TwoFactor.spec.tsx 12ms
-src/core/TwoFactorAuthenticator/index.tsx 5ms
-src/core/TwoFactorMethodList/index.tsx 6ms
-src/core/TwoFactorSetup/index.tsx 7ms
-src/core/TwoFactorSetupAuthenticator/index.tsx 7ms
-src/core/TwoFactorSetupYubikey/index.tsx 7ms
-src/core/TwoFactorYubikey/index.tsx 4ms
-src/core/WeekCalendarDay/index.tsx 8ms
-src/core/YubikeyInput/index.tsx 5ms
-src/core/YubikeyInput/YubikeyInput.spec.tsx 7ms
-src/filters/BooleanFilter/index.tsx 5ms
-src/filters/DateFilter/index.tsx 5ms
-src/filters/DropdownFilter/index.tsx 8ms
-src/filters/QuickDateFilter/index.tsx 6ms
-src/hooks/useAlert.spec.tsx 8ms
-src/hooks/useModal.spec.tsx 7ms
-src/scenes/Error404Scene.tsx 3ms
-src/services/FilterComponentService.tsx 5ms
-src/utility/icons.tsx 4ms
-src/utility/register.tsx 3ms
-src/filters/interfaces.ts 4ms
-src/hooks/useAlert.ts 6ms
-src/hooks/useConfig.ts 5ms
-src/hooks/useConnectedList.ts 3ms
-src/hooks/useConnectedRepeater.ts 4ms
-src/hooks/useConnectedTable.ts 4ms
-src/hooks/useFilters.ts 4ms
-src/hooks/useLayout.spec.ts 5ms
-src/hooks/useLayout.ts 4ms
-src/hooks/useModal.ts 5ms
-src/hooks/useModalOffset.spec.ts 4ms
-src/hooks/useModalOffset.ts 5ms
-src/hooks/useNavigation.ts 9ms
-src/hooks/useRemote.ts 5ms
-src/index.ts 9ms
-src/services/AppService.ts 4ms
+src/components/Table/index.tsx 8ms
+src/components/TableClientComponent/index.tsx 14ms
+src/components/Tabs/index.tsx 6ms
+src/icons/ErrorIcon/index.tsx 5ms
+src/icons/InfoIcon/index.tsx 5ms
+src/icons/SuccessIcon/index.tsx 5ms
+src/icons/WarningIcon/index.tsx 7ms
+src/components/index.ts 9ms
+src/index.ts 6ms
+src/interfaces.ts 5ms
+src/react.d.ts 6ms
 src/services/ConfigService.ts 6ms
-src/services/ConfirmService.ts 4ms
-src/services/DateService.spec.ts 10ms
-src/services/DateService.ts 14ms
-src/services/DownloadService.spec.ts 5ms
-src/services/DownloadService.ts 4ms
-src/services/FilterService.spec.ts 7ms
-src/services/FilterService.ts 6ms
-src/services/FormatService.spec.ts 7ms
-src/services/FormatService.ts 7ms
-src/services/ToastService.spec.ts 6ms
-src/services/ToastService.ts 5ms
-src/typings.d.ts 4ms
-src/utility/interfaces.ts 10ms
-src/utility/middleware.ts 4ms
-src/utility/MockRouter/index.ts 6ms
-src/utility/prop-types.ts 9ms
+src/styles/config.ts 9ms
+src/utility/formatters.ts 5ms

package/COMPONENTS.md

@@ -0,0 +1,45 @@
+Button 
+- count
+- isBordered
+- iconBefore 
+- iconAfter
+
+Count (The little number in a circle that can feature on tabs etc)
+
+Card
+ - action
+ - icon
+ - badge
+ - title
+ - description
+ - onSelect
+
+CardInput (A collection of cards that act as checkboxes/radio buttons)
+
+IconButton
+CloseButton
+
+ButtonGroup
+
+Badge
+ - count
+ - isBordered
+ - isCloseable
+ - iconBefore
+ - iconAfter
+
+Tabs
+  - count
+
+TextInput
+ - iconBefore
+ - iconAfter
+
+Tooltip
+ - title
+ - description
+ - direction
+
+ ProgressBar
+
+ ProgressCircle

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

@@ -1,6 +1,6 @@
-import React from 'react';
+/// <reference types="react" />
 export interface AppLayoutProps {
     children: React.ReactNode;
 }
-declare function AppLayout({ children }: AppLayoutProps): React.ReactElement;
+declare function AppLayout({ children }: Readonly<AppLayoutProps>): React.ReactElement;
 export default AppLayout;

package/dist/components/AppLayout/index.js

@@ -1,18 +1,10 @@
-import React, { Fragment } from 'react';
-import AppHeader from '../../core/AppHeader';
-import Banner from '../../core/Banner';
-import ConfirmModal from '../../core/ConfirmModal';
-import Toast from '../../core/Toast';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Container, Link } from '@sqrzro/components';
+import { getConfig } from '../../services/ConfigService';
+import AppNavigation from '../AppNavigation';
+import MePanel from '../MePanel';
 function AppLayout({ children }) {
-    return (React.createElement(Fragment, null,
-        React.createElement("div", { className: "flex flex-col min-h-full md:grid md:grid-cols-[22rem_1fr]" },
-            React.createElement(Banner, null),
-            React.createElement("main", { className: "block" },
-                React.createElement(AppHeader, null),
-                children)),
-        React.createElement("div", { id: "alert-portal" }),
-        React.createElement("div", { id: "modal-portal" }),
-        React.createElement(ConfirmModal, null),
-        React.createElement(Toast, null)));
+    return (_jsxs(Fragment, { children: [_jsx("header", { className: "bg-gray-800", children: _jsx(Container, { isFullWidth: true, children: _jsxs("div", { className: "flex h-16 items-center border-b border-gray-700", children: [_jsx(Link, { className: "h-9 w-9 rounded-full border-4 border-primary", href: "/", children: _jsx("span", { className: "sr-only", children: getConfig().app.name }) }), _jsx(AppNavigation, {}), _jsx(MePanel, {})] }) }) }), _jsx("main", { className: "mb-10 block", children: children })] }));
 }
 export default AppLayout;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function AppNavigation(): React.ReactElement;
+export default AppNavigation;

package/dist/components/AppNavigation/index.js

@@ -0,0 +1,15 @@
+'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("ul", { className: "flex h-full items-center gap-2 pl-6", children: navigation.map(({ href, isActive, label }) => (_jsx("li", { className: "h-full", children: _jsx(Link, { className: "block flex h-full items-center font-semibold text-white", href: href, children: _jsx("span", { className: clsx('rounded px-3 py-2', isActive ? 'bg-gray-700' : null), children: label }) }) }, href))) }));
+}
+export default AppNavigation;

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

@@ -0,0 +1,5 @@
+/// <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;
+export default BooleanFilter;

package/dist/components/BooleanFilter/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from '@sqrzro/components';
+const data = [
+    {
+        id: '0',
+        name: 'No',
+    },
+    {
+        id: '1',
+        name: 'Yes',
+    },
+];
+function BooleanFilter({ name, onChange, value, }) {
+    return _jsx(Dropdown, { data: data, name: name, onChange: onChange, value: value, isPanelOnly: true });
+}
+export function renderBooleanValue(value) {
+    return data.find((item) => item.id === value)?.name || '';
+}
+export default BooleanFilter;

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

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

package/dist/components/Config/index.js

@@ -0,0 +1,9 @@
+'use client';
+import { setConfig } from '../../services/ConfigService';
+function Config({ data }) {
+    if (data) {
+        setConfig(data);
+    }
+    return null;
+}
+export default Config;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface DashboardProps {
+    children?: React.ReactNode;
+    title: string;
+}
+declare function Dashboard({ children, title }: Readonly<DashboardProps>): React.ReactElement;
+export default Dashboard;

package/dist/components/Dashboard/index.js

@@ -0,0 +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] }));
+}
+export default Dashboard;

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

@@ -0,0 +1,6 @@
+/// <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;
+export declare function renderDateValue(value: string): string;
+export default DateFilter;

package/dist/components/DateFilter/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CalendarInput } from '@sqrzro/components';
+function DateFilter({ name, onChange, value }) {
+    return _jsx(CalendarInput, { name: name, onChange: onChange, value: value, isPanelOnly: true, isRange: true });
+}
+export function transformDateValue(value) {
+    //return value?.split(',').map((item) => new Date(item)) || [];
+    return value || '';
+}
+const LENGTH_OF_YEAR = 4;
+function renderDateString(value, noYear) {
+    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) {
+    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/dist/components/DropdownFilter/index.d.ts

@@ -0,0 +1,6 @@
+/// <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;
+export declare function renderDropdownValue(value: string, data?: SimpleObject[]): string;
+export default DropdownFilter;

package/dist/components/DropdownFilter/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from '@sqrzro/components';
+function DropdownFilter({ data, name, onChange, value, }) {
+    return _jsx(Dropdown, { data: data, name: name, onChange: onChange, value: value, isPanelOnly: true });
+}
+export function renderDropdownValue(value, data) {
+    return data?.find((item) => item.id === value)?.name || '';
+}
+export default DropdownFilter;

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

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

package/dist/components/FilterBar/index.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFilters } from '@sqrzro/hooks';
+import FilterBarItem from '../FilterBarItem';
+function FilterBar({ map }) {
+    const [filters, setFilter] = useFilters();
+    function handleChange(name, value) {
+        setFilter(name, value);
+    }
+    return (_jsx("ul", { className: "sticky top-0 flex gap-2", children: map.map((filter) => (_jsx(FilterBarItem, { onChange: handleChange, value: filters.get(filter.name) || '', ...filter }, filter.name))) }));
+}
+export default FilterBar;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { SimpleObject } from '@sqrzro/interfaces';
+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;
+}
+declare function FilterBarItem({ data, label, name, onChange, type, value, }: Readonly<FilterBarItemProps>): React.ReactElement;
+export default FilterBarItem;

package/dist/components/FilterBarItem/index.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import clsx from 'clsx';
+import BooleanFilter, { renderBooleanValue } from '../BooleanFilter';
+import DateFilter, { renderDateValue, transformDateValue } from '../DateFilter';
+import DropdownFilter, { renderDropdownValue } from '../DropdownFilter';
+const map = {
+    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, }) {
+    const panel = useRef(null);
+    function handleChange(event) {
+        onChange(name, event.target.value);
+        panel.current?.hidePopover();
+    }
+    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-gray-400' : 'border-dashed border-gray-500', value ? 'bg-gray-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-gray-800", children: "\u00D7" })] })) : null, _jsx("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", 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;