@madebywild/sanity-color-field 1.0.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/index.cjs +17 -21
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -26
- package/dist/index.d.ts +3 -26
- package/dist/index.js +17 -21
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.tsx +2 -2
- package/src/input.tsx +10 -14
- package/src/types.tsx +2 -11
package/README.md
CHANGED
|
@@ -24,6 +24,8 @@ export default defineConfig({
|
|
|
24
24
|
{ label: "Brand Red", value: "#d92d20" },
|
|
25
25
|
{ label: "Brand Blue", value: "#175cd3" },
|
|
26
26
|
],
|
|
27
|
+
// Render the value preview (swatch) used in the picker UI.
|
|
28
|
+
renderValuePreview: (value) => <span style={{ backgroundColor: value }} />,
|
|
27
29
|
}),
|
|
28
30
|
],
|
|
29
31
|
});
|
package/dist/index.cjs
CHANGED
|
@@ -1,50 +1,48 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: !0 });
|
|
3
3
|
var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), compilerRuntime = require("react/compiler-runtime"), asyncAutocomplete = require("@madebywild/sanity-utils/async-autocomplete"), ui = require("@sanity/ui");
|
|
4
|
-
function
|
|
5
|
-
return
|
|
4
|
+
function defaultRenderValuePreview(value) {
|
|
5
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ui.Avatar, { style: {
|
|
6
6
|
backgroundColor: value
|
|
7
|
-
} })
|
|
7
|
+
} });
|
|
8
8
|
}
|
|
9
9
|
function defaultRenderOption({
|
|
10
10
|
label,
|
|
11
|
-
value
|
|
11
|
+
value,
|
|
12
|
+
preview
|
|
12
13
|
}) {
|
|
13
14
|
return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { as: "button", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", padding: 2, children: [
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
} }) : value,
|
|
17
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, padding: 2, children: typeof label == "string" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, children: label }) : label ?? value })
|
|
15
|
+
preview,
|
|
16
|
+
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, children: label ?? value }) })
|
|
18
17
|
] }) });
|
|
19
18
|
}
|
|
20
19
|
function ColorInput(t0) {
|
|
21
|
-
const $ = compilerRuntime.c(
|
|
20
|
+
const $ = compilerRuntime.c(16);
|
|
22
21
|
let pluginConfig, props;
|
|
23
22
|
$[0] !== t0 ? ({
|
|
24
23
|
pluginConfig,
|
|
25
24
|
...props
|
|
26
25
|
} = t0, $[0] = t0, $[1] = pluginConfig, $[2] = props) : (pluginConfig = $[1], props = $[2]);
|
|
27
|
-
const options = props.schemaType.options, colorList = pluginConfig.colorList,
|
|
26
|
+
const options = props.schemaType.options, colorList = pluginConfig.colorList, renderValuePreview = pluginConfig.renderValuePreview ?? defaultRenderValuePreview, whitelist = options?.whitelist, blacklist = options?.blacklist;
|
|
28
27
|
let t1;
|
|
29
28
|
$[3] !== props ? (t1 = (value_0) => {
|
|
30
29
|
const next = value_0 ? sanity.set(value_0) : sanity.unset();
|
|
31
30
|
return props.onChange(next);
|
|
32
31
|
}, $[3] = props, $[4] = t1) : t1 = $[4];
|
|
33
|
-
let t2;
|
|
34
|
-
$[5] !==
|
|
35
|
-
let t3;
|
|
36
|
-
$[7] !== renderOption ? (t3 = (t42) => {
|
|
32
|
+
let t2, t3;
|
|
33
|
+
$[5] !== renderValuePreview ? (t2 = (value_1) => renderValuePreview(value_1), t3 = (t42) => {
|
|
37
34
|
const {
|
|
38
35
|
label,
|
|
39
36
|
value: value_2
|
|
40
|
-
} = t42;
|
|
41
|
-
return
|
|
37
|
+
} = t42, preview = renderValuePreview(value_2);
|
|
38
|
+
return defaultRenderOption({
|
|
42
39
|
label,
|
|
43
|
-
value: value_2
|
|
40
|
+
value: value_2,
|
|
41
|
+
preview
|
|
44
42
|
});
|
|
45
|
-
}, $[
|
|
43
|
+
}, $[5] = renderValuePreview, $[6] = t2, $[7] = t3) : (t2 = $[6], t3 = $[7]);
|
|
46
44
|
let t4;
|
|
47
|
-
return $[
|
|
45
|
+
return $[8] !== blacklist || $[9] !== colorList || $[10] !== props.value || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== whitelist ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(asyncAutocomplete.AsyncAutocomplete, { placeholder: "Select color", noOptionsPlaceholder: "No colors found", listItems: colorList, whitelist, blacklist, value: props.value, renderValue: _temp, onChange: t1, renderSelected: t2, renderOption: t3 }), $[8] = blacklist, $[9] = colorList, $[10] = props.value, $[11] = t1, $[12] = t2, $[13] = t3, $[14] = whitelist, $[15] = t4) : t4 = $[15], t4;
|
|
48
46
|
}
|
|
49
47
|
function _temp(value, opt) {
|
|
50
48
|
return opt?.label ?? value;
|
|
@@ -64,8 +62,6 @@ const typeName = "wild.color", wildSanityColorFieldPlugin = sanity.definePlugin(
|
|
|
64
62
|
})]
|
|
65
63
|
}
|
|
66
64
|
}));
|
|
67
|
-
exports.defaultRenderOption = defaultRenderOption;
|
|
68
|
-
exports.defaultRenderSelected = defaultRenderSelected;
|
|
69
65
|
exports.typeName = typeName;
|
|
70
66
|
exports.wildSanityColorFieldPlugin = wildSanityColorFieldPlugin;
|
|
71
67
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/input.tsx","../src/types.tsx","../src/index.tsx"],"sourcesContent":["import { AsyncAutocomplete } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport { Avatar, Box, Card, Flex, Text } from \"@sanity/ui\";\nimport { type StringInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\n/** @public */\nfunction
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/input.tsx","../src/types.tsx","../src/index.tsx"],"sourcesContent":["import { AsyncAutocomplete } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport { Avatar, Box, Card, Flex, Text } from \"@sanity/ui\";\nimport { type StringInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\n/** @public */\nfunction defaultRenderValuePreview(value: string) {\n return <Avatar style={{ backgroundColor: value }} />;\n}\n\n/** @public */\nfunction defaultRenderOption({ label, value, preview }: { label?: React.ReactNode; value: string; preview: React.ReactNode }) {\n return (\n <Card as=\"button\">\n <Flex align=\"center\" padding={2}>\n {preview}\n <Box flex={1} padding={2}>\n <Text size={2}>{label ?? value}</Text>\n </Box>\n </Flex>\n </Card>\n );\n}\n\nfunction ColorInput({\n pluginConfig,\n ...props\n}: StringInputProps & {\n pluginConfig: PluginConfig;\n}) {\n const options = props.schemaType.options as FieldOptions | undefined;\n const colorList = pluginConfig.colorList;\n const renderValuePreview = pluginConfig.renderValuePreview ?? defaultRenderValuePreview;\n\n const whitelist = options?.whitelist;\n const blacklist = options?.blacklist;\n\n return (\n <AsyncAutocomplete\n placeholder=\"Select color\"\n noOptionsPlaceholder=\"No colors found\"\n listItems={colorList}\n whitelist={whitelist}\n blacklist={blacklist}\n value={props.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n const next = value ? set(value) : unset();\n return props.onChange(next);\n }}\n renderSelected={(value) => {\n return renderValuePreview(value);\n }}\n renderOption={({ label, value }) => {\n const preview = renderValuePreview(value);\n return defaultRenderOption({ label, value, preview });\n }}\n />\n );\n}\n\nexport { ColorInput };\n","import type { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type { ObjectOptions, StringDefinition } from \"sanity\";\n\n/** @public */\nexport const typeName = \"wild.color\" as const;\n\n/** @public */\nexport type PluginConfig = {\n /**\n * A list of colors to show in the color picker.\n * In addition to the value, the field will also calculate\n * and store the color's luminance in a separate field.\n * @example\n * ```ts\n * colorList: [\n * { label: \"Red\", value: \"#ff0000\" },\n * { label: \"Green\", value: \"#00ff00\" },\n * { label: \"Blue\", value: \"#0000ff\" },\n * ]\n * ```\n */\n colorList: ListItems;\n /**\n * A function to render the selected color value.\n * @example\n * ```ts\n * renderValuePreview: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />\n * ```\n */\n renderValuePreview?: (value: string) => React.ReactNode;\n};\n\n/** @public */\nexport type FieldOptions = ObjectOptions & {\n /**\n * Whitelist colors by their values.\n */\n whitelist?: string[];\n /**\n * Blacklist colors by their values.\n */\n blacklist?: string[];\n};\n\n// Add the custom field definition to Sanity's intrinsic definitions\n// so that type checking works correctly when using this field type.\ndeclare module \"sanity\" {\n export interface IntrinsicDefinitions {\n [typeName]: Omit<StringDefinition, \"type\" | \"fields\" | \"options\" | \"components\"> & {\n type: typeof typeName;\n options?: FieldOptions;\n };\n }\n}\n","import { definePlugin, defineType } from \"sanity\";\nimport { ColorInput } from \"./input\";\nimport { type FieldOptions, type PluginConfig, typeName } from \"./types\";\n\n/** @public */\nconst wildSanityColorFieldPlugin = definePlugin<PluginConfig>((config) => {\n return {\n name: \"@madebywild/sanity-color-field\",\n schema: {\n types: [\n defineType({\n name: typeName,\n type: \"string\",\n title: \"Color\",\n description: \"Select a color.\",\n icon: () => <>🎨</>,\n components: {\n input: (props) => <ColorInput pluginConfig={config} {...props} />,\n },\n }),\n ],\n },\n };\n});\n\nexport { wildSanityColorFieldPlugin, typeName, type PluginConfig, type FieldOptions };\n"],"names":["defaultRenderValuePreview","value","jsx","Avatar","backgroundColor","defaultRenderOption","label","preview","Card","Flex","Box","Text","ColorInput","t0","$","_c","pluginConfig","props","options","schemaType","colorList","renderValuePreview","whitelist","blacklist","t1","value_0","next","set","unset","onChange","t2","t3","value_1","t4","value_2","AsyncAutocomplete","_temp","opt","typeName","wildSanityColorFieldPlugin","definePlugin","config","name","schema","types","defineType","type","title","description","icon","Fragment","components","input"],"mappings":"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"}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as sanity0 from "sanity";
|
|
2
2
|
import { ObjectOptions, StringDefinition } from "sanity";
|
|
3
|
-
import * as react7 from "react";
|
|
4
3
|
/** @public */
|
|
5
4
|
type ListItem = {
|
|
6
5
|
value: string;
|
|
@@ -29,24 +28,12 @@ type PluginConfig = {
|
|
|
29
28
|
colorList: ListItems;
|
|
30
29
|
/**
|
|
31
30
|
* A function to render the selected color value.
|
|
32
|
-
* Note: Import `defaultRenderSelected` to use the default rendering.
|
|
33
31
|
* @example
|
|
34
32
|
* ```ts
|
|
35
|
-
*
|
|
33
|
+
* renderValuePreview: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />
|
|
36
34
|
* ```
|
|
37
35
|
*/
|
|
38
|
-
|
|
39
|
-
/** A function to render each color option in the dropdown.
|
|
40
|
-
* Note: Import `defaultRenderOption` to use the default rendering.
|
|
41
|
-
* @example
|
|
42
|
-
* ```ts
|
|
43
|
-
* renderOption: (item) => <div>{item.label}</div>
|
|
44
|
-
* ```
|
|
45
|
-
*/
|
|
46
|
-
renderOption?: (item: {
|
|
47
|
-
label?: string;
|
|
48
|
-
value: string;
|
|
49
|
-
}) => React.JSX.Element;
|
|
36
|
+
renderValuePreview?: (value: string) => React.ReactNode;
|
|
50
37
|
};
|
|
51
38
|
/** @public */
|
|
52
39
|
type FieldOptions = ObjectOptions & {
|
|
@@ -68,15 +55,5 @@ declare module "sanity" {
|
|
|
68
55
|
}
|
|
69
56
|
}
|
|
70
57
|
/** @public */
|
|
71
|
-
declare function defaultRenderSelected(value: React.ReactNode): number | bigint | boolean | react7.JSX.Element | Iterable<react7.ReactNode> | Promise<string | number | bigint | boolean | react7.ReactPortal | react7.ReactElement<unknown, string | react7.JSXElementConstructor<any>> | Iterable<react7.ReactNode> | null | undefined> | null | undefined;
|
|
72
|
-
/** @public */
|
|
73
|
-
declare function defaultRenderOption({
|
|
74
|
-
label,
|
|
75
|
-
value
|
|
76
|
-
}: {
|
|
77
|
-
label?: React.ReactNode;
|
|
78
|
-
value: React.ReactNode;
|
|
79
|
-
}): react7.JSX.Element;
|
|
80
|
-
/** @public */
|
|
81
58
|
declare const wildSanityColorFieldPlugin: sanity0.Plugin<PluginConfig>;
|
|
82
|
-
export { type FieldOptions, type PluginConfig,
|
|
59
|
+
export { type FieldOptions, type PluginConfig, typeName, wildSanityColorFieldPlugin };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as sanity0 from "sanity";
|
|
2
2
|
import { ObjectOptions, StringDefinition } from "sanity";
|
|
3
|
-
import * as react7 from "react";
|
|
4
3
|
/** @public */
|
|
5
4
|
type ListItem = {
|
|
6
5
|
value: string;
|
|
@@ -29,24 +28,12 @@ type PluginConfig = {
|
|
|
29
28
|
colorList: ListItems;
|
|
30
29
|
/**
|
|
31
30
|
* A function to render the selected color value.
|
|
32
|
-
* Note: Import `defaultRenderSelected` to use the default rendering.
|
|
33
31
|
* @example
|
|
34
32
|
* ```ts
|
|
35
|
-
*
|
|
33
|
+
* renderValuePreview: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />
|
|
36
34
|
* ```
|
|
37
35
|
*/
|
|
38
|
-
|
|
39
|
-
/** A function to render each color option in the dropdown.
|
|
40
|
-
* Note: Import `defaultRenderOption` to use the default rendering.
|
|
41
|
-
* @example
|
|
42
|
-
* ```ts
|
|
43
|
-
* renderOption: (item) => <div>{item.label}</div>
|
|
44
|
-
* ```
|
|
45
|
-
*/
|
|
46
|
-
renderOption?: (item: {
|
|
47
|
-
label?: string;
|
|
48
|
-
value: string;
|
|
49
|
-
}) => React.JSX.Element;
|
|
36
|
+
renderValuePreview?: (value: string) => React.ReactNode;
|
|
50
37
|
};
|
|
51
38
|
/** @public */
|
|
52
39
|
type FieldOptions = ObjectOptions & {
|
|
@@ -68,15 +55,5 @@ declare module "sanity" {
|
|
|
68
55
|
}
|
|
69
56
|
}
|
|
70
57
|
/** @public */
|
|
71
|
-
declare function defaultRenderSelected(value: React.ReactNode): number | bigint | boolean | react7.JSX.Element | Iterable<react7.ReactNode> | Promise<string | number | bigint | boolean | react7.ReactPortal | react7.ReactElement<unknown, string | react7.JSXElementConstructor<any>> | Iterable<react7.ReactNode> | null | undefined> | null | undefined;
|
|
72
|
-
/** @public */
|
|
73
|
-
declare function defaultRenderOption({
|
|
74
|
-
label,
|
|
75
|
-
value
|
|
76
|
-
}: {
|
|
77
|
-
label?: React.ReactNode;
|
|
78
|
-
value: React.ReactNode;
|
|
79
|
-
}): react7.JSX.Element;
|
|
80
|
-
/** @public */
|
|
81
58
|
declare const wildSanityColorFieldPlugin: sanity0.Plugin<PluginConfig>;
|
|
82
|
-
export { type FieldOptions, type PluginConfig,
|
|
59
|
+
export { type FieldOptions, type PluginConfig, typeName, wildSanityColorFieldPlugin };
|
package/dist/index.js
CHANGED
|
@@ -3,50 +3,48 @@ import { set, unset, definePlugin, defineType } from "sanity";
|
|
|
3
3
|
import { c } from "react/compiler-runtime";
|
|
4
4
|
import { AsyncAutocomplete } from "@madebywild/sanity-utils/async-autocomplete";
|
|
5
5
|
import { Avatar, Card, Flex, Box, Text } from "@sanity/ui";
|
|
6
|
-
function
|
|
7
|
-
return
|
|
6
|
+
function defaultRenderValuePreview(value) {
|
|
7
|
+
return /* @__PURE__ */ jsx(Avatar, { style: {
|
|
8
8
|
backgroundColor: value
|
|
9
|
-
} })
|
|
9
|
+
} });
|
|
10
10
|
}
|
|
11
11
|
function defaultRenderOption({
|
|
12
12
|
label,
|
|
13
|
-
value
|
|
13
|
+
value,
|
|
14
|
+
preview
|
|
14
15
|
}) {
|
|
15
16
|
return /* @__PURE__ */ jsx(Card, { as: "button", children: /* @__PURE__ */ jsxs(Flex, { align: "center", padding: 2, children: [
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
} }) : value,
|
|
19
|
-
/* @__PURE__ */ jsx(Box, { flex: 1, padding: 2, children: typeof label == "string" ? /* @__PURE__ */ jsx(Text, { size: 2, children: label }) : label ?? value })
|
|
17
|
+
preview,
|
|
18
|
+
/* @__PURE__ */ jsx(Box, { flex: 1, padding: 2, children: /* @__PURE__ */ jsx(Text, { size: 2, children: label ?? value }) })
|
|
20
19
|
] }) });
|
|
21
20
|
}
|
|
22
21
|
function ColorInput(t0) {
|
|
23
|
-
const $ = c(
|
|
22
|
+
const $ = c(16);
|
|
24
23
|
let pluginConfig, props;
|
|
25
24
|
$[0] !== t0 ? ({
|
|
26
25
|
pluginConfig,
|
|
27
26
|
...props
|
|
28
27
|
} = t0, $[0] = t0, $[1] = pluginConfig, $[2] = props) : (pluginConfig = $[1], props = $[2]);
|
|
29
|
-
const options = props.schemaType.options, colorList = pluginConfig.colorList,
|
|
28
|
+
const options = props.schemaType.options, colorList = pluginConfig.colorList, renderValuePreview = pluginConfig.renderValuePreview ?? defaultRenderValuePreview, whitelist = options?.whitelist, blacklist = options?.blacklist;
|
|
30
29
|
let t1;
|
|
31
30
|
$[3] !== props ? (t1 = (value_0) => {
|
|
32
31
|
const next = value_0 ? set(value_0) : unset();
|
|
33
32
|
return props.onChange(next);
|
|
34
33
|
}, $[3] = props, $[4] = t1) : t1 = $[4];
|
|
35
|
-
let t2;
|
|
36
|
-
$[5] !==
|
|
37
|
-
let t3;
|
|
38
|
-
$[7] !== renderOption ? (t3 = (t42) => {
|
|
34
|
+
let t2, t3;
|
|
35
|
+
$[5] !== renderValuePreview ? (t2 = (value_1) => renderValuePreview(value_1), t3 = (t42) => {
|
|
39
36
|
const {
|
|
40
37
|
label,
|
|
41
38
|
value: value_2
|
|
42
|
-
} = t42;
|
|
43
|
-
return
|
|
39
|
+
} = t42, preview = renderValuePreview(value_2);
|
|
40
|
+
return defaultRenderOption({
|
|
44
41
|
label,
|
|
45
|
-
value: value_2
|
|
42
|
+
value: value_2,
|
|
43
|
+
preview
|
|
46
44
|
});
|
|
47
|
-
}, $[
|
|
45
|
+
}, $[5] = renderValuePreview, $[6] = t2, $[7] = t3) : (t2 = $[6], t3 = $[7]);
|
|
48
46
|
let t4;
|
|
49
|
-
return $[
|
|
47
|
+
return $[8] !== blacklist || $[9] !== colorList || $[10] !== props.value || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== whitelist ? (t4 = /* @__PURE__ */ jsx(AsyncAutocomplete, { placeholder: "Select color", noOptionsPlaceholder: "No colors found", listItems: colorList, whitelist, blacklist, value: props.value, renderValue: _temp, onChange: t1, renderSelected: t2, renderOption: t3 }), $[8] = blacklist, $[9] = colorList, $[10] = props.value, $[11] = t1, $[12] = t2, $[13] = t3, $[14] = whitelist, $[15] = t4) : t4 = $[15], t4;
|
|
50
48
|
}
|
|
51
49
|
function _temp(value, opt) {
|
|
52
50
|
return opt?.label ?? value;
|
|
@@ -67,8 +65,6 @@ const typeName = "wild.color", wildSanityColorFieldPlugin = definePlugin((config
|
|
|
67
65
|
}
|
|
68
66
|
}));
|
|
69
67
|
export {
|
|
70
|
-
defaultRenderOption,
|
|
71
|
-
defaultRenderSelected,
|
|
72
68
|
typeName,
|
|
73
69
|
wildSanityColorFieldPlugin
|
|
74
70
|
};
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/input.tsx","../src/types.tsx","../src/index.tsx"],"sourcesContent":["import { AsyncAutocomplete } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport { Avatar, Box, Card, Flex, Text } from \"@sanity/ui\";\nimport { type StringInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\n/** @public */\nfunction
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/input.tsx","../src/types.tsx","../src/index.tsx"],"sourcesContent":["import { AsyncAutocomplete } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport { Avatar, Box, Card, Flex, Text } from \"@sanity/ui\";\nimport { type StringInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\n/** @public */\nfunction defaultRenderValuePreview(value: string) {\n return <Avatar style={{ backgroundColor: value }} />;\n}\n\n/** @public */\nfunction defaultRenderOption({ label, value, preview }: { label?: React.ReactNode; value: string; preview: React.ReactNode }) {\n return (\n <Card as=\"button\">\n <Flex align=\"center\" padding={2}>\n {preview}\n <Box flex={1} padding={2}>\n <Text size={2}>{label ?? value}</Text>\n </Box>\n </Flex>\n </Card>\n );\n}\n\nfunction ColorInput({\n pluginConfig,\n ...props\n}: StringInputProps & {\n pluginConfig: PluginConfig;\n}) {\n const options = props.schemaType.options as FieldOptions | undefined;\n const colorList = pluginConfig.colorList;\n const renderValuePreview = pluginConfig.renderValuePreview ?? defaultRenderValuePreview;\n\n const whitelist = options?.whitelist;\n const blacklist = options?.blacklist;\n\n return (\n <AsyncAutocomplete\n placeholder=\"Select color\"\n noOptionsPlaceholder=\"No colors found\"\n listItems={colorList}\n whitelist={whitelist}\n blacklist={blacklist}\n value={props.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n const next = value ? set(value) : unset();\n return props.onChange(next);\n }}\n renderSelected={(value) => {\n return renderValuePreview(value);\n }}\n renderOption={({ label, value }) => {\n const preview = renderValuePreview(value);\n return defaultRenderOption({ label, value, preview });\n }}\n />\n );\n}\n\nexport { ColorInput };\n","import type { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type { ObjectOptions, StringDefinition } from \"sanity\";\n\n/** @public */\nexport const typeName = \"wild.color\" as const;\n\n/** @public */\nexport type PluginConfig = {\n /**\n * A list of colors to show in the color picker.\n * In addition to the value, the field will also calculate\n * and store the color's luminance in a separate field.\n * @example\n * ```ts\n * colorList: [\n * { label: \"Red\", value: \"#ff0000\" },\n * { label: \"Green\", value: \"#00ff00\" },\n * { label: \"Blue\", value: \"#0000ff\" },\n * ]\n * ```\n */\n colorList: ListItems;\n /**\n * A function to render the selected color value.\n * @example\n * ```ts\n * renderValuePreview: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />\n * ```\n */\n renderValuePreview?: (value: string) => React.ReactNode;\n};\n\n/** @public */\nexport type FieldOptions = ObjectOptions & {\n /**\n * Whitelist colors by their values.\n */\n whitelist?: string[];\n /**\n * Blacklist colors by their values.\n */\n blacklist?: string[];\n};\n\n// Add the custom field definition to Sanity's intrinsic definitions\n// so that type checking works correctly when using this field type.\ndeclare module \"sanity\" {\n export interface IntrinsicDefinitions {\n [typeName]: Omit<StringDefinition, \"type\" | \"fields\" | \"options\" | \"components\"> & {\n type: typeof typeName;\n options?: FieldOptions;\n };\n }\n}\n","import { definePlugin, defineType } from \"sanity\";\nimport { ColorInput } from \"./input\";\nimport { type FieldOptions, type PluginConfig, typeName } from \"./types\";\n\n/** @public */\nconst wildSanityColorFieldPlugin = definePlugin<PluginConfig>((config) => {\n return {\n name: \"@madebywild/sanity-color-field\",\n schema: {\n types: [\n defineType({\n name: typeName,\n type: \"string\",\n title: \"Color\",\n description: \"Select a color.\",\n icon: () => <>🎨</>,\n components: {\n input: (props) => <ColorInput pluginConfig={config} {...props} />,\n },\n }),\n ],\n },\n };\n});\n\nexport { wildSanityColorFieldPlugin, typeName, type PluginConfig, type FieldOptions };\n"],"names":["defaultRenderValuePreview","value","backgroundColor","defaultRenderOption","label","preview","ColorInput","t0","$","_c","pluginConfig","props","options","schemaType","colorList","renderValuePreview","whitelist","blacklist","t1","value_0","next","set","unset","onChange","t2","t3","value_1","t4","value_2","_temp","opt","typeName","wildSanityColorFieldPlugin","definePlugin","config","name","schema","types","defineType","type","title","description","icon","components","input"],"mappings":"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"}
|
package/package.json
CHANGED
package/src/index.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { definePlugin, defineType } from "sanity";
|
|
2
|
-
import { ColorInput
|
|
2
|
+
import { ColorInput } from "./input";
|
|
3
3
|
import { type FieldOptions, type PluginConfig, typeName } from "./types";
|
|
4
4
|
|
|
5
5
|
/** @public */
|
|
@@ -23,4 +23,4 @@ const wildSanityColorFieldPlugin = definePlugin<PluginConfig>((config) => {
|
|
|
23
23
|
};
|
|
24
24
|
});
|
|
25
25
|
|
|
26
|
-
export { wildSanityColorFieldPlugin, typeName,
|
|
26
|
+
export { wildSanityColorFieldPlugin, typeName, type PluginConfig, type FieldOptions };
|
package/src/input.tsx
CHANGED
|
@@ -4,22 +4,18 @@ import { type StringInputProps, set, unset } from "sanity";
|
|
|
4
4
|
import type { FieldOptions, PluginConfig } from "./types";
|
|
5
5
|
|
|
6
6
|
/** @public */
|
|
7
|
-
function
|
|
8
|
-
|
|
9
|
-
return value;
|
|
7
|
+
function defaultRenderValuePreview(value: string) {
|
|
8
|
+
return <Avatar style={{ backgroundColor: value }} />;
|
|
10
9
|
}
|
|
11
10
|
|
|
12
11
|
/** @public */
|
|
13
|
-
function defaultRenderOption({ label, value }: { label?: React.ReactNode; value: React.ReactNode }) {
|
|
14
|
-
const Color = typeof value === "string" ? <Avatar size={1} style={{ backgroundColor: value }} /> : value;
|
|
15
|
-
const Label = typeof label === "string" ? <Text size={2}>{label}</Text> : (label ?? value);
|
|
16
|
-
|
|
12
|
+
function defaultRenderOption({ label, value, preview }: { label?: React.ReactNode; value: string; preview: React.ReactNode }) {
|
|
17
13
|
return (
|
|
18
14
|
<Card as="button">
|
|
19
15
|
<Flex align="center" padding={2}>
|
|
20
|
-
{
|
|
16
|
+
{preview}
|
|
21
17
|
<Box flex={1} padding={2}>
|
|
22
|
-
{
|
|
18
|
+
<Text size={2}>{label ?? value}</Text>
|
|
23
19
|
</Box>
|
|
24
20
|
</Flex>
|
|
25
21
|
</Card>
|
|
@@ -34,8 +30,7 @@ function ColorInput({
|
|
|
34
30
|
}) {
|
|
35
31
|
const options = props.schemaType.options as FieldOptions | undefined;
|
|
36
32
|
const colorList = pluginConfig.colorList;
|
|
37
|
-
const
|
|
38
|
-
const renderSelected = pluginConfig.renderSelected ?? defaultRenderSelected;
|
|
33
|
+
const renderValuePreview = pluginConfig.renderValuePreview ?? defaultRenderValuePreview;
|
|
39
34
|
|
|
40
35
|
const whitelist = options?.whitelist;
|
|
41
36
|
const blacklist = options?.blacklist;
|
|
@@ -54,13 +49,14 @@ function ColorInput({
|
|
|
54
49
|
return props.onChange(next);
|
|
55
50
|
}}
|
|
56
51
|
renderSelected={(value) => {
|
|
57
|
-
return
|
|
52
|
+
return renderValuePreview(value);
|
|
58
53
|
}}
|
|
59
54
|
renderOption={({ label, value }) => {
|
|
60
|
-
|
|
55
|
+
const preview = renderValuePreview(value);
|
|
56
|
+
return defaultRenderOption({ label, value, preview });
|
|
61
57
|
}}
|
|
62
58
|
/>
|
|
63
59
|
);
|
|
64
60
|
}
|
|
65
61
|
|
|
66
|
-
export { ColorInput
|
|
62
|
+
export { ColorInput };
|
package/src/types.tsx
CHANGED
|
@@ -22,21 +22,12 @@ export type PluginConfig = {
|
|
|
22
22
|
colorList: ListItems;
|
|
23
23
|
/**
|
|
24
24
|
* A function to render the selected color value.
|
|
25
|
-
* Note: Import `defaultRenderSelected` to use the default rendering.
|
|
26
25
|
* @example
|
|
27
26
|
* ```ts
|
|
28
|
-
*
|
|
27
|
+
* renderValuePreview: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />
|
|
29
28
|
* ```
|
|
30
29
|
*/
|
|
31
|
-
|
|
32
|
-
/** A function to render each color option in the dropdown.
|
|
33
|
-
* Note: Import `defaultRenderOption` to use the default rendering.
|
|
34
|
-
* @example
|
|
35
|
-
* ```ts
|
|
36
|
-
* renderOption: (item) => <div>{item.label}</div>
|
|
37
|
-
* ```
|
|
38
|
-
*/
|
|
39
|
-
renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;
|
|
30
|
+
renderValuePreview?: (value: string) => React.ReactNode;
|
|
40
31
|
};
|
|
41
32
|
|
|
42
33
|
/** @public */
|