diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json index 691a5b72b67..a65c44eb20c 100644 --- a/dev/test-studio/package.json +++ b/dev/test-studio/package.json @@ -22,6 +22,7 @@ "@sanity/block-tools": "3.66.1", "@sanity/client": "^6.24.1", "@sanity/color": "^3.0.0", + "@sanity/color-input": "^4.0.1", "@sanity/google-maps-input": "^4.0.0", "@sanity/icons": "^3.5.0", "@sanity/image-url": "^1.0.2", diff --git a/dev/test-studio/sanity.config.ts b/dev/test-studio/sanity.config.ts index fce6f5a19ff..31b82b3dea3 100644 --- a/dev/test-studio/sanity.config.ts +++ b/dev/test-studio/sanity.config.ts @@ -1,4 +1,5 @@ import {assist} from '@sanity/assist' +import {colorInput} from '@sanity/color-input' import {googleMapsInput} from '@sanity/google-maps-input' import {BookIcon} from '@sanity/icons' import {koKRLocale} from '@sanity/locale-ko-kr' @@ -128,6 +129,7 @@ const sharedSettings = definePlugin({ lng: -74.1180863, }, }), + colorInput(), workshopTool({ collections: [ {name: 'sanity', title: 'sanity'}, diff --git a/dev/test-studio/schema/plugins/color.tsx b/dev/test-studio/schema/plugins/color.tsx index 69f6109cdbd..9d72f9ac838 100644 --- a/dev/test-studio/schema/plugins/color.tsx +++ b/dev/test-studio/schema/plugins/color.tsx @@ -50,69 +50,87 @@ export default defineType({ title: 'Title', type: 'string', }, - // { - // name: 'testColor1', - // title: 'Color to be used in preview', - // description: 'A color input', - // type: 'color', - // }, - // { - // name: 'testColor2', - // title: 'Color with no alpha', - // description: 'A color input with no alpha', - // type: 'color', - // options: { - // disableAlpha: true, - // }, - // }, - // { - // name: 'colorList', - // title: 'List of colors', - // description: 'An array of colors with the built in color preview', - // type: 'array', - // of: [ - // { - // type: 'color', - // }, - // ], - // }, - // { - // name: 'readOnlyColor', - // title: 'Read-only color', - // description: 'Color input in readOnly mode', - // readOnly: true, - // type: 'color', - // }, - // { - // name: 'colorGrid', - // title: 'Grid of colors', - // description: 'An grid of colors with the built in color preview', - // type: 'array', - // options: { - // layout: 'grid', - // }, - // of: [ - // { - // type: 'color', - // }, - // ], - // }, - // { - // name: 'objectWithObjectWithColors', - // title: 'Object with object with colors', - // type: 'object', - // fields: [ - // { - // name: 'objectWithColors', - // title: 'Object with colors', - // type: 'object', - // fields: [ - // {name: 'primaryColor', title: 'Primary color', type: 'color'}, - // {name: 'secondaryColor', title: 'Secondary color', type: 'color'}, - // {name: 'extraColor', title: 'Extra color', type: 'color'}, - // ], - // }, - // ], - // }, + { + name: 'testColor1', + title: 'Color to be used in preview', + description: 'A color input', + type: 'color', + }, + { + name: 'testColor2', + title: 'Color with no alpha', + description: 'A color input with no alpha', + type: 'color', + options: { + disableAlpha: true, + }, + }, + { + name: 'testColor3', + title: 'Color with presets', + description: 'A color input with a list of preset colors', + type: 'color', + options: { + colorList: [ + '#FF6900', + {hex: '#FCB900'}, + {r: 123, g: 220, b: 181}, + {r: 0, g: 208, b: 132, a: 0.5}, + {h: 203, s: 95, l: 77, a: 1}, + {h: 202, s: 95, l: 46, a: 0.5}, + {h: 345, s: 43, v: 97}, + {h: 344, s: 91, v: 92, a: 0.5}, + ], + }, + }, + { + name: 'colorList', + title: 'List of colors', + description: 'An array of colors with the built in color preview', + type: 'array', + of: [ + { + type: 'color', + }, + ], + }, + { + name: 'readOnlyColor', + title: 'Read-only color', + description: 'Color input in readOnly mode', + readOnly: true, + type: 'color', + }, + { + name: 'colorGrid', + title: 'Grid of colors', + description: 'An grid of colors with the built in color preview', + type: 'array', + options: { + layout: 'grid', + }, + of: [ + { + type: 'color', + }, + ], + }, + { + name: 'objectWithObjectWithColors', + title: 'Object with object with colors', + type: 'object', + fields: [ + { + name: 'objectWithColors', + title: 'Object with colors', + type: 'object', + fields: [ + {name: 'primaryColor', title: 'Primary color', type: 'color'}, + {name: 'secondaryColor', title: 'Secondary color', type: 'color'}, + {name: 'extraColor', title: 'Extra color', type: 'color'}, + ], + }, + ], + }, ], }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d8e5a7ebcb3..cdab7ba3ab3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -480,6 +480,9 @@ importers: '@sanity/color': specifier: ^3.0.0 version: 3.0.6 + '@sanity/color-input': + specifier: ^4.0.1 + version: 4.0.1(@emotion/is-prop-valid@1.2.2)(react-dom@18.3.1(react@18.3.1))(react-is@19.0.0-rc-b01722d5-20241114)(react@18.3.1)(sanity@packages+sanity)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)) '@sanity/google-maps-input': specifier: ^4.0.0 version: 4.0.1(@emotion/is-prop-valid@1.2.2)(react-dom@18.3.1(react@18.3.1))(react-is@19.0.0-rc-b01722d5-20241114)(react@18.3.1)(sanity@packages+sanity)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)) @@ -3494,6 +3497,11 @@ packages: '@iarna/toml@2.2.3': resolution: {integrity: sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==} + '@icons/material@0.2.4': + resolution: {integrity: sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==} + peerDependencies: + react: '*' + '@img/sharp-darwin-arm64@0.33.5': resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} @@ -4437,6 +4445,14 @@ packages: sanity: ^3 styled-components: ^5.2 || ^6 + '@sanity/color-input@4.0.1': + resolution: {integrity: sha512-Ra/IZO7j5vsx5VIF1OGIoeVfgwZu74tii8qOLuLQIRYbd6Av8si1mQFl6MOBu/kzWKWURE6JEN8+Ac1K2fi8Ww==} + engines: {node: '>=18'} + peerDependencies: + react: ^18.3 + sanity: ^3.23.0 + styled-components: ^6.1 + '@sanity/color@3.0.6': resolution: {integrity: sha512-2TjYEvOftD0v7ukx3Csdh9QIu44P2z7NDJtlC3qITJRYV36J7R6Vfd3trVhFnN77/7CZrGjqngrtohv8VqO5nw==} engines: {node: '>=18.0.0'} @@ -8662,6 +8678,9 @@ packages: engines: {node: '>= 12'} hasBin: true + material-colors@1.2.6: + resolution: {integrity: sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==} + math-random@1.0.4: resolution: {integrity: sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==} @@ -9821,6 +9840,11 @@ packages: peerDependencies: react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 + react-color@2.19.3: + resolution: {integrity: sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==} + peerDependencies: + react: '*' + react-compiler-runtime@19.0.0-beta-df7b47d-20241124: resolution: {integrity: sha512-HLFbEf5rEhynZNxI/f1y26Hw0SCvFWh9aS0gCaDndak202oOAvRhy0qsUhmVyaeuRYqIxvPeltMvqDfvO+9/Fw==} peerDependencies: @@ -9980,6 +10004,11 @@ packages: resolution: {integrity: sha512-NZKln+uyPuyHchzP07I6GGYFxdAoaKhehgpCa3ltJGzwE31OYumLeshGaitA1R/fS5d9D2qpZVwTFAr6zCLM9w==} engines: {node: '>=0.10.0'} + reactcss@1.2.3: + resolution: {integrity: sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==} + peerDependencies: + react: '*' + read-cmd-shim@4.0.0: resolution: {integrity: sha512-yILWifhaSEEytfXI76kB9xEEiG1AiozaCJZ83A87ytjRiN+jVibXjedjCRNjoZviinhG+4UkalO3mWTd8u5O0Q==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -10985,6 +11014,9 @@ packages: tinybench@2.9.0: resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==} + tinycolor2@1.6.0: + resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==} + tinyexec@0.3.0: resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==} @@ -13300,6 +13332,10 @@ snapshots: '@iarna/toml@2.2.3': {} + '@icons/material@0.2.4(react@18.3.1)': + dependencies: + react: 18.3.1 + '@img/sharp-darwin-arm64@0.33.5': optionalDependencies: '@img/sharp-libvips-darwin-arm64': 1.0.4 @@ -14405,6 +14441,21 @@ snapshots: - codemirror - react-is + '@sanity/color-input@4.0.1(@emotion/is-prop-valid@1.2.2)(react-dom@18.3.1(react@18.3.1))(react-is@19.0.0-rc-b01722d5-20241114)(react@18.3.1)(sanity@packages+sanity)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))': + dependencies: + '@sanity/icons': 3.5.0(react@18.3.1) + '@sanity/incompatible-plugin': 1.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@sanity/ui': 2.10.1(@emotion/is-prop-valid@1.2.2)(react-dom@18.3.1(react@18.3.1))(react-is@19.0.0-rc-b01722d5-20241114)(react@18.3.1)(styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)) + react: 18.3.1 + react-color: 2.19.3(react@18.3.1) + sanity: link:packages/sanity + styled-components: 6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + use-effect-event: 1.0.2(react@18.3.1) + transitivePeerDependencies: + - '@emotion/is-prop-valid' + - react-dom + - react-is + '@sanity/color@3.0.6': {} '@sanity/comlink@2.0.1': @@ -20061,6 +20112,8 @@ snapshots: marked@4.3.0: {} + material-colors@1.2.6: {} + math-random@1.0.4: {} md5-o-matic@0.1.1: {} @@ -21349,6 +21402,17 @@ snapshots: '@babel/runtime': 7.26.0 react: 18.3.1 + react-color@2.19.3(react@18.3.1): + dependencies: + '@icons/material': 0.2.4(react@18.3.1) + lodash: 4.17.21 + lodash-es: 4.17.21 + material-colors: 1.2.6 + prop-types: 15.8.1 + react: 18.3.1 + reactcss: 1.2.3(react@18.3.1) + tinycolor2: 1.6.0 + react-compiler-runtime@19.0.0-beta-df7b47d-20241124(react@18.3.1): dependencies: react: 18.3.1 @@ -21527,6 +21591,11 @@ snapshots: react@19.0.0-rc.1: {} + reactcss@1.2.3(react@18.3.1): + dependencies: + lodash: 4.17.21 + react: 18.3.1 + read-cmd-shim@4.0.0: {} read-package-json-fast@3.0.2: @@ -22814,6 +22883,8 @@ snapshots: tinybench@2.9.0: {} + tinycolor2@1.6.0: {} + tinyexec@0.3.0: {} tinypool@1.0.1: {}