nntc-ui 0.2.6 → 0.2.7

package/src/components/common/RadioButton/RadioButton.tsx

@@ -1,90 +0,0 @@
-import classnames from 'classnames';
-import { DetailedHTMLProps, InputHTMLAttributes, MouseEvent, forwardRef, useCallback, useEffect, useRef } from 'react';
-import { mergeRefs } from 'react-merge-refs';
-
-import { Typography } from '@components/view/Typography';
-import { useCompatId } from '@hooks/useCompatId';
-import { RadioDeselectedIcon } from '@icons/RadioDeselectedIcon';
-import { RadioSelectedIcon } from '@icons/RadioSelectedIcon';
-import { CheckboxSize } from '@models/CheckboxSize';
-import { UiProps } from '@models/UiProps';
-
-import * as styles from './radioButton.module.css';
-
-interface Props {
-  label?: string;
-  componentSize?: CheckboxSize;
-  canUncheck?: boolean;
-  onUncheck?: () => void;
-}
-
-export const RadioButton = forwardRef<
-  HTMLInputElement,
-  UiProps<Props> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
->(function RadioButton(props, ref) {
-  const { label, componentSize = 'medium', canUncheck, onUncheck, classes, id, onClick, ...inputProps } = props;
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const wasCheckedRef = useRef(false);
-  const generatedId = useCompatId();
-  const inputId = id ?? generatedId;
-
-  useEffect(() => {
-    const el = inputRef.current;
-    if (!el) return;
-
-    const mouseupListener = () => el.classList.remove(styles.pressed);
-    const mousedownListener = () => {
-      el.classList.add(styles.pressed);
-      wasCheckedRef.current = el.checked;
-    };
-
-    el.addEventListener('mousedown', mousedownListener);
-    el.addEventListener('mouseup', mouseupListener);
-
-    return () => {
-      el.removeEventListener('mousedown', mousedownListener);
-      el.removeEventListener('mouseup', mouseupListener);
-    };
-  }, []);
-
-  const handleClick = useCallback(
-    (e: MouseEvent<HTMLInputElement>) => {
-      if (canUncheck && wasCheckedRef.current) {
-        inputRef.current!.checked = false;
-        onUncheck?.();
-      }
-      onClick?.(e);
-    },
-    [canUncheck, onUncheck, onClick],
-  );
-
-  const typographyVariant = componentSize === 'large' ? 'subtitle1' : 'subtitle2';
-
-  return (
-    <div className={classnames(styles.root, classes?.root)}>
-      <input
-        ref={mergeRefs([inputRef, ref])}
-        type="radio"
-        className={classnames(styles.input, classes?.input)}
-        id={inputId}
-        title={label}
-        onClick={handleClick}
-        {...inputProps}
-      />
-      <label htmlFor={inputId} className={classnames(styles.label, classes?.label)} title={label}>
-        <span className={classnames(styles.radio, styles.deselected, classes?.radio)}>
-          <RadioDeselectedIcon />
-        </span>
-        <span className={classnames(styles.radio, styles.selected, classes?.radio)}>
-          <RadioSelectedIcon />
-        </span>
-        {!!label && (
-          <Typography variant={typographyVariant} className={classnames(styles.labelText, classes?.labelText)}>
-            {label}
-          </Typography>
-        )}
-      </label>
-    </div>
-  );
-});

package/src/components/common/RadioButton/radioButton.module.css

@@ -1,108 +0,0 @@
-.root {
-  position: relative;
-  width: 100%;
-  max-width: 320px;
-  height: 24px;
-}
-
-.input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  width: 100%;
-  height: 24px;
-  margin: 0;
-  cursor: pointer;
-  opacity: 0;
-}
-
-.label {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: row;
-  gap: 0;
-  align-items: center;
-  width: 100%;
-  height: 24px;
-  padding-left: 24px;
-}
-
-.radio {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 2;
-  display: block;
-  width: 24px;
-  height: 24px;
-  opacity: 0;
-  transition: opacity 0.1s linear;
-}
-
-.radio > svg {
-  fill: var(--theme-selection-border);
-}
-
-.deselected {
-  opacity: 1;
-}
-
-.input:checked + .label > .deselected {
-  opacity: 0;
-}
-
-.input:checked + .label > .selected {
-  opacity: 1;
-}
-
-.radio.selected > svg {
-  fill: var(--theme-focus);
-}
-
-.label-text {
-  display: block;
-  margin-left: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.input + .label > .radio::before {
-  position: absolute;
-  top: -8px;
-  left: -8px;
-  z-index: 0;
-  display: block;
-  width: 40px;
-  height: 40px;
-  content: '';
-  background-color: transparent;
-  border-radius: 50%;
-  transition: background-color 0.1s linear;
-}
-
-.input:hover + .label > .radio::before {
-  background-color: var(--theme-selection-hover);
-}
-
-.input:focus + .label > .radio::before {
-  background-color: var(--theme-selection-focused);
-}
-
-.input.pressed + .label > .radio::before {
-  background-color: var(--theme-selection-pressed);
-}
-
-.input:hover + .label > .radio.selected::before {
-  background-color: var(--theme-selection-selected-hover);
-}
-
-.input:focus + .label > .radio.selected::before {
-  background-color: var(--theme-selection-selected-focused);
-}
-
-.input.pressed + .label > .radio.selected::before {
-  background-color: var(--theme-selection-selected-pressed);
-}

package/src/components/common/Select/Select.stories.tsx

@@ -1,294 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
-
-import { UiProps } from '@models/UiProps';
-
-import { Divider } from './models/Divider';
-import { Item, MaybeItem } from './models/Item';
-import { Select } from './Select';
-
-type Props = UiProps<{
-  variant?: 'filled' | 'filledBlack' | 'outlined';
-  componentSize?: 'small' | 'medium' | 'large' | 'extraLarge';
-  icon?: React.ReactNode;
-  fullWidth?: boolean;
-  label?: string;
-  placeholder?: string;
-  items: (Item | Divider)[];
-  onValueChange?: (newItem: MaybeItem) => void;
-  selected?: MaybeItem;
-  chips?: boolean;
-}> &
-  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-
-const meta: Meta<typeof Select> = {
-  title: 'Components/Select',
-  component: Select,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['filled', 'filledBlack', 'outlined'],
-      description: 'Вариант отображения компонента',
-    },
-    componentSize: {
-      control: 'select',
-      options: ['small', 'medium', 'large', 'extraLarge'],
-      description: 'Размер компонента',
-    },
-    fullWidth: {
-      control: 'boolean',
-      description: 'Растянуть на всю ширину',
-    },
-    label: {
-      control: 'text',
-      description: 'Текст метки',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Текст плейсхолдера',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Отключить компонент',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Select>;
-
-const SelectWrapper = (args: Props) => {
-  const [selectedItem, setSelectedItem] = useState<MaybeItem>(args.selected);
-
-  return (
-    <div style={{ width: '300px' }}>
-      <Select {...args} selected={selectedItem} onValueChange={setSelectedItem} />
-    </div>
-  );
-};
-
-const defaultItems: (Item | Divider)[] = [
-  {
-    type: 'item',
-    name: 'Первый пункт',
-    value: 'item1',
-  },
-  {
-    type: 'item',
-    name: 'Второй пункт',
-    value: 'item2',
-  },
-  {
-    type: 'divider',
-    name: 'Разделитель',
-  },
-  {
-    type: 'item',
-    name: 'Третий пункт',
-    value: 'item3',
-  },
-];
-
-export const Default: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    variant: 'filled',
-    componentSize: 'medium',
-    placeholder: 'Выберите значение',
-    items: defaultItems,
-  },
-};
-
-export const Outlined: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    placeholder: 'Выберите значение',
-    items: defaultItems,
-  },
-};
-
-export const WithLabel: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    variant: 'filled',
-    componentSize: 'medium',
-    label: 'Выберите пункт',
-    placeholder: 'Выберите значение',
-    items: defaultItems,
-  },
-};
-
-export const Small: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    variant: 'filled',
-    componentSize: 'small',
-    placeholder: 'Выберите значение',
-    items: defaultItems,
-  },
-};
-
-export const Large: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    variant: 'filled',
-    componentSize: 'large',
-    placeholder: 'Выберите значение',
-    items: defaultItems,
-  },
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 248px)', gap: '24px' }}>
-      <SelectWrapper
-        variant="outlined"
-        componentSize="small"
-        label="Outlined small"
-        placeholder="Search..."
-        items={defaultItems}
-      />
-      <SelectWrapper
-        variant="filled"
-        componentSize="small"
-        label="Filled small"
-        placeholder="Search..."
-        items={defaultItems}
-      />
-      <SelectWrapper
-        variant="outlined"
-        componentSize="medium"
-        label="Outlined medium"
-        placeholder="Search..."
-        items={defaultItems}
-      />
-      <SelectWrapper
-        variant="filled"
-        componentSize="medium"
-        label="Filled medium"
-        placeholder="Search..."
-        items={defaultItems}
-      />
-      <SelectWrapper
-        variant="outlined"
-        componentSize="large"
-        label="Outlined large"
-        placeholder="Search..."
-        items={defaultItems}
-      />
-      <SelectWrapper
-        variant="filled"
-        componentSize="large"
-        label="Filled large"
-        placeholder="Search..."
-        items={defaultItems}
-      />
-      <SelectWrapper
-        variant="outlined"
-        componentSize="medium"
-        label="Outlined disabled"
-        placeholder="Search..."
-        items={defaultItems}
-        disabled
-      />
-      <SelectWrapper
-        variant="filled"
-        componentSize="medium"
-        label="Filled disabled"
-        placeholder="Search..."
-        items={defaultItems}
-        disabled
-      />
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    variant: 'filled',
-    componentSize: 'medium',
-    disabled: true,
-    placeholder: 'Выберите значение',
-    items: defaultItems,
-  },
-};
-
-export const Chips: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    label: 'Выбранный пункт',
-    placeholder: 'Выберите значение',
-    items: defaultItems,
-    chips: true,
-    selected: {
-      type: 'item',
-      name: 'Первый пункт',
-      value: 'item1',
-    },
-  },
-};
-
-export const WithSelectedValue: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    variant: 'filled',
-    componentSize: 'medium',
-    placeholder: 'Выберите значение',
-    items: defaultItems,
-    selected: {
-      type: 'item',
-      name: 'Второй пункт',
-      value: 'item2',
-    },
-  },
-};
-
-export const FilledBlack: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    variant: 'filledBlack',
-    componentSize: 'medium',
-    label: 'Filled black',
-    placeholder: 'Выберите значение',
-    items: defaultItems,
-  },
-};
-
-export const WithError: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    variant: 'filledBlack',
-    componentSize: 'medium',
-    label: 'Label',
-    placeholder: 'Выберите значение',
-    items: defaultItems,
-    error: {
-      name: 'Error name',
-      description: 'Подробное описание ошибки',
-    },
-  },
-};
-
-export const WithErrorIcon: Story = {
-  render: (args) => <SelectWrapper {...args} />,
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    placeholder: 'Выберите значение',
-    items: defaultItems,
-    error: {
-      name: 'Error name',
-      description: 'Подробное описание ошибки',
-    },
-  },
-};

package/src/components/common/Select/Select.tsx

@@ -1,181 +0,0 @@
-import classnames from 'classnames';
-import {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  MouseEvent,
-  ReactNode,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { mergeRefs } from 'react-merge-refs';
-import { v4 as uuidv4 } from 'uuid';
-
-import { FieldError, FieldErrorIcon, FieldShell, FieldSize, FieldVariant } from '@components/common/FieldShell';
-import * as fieldStyles from '@components/common/FieldShell/fieldShell.module.css';
-import { InputChip } from '@components/view/InputChip';
-import { Popover } from '@components/view/Popover';
-import { Arrow } from '@components/view/Popover/ui/Arrow';
-import { PropsObject, UiProps } from '@models/UiProps';
-
-import { Divider } from './models/Divider';
-import { Item, MaybeItem } from './models/Item';
-import * as styles from './select.module.css';
-import { SelectPopover } from './ui/SelectPopover';
-
-interface Props {
-  variant?: FieldVariant;
-  componentSize?: FieldSize;
-  icon?: ReactNode;
-  fullWidth?: boolean;
-  label?: string;
-  error?: FieldError;
-  placeholder?: string;
-  items: (Item | Divider)[];
-  onValueChange?: (newItem: MaybeItem) => void;
-  selected?: MaybeItem;
-  chips?: boolean;
-}
-
-export const Select = forwardRef<
-  HTMLInputElement,
-  UiProps<Props> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
->(function Select(props, ref) {
-  const {
-    variant = 'filled',
-    componentSize = 'medium',
-    icon,
-    fullWidth,
-    label,
-    error,
-    placeholder,
-    items,
-    defaultValue,
-    onValueChange,
-    selected,
-    chips,
-    classes,
-    disabled,
-    id,
-    ...inputProps
-  } = props;
-
-  const isLocalState = defaultValue && !selected;
-
-  const [localSelectedItem, setlocalSelectedItem] = useState<MaybeItem>(
-    isLocalState ? (items.find((i) => i.type === 'item' && i.value === defaultValue) as MaybeItem) : undefined,
-  );
-
-  const selectedItem = isLocalState ? localSelectedItem : selected;
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const popoverTargetRef = useRef<HTMLDivElement>(null);
-
-  const inputClickHandler = useCallback(
-    (e: MouseEvent) => {
-      e.preventDefault();
-      if (!disabled) popoverTargetRef?.current?.click();
-    },
-    [popoverTargetRef],
-  );
-
-  const changeSelectedItem = (item: MaybeItem) => {
-    if (isLocalState) setlocalSelectedItem(item);
-    onValueChange?.(item);
-  };
-
-  useEffect(() => {
-    if (selectedItem) {
-      const current = items.find((i) => i.type === 'item' && i.value === selectedItem?.value) as MaybeItem;
-      if (!current) changeSelectedItem(current);
-    }
-  }, [items, selectedItem]);
-
-  const inputId = id ?? uuidv4();
-  const showErrorIcon = !!error && !label;
-
-  return (
-    <FieldShell
-      variant={variant}
-      componentSize={componentSize}
-      fullWidth={fullWidth}
-      label={label}
-      error={error}
-      inputId={inputId}
-      onLabelClick={inputClickHandler}
-      hasStartIcon={!!icon || !!selectedItem?.icon}
-      hasArrow
-      hasErrorIcon={showErrorIcon}
-      chipsMode={chips && !!selectedItem}
-      classes={{
-        ...(classes as PropsObject | undefined),
-        wrapper: classnames(
-          icon ? styles.withIcon : undefined,
-          selectedItem?.icon ? styles.withItemIcon : undefined,
-          classes?.wrapper,
-        ),
-      }}
-    >
-      <input
-        ref={mergeRefs([inputRef, ref])}
-        id={inputId}
-        className={classnames(fieldStyles.input, styles.input, classes?.input)}
-        placeholder={chips && selectedItem ? undefined : placeholder}
-        {...inputProps}
-        value={chips ? '' : (selectedItem?.name ?? '')}
-        onChange={() => {}}
-        onClick={inputClickHandler}
-        disabled={disabled}
-      />
-      {chips && !!selectedItem && (
-        <span className={classnames(fieldStyles.chips, classes?.chips)}>
-          <InputChip
-            componentSize={componentSize}
-            disabled={disabled}
-            onClick={() => popoverTargetRef?.current?.click()}
-            onRemove={() => changeSelectedItem(undefined)}
-          >
-            {selectedItem.name}
-          </InputChip>
-        </span>
-      )}
-      {!!icon && (
-        <span onClick={inputClickHandler} className={classnames(styles.icon, classes?.icon)}>
-          {icon}
-        </span>
-      )}
-      {!!selectedItem?.icon && (
-        <span onClick={inputClickHandler} className={classnames(styles.itemIcon, classes?.itemIcon)}>
-          {selectedItem?.icon}
-        </span>
-      )}
-      <span onClick={inputClickHandler} className={classnames(fieldStyles.arrow, classes?.arrow)}>
-        <Arrow />
-      </span>
-      {showErrorIcon && error && (
-        <FieldErrorIcon error={error} componentSize={componentSize} className={classes?.errorIcon} />
-      )}
-      <Popover
-        placement="bottom-start"
-        classes={{
-          content: classnames(styles.popoverContent, 'styledScroll', classes?.popoverContent),
-          ...(classes?.popover as PropsObject | undefined),
-        }}
-        containerOffset={4}
-        description={
-          <SelectPopover
-            items={items}
-            classes={classes}
-            componentSize={componentSize}
-            selectedValue={selectedItem?.value}
-            changeSelectedItem={changeSelectedItem}
-          />
-        }
-      >
-        <div ref={popoverTargetRef} className={classnames(styles.popoverTarget)} />
-      </Popover>
-    </FieldShell>
-  );
-});

package/src/components/common/Select/models/Divider.ts

@@ -1,4 +0,0 @@
-export interface Divider {
-  type: 'divider';
-  name?: string;
-}

package/src/components/common/Select/models/Item.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-
-import { Maybe } from '@models/Maybe';
-
-export interface Item {
-  type: 'item';
-  name: string;
-  value: string;
-  icon?: ReactNode;
-  description?: string;
-  selected?: boolean;
-  disabled?: boolean;
-}
-
-export type MaybeItem = Maybe<Item>;