@madebywild/sanity-color-field 0.3.0 → 0.3.2
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/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/types.tsx +2 -2
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 { getLuminance } from \"color2k\";\nimport { type ObjectInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\ntype FieldValues = {\n // The selected value from the color list.\n value?: string;\n // The calculated luminance of the selected color (0 to 1).\n luminance?: number;\n};\n\n// Maybe parse CSS variable and return its computed value.\n// Handles var(--variable), --variable.\n// If the input is not a CSS variable, returns it as-is.\nfunction maybeGetColorValue(source: string) {\n const varMatch = source.match(/^var\\((.+)\\)$/);\n const inner = varMatch?.[1] ? varMatch[1].trim() : source.trim();\n\n // Only take the first part for var(--variable, fallback) and ignore the fallback.\n const cssVarName = inner.split(\",\")[0]?.trim();\n const resolved = cssVarName?.startsWith(\"--\")\n ? getComputedStyle(document.documentElement).getPropertyValue(cssVarName).trim()\n : null;\n\n const color = resolved || source;\n return color;\n}\n\n// The getLuminance function can throw for invalid colors.\nfunction safeGetLuminance(maybeColor: string) {\n try {\n return getLuminance(maybeColor);\n } catch (e) {\n console.warn(\"Failed to get luminance\", e);\n return undefined;\n }\n}\n\nfunction ColorInput({\n pluginConfig,\n ...props\n}: ObjectInputProps<FieldValues> & {\n pluginConfig: PluginConfig;\n}) {\n const options = props.schemaType.options as FieldOptions | undefined;\n const colorList = pluginConfig.colorList;\n const renderOption = options?.renderOption ?? pluginConfig.renderOption;\n const renderSelected = options?.renderSelected ?? pluginConfig.renderSelected;\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?.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n if (!value) return props.onChange(unset());\n const color = maybeGetColorValue(value);\n const luminance = color ? safeGetLuminance(color) : undefined;\n return props.onChange(set({ ...props.value, value, luminance }));\n }}\n renderSelected={(value) => {\n if (renderSelected) return renderSelected(value);\n return <Avatar style={{ backgroundColor: value }} />;\n }}\n renderOption={({ label, value }) => {\n if (renderOption) return renderOption({ label, value });\n return (\n <Card as=\"button\">\n <Flex align=\"center\" padding={2}>\n <Avatar size={1} style={{ backgroundColor: value }} />\n <Box flex={1} padding={2}>\n <Text size={2}>{label}</Text>\n </Box>\n </Flex>\n </Card>\n );\n }}\n />\n );\n}\n\nexport { ColorInput };\n","import type { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type {
|
|
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 { getLuminance } from \"color2k\";\nimport { type ObjectInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\ntype FieldValues = {\n // The selected value from the color list.\n value?: string;\n // The calculated luminance of the selected color (0 to 1).\n luminance?: number;\n};\n\n// Maybe parse CSS variable and return its computed value.\n// Handles var(--variable), --variable.\n// If the input is not a CSS variable, returns it as-is.\nfunction maybeGetColorValue(source: string) {\n const varMatch = source.match(/^var\\((.+)\\)$/);\n const inner = varMatch?.[1] ? varMatch[1].trim() : source.trim();\n\n // Only take the first part for var(--variable, fallback) and ignore the fallback.\n const cssVarName = inner.split(\",\")[0]?.trim();\n const resolved = cssVarName?.startsWith(\"--\")\n ? getComputedStyle(document.documentElement).getPropertyValue(cssVarName).trim()\n : null;\n\n const color = resolved || source;\n return color;\n}\n\n// The getLuminance function can throw for invalid colors.\nfunction safeGetLuminance(maybeColor: string) {\n try {\n return getLuminance(maybeColor);\n } catch (e) {\n console.warn(\"Failed to get luminance\", e);\n return undefined;\n }\n}\n\nfunction ColorInput({\n pluginConfig,\n ...props\n}: ObjectInputProps<FieldValues> & {\n pluginConfig: PluginConfig;\n}) {\n const options = props.schemaType.options as FieldOptions | undefined;\n const colorList = pluginConfig.colorList;\n const renderOption = options?.renderOption ?? pluginConfig.renderOption;\n const renderSelected = options?.renderSelected ?? pluginConfig.renderSelected;\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?.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n if (!value) return props.onChange(unset());\n const color = maybeGetColorValue(value);\n const luminance = color ? safeGetLuminance(color) : undefined;\n return props.onChange(set({ ...props.value, value, luminance }));\n }}\n renderSelected={(value) => {\n if (renderSelected) return renderSelected(value);\n return <Avatar style={{ backgroundColor: value }} />;\n }}\n renderOption={({ label, value }) => {\n if (renderOption) return renderOption({ label, value });\n return (\n <Card as=\"button\">\n <Flex align=\"center\" padding={2}>\n <Avatar size={1} style={{ backgroundColor: value }} />\n <Box flex={1} padding={2}>\n <Text size={2}>{label}</Text>\n </Box>\n </Flex>\n </Card>\n );\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 colorList: ListItems;\n renderSelected?: (value: string) => React.JSX.Element;\n renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\n};\n\n/** @public */\nexport type FieldOptions = ObjectOptions & {\n whitelist?: string[];\n blacklist?: string[];\n renderSelected?: (value: string) => React.JSX.Element;\n renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\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\"> & {\n type: typeof typeName;\n options?: FieldOptions;\n };\n }\n}\n","import { defineField, 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: \"object\",\n title: \"Color\",\n description: \"Select a color.\",\n icon: () => <>🎨</>,\n components: {\n input: (props) => <ColorInput pluginConfig={config} {...props} />,\n },\n fields: [\n defineField({\n name: \"value\",\n type: \"string\",\n }),\n defineField({\n name: \"luminance\",\n type: \"number\",\n }),\n ],\n }),\n ],\n },\n };\n});\n\nexport { wildSanityColorFieldPlugin, typeName, type PluginConfig, type FieldOptions };\n"],"names":["maybeGetColorValue","source","varMatch","match","cssVarName","trim","split","startsWith","getComputedStyle","document","documentElement","getPropertyValue","safeGetLuminance","maybeColor","getLuminance","e","console","warn","ColorInput","t0","$","_c","pluginConfig","props","options","schemaType","colorList","renderOption","renderSelected","whitelist","blacklist","t1","value","t2","value_0","onChange","unset","color","luminance","undefined","set","t3","value_1","jsx","Avatar","backgroundColor","t4","t5","label","value_2","Card","jsxs","Flex","Box","Text","AsyncAutocomplete","_temp","opt","typeName","wildSanityColorFieldPlugin","definePlugin","config","name","schema","types","defineType","type","title","description","icon","Fragment","components","input","fields","defineField"],"mappings":"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"}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as sanity0 from "sanity";
|
|
2
|
-
import {
|
|
2
|
+
import { ObjectOptions, StringDefinition } from "sanity";
|
|
3
3
|
/** @public */
|
|
4
4
|
type ListItem = {
|
|
5
5
|
value: string;
|
|
@@ -20,7 +20,7 @@ type PluginConfig = {
|
|
|
20
20
|
}) => React.JSX.Element;
|
|
21
21
|
};
|
|
22
22
|
/** @public */
|
|
23
|
-
type FieldOptions =
|
|
23
|
+
type FieldOptions = ObjectOptions & {
|
|
24
24
|
whitelist?: string[];
|
|
25
25
|
blacklist?: string[];
|
|
26
26
|
renderSelected?: (value: string) => React.JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as sanity0 from "sanity";
|
|
2
|
-
import {
|
|
2
|
+
import { ObjectOptions, StringDefinition } from "sanity";
|
|
3
3
|
/** @public */
|
|
4
4
|
type ListItem = {
|
|
5
5
|
value: string;
|
|
@@ -20,7 +20,7 @@ type PluginConfig = {
|
|
|
20
20
|
}) => React.JSX.Element;
|
|
21
21
|
};
|
|
22
22
|
/** @public */
|
|
23
|
-
type FieldOptions =
|
|
23
|
+
type FieldOptions = ObjectOptions & {
|
|
24
24
|
whitelist?: string[];
|
|
25
25
|
blacklist?: string[];
|
|
26
26
|
renderSelected?: (value: string) => React.JSX.Element;
|
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 { getLuminance } from \"color2k\";\nimport { type ObjectInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\ntype FieldValues = {\n // The selected value from the color list.\n value?: string;\n // The calculated luminance of the selected color (0 to 1).\n luminance?: number;\n};\n\n// Maybe parse CSS variable and return its computed value.\n// Handles var(--variable), --variable.\n// If the input is not a CSS variable, returns it as-is.\nfunction maybeGetColorValue(source: string) {\n const varMatch = source.match(/^var\\((.+)\\)$/);\n const inner = varMatch?.[1] ? varMatch[1].trim() : source.trim();\n\n // Only take the first part for var(--variable, fallback) and ignore the fallback.\n const cssVarName = inner.split(\",\")[0]?.trim();\n const resolved = cssVarName?.startsWith(\"--\")\n ? getComputedStyle(document.documentElement).getPropertyValue(cssVarName).trim()\n : null;\n\n const color = resolved || source;\n return color;\n}\n\n// The getLuminance function can throw for invalid colors.\nfunction safeGetLuminance(maybeColor: string) {\n try {\n return getLuminance(maybeColor);\n } catch (e) {\n console.warn(\"Failed to get luminance\", e);\n return undefined;\n }\n}\n\nfunction ColorInput({\n pluginConfig,\n ...props\n}: ObjectInputProps<FieldValues> & {\n pluginConfig: PluginConfig;\n}) {\n const options = props.schemaType.options as FieldOptions | undefined;\n const colorList = pluginConfig.colorList;\n const renderOption = options?.renderOption ?? pluginConfig.renderOption;\n const renderSelected = options?.renderSelected ?? pluginConfig.renderSelected;\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?.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n if (!value) return props.onChange(unset());\n const color = maybeGetColorValue(value);\n const luminance = color ? safeGetLuminance(color) : undefined;\n return props.onChange(set({ ...props.value, value, luminance }));\n }}\n renderSelected={(value) => {\n if (renderSelected) return renderSelected(value);\n return <Avatar style={{ backgroundColor: value }} />;\n }}\n renderOption={({ label, value }) => {\n if (renderOption) return renderOption({ label, value });\n return (\n <Card as=\"button\">\n <Flex align=\"center\" padding={2}>\n <Avatar size={1} style={{ backgroundColor: value }} />\n <Box flex={1} padding={2}>\n <Text size={2}>{label}</Text>\n </Box>\n </Flex>\n </Card>\n );\n }}\n />\n );\n}\n\nexport { ColorInput };\n","import type { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type {
|
|
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 { getLuminance } from \"color2k\";\nimport { type ObjectInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\ntype FieldValues = {\n // The selected value from the color list.\n value?: string;\n // The calculated luminance of the selected color (0 to 1).\n luminance?: number;\n};\n\n// Maybe parse CSS variable and return its computed value.\n// Handles var(--variable), --variable.\n// If the input is not a CSS variable, returns it as-is.\nfunction maybeGetColorValue(source: string) {\n const varMatch = source.match(/^var\\((.+)\\)$/);\n const inner = varMatch?.[1] ? varMatch[1].trim() : source.trim();\n\n // Only take the first part for var(--variable, fallback) and ignore the fallback.\n const cssVarName = inner.split(\",\")[0]?.trim();\n const resolved = cssVarName?.startsWith(\"--\")\n ? getComputedStyle(document.documentElement).getPropertyValue(cssVarName).trim()\n : null;\n\n const color = resolved || source;\n return color;\n}\n\n// The getLuminance function can throw for invalid colors.\nfunction safeGetLuminance(maybeColor: string) {\n try {\n return getLuminance(maybeColor);\n } catch (e) {\n console.warn(\"Failed to get luminance\", e);\n return undefined;\n }\n}\n\nfunction ColorInput({\n pluginConfig,\n ...props\n}: ObjectInputProps<FieldValues> & {\n pluginConfig: PluginConfig;\n}) {\n const options = props.schemaType.options as FieldOptions | undefined;\n const colorList = pluginConfig.colorList;\n const renderOption = options?.renderOption ?? pluginConfig.renderOption;\n const renderSelected = options?.renderSelected ?? pluginConfig.renderSelected;\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?.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n if (!value) return props.onChange(unset());\n const color = maybeGetColorValue(value);\n const luminance = color ? safeGetLuminance(color) : undefined;\n return props.onChange(set({ ...props.value, value, luminance }));\n }}\n renderSelected={(value) => {\n if (renderSelected) return renderSelected(value);\n return <Avatar style={{ backgroundColor: value }} />;\n }}\n renderOption={({ label, value }) => {\n if (renderOption) return renderOption({ label, value });\n return (\n <Card as=\"button\">\n <Flex align=\"center\" padding={2}>\n <Avatar size={1} style={{ backgroundColor: value }} />\n <Box flex={1} padding={2}>\n <Text size={2}>{label}</Text>\n </Box>\n </Flex>\n </Card>\n );\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 colorList: ListItems;\n renderSelected?: (value: string) => React.JSX.Element;\n renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\n};\n\n/** @public */\nexport type FieldOptions = ObjectOptions & {\n whitelist?: string[];\n blacklist?: string[];\n renderSelected?: (value: string) => React.JSX.Element;\n renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\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\"> & {\n type: typeof typeName;\n options?: FieldOptions;\n };\n }\n}\n","import { defineField, 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: \"object\",\n title: \"Color\",\n description: \"Select a color.\",\n icon: () => <>🎨</>,\n components: {\n input: (props) => <ColorInput pluginConfig={config} {...props} />,\n },\n fields: [\n defineField({\n name: \"value\",\n type: \"string\",\n }),\n defineField({\n name: \"luminance\",\n type: \"number\",\n }),\n ],\n }),\n ],\n },\n };\n});\n\nexport { wildSanityColorFieldPlugin, typeName, type PluginConfig, type FieldOptions };\n"],"names":["maybeGetColorValue","source","varMatch","match","cssVarName","trim","split","startsWith","getComputedStyle","document","documentElement","getPropertyValue","safeGetLuminance","maybeColor","getLuminance","e","console","warn","ColorInput","t0","$","_c","pluginConfig","props","options","schemaType","colorList","renderOption","renderSelected","whitelist","blacklist","t1","value","t2","value_0","onChange","unset","color","luminance","undefined","set","t3","value_1","backgroundColor","t4","t5","label","value_2","_temp","opt","typeName","wildSanityColorFieldPlugin","definePlugin","config","name","schema","types","defineType","type","title","description","icon","components","input","fields","defineField"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@madebywild/sanity-color-field",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"color2k": "2.0.3",
|
|
25
|
-
"@madebywild/sanity-utils": "0.3.
|
|
25
|
+
"@madebywild/sanity-utils": "0.3.1"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@sanity/ui": "^3.1",
|
package/src/types.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ListItems } from "@madebywild/sanity-utils/async-autocomplete";
|
|
2
|
-
import type {
|
|
2
|
+
import type { ObjectOptions, StringDefinition } from "sanity";
|
|
3
3
|
|
|
4
4
|
/** @public */
|
|
5
5
|
export const typeName = "wild.color" as const;
|
|
@@ -12,7 +12,7 @@ export type PluginConfig = {
|
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
/** @public */
|
|
15
|
-
export type FieldOptions =
|
|
15
|
+
export type FieldOptions = ObjectOptions & {
|
|
16
16
|
whitelist?: string[];
|
|
17
17
|
blacklist?: string[];
|
|
18
18
|
renderSelected?: (value: string) => React.JSX.Element;
|