@snack-uikit/toolbar 0.14.15 → 0.14.16

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.14.16 (2026-01-19)</small>
+
+* fix(FF-7903): improved and exported date detection parsing utility from toolbar package ([1c71cba](https://github.com/cloud-ru-tech/snack-uikit/commit/1c71cba))
+* docs(FF-7788): readme update ([e3142b8](https://github.com/cloud-ru-tech/snack-uikit/commit/e3142b8))
+
+
+
+
+
 ## <small>0.14.15 (2025-12-17)</small>
 
 * fix(FF-7656): date parse issue ([edddd6c](https://github.com/cloud-ru-tech/snack-uikit/commit/edddd6c))

package/README.md

@@ -5,7 +5,115 @@
 
 [Changelog](./CHANGELOG.md)
 
-Toolbar
+## Description
+
+- Пакет `@snack-uikit/toolbar` предоставляет компонент `Toolbar` — универсальную панель инструментов для управления данными в таблицах, списках и других представлениях контента.
+- Компонент объединяет в себе строку поиска, массовые действия для выбранных элементов, кнопку обновления, фильтры и дополнительные действия в единый интерфейс.
+- Поддерживает два режима выбора: `single` (одиночный) и `multiple` (множественный) с чекбоксом и массовыми действиями (`bulkActions`), которые автоматически скрываются при отсутствии выбранных элементов.
+- Включает строку поиска с возможностью загрузки (`loading`), обработчиками изменения значения и подтверждения поиска.
+- Интегрирует систему фильтров через `filterRow` на базе `ChipChoiceRow`, позволяющую добавлять, удалять и управлять активными фильтрами с отображением их количества на кнопке фильтра.
+- Предоставляет слот `after` для размещения произвольных React-компонентов в правой части тулбара и выпадающий список дополнительных действий (`moreActions`).
+- Поддерживает сохранение состояния фильтров и поиска в `localStorage` и `queryParams` через конфигурацию `persist` для восстановления состояния при перезагрузке страницы.
+- Может отображаться с внешним бордером (`outline`) для визуального отделения от контента.
+- Figma: [`Toolbar`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A224846&mode=design).
+
+## Example
+
+```tsx
+import { useState } from 'react';
+import { Toolbar } from '@snack-uikit/toolbar';
+import { ButtonFunction } from '@snack-uikit/button';
+import { PlaceholderSVG } from '@snack-uikit/icons';
+
+function Example() {
+  const [searchValue, setSearchValue] = useState('');
+  const [checked, setChecked] = useState(false);
+  const [filtersValue, setFiltersValue] = useState<Record<string, unknown>>({});
+  const [visibleFilters, setVisibleFilters] = useState<string[]>([]);
+
+  const bulkActions = [
+    {
+      label: 'Confirm',
+      icon: PlaceholderSVG,
+      onClick: () => console.log('Confirm'),
+      'data-test-id': 'confirm-action',
+    },
+    {
+      label: 'Delete',
+      icon: PlaceholderSVG,
+      onClick: () => console.log('Delete'),
+      'data-test-id': 'delete-action',
+    },
+  ];
+
+  const moreActions = [
+    {
+      id: 'export',
+      content: { option: 'Export' },
+      onClick: () => console.log('Export'),
+    },
+    {
+      id: 'import',
+      content: { option: 'Import' },
+      onClick: () => console.log('Import'),
+    },
+  ];
+
+  const filterRow = {
+    showAddButton: true,
+    showClearButton: true,
+    filters: [
+      {
+        id: 'status',
+        label: 'Status',
+        type: 'single',
+        pinned: true,
+        options: [
+          { label: 'Active', value: 'active' },
+          { label: 'Inactive', value: 'inactive' },
+        ],
+      },
+    ],
+    open: visibleFilters.length > 0,
+    value: filtersValue,
+    onChange: setFiltersValue,
+    visibleFilters,
+    onVisibleFiltersChange: setVisibleFilters,
+  };
+
+  return (
+    <Toolbar
+      search={{
+        value: searchValue,
+        onChange: setSearchValue,
+        onSubmit: (value) => console.log('Search:', value),
+        placeholder: 'Search',
+      }}
+      selectionMode="multiple"
+      checked={checked}
+      onCheck={() => setChecked(!checked)}
+      bulkActions={bulkActions}
+      onRefresh={() => console.log('Refresh')}
+      moreActions={moreActions}
+      filterRow={filterRow}
+      after={
+        <>
+          <ButtonFunction icon={<PlaceholderSVG />} size="m" />
+          <ButtonFunction icon={<PlaceholderSVG />} size="m" />
+        </>
+      }
+      persist={{
+        id: 'example-toolbar',
+        filterQueryKey: 'filters',
+        onLoad: ({ filter, search }) => {
+          if (filter) setFiltersValue(filter);
+          if (search) setSearchValue(search);
+        },
+      }}
+    />
+  );
+}
+```
 
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
@@ -18,6 +126,19 @@ Toolbar
 | ordering | `FieldSort[]` | - |  |
 | search | `string` | - |  |
 | filter | `FiltersState` | - |  |
+## isDateString
+Утилита для проверки значения на соответствие дате.
+Поддерживает:
+- ISO форматы: '2021-01-01T00:00:00Z', '2021-01-01T15:55:42.000Z'
+- Форматы с точками: '12.03.2025', '12.03.2025 12:00'
+- Частичные даты: '2026', '2026-01'
+- Timestamps: '1768492519666', '-62167219200000'
+- Временные зоны: '+03:00', '-05:00'
+С полным списком поддерживаемых значений можно ознакомиться
+в файле с unit тестами packages/toolbar/__tests__/isDateString.spec.ts
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
 ## Toolbar
 ### Props
 | name | type | default value | description |

package/dist/cjs/components/Toolbar/hooks/usePersistState/utils/isDateString.d.ts

@@ -1 +1,11 @@
+/** Утилита для проверки значения на соответствие дате.
+ * Поддерживает:
+ * - ISO форматы: '2021-01-01T00:00:00Z', '2021-01-01T15:55:42.000Z'
+ * - Форматы с точками: '12.03.2025', '12.03.2025 12:00'
+ * - Частичные даты: '2026', '2026-01'
+ * - Timestamps: '1768492519666', '-62167219200000'
+ * - Временные зоны: '+03:00', '-05:00'
+ * С полным списком поддерживаемых значений можно ознакомиться
+ * в файле с unit тестами packages/toolbar/__tests__/isDateString.spec.ts
+ */
 export declare const isDateString: (value: unknown) => value is Date;

package/dist/cjs/components/Toolbar/hooks/usePersistState/utils/isDateString.js

@@ -4,11 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isDateString = void 0;
-const ISO_DATE_SYMBOLS_REGEXP = /[\d-:.TZ+]/g;
+const DATE_SYMBOLS_REGEXP = /[\d\-:.TZ+\s]/g;
+/** Утилита для проверки значения на соответствие дате.
+ * Поддерживает:
+ * - ISO форматы: '2021-01-01T00:00:00Z', '2021-01-01T15:55:42.000Z'
+ * - Форматы с точками: '12.03.2025', '12.03.2025 12:00'
+ * - Частичные даты: '2026', '2026-01'
+ * - Timestamps: '1768492519666', '-62167219200000'
+ * - Временные зоны: '+03:00', '-05:00'
+ * С полным списком поддерживаемых значений можно ознакомиться
+ * в файле с unit тестами packages/toolbar/__tests__/isDateString.spec.ts
+ */
 const isDateString = value => {
   if (typeof value !== 'string') return false;
-  const nonDateSymbols = value.replaceAll(ISO_DATE_SYMBOLS_REGEXP, '').trim();
+  const trimmed = value.trim();
+  if (trimmed.length === 0) return false;
+  const nonDateSymbols = trimmed.replaceAll(DATE_SYMBOLS_REGEXP, '');
   if (nonDateSymbols.length > 0) return false;
-  return !isNaN(new Date(value).getTime());
+  if (/^-?\d+$/.test(trimmed)) {
+    if (trimmed.length <= 2) return false;
+    const num = Number(trimmed);
+    const date = new Date(num);
+    if (isNaN(date.getTime())) return false;
+    return date.getTime() === num;
+  }
+  if (/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(trimmed)) {
+    return false;
+  }
+  const date = new Date(trimmed);
+  if (isNaN(date.getTime())) return false;
+  const hasDateLikeStructure = /^\d{4}/.test(trimmed) || /^\d{1,2}[.-]\d{1,2}[.-]\d{4}/.test(trimmed) || /^\d{4}[.-]\d{1,2}[.-]\d{1,2}/.test(trimmed) || /T/.test(trimmed);
+  if (!hasDateLikeStructure && !trimmed.includes(':')) {
+    return false;
+  }
+  return date.toString() !== 'Invalid Date';
 };
 exports.isDateString = isDateString;

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

@@ -1,3 +1,4 @@
 export * from './Toolbar';
 export type { FilterRow, PersistedFilterState, ToolbarPersistConfig } from './Toolbar/types';
 export { formatFilterStateToRequestPayload } from './Toolbar/hooks/usePersistState/utils';
+export { isDateString } from './Toolbar/hooks/usePersistState/utils/isDateString';

package/dist/cjs/components/index.js

@@ -22,7 +22,7 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatFilterStateToRequestPayload = void 0;
+exports.isDateString = exports.formatFilterStateToRequestPayload = void 0;
 __exportStar(require("./Toolbar"), exports);
 var utils_1 = require("./Toolbar/hooks/usePersistState/utils");
 Object.defineProperty(exports, "formatFilterStateToRequestPayload", {
@@ -30,4 +30,11 @@ Object.defineProperty(exports, "formatFilterStateToRequestPayload", {
   get: function () {
     return utils_1.formatFilterStateToRequestPayload;
   }
+});
+var isDateString_1 = require("./Toolbar/hooks/usePersistState/utils/isDateString");
+Object.defineProperty(exports, "isDateString", {
+  enumerable: true,
+  get: function () {
+    return isDateString_1.isDateString;
+  }
 });

package/dist/esm/components/Toolbar/hooks/usePersistState/utils/isDateString.d.ts

@@ -1 +1,11 @@
+/** Утилита для проверки значения на соответствие дате.
+ * Поддерживает:
+ * - ISO форматы: '2021-01-01T00:00:00Z', '2021-01-01T15:55:42.000Z'
+ * - Форматы с точками: '12.03.2025', '12.03.2025 12:00'
+ * - Частичные даты: '2026', '2026-01'
+ * - Timestamps: '1768492519666', '-62167219200000'
+ * - Временные зоны: '+03:00', '-05:00'
+ * С полным списком поддерживаемых значений можно ознакомиться
+ * в файле с unit тестами packages/toolbar/__tests__/isDateString.spec.ts
+ */
 export declare const isDateString: (value: unknown) => value is Date;

package/dist/esm/components/Toolbar/hooks/usePersistState/utils/isDateString.js

@@ -1,9 +1,44 @@
-const ISO_DATE_SYMBOLS_REGEXP = /[\d-:.TZ+]/g;
+const DATE_SYMBOLS_REGEXP = /[\d\-:.TZ+\s]/g;
+/** Утилита для проверки значения на соответствие дате.
+ * Поддерживает:
+ * - ISO форматы: '2021-01-01T00:00:00Z', '2021-01-01T15:55:42.000Z'
+ * - Форматы с точками: '12.03.2025', '12.03.2025 12:00'
+ * - Частичные даты: '2026', '2026-01'
+ * - Timestamps: '1768492519666', '-62167219200000'
+ * - Временные зоны: '+03:00', '-05:00'
+ * С полным списком поддерживаемых значений можно ознакомиться
+ * в файле с unit тестами packages/toolbar/__tests__/isDateString.spec.ts
+ */
 export const isDateString = (value) => {
     if (typeof value !== 'string')
         return false;
-    const nonDateSymbols = value.replaceAll(ISO_DATE_SYMBOLS_REGEXP, '').trim();
+    const trimmed = value.trim();
+    if (trimmed.length === 0)
+        return false;
+    const nonDateSymbols = trimmed.replaceAll(DATE_SYMBOLS_REGEXP, '');
     if (nonDateSymbols.length > 0)
         return false;
-    return !isNaN(new Date(value).getTime());
+    if (/^-?\d+$/.test(trimmed)) {
+        if (trimmed.length <= 2)
+            return false;
+        const num = Number(trimmed);
+        const date = new Date(num);
+        if (isNaN(date.getTime()))
+            return false;
+        return date.getTime() === num;
+    }
+    if (/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(trimmed)) {
+        return false;
+    }
+    const date = new Date(trimmed);
+    if (isNaN(date.getTime()))
+        return false;
+    const hasDateLikeStructure = /^\d{4}/.test(trimmed) ||
+        /^\d{1,2}[.-]\d{1,2}[.-]\d{4}/.test(trimmed) ||
+        /^\d{4}[.-]\d{1,2}[.-]\d{1,2}/.test(trimmed) ||
+        /T/.test(trimmed);
+    if (!hasDateLikeStructure && !trimmed.includes(':')) {
+        return false;
+    }
+    return date.toString() !== 'Invalid Date';
 };

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

@@ -1,3 +1,4 @@
 export * from './Toolbar';
 export type { FilterRow, PersistedFilterState, ToolbarPersistConfig } from './Toolbar/types';
 export { formatFilterStateToRequestPayload } from './Toolbar/hooks/usePersistState/utils';
+export { isDateString } from './Toolbar/hooks/usePersistState/utils/isDateString';

package/dist/esm/components/index.js

@@ -1,2 +1,3 @@
 export * from './Toolbar';
 export { formatFilterStateToRequestPayload } from './Toolbar/hooks/usePersistState/utils';
+export { isDateString } from './Toolbar/hooks/usePersistState/utils/isDateString';

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toolbar",
-  "version": "0.14.15",
+  "version": "0.14.16",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -52,5 +52,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "77eb300ff87d91df0f3c12a15f89755eec155599"
+  "gitHead": "2baa589b36417cff3006e42bee78144c8ec5e83a"
 }

package/src/components/Toolbar/hooks/usePersistState/utils/isDateString.ts

@@ -1,10 +1,51 @@
-const ISO_DATE_SYMBOLS_REGEXP = /[\d-:.TZ+]/g;
+const DATE_SYMBOLS_REGEXP = /[\d\-:.TZ+\s]/g;
 
+/** Утилита для проверки значения на соответствие дате.
+ * Поддерживает:
+ * - ISO форматы: '2021-01-01T00:00:00Z', '2021-01-01T15:55:42.000Z'
+ * - Форматы с точками: '12.03.2025', '12.03.2025 12:00'
+ * - Частичные даты: '2026', '2026-01'
+ * - Timestamps: '1768492519666', '-62167219200000'
+ * - Временные зоны: '+03:00', '-05:00'
+ * С полным списком поддерживаемых значений можно ознакомиться
+ * в файле с unit тестами packages/toolbar/__tests__/isDateString.spec.ts
+ */
 export const isDateString = (value: unknown): value is Date => {
   if (typeof value !== 'string') return false;
 
-  const nonDateSymbols = value.replaceAll(ISO_DATE_SYMBOLS_REGEXP, '').trim();
+  const trimmed = value.trim();
+  if (trimmed.length === 0) return false;
+
+  const nonDateSymbols = trimmed.replaceAll(DATE_SYMBOLS_REGEXP, '');
   if (nonDateSymbols.length > 0) return false;
 
-  return !isNaN(new Date(value).getTime());
+  if (/^-?\d+$/.test(trimmed)) {
+    if (trimmed.length <= 2) return false;
+
+    const num = Number(trimmed);
+    const date = new Date(num);
+
+    if (isNaN(date.getTime())) return false;
+
+    return date.getTime() === num;
+  }
+
+  if (/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(trimmed)) {
+    return false;
+  }
+
+  const date = new Date(trimmed);
+  if (isNaN(date.getTime())) return false;
+
+  const hasDateLikeStructure =
+    /^\d{4}/.test(trimmed) ||
+    /^\d{1,2}[.-]\d{1,2}[.-]\d{4}/.test(trimmed) ||
+    /^\d{4}[.-]\d{1,2}[.-]\d{1,2}/.test(trimmed) ||
+    /T/.test(trimmed);
+
+  if (!hasDateLikeStructure && !trimmed.includes(':')) {
+    return false;
+  }
+
+  return date.toString() !== 'Invalid Date';
 };

package/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './Toolbar';
 export type { FilterRow, PersistedFilterState, ToolbarPersistConfig } from './Toolbar/types';
 export { formatFilterStateToRequestPayload } from './Toolbar/hooks/usePersistState/utils';
+export { isDateString } from './Toolbar/hooks/usePersistState/utils/isDateString';