nntc-ui 0.2.6 → 0.2.8

package/src/components/navigation/Tabs/Tabs.tsx

@@ -1,174 +0,0 @@
-import classnames from 'classnames';
-import { ForwardedRef, HTMLAttributes, ReactElement, forwardRef, useEffect, useState } from 'react';
-
-import { Tooltip } from '@components/view/Tooltip';
-import { ChipSize } from '@models/ChipSize';
-import { UiProps } from '@models/UiProps';
-
-import { Item } from './models/Item';
-import * as styles from './tabs.module.css';
-
-interface Props<T> {
-  items: Item<T>[];
-  defaultSelected?: T;
-  onChange?: (newValue: T) => void;
-  componentSize?: ChipSize;
-  filled?: boolean;
-  isVertical?: boolean;
-  disableBorder?: boolean;
-  allowDeselect?: boolean;
-  showTooltips?: boolean;
-  /** Использовать внешнее состояние вместо внутреннего.
-   *  При включении компонент не управляет состоянием самостоятельно, а использует переданные value и onChange
-   * */
-  useExternalState?: boolean;
-  /** Текущее значение выбранной вкладки. Используется только при useExternalState=true */
-  value?: T;
-}
-
-type TabsProps<T> = UiProps<Props<T>> & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
-
-/**
- * Компонент вкладок с поддержкой как внутреннего, так и внешнего состояния
- * */
-function TabsInner<T>(
-  {
-    items,
-    defaultSelected,
-    onChange,
-    componentSize = 'medium',
-    filled = false,
-    isVertical = false,
-    disableBorder = false,
-    allowDeselect = false,
-    showTooltips = false,
-    useExternalState = false,
-    value,
-    classes,
-    className,
-    ...rest
-  }: TabsProps<T>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const [isMounted, setIsMounted] = useState<boolean>(false);
-  const [selectedTab, setSelectedTab] = useState<T | undefined>(defaultSelected);
-
-  const currentValue = useExternalState ? value : selectedTab;
-
-  const handleClick = (item: Item<T>) => () => {
-    if (item.isDisabled) {
-      return;
-    }
-
-    if (item.onClick) {
-      item.onClick();
-      return;
-    }
-
-    if (useExternalState) {
-      if (allowDeselect && currentValue === item.value) {
-        onChange?.(undefined as T);
-      } else {
-        onChange?.(item.value);
-      }
-    } else {
-      if (allowDeselect && selectedTab === item.value) {
-        setSelectedTab(undefined);
-      } else {
-        setSelectedTab(item.value);
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (isMounted && !useExternalState) {
-      onChange?.(selectedTab as T);
-    }
-    if (!isMounted) {
-      setIsMounted(true);
-    }
-  }, [selectedTab, useExternalState]);
-
-  return (
-    <div
-      ref={ref}
-      className={classnames(
-        styles.root,
-        filled && styles.filled,
-        isVertical && styles.vertical,
-        disableBorder && styles.disableBorder,
-        styles[componentSize as keyof typeof styles],
-        className,
-        classes?.root,
-      )}
-      {...rest}
-    >
-      {items.map((item) => {
-        const isButton = !!item.onClick;
-        const isSelected = !isButton && currentValue === item.value;
-
-        const tabContent = (
-          <div
-            key={`tab-${item.value}`}
-            className={classnames(
-              styles.tab,
-              filled && styles.tabFilled,
-              isVertical && styles.tabVertical,
-              disableBorder && styles.disableBorder,
-              isSelected ? styles.selected : undefined,
-              isSelected && filled ? styles.selectedFilled : undefined,
-              item.isDisabled && styles.disabled,
-              classes?.tab,
-              isSelected ? classes?.tabSelected : undefined,
-              item.isDisabled ? classes?.tabDisabled : undefined,
-            )}
-            onClick={handleClick(item)}
-          >
-            <div
-              className={classnames(
-                styles.tabTitle,
-                showTooltips && item.icon && styles.iconOnly,
-                classes?.tabTitle,
-                isSelected ? classes?.tabSelectedTitle : undefined,
-              )}
-            >
-              {item.icon && (
-                <span className={styles.tabIcon}>
-                  {typeof item.icon === 'string' ? (
-                    <span className={styles.tabIcon} dangerouslySetInnerHTML={{ __html: item.icon }} />
-                  ) : (
-                    item.icon
-                  )}
-                </span>
-              )}
-              {!showTooltips && item.name && <span title={item.name}>{item.name}</span>}
-            </div>
-            <div
-              className={classnames(
-                styles.tabBorder,
-                isVertical && styles.tabBorderVertical,
-                disableBorder && styles.disableBorder,
-                classes?.tabBorder,
-                isSelected ? classes?.tabSelectedBorder : undefined,
-              )}
-            ></div>
-          </div>
-        );
-
-        if (showTooltips && item.name) {
-          return (
-            <Tooltip key={`tab-${item.value}`} label={item.name} placement={isVertical ? 'right' : 'top'}>
-              {tabContent}
-            </Tooltip>
-          );
-        }
-
-        return tabContent;
-      })}
-    </div>
-  );
-}
-
-export const Tabs = forwardRef(TabsInner) as <T>(
-  props: TabsProps<T> & { ref?: ForwardedRef<HTMLDivElement> },
-) => ReactElement;

package/src/components/navigation/Tabs/models/Item.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface Item<T> {
-  name?: string;
-  value: T;
-  icon?: ReactNode | string;
-  onClick?: () => void;
-  isDisabled?: boolean;
-}

package/src/components/navigation/Tabs/tabs.module.css

@@ -1,179 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  border-bottom: 1px solid var(--theme-divider);
-}
-
-.root.vertical {
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: flex-start;
-  width: auto;
-  border-right: 1px solid var(--theme-divider);
-  border-bottom: none;
-}
-
-.root.disable-border {
-  border: none;
-}
-
-.medium {
-  gap: 6px;
-}
-
-.small {
-  gap: 0;
-}
-
-.root.filled {
-  background-color: rgba(255, 255, 255, 0.08);
-}
-
-.tab {
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-}
-
-.tab.tab-vertical {
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.medium .tab {
-  gap: 6px;
-  padding-top: 7px;
-}
-
-.small .tab {
-  gap: 3px;
-  padding-top: 3px;
-}
-
-.vertical.medium .tab {
-  padding: 7px 0 7px 7px;
-}
-
-.vertical.small .tab {
-  padding: 4px 0 4px 3px;
-}
-
-.medium .tab.disable-border {
-  gap: 7px;
-}
-
-.tab.tab-filled {
-  transition: background-color 0.2s ease;
-}
-
-.tab.tab-filled:hover {
-  background-color: rgba(255, 255, 255, 0.04);
-}
-
-.tab.selected-filled {
-  background-color: rgba(123, 211, 246, 0.08);
-}
-
-.tab-title {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.medium .tab-title {
-  padding: 0 16px;
-}
-
-.small .tab-title {
-  padding: 0 12px;
-}
-
-.tab-title.icon-only {
-  gap: 0;
-  padding: 0 8px;
-}
-
-.vertical.medium .tab-title {
-  padding: 0 8px;
-}
-
-.vertical.small .tab-title {
-  padding: 0;
-}
-
-.vertical.medium .tab-title.icon-only {
-  padding: 0 4px;
-}
-
-.vertical.small .tab-title.icon-only {
-  padding: 0;
-}
-
-.tab-title > span {
-  font-size: var(--text-subtitle2-size);
-  font-weight: var(--text-subtitle2-weight);
-  line-height: var(--text-subtitle2-height);
-  color: var(--theme-text-secondary);
-  letter-spacing: var(--text-subtitle2-letter);
-}
-
-.tab-border {
-  width: 100%;
-  border-bottom: 2px solid transparent;
-}
-
-.tab.selected > .tab-border {
-  border-bottom-color: var(--theme-focus);
-}
-
-.tab-border.tab-border-vertical {
-  width: auto;
-  height: 24px;
-  border-right: 2px solid transparent;
-  border-bottom: none;
-}
-
-.tab.selected > .tab-border.tab-border-vertical {
-  border-right-color: var(--theme-focus);
-}
-
-.tab.selected > .tab-border.disable-border {
-  border-color: transparent;
-}
-
-.tab.selected > .tab-title > span {
-  color: var(--theme-text-primary);
-}
-
-.tab-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: var(--theme-text-secondary);
-}
-
-.tab.selected .tab-icon {
-  color: var(--theme-text-primary);
-}
-
-.tab.disabled {
-  color: var(--theme-text-inactive);
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.tab.disabled .tab-title > span {
-  color: var(--theme-text-inactive);
-}
-
-.tab.disabled .tab-icon {
-  color: var(--theme-text-inactive);
-}

package/src/components/navigation/Tabs/tabs.stories.module.css

@@ -1,3 +0,0 @@
-.tabs-story-wrapper {
-  width: 600px;
-}

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

@@ -1,99 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from '@components/common/Button';
-
-import { Card } from './Card';
-
-const meta: Meta<typeof Card> = {
-  title: 'View/Card',
-  component: Card,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    surfaceType: {
-      control: 'select',
-      options: ['primary', 'panel', 'modal'],
-    },
-    componentSize: {
-      control: 'select',
-      options: ['small', 'medium'],
-    },
-    title: {
-      control: 'text',
-    },
-    actions: {
-      control: 'text',
-    },
-    headerOverlay: {
-      control: 'boolean',
-    },
-    fullSizeBody: {
-      control: 'boolean',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Card>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <div>
-        <p>Содержимое карточки</p>
-      </div>
-    ),
-  },
-};
-
-export const WithTitle: Story = {
-  args: {
-    title: 'Панель',
-    children: (
-      <div>
-        <p>Карточка с заголовком</p>
-      </div>
-    ),
-  },
-};
-
-export const WithActions: Story = {
-  args: {
-    title: 'Карточка с действиями',
-    actions: <Button componentSize="small">Действие</Button>,
-    children: (
-      <div>
-        <p>Карточка с заголовком и действиями</p>
-      </div>
-    ),
-  },
-};
-
-export const ModalType: Story = {
-  args: {
-    surfaceType: 'modal',
-    title: 'Модальное окно',
-    children: (
-      <div>
-        <p>Карточка с типом modal</p>
-      </div>
-    ),
-  },
-};
-
-export const PaddedBody: Story = {
-  args: {
-    title: 'Карточка с отступами',
-    fullSizeBody: false,
-    children: <p>Содержимое с внутренними отступами body</p>,
-  },
-};
-
-export const PaddedBodyNoHeader: Story = {
-  args: {
-    fullSizeBody: false,
-    children: <p>Карточка без хедера — увеличенный верхний отступ</p>,
-  },
-};

package/src/components/view/Card/Card.tsx

@@ -1,66 +0,0 @@
-import classNames from 'classnames';
-import { HTMLAttributes, PropsWithChildren, ReactNode, forwardRef } from 'react';
-
-import { Surface } from '@components/layout/Surface';
-import { ChipSize } from '@models/ChipSize';
-import { SurfaceType } from '@models/SurfaceType';
-import { UiProps } from '@models/UiProps';
-
-import * as styles from './card.module.css';
-
-type Style = keyof typeof styles;
-
-interface Props {
-  surfaceType?: SurfaceType;
-  componentSize?: ChipSize;
-  title?: ReactNode;
-  actions?: ReactNode;
-  headerOverlay?: boolean;
-  fullSizeBody?: boolean;
-}
-
-export const Card = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren<UiProps<Props>> & Omit<HTMLAttributes<HTMLDivElement>, 'title'>
->(function Card(
-  {
-    surfaceType = 'primary',
-    componentSize = 'medium',
-    title,
-    actions,
-    children,
-    classes,
-    className,
-    headerOverlay = true,
-    fullSizeBody = false,
-    ...rest
-  },
-  ref,
-) {
-  const hasHeader = !!title || !!actions;
-
-  return (
-    <Surface
-      ref={ref}
-      type={surfaceType}
-      className={className}
-      classes={{ root: classNames(styles.root, styles[componentSize as Style], classes?.root) }}
-      {...rest}
-    >
-      {hasHeader && (
-        <div className={classNames(styles.header, headerOverlay && styles.headerOverlay, classes?.header)}>
-          {title ?? <div></div>}
-          {!!actions && <div className={classNames(styles.actions, classes?.actions)}>{actions}</div>}
-        </div>
-      )}
-      <div
-        className={classNames(
-          fullSizeBody ? styles.bodyFullSize : hasHeader ? styles.bodyPadded : styles.bodyPaddedNoHeader,
-          classes?.body,
-        )}
-      >
-        {children}
-      </div>
-    </Surface>
-  );
-});

package/src/components/view/Card/card.module.css

@@ -1,50 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  height: 100%;
-  padding: 0;
-  border-radius: 4px;
-}
-
-.header {
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 16px 8px 16px;
-}
-
-.header-overlay {
-  background-color: var(--theme-overlay-4);
-}
-
-.root.small .header {
-  padding: 8px 8px 4px 8px;
-}
-
-.actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.body-full-size {
-  padding: 0;
-}
-
-.root.medium .body-padded {
-  padding: 8px 16px 16px 16px;
-}
-
-.root.small .body-padded {
-  padding: 4px 8px 8px 8px;
-}
-
-.root.medium .body-padded-no-header {
-  padding: 16px;
-}
-
-.root.small .body-padded-no-header {
-  padding: 8px;
-}

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

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