@sanity/color-input 2.30.2-shopify.0 → 3.0.0-studio-v3.1

package/README.md

@@ -1,16 +1,46 @@
 # @sanity/color-input
 
-Color input for [Sanity](https://sanity.io/) that stores selected colors in hex, hsl, hsv and rgb format.
+> **NOTE** 
+> 
+> This is the **Sanity Studio v3 version** of @sanity/color-input.
+> 
+> For the v2 version, please refer to the [v2-branch](https://github.com/sanity-io/sanity/tree/next/packages/%40sanity/color-input).
+
+## What is it?
+
+Color input plugin for [Sanity](https://sanity.io/) that stores selected colors in hex, hsl, hsv and rgb format.
+
+![Color input in the Studio](assets/color-input.png)
 
 ## Installation
+```
+npm install --save @sanity/color-input@studio-v3
+```
+
+or 
 
 ```
-sanity install @sanity/color-input
+yarn add @sanity/color-input@studio-v3
 ```
 
 ## Usage
 
-Use it in your schema types:
+Add it as a plugin in sanity.config.ts (or .js):
+
+```js
+import { colorSchema } from "@sanity/color-input";
+
+export default createConfig({
+  // ...
+  plugins: [
+    colorSchema(),
+  ] 
+})
+```
+
+
+
+Now you can use the `color` type in your schema types:
 
 ```js
 // [...]
@@ -26,8 +56,6 @@ Use it in your schema types:
 }
 ```
 
-Note that the above only works if you import and use the `all:part:@sanity/base/schema-type` part in your schema.
-
 ## Options
 
 To disable the alpha option, set `disableAlpha` to `true`:
@@ -36,7 +64,7 @@ To disable the alpha option, set `disableAlpha` to `true`:
 // ...fields...
 {
   name: 'favoriteColor',
-  title: 'Favorite color',
+  title: 'Color no-alpha',
   type: 'color',
   options: {
     disableAlpha: true
@@ -44,6 +72,10 @@ To disable the alpha option, set `disableAlpha` to `true`:
 }
 ```
 
+Which will render accordingly:
+
+![This is an image](assets/no-alpha.png)
+
 ## Data model
 
 ```js
@@ -78,3 +110,26 @@ To disable the alpha option, set `disableAlpha` to `true`:
 ## License
 
 MIT-licensed. See LICENSE.
+
+
+## Develop & test
+
+Make sure to run `npm run build` once, then run
+
+```bash
+npm run link-watch
+```
+
+In another shell, `cd` to your test studio and run:
+
+```bash
+npx yalc add @sanity/color-input --link && yarn install
+```
+
+Now, changes in this repo will be automatically built and pushed to the studio,
+triggering hotreload. Yalc avoids issues with react-hooks that are typical when using yarn/npm link.
+
+### About build & watch 
+
+This plugin uses [@sanity/plugin-sdk](https://github.com/sanity-io/plugin-sdk)
+with default configuration for build & watch scripts.