nntc-ui 0.2.6 → 0.2.8

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

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

@@ -1,75 +0,0 @@
-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/src/components/view/Popover/popover.module.css

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

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

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

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

@@ -1,44 +0,0 @@
-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/src/components/view/Popover/ui/PopoverProvider/PopoverProvider.tsx

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

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

@@ -1,79 +0,0 @@
-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/src/components/view/Popover/ui/PopoverProvider/models/PopoverOptions.ts

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

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

@@ -1,36 +0,0 @@
-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/src/components/view/Tooltip/Tooltip.stories.tsx

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

@@ -1,74 +0,0 @@
-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>
-  );
-}