sanity-io/color-input

Color input and schema for Sanity Studio

color-input's Issues

Styled Components dependency needs updating to v6

The main Sanity package recently added support for Styled Components v6, however this package still specifies ^5.2 creating a dependency conflict.

SyntaxError: The requested module '@sanity/color-input' does not provide an export named 'colorInput' - Studio embed Remix

Hi!

I was using this plugin on a Astro website, but whenever I want to use the plugin in my Remix project where I embed the Studio, it gives me this error

SyntaxError: The requested module '@sanity/color-input' does not provide an export named 'colorInput'

import { colorInput } from '@sanity/color-input'

import { visionTool } from '@sanity/vision'
import { defineConfig, isDev } from 'sanity'
import { deskTool } from 'sanity/desk'
import { defaultDocumentNodeResolver, structure } from '#sanity-desk/index.tsx'
import { schemaTypes } from '#sanity-schema/index.ts'

const devOnlyPlugins = [visionTool()]

export const config = defineConfig({
	dataset: 'production',
	projectId: 'YOUR_PROJECT_ID', // Project id is set dynamically in website cms route.
	name: 'sanity-remix',
	title: 'Sanity Remix',
	schema: {
		types: schemaTypes,
	},
	plugins: [
		deskTool({
			structure: structure,
			defaultDocumentNode: defaultDocumentNodeResolver,
		}),
		colorInput(),
		...(isDev ? devOnlyPlugins : []),
	],
	basePath: ``, // Base path is set dynamically in website cms route.
})

colorList doesn't show if part of an object

I've found that when the color input is used as part of an object the predefined colors don't show. I thought this was to do with it being in a collapsed section but forcing collapsed: false doesn't fix the issue.

No errors in console and no element in the DOM.

import { defineField } from 'sanity'

export default defineField({
	type: 'color',
	name: 'colorPicker',
	title: 'Color',
	options: {
		colorList: [
			{ hex: '#ffffff' },
			'#141313',
			'#f7f1ee', // Beige
			'#04674a', // Green
			'#e75f5c', // Red
			'#eabad8', // Pink
			'#e4aa58', // Yellow
			'#4976af', // Blue
		]
	},
})

defineField({
	type: 'object',
	title: 'Colors',
	name: 'colors',
	options: {
		collapsible: true,
		collapsed: false
	},
	fields: [
		defineField({
			type: 'colorPicker',
			title: 'Graphic',
			name: 'graphic',
			options: {
				collapsible: false
			},
			description: 'Used for graphics, if applicable'
		}),
	],
}),

On using React Developer Tools it looks like colorList is undefined...

Unable to install the plugin: upstream dependency conflict

Describe the bug

I am unable to install the plugin. There seems to be a dependency conflict with @sanity/ui/

Which versions of Sanity are you using?

@sanity/cli (global)          3.23.4 (latest: 3.40.0)
@sanity/eslint-config-studio   3.0.1 (latest: 4.0.0)
@sanity/vision                3.24.1 (latest: 3.40.0)
sanity                        3.24.1 (latest: 3.40.0)

What operating system are you using?
Garuda Linux

Which versions of Node.js / npm are you running?

9.8.0
v20.5.1

Here's the error am getting:

 ╰─λ npm i @sanity/color-input
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @sanity/[email protected]
npm ERR! node_modules/@sanity/ui
npm ERR!   @sanity/ui@"2.0.0-beta.16" from @sanity/[email protected]
npm ERR!   node_modules/@sanity/presentation
npm ERR!     @sanity/presentation@"1.5.0" from [email protected]
npm ERR!     node_modules/sanity
npm ERR!       peerOptional sanity@"^3.23.4" from @sanity/[email protected]
npm ERR!       1 more (the root project)
npm ERR!   @sanity/ui@"2.0.0-beta.16" from @sanity/[email protected]
npm ERR!   node_modules/@sanity/vision
npm ERR!     @sanity/vision@"^3.24.1" from the root project
npm ERR!   1 more (sanity)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! @sanity/color-input@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @sanity/[email protected]
npm ERR! node_modules/@sanity/ui
npm ERR!   peer @sanity/ui@"^1.0 || ^2.0" from @sanity/[email protected]
npm ERR!   node_modules/@sanity/color-input
npm ERR!     @sanity/color-input@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Here's my package.json

{
  "name": "static",
  "private": true,
  "version": "1.0.0",
  "main": "package.json",
  "license": "UNLICENSED",
  "type": "module",
  "scripts": {
    "dev": "sanity dev",
    "start": "sanity start",
    "build": "sanity build",
    "deploy": "sanity deploy",
    "deploy-graphql": "sanity graphql deploy"
  },
  "keywords": [
    "sanity"
  ],
  "dependencies": {
    "@sanity/client": "^6.15.7",
    "@sanity/vision": "^3.24.1",
    "lucide-react": "^0.371.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-is": "^18.2.0",
    "sanity": "^3.24.1",
    "styled-components": "^6.0.7"
  },
  "devDependencies": {
    "@sanity/eslint-config-studio": "^3.0.1",
    "@types/react": "^18.0.25",
    "axios": "^1.6.8",
    "eslint": "^8.6.0",
    "prettier": "^3.0.2",
    "typescript": "^5.1.6"
  }
}

Not able to add plugin colorInput()

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

---

Using a curated preset maintained by

Sanity: The Composable Content Cloud

---

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• fix(deps): Update non-major (@sanity/icons, @sanity/plugin-kit, @types/react, eslint-plugin-react, eslint-plugin-react-hooks, npm-run-all2, prettier-plugin-packagejson, react, react-dom, react-is, sanity)
• chore(deps): update dependency @sanity/pkg-utils to v4
• chore(deps): update dependency @sanity/pkg-utils to v5
• chore(deps): update dependency @sanity/pkg-utils to v6
• chore(deps): update dependency @sanity/plugin-kit to v4
• chore(deps): update dependency npm-run-all2 to v6
• chore(deps): update dependency semantic-release to v23
• chore(deps): update dependency typescript to v5
• chore(deps): update linters to v6 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• chore(deps): lock file maintenance
• 🔐 Create all pending approval PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update commitlint monorepo to v18 (major) (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update commitlint monorepo to v19 (major) (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update dependency @sanity/pkg-utils to v3
• chore(deps): update dependency @types/react-color to v3
• chore(deps): update dependency eslint-config-prettier to v9
• chore(deps): update dependency eslint-plugin-prettier to v5
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency semantic-release to v22
• chore(deps): update linters to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint-config-sanity)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/main.yml

• actions/checkout v4
• actions/setup-node v4
• actions/checkout v4
• actions/setup-node v4
• actions/checkout v4
• actions/setup-node v4

npm

package.json

• @sanity/icons ^2.0.0
• @sanity/incompatible-plugin ^1.0.4
• lodash ^4.17.21
• react-color ^2.19.3
• @commitlint/cli ^17.8.1
• @commitlint/config-conventional ^17.8.1
• @sanity/pkg-utils ^2.4.10
• @sanity/plugin-kit ^3.1.10
• @sanity/semantic-release-preset ^4.1.7
• @types/react ^18.2.65
• @types/react-color ^2.17.11
• @types/styled-components ^5.1.34
• @types/tinycolor2 ^1.4.6
• @typescript-eslint/eslint-plugin ^5.62.0
• @typescript-eslint/parser ^5.62.0
• eslint ^8.57.0
• eslint-config-prettier ^8.10.0
• eslint-config-sanity ^6.0.0
• eslint-plugin-prettier ^4.2.1
• eslint-plugin-react ^7.34.0
• eslint-plugin-react-hooks ^4.6.0
• npm-run-all2 ^5.0.0
• prettier ^2.8.8
• prettier-plugin-packagejson ^2.4.12
• react ^18.2.0
• react-dom ^18.2.0
• react-is ^18.2.0
• rimraf ^5.0.0
• sanity ^3.32.0
• semantic-release ^21.1.2
• styled-components ^5.0 || ^6.0
• typescript ^4.9.5
• @sanity/ui ^1.0 || ^2.0
• react ^18
• sanity ^3.23.0
• styled-components ^5.0 || ^6.0
• node >=14

---

• Check this box to trigger a request for Renovate to run again on this repository

Disable color picker and only select from predefined colors

Is your feature request related to a problem? Please describe.
I want content editors to stick to the predefined colors so they don't pick colors on the picker that mess up the aesthetic of the page/content.

Describe the solution you'd like
An option to disable the color picker(and input fields) so only the predefined colors are displayed and selectable.

Describe alternatives you've considered
...

Additional context
...

How to set initialValue on v3 studio?

Hello, I try different values to do this

initialValue: '#000000'
initialValue: {hex: '#000000'},
initialValue: {color: {hex: '#000000'}}

end i got error

Any way to have it automatically open?

The color filed is always closed by default. Any way to have it opened by default?

Does not work with [email protected]

Color input suddenly quit working when I upgraded Sanity versions. The studio runs fun but when I go to a document where the color input is being used as a field it crashes.

The error I'm receiving in studio is:
**Unhandled Runtime Error** TypeError: Cannot read properties of undefined (reading 'sanity')

It's throwing a typescript error in my sanity.config.ts

Here is my current package.json:

  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next",
    "format": "npx prettier --write . --ignore-path .gitignore",
    "lint": "next lint -- --ignore-path .gitignore",
    "lint:fix": "npm run format && npm run lint -- --fix",
    "start": "next start",
    "type-check": "tsc --noEmit"
  },
  "prettier": {
    "semi": false,
    "singleQuote": true
  },
  "dependencies": {
    "@gsid/react-time-ago": "^7.2.5",
    "@marketsystems/nextjs13-appdir-breadcrumbs": "^1.0.4",
    "@portabletext/react": "^3.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-icons": "^1.3.0",
    "@sanity/client": "^6.4.4",
    "@sanity/color-input": "^3.1.0",
    "@sanity/document-internationalization": "^2.0.1",
    "@sanity/image-url": "^1.0.2",
    "@sanity/vision": "^3.15.0",
    "@stitches/react": "^1.2.8",
    "@vercel/og": "^0.5.10",
    "classnames": "^2.3.2",
    "date-fns": "^2.30.0",
    "intl-segmenter-polyfill": "^0.4.4",
    "javascript-time-ago": "^2.5.9",
    "moment-timezone": "^0.5.43",
    "next": "^13.4.13",
    "next-sanity": "^5.2.3",
    "next-sanity-image": "^6.1.0",
    "react": "^18.2.0",
    "react-confetti": "^6.1.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.10.1",
    "react-share": "^4.4.1",
    "react-social-media-embed": "^2.3.3",
    "sanity": "3.16.7",
    "sanity-plugin-asset-source-unsplash": "^1.1.0",
    "sanity-plugin-internationalized-array": "^1.10.1",
    "styled-components": "^5.3.6",
    "suspend-react": "^0.1.3",
    "swiper": "^10.3.0",
    "swr": "^2.2.0",
    "use-mailchimp-form": "^3.1.0"
  },
  "devDependencies": {
    "@types/node": "20.4.8",
    "@types/react": "18.2.18",
    "autoprefixer": "^10.4.13",
    "eslint": "^8.46.0",
    "eslint-config-next": "13.4.12",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "postcss": "^8.4.27",
    "prettier": "^3.0.1",
    "prettier-plugin-packagejson": "^2.4.5",
    "prettier-plugin-tailwindcss": "^0.4.1",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
  },
  "engines": {
    "node": ">=16"
  }
}

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (config:recommended). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.