refactor: use apple emojis (#15965)

Closes https://github.com/coder/coder/issues/14998

site/package.json

@@ -30,7 +30,8 @@
 		"test:watch": "jest --selectProjects test --watch",
 		"test:storybook": "test-storybook",
 		"stats": "STATS=true pnpm build && npx http-server ./stats -p 8081 -c-1",
-		"deadcode": "ts-prune | grep -v \".stories\\|.config\\|e2e\\|__mocks__\\|used in module\\|testHelpers\\|typesGenerated\" || echo \"No deadcode found.\""
+		"deadcode": "ts-prune | grep -v \".stories\\|.config\\|e2e\\|__mocks__\\|used in module\\|testHelpers\\|typesGenerated\" || echo \"No deadcode found.\"",
+		"update-emojis": "cp -rf ./node_modules/emoji-datasource-apple/img/apple/64/* ./static/emojis"
 	},
 	"dependencies": {
 		"@alwaysmeticulous/recorder-loader": "2.137.0",
@@ -82,6 +83,7 @@
 		"cronstrue": "2.50.0",
 		"date-fns": "2.30.0",
 		"dayjs": "1.11.13",
+		"emoji-datasource-apple": "15.1.2",
 		"emoji-mart": "5.6.0",
 		"file-saver": "2.0.5",
 		"formik": "2.4.6",

site/pnpm-lock.yaml

@@ -159,6 +159,9 @@ importers:
       dayjs:
         specifier: 1.11.13
         version: 1.11.13
+      emoji-datasource-apple:
+        specifier: 15.1.2
+        version: 15.1.2
       emoji-mart:
         specifier: 5.6.0
         version: 5.6.0
@@ -3684,6 +3687,9 @@ packages:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
 
+  emoji-datasource-apple@15.1.2:
+    resolution: {integrity: sha512-32UZTK36x4DlvgD1smkmBlKmmJH7qUr5Qut4U/on2uQLGqNXGbZiheq6/LEA8xRQEUrmNrGEy25wpEI6wvYmTg==}
+
   emoji-mart@5.6.0:
     resolution: {integrity: sha512-eJp3QRe79pjwa+duv+n7+5YsNhRcMl812EcFVwrnRvYKoNPoQb5qxU8DG6Bgwji0akHdp6D4Ln6tYLG58MFSow==}
 
@@ -9653,6 +9659,8 @@ snapshots:
 
   emittery@0.13.1: {}
 
+  emoji-datasource-apple@15.1.2: {}
+
   emoji-mart@5.6.0: {}
 
   emoji-regex@8.0.0: {}

site/src/@types/emoji-mart.d.ts

@@ -35,6 +35,7 @@ declare module "@emoji-mart/react" {
 		custom: CustomCategory[];
 		emojiButtonSize?: number;
 		emojiSize?: number;
+		emojiVersion?: string;
 		onEmojiSelect: (emoji: EmojiData) => void;
 	}
 

site/src/components/IconField/EmojiPicker.tsx

@@ -1,6 +1,6 @@
-import data from "@emoji-mart/data/sets/14/twitter.json";
-import EmojiMart, { type EmojiMartProps } from "@emoji-mart/react";
-import type { FC } from "react";
+import data from "@emoji-mart/data/sets/15/apple.json";
+import EmojiMart from "@emoji-mart/react";
+import type { ComponentProps, FC } from "react";
 import icons from "theme/icons.json";
 
 const custom = [
@@ -21,7 +21,7 @@ const custom = [
 ];
 
 type EmojiPickerProps = Omit<
-	EmojiMartProps,
+	ComponentProps<typeof EmojiMart>,
 	"custom" | "data" | "set" | "theme"
 >;
 
@@ -29,7 +29,8 @@ const EmojiPicker: FC<EmojiPickerProps> = (props) => {
 	return (
 		<EmojiMart
 			theme="dark"
-			set="twitter"
+			set="apple"
+			emojiVersion="15"
 			data={data}
 			custom={custom}
 			{...props}