@sanity/color-input 2.30.1 → 3.0.0-studio-v3.0

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.

package/lib/index.d.ts

@@ -0,0 +1,85 @@
+import { ObjectInputProps } from "sanity";
+import { HSLColor, HSVColor, RGBColor } from "react-color";
+import { ObjectSchemaType } from "@sanity/types";
+export const hslaColor: {
+    title: string;
+    name: string;
+    type: string;
+    fields: {
+        name: string;
+        type: string;
+        title: string;
+    }[];
+};
+export const rgbaColor: {
+    title: string;
+    name: string;
+    type: string;
+    fields: {
+        name: string;
+        type: string;
+        title: string;
+    }[];
+};
+export interface ColorValue {
+    hex: string;
+    hsl: HSLColor;
+    hsv: HSVColor;
+    rgb: RGBColor;
+}
+export interface ColorOptions {
+    disableAlpha?: boolean;
+}
+export type ColorSchemaType = ObjectSchemaType & {
+    options?: ColorOptions;
+};
+export type ColorInputProps = ObjectInputProps<ColorValue, ColorSchemaType>;
+export function ColorInput(props: ColorInputProps): JSX.Element;
+export const color: {
+    name: string;
+    type: string;
+    title: string;
+    components: {
+        input: typeof ColorInput;
+    };
+    fields: {
+        title: string;
+        name: string;
+        type: string;
+    }[];
+    preview: {
+        select: {
+            title: string;
+            alpha: string;
+            hex: string;
+            hsl: string;
+        };
+        prepare({ title, hex, hsl, alpha, }: {
+            title?: string | undefined;
+            alpha?: number | undefined;
+            hex?: string | undefined;
+            hsl?: {
+                h: number;
+                s: number;
+                l: number;
+            } | undefined;
+        }): {
+            title: string | undefined;
+            subtitle: string;
+            media: () => JSX.Element;
+        };
+    };
+};
+export const hsvaColor: {
+    title: string;
+    name: string;
+    type: string;
+    fields: {
+        name: string;
+        type: string;
+        title: string;
+    }[];
+};
+export const colorInput: import("sanity").Plugin<void>;
+
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;;AAAA,OAAO,MAAM;;;;;;;;;CAUZ,CAAA;ACVD,OAAO,MAAM;;;;;;;;;CAUZ,CAAA;AGQD;IACE,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,QAAQ,CAAA;IACb,GAAG,EAAE,QAAQ,CAAA;IACb,GAAG,EAAE,QAAQ,CAAA;CACd;AAED;IACE,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,8BAA8B,gBAAgB,GAAG;IAC/C,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,CAAA;AACD,8BAA8B,iBAAiB,UAAU,EAAE,eAAe,CAAC,CAAA;AAE3E,2BAA2B,KAAK,EAAE,eAAe,eA2EhD;ACxGD,OAAO,MAAM;;;;;;;;;;;;;;;;;;;;;;;;mBAgDG,MAAM;mBAAK,MAAM;mBAAK,MAAM;;;;;;;;CAyB3C,CAAA;AC9ED,OAAO,MAAM;;;;;;;;;CAUZ,CAAA;ACJD,OAAO,MAAM,yCAKX,CAAA","sources":["src/src/schemas/hslaColor.ts","src/src/schemas/rgbaColor.ts","src/src/ColorPickerFields.tsx","src/src/ColorPicker.tsx","src/src/ColorInput.tsx","src/src/schemas/color.tsx","src/src/schemas/hsvaColor.ts","src/src/index.ts","src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,"import {createPlugin} from 'sanity'\nimport {hslaColor} from './schemas/hslaColor'\nimport {rgbaColor} from './schemas/rgbaColor'\nimport {color} from './schemas/color'\nimport {hsvaColor} from './schemas/hsvaColor'\n\nexport const colorInput = createPlugin({\n  name: '@sanity/color-input',\n  schema: {\n    types: [hslaColor, hsvaColor, rgbaColor, color],\n  },\n})\n\nexport {hslaColor, rgbaColor, color, hsvaColor}\nexport {ColorInput} from './ColorInput'\nexport type {ColorValue, ColorInputProps, ColorOptions, ColorSchemaType} from './ColorInput'\n"],"names":[],"version":3,"file":"index.d.ts.map","sourceRoot":"../"}