@sanity/color-input 4.0.6 → 4.0.7

package/src/ColorInput.tsx

@@ -1,97 +0,0 @@
-import {AddIcon} from '@sanity/icons'
-import {Button} from '@sanity/ui'
-import {startTransition, useCallback, useDeferredValue, useEffect, useRef, useState} from 'react'
-import {type ObjectInputProps, set, setIfMissing, unset} from 'sanity'
-import {useEffectEvent} from 'use-effect-event'
-
-import {ColorPicker} from './ColorPicker'
-import type {ColorSchemaType, ColorValue} from './types'
-
-const DEFAULT_COLOR: ColorValue & {source: string} = {
-  hex: '#24a3e3',
-  hsl: {h: 200, s: 0.7732, l: 0.5156, a: 1},
-  hsv: {h: 200, s: 0.8414, v: 0.8901, a: 1},
-  rgb: {r: 46, g: 163, b: 227, a: 1},
-  source: 'hex',
-}
-
-export default function ColorInput(props: ObjectInputProps) {
-  const {onChange, readOnly} = props
-  const value = props.value as ColorValue | undefined
-  const type = props.schemaType as ColorSchemaType
-  const focusRef = useRef<HTMLButtonElement>(null)
-
-  // use local state so we can have instant ui updates while debouncing patch emits
-  const [color, setColor] = useState(value)
-  // Marking the `setColor` in a transition allows React to interrupt render should the user start dragging the input before React is finished rendering
-  useEffect(() => startTransition(() => setColor(value)), [value])
-
-  // The color picker emits onChange events continuously while the user is sliding the
-  // hue/saturation/alpha selectors. This debounces the event to avoid excessive patches
-  // and massively improve render performance and avoid jank
-  const [emitColor, setEmitColor] = useState<typeof value>(undefined)
-  const debouncedColor = useDeferredValue(emitColor)
-  const handleChange = useEffectEvent((nextColor: ColorValue) => {
-    const fieldPatches = type.fields
-      .filter((field) => field.name in nextColor)
-      .map((field) => {
-        const nextFieldValue = nextColor[field.name as keyof ColorValue]
-        const isObject = field.type.jsonType === 'object'
-        return set(
-          isObject ? Object.assign({_type: field.type.name}, nextFieldValue) : nextFieldValue,
-          [field.name],
-        )
-      })
-
-    onChange([
-      setIfMissing({_type: type.name}),
-      set(type.name, ['_type']),
-      set(nextColor.rgb?.a, ['alpha']),
-      ...fieldPatches,
-    ])
-  })
-  useEffect(() => {
-    if (!debouncedColor) return undefined
-    const raf = requestAnimationFrame(() => handleChange(debouncedColor))
-    return () => cancelAnimationFrame(raf)
-  }, [debouncedColor])
-
-  const handleCreateColor = useCallback(() => {
-    setColor(DEFAULT_COLOR)
-    setEmitColor(DEFAULT_COLOR)
-  }, [])
-
-  const handleColorChange = useCallback((nextColor: ColorValue) => {
-    setColor(nextColor)
-    setEmitColor(nextColor)
-  }, [])
-
-  const handleUnset = useCallback(() => {
-    setColor(undefined)
-    onChange(unset())
-  }, [onChange])
-
-  return (
-    <>
-      {value && value.hex ? (
-        <ColorPicker
-          color={color}
-          onChange={handleColorChange}
-          readOnly={readOnly || (typeof type.readOnly === 'boolean' && type.readOnly)}
-          disableAlpha={!!type.options?.disableAlpha}
-          colorList={type.options?.colorList}
-          onUnset={handleUnset}
-        />
-      ) : (
-        <Button
-          icon={AddIcon}
-          mode="ghost"
-          text="Create color"
-          ref={focusRef}
-          disabled={Boolean(readOnly)}
-          onClick={handleCreateColor}
-        />
-      )}
-    </>
-  )
-}

package/src/ColorList.tsx

@@ -1,70 +0,0 @@
-import {Flex} from '@sanity/ui'
-import {memo} from 'react'
-import type {Color, ColorChangeHandler} from 'react-color'
-import {styled} from 'styled-components'
-import tinycolor from 'tinycolor2'
-
-const ColorListWrap = styled(Flex)`
-  gap: 0.25em;
-`
-
-const ColorBoxContainer = styled.div`
-  width: 2.1em;
-  height: 2.1em;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  border-radius: 3px;
-  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=')
-    left center #fff;
-`
-
-const ColorBox = styled.div`
-  border-radius: inherit;
-  box-shadow: inset 0 0 0 1px var(--card-shadow-outline-color);
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-`
-
-interface ValidatedColor {
-  color: Color
-  backgroundColor: string
-}
-
-interface ColorListProps {
-  colors?: Array<Color>
-  onChange: ColorChangeHandler<Color>
-}
-
-const validateColors = (colors: Array<Color>) =>
-  colors.reduce((cls: Array<ValidatedColor>, c) => {
-    // @ts-expect-error fix types later
-    const color = c.hex ? tinycolor(c.hex) : tinycolor(c)
-    if (color.isValid()) {
-      cls.push({
-        color: c,
-        backgroundColor: color.toRgbString(),
-      })
-    }
-    return cls
-  }, [])
-
-export const ColorList = memo(function ColorList({colors, onChange}: ColorListProps) {
-  if (!colors) return null
-  return (
-    <ColorListWrap wrap="wrap">
-      {validateColors(colors).map(({color, backgroundColor}, idx) => (
-        <ColorBoxContainer
-          key={`${backgroundColor}-${idx}`}
-          onClick={() => {
-            onChange(color)
-          }}
-        >
-          <ColorBox style={{background: backgroundColor}} />
-        </ColorBoxContainer>
-      ))}
-    </ColorListWrap>
-  )
-})

package/src/ColorPicker.tsx

@@ -1,152 +0,0 @@
-import {TrashIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Inline, Stack, Text} from '@sanity/ui'
-import {type Color, CustomPicker} from 'react-color'
-import {Alpha, Checkboard, Hue, Saturation} from 'react-color/lib/components/common'
-import type {CustomPickerInjectedProps} from 'react-color/lib/components/common/ColorWrap'
-import {styled} from 'styled-components'
-
-import {ColorList} from './ColorList'
-import {ColorPickerFields} from './ColorPickerFields'
-import type {ColorValue} from './types'
-
-const ColorBox = styled(Box)`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-`
-
-const ReadOnlyContainer = styled(Flex)`
-  margin-top: 6rem;
-  background-color: var(--card-bg-color);
-  position: relative;
-  width: 100%;
-`
-
-export interface ColorPickerProps extends CustomPickerInjectedProps<Color> {
-  width?: string
-  disableAlpha: boolean
-  colorList?: Array<Color>
-  readOnly?: boolean
-  onUnset: () => void
-  color: ColorValue
-}
-
-const ColorPickerInner = (props: ColorPickerProps) => {
-  const {
-    width,
-    color: {rgb, hex, hsv, hsl},
-    onChange,
-    onUnset,
-    disableAlpha,
-    colorList,
-    readOnly,
-  } = props
-
-  if (!hsl || !hsv) {
-    return null
-  }
-
-  return (
-    <div style={{width}}>
-      <Card padding={1} border radius={1}>
-        <Stack space={2}>
-          {!readOnly && (
-            <>
-              <Card overflow="hidden" style={{position: 'relative', height: '5em'}}>
-                <Saturation onChange={onChange} hsl={hsl} hsv={hsv} />
-              </Card>
-
-              <Card
-                shadow={1}
-                radius={3}
-                overflow="hidden"
-                style={{position: 'relative', height: '10px'}}
-              >
-                <Hue hsl={hsl} onChange={!readOnly && onChange} />
-              </Card>
-
-              {!disableAlpha && (
-                <Card
-                  shadow={1}
-                  radius={3}
-                  overflow="hidden"
-                  style={{position: 'relative', height: '10px', background: '#fff'}}
-                >
-                  <Alpha rgb={rgb} hsl={hsl} onChange={onChange} />
-                </Card>
-              )}
-            </>
-          )}
-          <Flex>
-            <Card
-              flex={1}
-              radius={2}
-              overflow="hidden"
-              style={{position: 'relative', minWidth: '4em', background: '#fff'}}
-            >
-              <Checkboard
-                size={8}
-                white="transparent"
-                grey="rgba(0,0,0,.08)"
-                renderers={{} as {canvas: unknown}}
-              />
-              <ColorBox
-                style={{
-                  backgroundColor: `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`,
-                }}
-              />
-
-              {readOnly && (
-                <ReadOnlyContainer
-                  padding={2}
-                  paddingBottom={1}
-                  sizing="border"
-                  justify="space-between"
-                >
-                  <Stack space={3} marginTop={1}>
-                    <Text size={3} weight="bold">
-                      {hex}
-                    </Text>
-
-                    <Inline space={3}>
-                      <Text size={1}>
-                        <strong>RGB: </strong>
-                        {rgb?.r} {rgb?.g} {rgb?.b}
-                      </Text>
-                      <Text size={1}>
-                        <strong>HSL: </strong> {Math.round(hsl?.h ?? 0)}{' '}
-                        {Math.round((hsl?.s ?? 0) * 100)}% {Math.round((hsl?.l ?? 0) * 100)}%
-                      </Text>
-                    </Inline>
-                  </Stack>
-                </ReadOnlyContainer>
-              )}
-            </Card>
-
-            {!readOnly && (
-              <Flex align="flex-start" marginLeft={2}>
-                <Box style={{width: 200}}>
-                  <ColorPickerFields
-                    rgb={rgb}
-                    hsl={hsl}
-                    hex={hex}
-                    onChange={onChange}
-                    disableAlpha={disableAlpha}
-                  />
-                </Box>
-                <Box marginLeft={2}>
-                  <Button onClick={onUnset} title="Delete color" icon={TrashIcon} tone="critical" />
-                </Box>
-              </Flex>
-            )}
-          </Flex>
-          {colorList && <ColorList colors={colorList} onChange={onChange} />}
-        </Stack>
-      </Card>
-    </div>
-  )
-}
-
-export const ColorPicker = CustomPicker(ColorPickerInner)

package/src/ColorPickerFields.tsx

@@ -1,144 +0,0 @@
-import {Box, Flex, useTheme} from '@sanity/ui'
-import {useCallback, useMemo} from 'react'
-import type {Color, ColorChangeHandler, HSLColor, RGBColor} from 'react-color'
-import {EditableInput} from 'react-color/lib/components/common'
-import type {EditableInputStyles} from 'react-color/lib/components/common/EditableInput'
-// @ts-expect-error missing export
-import {isValidHex} from 'react-color/lib/helpers/color'
-
-interface ColorPickerFieldsProps {
-  rgb?: RGBColor
-  hsl?: HSLColor
-  hex?: string
-  disableAlpha: boolean
-  onChange: ColorChangeHandler<Color>
-}
-
-export const ColorPickerFields = ({
-  onChange,
-  rgb,
-  hsl,
-  hex,
-  disableAlpha,
-}: ColorPickerFieldsProps) => {
-  const {sanity} = useTheme()
-
-  const inputStyles: EditableInputStyles = useMemo(
-    () => ({
-      input: {
-        width: '80%',
-        padding: '4px 10% 3px',
-        border: 'none',
-        boxShadow: `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`,
-        color: sanity.color.input.default.enabled.fg,
-        backgroundColor: sanity.color.input.default.enabled.bg,
-        fontSize: sanity.fonts.text.sizes[0].fontSize,
-        textAlign: 'center',
-      },
-      label: {
-        display: 'block',
-        textAlign: 'center',
-        fontSize: sanity.fonts.label.sizes[0].fontSize,
-        color: sanity.color.base.fg,
-        paddingTop: '3px',
-        paddingBottom: '4px',
-        textTransform: 'capitalize',
-      },
-    }),
-    [sanity],
-  )
-
-  const handleChange: ColorChangeHandler<Record<string, string>> = useCallback(
-    (data) => {
-      if ('hex' in data && data['hex'] && isValidHex(data['hex'])) {
-        onChange({
-          hex: data['hex'],
-          source: 'hex',
-        })
-      } else if (
-        rgb &&
-        (('r' in data && data['r']) || ('g' in data && data['g']) || ('b' in data && data['b']))
-      ) {
-        onChange({
-          r: Number(data['r']) || rgb.r,
-          g: Number(data['g']) || rgb.g,
-          b: Number(data['b']) || rgb.b,
-          a: rgb.a,
-          source: 'rgb',
-        })
-      } else if (hsl && 'a' in data && data['a']) {
-        let alpha = Number(data['a'])
-        if (alpha < 0) {
-          alpha = 0
-        } else if (alpha > 100) {
-          alpha = 100
-        }
-        alpha /= 100
-
-        onChange({
-          h: hsl.h,
-          s: hsl.s,
-          l: hsl.l,
-          a: alpha,
-          source: 'hsl',
-        })
-      }
-    },
-    [onChange, hsl, rgb],
-  )
-
-  return (
-    <Flex>
-      <Box flex={2} marginRight={1}>
-        <EditableInput
-          style={inputStyles}
-          label="hex"
-          value={hex?.replace('#', '')}
-          onChange={handleChange}
-        />
-      </Box>
-      <Box flex={1} marginRight={1}>
-        <EditableInput
-          style={inputStyles}
-          label="r"
-          value={rgb?.r}
-          onChange={handleChange}
-          dragLabel
-          dragMax={255}
-        />
-      </Box>
-      <Box flex={1} marginRight={1}>
-        <EditableInput
-          style={inputStyles}
-          label="g"
-          value={rgb?.g}
-          onChange={handleChange}
-          dragLabel
-          dragMax={255}
-        />
-      </Box>
-      <Box flex={1} marginRight={1}>
-        <EditableInput
-          style={inputStyles}
-          label="b"
-          value={rgb?.b}
-          onChange={handleChange}
-          dragLabel
-          dragMax={255}
-        />
-      </Box>
-      {!disableAlpha && (
-        <Box flex={1}>
-          <EditableInput
-            style={inputStyles}
-            label="a"
-            value={Math.round((rgb?.a ?? 1) * 100)}
-            onChange={handleChange}
-            dragLabel
-            dragMax={100}
-          />
-        </Box>
-      )}
-    </Flex>
-  )
-}

package/src/LazyColorInput.tsx

@@ -1,3 +0,0 @@
-import {lazy} from 'react'
-
-export const ColorInput = lazy(() => import('./ColorInput'))

package/src/index.ts

@@ -1,18 +0,0 @@
-import {definePlugin} from 'sanity'
-
-import {color, type ColorDefinition} from './schemas/color'
-import {hslaColor} from './schemas/hslaColor'
-import {hsvaColor} from './schemas/hsvaColor'
-import {rgbaColor} from './schemas/rgbaColor'
-
-export const colorInput = definePlugin({
-  name: '@sanity/color-input',
-  schema: {
-    types: [hslaColor, hsvaColor, rgbaColor, color],
-  },
-})
-
-export {color, hslaColor, hsvaColor, rgbaColor}
-export {ColorInput} from './LazyColorInput'
-export type {ColorDefinition}
-export type {ColorInputProps, ColorOptions, ColorSchemaType, ColorValue} from './types'

package/src/schemas/color.tsx

@@ -1,98 +0,0 @@
-import {defineType, type ObjectDefinition} from 'sanity'
-
-import {ColorInput} from '../LazyColorInput'
-import {type ColorOptions} from '../types'
-
-const round = (val: number = 1) => Math.round(val * 100)
-
-const colorTypeName = 'color' as const
-
-/**
- * @public
- */
-export interface ColorDefinition extends Omit<ObjectDefinition, 'type' | 'fields' | 'options'> {
-  type: typeof colorTypeName
-  options?: ColorOptions
-}
-
-declare module '@sanity/types' {
-  // makes type: 'color' narrow correctly when using defineTyp/defineField/defineArrayMember
-  export interface IntrinsicDefinitions {
-    color: ColorDefinition
-  }
-}
-
-export const color = defineType({
-  name: colorTypeName,
-  type: 'object',
-  title: 'Color',
-  components: {input: ColorInput},
-  fields: [
-    {
-      title: 'Hex',
-      name: 'hex',
-      type: 'string',
-    },
-    {
-      title: 'Alpha',
-      name: 'alpha',
-      type: 'number',
-    },
-    {
-      title: 'Hue Saturation Lightness',
-      name: 'hsl',
-      type: 'hslaColor',
-    },
-    {
-      title: 'Hue Saturation Value',
-      name: 'hsv',
-      type: 'hsvaColor',
-    },
-    {
-      title: 'Red Green Blue (rgb)',
-      name: 'rgb',
-      type: 'rgbaColor',
-    },
-  ],
-  preview: {
-    select: {
-      title: 'hex',
-      alpha: 'alpha',
-      hex: 'hex',
-      hsl: 'hsl',
-    },
-    prepare({
-      title,
-      hex,
-      hsl,
-      alpha,
-    }: {
-      title?: string
-      alpha?: number
-      hex?: string
-      hsl?: {h: number; s: number; l: number}
-    }) {
-      let subtitle = hex || 'No color set'
-      if (hsl) {
-        subtitle = `H:${round(hsl.h)} S:${round(hsl.s)} L:${round(hsl.l)} A:${round(alpha)}`
-      }
-      return {
-        title: title,
-        subtitle: subtitle,
-        media: () => (
-          <div
-            style={{
-              backgroundColor: hex ?? '#000',
-              opacity: alpha ?? 1,
-              position: 'absolute',
-              height: '100%',
-              width: '100%',
-              top: '0',
-              left: '0',
-            }}
-          />
-        ),
-      }
-    },
-  },
-})

package/src/schemas/hslaColor.ts

@@ -1,13 +0,0 @@
-import {defineType} from 'sanity'
-
-export const hslaColor = defineType({
-  title: 'Hue Saturation Lightness',
-  name: 'hslaColor',
-  type: 'object',
-  fields: [
-    {name: 'h', type: 'number', title: 'Hue'},
-    {name: 's', type: 'number', title: 'Saturation'},
-    {name: 'l', type: 'number', title: 'Lightness'},
-    {name: 'a', type: 'number', title: 'Alpha'},
-  ],
-})

package/src/schemas/hsvaColor.ts

@@ -1,13 +0,0 @@
-import {defineType} from 'sanity'
-
-export const hsvaColor = defineType({
-  title: 'Hue Saturation Value',
-  name: 'hsvaColor',
-  type: 'object',
-  fields: [
-    {name: 'h', type: 'number', title: 'Hue'},
-    {name: 's', type: 'number', title: 'Saturation'},
-    {name: 'v', type: 'number', title: 'Value'},
-    {name: 'a', type: 'number', title: 'Alpha'},
-  ],
-})

package/src/schemas/rgbaColor.ts

@@ -1,13 +0,0 @@
-import {defineType} from 'sanity'
-
-export const rgbaColor = defineType({
-  title: 'Red Green Blue (rgb)',
-  name: 'rgbaColor',
-  type: 'object',
-  fields: [
-    {name: 'r', type: 'number', title: 'Red'},
-    {name: 'g', type: 'number', title: 'Green'},
-    {name: 'b', type: 'number', title: 'Blue'},
-    {name: 'a', type: 'number', title: 'Alpha'},
-  ],
-})

package/src/types.ts

@@ -1,19 +0,0 @@
-import type {Color, HSLColor, HSVColor, RGBColor} from 'react-color'
-import type {ObjectInputProps, ObjectOptions, ObjectSchemaType} from 'sanity'
-
-export interface ColorValue {
-  hex: string
-  hsl: HSLColor
-  hsv: HSVColor
-  rgb: RGBColor
-}
-
-export interface ColorOptions extends Omit<ObjectOptions, 'columns'> {
-  disableAlpha?: boolean
-  colorList?: Array<Color>
-}
-
-export type ColorSchemaType = Omit<ObjectSchemaType, 'options'> & {
-  options?: ColorOptions
-}
-export type ColorInputProps = ObjectInputProps<ColorValue, ColorSchemaType>

package/v2-incompatible.js

@@ -1,11 +0,0 @@
-const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
-const {name, version, sanityExchangeUrl} = require('./package.json')
-
-export default showIncompatiblePluginDialog({
-  name: name,
-  versions: {
-    v3: version,
-    v2: '^2.30.0',
-  },
-  sanityExchangeUrl,
-})