@pushwoosh/smart-components-kit 1.0.77 → 1.0.88

package/Table/components/DataTableList/DataTableList.js

@@ -5,6 +5,7 @@ import Box from '../../assets/box.svg?url';
 import Error from '../../assets/error.svg?url';
 import NotFound from '../../assets/notfound.svg?url';
 import { DataTableContext } from '../../context';
+import { useLang } from '../../polyglot';
 import { LockedText } from '../../styles';
 import { Loading } from '../Loading';
 export function DataTableList({
@@ -15,6 +16,7 @@ export function DataTableList({
     data,
     params
   } = useContext(DataTableContext);
+  const lang = useLang();
   if (data.loading) {
     return React.createElement(Loading, null);
   }
@@ -29,17 +31,23 @@ export function DataTableList({
       "$gap": 16
     }, React.createElement("img", {
       src: Error,
-      alt: "Request failed"
+      alt: lang({
+        message: 'SMART.TABLE.ERROR_IMG_ALT'
+      })
     }), React.createElement(Vertical, {
       "$alignContent": "center",
       "$gap": 8
     }, React.createElement(LockedText, {
       "$fontWeight": FontWeight.MEDIUM,
       "$maxWidth": "250px"
-    }, "Something went wrong"), React.createElement(LockedText, {
+    }, lang({
+      message: 'SMART.TABLE.ERROR_TITLE'
+    })), React.createElement(LockedText, {
       "$fontSize": FontSize.SMALL,
       "$maxWidth": "250px"
-    }, "Give it another try or refresh the page to see if we can fix this glitch!"))));
+    }, lang({
+      message: 'SMART.TABLE.ERROR_DESCRIPTION'
+    })))));
   }
   const isFiltered = ((_data$value2 = data.value) === null || _data$value2 === void 0 ? void 0 : _data$value2.isFiltered) || params.search;
   return isFiltered ? React.createElement(Horizontal, {
@@ -49,32 +57,44 @@ export function DataTableList({
     "$gap": 16
   }, React.createElement("img", {
     src: NotFound,
-    alt: "Not found"
+    alt: lang({
+      message: 'SMART.TABLE.NO_MATCH_IMG_ALT'
+    })
   }), React.createElement(Vertical, {
     "$alignContent": "center",
     "$gap": 8
   }, React.createElement(LockedText, {
     "$fontWeight": FontWeight.MEDIUM,
     "$maxWidth": "250px"
-  }, "No match found"), React.createElement(LockedText, {
+  }, lang({
+    message: 'SMART.TABLE.NO_MATCH'
+  })), React.createElement(LockedText, {
     "$fontSize": FontSize.SMALL,
     "$maxWidth": "250px"
-  }, "Please try using different search terms with a minimum of two characters.")))) : React.createElement(Horizontal, {
+  }, lang({
+    message: 'SMART.TABLE.NO_MATCH_DESCRIPTION'
+  }))))) : React.createElement(Horizontal, {
     "$placeItems": "center",
     "$padding": 64
   }, React.createElement(Horizontal, {
     "$gap": 16
   }, React.createElement("img", {
     src: Box,
-    alt: "Empty box"
+    alt: lang({
+      message: 'SMART.TABLE.EMPTY_IMG_ALT'
+    })
   }), React.createElement(Vertical, {
     "$alignContent": "center",
     "$gap": 8
   }, React.createElement(LockedText, {
     "$fontWeight": FontWeight.MEDIUM,
     "$maxWidth": "250px"
-  }, "This list is empty"), React.createElement(LockedText, {
+  }, lang({
+    message: 'SMART.TABLE.EMPTY_TITLE'
+  })), React.createElement(LockedText, {
     "$fontSize": FontSize.SMALL,
     "$maxWidth": "250px"
-  }, "Looks like there's nothing here yet. Time to create \u2014 let's bring this list to life!"))));
+  }, lang({
+    message: 'SMART.TABLE.EMPTY_DESCRIPTION'
+  })))));
 }

package/Table/components/TablePagination/TablePagination.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { NativeSelect, Pagination } from '@pushwoosh/dumb-components';
 import { Horizontal } from '@pushwoosh/kit-helpers';
+import { useLang } from '../../polyglot';
 export function TablePagination({
   activePage,
   totalPages,
@@ -12,6 +13,7 @@ export function TablePagination({
   onChangeLimit,
   children
 }) {
+  const lang = useLang();
   return React.createElement(Horizontal, {
     "$alignItems": "center",
     "$justifyContent": "space-between",
@@ -26,7 +28,9 @@ export function TablePagination({
   }), children), !hidePageSizeSelector && React.createElement(Horizontal, {
     "$gap": 8,
     "$alignItems": "center"
-  }, React.createElement("span", null, "Show on page:"), React.createElement(NativeSelect, {
+  }, React.createElement("span", null, lang({
+    message: 'SMART.TABLE.SHOW_ON_PAGE'
+  })), React.createElement(NativeSelect, {
     name: "page",
     value: limit,
     onChange: event => {

package/Table/polyglot/index.d.ts

@@ -0,0 +1,2 @@
+import { type TableMessages } from './types';
+export declare const Lang: import("react").FC<import("@pushwoosh/dumb-components/polyglot").LangProps<TableMessages>>, useLang: () => (props: import("@pushwoosh/dumb-components/polyglot").LangProps<TableMessages>) => string;

package/Table/polyglot/index.js

@@ -0,0 +1,10 @@
+import { createLang } from '@pushwoosh/dumb-components/polyglot';
+import { messages as en } from './messages_en';
+import { messages as ru } from './messages_ru';
+export const {
+  Lang,
+  useLang
+} = createLang({
+  en,
+  ru
+});

package/Table/polyglot/messages_en.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type TableMessages } from './types';
+export declare const messages: LangMessages<TableMessages>;

package/Table/polyglot/messages_en.js

@@ -0,0 +1,18 @@
+export const messages = {
+  'SMART.TABLE.LOADING': 'Loading...',
+  'SMART.TABLE.REQUEST_FAILED': 'Request failed',
+  'SMART.TABLE.RESULT_LABEL': 'Result:',
+  'SMART.TABLE.RESULT_COUNT': '{{total}} {{total | pluralize: "item", "items"}}',
+  'SMART.TABLE.NO_ITEMS': 'No items yet',
+  'SMART.TABLE.NO_MATCH': 'No match found',
+  'SMART.TABLE.CLEAR_REQUEST': 'Clear request',
+  'SMART.TABLE.ERROR_IMG_ALT': 'Request failed',
+  'SMART.TABLE.ERROR_TITLE': 'Something went wrong',
+  'SMART.TABLE.ERROR_DESCRIPTION': 'Give it another try or refresh the page to see if we can fix this glitch!',
+  'SMART.TABLE.NO_MATCH_IMG_ALT': 'Not found',
+  'SMART.TABLE.NO_MATCH_DESCRIPTION': 'Please try using different search terms with a minimum of two characters.',
+  'SMART.TABLE.EMPTY_IMG_ALT': 'Empty box',
+  'SMART.TABLE.EMPTY_TITLE': 'This list is empty',
+  'SMART.TABLE.EMPTY_DESCRIPTION': 'Looks like there’s nothing here yet. Time to create — let’s bring this list to life!',
+  'SMART.TABLE.SHOW_ON_PAGE': 'Show on page:'
+};

package/Table/polyglot/messages_ru.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type TableMessages } from './types';
+export declare const messages: LangMessages<TableMessages>;

package/Table/polyglot/messages_ru.js

@@ -0,0 +1,18 @@
+export const messages = {
+  'SMART.TABLE.LOADING': 'Загрузка...',
+  'SMART.TABLE.REQUEST_FAILED': 'Ошибка запроса',
+  'SMART.TABLE.RESULT_LABEL': 'Результат:',
+  'SMART.TABLE.RESULT_COUNT': '{{total}} {{total | pluralize: "элемент", "элемента", "элементов"}}',
+  'SMART.TABLE.NO_ITEMS': 'Пока нет элементов',
+  'SMART.TABLE.NO_MATCH': 'Ничего не найдено',
+  'SMART.TABLE.CLEAR_REQUEST': 'Сбросить запрос',
+  'SMART.TABLE.ERROR_IMG_ALT': 'Ошибка запроса',
+  'SMART.TABLE.ERROR_TITLE': 'Что-то пошло не так',
+  'SMART.TABLE.ERROR_DESCRIPTION': 'Попробуйте ещё раз или обновите страницу — возможно, это поможет!',
+  'SMART.TABLE.NO_MATCH_IMG_ALT': 'Ничего не найдено',
+  'SMART.TABLE.NO_MATCH_DESCRIPTION': 'Попробуйте изменить поисковый запрос (минимум два символа).',
+  'SMART.TABLE.EMPTY_IMG_ALT': 'Пустой список',
+  'SMART.TABLE.EMPTY_TITLE': 'Список пуст',
+  'SMART.TABLE.EMPTY_DESCRIPTION': 'Похоже, здесь пока ничего нет. Самое время создать что-нибудь и оживить этот список!',
+  'SMART.TABLE.SHOW_ON_PAGE': 'Показывать на странице:'
+};

package/Table/polyglot/types.d.ts

@@ -0,0 +1,21 @@
+import type { NoParams } from '@pushwoosh/dumb-components/polyglot';
+export type TableMessages = {
+    'SMART.TABLE.LOADING': NoParams;
+    'SMART.TABLE.REQUEST_FAILED': NoParams;
+    'SMART.TABLE.RESULT_LABEL': NoParams;
+    'SMART.TABLE.RESULT_COUNT': {
+        total: number;
+    };
+    'SMART.TABLE.NO_ITEMS': NoParams;
+    'SMART.TABLE.NO_MATCH': NoParams;
+    'SMART.TABLE.CLEAR_REQUEST': NoParams;
+    'SMART.TABLE.ERROR_IMG_ALT': NoParams;
+    'SMART.TABLE.ERROR_TITLE': NoParams;
+    'SMART.TABLE.ERROR_DESCRIPTION': NoParams;
+    'SMART.TABLE.NO_MATCH_IMG_ALT': NoParams;
+    'SMART.TABLE.NO_MATCH_DESCRIPTION': NoParams;
+    'SMART.TABLE.EMPTY_IMG_ALT': NoParams;
+    'SMART.TABLE.EMPTY_TITLE': NoParams;
+    'SMART.TABLE.EMPTY_DESCRIPTION': NoParams;
+    'SMART.TABLE.SHOW_ON_PAGE': NoParams;
+};

package/Table/polyglot/types.js

@@ -0,0 +1 @@
+export {};

package/Table/styles.d.ts

@@ -5,232 +5,56 @@ export type TableProps = {
     isBordered?: boolean;
     $bgColor?: string;
 };
-export declare const Table: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
+export declare const Table: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
+} & {
     $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
 } & {
     $gridAutoFlow: string;
 } & TableProps, "$gridAutoFlow">;
-export declare const Td: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
-    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+export declare const Td: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue;
+} & {
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense";
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue;
 } & {
     $padding: number;
 } & {
     $color?: string;
 }, "$padding">;
 export declare const ElementHover: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Tr: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
+export declare const Tr: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
+} & {
     $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
 } & {
     $gridAutoFlow: string;
 } & {
     $padding: string;
 }, "$gridAutoFlow" | "$padding">;
-export declare const Th: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
-    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+export declare const Th: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue;
+} & {
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense";
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue;
 } & {
     $padding: number;
 } & {

package/package.json

@@ -21,11 +21,12 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^1.1.66",
+    "@pushwoosh/dumb-components": "^1.1.134",
     "@pushwoosh/kit-constants": "^1.6.9",
     "@pushwoosh/kit-helpers": "^4.9.1",
     "@pushwoosh/kit-icons": "^2.1.6",
     "@pushwoosh/kit-typography": "^1.7.3",
+    "@pushwoosh/rpc-v2-http-api-data": "^0.1.974",
     "@pushwoosh/spa-context": "^1.1.2",
     "idb-keyval": "^6.2.2",
     "react-hook-form": "^7.68.0",
@@ -48,5 +49,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.0.77"
+  "version": "1.0.88"
 }