nntc-ui 0.2.4 → 0.2.6

package/src/components/view/VirtualTable/virtualTable.module.css

@@ -0,0 +1,346 @@
+.root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  height: 100%;
+  --border-color: var(--theme-divider);
+}
+
+.table-container {
+  height: calc(100% + 16px);
+}
+
+.select-rows {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.select-rows input,
+.select-rows textarea {
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+.select-rows .tr {
+  cursor: pointer;
+}
+
+.table {
+  position: relative;
+  z-index: 0;
+  color: var(--theme-text-primary);
+}
+
+.th {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  padding: 6px 12px;
+  color: var(--theme-text-secondary);
+  background-color: var(--theme-table-header);
+}
+
+.root.borders-all .th,
+.root.borders-horizontal .th {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.root.borders-all .th-left-border,
+.root.borders-vertical .th-left-border {
+  border-left: 1px solid var(--border-color);
+}
+
+.root.borders-all .th-right-border,
+.root.borders-vertical .th-right-border {
+  border-right: 1px solid var(--border-color);
+}
+
+.th-hidden-column {
+  display: none;
+}
+
+.root.borders-all .first-th-row,
+.root.root.borders-horizontal .first-th-row {
+  border-top: 1px solid var(--border-color);
+}
+
+.th-cell {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.label {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.label.align-left {
+  flex: 1 1 0;
+  justify-content: flex-start;
+  width: 0;
+  text-align: left;
+}
+
+.label.align-right {
+  flex: 1 1 0;
+  justify-content: flex-end;
+  order: 2;
+  width: 0;
+  text-align: right;
+}
+
+.label.align-center {
+  justify-content: center;
+  text-align: center;
+}
+
+.tr {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  background-color: var(--theme-table-background);
+}
+
+.root.borders-all .tr,
+.root.root.borders-horizontal .tr {
+  border-top: 1px solid var(--border-color);
+}
+
+.root.borders-all .tr:last-child,
+.root.borders-horizontal .tr:last-child {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.td {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0;
+}
+
+.rowspan-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.root.borders-all .td:nth-child(2),
+.root.root.borders-vertical .td:nth-child(2) {
+  border-left: 1px solid var(--border-color);
+}
+
+.root.borders-all .td:not(:nth-last-child(2)),
+.root.root.borders-vertical .td:not(:nth-last-child(2)) {
+  border-right: 1px solid var(--border-color);
+}
+
+.even-row {
+  background-color: var(--theme-table-even-row);
+}
+
+.selected {
+  background-color: var(--theme-table-background);
+  background-image: linear-gradient(var(--theme-table-selected-row), var(--theme-table-selected-row));
+}
+
+.even-row.selected {
+  background-color: var(--theme-table-background);
+}
+
+.sticky {
+  position: sticky;
+  z-index: 2;
+  background-color: var(--theme-table-background);
+}
+
+.even-row .sticky {
+  background-color: var(--theme-table-even-row);
+}
+
+.selected .sticky,
+.even-row.selected .sticky {
+  background-color: var(--theme-table-background);
+}
+
+.selected .sticky::before {
+  background-color: var(--theme-table-selected-row);
+}
+
+.margin-left-changing {
+  background-color: var(--theme-table-header);
+}
+
+.sticky::before,
+.margin-left-changing::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  content: '';
+  background-color: var(--theme-overlay-4);
+}
+
+.right-border {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  z-index: 4;
+  width: 1px;
+  max-height: 100%;
+  content: '';
+  border-right: 1px solid var(--border-color);
+}
+
+.bottom-border {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 4;
+  max-width: 100%;
+  height: 1px;
+  content: '';
+  border-bottom: 1px solid var(--border-color);
+}
+
+.view-cell {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border: 2px solid transparent;
+}
+
+.view-cell.align-left {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.view-cell.align-right {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.view-cell.align-center {
+  justify-content: center;
+  text-align: center;
+}
+
+.view-cell.success {
+  color: var(--theme-success);
+  background-color: var(--theme-table-success);
+}
+
+.view-cell.error {
+  color: var(--theme-error);
+  background-color: var(--theme-table-error);
+}
+
+.view-cell.editable.success {
+  border-color: var(--theme-success);
+}
+
+.view-cell.editable.error {
+  border-color: var(--theme-error);
+}
+
+.view-span {
+  width: calc(100% - 20px);
+  margin: 4px 10px;
+  overflow-wrap: break-word;
+}
+
+.show-in-modal {
+  position: relative;
+  align-items: flex-start;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.show-in-modal::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 20px;
+  content: '';
+  background: var(--theme-table-background);
+  background: linear-gradient(rgba(0, 0, 0, 0) 0%, var(--theme-table-background) 65%);
+}
+
+.even-row .show-in-modal::after {
+  background: var(--theme-table-even-row);
+  background: linear-gradient(rgba(0, 0, 0, 0) 0%, var(--theme-table-even-row) 65%);
+}
+
+.selected .show-in-modal::after {
+  background: var(--theme-table-selected-row);
+  background: linear-gradient(rgba(0, 0, 0, 0) 0%, var(--theme-table-selected-row) 65%);
+}
+
+.clickable {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-style: dashed;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.modal-content {
+  width: 500px;
+}
+
+.vertical-align-flex-start {
+  align-items: flex-start;
+  white-space: pre-wrap;
+}
+
+.vertical-align-center {
+  align-items: flex-start;
+  white-space: pre-wrap;
+}
+
+.vertical-align-flex-end {
+  align-items: flex-start;
+  white-space: pre-wrap;
+}
+
+.row-button-trigger {
+  height: auto !important;
+}
+
+.root.medium .table {
+  font-size: var(--text-body2-size);
+  line-height: var(--text-body2-height);
+}
+
+.root.small .table {
+  font-size: calc(var(--text-body2-size) - 2px);
+  line-height: calc(var(--text-body2-height) - 2px);
+}
+
+.root.small .th {
+  font-size: calc(var(--text-body2-size) - 4px);
+  line-height: calc(var(--text-body2-height) - 4px);
+}
+
+.input {
+  border-radius: 0 !important;
+}

package/src/hooks/useCompatId.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+
+type ReactWithOptionalUseId = typeof React & { useId?: () => string };
+
+export function useCompatId(): string {
+  const react = React as ReactWithOptionalUseId;
+  if (typeof react.useId === 'function') {
+    return react.useId();
+  }
+  return useMemo(() => `nntc-ui-${Math.random().toString(36).slice(2, 11)}`, []);
+}

package/src/hooks/useTranslation.ts

@@ -0,0 +1,15 @@
+import { useTranslation as useTranslationOriginal } from 'react-i18next';
+
+export const useTranslation = () => {
+  const { t, i18n } = useTranslationOriginal();
+
+  const changeLanguage = (language: 'ru' | 'en') => {
+    i18n.changeLanguage(language);
+  };
+
+  return {
+    t,
+    currentLanguage: i18n.language as 'ru' | 'en',
+    changeLanguage,
+  };
+};

package/src/hooks/window/hooks/useWindowSize.ts

@@ -0,0 +1,14 @@
+import { useLayoutEffect, useState } from 'react';
+
+export const useWindowSize = () => {
+  const [size, setSize] = useState([0, 0]);
+  useLayoutEffect(() => {
+    function updateSize() {
+      setSize([window.innerWidth, window.innerHeight]);
+    }
+    window.addEventListener('resize', updateSize);
+    updateSize();
+    return () => window.removeEventListener('resize', updateSize);
+  }, []);
+  return size;
+};

package/src/hooks/window/index.ts

@@ -0,0 +1 @@
+export { useWindowSize } from './hooks/useWindowSize';

package/src/i18n/config.ts

@@ -0,0 +1,23 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import enTranslations from './locales/en.json';
+import ruTranslations from './locales/ru.json';
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: {
+      translation: enTranslations,
+    },
+    ru: {
+      translation: ruTranslations,
+    },
+  },
+  lng: 'ru', // язык по умолчанию
+  fallbackLng: 'en', // запасной язык
+  interpolation: {
+    escapeValue: false, // не экранировать HTML
+  },
+});
+
+export { i18n };

package/src/i18n/locales/en.json

@@ -0,0 +1,23 @@
+{
+  "common": {
+    "search": {
+      "placeholder": "Search..."
+    },
+    "multiSelect": {
+      "selectedItems": "Selected items"
+    },
+    "checklist": {
+      "selected": "Selected",
+      "cancel": "Cancel",
+      "selectAll": "Select all"
+    }
+  },
+  "view": {
+    "virtualTable": {
+      "sort": "Sort",
+      "AZ": "Asc",
+      "ZA": "Desc",
+      "sortAndFiltration": "Sort and filtration"
+    }
+  }
+}

package/src/i18n/locales/ru.json

@@ -0,0 +1,23 @@
+{
+  "common": {
+    "search": {
+      "placeholder": "Поиск..."
+    },
+    "multiSelect": {
+      "selectedItems": "Выбрано элементов"
+    },
+    "checklist": {
+      "selected": "Выбранное",
+      "cancel": "Отменить",
+      "selectAll": "Выбрать все"
+    }
+  },
+  "view": {
+    "virtualTable": {
+      "sort": "Сортировка",
+      "AZ": "По возрастанию",
+      "ZA": "По убыванию",
+      "sortAndFiltration": "Сортировка и фильтрация"
+    }
+  }
+}

package/src/icons/AddIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const AddIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+  </Icon>
+);

package/src/icons/AlertIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const AlertIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path
+      d={
+        'M23 21.5H1L12 2.5L23 21.5ZM4.47005 19.5H19.53L12 6.48959L4.47005 19.5Z' +
+        'M13 18.5H11V16.5H13V18.5ZM13 10.5V14.5H11V10.5H13Z'
+      }
+    />
+  </Icon>
+);

package/src/icons/ArrowDropDownIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const ArrowDropDownIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M7 10l5 5 5-5z" />
+  </Icon>
+);

package/src/icons/ArrowDropUpIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const ArrowDropUpIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M7 14l5-5 5 5z" />
+  </Icon>
+);

package/src/icons/AttachIcon.tsx

@@ -0,0 +1,10 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const AttachIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
+  </Icon>
+);

package/src/icons/BarChartIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const BarChartIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z" />
+  </Icon>
+);

package/src/icons/BookmarkAddIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const BookmarkAddIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path
+      d={`M17 11v6.97l-5-2.14-5 2.14V5h6V3H7c-1.1 0-2
+      .9-2 2v16l7-3 7 3V11h-2zm4-4h-2v2h-2V7h-2V5h2V3h2v2h2v2z`}
+    ></path>
+  </Icon>
+);

package/src/icons/BookmarkIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const BookmarkIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15-5-2.18L7 18V5h10v13z"></path>
+  </Icon>
+);

package/src/icons/CheckboxDeselectedIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const CheckboxDeselectedIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" />
+  </Icon>
+);

package/src/icons/CheckboxIcon.tsx

@@ -0,0 +1,10 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const CheckboxIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+  </Icon>
+);

package/src/icons/CheckboxSeveralIcon.tsx

@@ -0,0 +1,10 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const CheckboxSeveralIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2zm0-4H7V7h10v2z" />
+  </Icon>
+);

package/src/icons/ChevronDownIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const ChevronDownIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M16.59 8.29498L12 12.875L7.41 8.29498L6 9.70498L12 15.705L18 9.70498L16.59 8.29498Z" />
+  </Icon>
+);

package/src/icons/ChevronLeftIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const ChevronLeftIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+  </Icon>
+);

package/src/icons/ChevronRightIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const ChevronRightIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+  </Icon>
+);

package/src/icons/ChevronUpIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const ChevronUpIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M12 8.29498L6 14.295L7.41 15.705L12 11.125L16.59 15.705L18 14.295L12 8.29498Z" />
+  </Icon>
+);

package/src/icons/CircleFilledIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const CircleFilledIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z" />
+  </Icon>
+);

package/src/icons/CloseIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const CloseIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+  </Icon>
+);

package/src/icons/DateRangeIcon.tsx

@@ -0,0 +1,10 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const DateRangeIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 002 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zM9 14H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm-8 4H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2z" />
+  </Icon>
+);

package/src/icons/DeleteIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon, IconProps } from './Icon';
+
+export const DeleteIcon: React.FC<IconProps> = (props) => (
+  <Icon {...props}>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d={
+        'M14.5 3H9.5L8.5 4H5V6H19V4H15.5L14.5 3ZM16 9V19H8V9H16ZM6' +
+        ' 7H18V19C18 20.1 17.1 21 16 21H8C6.9 21 6 20.1 6 19V7Z'
+      }
+    />
+  </Icon>
+);