nntc-ui 0.2.6 → 0.2.8

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

@@ -1,346 +0,0 @@
-.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

@@ -1,12 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

package/src/i18n/config.ts

@@ -1,23 +0,0 @@
-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

@@ -1,23 +0,0 @@
-{
-  "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

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

package/src/icons/AddIcon.tsx

@@ -1,9 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,10 +0,0 @@
-/* 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

@@ -1,9 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,10 +0,0 @@
-/* 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

@@ -1,10 +0,0 @@
-/* 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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,10 +0,0 @@
-/* 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

@@ -1,16 +0,0 @@
-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>
-);