Add support for using an emoji as a plugin icon

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm ls:*)"
+    ]
+  }
+}

lerna.json

@@ -2,5 +2,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "2.0.19"
+  "version": "2.1.0-alpha.0"
 }

packages/react-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datocms-react-ui",
-  "version": "2.0.19",
+  "version": "2.1.0-alpha.0",
   "description": "React components to use inside DatoCMS plugins",
   "keywords": [
     "datocms",
@@ -42,7 +42,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
     "classnames": "^2.3.1",
-    "datocms-plugin-sdk": "^2.0.18",
+    "datocms-plugin-sdk": "^2.1.0-alpha.0",
     "react-intersection-observer": "^8.31.0",
     "react-select": "^5.2.1",
     "scroll-into-view-if-needed": "^2.2.20"

packages/sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datocms-plugin-sdk",
-  "version": "2.0.18",
+  "version": "2.1.0-alpha.0",
   "description": "DatoCMS Plugin SDK",
   "keywords": [
     "datocms",
@@ -39,6 +39,7 @@
     "@datocms/cma-client": "*",
     "@types/react": "^17.0.3",
     "datocms-structured-text-utils": "^2.0.0",
+    "emoji-regex-xs": "*",
     "penpal": "^4.1.1"
   },
   "devDependencies": {

packages/sdk/src/guardUtils.ts

@@ -1,3 +1,7 @@
+import emojiRegex from 'emoji-regex-xs';
+
+export type Emoji = string & { readonly __brand: 'Emoji' };
+
 export function isNullish(value: unknown): value is null | undefined {
   return value === null || value === undefined;
 }
@@ -10,6 +14,15 @@ export function isString(value: unknown): value is string {
   return typeof value === 'string';
 }
 
+export function isEmoji(value: unknown): value is Emoji {
+  if (!isString(value)) return false;
+
+  const regex = emojiRegex();
+  const match = value.match(regex);
+
+  return match !== null && match.length === 1 && match[0] === value;
+}
+
 export function isNumber(value: unknown): value is number {
   return typeof value === 'number';
 }

packages/sdk/src/icon.ts

@@ -1,6 +1,10 @@
-import { isRecord, isString } from './guardUtils.js';
+import { isEmoji, isRecord, isString } from './guardUtils.js';
 
-export type Icon = AwesomeFontIconIdentifier | SvgDefinition;
+export type Icon = AwesomeFontIconIdentifier | SvgDefinition | EmojiDefinition;
+
+export function isIcon(value: unknown): value is Icon {
+  return isString(value) || isSvgDefinition(value) || isEmojiDefinition(value);
+}
 
 /**
  * Defines a custom SVG icon for use in DatoCMS plugins.
@@ -40,16 +44,40 @@ export type SvgDefinition = {
   content: string;
 };
 
-export function isIcon(value: unknown): value is Icon {
+export function isSvgDefinition(value: unknown): value is SvgDefinition {
   return (
-    isString(value) ||
-    (isRecord(value) &&
-      value.type === 'svg' &&
-      isString(value.viewBox) &&
-      isString(value.content))
+    isRecord(value) &&
+    value.type === 'svg' &&
+    isString(value.viewBox) &&
+    isString(value.content)
   );
 }
 
+/**
+ * Defines an emoji icon for use in DatoCMS plugins.
+ *
+ * @example
+ * ```typescript
+ * const starIcon: EmojiDefinition = {
+ *   type: 'emoji',
+ *   emoji: '⭐'
+ * };
+ * ```
+ */
+export type EmojiDefinition = {
+  /** Always set to 'emoji' to indicate this is an emoji icon */
+  type: 'emoji';
+
+  /**
+   * A string contaning a single emoji.
+   */
+  emoji: string;
+};
+
+export function isEmojiDefinition(value: unknown): value is EmojiDefinition {
+  return isRecord(value) && value.type === 'emoji' && isEmoji(value.emoji);
+}
+
 /**
  * Font Awesome icon identifier for use in DatoCMS plugins.
  *