chore: add back the @sanity/color-input plugin to test studio

sanity-io · Sep 13, 2024 · 87a684b · 87a684b
1 parent 99f1bb6
commit 87a684b
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 64 deletions.
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
@@ -22,6 +22,7 @@
     "@sanity/block-tools": "3.57.3",
     "@sanity/client": "^6.21.3",
     "@sanity/color": "^3.0.0",
+    "@sanity/color-input": "3.1.2",
     "@sanity/google-maps-input": "^4.0.0",
     "@sanity/icons": "^3.4.0",
     "@sanity/image-url": "^1.0.2",

diff --git 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'
@@ -127,6 +128,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
@@ -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