nntc-ui 0.2.4 → 0.2.6

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

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

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

@@ -0,0 +1,29 @@
+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/{components/view/Loader/index.d.ts → src/components/view/Loader/index.ts}

@@ -1,2 +1 @@
 export { Loader } from './Loader';
-//# sourceMappingURL=index.d.ts.map

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,63 @@
+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/{components/view/Pairs/index.d.ts → src/components/view/Pairs/index.ts}

@@ -1,3 +1,2 @@
 export { Pairs } from './Pairs';
 export type { Pair } from './models/Pair';
-//# sourceMappingURL=index.d.ts.map

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

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

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

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

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