@snack-uikit/color-picker 0.0.1-preview-364c0f5c.0

package/src/components/ColorPicker.tsx

@@ -0,0 +1,209 @@
+import cn from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  HexAlphaColorPicker,
+  HexColorPicker,
+  HsvaColorPicker,
+  HsvColorPicker,
+  RgbaColorPicker,
+  RgbColorPicker,
+} from 'react-colorful';
+
+import { ButtonFilled, ButtonFunction } from '@snack-uikit/button';
+import { CheckSVG } from '@snack-uikit/icons';
+import { useLocale } from '@snack-uikit/locale';
+import { SegmentedControl } from '@snack-uikit/segmented-control';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { COLOR_MODE, COLOR_MODE_LABEL, ColorMode, DEFAULT_COLOR_MODE_CONFIG } from '../constants';
+import { FieldPrivate } from '../helperComponents';
+import { FieldAlphaColor } from '../helperComponents/FieldAlphaColor/FieldAlphaColor';
+import { Color, RawColor } from '../types';
+import { colorToRawValue, hexToRgba } from '../utils/convert';
+import { validHex } from '../utils/validate';
+import styles from './styles.module.scss';
+
+export type ColorPickerProps = WithSupportProps<{
+  /** Значение */
+  value?: Color;
+  /** Колбек на изменение */
+  onChange?(rawColor: Partial<RawColor>): void;
+  /** Значение с альфаканалом */
+  withAlpha?: boolean;
+  /** Применять изменения автоматически, если значение false - то изменения происходят по кнопке */
+  autoApply?: boolean;
+  /** Класснейм */
+  className?: string;
+
+  colorMode?: {
+    hex?: boolean;
+    rgb?: boolean;
+    hsv?: boolean;
+  };
+}>;
+
+export function ColorPicker({
+  value,
+  onChange,
+  withAlpha = true,
+  autoApply,
+  className,
+  colorMode: colorModeProp = DEFAULT_COLOR_MODE_CONFIG,
+  ...rest
+}: ColorPickerProps) {
+  const colorModeOptions = useMemo(() => {
+    const colorModeConfig: Record<ColorMode, boolean> = { ...DEFAULT_COLOR_MODE_CONFIG, ...colorModeProp };
+
+    return Object.keys(colorModeConfig).reduce(
+      (res, colorMode: ColorMode) => {
+        if (Boolean(colorModeConfig[colorMode])) {
+          res.push({
+            value: colorMode,
+            label: COLOR_MODE_LABEL[colorMode],
+          });
+        }
+
+        return res;
+      },
+      [] as { label: string; value: ColorMode }[],
+    );
+  }, [colorModeProp]);
+  const [rawValue, setRawValue] = useState(colorToRawValue(value || '#000'));
+  const [colorMode, setColorMode] = useState<ColorMode>(colorModeOptions[0].value);
+
+  const [tempHex, setTempHex] = useState<string>(rawValue.hex);
+
+  useEffect(() => {
+    if (value) {
+      const raw = colorToRawValue(value);
+
+      setRawValue(raw);
+      setTempHex(raw.hex);
+    }
+  }, [value]);
+
+  const handleChange = (color: Color) => {
+    const rawValue = colorToRawValue(color);
+    setRawValue(rawValue);
+    autoApply && onChange?.(rawValue);
+  };
+
+  const applyChange = () => {
+    onChange?.(rawValue);
+  };
+
+  const reset = () => {
+    value && setRawValue(colorToRawValue(value));
+  };
+
+  const { t } = useLocale('ColorPicker');
+
+  return (
+    <div className={cn(styles.container, 'osThemeSnack', className)} {...extractSupportProps(rest)}>
+      {colorMode === COLOR_MODE.Hex &&
+        (withAlpha ? (
+          <HexAlphaColorPicker onChange={handleChange} color={rawValue.hex} />
+        ) : (
+          <HexColorPicker onChange={handleChange} color={rawValue.hex} />
+        ))}
+
+      {colorMode === COLOR_MODE.Rbg &&
+        (withAlpha ? (
+          <RgbaColorPicker onChange={handleChange} color={rawValue.rgba} />
+        ) : (
+          <RgbColorPicker onChange={handleChange} color={rawValue.rgb} />
+        ))}
+
+      {colorMode === COLOR_MODE.Hsv &&
+        (withAlpha ? (
+          <HsvaColorPicker onChange={handleChange} color={rawValue.hsva} />
+        ) : (
+          <HsvColorPicker onChange={handleChange} color={rawValue.hsv} />
+        ))}
+
+      <div className={styles.colorModel}>
+        <SegmentedControl outline value={colorMode} size='s' onChange={setColorMode} items={colorModeOptions} />
+
+        <div className={styles.colorFields} data-mode={colorMode} data-with-alpha={withAlpha || undefined}>
+          <>
+            {colorMode === COLOR_MODE.Hex && (
+              <FieldPrivate
+                value={rawValue.hex.replace('#', '').substring(0, 6)}
+                error={!validHex(tempHex, withAlpha)}
+                inputType='text'
+                onChange={(value = '') => {
+                  setTempHex(value);
+
+                  if (validHex(value)) {
+                    handleChange({ ...hexToRgba(value), a: rawValue.rgba.a });
+                  }
+                }}
+              />
+            )}
+
+            {colorMode === COLOR_MODE.Rbg && (
+              <>
+                <FieldPrivate
+                  value={rawValue.rgb.r}
+                  max={255}
+                  onChange={value => {
+                    handleChange({ ...rawValue.rgba, r: Number(value) });
+                  }}
+                />
+                <FieldPrivate
+                  value={rawValue.rgb.g}
+                  max={255}
+                  onChange={value => {
+                    handleChange({ ...rawValue.rgba, g: Number(value) });
+                  }}
+                />
+                <FieldPrivate
+                  value={rawValue.rgb.b}
+                  max={255}
+                  onChange={value => {
+                    handleChange({ ...rawValue.rgba, b: Number(value) });
+                  }}
+                />
+              </>
+            )}
+
+            {colorMode === COLOR_MODE.Hsv && (
+              <>
+                <FieldPrivate
+                  value={rawValue.hsv.h}
+                  max={360}
+                  onChange={value => {
+                    handleChange({ ...rawValue.hsva, h: Number(value) });
+                  }}
+                />
+                <FieldPrivate
+                  value={rawValue.hsv.s}
+                  max={100}
+                  onChange={value => {
+                    handleChange({ ...rawValue.hsva, s: Number(value) });
+                  }}
+                />
+                <FieldPrivate
+                  value={rawValue.hsv.v}
+                  max={100}
+                  onChange={value => {
+                    handleChange({ ...rawValue.hsva, v: Number(value) });
+                  }}
+                />
+              </>
+            )}
+          </>
+
+          {withAlpha && <FieldAlphaColor rgba={rawValue.rgba} onChange={handleChange} />}
+        </div>
+      </div>
+
+      {!autoApply && (
+        <div className={styles.footer}>
+          <ButtonFunction label={t('cancel')} size='xs' onClick={reset} />
+          <ButtonFilled label={t('apply')} icon={<CheckSVG />} onClick={applyChange} size='xs' />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './ColorPicker';

package/src/components/styles.module.scss

@@ -0,0 +1,82 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-scroll';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-colorPicker';
+
+$orientations: 'vertical', 'horizontal';
+$sizes: 's', 'm';
+
+.container {
+  @include composite-var($color-picker-container);
+
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 248px;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+
+  box-sizing: border-box;
+  padding-top: $space-color-picker-footer-gap;
+
+  border-top: solid 1px $sys-neutral-decor-default;
+}
+
+.colorModel {
+  @include composite-var($color-picker-color-model);
+
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.colorFields {
+  @include composite-var($color-picker-color-model);
+
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  &[data-with-alpha] {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  &[data-mode='hex'] {
+    grid-template-columns: 1fr;
+
+    &[data-with-alpha] {
+      grid-template-columns: 1fr min-content;
+    }
+  }
+}
+
+$theme-name: osThemeSnack;
+$scrollbar-slider-active-zone: 12px;
+
+/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+:global {
+  .#{$theme-name} .react-colorful {
+    @include composite-var($color-picker-color-palette);
+
+    width: 100%;
+    min-height: 200px;
+
+    .react-colorful__saturation {
+      border-bottom-width: 8px;
+      border-radius: 0;
+    }
+
+    .react-colorful__pointer {
+      @include composite-var($color-picker-color-slider);
+
+      /* stylelint-disable-next-line color-no-hex */
+      border-color: #fff;
+      box-shadow: $box-shadow-elevation-level3;
+    }
+
+    .react-colorful__hue,
+    .react-colorful__alpha {
+      @include composite-var($color-picker-slider-track);
+    }
+  }
+}

package/src/constants.ts

@@ -0,0 +1,45 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+export const COLOR_MODE = {
+  Hex: 'hex',
+  Rbg: 'rbg',
+  Hsv: 'hsv',
+};
+
+export const COLOR_MODE_OPTIONS = [
+  {
+    value: COLOR_MODE.Hex,
+    label: 'HEX',
+  },
+  {
+    value: COLOR_MODE.Hsv,
+    label: 'HSV',
+  },
+  {
+    value: COLOR_MODE.Rbg,
+    label: 'RGB',
+  },
+];
+
+export const COLOR_MODE_LABEL = {
+  [COLOR_MODE.Hex]: 'HEX',
+  [COLOR_MODE.Rbg]: 'RGB',
+  [COLOR_MODE.Hsv]: 'HSV',
+};
+
+export const DEFAULT_COLOR_MODE_CONFIG = {
+  [COLOR_MODE.Hex]: true,
+  [COLOR_MODE.Rbg]: true,
+  [COLOR_MODE.Hsv]: true,
+};
+
+export type ColorMode = ValueOf<typeof COLOR_MODE>;
+
+export const RGBA_REGEX =
+  /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+
+export const HSVA_REGEX =
+  /hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+
+export const HSLA_REGEX =
+  /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;

package/src/helperComponents/FieldAlphaColor/FieldAlphaColor.tsx

@@ -0,0 +1,26 @@
+import { Color, RawColor, RgbaColor } from '../../types';
+import { FieldPrivate } from '../FieldPrivate';
+
+export type ColorPickerProps = {
+  /** Значение */
+  value?: Color;
+  /** Колбек на изменение */
+  onChange?(rawColor: Partial<RawColor>): void;
+  /** Значение с альфаканалом */
+  withAlpha?: boolean;
+  /** Применять изменения автоматически, если значение false - то изменения происходят по кнопке */
+  autoApply?: boolean;
+};
+
+export type FieldAlphaColorProps = {
+  rgba: RgbaColor;
+  onChange(color: Color): void;
+};
+
+export function FieldAlphaColor({ onChange, rgba }: FieldAlphaColorProps) {
+  const handleChange = (a: string) => {
+    onChange({ ...rgba, a: (Number(a) % 100) / 100 });
+  };
+
+  return <FieldPrivate value={rgba.a * 100} onChange={handleChange} inputType='number' min={0} max={100} />;
+}

package/src/helperComponents/FieldAlphaColor/index.ts

@@ -0,0 +1 @@
+export * from './FieldAlphaColor';

package/src/helperComponents/FieldPrivate/FieldPrivate.tsx

@@ -0,0 +1,85 @@
+import cn from 'classnames';
+import { CSSProperties, MouseEventHandler, useEffect, useRef, useState } from 'react';
+
+import { InputPrivate } from '@snack-uikit/input-private';
+
+import styles from './styles.module.scss';
+
+export type FieldPrivateProps = {
+  className?: string;
+  disabled?: boolean;
+  focused?: boolean;
+  style?: CSSProperties;
+  min?: number;
+  max?: number;
+  inputType?: 'text' | 'number';
+  value?: string | number;
+  onChange?(value?: string): void;
+  error?: boolean;
+};
+
+export function FieldPrivate({
+  className,
+  disabled,
+  focused,
+  style,
+  value = '',
+  onChange,
+  min = 0,
+  max = 255,
+  inputType = 'number',
+  error,
+}: FieldPrivateProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleContainerClick: MouseEventHandler<HTMLDivElement> = () => {
+    if (disabled) {
+      return;
+    }
+    inputRef?.current?.focus();
+  };
+
+  const [rawValue, setRawValue] = useState<string>('');
+
+  const handleBlur = () => {
+    if (inputType === 'number') {
+      const rawNumberValue = Number(rawValue) || 0;
+      const newValue = String(Math.min(Math.max(min, rawNumberValue), Math.min(max, rawNumberValue)));
+
+      setRawValue(newValue);
+      onChange?.(newValue);
+
+      return;
+    }
+
+    onChange?.(rawValue);
+  };
+
+  useEffect(() => {
+    setRawValue(String(value));
+  }, [value]);
+
+  return (
+    <div
+      className={cn(className, styles.container)}
+      style={style}
+      data-focused={focused || undefined}
+      data-validation={error ? 'error' : undefined}
+      data-test-id='field-container-private'
+      onClick={handleContainerClick}
+      data-size='s'
+      data-variant='single-line-container'
+      role='textbox'
+      tabIndex={-1}
+    >
+      <InputPrivate
+        value={String(rawValue)}
+        onChange={setRawValue}
+        onBlur={handleBlur}
+        type={inputType}
+        ref={inputRef}
+        {...(inputType === 'number' ? { min, max } : {})}
+      />
+    </div>
+  );
+}

package/src/helperComponents/FieldPrivate/index.ts

@@ -0,0 +1 @@
+export * from './FieldPrivate';

package/src/helperComponents/FieldPrivate/styles.module.scss

@@ -0,0 +1,136 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+/* stylelint-disable no-descending-specificity */
+
+$sizes: 's', 'm', 'l';
+$variants: 'single-line-container', 'multi-line-container';
+
+@mixin validationState($rainbowColor, $bgDefault) {
+  background-color: simple-var($theme-variables, 'sys', $bgDefault, 'background1-level');
+  border-color: simple-var($theme-variables, 'sys', $bgDefault, 'decor-default');
+
+  &:hover {
+    background-color: $sys-neutral-background2-level;
+    border-color: simple-var($theme-variables, 'sys', $rainbowColor, 'decor-hovered');
+  }
+
+  &:not([data-readonly]) {
+    &:focus-within,
+    &[data-focused] {
+      &:not([data-disabled]) {
+        @include outline-var($container-focused-m);
+
+        background-color: simple-var($sys-neutral-background2-level);
+        border-color: simple-var($theme-variables, 'sys', $rainbowColor, 'accent-default');
+        outline-color: simple-var($theme-variables, 'sys', $rainbowColor, 'decor-activated');
+      }
+    }
+  }
+}
+
+.container {
+  @include validationState('primary', 'neutral');
+
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  box-sizing: border-box;
+  min-width: 52px;
+
+  border-style: solid;
+
+  &[data-validation='error'] {
+    @include validationState('red', 'red');
+  }
+
+  &[data-selectable] {
+    &,
+    input,
+    select,
+    textarea,
+    span {
+      cursor: pointer;
+    }
+  }
+
+  &[data-readonly] {
+    &,
+    input,
+    select,
+    textarea,
+    span {
+      cursor: default;
+    }
+
+    &,
+    &:hover {
+      background-color: simple-var($sys-neutral-decor-disabled);
+      border-color: simple-var($sys-neutral-decor-disabled);
+    }
+
+    &:focus-within,
+    &[data-focused] {
+      @include outline-var($container-focused-m);
+
+      background-color: simple-var($sys-neutral-decor-disabled);
+      border-color: simple-var($sys-neutral-decor-disabled);
+      outline: none;
+    }
+  }
+
+  &[data-disabled] {
+    &,
+    input,
+    select,
+    textarea,
+    span {
+      cursor: not-allowed;
+      background-color: simple-var($sys-neutral-background);
+    }
+
+    &,
+    &:focus-within,
+    &[data-focused],
+    &:hover {
+      background-color: simple-var($sys-neutral-background);
+      border-color: simple-var($sys-neutral-decor-disabled);
+      outline: none;
+    }
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($fields, 'container', $size);
+
+      &,
+      input,
+      select,
+      textarea,
+      span {
+        @include composite-var($theme-variables, 'sans', 'body', $size);
+      }
+
+      @each $variant in $variants {
+        &[data-variant='#{$variant}'] {
+          @include composite-var($fields, $variant, $size);
+        }
+      }
+    }
+  }
+}
+
+.prefix {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: $sys-neutral-text-disabled;
+}
+
+.postfix {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: $space-fields-postfix-gap;
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,2 @@
+export * from './FieldPrivate';
+export * from './FieldAlphaColor';

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './types';

package/src/types.ts

@@ -0,0 +1,15 @@
+import { HslaColor, HslColor, HsvaColor, HsvColor, RgbaColor, RgbColor } from 'react-colorful';
+
+export type { HslaColor, HslColor, HsvaColor, HsvColor, RgbaColor, RgbColor };
+
+export type Color = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor | string;
+
+export type RawColor = {
+  hex: string;
+  rgb: RgbColor;
+  hsl: HslColor;
+  hsv: HsvColor;
+  rgba: RgbaColor;
+  hsla: HslaColor;
+  hsva: HsvaColor;
+};