nntc-ui 0.2.4 → 0.2.6

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+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/{components/view/Tooltip/ui/TooltipProvider/models/TooltipState.d.ts → src/components/view/Tooltip/ui/TooltipProvider/models/TooltipState.ts}

@@ -1,3 +1,3 @@
 import { useTooltip } from '../hooks/useTooltip';
+
 export type TooltipState = ReturnType<typeof useTooltip> | null;
-//# sourceMappingURL=TooltipState.d.ts.map

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

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

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

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

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

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

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

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

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

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

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