nntc-ui 0.2.4 → 0.2.6

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

@@ -0,0 +1,90 @@
+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/{components/common/RadioButton/index.d.ts → src/components/common/RadioButton/index.ts}

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

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

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

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

@@ -0,0 +1,181 @@
+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/{components/common/Select/index.d.ts → src/components/common/Select/index.ts}

@@ -1,5 +1,5 @@
 export { Select } from './Select';
+
 export type { Item } from './models/Item';
 export type { MaybeItem } from './models/Item';
 export type { Divider } from './models/Divider';
-//# sourceMappingURL=index.d.ts.map

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

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

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

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