gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-11-27 18:10:58 +00:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

changes how emoji data is loaded inside Storybook
Some checks failed
Chromatic / Run Chromatic (push) Has been cancelled
Details

Browse Source
This commit is contained in:
ChaosExAnima 2025-11-13 16:56:12 +01:00
parent 547716fcaa
commit df1f2e8706
No known key found for this signature in database
GPG Key ID: 8F2B333100FB6117
1 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/javascript/mastodon/components/emoji/picker/emoji-picker.stories.tsx
View File

@ -2,12 +2,12 @@ import type { FC } from 'react';
import { useState } from 'react'; import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite'; import type { Meta, StoryObj } from '@storybook/react-vite';
import type { CompactEmoji } from 'emojibase';
import { flattenEmojiData } from 'emojibase';
import { action } from 'storybook/actions'; import { action } from 'storybook/actions';
import { import { putEmojiData } from '@/mastodon/features/emoji/database';
importCustomEmojiData, import { toSupportedLocale } from '@/mastodon/features/emoji/locale';
importEmojiData,
} from '@/mastodon/features/emoji/loader';
import { MockEmojiPicker } from './index'; import { MockEmojiPicker } from './index';
@ -17,18 +17,19 @@ const meta = {
title: 'Components/Emoji/EmojiPicker', title: 'Components/Emoji/EmojiPicker',
render(_args, { globals }) { render(_args, { globals }) {
const locale = typeof globals.locale === 'string' ? globals.locale : 'en'; const locale = typeof globals.locale === 'string' ? globals.locale : 'en';
return <StoryComponent locale={locale} />; return <StoryComponent locale={locale} key={locale} />;
}, },
} satisfies Meta; } satisfies Meta;
const StoryComponent: FC<{ locale: string }> = ({ locale }) => { const StoryComponent: FC<{ locale: string }> = ({ locale }) => {
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
void Promise.all([importCustomEmojiData(), importEmojiData(locale)]).then( if (!loaded) {
() => { void loadEmojiData(locale).then(() => {
action('emoji data loaded')(locale);
setLoaded(true); setLoaded(true);
}, });
); }
if (!loaded) { if (!loaded) {
return null; return null;
@ -36,6 +37,15 @@ const StoryComponent: FC<{ locale: string }> = ({ locale }) => {
return <MockEmojiPicker onSelect={onSelect} />; return <MockEmojiPicker onSelect={onSelect} />;
}; };
async function loadEmojiData(localeString: string) {
const locale = toSupportedLocale(localeString);
const emojis = (await import(
`../../../../../../node_modules/emojibase-data/${locale}/compact.json`
)) as { default: CompactEmoji[] };
const flattenedEmojis = flattenEmojiData(emojis.default);
await putEmojiData(flattenedEmojis, locale);
}
export default meta; export default meta;
type Story = StoryObj<typeof meta>; type Story = StoryObj<typeof meta>;