nntc-ui 0.2.4 → 0.2.6

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

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@components/common/Button';
+
+import { Popover } from './Popover';
+
+const meta: Meta<typeof Popover> = {
+  title: 'View/Popover',
+  component: Popover,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    description: {
+      control: 'text',
+      description: 'Содержимое всплывающего окна',
+    },
+    clickable: {
+      control: 'boolean',
+      description: 'Открывать по клику',
+    },
+    initialOpen: {
+      control: 'boolean',
+      description: 'Начальное состояние',
+    },
+    placement: {
+      control: 'select',
+      options: [
+        'top',
+        'right',
+        'bottom',
+        'left',
+        'top-start',
+        'top-end',
+        'right-start',
+        'right-end',
+        'bottom-start',
+        'bottom-end',
+        'left-start',
+        'left-end',
+      ],
+      description: 'Позиция всплывающего окна',
+    },
+    wrapTrigger: {
+      control: 'boolean',
+      description: 'Обернуть триггер в div',
+    },
+    containerOffset: {
+      control: 'number',
+      description: 'Отступ от контейнера',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Popover>;
+
+export const Clickable: Story = {
+  args: {
+    description: 'Это всплывающее окно открывается по клику',
+    clickable: true,
+    children: <Button>Кликни меня</Button>,
+  },
+};
+
+export const WithPlacement: Story = {
+  args: {
+    description: 'Всплывающее окно справа',
+    placement: 'right',
+    children: <Button>Справа</Button>,
+  },
+};
+
+export const WithOffset: Story = {
+  args: {
+    description: 'Всплывающее окно с отступом',
+    containerOffset: 20,
+    children: <Button>С отступом</Button>,
+  },
+};
+
+export const WithHTMLContent: Story = {
+  args: {
+    description: (
+      <div>
+        <h4>Заголовок</h4>
+        <p>Это всплывающее окно с HTML контентом</p>
+        <ul>
+          <li>Пункт 1</li>
+          <li>Пункт 2</li>
+        </ul>
+      </div>
+    ),
+    children: <Button>HTML контент</Button>,
+  },
+};
+
+export const InitialOpen: Story = {
+  args: {
+    description: 'Всплывающее окно открыто изначально',
+    initialOpen: true,
+    children: <Button>Изначально открыто</Button>,
+  },
+};

package/src/components/view/Popover/Popover.tsx

@@ -0,0 +1,75 @@
+import { Placement } from '@floating-ui/react';
+import classnames from 'classnames';
+import { CSSProperties, MutableRefObject, PropsWithChildren, ReactNode, useState } from 'react';
+
+import { UiProps } from '@models/UiProps';
+
+import * as styles from './popover.module.css';
+import { PopoverContent } from './ui/PopoverContent';
+import { PopoverProvider } from './ui/PopoverProvider';
+import { PopoverTrigger } from './ui/PopoverTrigger';
+
+interface Props {
+  description?: ReactNode | string;
+  clickable?: boolean;
+  initialOpen?: boolean;
+  placement?: Placement;
+  wrapTrigger?: boolean;
+  containerOffset?: number;
+  root?: HTMLElement | MutableRefObject<HTMLElement | null> | null;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  contentStyle?: CSSProperties;
+  layoutVersion?: number;
+}
+
+export function Popover(props: PropsWithChildren<UiProps<Props>>) {
+  const {
+    description,
+    clickable,
+    initialOpen,
+    placement,
+    wrapTrigger,
+    containerOffset,
+    root,
+    open,
+    onOpenChange,
+    children,
+    classes,
+    contentStyle,
+    layoutVersion,
+  } = props;
+
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  if (!children) {
+    return null;
+  }
+
+  if (!description) {
+    return children;
+  }
+
+  return (
+    <PopoverProvider
+      placement={placement}
+      initialOpen={initialOpen}
+      open={open !== undefined ? open : clickable ? showTooltip : undefined}
+      onOpenChange={onOpenChange !== undefined ? onOpenChange : clickable ? setShowTooltip : undefined}
+      containerOffset={containerOffset}
+      root={root}
+      layoutVersion={layoutVersion}
+    >
+      <PopoverTrigger
+        wrapTrigger={wrapTrigger}
+        onClick={clickable ? () => setShowTooltip((prev) => !prev) : undefined}
+        className={classnames(wrapTrigger ? styles.trigger : undefined, classes?.trigger)}
+      >
+        {children}
+      </PopoverTrigger>
+      <PopoverContent className={classnames(styles.content, classes?.content)} style={contentStyle}>
+        {description}
+      </PopoverContent>
+    </PopoverProvider>
+  );
+}

package/{components/view/Popover/index.d.ts → src/components/view/Popover/index.ts}

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

package/src/components/view/Popover/popover.module.css

@@ -0,0 +1,23 @@
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+}
+
+.content {
+  z-index: 999;
+  min-width: 200px;
+  max-width: 380px;
+  padding: 0;
+  font-size: var(--text-caption-size);
+  font-weight: var(--text-caption-weight);
+  line-height: var(--text-caption-height);
+  color: var(--theme-alert-default-color);
+  letter-spacing: var(--text-caption-letter);
+  background-color: var(--theme-surface-dropdown);
+  border-radius: 4px;
+  box-shadow:
+    0px 2px 4px 0px #00000033,
+    0px 1px 10px 0px #0000001f,
+    0px 4px 5px 0px #00000024;
+}

package/src/components/view/Popover/ui/Arrow/Arrow.tsx

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+
+import { ArrowDropDownIcon, ArrowDropUpIcon } from '@icons/index';
+
+import { PopoverContext } from '../PopoverProvider/constants/PopoverContext';
+
+export function Arrow() {
+  const popoverContext = useContext(PopoverContext);
+
+  return popoverContext?.open ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />;
+}

package/src/components/view/Popover/ui/Arrow/index.ts

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

package/src/components/view/Popover/ui/PopoverContent/PopoverContent.tsx

@@ -0,0 +1,44 @@
+import { FloatingFocusManager, FloatingPortal, useMergeRefs } from '@floating-ui/react';
+import { HTMLProps, forwardRef, useContext, useLayoutEffect } from 'react';
+
+import { useCompatId } from '@hooks/useCompatId';
+
+import { PopoverContext } from '../PopoverProvider/constants/PopoverContext';
+
+export const PopoverContent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(function PopoverContent(
+  { style, children, ...props },
+  propRef,
+) {
+  const context = useContext(PopoverContext);
+  if (!context) {
+    return null;
+  }
+  const { context: floatingContext, ...otherContext } = context;
+
+  const ref = useMergeRefs([otherContext.refs.setFloating, propRef]);
+
+  const id = useCompatId();
+
+  useLayoutEffect(() => {
+    context.setDescriptionId(id);
+    return () => context.setDescriptionId(undefined);
+  }, [id, context.setDescriptionId]);
+
+  if (!floatingContext.open) return null;
+
+  return (
+    <FloatingPortal root={otherContext.root}>
+      <FloatingFocusManager context={floatingContext} modal={otherContext.modal}>
+        <div
+          id={id}
+          ref={ref}
+          style={{ ...otherContext.floatingStyles, ...style }}
+          aria-describedby={otherContext.descriptionId}
+          {...otherContext.getFloatingProps(props)}
+        >
+          {children}
+        </div>
+      </FloatingFocusManager>
+    </FloatingPortal>
+  );
+});

package/{components/view/Popover/ui/PopoverContent/index.d.ts → src/components/view/Popover/ui/PopoverContent/index.ts}

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

package/src/components/view/Popover/ui/PopoverProvider/PopoverProvider.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+
+import { PopoverContext } from './constants/PopoverContext';
+import { usePopover } from './hooks/usePopover';
+import { PopoverOptions } from './models/PopoverOptions';
+
+export const PopoverProvider = (props: PropsWithChildren<PopoverOptions>) => {
+  const { children, modal = false, ...options } = props;
+
+  const popover = usePopover({ modal, ...options });
+
+  return <PopoverContext.Provider value={popover}>{children}</PopoverContext.Provider>;
+};

package/src/components/view/Popover/ui/PopoverProvider/constants/PopoverContext.ts

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

package/src/components/view/Popover/ui/PopoverProvider/hooks/usePopover.ts

@@ -0,0 +1,79 @@
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
+import { useLayoutEffect, useMemo, useState } from 'react';
+
+import { PopoverOptions } from '../models/PopoverOptions';
+
+export function usePopover(props: PopoverOptions = {}) {
+  const {
+    initialOpen = false,
+    placement = 'bottom',
+    modal,
+    root,
+    open: controlledOpen,
+    onOpenChange: setControlledOpen,
+    containerOffset = 12,
+    layoutVersion,
+  } = props;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+  const [descriptionId, setDescriptionId] = useState<string | undefined>();
+
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+
+  const { update, ...data } = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(containerOffset),
+      flip({
+        crossAxis: placement.includes('-'),
+        fallbackAxisSideDirection: 'end',
+        padding: 5,
+      }),
+      shift({ padding: 5 }),
+    ],
+  });
+
+  const { context } = data;
+
+  useLayoutEffect(() => {
+    if (open) {
+      update();
+    }
+  }, [open, layoutVersion, update]);
+
+  const click = useClick(context, {
+    enabled: controlledOpen == undefined,
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+
+  const interactions = useInteractions([click, dismiss, role]);
+
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      update,
+      modal,
+      root,
+      descriptionId,
+      setDescriptionId,
+    }),
+    [open, setOpen, interactions, data, update, modal, root, descriptionId],
+  );
+}

package/{components/view/Popover/ui/PopoverProvider/index.d.ts → src/components/view/Popover/ui/PopoverProvider/index.ts}

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

package/src/components/view/Popover/ui/PopoverProvider/models/PopoverOptions.ts

@@ -0,0 +1,13 @@
+import { Placement } from '@floating-ui/react';
+import { MutableRefObject } from 'react';
+
+export interface PopoverOptions {
+  initialOpen?: boolean;
+  placement?: Placement;
+  modal?: boolean;
+  root?: HTMLElement | MutableRefObject<HTMLElement | null> | null;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  containerOffset?: number;
+  layoutVersion?: number;
+}

package/src/components/view/Popover/ui/PopoverProvider/models/PopoverState.ts

@@ -0,0 +1,7 @@
+import { usePopover } from '../hooks/usePopover';
+
+export type PopoverState =
+  | (ReturnType<typeof usePopover> & {
+      setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    })
+  | null;

package/src/components/view/Popover/ui/PopoverTrigger/PopoverTrigger.tsx

@@ -0,0 +1,36 @@
+import { useMergeRefs } from '@floating-ui/react';
+import { HTMLProps, cloneElement, forwardRef, isValidElement, useContext } from 'react';
+
+import { PopoverContext } from '../PopoverProvider/constants/PopoverContext';
+
+export const PopoverTrigger = forwardRef<HTMLElement, HTMLProps<HTMLElement> & { wrapTrigger?: boolean }>(
+  function PopoverTrigger({ children, wrapTrigger = false, ...props }, propRef) {
+    const context = useContext(PopoverContext);
+
+    // 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/Popover/ui/PopoverTrigger/index.d.ts → src/components/view/Popover/ui/PopoverTrigger/index.ts}

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

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

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@components/common/Button';
+
+import { Tooltip } from './Tooltip';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'View/Tooltip',
+  component: Tooltip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Текст подсказки',
+    },
+    clickable: {
+      control: 'boolean',
+      description: 'Подсказка открывается по клику',
+    },
+    initialOpen: {
+      control: 'boolean',
+      description: 'Начальное состояние подсказки',
+    },
+    placement: {
+      control: 'select',
+      options: [
+        'top',
+        'right',
+        'bottom',
+        'left',
+        'top-start',
+        'top-end',
+        'right-start',
+        'right-end',
+        'bottom-start',
+        'bottom-end',
+        'left-start',
+        'left-end',
+      ],
+      description: 'Позиция подсказки',
+    },
+    withoutArrow: {
+      control: 'boolean',
+      description: 'Убрать стрелку',
+    },
+    wrapTrigger: {
+      control: 'boolean',
+      description: 'Обернуть триггер в div',
+    },
+    alertType: {
+      control: 'select',
+      options: ['success', 'warning', 'error', 'info', 'default'],
+      description: 'Тип подсказки',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  args: {
+    label: 'Это подсказка по умолчанию',
+    children: <Button>Наведи на меня</Button>,
+  },
+};
+
+export const Clickable: Story = {
+  args: {
+    label: 'Эта подсказка открывается по клику',
+    clickable: true,
+    children: <Button>Кликни меня</Button>,
+  },
+};
+
+export const WithPlacement: Story = {
+  args: {
+    label: 'Подсказка справа',
+    placement: 'right',
+    children: <Button>Подсказка справа</Button>,
+  },
+};
+
+export const WithoutArrow: Story = {
+  args: {
+    label: 'Подсказка без стрелки',
+    withoutArrow: true,
+    children: <Button>Без стрелки</Button>,
+  },
+};
+
+export const SuccessType: Story = {
+  args: {
+    label: 'Успешная операция',
+    alertType: 'success',
+    children: <Button>Успех</Button>,
+  },
+};
+
+export const WarningType: Story = {
+  args: {
+    label: 'Предупреждение',
+    alertType: 'warning',
+    children: <Button>Внимание</Button>,
+  },
+};
+
+export const ErrorType: Story = {
+  args: {
+    label: 'Ошибка',
+    alertType: 'error',
+    children: <Button>Ошибка</Button>,
+  },
+};
+
+export const InfoType: Story = {
+  args: {
+    label: 'Информация',
+    alertType: 'info',
+    children: <Button>Информация</Button>,
+  },
+};
+
+export const WithHTMLContent: Story = {
+  args: {
+    label: (
+      <div>
+        <h4>Заголовок подсказки</h4>
+        <p>Это подсказка с HTML контентом</p>
+        <ul>
+          <li>Пункт 1</li>
+          <li>Пункт 2</li>
+        </ul>
+      </div>
+    ),
+    children: <Button>HTML контент</Button>,
+  },
+};

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

@@ -0,0 +1,74 @@
+import { Placement } from '@floating-ui/react';
+import classnames from 'classnames';
+import { MutableRefObject, PropsWithChildren, ReactElement, ReactNode, useRef, useState } from 'react';
+
+import { UiProps } from '@models/UiProps';
+
+import * as styles from './tooltip.module.css';
+import { TooltipContent } from './ui/TooltipContent';
+import { TooltipProvider } from './ui/TooltipProvider';
+import { TooltipTrigger } from './ui/TooltipTrigger';
+
+interface Props {
+  label?: ReactNode | string;
+  clickable?: boolean;
+  initialOpen?: boolean;
+  placement?: Placement;
+  withoutArrow?: boolean;
+  wrapTrigger?: boolean;
+  alertType?: 'success' | 'warning' | 'error' | 'info' | 'default';
+  root?: HTMLElement | MutableRefObject<HTMLElement | null> | null;
+}
+
+export function Tooltip(props: PropsWithChildren<UiProps<Props>>): ReactElement | null {
+  const {
+    label,
+    clickable,
+    initialOpen,
+    placement,
+    withoutArrow,
+    wrapTrigger,
+    alertType = 'default',
+    root,
+    children,
+    classes,
+  } = props;
+
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  const arrowRef = useRef(null);
+
+  if (!label) {
+    return children ? <>{children}</> : null;
+  }
+
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <TooltipProvider
+      placement={placement}
+      initialOpen={initialOpen}
+      open={clickable ? showTooltip : undefined}
+      onOpenChange={clickable ? setShowTooltip : undefined}
+      withoutArrow={withoutArrow}
+      arrowRef={arrowRef}
+      root={root}
+    >
+      <TooltipTrigger
+        wrapTrigger={wrapTrigger}
+        onClick={clickable ? () => setShowTooltip((prev) => !prev) : undefined}
+        className={wrapTrigger ? classnames(styles.trigger, classes?.trigger) : undefined}
+      >
+        {children}
+      </TooltipTrigger>
+      <TooltipContent
+        className={classnames(styles.content, styles[alertType as keyof typeof styles], classes?.content)}
+        styles={styles}
+      >
+        {label}
+      </TooltipContent>
+    </TooltipProvider>
+  );
+}

package/{components/view/Tooltip/index.d.ts → src/components/view/Tooltip/index.ts}

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