@react-fabric/data 1.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 React Fabric, Adarsh Pastakia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,10 @@
+# React-Fabric Data Module
+
+#### Install
+
+```bash
+# Using
+yarn add @react-fabric/data
+```
+
+#### Usage

package/dist/cjs/histogram/Histogram.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var Histogram_module = require('./Histogram.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var emptyIcon = "M20.84 22.73L11.11 13H3V11H9.11L6.11 8H3V6H4.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 11H14.2L15 11.8V11M21 8V6H9.2L11.2 8H21M3 18H9V16H3V18Z";
+var Histogram = function Histogram(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    total = _ref.total,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
+    _ref$sortBy = _ref.sortBy,
+    sortBy = _ref$sortBy === void 0 ? "count" : _ref$sortBy,
+    emptyTitle = _ref.emptyTitle,
+    emptyMessage = _ref.emptyMessage,
+    _onClick = _ref.onClick;
+  var _useTranslation = reactI18next.useTranslation("data"),
+    t = _useTranslation.t;
+  var maxTotal = react.useMemo(function () {
+    if (total) return total;
+    return Math.max.apply(Math, _toConsumableArray(items.map(function (item) {
+      return item.count;
+    })));
+  }, [total, items]);
+  var sorted = react.useMemo(function () {
+    return items.sort(utilities.compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
+  }, [items, sortBy]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: Histogram_module.histogram,
+    style: {
+      "--color": "var(--".concat(color, ")")
+    },
+    children: [sorted.length === 0 && /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
+      icon: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        icon: emptyIcon,
+        size: "2.5rem"
+      }),
+      title: emptyTitle,
+      message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("histogram.empty")
+    }), sorted === null || sorted === void 0 ? void 0 : sorted.map(function (item) {
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        role: "none",
+        "data-disabled": item.count === 0 || item.disabled,
+        className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", Histogram_module.histoLabel, (item.count === 0 || item.disabled) && "pointer-events-none"),
+        onClick: function onClick(e) {
+          return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id), e.stopPropagation()];
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-0% to-100%", Histogram_module.histoBar),
+          style: {
+            width: "".concat(Math.min(item.count / maxTotal, 1) * 100, "%")
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(core.ActionLabel, {
+          className: "flex-1 truncate z-1 text-sm cursor-pointer font-medium",
+          actions: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
+            color: "danger",
+            size: "sm",
+            icon: core.CoreIcons.funnelMinus,
+            "aria-label": "Filter Negative",
+            onClick: function onClick() {
+              return _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id, true);
+            }
+          }, "negative"), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+            color: "primary",
+            size: "sm",
+            icon: core.CoreIcons.funnelPlus,
+            "aria-label": "Filter",
+            onClick: function onClick() {
+              return _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id);
+            }
+          }, "positive")],
+          children: item.label
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", Histogram_module.histoBadge),
+          children: utilities.Format.number(item.count)
+        })]
+      }, item.id);
+    })]
+  });
+};
+
+exports.Histogram = Histogram;

package/dist/cjs/histogram/Histogram.module.css

@@ -0,0 +1 @@
+@layer comp{.histogram{.histoLabel{--tw-gradient-from:var(--color) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in lab,var(--color) 20%,var(--fabric-bg)) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);background-color:color(from var(--color) srgb r g b/5%);&:hover{background-color:color(from var(--color) srgb r g b/15%)}&[data-disabled=true]{--color:theme(colors.tint.300);color:theme(colors.tint.600)}}.histoBar{box-shadow:-2px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:2px 0 0 var(--color) inset}}.histoBadge{background-color:color(from var(--color) srgb r g b/15%)}}}

package/dist/cjs/hooks/useFilteredList.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+
+var filterList = function filterList(items) {
+  var query = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  var matcher = arguments.length > 2 ? arguments[2] : undefined;
+  var newList = [];
+  items.forEach(function (item) {
+    if (matcher) {
+      return (matcher === null || matcher === void 0 ? void 0 : matcher(item, query)) && newList.push(item);
+    }
+    if (query && utilities.isString(query)) {
+      var _item$label;
+      if (utilities.matchString((_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : item.toString(), query)) {
+        return newList.push(item);
+      }
+    } else {
+      return newList.push(item);
+    }
+  });
+  return newList;
+};
+var useFilteredList = function useFilteredList(items, matcher) {
+  var _useState = react.useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    query = _useState2[0],
+    setQuery = _useState2[1];
+  var _items = react.useDeferredValue(items !== null && items !== void 0 ? items : []);
+  var _useState3 = react.useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filteredList = _useState4[0],
+    setFilteredList = _useState4[1];
+  var _useTransition = react.useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2),
+    isSearching = _useTransition2[0],
+    startTransition = _useTransition2[1];
+  var filterItems = react.useCallback(function (items, query) {
+    return startTransition(function () {
+      return setFilteredList(filterList(items, query, matcher));
+    });
+  }, []);
+  react.useEffect(function () {
+    if (query) filterItems(_items, query);else setFilteredList(items);
+  }, [query, _items]);
+  return {
+    onSearch: setQuery,
+    query: query,
+    filteredList: filteredList,
+    isSearching: isSearching
+  };
+};
+
+exports.useFilteredList = useFilteredList;

package/dist/cjs/hooks/usePagination.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var TOTAL_PILLS = 12;
+var TOTAL_SIBLINGS = 2;
+var TOTAL_MID_SIBLINGS = 3;
+var makeRange = function makeRange(start, end) {
+  var length = end - start;
+  return Array.from({
+    length: length
+  }, function (_, idx) {
+    return idx + start;
+  });
+};
+var usePagination = function usePagination(_ref) {
+  var totalRecords = _ref.totalRecords,
+    _ref$currentPage = _ref.currentPage,
+    currentPage = _ref$currentPage === void 0 ? 0 : _ref$currentPage,
+    _ref$perPage = _ref.perPage,
+    perPage = _ref$perPage === void 0 ? 25 : _ref$perPage,
+    onChange = _ref.onChange;
+  var _useState = react.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    page = _useState2[0],
+    setPage = _useState2[1];
+  var _useTransition = react.useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2),
+    startTransition = _useTransition2[1];
+
+  /** ***************** calculate total pages *******************/
+  var totalPages = react.useMemo(function () {
+    return Math.max(1, Math.ceil(totalRecords / perPage));
+  }, [totalRecords, perPage]);
+
+  /** ***************** calculate ranges *******************/
+  var ranges = react.useMemo(function () {
+    if (totalPages <= TOTAL_PILLS) {
+      return [makeRange(0, totalPages)];
+    }
+    var leftSiblingIndex = Math.max(page - TOTAL_MID_SIBLINGS, 0);
+    var rightSiblingIndex = Math.min(page + TOTAL_MID_SIBLINGS, totalPages - 1);
+    var shouldShowLeftDots = leftSiblingIndex >= TOTAL_SIBLINGS;
+    var shouldShowRightDots = rightSiblingIndex < totalPages - TOTAL_SIBLINGS;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      return [makeRange(0, TOTAL_SIBLINGS * 3), makeRange(totalPages - TOTAL_SIBLINGS, totalPages)];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      return [makeRange(0, TOTAL_SIBLINGS), makeRange(totalPages - TOTAL_SIBLINGS * 3, totalPages)];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      return [makeRange(0, TOTAL_SIBLINGS), makeRange(leftSiblingIndex + 1, rightSiblingIndex), makeRange(totalPages - TOTAL_SIBLINGS, totalPages)];
+    }
+    return [];
+  }, [page, totalPages]);
+
+  /** ***************** set page *******************/
+  react.useEffect(function () {
+    setPage(Math.min(currentPage, totalPages - 1));
+    onChange === null || onChange === void 0 || onChange(Math.min(currentPage, totalPages - 1));
+  }, [currentPage, totalPages]);
+  var headLabel = react.useMemo(function () {
+    return /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: "text-muted",
+      children: [page * perPage + 1, "\xA0-\xA0", Math.min(page * perPage + perPage, totalRecords)]
+    });
+  }, [page, perPage, totalRecords]);
+  var onPageChange = react.useCallback(function (page) {
+    setPage(page);
+    startTransition(function () {
+      return onChange === null || onChange === void 0 ? void 0 : onChange(page);
+    });
+  }, []);
+  return {
+    page: page,
+    totalPages: totalPages,
+    headLabel: headLabel,
+    ranges: ranges,
+    onPageChange: onPageChange
+  };
+};
+
+exports.usePagination = usePagination;

package/dist/cjs/i18n/ar.json.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var label = {
+	noRecords: "لا تسجيلات"
+};
+var tree = {
+	noItems: "لا توجد عناصر",
+	error: "خطأ في تحميل العناصر",
+	loading: "تحميل العناصر…"
+};
+var datagrid = {
+	empty: "لا توجد سجلات متاحة"
+};
+var json = {
+	empty: "لا توجد خصائص بيانات",
+	"true": "نعم",
+	"false": "رقم"
+};
+var checkList = {
+	empty: "لا توجد عناصر قائمة"
+};
+var histogram = {
+	empty: "لا توجد رسوم بيانية"
+};
+var action = {
+	find: "تجد…",
+	copy: "قيمة النسخ",
+	filter: "منقي…",
+	showShortcuts: "اختصارات لوحة المفاتيح…",
+	collapseAll: "انهيار جميع",
+	expandAll: "توسيع الكل",
+	checkAll: "تحقق من الكل",
+	uncheckAll: "الغاءالكل",
+	addFilter: "أضف عامل تصفية",
+	addFilterNot: "إضافة لا تصفية"
+};
+var ar = {
+	label: label,
+	tree: tree,
+	datagrid: datagrid,
+	json: json,
+	checkList: checkList,
+	histogram: histogram,
+	action: action
+};
+
+exports.action = action;
+exports.checkList = checkList;
+exports.datagrid = datagrid;
+exports.default = ar;
+exports.histogram = histogram;
+exports.json = json;
+exports.label = label;
+exports.tree = tree;

package/dist/cjs/i18n/en.json.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var label = {
+	noRecords: "No Records"
+};
+var tree = {
+	noItems: "No items",
+	error: "Error loading items",
+	loading: "Loading items..."
+};
+var datagrid = {
+	empty: "No records available"
+};
+var json = {
+	empty: "No data properties",
+	"true": "Yes",
+	"false": "No"
+};
+var checkList = {
+	empty: "No list items"
+};
+var histogram = {
+	empty: "No histograms"
+};
+var action = {
+	find: "Find...",
+	copy: "Copy Value",
+	filter: "Filter...",
+	showShortcuts: "Keyboard shortcuts...",
+	collapseAll: "Collapse All",
+	expandAll: "Expand All",
+	checkAll: "Check All",
+	uncheckAll: "Uncheck All",
+	addFilter: "Add Filter",
+	addFilterNot: "Add not Filter"
+};
+var en = {
+	label: label,
+	tree: tree,
+	datagrid: datagrid,
+	json: json,
+	checkList: checkList,
+	histogram: histogram,
+	action: action
+};
+
+exports.action = action;
+exports.checkList = checkList;
+exports.datagrid = datagrid;
+exports.default = en;
+exports.histogram = histogram;
+exports.json = json;
+exports.label = label;
+exports.tree = tree;

package/dist/cjs/i18n/index.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var core = require('@react-fabric/core');
+var ar = require('./ar.json.js');
+var en = require('./en.json.js');
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+core.addTranslationBundle("data", {
+  en: en.default,
+  ar: ar.default
+});

package/dist/cjs/index.js

@@ -0,0 +1,24 @@
+'use strict';
+
+require('./i18n/index.js');
+var Histogram = require('./histogram/Histogram.js');
+var JsonViewer = require('./json/JsonViewer.js');
+var Pagination = require('./pagination/Pagination.js');
+var Table = require('./table/Table.js');
+var TreePanel = require('./tree/TreePanel.js');
+var Gallery = require('./virtual/Gallery.js');
+var List = require('./virtual/List.js');
+var useFilteredList = require('./hooks/useFilteredList.js');
+var usePagination = require('./hooks/usePagination.js');
+
+
+
+exports.Histogram = Histogram.Histogram;
+exports.JsonViewer = JsonViewer.JsonViewer;
+exports.Pagination = Pagination.Pagination;
+exports.Table = Table.Table;
+exports.TreePanel = TreePanel.TreePanel;
+exports.VirtualGallery = Gallery.VirtualGallery;
+exports.VirtualList = List.VirtualList;
+exports.useFilteredList = useFilteredList.useFilteredList;
+exports.usePagination = usePagination.usePagination;