nntc-ui 0.2.6 → 0.2.8

package/src/components/view/InputChip/inputChip.module.css

@@ -1,188 +0,0 @@
-.root {
-  display: inline-flex;
-  flex-shrink: 0;
-  gap: 6px;
-  align-items: center;
-  min-width: 0;
-  max-width: 100%;
-  overflow: hidden;
-  font-size: 12px;
-  font-weight: 300;
-  line-height: 20px;
-  color: var(--theme-text-primary);
-  letter-spacing: normal;
-  -webkit-user-select: none;
-  user-select: none;
-  border-radius: 16px;
-}
-
-.filled {
-  background-color: var(--theme-input-chip-bg);
-}
-
-.outlined {
-  outline: 1px solid var(--theme-input-border);
-  outline-offset: -1px;
-  background-color: transparent;
-}
-
-.small {
-  height: 20px;
-}
-
-.small.with-icon {
-  padding-left: 0;
-}
-
-.small:not(.with-icon) {
-  padding-left: 8px;
-}
-
-.small:has(.remove) {
-  padding-right: 1px;
-}
-
-.small:not(:has(.remove)) {
-  padding-right: 8px;
-}
-
-.small.with-icon:not(:has(.remove)) {
-  padding-right: 6px;
-}
-
-.medium,
-.large,
-.extraLarge {
-  height: 28px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.medium.with-icon,
-.large.with-icon,
-.extraLarge.with-icon {
-  padding-left: 4px;
-}
-
-.medium:not(.with-icon),
-.large:not(.with-icon),
-.extraLarge:not(.with-icon) {
-  padding-left: 12px;
-}
-
-.medium:has(.remove),
-.large:has(.remove),
-.extraLarge:has(.remove) {
-  padding-right: 6px;
-}
-
-.medium:not(:has(.remove)),
-.large:not(:has(.remove)),
-.extraLarge:not(:has(.remove)) {
-  padding-right: 12px;
-}
-
-.medium.with-icon:not(:has(.remove)),
-.large.with-icon:not(:has(.remove)),
-.extraLarge.with-icon:not(:has(.remove)) {
-  padding-right: 6px;
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.clickable.filled:hover:not(.disabled) {
-  background-color: var(--theme-input-chip-hover);
-}
-
-.clickable.filled:focus-visible:not(.disabled) {
-  outline: none;
-  background-color: var(--theme-input-chip-focus);
-}
-
-.clickable.outlined:hover:not(.disabled) {
-  outline-color: var(--theme-input-border-hover);
-  background-color: var(--theme-selection-hover);
-}
-
-.clickable.outlined:focus-visible:not(.disabled) {
-  outline: 2px solid var(--theme-focus);
-  outline-offset: -2px;
-}
-
-.disabled.filled {
-  background-color: var(--theme-input-chip-disabled-bg);
-}
-
-.disabled {
-  color: var(--theme-text-inactive);
-  pointer-events: none;
-}
-
-.text {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.icon {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  color: var(--theme-icon-primary);
-}
-
-.icon > svg {
-  width: 100%;
-  height: 100%;
-  fill: var(--theme-icon-primary);
-}
-
-.disabled .icon > svg {
-  fill: var(--theme-text-inactive);
-}
-
-.remove {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  margin: 0 0 0 auto;
-  color: var(--theme-icon-primary);
-  cursor: pointer;
-  outline: none;
-  background: none;
-  border: none;
-  border-radius: 50%;
-}
-
-.remove > svg {
-  width: 100%;
-  height: 100%;
-  fill: var(--theme-icon-primary);
-}
-
-.remove:hover:not(:disabled) {
-  background-color: var(--theme-icon-hover);
-}
-
-.remove:hover:not(:disabled) > svg {
-  fill: var(--theme-text-primary);
-}
-
-.remove:disabled {
-  cursor: default;
-}
-
-.disabled .remove > svg {
-  fill: var(--theme-text-inactive);
-}

package/src/components/view/Loader/Loader.stories.tsx

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Loader } from './Loader';
-
-const meta: Meta<typeof Loader> = {
-  title: 'View/Loader',
-  component: Loader,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    width: {
-      control: 'number',
-    },
-    height: {
-      control: 'number',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Loader>;
-
-export const Default: Story = {
-  args: {
-    width: 60,
-  },
-};
-
-export const Compact: Story = {
-  args: {
-    width: 24,
-    height: 32,
-  },
-};
-
-export const Large: Story = {
-  args: {
-    width: 100,
-    height: 145,
-  },
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
-      <Loader width={24} height={32} />
-      <Loader width={40} />
-      <Loader />
-      <Loader width={100} height={145} />
-    </div>
-  ),
-};

package/src/components/view/Loader/Loader.tsx

@@ -1,29 +0,0 @@
-import classnames from 'classnames';
-import { ImgHTMLAttributes, forwardRef } from 'react';
-
-import { UiProps } from '@models/UiProps';
-
-import loader from './loader.gif';
-import * as styles from './loader.module.css';
-
-export interface Props {
-  width?: number;
-  height?: number;
-}
-
-export const Loader = forwardRef<
-  HTMLImageElement,
-  UiProps<Props> & Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'height'>
->(function Loader({ width = 60, height = width * 1.5, className, classes, alt = 'loading', ...rest }, ref) {
-  return (
-    <img
-      ref={ref}
-      src={loader}
-      alt={alt}
-      width={width}
-      height={height}
-      className={classnames(styles.root, className, classes?.root)}
-      {...rest}
-    />
-  );
-});

package/src/components/view/Loader/loader.module.css

@@ -1,8 +0,0 @@
-.root {
-  display: inline-block;
-  flex-shrink: 0;
-  vertical-align: middle;
-  pointer-events: none;
-  -webkit-user-select: none;
-  user-select: none;
-}

package/src/components/view/Modal/Modal.stories.tsx

@@ -1,63 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-
-import { Button } from '@components/common/Button';
-import { UiProps } from '@models/UiProps';
-
-import { Modal } from './Modal';
-import * as styles from './modal.stories.module.css';
-
-const meta: Meta<typeof Modal> = {
-  title: 'View/Modal',
-  component: Modal,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    open: {
-      control: 'boolean',
-      description: 'Состояние открытия модального окна',
-    },
-    onClose: {
-      action: 'onClose',
-      description: 'Функция, выполняемая при закрытии модального окна',
-    },
-    root: {
-      control: false,
-      description: 'Root элемент для рендера модального окна (по умолчанию body)',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Modal>;
-
-type ModalWrapperProps = UiProps<{ open?: boolean; onClose?: () => void }>;
-
-const ModalWrapper = (args: ModalWrapperProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div className={styles.container}>
-      <Button componentSize="small" onClick={() => setIsOpen(true)}>
-        Открыть модальное окно
-      </Button>
-      <Modal {...args} open={isOpen} onClose={() => setIsOpen(false)}>
-        <div className={styles.content}>
-          <h3 className={styles.title}>Модальное окно</h3>
-          <p className={styles.text}>
-            Содержимое модального окна. Нажмите на затемненную область или кнопку "Закрыть", чтобы закрыть окно.
-          </p>
-          <Button componentSize="small" onClick={() => setIsOpen(false)}>
-            Закрыть
-          </Button>
-        </div>
-      </Modal>
-    </div>
-  );
-};
-
-export const Default: Story = {
-  render: (args) => <ModalWrapper {...args} />,
-};

package/src/components/view/Modal/Modal.tsx

@@ -1,58 +0,0 @@
-import classnames from 'classnames';
-import { HTMLProps, MutableRefObject, PropsWithChildren, forwardRef, useRef } from 'react';
-import { createPortal } from 'react-dom';
-
-import { UiProps } from '@models/UiProps';
-
-import * as styles from './modal.module.css';
-
-interface Props {
-  open: boolean;
-  onClose?: () => void;
-  root?: HTMLElement | MutableRefObject<HTMLElement | null> | null;
-}
-
-export const Modal = forwardRef<HTMLDivElement, PropsWithChildren<UiProps<Props> & HTMLProps<HTMLDivElement>>>(
-  function Modal({ open, onClose, root = document.body, children, classes, className, onClick, ...rest }, propRef) {
-    const overlayRef = useRef<HTMLDivElement>(null);
-    const modalRef = useRef<HTMLDivElement | null>(null);
-
-    const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
-      if (e.target === overlayRef.current || !modalRef.current?.contains(e.target as Node)) {
-        e.stopPropagation();
-        onClose?.();
-      }
-    };
-
-    if (!open || !children) {
-      return null;
-    }
-
-    const modalContent = (
-      <div ref={overlayRef} className={styles.overlay} onClick={handleOverlayClick}>
-        <div
-          {...rest}
-          ref={(node) => {
-            if (node) {
-              modalRef.current = node;
-            }
-            if (typeof propRef === 'function') {
-              propRef(node);
-            } else if (propRef) {
-              propRef.current = node;
-            }
-          }}
-          className={classnames(styles.modal, className, classes?.root)}
-          onClick={(e) => {
-            e.stopPropagation();
-            onClick?.(e);
-          }}
-        >
-          {children}
-        </div>
-      </div>
-    );
-
-    return createPortal(modalContent, root as HTMLElement);
-  },
-);

package/src/components/view/Modal/index.ts

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

package/src/components/view/Modal/modal.module.css

@@ -1,18 +0,0 @@
-.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  padding: 16px;
-  background-color: var(--theme-modal-shadow-background, rgba(0, 0, 0, 0.5));
-}
-
-.modal {
-  min-width: 200px;
-  max-width: 100%;
-}

package/src/components/view/Modal/modal.stories.module.css

@@ -1,18 +0,0 @@
-.container {
-  padding: 20px;
-}
-
-.content {
-  min-width: 300px;
-  padding: 24px;
-  background-color: var(--theme-modal-background);
-  border-radius: 8px;
-}
-
-.title {
-  margin: 0 0 16px 0;
-}
-
-.text {
-  margin: 0 0 16px 0;
-}

package/src/components/view/Pairs/Pairs.stories.tsx

@@ -1,101 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Pair } from './models/Pair';
-import { Pairs } from './Pairs';
-
-const meta: Meta<typeof Pairs> = {
-  title: 'View/Pairs',
-  component: Pairs,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    pairs: {
-      control: 'object',
-      description: 'Массив пар ключ-значение',
-    },
-    column1Width: {
-      control: 'text',
-      description: 'Ширина первой колонки',
-    },
-    column2Width: {
-      control: 'text',
-      description: 'Ширина второй колонки',
-    },
-    showBorder: {
-      control: 'boolean',
-      description: 'Показывать границы',
-    },
-    minRowHeight: {
-      control: 'text',
-      description: 'Минимальная высота строки',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Pairs>;
-
-const defaultPairs: Pair[] = [
-  { label: 'Имя', value: 'Иван Иванов' },
-  { label: 'Email', value: 'ivan@example.com' },
-  { label: 'Телефон', value: '+7 (999) 123-45-67' },
-  { label: 'Адрес', value: 'г. Москва, ул. Примерная, д. 1' },
-];
-
-export const Default: Story = {
-  args: {
-    pairs: defaultPairs,
-  },
-};
-
-export const WithBorders: Story = {
-  args: {
-    pairs: defaultPairs,
-    showBorder: true,
-  },
-};
-
-export const CustomWidths: Story = {
-  args: {
-    pairs: defaultPairs,
-    column1Width: '30%',
-    column2Width: '70%',
-  },
-};
-
-export const WithMinRowHeight: Story = {
-  args: {
-    pairs: defaultPairs,
-    minRowHeight: '50px',
-  },
-};
-
-export const LongContent: Story = {
-  args: {
-    pairs: [
-      {
-        label: 'Короткий текст',
-        value: 'Очень длинный текст, который может не поместиться в одну строку и потребует переноса',
-      },
-      {
-        label: 'Многострочный текст',
-        value: 'Этот текст содержит\nнесколько строк\nи демонстрирует\nмногострочное отображение',
-      },
-      { label: 'Специальные символы', value: '!@#$%^&*()_+-=[]{}|;:,.<>?' },
-    ],
-  },
-};
-
-export const WithCustomClass: Story = {
-  args: {
-    pairs: defaultPairs,
-    classes: {
-      root: 'custom-pairs-root',
-      rowContainer: 'custom-row-container',
-      labelsContainer: 'custom-labels-container',
-      valuesContainer: 'custom-values-container',
-    },
-  },
-};

package/src/components/view/Pairs/Pairs.tsx

@@ -1,63 +0,0 @@
-import classNames from 'classnames';
-import { HTMLAttributes, forwardRef } from 'react';
-
-import { UiProps } from '@models/UiProps';
-
-import { Typography } from '../Typography';
-import { Pair } from './models/Pair';
-import * as styles from './pairs.module.css';
-import { TypographyWithTooltip } from './ui/TypographyWithTooltip';
-
-interface Props {
-  pairs: Pair[];
-  column1Width?: string;
-  column2Width?: string;
-  showBorder?: boolean;
-  minRowHeight?: string;
-}
-
-export const Pairs = forwardRef<HTMLDivElement, UiProps<Props> & HTMLAttributes<HTMLDivElement>>(function Pairs(
-  { pairs, column1Width = '50%', column2Width = '50%', showBorder, minRowHeight, classes, className, style, ...rest },
-  ref,
-) {
-  return (
-    <div ref={ref} className={classNames(className, classes?.root)} style={style} {...rest}>
-      {pairs.map((pair, i) => (
-        <div
-          key={i}
-          style={{ minHeight: minRowHeight, display: 'flex' }}
-          className={classNames(classes?.rowContainer, {
-            [styles.rowContainerBorders]: showBorder,
-          })}
-        >
-          {pair && (
-            <>
-              <div
-                className={classNames(styles.labelsContainer, classes?.labelsContainer, {
-                  [styles.labelsWithBorders]: showBorder,
-                })}
-                style={{
-                  width: column1Width,
-                  minWidth: column1Width,
-                }}
-              >
-                <Typography className={styles.dimTypography}>{pair.label}</Typography>
-              </div>
-              <div
-                style={{
-                  width: column2Width,
-                  minWidth: column2Width,
-                }}
-                className={classNames(styles.valuesContainer, classes?.valuesContainer, {
-                  [styles.valuesWithBorders]: showBorder,
-                })}
-              >
-                <TypographyWithTooltip label={pair.value} />
-              </div>
-            </>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-});

package/src/components/view/Pairs/models/Pair.ts

@@ -1,4 +0,0 @@
-export type Pair = {
-  label: string;
-  value: string | number;
-} | null;

package/src/components/view/Pairs/pairs.module.css

@@ -1,35 +0,0 @@
-.row-container-borders:last-child {
-  border-bottom: 1px solid var(--theme-divider);
-}
-
-.labels-container {
-  display: flex;
-  align-items: center;
-  padding-right: 34px;
-}
-.labels-with-borders {
-  padding: 4px 12px 4px 12px;
-  border-top: 1px solid var(--theme-divider);
-  border-right: 1px solid var(--theme-divider);
-  border-left: 1px solid var(--theme-divider);
-}
-
-.values-container {
-  display: flex;
-  align-items: center;
-}
-.values-with-borders {
-  padding: 4px 12px 4px 12px;
-  border-top: 1px solid var(--theme-divider);
-  border-right: 1px solid var(--theme-divider);
-}
-
-.dim-typography {
-  color: var(--theme-text-secondary);
-}
-
-.trimmed-typography {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

package/src/components/view/Pairs/ui/TypographyWithTooltip.tsx

@@ -1,31 +0,0 @@
-import { useState } from 'react';
-
-import { Tooltip } from '@components/view/Tooltip';
-import { Typography } from '@components/view/Typography';
-
-interface Props {
-  label: string | number;
-}
-
-export function TypographyWithTooltip(props: Props) {
-  const { label } = props;
-
-  const [tooltip, setTooltip] = useState(label);
-
-  return (
-    <Tooltip label={tooltip}>
-      <Typography
-        style={{
-          textOverflow: 'ellipsis',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-        }}
-        onMouseEnter={(e: React.MouseEvent) => {
-          setTooltip(e.currentTarget.scrollWidth > e.currentTarget.clientWidth ? label : '');
-        }}
-      >
-        {label}
-      </Typography>
-    </Tooltip>
-  );
-}