nntc-ui 0.2.4 → 0.2.6

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

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

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

@@ -0,0 +1,145 @@
+.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;
+}

package/{components/common/ColorPicker/index.d.ts → src/components/common/ColorPicker/index.ts}

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