nntc-ui 0.2.6 → 0.2.7

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

@@ -1,219 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { CloseIcon, InfoIcon } from '@icons/index';
-
-import { Chip } from './Chip';
-
-const meta: Meta<typeof Chip> = {
-  title: 'View/Chip',
-  component: Chip,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['filled', 'outlined'],
-    },
-    componentSize: {
-      control: 'select',
-      options: ['small', 'medium'],
-    },
-    iconPlacement: {
-      control: 'select',
-      options: ['left', 'right'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Chip>;
-
-export const Default: Story = {
-  args: {
-    children: 'Чип',
-  },
-};
-
-export const Filled: Story = {
-  args: {
-    variant: 'filled',
-    children: 'Filled',
-  },
-};
-
-export const Outlined: Story = {
-  args: {
-    variant: 'outlined',
-    children: 'Outlined',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    componentSize: 'small',
-    children: 'Small',
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    componentSize: 'medium',
-    children: 'Medium',
-  },
-};
-
-export const WithIcon: Story = {
-  args: {
-    icon: <InfoIcon />,
-    children: 'С иконкой',
-  },
-};
-
-export const WithIconLeft: Story = {
-  args: {
-    icon: <InfoIcon />,
-    iconPlacement: 'left',
-    children: 'С иконкой слева',
-  },
-};
-
-export const WithIconRight: Story = {
-  args: {
-    icon: <InfoIcon />,
-    iconPlacement: 'right',
-    children: 'С иконкой справа',
-  },
-};
-
-export const Clickable: Story = {
-  args: {
-    variant: 'filled',
-    onClick: () => console.log('Chip clicked'),
-    children: 'Кликабельный',
-  },
-};
-
-export const WithIconClick: Story = {
-  args: {
-    variant: 'outlined',
-    icon: <CloseIcon />,
-    onIconClick: () => console.log('Icon clicked'),
-    children: 'С кликом на иконку',
-  },
-};
-
-export const ClickableWithIcon: Story = {
-  args: {
-    variant: 'filled',
-    icon: <CloseIcon />,
-    onClick: () => console.log('Chip clicked'),
-    onIconClick: () => console.log('Icon clicked'),
-    children: 'Кликабельный с иконкой',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: 'filled',
-    secondary: true,
-    children: 'Secondary Filled',
-  },
-};
-
-export const SecondaryOutlined: Story = {
-  args: {
-    variant: 'outlined',
-    secondary: true,
-    children: 'Secondary Outlined',
-  },
-};
-
-export const SecondaryWithIcon: Story = {
-  args: {
-    variant: 'filled',
-    secondary: true,
-    icon: <InfoIcon />,
-    children: 'Secondary с иконкой',
-  },
-};
-
-export const Stretched: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 280 }}>
-      <Chip variant="filled" icon={<CloseIcon />} iconPlacement="right" onIconClick={() => {}}>
-        С иконкой справа, растянутый
-      </Chip>
-      <Chip variant="filled">Без иконки, растянутый</Chip>
-    </div>
-  ),
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'flex-start' }}>
-      <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
-        <Chip variant="filled" componentSize="medium">
-          Filled Medium
-        </Chip>
-        <Chip variant="outlined" componentSize="medium">
-          Outlined Medium
-        </Chip>
-        <Chip variant="filled" componentSize="small">
-          Filled Small
-        </Chip>
-        <Chip variant="outlined" componentSize="small">
-          Outlined Small
-        </Chip>
-        <Chip variant="outlined" componentSize="small" icon={<InfoIcon />} iconPlacement="left">
-          Small with left icon
-        </Chip>
-        <Chip variant="outlined" componentSize="small" icon={<InfoIcon />} iconPlacement="right">
-          Small with right icon
-        </Chip>
-      </div>
-      <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
-        <Chip variant="filled" secondary>
-          Secondary Filled
-        </Chip>
-        <Chip variant="outlined" secondary>
-          Secondary Outlined
-        </Chip>
-        <Chip variant="filled" secondary icon={<InfoIcon />}>
-          Secondary с иконкой
-        </Chip>
-        <Chip variant="outlined" secondary icon={<CloseIcon />} onIconClick={() => console.log('Deleted')}>
-          Secondary с удалением
-        </Chip>
-      </div>
-      <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
-        <Chip variant="filled" icon={<InfoIcon />}>
-          С иконкой справа
-        </Chip>
-        <Chip variant="outlined" icon={<InfoIcon />} iconPlacement="left">
-          С иконкой слева
-        </Chip>
-        <Chip variant="filled" icon={<CloseIcon />} onIconClick={() => console.log('Deleted')}>
-          С удалением
-        </Chip>
-      </div>
-      <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
-        <Chip variant="filled" onClick={() => console.log('Clicked')}>
-          Кликабельный
-        </Chip>
-        <Chip variant="outlined" icon={<CloseIcon />} onIconClick={() => console.log('Deleted')}>
-          Удаляемый
-        </Chip>
-        <Chip
-          variant="filled"
-          icon={<CloseIcon />}
-          onClick={() => console.log('Clicked')}
-          onIconClick={() => console.log('Deleted')}
-        >
-          Полный функционал
-        </Chip>
-      </div>
-    </div>
-  ),
-};

package/src/components/view/Chip/Chip.tsx

@@ -1,89 +0,0 @@
-import classnames from 'classnames';
-import { HTMLAttributes, PropsWithChildren, ReactNode, forwardRef } from 'react';
-
-import { ChipSize } from '@models/ChipSize';
-import { ChipVariant } from '@models/ChipVariant';
-import { UiProps } from '@models/UiProps';
-
-import * as styles from './chip.module.css';
-
-export interface Props {
-  variant?: ChipVariant;
-  componentSize?: ChipSize;
-  icon?: ReactNode;
-  iconPlacement?: 'left' | 'right';
-  secondary?: boolean;
-  onClick?: () => void;
-  onIconClick?: () => void;
-}
-
-export const Chip = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren<UiProps<Props>> & Omit<HTMLAttributes<HTMLDivElement>, 'onClick'>
->(function Chip(
-  {
-    variant = 'filled',
-    componentSize = 'medium',
-    icon,
-    iconPlacement = 'right',
-    secondary,
-    onClick,
-    onIconClick,
-    children,
-    classes,
-    className,
-    ...rest
-  },
-  ref,
-) {
-  const handleIconClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    onIconClick?.();
-  };
-
-  const IconComponent = onIconClick ? 'button' : 'span';
-  const isIconLeft = !!icon && iconPlacement === 'left';
-  const isIconRight = !!icon && iconPlacement === 'right';
-
-  return (
-    <div
-      ref={ref}
-      className={classnames(
-        styles.root,
-        styles[variant as keyof typeof styles],
-        styles[componentSize as keyof typeof styles],
-        !!icon && styles.withIcon,
-        isIconLeft && styles.iconLeft,
-        isIconRight && styles.iconRight,
-        secondary && styles.secondary,
-        onClick && styles.clickable,
-        className,
-        classes?.root,
-      )}
-      tabIndex={onClick ? 0 : undefined}
-      role={onClick ? 'button' : undefined}
-      {...rest}
-      onClick={onClick}
-    >
-      {isIconLeft && (
-        <IconComponent
-          className={classnames(styles.icon, onIconClick && styles.iconClickable, classes?.icon)}
-          onClick={onIconClick ? handleIconClick : undefined}
-          aria-label={onIconClick ? 'Удалить' : undefined}
-        >
-          {icon}
-        </IconComponent>
-      )}
-      {children && <span className={classnames(styles.label, classes?.label)}>{children}</span>}
-      {isIconRight && (
-        <IconComponent
-          className={classnames(styles.icon, styles.iconRightSlot, onIconClick && styles.iconClickable, classes?.icon)}
-          onClick={onIconClick ? handleIconClick : undefined}
-          aria-label={onIconClick ? 'Удалить' : undefined}
-        >
-          {icon}
-        </IconComponent>
-      )}
-    </div>
-  );
-});

package/src/components/view/Chip/chip.module.css

@@ -1,157 +0,0 @@
-.root {
-  display: inline-flex;
-  flex-shrink: 0;
-  gap: 6px;
-  align-items: center;
-  min-width: 0;
-  max-width: 100%;
-  overflow: hidden;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  color: var(--theme-text-primary);
-  letter-spacing: 0.25px;
-  -webkit-user-select: none;
-  user-select: none;
-  border-radius: 16px;
-}
-
-.medium {
-  height: 32px;
-  padding: 4px 12px;
-}
-
-.medium.with-icon.icon-left {
-  padding: 4px 12px 4px 4px;
-}
-
-.medium.with-icon.icon-right {
-  padding: 4px 4px 4px 12px;
-}
-
-.small {
-  height: 24px;
-  padding: 2px 8px;
-  font-size: 12px;
-  line-height: 16px;
-  letter-spacing: normal;
-}
-
-.small.with-icon.icon-left {
-  padding: 2px 8px 2px 2px;
-}
-
-.small.with-icon.icon-right {
-  padding: 2px 2px 2px 8px;
-}
-
-.filled {
-  background-color: var(--theme-chip-accent-bg);
-}
-
-.filled.clickable:hover {
-  background-color: var(--theme-chip-accent-hover);
-}
-
-.filled.clickable:focus-visible {
-  outline: none;
-  background-color: var(--theme-chip-accent-focus);
-}
-
-.filled.clickable:active {
-  background-color: var(--theme-chip-accent-active);
-}
-
-.filled.secondary {
-  background-color: var(--theme-chip-subtle-bg);
-}
-
-.filled.secondary.clickable:hover {
-  background-color: var(--theme-chip-subtle-hover);
-}
-
-.filled.secondary.clickable:focus-visible {
-  background-color: var(--theme-chip-subtle-focus);
-}
-
-.outlined {
-  outline: 1px solid var(--theme-input-border);
-  outline-offset: -1px;
-  background-color: transparent;
-}
-
-.outlined.clickable:hover {
-  outline-color: var(--theme-input-border-hover);
-  background-color: var(--theme-selection-hover);
-}
-
-.outlined.clickable:focus-visible {
-  outline: 2px solid var(--theme-focus);
-  outline-offset: -2px;
-}
-
-.outlined.secondary {
-  color: var(--theme-text-secondary);
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.label {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.icon {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin: 0;
-  color: inherit;
-  outline: none;
-  background: none;
-  border: none;
-  border-radius: 50%;
-}
-
-.icon-right-slot {
-  margin-left: auto;
-}
-
-.medium .icon {
-  width: 24px;
-  height: 24px;
-}
-
-.small .icon {
-  width: 18px;
-  height: 18px;
-}
-
-.icon > svg {
-  width: 100%;
-  height: 100%;
-  fill: currentcolor;
-}
-
-.icon-clickable {
-  cursor: pointer;
-}
-
-.icon-clickable:hover {
-  background-color: var(--theme-icon-hover);
-}
-
-.icon-clickable:focus-visible {
-  background-color: var(--theme-icon-hover-on-selected);
-}
-
-.icon-clickable:active {
-  background-color: var(--theme-icon-hover-on-selected);
-}

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

@@ -1,117 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { PointIcon } from '@icons/PointIcon';
-
-import { InputChip } from './InputChip';
-
-const meta: Meta<typeof InputChip> = {
-  title: 'Components/InputChip',
-  component: InputChip,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['filled', 'outlined'],
-      description: 'Вариант отображения компонента',
-    },
-    componentSize: {
-      control: 'select',
-      options: ['small', 'medium', 'large', 'extraLarge'],
-      description: 'Размер компонента',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Отключить компонент',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof InputChip>;
-
-export const Default: Story = {
-  args: {
-    variant: 'filled',
-    componentSize: 'medium',
-    children: 'Чипс',
-  },
-};
-
-export const Removable: Story = {
-  args: {
-    variant: 'filled',
-    componentSize: 'medium',
-    children: 'Удаляемый чипс',
-    onRemove: () => {},
-  },
-};
-
-export const Outlined: Story = {
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    children: 'Контурный чипс',
-    onRemove: () => {},
-  },
-};
-
-export const WithIcon: Story = {
-  args: {
-    variant: 'filled',
-    componentSize: 'medium',
-    children: 'С иконкой',
-    icon: <PointIcon />,
-    onRemove: () => {},
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    variant: 'filled',
-    componentSize: 'medium',
-    children: 'Отключённый',
-    disabled: true,
-    onRemove: () => {},
-  },
-};
-
-export const Stretched: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 280 }}>
-      <InputChip variant="filled" componentSize="medium" onRemove={() => {}}>
-        С крестиком, растянутый чипс
-      </InputChip>
-      <InputChip variant="filled" componentSize="medium">
-        Без крестика, растянутый чипс
-      </InputChip>
-    </div>
-  ),
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, auto)', gap: '16px', alignItems: 'center' }}>
-      <InputChip variant="filled" componentSize="small" icon={<PointIcon />} onRemove={() => {}}>
-        Small + icon
-      </InputChip>
-      <InputChip variant="filled" componentSize="small" onRemove={() => {}}>
-        Small
-      </InputChip>
-      <InputChip variant="filled" componentSize="medium" icon={<PointIcon />} onRemove={() => {}}>
-        Big + icon
-      </InputChip>
-      <InputChip variant="filled" componentSize="medium" onRemove={() => {}}>
-        Big
-      </InputChip>
-      <InputChip variant="filled" componentSize="medium" disabled onRemove={() => {}}>
-        Disabled
-      </InputChip>
-      <InputChip variant="outlined" componentSize="medium" onRemove={() => {}}>
-        Outlined
-      </InputChip>
-    </div>
-  ),
-};

package/src/components/view/InputChip/InputChip.tsx

@@ -1,77 +0,0 @@
-import classnames from 'classnames';
-import { HTMLAttributes, MouseEvent, PropsWithChildren, ReactNode, forwardRef } from 'react';
-
-import { CloseIcon } from '@icons/CloseIcon';
-import { ChipVariant } from '@models/ChipVariant';
-import { FieldSize } from '@models/FieldSize';
-import { UiProps } from '@models/UiProps';
-
-import * as styles from './inputChip.module.css';
-
-type Style = keyof typeof styles;
-
-export interface Props {
-  variant?: ChipVariant;
-  componentSize?: FieldSize;
-  icon?: ReactNode;
-  disabled?: boolean;
-  onClick?: () => void;
-  onRemove?: () => void;
-}
-
-export const InputChip = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren<UiProps<Props>> & Omit<HTMLAttributes<HTMLDivElement>, 'onClick'>
->(function InputChip(
-  {
-    variant = 'filled',
-    componentSize = 'medium',
-    icon,
-    disabled,
-    onClick,
-    onRemove,
-    children,
-    classes,
-    className,
-    ...rest
-  },
-  ref,
-) {
-  const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    if (!disabled) onRemove?.();
-  };
-
-  return (
-    <div
-      ref={ref}
-      className={classnames(
-        styles.root,
-        styles[variant as Style],
-        styles[componentSize as Style],
-        !!icon && styles.withIcon,
-        disabled && styles.disabled,
-        onClick && !disabled && styles.clickable,
-        className,
-        classes?.root,
-      )}
-      tabIndex={onClick && !disabled ? 0 : undefined}
-      {...rest}
-      onClick={disabled ? undefined : onClick}
-    >
-      {!!icon && <span className={classnames(styles.icon, classes?.icon)}>{icon}</span>}
-      <span className={classnames(styles.text, classes?.text)}>{children}</span>
-      {!!onRemove && (
-        <button
-          type="button"
-          className={classnames(styles.remove, classes?.remove)}
-          onClick={handleRemove}
-          disabled={disabled}
-          aria-label="Удалить"
-        >
-          <CloseIcon />
-        </button>
-      )}
-    </div>
-  );
-});