Fix emoji stories and add inline emoji story

Author: jamiebuilds-signal

ts/components/fun/FunEmoji.stories.tsx

@@ -5,9 +5,10 @@ import { chunk } from 'lodash';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { type ComponentMeta } from '../../storybook/types';
 import type { FunStaticEmojiProps } from './FunEmoji';
-import { FunStaticEmoji } from './FunEmoji';
+import { FunInlineEmoji, FunStaticEmoji } from './FunEmoji';
 import {
-  _allEmojiVariantKeys,
+  _getAllEmojiVariantKeys,
+  emojiVariantConstant,
   getEmojiParentByKey,
   getEmojiParentKeyByVariantKey,
   getEmojiVariantByKey,
@@ -30,7 +31,7 @@ type AllProps = Pick<FunStaticEmojiProps, 'size'>;
 
 export function All(props: AllProps): JSX.Element {
   const scrollerRef = useRef<HTMLDivElement>(null);
-  const data = Array.from(_allEmojiVariantKeys());
+  const data = Array.from(_getAllEmojiVariantKeys());
   const rows = chunk(data, COLUMNS);
 
   const getScrollElement = useCallback(() => {
@@ -117,3 +118,35 @@ export function All(props: AllProps): JSX.Element {
     </div>
   );
 }
+
+export function Inline(): JSX.Element {
+  return (
+    <div style={{ userSelect: 'none' }}>
+      <p style={{ userSelect: 'text' }}>
+        <FunInlineEmoji
+          role="img"
+          aria-label="Fried Shrimp"
+          emoji={emojiVariantConstant('\u{1F364}')}
+        />{' '}
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat
+        voluptates, mollitia tempora alias libero repudiandae nesciunt. Deleniti
+        ducimus dolorum, debitis, reprehenderit at ut deserunt fuga corrupti
+        provident quae natus a!{' '}
+        <FunInlineEmoji
+          role="img"
+          aria-label="Fried Shrimp"
+          emoji={emojiVariantConstant('\u{1F364}')}
+        />{' '}
+        Consectetur quibusdam accusantium magni ipsum nemo eligendi quisquam
+        dolor, recusandae vero dolore reiciendis doloribus ducimus officiis
+        minima! Unde accusantium ut eaque error quidem soluta! Distinctio dicta
+        rem nemo aut quo.{' '}
+        <FunInlineEmoji
+          role="img"
+          aria-label="Fried Shrimp"
+          emoji={emojiVariantConstant('\u{1F364}')}
+        />
+      </p>
+    </div>
+  );
+}

ts/components/fun/data/emojis.ts

@@ -617,8 +617,8 @@ export function getEmojiDefaultEnglishLocalizerIndex(): FunEmojiLocalizerIndex {
 }
 
 /** Exported for testing */
-export function* _allEmojiVariantKeys(): Iterable<EmojiVariantKey> {
-  yield* Object.keys(EMOJI_INDEX.variantByKey) as Array<EmojiVariantKey>;
+export function _getAllEmojiVariantKeys(): Iterable<EmojiVariantKey> {
+  return EMOJI_INDEX.variantByKey.keys();
 }
 
 export function emojiParentKeyConstant(input: string): EmojiParentKey {