@sanity/color-input 2.36.0-v2-studio.1 → 2.36.0

package/README.md

@@ -14,7 +14,7 @@ yarn add @sanity/color-input@studio-v2
 Next, add `"@sanity/color-input"` to `sanity.json` plugins array:
 ```json
 "plugins": [
-@sanity/color-input
+ "@sanity/color-input"
 ]
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/color-input",
-  "version": "2.36.0-v2-studio.1",
+  "version": "2.36.0",
   "description": "Color input for Sanity Studio",
   "keywords": [
     "sanity",
@@ -13,7 +13,7 @@
   ],
   "homepage": "https://www.sanity.io/",
   "bugs": {
-    "url": "git@github.com:sanity-io//issues"
+    "url": "https://github.com/sanity-io/color-input/issues"
   },
   "repository": {
     "type": "git",
@@ -22,6 +22,11 @@
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
   "main": "lib/schemas/color.js",
+  "files": [
+    "lib",
+    "src",
+    "sanity.json"
+  ],
   "scripts": {
     "prebuild": "npm run clean",
     "build": "sanipack build",

package/src/ColorInput.js

@@ -0,0 +1,113 @@
+///<reference types="@sanity/types/parts" />
+
+/* eslint-disable id-length */
+import React, {PureComponent} from 'react'
+import PropTypes from 'prop-types'
+import {PatchEvent, patches} from 'part:@sanity/form-builder'
+import {debounce} from 'lodash'
+import {Button} from '@sanity/ui'
+import {AddIcon} from '@sanity/icons'
+import {FormField} from '@sanity/base/components'
+import ColorPicker from './ColorPicker'
+
+const {set, unset, setIfMissing} = patches
+
+const DEFAULT_COLOR = {
+  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 class ColorInput extends PureComponent {
+  focusRef = React.createRef()
+  static propTypes = {
+    type: PropTypes.shape({
+      name: PropTypes.string,
+      title: PropTypes.string,
+      description: PropTypes.string,
+      fields: PropTypes.arrayOf(
+        PropTypes.shape({
+          name: PropTypes.string.isRequired,
+        })
+      ),
+    }).isRequired,
+    onChange: PropTypes.func.isRequired,
+    readOnly: PropTypes.bool,
+    value: PropTypes.shape({
+      hex: PropTypes.string,
+      alpha: PropTypes.number,
+    }),
+  }
+
+  focus() {
+    // todo: make the ColorPicker component support .focus()
+    if (this.focusRef.current && this.focusRef.current.focus) {
+      this.focusRef.current.focus()
+    }
+  }
+
+  emitSetColor = (nextColor) => {
+    const {onChange, type} = this.props
+
+    const fieldPatches = type.fields
+      .filter((field) => field.name in nextColor)
+      .map((field) => {
+        const nextFieldValue = nextColor[field.name]
+        const isObject = field.type.jsonType === 'object'
+        return set(
+          isObject ? Object.assign({_type: field.type.name}, nextFieldValue) : nextFieldValue,
+          [field.name]
+        )
+      })
+
+    onChange(
+      PatchEvent.from([
+        setIfMissing({_type: type.name}),
+        set(type.name, ['_type']),
+        set(nextColor.rgb.a, ['alpha']),
+        ...fieldPatches,
+      ])
+    )
+  }
+
+  // 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
+  handleColorChange = debounce(this.emitSetColor, 100)
+
+  handleCreateColor = () => {
+    this.emitSetColor(DEFAULT_COLOR)
+  }
+
+  handleUnset = () => {
+    this.props.onChange(PatchEvent.from(unset()))
+  }
+
+  render() {
+    const {type, readOnly, value, level} = this.props
+    return (
+      <FormField title={type.title} description={type.description} level={level}>
+        {value ? (
+          <ColorPicker
+            ref={this.focusRef}
+            color={value.hsl || value.hex}
+            readOnly={readOnly || type.readOnly}
+            onChange={this.handleColorChange}
+            disableAlpha={type.options && type.options.disableAlpha}
+            onUnset={this.handleUnset}
+          />
+        ) : (
+          <Button
+            icon={AddIcon}
+            mode="ghost"
+            text="Create color"
+            ref={this.focusRef}
+            disabled={Boolean(readOnly)}
+            onClick={this.handleCreateColor}
+          />
+        )}
+      </FormField>
+    )
+  }
+}

package/src/ColorPicker.js

@@ -0,0 +1,144 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {ColorWrap, Checkboard, Saturation, Hue, Alpha} from 'react-color/lib/components/common'
+import {Box, Card, Flex, Button, Inline, Stack, Text} from '@sanity/ui'
+import {TrashIcon} from '@sanity/icons'
+import styled from 'styled-components'
+import {ColorPickerFields} from './ColorPickerFields'
+
+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%;
+`
+
+const ColorPicker = ({
+  width,
+  rgb,
+  hex,
+  hsv,
+  hsl,
+  onChange,
+  onUnset,
+  disableAlpha,
+  renderers,
+  readOnly,
+}) => {
+  return (
+    <div style={{width}}>
+      <Card padding={1} border radius={1}>
+        <Stack space={2}>
+          {!readOnly && (
+            <>
+              <Card overflow="hidden" style={{position: 'relative', height: '5em'}}>
+                <Saturation is="Saturation" onChange={onChange} hsl={hsl} hsv={hsv} />
+              </Card>
+
+              <Card
+                shadow={1}
+                radius={3}
+                overflow="hidden"
+                style={{position: 'relative', height: '10px'}}
+              >
+                <Hue is="Hue" hsl={hsl} onChange={!readOnly && onChange} />
+              </Card>
+
+              {!disableAlpha && (
+                <Card
+                  shadow={1}
+                  radius={3}
+                  overflow="hidden"
+                  style={{position: 'relative', height: '10px'}}
+                >
+                  <Alpha is="Alpha" rgb={rgb} hsl={hsl} renderers={renderers} onChange={onChange} />
+                </Card>
+              )}
+            </>
+          )}
+          <Flex>
+            <Card
+              flex={1}
+              radius={2}
+              overflow="hidden"
+              style={{position: 'relative', minWidth: '4em'}}
+            >
+              <Checkboard />
+              <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)} {Math.round(hsl.s)}%{' '}
+                        {Math.round(hsl.l)}
+                      </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>
+        </Stack>
+      </Card>
+    </div>
+  )
+}
+
+ColorPicker.propTypes = {
+  width: PropTypes.string,
+  hex: PropTypes.string,
+  hsl: PropTypes.object,
+  hsv: PropTypes.object,
+  rgb: PropTypes.object,
+  onChange: PropTypes.func,
+  disableAlpha: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  renderers: PropTypes.func,
+  onUnset: PropTypes.func,
+}
+
+ColorPicker.defaultProps = {
+  disableAlpha: false,
+}
+
+export default ColorWrap(ColorPicker)

package/src/ColorPickerFields.js

@@ -0,0 +1,128 @@
+import React from 'react'
+import * as color from 'react-color/lib/helpers/color'
+import {EditableInput} from 'react-color/lib/components/common'
+import {Box, Flex, useTheme} from '@sanity/ui'
+
+export const ColorPickerFields = ({onChange, rgb, hsl, hex, disableAlpha}) => {
+  const {sanity} = useTheme()
+
+  const inputStyles = {
+    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',
+    },
+  }
+
+  const handleChange = (data, e) => {
+    if (data.hex && color.isValidHex(data.hex)) {
+      onChange(
+        {
+          hex: data.hex,
+          source: 'hex',
+        },
+        e
+      )
+    } else if (data.r || data.g || data.b) {
+      onChange(
+        {
+          r: data.r || rgb.r,
+          g: data.g || rgb.g,
+          b: data.b || rgb.b,
+          a: rgb.a,
+          source: 'rgb',
+        },
+        e
+      )
+    } else if (data.a) {
+      if (data.a < 0) {
+        data.a = 0
+      } else if (data.a > 100) {
+        data.a = 100
+      }
+
+      data.a /= 100
+      onChange(
+        {
+          h: hsl.h,
+          s: hsl.s,
+          l: hsl.l,
+          a: data.a,
+          source: 'rgb',
+        },
+        e
+      )
+    }
+  }
+
+  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="true"
+          dragMax="255"
+        />
+      </Box>
+      <Box flex={1} marginRight={1}>
+        <EditableInput
+          style={inputStyles}
+          label="g"
+          value={rgb.g}
+          onChange={handleChange}
+          dragLabel="true"
+          dragMax="255"
+        />
+      </Box>
+      <Box flex={1} marginRight={1}>
+        <EditableInput
+          style={inputStyles}
+          label="b"
+          value={rgb.b}
+          onChange={handleChange}
+          dragLabel="true"
+          dragMax="255"
+        />
+      </Box>
+      {!disableAlpha && (
+        <Box flex={1}>
+          <EditableInput
+            style={inputStyles}
+            label="a"
+            value={Math.round(rgb.a * 100)}
+            onChange={handleChange}
+            dragLabel="true"
+            dragMax="100"
+          />
+        </Box>
+      )}
+    </Flex>
+  )
+}
+
+export default ColorPickerFields

package/src/schemas/color.js

@@ -0,0 +1,70 @@
+/* eslint-disable react/display-name */
+import React from 'react'
+import ColorInput from '../ColorInput'
+
+const round = (val) => Math.round(val * 100)
+
+export default {
+  name: 'color',
+  type: 'object',
+  title: 'Color',
+  inputComponent: 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}) {
+      let subtitle = hex || 'No color set'
+      if (hsl) {
+        subtitle = `H:${round(hsl.l)} S:${round(hsl.l)} 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.js

@@ -0,0 +1,11 @@
+export default {
+  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.js

@@ -0,0 +1,11 @@
+export default {
+  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.js

@@ -0,0 +1,11 @@
+export default {
+  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/.eslintrc.js

@@ -1,25 +0,0 @@
-module.exports = {
-  root: true,
-  parser: '@babel/eslint-parser',
-  globals: {
-    __DEV__: true,
-    JSX: true,
-  },
-  env: {
-    node: true,
-    browser: true,
-  },
-  settings: {
-    react: {version: '16.9.0'},
-  },
-  extends: ['sanity', 'sanity/react', 'plugin:react-hooks/recommended', 'prettier'],
-  rules: {
-    camelcase: ['error', {allow: ['^unstable_', '^Unstable_']}],
-    'prettier/prettier': 'error',
-    'react/prop-types': 'off',
-    'react/forbid-prop-types': 'off',
-    'react/jsx-no-bind': 'off',
-    'react/require-default-props': 'off',
-  },
-  plugins: ['prettier', 'react'],
-}

package/.github/workflows/main.yml

@@ -1,133 +0,0 @@
----
-name: CI & Release
-
-# Workflow name based on selected inputs. Fallback to default Github naming when expression evaluates to empty string
-run-name: >-
-  ${{
-    inputs.release && inputs.test && format('Build {0} ➤ Test ➤ Publish to NPM', github.ref_name)  ||
-    inputs.release && !inputs.test && format('Build {0} ➤ Skip Tests ➤ Publish to NPM', github.ref_name) ||
-    github.event_name == 'workflow_dispatch' && inputs.test && format('Build {0} ➤ Test', github.ref_name) ||
-    github.event_name == 'workflow_dispatch' && !inputs.test && format('Build {0} ➤ Skip Tests', github.ref_name) ||
-    ''
-  }}
-
-on:
-  # Build on pushes branches that have a PR (including drafts)
-  pull_request:
-  # Build on commits pushed to branches without a PR if it's in the allowlist
-  push:
-    branches: [main,studio-v2]
-  # https://docs.github.com/en/actions/managing-workflow-runs/manually-running-a-workflow
-  workflow_dispatch:
-    inputs:
-      test:
-        description: Run tests
-        required: true
-        default: true
-        type: boolean
-      release:
-        description: Release new version
-        required: true
-        default: false
-        type: boolean
-
-concurrency:
-  # On PRs builds will cancel if new pushes happen before the CI completes, as it defines `github.head_ref` and gives it the name of the branch the PR wants to merge into
-  # Otherwise `github.run_id` ensures that you can quickly merge a queue of PRs without causing tests to auto cancel on any of the commits pushed to main.
-  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
-  cancel-in-progress: true
-
-jobs:
-  log-the-inputs:
-    name: Log inputs
-    runs-on: ubuntu-latest
-    steps:
-      - run: |
-          echo "Inputs: $INPUTS"
-        env:
-          INPUTS: ${{ toJSON(inputs) }}
-
-  build:
-    runs-on: ubuntu-latest
-    name: Lint & Build
-    steps:
-      - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # tag=v3
-      - uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # tag=v3
-        with:
-          cache: npm
-          node-version: lts/*
-      - run: npm ci
-        # Linting can be skipped
-      - run: npm run lint --if-present
-        if: github.event.inputs.test != 'false'
-        # But not the build script, as semantic-release will crash if this command fails so it makes sense to test it early
-      - run: npm run prepublishOnly --if-present
-
-  #  test:
-  #    needs: build
-  #    # The test matrix can be skipped, in case a new release needs to be fast-tracked and tests are already passing on main
-  #    if: github.event.inputs.test != 'false'
-  #    runs-on: ${{ matrix.os }}
-  #    name: Node.js ${{ matrix.node }} / ${{ matrix.os }}
-  #    strategy:
-  #      # A test failing on windows doesn't mean it'll fail on macos. It's useful to let all tests run to its completion to get the full picture
-  #      fail-fast: false
-  #      matrix:
-  #        # Run the testing suite on each major OS with the latest LTS release of Node.js
-  #        os: [macos-latest, ubuntu-latest, windows-latest]
-  #        node: [lts/*]
-  #        # It makes sense to also test the oldest, and latest, versions of Node.js, on ubuntu-only since it's the fastest CI runner
-  #        include:
-  #          - os: ubuntu-latest
-  #            # Test the oldest LTS release of Node that's still receiving bugfixes and security patches, versions older than that have reached End-of-Life
-  #            node: lts/-2
-  #          - os: ubuntu-latest
-  #            # Test the actively developed version that will become the latest LTS release next October
-  #            node: current
-  #    steps:
-  #      # It's only necessary to do this for windows, as mac and ubuntu are sane OS's that already use LF
-  #      - name: Set git to use LF
-  #        if: matrix.os == 'windows-latest'
-  #        run: |
-  #          git config --global core.autocrlf false
-  #          git config --global core.eol lf
-  #      - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # tag=v3
-  #      - uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # tag=v3
-  #        with:
-  #          cache: npm
-  #          node-version: ${{ matrix.node }}
-  #      - run: npm i
-  #      - run: npm test --if-present
-
-  release:
-    # needs: [build, test]
-    needs: [build]
-    # only run if opt-in during workflow_dispatch
-    if: always() && github.event.inputs.release == 'true' && needs.build.result != 'failure' && needs.test.result != 'failure' && needs.test.result != 'cancelled'
-    runs-on: ubuntu-latest
-    name: Semantic release
-    steps:
-      - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # tag=v3
-        with:
-          # Need to fetch entire commit history to
-          # analyze every commit since last release
-          fetch-depth: 0
-      - uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # tag=v3
-        with:
-          cache: npm
-          node-version: lts/*
-      - run: npm ci
-        # Branches that will release new versions are defined in .releaserc.json
-      - run: npx semantic-release
-        # Don't allow interrupting the release step if the job is cancelled, as it can lead to an inconsistent state
-        # e.g. git tags were pushed but it exited before `npm publish`
-        if: always()
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
-        # Re-run semantic release with rich logs if it failed to publish for easier debugging
-      - run: npx semantic-release --dry-run --debug
-        if: failure()
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

package/.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no -- commitlint --edit ""

package/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged

package/.prettierrc

@@ -1,8 +0,0 @@
-{
-  "semi": false,
-  "printWidth": 100,
-  "bracketSpacing": false,
-  "singleQuote": true,
-  "useTabs": false,
-  "endOfLine": "lf"
-}

package/.releaserc.json

@@ -1,4 +0,0 @@
-{
-  "extends": "@sanity/semantic-release-preset",
-  "branches": ["main", {"name": "studio-v2", "channel": "studio-v2", "prerelease": "v2-studio"}]
-}

package/CHANGELOG.md

@@ -1,12 +0,0 @@
-<!-- markdownlint-disable --><!-- textlint-disable -->
-
-# 📓 Changelog
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [2.36.0-v2-studio.1](https://github.com/sanity-io/color-input/compare/v2.35.2...v2.36.0-v2-studio.1) (2022-11-23)
-
-### Features
-
-- @sanity/color-input (standalone) for Sanity Studio v2 ([d3a8655](https://github.com/sanity-io/color-input/commit/d3a8655747e6e52c4f09486ea7970b029f80b860))

package/commitlint.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@commitlint/config-conventional'],
-}

package/lint-staged.config.js

@@ -1,4 +0,0 @@
-module.exports = {
-  '**/*.{js,jsx}': ['eslint'],
-  '**/*.{ts,tsx}': ['eslint', () => 'tsc --noEmit'],
-}