nntc-ui 0.2.4 → 0.2.6

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

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

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

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

@@ -1,3 +1,2 @@
 export { Chip } from './Chip';
 export type { Props as ChipProps } from './Chip';
-//# sourceMappingURL=index.d.ts.map

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

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

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

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

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