@sqrzro/admin 2.1.0-bz.18 → 2.1.0-bz.19

package/dist/services/PermissionService.js

@@ -0,0 +1,25 @@
+'use server';
+import { cookies } from 'next/headers';
+export async function filterList(list) {
+    if (process.env.APP_ENV !== 'production' && process.env.DANGEROUSLY_DISABLE_PERMISSIONS) {
+        return Promise.resolve(list);
+    }
+    const cookie = cookies().get('permissions')?.value;
+    if (!cookie) {
+        return Promise.resolve([]);
+    }
+    let value = [];
+    try {
+        value = JSON.parse(cookie);
+    }
+    catch (err) {
+        return Promise.resolve([]);
+    }
+    return Promise.resolve(list.filter(({ permission }) => {
+        if (!permission) {
+            return true;
+        }
+        const permissions = Array.isArray(permission) ? permission : [permission];
+        return permissions.every((item) => value.includes(item));
+    }));
+}

package/dist/services/SettingsService.d.ts

@@ -0,0 +1,8 @@
+import type { Errorable } from '@sqrzro/interfaces';
+export type Layout = 'sidebar' | 'topbar';
+export interface SettingsFormFields {
+    isDark: boolean;
+    layout: Layout;
+}
+export declare function getLayout(): Promise<Layout>;
+export declare function submitSettingsForm(formData: SettingsFormFields): Promise<Errorable<boolean>>;

package/dist/services/SettingsService.js

@@ -0,0 +1,9 @@
+'use server';
+import { cookies } from 'next/headers';
+export async function getLayout() {
+    return Promise.resolve((cookies().get('layout')?.value || 'topbar'));
+}
+export async function submitSettingsForm(formData) {
+    cookies().set('layout', formData.layout);
+    return Promise.resolve([true, null]);
+}

package/dist/styles/config.d.ts

@@ -0,0 +1,3 @@
+import type { RegisteredClassNames } from '@sqrzro/components';
+declare const classNames: RegisteredClassNames;
+export default classNames;

package/dist/styles/config.js

@@ -0,0 +1,184 @@
+'use client';
+import { tw, twx } from '@sqrzro/components';
+const classNames = twx({
+    actionList: () => ({
+        root: 'flex gap-2',
+    }),
+    button: (props) => ({
+        root: {
+            danger: 'border-red-500 bg-red-500 text-white',
+            default: tw('text-md h-10 rounded border border-slate-300 bg-white px-5 text-slate-600', props?.isFullWidth ? 'w-full' : null),
+            primary: 'bg-button-bg text-button-text border-none font-semibold',
+        },
+    }),
+    calendar: () => ({
+        root: 'p-4 pb-3 text-sm text-slate-600',
+        head: 'pb-2 text-center text-xs text-slate-400',
+        month: 'w-full table-fixed',
+        day: {
+            default: 'h-10 border border-slate-200',
+            highlighted: 'bg-slate-100',
+            selected: 'bg-slate-200',
+        },
+    }),
+    calendarNavigation: () => ({
+        root: 'mb-6 flex items-center justify-between',
+        title: 'text-base font-semibold',
+        control: 'h-6 w-6 rounded-full border border-slate-300',
+        previous: '-order-1',
+    }),
+    checkboxInput: (props) => ({
+        root: tw('flex', props?.isInline ? 'gap-6' : 'flex-col gap-2'),
+        icon: {
+            default: 'h-5 w-5 rounded border border-slate-300',
+            checked: 'border-primary bg-primary relative before:absolute before:inset-0.5 before:bg-[url(/admin/images/check-white.svg)] before:bg-contain',
+        },
+        label: 'flex min-h-5 items-center pl-2',
+    }),
+    codeInput: () => ({
+        input: {
+            default: 'focus:border-primary h-10 rounded border border-slate-300 text-center',
+            error: 'border-red-500',
+        },
+    }),
+    definitionList: () => ({
+        root: 'flex flex-col gap-4',
+        row: 'relative border-b border-slate-200 pb-4',
+        term: 'pb-1 text-slate-500',
+    }),
+    dropdown: () => ({
+        list: 'overflow-hidden rounded',
+        item: {
+            default: 'block border-b border-slate-100 p-3 text-sm text-slate-700',
+            selected: 'bg-slate-100',
+        },
+        title: 'block leading-none',
+        meta: 'mt-1.5 block text-xs leading-none text-slate-500',
+        icon: 'mr-2 h-5 w-5 bg-[url(/admin/images/chevron.svg)] bg-contain bg-center bg-no-repeat',
+        clear: 'mr-2 h-4 w-4 bg-[url(/admin/images/close.svg)] bg-contain bg-center bg-no-repeat',
+    }),
+    editableFieldset: () => ({
+        root: 'bg-panel grid grid-cols-[25%_1fr] gap-20 rounded p-8 shadow',
+        title: 'mb-8 text-lg font-semibold leading-none text-slate-700',
+        description: 'text-slate-600',
+        actions: 'flex justify-end gap-2 border-t border-slate-200 pt-4',
+    }),
+    editableFormField: () => ({
+        root: 'grid grid-cols-[25%_1fr] border-t border-slate-200 py-4',
+        label: 'flex items-center font-semibold leading-none',
+        field: 'flex min-h-10 items-center',
+    }),
+    emptyMessage: (props) => ({
+        root: tw('@md:p-16 relative mx-auto mt-4 w-full max-w-2xl p-4 text-center text-slate-500', props?.isMinimal
+            ? null
+            : 'rounded bg-white shadow before:pointer-events-none before:absolute before:inset-2 before:border-2 before:border-dashed'),
+        title: '@md:text-xl mb-2 text-pretty font-semibold leading-tight',
+        description: '@md:text-sm text-pretty text-xs',
+        action: 'mt-6 flex justify-center',
+    }),
+    fieldset: () => ({
+        root: 'rounded bg-white p-8 shadow',
+        title: 'mb-8 text-lg font-semibold leading-none text-slate-700',
+    }),
+    form: () => ({
+        root: 'flex flex-col gap-6',
+    }),
+    formField: (props) => ({
+        root: {
+            default: tw(props?.isEditable ? 'grid grid-cols-[25%_1fr] border-t border-slate-200 py-4' : ''),
+        },
+        label: tw('flex font-semibold leading-none', props?.isEditable ? 'items-center' : 'mb-2 justify-between'),
+        field: tw(props?.isEditable ? 'flex min-h-10 flex-col justify-center' : ''),
+        details: tw('text-xs font-normal text-slate-500', props?.isEditable ? 'col-start-2 row-start-2 mt-2' : 'mb-2'),
+        optional: 'pl-2 text-xs font-normal leading-none text-slate-500',
+        error: tw('mt-2 flex items-center gap-1.5 text-red-600 before:h-4 before:w-4 before:rounded-full before:bg-[url(/admin/images/danger.svg)] before:bg-contain', props?.isEditable ? 'col-start-2' : ''),
+    }),
+    imageInput: () => ({
+        root: 'h-64 rounded border border-slate-300 bg-slate-50 p-8',
+        icon: 'mx-auto mb-2 block h-12 w-12 rounded-full border-2 border-slate-300',
+        title: 'mb-1 font-semibold',
+        description: 'text-xs italic text-slate-700',
+    }),
+    inputPanel: () => ({
+        root: 'show my-1 origin-top rounded border border-slate-300 bg-white shadow-md',
+    }),
+    loadingModal: () => ({
+        root: 'open:backdrop:fade py-16 backdrop:bg-slate-700/50 backdrop:backdrop-blur-sm',
+        panel: 'text-center text-lg font-semibold text-white',
+    }),
+    modal: () => ({
+        root: 'open:backdrop:fade py-16 backdrop:bg-slate-700/50 backdrop:backdrop-blur-sm',
+        panel: 'show bg-panel row-start-2 mx-auto w-full max-w-lg rounded p-6 text-left shadow-xl',
+        title: 'mb-6 text-lg font-semibold',
+        actions: 'flex justify-end border-t border-slate-200 pt-6',
+    }),
+    multiInput: () => ({
+        root: 'flex flex-col gap-2 pt-2',
+        row: 'grid grid-cols-[1fr_auto] has-[>_button]:gap-2',
+    }),
+    objectInput: () => ({
+        root: 'flex flex-col gap-2',
+    }),
+    passwordInput: () => ({
+        action: {
+            default: 'mr-2 h-6 w-6 overflow-hidden bg-[url(/admin/images/eye.svg)] bg-no-repeat indent-12',
+            selected: 'bg-bottom',
+        },
+    }),
+    radioInput: (props) => ({
+        root: tw('flex', props?.isInline ? 'gap-6' : 'flex-col gap-2'),
+        icon: {
+            default: 'h-5 w-5 rounded border border-slate-300',
+            checked: 'border-primary bg-primary relative before:absolute before:inset-0.5 before:bg-[url(/admin/images/check-white.svg)] before:bg-contain',
+        },
+        label: 'flex min-h-5 items-center pl-2',
+    }),
+    staticTextInput: () => ({
+        root: {
+            default: 'text-md flex min-h-10 flex-col justify-center rounded border border-slate-300 bg-white p-3',
+            error: 'border-red-500',
+        },
+        label: 'block leading-none',
+        meta: 'mt-1 block text-xs leading-none text-slate-500',
+        placeholder: 'block leading-none text-slate-500',
+    }),
+    switch: () => ({
+        root: 'flex gap-4',
+        input: {
+            default: 'h-6 w-10 flex-none cursor-pointer rounded-full bg-slate-300 p-1 transition-colors',
+            checked: 'bg-primary',
+        },
+        control: {
+            default: 'h-4 w-4 translate-x-0 transform rounded-full bg-white shadow-md transition-transform',
+            checked: 'translate-x-full',
+        },
+        label: 'block flex min-h-6 flex-col justify-center',
+        details: 'mt-1 block text-xs text-slate-500',
+    }),
+    textArea: () => ({
+        root: {
+            default: 'text-md focus:border-primary rounded border border-slate-300 px-3 py-2',
+            error: 'border-red-500',
+        },
+    }),
+    textButton: () => ({
+        root: { danger: 'text-red-600' },
+    }),
+    textInput: () => ({
+        root: {
+            default: 'text-md focus:border-primary h-10 rounded border border-slate-300 px-3',
+            error: 'border-red-500',
+        },
+        prefix: {
+            default: 'peer-focus:border-primary relative -mr-1 rounded-l border border-slate-300 bg-white px-3 text-sm text-slate-600',
+        },
+    }),
+    toast: () => ({
+        root: {
+            default: 'rounded border px-4 py-2',
+            success: 'border-green-300 bg-green-100 text-green-700',
+            error: 'border-red-300 bg-red-100 text-red-700',
+        },
+    }),
+});
+export default classNames;

package/dist/styles/postcss.d.ts

@@ -0,0 +1,6 @@
+declare const config: {
+    plugins: {
+        tailwindcss: {};
+    };
+};
+export default config;

package/dist/styles/postcss.js

@@ -0,0 +1,4 @@
+const config = {
+    plugins: { tailwindcss: {} },
+};
+export default config;

package/dist/styles/tailwind.d.ts

@@ -0,0 +1,10 @@
+interface Theme {
+    colors?: Partial<{
+        'button-bg': string;
+        'button-text': string;
+        link: string;
+        primary: string;
+    }>;
+}
+declare function config(resolves: string[], customization: Theme, plugins: unknown[]): Record<string, unknown>;
+export default config;

package/dist/styles/tailwind.js

@@ -0,0 +1,76 @@
+import path from 'path';
+import plugin from 'tailwindcss/plugin'; // eslint-disable-line import/no-extraneous-dependencies
+function config(resolves, customization, plugins) {
+    return {
+        content: [
+            './app/**/*.tsx',
+            './src/**/*.tsx',
+            ...resolves.map((item) => path.join(item, '**/*.js')),
+        ],
+        darkMode: 'class',
+        mode: 'jit',
+        theme: {
+            extend: {
+                colors: {
+                    'button-bg': 'var(--color-button-bg)',
+                    'button-text': 'var(--color-button-text)',
+                    link: 'var(--color-link)',
+                    panel: 'var(--color-panel)',
+                    primary: 'var(--color-primary)',
+                },
+                fontFamily: {
+                    sans: ['var(--font-inter)'],
+                },
+            },
+        },
+        plugins: [
+            ...plugins,
+            plugin(({ addBase, addUtilities, theme }) => {
+                addBase({
+                    body: {
+                        '--color-button-bg': customization?.colors?.['button-bg'] ||
+                            customization?.colors?.primary ||
+                            theme('colors.indigo.800'),
+                        '--color-button-text': customization?.colors?.['button-text'] || theme('colors.white'),
+                        '--color-link': customization?.colors?.link || theme('colors.indigo.800'),
+                        '--color-panel': theme('colors.white'),
+                        '--color-primary': customization?.colors?.primary || theme('colors.indigo.800'),
+                    },
+                    'body.dark': {
+                        '--color-panel': theme('colors.gray.700'),
+                    },
+                    strong: {
+                        fontWeight: theme('fontWeight.semibold'),
+                    },
+                });
+                addUtilities({
+                    '@keyframes show': {
+                        from: {
+                            opacity: '0',
+                            transform: 'scale3d(.9,.9,.9)',
+                        },
+                        to: {
+                            opacity: '1',
+                            transform: 'scale3d(1,1,1)',
+                        },
+                    },
+                    '.show': {
+                        animation: 'show 0.1s ease-in-out',
+                    },
+                    '@keyframes fade': {
+                        from: {
+                            opacity: '0',
+                        },
+                        to: {
+                            opacity: '1',
+                        },
+                    },
+                    '.fade': {
+                        animation: 'fade 0.2s ease-in-out',
+                    },
+                });
+            }),
+        ],
+    };
+}
+export default config;

package/package.json

@@ -1,37 +1,33 @@
 {
   "name": "@sqrzro/admin",
   "type": "module",
-  "version": "2.1.0-bz.18",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
+  "version": "2.1.0-bz.19",
+  "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
   "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
-    }
+    ".": "./dist/index.js",
+    "./postcss": "./postcss.cjs",
+    "./tailwind": "./tailwind.cjs"
   },
   "files": [
     "dist/**/*",
-    "postcss.js",
-    "tailwind.js",
+    "postcss.cjs",
+    "tailwind.cjs",
     "tailwind.d.ts"
   ],
   "dependencies": {
     "@sqrzro/components": "bz",
     "@sqrzro/hooks": "bz",
     "@sqrzro/interfaces": "bz",
-    "@sqrzro/server": "bz",
     "@sqrzro/utility": "bz",
     "next": "^14.1.4",
-    "react": "18.3.0-canary-e373190fa-20240325",
-    "react-dom": "18.3.0-canary-e373190fa-20240325"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.3",
-    "@babel/preset-env": "^7.24.3",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@sqrzro/eslint-plugin": "bz",
@@ -45,6 +41,7 @@
     "@storybook/react": "^7.6.17",
     "@storybook/react-webpack5": "7.0.7",
     "@storybook/testing-library": "^0.1.0",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/dom": "^8.20.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
@@ -52,8 +49,8 @@
     "@types/bcrypt": "^5.0.2",
     "@types/jest": "^29.5.12",
     "@types/node": "18.14.6",
-    "@types/react": "^18.2.71",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.74",
+    "@types/react-dom": "^18.2.24",
     "babel-loader": "^8.3.0",
     "concurrently": "^7.6.0",
     "eslint": "^8.57.0",
@@ -62,15 +59,15 @@
     "prettier": "^3.2.5",
     "rimraf": "^4.4.1",
     "storybook": "^7.6.17",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.3",
     "tslib": "^2.6.2",
     "tsup": "^8.0.2",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.4"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsc -p tsconfig.build.json",
     "clean": "rimraf ./dist",
-    "dev": "tsup --watch",
+    "dev": "pnpm build --watch",
     "docs": "storybook dev -p 6006",
     "lint": "tsc --noEmit && eslint \"./src/**/*.tsx\" \"./src/**/*.ts\"",
     "prettier": "prettier --write \"./src/**/*.tsx\" \"./src/**/*.ts\"",

package/dist/index.d.cts

@@ -1,169 +0,0 @@
-import { AuthProps as AuthProps$1, EmptyMessageProps } from '@sqrzro/components';
-export { Autocomplete, AutocompleteFormField, Button, CalendarInput, CheckboxInput, ConfirmableButton, ConnectedDropdown, ContentFormField, DateFormField, DateInput, DefinitionList, Dropdown, DropdownFormField, DropdownItem, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextAreaFormField, EditableTextFormField, EmptyMessage, Fieldset, Form, FormField, FormSubmit, ImageFormField, ImageInput, Link, LoadingModal, ModalForm, MultiFormField, NumberFormField, NumberInput, RadioInput, Switch, SwitchFormField, TextArea, TextAreaFormField, TextFormField, TextInput, Toaster } from '@sqrzro/components';
-import { StyleVariant, SimpleObject, Errorable, ConfirmableAction, InputProps, LinkableAction } from '@sqrzro/interfaces';
-
-interface AppLayoutProps {
-    children: React.ReactNode;
-    user?: {
-        name: string;
-    } | null;
-}
-declare function AppLayout({ children, user }: Readonly<AppLayoutProps>): Promise<JSX.Element>;
-
-type AuthProps = AuthProps$1;
-declare function Auth(props: AuthProps$1): JSX.Element;
-
-interface BadgeProps {
-    children: React.ReactNode;
-    variant?: StyleVariant | null;
-}
-declare function Badge({ children, variant }: Readonly<BadgeProps>): React.ReactElement;
-
-interface DashboardProps {
-    children?: React.ReactNode;
-    title: string;
-}
-declare function Dashboard({ children, title }: Readonly<DashboardProps>): React.ReactElement;
-
-type FilterType = 'boolean' | 'date' | 'dropdown';
-interface FilterObject {
-    data?: SimpleObject[];
-    label: string;
-    name: string;
-    type: FilterType;
-}
-
-interface FilterBarProps {
-    hasSearch?: boolean;
-    map?: FilterObject[];
-}
-declare function FilterBar({ hasSearch, map }: Readonly<FilterBarProps>): React.ReactElement;
-
-interface ListObject {
-    actions?: ({ id }: {
-        id: number | string;
-    }) => React.ReactElement;
-    description?: React.ReactNode | null;
-    href?: string;
-    id: number | string;
-    image?: string | null;
-    imageHref?: string | null;
-    meta?: React.ReactNode[] | Record<string, React.ReactNode>;
-    permission?: string;
-    subtitle?: React.ReactNode | null;
-    title?: string;
-}
-
-interface ListComponentProps {
-    params?: Record<string, string>;
-    searchParams?: Record<string, string>;
-}
-interface ListProps<Item, Params> {
-    actions?: ({ id }: {
-        readonly id: number;
-    }) => React.ReactElement;
-    columns?: number;
-    emptyMessageProps?: EmptyMessageProps;
-    filters?: FilterObject[];
-    fn: (params?: Params, searchParams?: URLSearchParams) => Promise<Errorable<Item[]>>;
-    hasSearch?: boolean;
-    isMinimal?: boolean;
-    renderItem?: (props: ListObject) => JSX.Element;
-    params?: Params;
-    transformer?: (item: Item) => ListObject;
-}
-declare function List<Item extends object, Params>({ actions, columns, emptyMessageProps, filters, fn, hasSearch, isMinimal, params, renderItem, transformer, }: Readonly<ListProps<Item, Params>>): Promise<React.ReactElement>;
-
-type GridListProps<Item, Params> = Omit<ListProps<Item, Params>, 'renderItem'>;
-declare function GridList<Item extends object, Params>(props: GridListProps<Item, Params>): React.ReactElement;
-
-interface InfoPanelProps {
-    children: React.ReactNode;
-    variant?: StyleVariant;
-}
-declare function InfoPanel({ children, variant }: Readonly<InfoPanelProps>): React.ReactElement;
-
-interface ListActionsProps {
-    actions: ConfirmableAction<number>[];
-    id: number;
-}
-declare function ListActions({ actions, id }: Readonly<ListActionsProps>): React.ReactElement;
-
-type FilterComponentProps = InputProps<string> & {
-    data?: SimpleObject[];
-};
-interface NavigationAction extends LinkableAction {
-    permission?: string;
-}
-
-interface PageProps {
-    actions?: LinkableAction[];
-    basePath?: string;
-    children: React.ReactNode;
-    isFullWidth?: boolean;
-    tabs?: (NavigationAction | null)[];
-    title: string;
-}
-declare function Page({ basePath, children, isFullWidth, tabs, title, }: Readonly<PageProps>): Promise<React.ReactElement>;
-
-interface PanelProps {
-    action?: LinkableAction;
-    children: React.ReactNode;
-    title?: string;
-}
-declare function Panel({ action, children, title }: Readonly<PanelProps>): React.ReactElement;
-
-interface PageActionsProps {
-    children: React.ReactNode;
-}
-declare function PageActions({ children }: Readonly<PageActionsProps>): React.ReactElement | null;
-
-interface ConfigNavigationObject {
-    href: string;
-    label: string;
-    permission?: string;
-}
-interface Config {
-    app: {
-        name: string;
-        url: string;
-    };
-    logo?: () => React.ReactElement;
-    navigation: ConfigNavigationObject[];
-}
-declare function setConfig(cfg: Config, logo?: () => React.ReactElement): Config;
-declare function getConfig(): Config;
-
-interface RootLayoutProps {
-    children: React.ReactNode;
-    config?: Config;
-    logo?: () => React.ReactElement;
-}
-declare function RootLayout({ children, config, logo }: Readonly<RootLayoutProps>): React.ReactElement;
-
-interface SettingsPageProps {
-    children: React.ReactNode;
-}
-declare function SettingsPage({ children, }: Readonly<SettingsPageProps>): Promise<React.ReactElement>;
-
-interface TableItemObject {
-    [key: string]: string;
-    id: string;
-}
-interface TableColumnObject {
-    key: string;
-    title?: string;
-    type?: 'number' | 'string';
-}
-interface TableClientComponentProps {
-    columns: string[] | TableColumnObject[];
-    data: TableItemObject[];
-}
-
-interface TableProps<T> extends Omit<TableClientComponentProps, 'data'> {
-    fn: (filters?: Record<string, string>) => Promise<Errorable<T[]>>;
-    searchParams?: Record<string, string>;
-}
-declare function Table<T>({ columns, fn, searchParams, }: Readonly<TableProps<T>>): Promise<React.ReactElement>;
-
-export { AppLayout, type AppLayoutProps, Auth, type AuthProps, Badge, type BadgeProps, type Config, Dashboard, type DashboardProps, FilterBar, type FilterBarProps, type FilterComponentProps, type FilterObject, GridList, type GridListProps, InfoPanel, type InfoPanelProps, List, ListActions, type ListActionsProps, type ListComponentProps, type ListObject, type ListProps, type NavigationAction, Page, PageActions, type PageActionsProps, type PageProps, Panel, type PanelProps, RootLayout, type RootLayoutProps, SettingsPage, Table, type TableColumnObject, type TableProps, getConfig, setConfig };