nntc-ui 0.2.6 → 0.2.8

package/src/components/view/Tooltip/tooltip.module.css

@@ -1,93 +0,0 @@
-.trigger {
-  display: inline-flex;
-  align-items: center;
-  height: 100%;
-}
-
-.content {
-  z-index: 999;
-  max-width: 280px;
-  padding: 6px 8px;
-  font-size: var(--text-caption-size);
-  font-weight: var(--text-caption-weight);
-  line-height: var(--text-caption-height);
-  color: var(--theme-alert-default-color);
-  text-align: center;
-  letter-spacing: var(--text-caption-letter);
-  background-color: var(--theme-alert-default-background);
-  border-radius: 4px;
-  box-shadow:
-    0px 1px 3px 0px rgba(0, 0, 0, 0.2),
-    0px 2px 1px 0px rgba(0, 0, 0, 0.12),
-    0px 1px 1px 0px rgba(0, 0, 0, 0.14);
-}
-
-.content.success {
-  color: var(--theme-alert-success-color);
-  background-color: var(--theme-alert-success-background);
-}
-
-.content.warning {
-  color: var(--theme-alert-warning-color);
-  background-color: var(--theme-alert-warning-background);
-}
-
-.content.error {
-  color: var(--theme-alert-error-color);
-  background-color: var(--theme-alert-error-background);
-}
-
-.content.info {
-  color: var(--theme-alert-info-color);
-  background-color: var(--theme-alert-info-background);
-}
-
-.content > .arrow {
-  width: 6px;
-  height: 6px;
-  --arrow-color: var(--theme-alert-default-background);
-}
-
-.content.success > .arrow {
-  --arrow-color: var(--theme-alert-success-background);
-}
-
-.content.warning > .arrow {
-  --arrow-color: var(--theme-alert-warning-background);
-}
-
-.content.error > .arrow {
-  --arrow-color: var(--theme-alert-error-background);
-}
-
-.content.info > .arrow {
-  --arrow-color: var(--theme-alert-info-background);
-}
-
-.content > .arrow.top-arrow {
-  border-top: 6px solid var(--arrow-color);
-  border-right: 6px solid transparent;
-  border-left: 6px solid transparent;
-  transform: translate(0, 6px);
-}
-
-.content > .arrow.bottom-arrow {
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid var(--arrow-color);
-  border-left: 6px solid transparent;
-  transform: translate(0, -6px);
-}
-
-.content > .arrow.left-arrow {
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-left: 6px solid var(--arrow-color);
-  transform: translate(6px, 0);
-}
-
-.content > .arrow.right-arrow {
-  border-top: 6px solid transparent;
-  border-right: 6px solid var(--arrow-color);
-  border-bottom: 6px solid transparent;
-  transform: translate(-6px, 0);
-}

package/src/components/view/Tooltip/ui/TooltipContent/TooltipContent.tsx

@@ -1,88 +0,0 @@
-import { FloatingPortal, useMergeRefs } from '@floating-ui/react';
-import classnames from 'classnames';
-import { HTMLProps, forwardRef, useContext } from 'react';
-
-import { TooltipContext } from '../TooltipProvider/constants/TooltipContext';
-
-interface Props {
-  styles?: {
-    [key: string]: string;
-  };
-}
-
-export const TooltipContent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement> & Props>(function TooltipContent(
-  { styles, style, children, ...props },
-  propRef,
-) {
-  const context = useContext(TooltipContext);
-  if (!context) {
-    return null;
-  }
-
-  const { context: floatingContext, ...otherContext } = context;
-
-  const ref = useMergeRefs([otherContext.refs.setFloating, propRef]);
-
-  if (!floatingContext.open) return null;
-
-  let arrowClassName = '';
-  let invertX: boolean | null = null;
-  let invertY: boolean | null = null;
-  switch (otherContext.placement) {
-    case 'top':
-    case 'top-end':
-    case 'top-start':
-      arrowClassName = 'topArrow';
-      invertY = false;
-      break;
-    case 'bottom':
-    case 'bottom-end':
-    case 'bottom-start':
-      arrowClassName = 'bottomArrow';
-      invertY = true;
-      break;
-    case 'left':
-    case 'left-end':
-    case 'left-start':
-      arrowClassName = 'leftArrow';
-      invertX = true;
-      break;
-    case 'right':
-    case 'right-end':
-    case 'right-start':
-      arrowClassName = 'rightArrow';
-      invertX = false;
-      break;
-
-    default:
-      break;
-  }
-
-  return (
-    <FloatingPortal root={otherContext.root}>
-      <div
-        ref={ref}
-        style={{
-          ...otherContext.floatingStyles,
-          ...style,
-        }}
-        {...otherContext.getFloatingProps(props)}
-      >
-        {children}
-        {!otherContext.withoutArrow && (
-          <div
-            className={styles && classnames(styles.arrow, styles[arrowClassName as keyof typeof styles])}
-            ref={otherContext.arrowRef}
-            style={{
-              position: 'absolute',
-              left: invertY === null && invertX === false ? 0 : otherContext.middlewareData.arrow?.x,
-              right: invertY === null && invertX === true ? 0 : otherContext.middlewareData.arrow?.x,
-              top: invertX === null && invertY === true ? 0 : otherContext.middlewareData.arrow?.y,
-              bottom: invertX === null && invertY === false ? 0 : otherContext.middlewareData.arrow?.y,
-            }}
-          />
-        )}
-      </div>
-    </FloatingPortal>
-  );
-});

package/src/components/view/Tooltip/ui/TooltipProvider/TooltipProvider.tsx

@@ -1,13 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import { TooltipContext } from './constants/TooltipContext';
-import { useTooltip } from './hooks/useTooltip';
-import { TooltipOptions } from './models/TooltipOptions';
-
-export const TooltipProvider = (props: PropsWithChildren<TooltipOptions>) => {
-  const { children, ...options } = props;
-
-  const tooltip = useTooltip(options);
-
-  return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
-};

package/src/components/view/Tooltip/ui/TooltipProvider/constants/TooltipContext.ts

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-import { TooltipState } from '../models/TooltipState';
-
-export const TooltipContext = createContext<TooltipState>(null);

package/src/components/view/Tooltip/ui/TooltipProvider/hooks/useTooltip.ts

@@ -1,76 +0,0 @@
-import {
-  arrow,
-  autoUpdate,
-  flip,
-  offset,
-  shift,
-  useDismiss,
-  useFloating,
-  useFocus,
-  useHover,
-  useInteractions,
-  useRole,
-} from '@floating-ui/react';
-import { useMemo, useState } from 'react';
-
-import { TooltipOptions } from '../models/TooltipOptions';
-
-export function useTooltip(props: TooltipOptions = {}) {
-  const {
-    initialOpen = false,
-    placement = 'top',
-    open: controlledOpen,
-    onOpenChange: setControlledOpen,
-    withoutArrow,
-    arrowRef,
-    root,
-  } = props;
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
-
-  const open = controlledOpen ?? uncontrolledOpen;
-  const setOpen = setControlledOpen ?? setUncontrolledOpen;
-
-  const data = useFloating({
-    placement,
-    open,
-    onOpenChange: setOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      offset(12),
-      flip({
-        crossAxis: placement.includes('-'),
-        fallbackAxisSideDirection: 'start',
-        padding: 5,
-      }),
-      shift({ padding: 5 }),
-      ...(!withoutArrow && arrowRef?.current ? [arrow({ element: arrowRef })] : []),
-    ],
-  });
-
-  const { context } = data;
-
-  const hover = useHover(context, {
-    move: false,
-    enabled: controlledOpen == null,
-  });
-  const focus = useFocus(context, {
-    enabled: controlledOpen == null,
-  });
-  const dismiss = useDismiss(context);
-  const role = useRole(context, { role: 'tooltip' });
-
-  const interactions = useInteractions([hover, focus, dismiss, role]);
-
-  return useMemo(
-    () => ({
-      open,
-      setOpen,
-      withoutArrow,
-      arrowRef,
-      root,
-      ...interactions,
-      ...data,
-    }),
-    [open, setOpen, interactions, data, root],
-  );
-}

package/src/components/view/Tooltip/ui/TooltipProvider/models/TooltipOptions.ts

@@ -1,12 +0,0 @@
-import { Placement } from '@floating-ui/react';
-import { MutableRefObject, RefObject } from 'react';
-
-export interface TooltipOptions {
-  initialOpen?: boolean;
-  placement?: Placement;
-  root?: HTMLElement | MutableRefObject<HTMLElement | null> | null;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  withoutArrow?: boolean;
-  arrowRef?: RefObject<HTMLDivElement>;
-}

package/src/components/view/Tooltip/ui/TooltipTrigger/TooltipTrigger.tsx

@@ -1,36 +0,0 @@
-import { useMergeRefs } from '@floating-ui/react';
-import { HTMLProps, cloneElement, forwardRef, isValidElement, useContext } from 'react';
-
-import { TooltipContext } from '../TooltipProvider/constants/TooltipContext';
-
-export const TooltipTrigger = forwardRef<HTMLElement, HTMLProps<HTMLElement> & { wrapTrigger?: boolean }>(
-  function TooltipTrigger({ children, wrapTrigger = false, ...props }, propRef) {
-    const context = useContext(TooltipContext);
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const childrenRef = (children as any).ref;
-    const ref = useMergeRefs([context?.refs.setReference, propRef, childrenRef]);
-
-    if (!context) {
-      return null;
-    }
-
-    if (!wrapTrigger && isValidElement(children)) {
-      return cloneElement(
-        children,
-        context.getReferenceProps({
-          ref,
-          ...props,
-          ...(children.props as object),
-          'data-state': context.open ? 'open' : 'closed',
-        } as object),
-      );
-    }
-
-    return (
-      <div ref={ref} data-state={context.open ? 'open' : 'closed'} {...context.getReferenceProps(props)}>
-        {children}
-      </div>
-    );
-  },
-);

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

@@ -1,174 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-
-import { CircleFilledIcon, WellIcon } from '@icons/index';
-
-import { Item } from './models/Item';
-import TreeView from './TreeView';
-
-const meta: Meta<typeof TreeView> = {
-  title: 'View/TreeView',
-  component: TreeView,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    data: {
-      control: 'object',
-      description: 'Данные для отображения в дереве',
-    },
-    selected: {
-      control: 'object',
-      description: 'Массив выбранных элементов',
-    },
-    withSearch: {
-      control: 'boolean',
-      description: 'Показывать поле поиска',
-    },
-    onSelect: {
-      action: 'selected',
-      description: 'Обработчик выбора элемента',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof TreeView>;
-
-const defaultData: Item[] = [
-  {
-    id: '1',
-    name: 'Документы',
-    children: [
-      {
-        id: '1-1',
-        name: 'Работа',
-        children: [
-          { id: '1-1-1', name: 'Отчеты' },
-          { id: '1-1-2', name: 'Презентации' },
-        ],
-      },
-      {
-        id: '1-2',
-        name: 'Личное',
-        children: [
-          { id: '1-2-1', name: 'Фото' },
-          { id: '1-2-2', name: 'Видео' },
-        ],
-      },
-    ],
-  },
-  {
-    id: '2',
-    name: 'Проекты',
-    children: [
-      { id: '2-1', name: 'Проект 1' },
-      { id: '2-2', name: 'Проект 2' },
-    ],
-  },
-];
-
-const startIcons = {
-  '1': <CircleFilledIcon />,
-  '1-1': <CircleFilledIcon />,
-  '1-2': <CircleFilledIcon />,
-  '2': <CircleFilledIcon />,
-  '1-1-1': <WellIcon />,
-  '1-1-2': <WellIcon />,
-  '1-2-1': <WellIcon />,
-  '1-2-2': <WellIcon />,
-  '2-1': <WellIcon />,
-  '2-2': <WellIcon />,
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TreeViewWrapper = (args: any) => {
-  const [selected, setSelected] = useState<string[]>([]);
-
-  const handleSelect = (id: string) => {
-    setSelected((prev) => {
-      if (prev.includes(id)) {
-        return prev.filter((item) => item !== id);
-      }
-      return [...prev, id];
-    });
-  };
-
-  return (
-    <div style={{ width: '300px', border: '1px solid #ccc', padding: '16px' }}>
-      <TreeView {...args} selected={selected} onSelect={handleSelect} />
-    </div>
-  );
-};
-
-export const Default: Story = {
-  render: (args) => <TreeViewWrapper {...args} />,
-  args: {
-    data: defaultData,
-    withSearch: true,
-  },
-};
-
-export const WithIcons: Story = {
-  render: (args) => <TreeViewWrapper {...args} />,
-  args: {
-    data: defaultData,
-    startIcons,
-    withSearch: true,
-  },
-};
-
-export const WithoutSearch: Story = {
-  render: (args) => <TreeViewWrapper {...args} />,
-  args: {
-    data: defaultData,
-    withSearch: false,
-  },
-};
-
-export const WithPreSelected: Story = {
-  render: (args) => <TreeViewWrapper {...args} />,
-  args: {
-    data: defaultData,
-    selected: ['1-1-1', '1-2-2'],
-    withSearch: true,
-  },
-};
-
-export const DeepNesting: Story = {
-  render: (args) => <TreeViewWrapper {...args} />,
-  args: {
-    data: [
-      {
-        id: '1',
-        name: 'Уровень 1',
-        children: [
-          {
-            id: '1-1',
-            name: 'Уровень 2',
-            children: [
-              {
-                id: '1-1-1',
-                name: 'Уровень 3',
-                children: [
-                  {
-                    id: '1-1-1-1',
-                    name: 'Уровень 4',
-                    children: [
-                      {
-                        id: '1-1-1-1-1',
-                        name: 'Уровень 5',
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-    ],
-    withSearch: true,
-  },
-};

package/src/components/view/TreeView/TreeView.tsx

@@ -1,76 +0,0 @@
-import { ChangeEvent, HTMLAttributes, JSX, forwardRef, memo, useCallback, useMemo, useState } from 'react';
-
-import { Input } from '@components/common/Input';
-import { SearchIcon } from '@icons/SearchIcon';
-
-import { Item } from './models/Item';
-import * as styles from './treeView.module.css';
-import { TreeViewItem } from './ui/TreeViewItem';
-import { getFilteredTree } from './utils/getFilteredTree';
-
-interface Props {
-  data: Item[];
-  selected: string[];
-  startIcons?: Record<string, JSX.Element>;
-  withSearch?: boolean;
-  onSelect?: (id: string) => void;
-}
-
-const TreeView = forwardRef<HTMLDivElement, Props & HTMLAttributes<HTMLDivElement>>(function TreeView(
-  { data, selected, startIcons, onSelect, withSearch = false, className, ...rest },
-  ref,
-) {
-  const [searchValue, setSearchValue] = useState('');
-
-  const onChangeSearchValue = useCallback((e: ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value), []);
-
-  const selectedValues = useMemo(
-    () =>
-      selected.reduce(
-        (acc, cur) => {
-          acc[cur] = true;
-
-          return acc;
-        },
-        {} as Record<string, boolean>,
-      ),
-    [selected],
-  );
-
-  const filteredData = useMemo(() => {
-    return getFilteredTree(data, searchValue);
-  }, [data, searchValue]);
-
-  return (
-    <div ref={ref} className={className} {...rest}>
-      {withSearch && (
-        <Input
-          variant="outlined"
-          startIcon={<SearchIcon />}
-          value={searchValue}
-          fullWidth
-          onChange={onChangeSearchValue}
-          classes={{ root: styles.search }}
-        />
-      )}
-      <div className="styledScroll">
-        {filteredData.map(({ id, name, children }) => {
-          return (
-            <TreeViewItem
-              key={id}
-              title={name}
-              value={id}
-              searchValue={searchValue}
-              children={children}
-              startIcons={startIcons}
-              onSelect={onSelect}
-              selected={selectedValues}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-});
-
-export default memo(TreeView);

package/src/components/view/TreeView/models/Item.ts

@@ -1,7 +0,0 @@
-export interface Item {
-  id: string;
-  name: string;
-  type?: string;
-  isSelectable?: boolean;
-  children?: Item[];
-}

package/src/components/view/TreeView/treeView.module.css

@@ -1,3 +0,0 @@
-.search {
-  margin-bottom: 12px;
-}

package/src/components/view/TreeView/ui/TreeViewItem/TreeViewItem.tsx

@@ -1,84 +0,0 @@
-import classNames from 'classnames';
-import { JSX, memo, useEffect, useState } from 'react';
-
-import { AddIcon, ChevronDownIcon, DoneIcon } from '@icons/index';
-
-import * as styles from './treeViewItem.module.css';
-import { Typography } from '../../../Typography';
-import { Item } from '../../models/Item';
-
-interface Props {
-  title: string;
-  value: string;
-  searchValue: string;
-  selected: Record<string, boolean>;
-  onSelect?: (id: string) => void;
-  type?: string;
-  isSelectable?: boolean;
-  startIcons?: Record<string, JSX.Element>;
-  children?: Item[];
-}
-
-export default memo(function TreeViewItem({
-  title,
-  value,
-  searchValue,
-  selected,
-  onSelect,
-  type,
-  isSelectable,
-  startIcons,
-  children,
-}: Props) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    setIsOpen(!!searchValue);
-  }, [searchValue]);
-
-  const hasChildren = !!children?.length;
-
-  const startIcon = type && startIcons?.[type];
-
-  const handleClick = () => {
-    if (isSelectable && onSelect) {
-      onSelect(value);
-    } else {
-      setIsOpen(!isOpen);
-    }
-  };
-
-  const isSelected = selected[value];
-
-  return (
-    <div>
-      <div className={classNames(styles.item, { [styles.selectable]: isSelectable })} onClick={handleClick}>
-        {hasChildren && <ChevronDownIcon />}
-        <div className={classNames(styles.title, { [styles.selected]: isSelected })}>
-          {startIcon}
-          <Typography variant="subtitle2">{title}</Typography>
-
-          {isSelectable && <span className={styles.selectIcon}>{isSelected ? <DoneIcon /> : <AddIcon />}</span>}
-        </div>
-      </div>
-      {isOpen && hasChildren && (
-        <div className={styles.children}>
-          {children.map((c) => (
-            <TreeViewItem
-              key={c.id}
-              title={c.name}
-              value={c.id}
-              children={c.children}
-              selected={selected}
-              searchValue={searchValue}
-              type={c.type}
-              isSelectable={c.isSelectable}
-              startIcons={startIcons}
-              onSelect={onSelect}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-});