nntc-ui 0.2.6 → 0.2.8

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

@@ -1,198 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
-
-import { UiProps } from '@models/UiProps';
-
-import { ColorPicker } from './ColorPicker';
-
-type Props = UiProps<{
-  variant?: 'filled' | 'filledBlack' | 'outlined';
-  componentSize?: 'small' | 'medium' | 'large' | 'extraLarge';
-  fullWidth?: boolean;
-  label?: string;
-  enableAlpha?: boolean;
-  disableLabel?: boolean;
-  onValueChange?: (newValue: string) => void;
-}> &
-  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-
-const meta: Meta<typeof ColorPicker> = {
-  title: 'Components/ColorPicker',
-  component: ColorPicker,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['outlined', 'filled', 'filledBlack'],
-      description: 'Вариант отображения компонента',
-    },
-    componentSize: {
-      control: 'select',
-      options: ['small', 'medium', 'large', 'extraLarge'],
-      description: 'Размер компонента',
-    },
-    fullWidth: {
-      control: 'boolean',
-      description: 'Растянуть на всю ширину',
-    },
-    label: {
-      control: 'text',
-      description: 'Текст метки',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Отключить компонент',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Текст плейсхолдера',
-    },
-    defaultValue: {
-      control: 'text',
-      description: 'Начальное значение цвета',
-    },
-    enableAlpha: {
-      control: 'boolean',
-      description: 'Включить выбор прозрачности',
-    },
-    disableLabel: {
-      control: 'boolean',
-      description: 'Показать только квадратик цвета без поля и отступов',
-    },
-    onValueChange: {
-      action: 'changed',
-      description: 'Обработчик изменения значения',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ColorPicker>;
-
-const ColorPickerWrapper = (args: Props) => {
-  const [value, setValue] = useState(args.defaultValue || '#AABBCC');
-
-  return (
-    <div style={{ width: '300px' }}>
-      <ColorPicker {...args} defaultValue={value} onValueChange={setValue} />
-    </div>
-  );
-};
-
-export const Default: Story = {
-  render: (args) => <ColorPickerWrapper {...args} />,
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    fullWidth: false,
-  },
-};
-
-export const WithLabel: Story = {
-  render: (args) => <ColorPickerWrapper {...args} />,
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    label: 'Выберите цвет',
-  },
-};
-
-export const Disabled: Story = {
-  render: (args) => <ColorPickerWrapper {...args} />,
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    disabled: true,
-  },
-};
-
-export const Filled: Story = {
-  render: (args) => <ColorPickerWrapper {...args} />,
-  args: {
-    variant: 'filled',
-    componentSize: 'medium',
-  },
-};
-
-export const Small: Story = {
-  render: (args) => <ColorPickerWrapper {...args} />,
-  args: {
-    variant: 'outlined',
-    componentSize: 'small',
-  },
-};
-
-export const Large: Story = {
-  render: (args) => <ColorPickerWrapper {...args} />,
-  args: {
-    variant: 'outlined',
-    componentSize: 'large',
-  },
-};
-
-export const WithDefaultValue: Story = {
-  render: (args) => <ColorPickerWrapper {...args} />,
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    defaultValue: '#FF0000',
-  },
-};
-
-export const WithAlpha: Story = {
-  render: (args) => <ColorPickerWrapper {...args} />,
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    enableAlpha: true,
-    defaultValue: '#AABBCC80',
-    label: 'Цвет с прозрачностью',
-  },
-};
-
-export const SwatchOnly: Story = {
-  render: (args) => <ColorPickerWrapper {...args} />,
-  args: {
-    disableLabel: true,
-    componentSize: 'medium',
-    defaultValue: '#3A86FF',
-  },
-};
-
-export const FilledBlack: Story = {
-  render: (args) => <ColorPickerWrapper {...args} />,
-  args: {
-    variant: 'filledBlack',
-    componentSize: 'medium',
-    label: 'Filled black',
-  },
-};
-
-export const WithError: Story = {
-  render: (args) => <ColorPickerWrapper {...args} />,
-  args: {
-    variant: 'filledBlack',
-    componentSize: 'medium',
-    label: 'Label',
-    error: {
-      name: 'Error name',
-      description: 'Подробное описание ошибки',
-    },
-  },
-};
-
-export const WithErrorIcon: Story = {
-  render: (args) => <ColorPickerWrapper {...args} />,
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    error: {
-      name: 'Error name',
-      description: 'Подробное описание ошибки',
-    },
-  },
-};

package/src/components/common/ColorPicker/ColorPicker.tsx

@@ -1,157 +0,0 @@
-import classNames from 'classnames';
-import { DetailedHTMLProps, InputHTMLAttributes, MouseEvent, forwardRef, useCallback, useRef, useState } from 'react';
-import { HexAlphaColorPicker, HexColorPicker } from 'react-colorful';
-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 { Popover } from '@components/view/Popover';
-import { Arrow } from '@components/view/Popover/ui/Arrow';
-import { PropsObject, UiProps } from '@models/UiProps';
-
-import * as styles from './colorPicker.module.css';
-
-interface Props {
-  variant?: FieldVariant;
-  componentSize?: FieldSize;
-  fullWidth?: boolean;
-  label?: string;
-  error?: FieldError;
-  enableAlpha?: boolean;
-  disableLabel?: boolean;
-  onValueChange?: (newValue: string) => void;
-}
-
-export const ColorPicker = forwardRef<
-  HTMLInputElement,
-  UiProps<Props> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
->(function ColorPicker(props, ref) {
-  const {
-    variant = 'outlined',
-    componentSize = 'medium',
-    fullWidth,
-    label,
-    error,
-    classes,
-    placeholder,
-    disabled,
-    defaultValue,
-    id,
-    enableAlpha = false,
-    disableLabel = false,
-    onValueChange,
-    ...inputProps
-  } = props;
-
-  const [color, setColor] = useState(defaultValue?.toString() ?? '#AABBCC');
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const popoverTargetRef = useRef<HTMLDivElement>(null);
-
-  const changeColorHandler = useCallback((newColor: string) => {
-    setColor(newColor.toUpperCase());
-    onValueChange?.(newColor.toUpperCase());
-  }, []);
-
-  const inputClickHandler = useCallback(
-    (e: MouseEvent) => {
-      e.preventDefault();
-      if (!disabled) popoverTargetRef?.current?.click();
-    },
-    [popoverTargetRef, disabled],
-  );
-
-  const inputId = id ?? uuidv4();
-  const showErrorIcon = !!error && !label && !disableLabel;
-
-  const colorPicker = (
-    <Popover
-      placement="bottom-start"
-      classes={{
-        content: classNames(styles.popoverContent, enableAlpha && styles.popoverContentAlpha, classes?.popoverContent),
-        ...(classes?.popover as PropsObject | undefined),
-      }}
-      containerOffset={4}
-      description={
-        enableAlpha ? (
-          <HexAlphaColorPicker color={color} onChange={changeColorHandler} />
-        ) : (
-          <HexColorPicker color={color} onChange={changeColorHandler} />
-        )
-      }
-    >
-      <div ref={popoverTargetRef} className={classNames(styles.popoverTarget)} />
-    </Popover>
-  );
-
-  const swatch = (
-    <span
-      onClick={inputClickHandler}
-      className={classNames(
-        styles.swatch,
-        enableAlpha && styles.swatchAlpha,
-        disableLabel && styles.swatchOnly,
-        disabled && styles.swatchDisabled,
-        classes?.icon,
-      )}
-      style={{ ['--swatch-color' as string]: color }}
-    />
-  );
-
-  if (disableLabel) {
-    return (
-      <div data-size={componentSize} className={classNames(styles.rootOnly, classes?.root)}>
-        <input
-          ref={mergeRefs([inputRef, ref])}
-          id={inputId}
-          className={styles.hiddenInput}
-          {...inputProps}
-          value={color}
-          onChange={() => {}}
-          disabled={disabled}
-          tabIndex={-1}
-          aria-hidden
-        />
-        {swatch}
-        {colorPicker}
-      </div>
-    );
-  }
-
-  return (
-    <FieldShell
-      variant={variant}
-      componentSize={componentSize}
-      fullWidth={fullWidth}
-      label={label}
-      error={error}
-      inputId={inputId}
-      onLabelClick={inputClickHandler}
-      hasStartIcon
-      hasArrow
-      hasErrorIcon={showErrorIcon}
-      classes={{ ...(classes as PropsObject | undefined), root: classNames(styles.root, classes?.root) }}
-    >
-      <input
-        ref={mergeRefs([inputRef, ref])}
-        id={inputId}
-        className={classNames(fieldStyles.input, styles.input, classes?.input)}
-        placeholder={placeholder}
-        {...inputProps}
-        value={color}
-        onChange={() => {}}
-        onClick={inputClickHandler}
-        disabled={disabled}
-      />
-      {swatch}
-      <span onClick={inputClickHandler} className={classNames(fieldStyles.arrow, classes?.arrow)}>
-        <Arrow />
-      </span>
-      {showErrorIcon && error && (
-        <FieldErrorIcon error={error} componentSize={componentSize} className={classes?.errorIcon} />
-      )}
-      {colorPicker}
-    </FieldShell>
-  );
-});

package/src/components/common/ColorPicker/colorPicker.module.css

@@ -1,145 +0,0 @@
-.root {
-  min-width: 162px;
-}
-
-.root-only {
-  position: relative;
-  display: inline-flex;
-  width: fit-content;
-  line-height: 0;
-}
-
-.hidden-input {
-  position: absolute;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.input {
-  cursor: pointer;
-}
-
-.input:disabled {
-  cursor: default;
-}
-
-.swatch {
-  position: absolute;
-  top: 50%;
-  z-index: 2;
-  width: 14px;
-  height: 14px;
-  cursor: pointer;
-  background-color: var(--swatch-color);
-  border-radius: 2px;
-  transform: translateY(-50%);
-}
-
-.swatch-only {
-  position: relative;
-  top: auto;
-  left: auto;
-  display: block;
-  border-radius: 4px;
-  transform: none;
-}
-
-.swatch-disabled {
-  cursor: default;
-  opacity: 0.4;
-}
-
-.swatch-alpha {
-  background-color: transparent;
-  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
-    linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%),
-    linear-gradient(-45deg, transparent 75%, #ccc 75%);
-  background-position:
-    0 0,
-    0 4px,
-    4px -4px,
-    -4px 0;
-  background-size: 8px 8px;
-}
-
-.swatch-alpha::after {
-  position: absolute;
-  inset: 0;
-  content: '';
-  background-color: var(--swatch-color);
-  border-radius: inherit;
-}
-
-[data-size='small'] .swatch {
-  left: 6px;
-}
-
-[data-size='medium'] .swatch {
-  left: 8px;
-  width: 16px;
-  height: 16px;
-}
-
-[data-size='large'] .swatch,
-[data-size='extraLarge'] .swatch {
-  left: 6px;
-  width: 20px;
-  height: 20px;
-}
-
-.root-only[data-size='small'] .swatch-only {
-  left: auto;
-  width: 24px;
-  height: 24px;
-}
-
-.root-only[data-size='medium'] .swatch-only {
-  left: auto;
-  width: 28px;
-  height: 28px;
-}
-
-.root-only[data-size='large'] .swatch-only {
-  left: auto;
-  width: 32px;
-  height: 32px;
-}
-
-.root-only[data-size='extraLarge'] .swatch-only {
-  left: auto;
-  width: 40px;
-  height: 40px;
-}
-
-[data-size='small'] .input {
-  padding-left: 24px;
-}
-
-[data-size='medium'] .input {
-  padding-left: 28px;
-}
-
-[data-size='large'] .input,
-[data-size='extraLarge'] .input {
-  padding-left: 34px;
-}
-
-.popover-target {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  height: 0;
-}
-
-.popover-content {
-  max-height: 250px;
-}
-
-.popover-content-alpha {
-  max-height: 280px;
-}