@ztwoint/z-ui 0.1.44 → 0.1.46

package/dist/types/components/table/index.d.ts

@@ -1,9 +1,8 @@
 export { Table as default, Table, TableProvider } from './table-provider';
 export { TableBody } from './table';
 export type { TableProps, TableSchema, TableSchemaColumn, CellType, CellValue, CellRenderer, CellRendererProps, FilterRule, FilterCondition, FilterOption, TableFilter as TableFilterType, TablePaginationConfig, SortDirection, SortColumn, TableSort, } from './table.type';
-export { getNestedValue, extractCellValue } from './table.utils';
+export { extractCellValue } from './table.utils';
 export { DEFAULT_EMPTY_MESSAGE, TABLE_CSS_CLASSES } from './table.const';
 export { TableContext, useTableContext } from './table.context';
 export { TableCell, TableHeader, TableRow, TableEmptyState, TableLoadingState, TablePagination, TextCell, NumberCell, BooleanCell, TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent, } from './components';
-export { TableFilter } from './components/table-filter';
 export { PaginationInfo, PaginationQuickJumper } from './components/pagination/components';

package/dist/types/components/table/table-provider.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TableProps } from './table.type';
 import { TableBody } from './table';
-import { TableFilter } from './components/table-filter';
+import { TableFilter } from './components/table-filter/table-filter-provider';
 import { TableSearch } from './components/table-search';
 import { Pagination } from './components/pagination';
 import { TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent } from './components';

package/dist/types/components/table/table.type.d.ts

@@ -17,6 +17,7 @@ export type FilterRule = {
 export type FilterOption = {
     label: string;
     value: string;
+    total?: number;
 };
 export type TableFilter = {
     value: FilterRule[];
@@ -47,6 +48,7 @@ export type TableSort = {
 };
 export type TableSchemaColumn = {
     key: string;
+    valueGetter?: (record: Record<string, any>) => string | number | boolean | null | undefined;
     title: string;
     cellType: CellType;
     cellRenderer?: CellRenderer;

package/dist/types/components/table/table.utils.d.ts

@@ -1,3 +1,2 @@
 import { CellValue, TableSchemaColumn } from './table.type';
-export declare const getNestedValue: (object: Record<string, unknown>, path: string) => CellValue;
 export declare const extractCellValue: (record: Record<string, unknown>, column: TableSchemaColumn) => CellValue;

package/dist/types/components/table-card/table-card.type.d.ts

@@ -12,7 +12,10 @@ export interface TableCardProps {
     search?: Partial<TableSearch> & {
         className?: string;
     };
-    filter?: Partial<TableFilter>;
+    filter?: Partial<TableFilter> & {
+        quickFilters?: string[];
+        showFilterButton?: boolean;
+    };
     headerLeftContent?: React.ReactNode;
     headerActions?: React.ReactNode;
     body?: {
@@ -23,12 +26,9 @@ export interface TableCardProps {
     };
     showFooter?: boolean;
     footerClassName?: string;
-    pagination?: Partial<PaginationProps>;
-    paginationInfo?: Partial<Omit<PaginationInfoProps, 'itemsPerPage' | 'totalItems'>> & {
-        itemsPerPage: number;
-        totalItems: number;
-    };
-    paginationQuickJumper?: Partial<PaginationQuickJumperProps>;
+    pagination?: PaginationProps;
+    paginationInfo?: PaginationInfoProps;
+    paginationQuickJumper?: PaginationQuickJumperProps;
     loading?: boolean;
     emptyMessage?: string;
 }

package/dist/types/hooks/useClickOutside.d.ts

@@ -0,0 +1 @@
+export declare const useClickOutside: (ref: React.RefObject<HTMLElement | null>, callback: () => void) => void;

package/dist/types/index.d.ts

@@ -17,6 +17,7 @@ export * from './components/table';
 export * from './components/tooltip/tooltip';
 export * from './components/table-card';
 export * from './components/badge/badge';
+export * from './components/avatar/avatar';
 export * from './components/assets/icons/apartment-building';
 export * from './components/assets/icons/chevron-down';
 export * from './components/assets/icons/chevron-left';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztwoint/z-ui",
-  "version": "0.1.44",
+  "version": "0.1.46",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -35,6 +35,7 @@
     "lint": "eslint \"src/components/**/*.{js,jsx,ts,tsx}\" --ignore-pattern \"**/*.d.ts\" --ignore-pattern \"**/*.stories.tsx\"",
     "lint:fix": "eslint \"src/components/**/*.{js,jsx,ts,tsx}\" --ignore-pattern \"**/*.d.ts\" --ignore-pattern \"**/*.stories.tsx\" --fix",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "type-check": "tsc --noEmit --pretty",
     "prepare": "husky"
   },
   "devDependencies": {

package/dist/components/table/components/table-filter/table-filter.d.ts

@@ -1,9 +0,0 @@
-import { FilterComponentType } from './table-filter.type';
-import { TableSchema, TableFilter as TableFilterType } from '../../table.type';
-import * as React from 'react';
-export interface TableFilterProps {
-    filterComponents?: Record<string, FilterComponentType>;
-    schema: TableSchema;
-    filter?: TableFilterType;
-}
-export declare const TableFilter: React.FC<TableFilterProps>;

package/dist/components/table/components/table-filter/table-filter.js

@@ -1,120 +0,0 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { Button as i } from "../../../button/button.js";
-import T from "./table-filter.hook.js";
-import C from "./filters/text.js";
-import j from "./filters/boolean.js";
-import z from "./filters/number/number.js";
-import A from "./filters/checkbox.js";
-import O from "../../../assets/icons/circle-check-filled.js";
-const E = ({
-  filterComponents: n = {},
-  schema: d,
-  filter: o
-}) => {
-  const {
-    selectedColumn: r,
-    setSelectedColumn: p,
-    getFilterForColumn: x,
-    hasFilterForColumn: b,
-    updateColumnFilter: f,
-    clearAllFilters: v,
-    applyFilters: k,
-    hasActiveFilters: s,
-    isOpen: m,
-    setIsOpen: u,
-    filterableFields: y
-  } = T({ schema: d, filter: o || { value: [], onChange: () => {
-  } } });
-  if (!o)
-    return null;
-  const N = () => {
-    if (!r) return null;
-    const e = d.find((c) => c.key === r), F = {
-      boolean: j,
-      text: C,
-      number: z,
-      checkbox: A
-    }, h = (n == null ? void 0 : n[(e == null ? void 0 : e.cellType) || ""]) || F[(e == null ? void 0 : e.cellType) || "text"];
-    if (!h)
-      return console.warn(
-        `No filter component found for column "${e == null ? void 0 : e.key}" with cellType "${e == null ? void 0 : e.cellType}". Provide a custom filter component or use supported types: "text", "number", "boolean", "checkbox".`
-      ), null;
-    const a = x(r), g = {
-      condition: (a == null ? void 0 : a.condition) || "",
-      value: (a == null ? void 0 : a.value) || ""
-    };
-    return /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ t("div", { className: "mb-4", children: /* @__PURE__ */ t("div", { className: "", children: /* @__PURE__ */ t(
-      h,
-      {
-        value: g,
-        onChange: ({ condition: c, value: w }) => f(r, c, w),
-        filterOptions: e == null ? void 0 : e.filterOptions
-      },
-      e == null ? void 0 : e.key
-    ) }) }) });
-  };
-  return /* @__PURE__ */ l("div", { className: "relative", children: [
-    /* @__PURE__ */ l(
-      i,
-      {
-        onClick: () => u(!m),
-        variant: s ? "filled" : "stroke",
-        shade: s ? "brand" : "neutral",
-        size: "small",
-        children: [
-          "Filter ",
-          s && `(${o.value.length})`
-        ]
-      }
-    ),
-    m && /* @__PURE__ */ l("div", { className: "absolute top-full left-0 mt-2 min-w-[600px] bg-surface-neutral-default border border-stroke-solid-medium rounded-md shadow-default z-10", children: [
-      /* @__PURE__ */ l("div", { className: "flex min-h-[300px]", children: [
-        /* @__PURE__ */ l("div", { className: "w-48 border-r border-stroke-solid-medium", children: [
-          /* @__PURE__ */ t("div", { className: "p-3 border-b border-stroke-solid-medium", children: /* @__PURE__ */ t("h3", { className: "text-sm font-medium text-text-neutral-primary", children: "Columns" }) }),
-          /* @__PURE__ */ t("div", { className: "py-2", children: y.map((e) => /* @__PURE__ */ l(
-            "button",
-            {
-              onClick: () => p(e.key),
-              className: `w-full text-left px-3 py-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hovered transition-colors ${r === e.key ? "bg-surface-brand-subtle text-text-brand-primary" : "text-text-neutral-primary"}`,
-              children: [
-                /* @__PURE__ */ t("span", { className: "truncate", children: e.title }),
-                b(e.key) && /* @__PURE__ */ t(O, { className: "w-4 h-4 text-icon-brand-primary flex-shrink-0 ml-2" })
-              ]
-            },
-            e.key
-          )) })
-        ] }),
-        /* @__PURE__ */ t("div", { className: "flex-1 flex flex-col", children: r ? N() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
-      ] }),
-      /* @__PURE__ */ l("div", { className: "flex justify-between items-center p-4 border-t border-stroke-solid-medium", children: [
-        /* @__PURE__ */ t(
-          i,
-          {
-            onClick: v,
-            variant: "ghost",
-            shade: "neutral",
-            size: "small",
-            disabled: !s,
-            children: "Clear All"
-          }
-        ),
-        /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ t(
-            i,
-            {
-              onClick: () => u(!1),
-              variant: "stroke",
-              shade: "neutral",
-              size: "small",
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ t(i, { onClick: k, variant: "filled", shade: "neutral", size: "small", children: "Apply" })
-        ] })
-      ] })
-    ] })
-  ] });
-};
-export {
-  E as TableFilter
-};

package/dist/types/components/table/components/table-filter/table-filter.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { FilterComponentType } from './table-filter.type';
-import { TableSchema, TableFilter as TableFilterType } from '../../table.type';
-export interface TableFilterProps {
-    filterComponents?: Record<string, FilterComponentType>;
-    schema: TableSchema;
-    filter?: TableFilterType;
-}
-export declare const TableFilter: React.FC<TableFilterProps>;