✨

sparkle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.145",
+  "version": "0.2.146",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

sparkle/src/components/EmojiPicker.tsx

@@ -1,10 +1,12 @@
-import type { EmojiMartData, Skin } from "@emoji-mart/data";
+import type { EmojiMartData } from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
 import React from "react";
 
+import { EmojiSkinType } from "@sparkle/lib/avatar/types";
+
 interface EmojiPickerProps {
-  data: EmojiMartData;
-  onEmojiSelect: (emoji: Skin) => void;
+  data?: EmojiMartData;
+  onEmojiSelect: (emoji: EmojiSkinType) => void;
   previewPosition?: "none";
   theme: "dark" | "light";
 }

sparkle/src/lib/avatar/types.ts

@@ -1,6 +1,13 @@
 import type {
+  Emoji,
   EmojiMartData as EmojiData,
   Skin as EmojiSkin,
 } from "@emoji-mart/data";
 
+export type EmojiSkinType = Pick<Emoji, "id" | "name" | "keywords"> & {
+  native: string;
+  shortcodes: string;
+  unified: string;
+};
+
 export { EmojiData, EmojiSkin };

sparkle/src/lib/avatar/utils.ts

@@ -4,6 +4,8 @@ import { EmojiData } from "@sparkle/lib/avatar/types";
 
 const EMOJI_URL_REGEXP = /\/emojis\/bg-([^/]*)\/([^/]*)\/([^/.]*)/;
 
+type backgroundColorType = `bg-${string}`;
+
 /**
  * This helper extracts emojis and background color from a Dust url.
  * URL structure is defined as such:
@@ -28,27 +30,27 @@ export function getEmojiAndBackgroundFromUrl(url: string) {
       return null;
     }
 
+    const prefixedBackgroundColor: backgroundColorType = `bg-${backgroundColor}`;
+
     return {
-      backgroundColor,
+      backgroundColor: prefixedBackgroundColor,
       id,
       unified,
-      native: skinEmoji.native,
+      skinEmoji: skinEmoji.native,
     };
   }
 
   return null;
 }
 
-type bgColorType = `bg-${string}`;
-
 export function createEmojiAndBackgroundUrlSuffix({
-  bgColor,
+  backgroundColor,
   id,
   unified,
 }: {
-  bgColor: bgColorType;
+  backgroundColor: backgroundColorType;
   id: string;
   unified: string;
 }) {
-  return `/emojis/${bgColor}/${id}/${unified}`;
+  return `/emojis/${backgroundColor}/${id}/${unified}`;
 }

sparkle/src/stories/Avatar.stories.tsx

@@ -37,6 +37,13 @@ export const AvatarExample = () => (
       <Avatar size="xl" name="Omar Doe" />
       <Avatar size="xxl" name="Omar Doe" />
     </div>
+    <div>With emoji url</div>
+    <div className="s-flex s-gap-4">
+      <Avatar
+        size="xs"
+        visual="https://dust.tt/static/emojis/bg-cyan-100/lotus/1fab7"
+      />
+    </div>
     <div>With emoji</div>
     <div className="s-flex s-gap-4">
       <Avatar size="xs" emoji="❤️" backgroundColor="s-bg-red-100" />