nntc-ui 0.2.4 → 0.2.6

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

@@ -0,0 +1,174 @@
+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/{components/navigation/Tabs/index.d.ts → src/components/navigation/Tabs/index.ts}

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

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

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

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

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

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

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

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

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

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