@diteme/emojis 0.1.0

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@diteme/emojis",
+  "version": "0.1.0",
+  "description": "Production-ready Diteme emoji and mascot components for React, Next.js, Vite, CRA, Expo, and React Native.",
+  "keywords": [
+    "diteme",
+    "emoji",
+    "emojis",
+    "avatar",
+    "mascot",
+    "react",
+    "react-native",
+    "expo",
+    "nextjs",
+    "vite",
+    "typescript"
+  ],
+  "homepage": "https://github.com/diteme/emojis#readme",
+  "bugs": {
+    "url": "https://github.com/diteme/emojis/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/diteme/emojis.git"
+  },
+  "license": "MIT",
+  "author": "Diteme",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./src/index.native.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./native": {
+      "types": "./dist/index.native.d.ts",
+      "import": "./dist/index.native.js",
+      "require": "./dist/index.native.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "tsup --config tsup.config.mjs && node ./scripts/copy-assets.mjs",
+    "dev": "tsup --config tsup.config.mjs --watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.7.2",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "react": ">=18.3.0 || >=19.0.0",
+    "react-native": ">=0.74.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "module": "./dist/index.js",
+  "react-native": "./src/index.native.ts"
+}

package/src/__tests__/emojis.test.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import {
+  Avatar,
+  Emoji,
+  Trophy,
+  avatarRegistry,
+  emojiRegistry,
+  getAvatarAsset,
+  getEmojiAsset,
+} from "../index";
+
+describe("@diteme/emojis", () => {
+  it("loads the emoji registry", () => {
+    expect(emojiRegistry.trophy).toBeDefined();
+    expect(getEmojiAsset("translate")?.type).toBe("png");
+  });
+
+  it("loads the avatar registry", () => {
+    expect(avatarRegistry.zebra.happy).toBeDefined();
+    expect(getAvatarAsset("zebra", "reading")?.type).toBe("png");
+  });
+
+  it("renders components", () => {
+    expect(renderToStaticMarkup(<Emoji name="trophy" size={64} />)).toContain(
+      "img",
+    );
+    expect(
+      renderToStaticMarkup(
+        <Avatar character="zebra" mood="happy" size={220} />,
+      ),
+    ).toContain("img");
+    expect(renderToStaticMarkup(<Trophy size={48} />)).toContain("img");
+  });
+
+  it("falls back gracefully for invalid emoji names", () => {
+    const html = renderToStaticMarkup(<Emoji name="not-real" size={32} />);
+
+    expect(html).toContain("data-diteme-missing-asset");
+    expect(html).toContain("not-real");
+  });
+});

package/src/components/Avatar.native.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { NativePrimitiveImage } from "./NativePrimitiveImage";
+import { getAvatarAsset } from "../registry/avatarRegistry";
+import type { AvatarProps } from "../types";
+
+export const Avatar = React.memo(function Avatar({
+  character,
+  mood,
+  alt = `${character} ${mood}`,
+  ...props
+}: AvatarProps) {
+  const asset = getAvatarAsset(character, mood);
+
+  return (
+    <NativePrimitiveImage
+      {...props}
+      alt={alt}
+      fallbackLabel={`${character}:${mood}`}
+      source={asset?.source}
+    />
+  );
+});

package/src/components/Avatar.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { PrimitiveImage } from "./PrimitiveImage";
+import { getAvatarAsset } from "../registry/avatarRegistry";
+import type { AvatarProps } from "../types";
+
+export const Avatar = React.memo(function Avatar({
+  character,
+  mood,
+  alt = `${character} ${mood}`,
+  ...props
+}: AvatarProps) {
+  const asset = getAvatarAsset(character, mood);
+
+  return (
+    <PrimitiveImage
+      {...props}
+      alt={alt}
+      fallbackLabel={`${character}:${mood}`}
+      source={asset?.source}
+    />
+  );
+});

package/src/components/Emoji.native.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { NativePrimitiveImage } from "./NativePrimitiveImage";
+import { getEmojiAsset } from "../registry/emojiRegistry";
+import type { EmojiProps } from "../types";
+
+export const Emoji = React.memo(function Emoji({
+  name,
+  alt = name,
+  ...props
+}: EmojiProps) {
+  const asset = getEmojiAsset(name);
+
+  return (
+    <NativePrimitiveImage
+      {...props}
+      alt={alt}
+      fallbackLabel={name}
+      source={asset?.source}
+    />
+  );
+});

package/src/components/Emoji.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { PrimitiveImage } from "./PrimitiveImage";
+import { getEmojiAsset } from "../registry/emojiRegistry";
+import type { EmojiProps } from "../types";
+
+export const Emoji = React.memo(function Emoji({
+  name,
+  alt = name,
+  ...props
+}: EmojiProps) {
+  const asset = getEmojiAsset(name);
+
+  return (
+    <PrimitiveImage
+      {...props}
+      alt={alt}
+      fallbackLabel={name}
+      source={asset?.source}
+    />
+  );
+});

package/src/components/NativePrimitiveImage.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { Image, View } from "react-native";
+import { getNativeImageStyle } from "../utils/nativeStyles";
+import type { BaseImageProps } from "../types";
+
+export interface NativePrimitiveImageProps extends BaseImageProps {
+  source?: unknown;
+  fallbackLabel: string;
+}
+
+export const NativePrimitiveImage = React.memo(function NativePrimitiveImage({
+  source,
+  fallbackLabel,
+  alt = fallbackLabel,
+  objectFit = "contain",
+  ...styleProps
+}: NativePrimitiveImageProps) {
+  const style = getNativeImageStyle(styleProps);
+  const resizeMode = objectFit === "cover" ? "cover" : "contain";
+
+  if (!source) {
+    return <View accessibilityLabel={alt} style={style} />;
+  }
+
+  return (
+    <Image accessibilityLabel={alt} resizeMode={resizeMode} source={source} style={style} />
+  );
+});

package/src/components/PrimitiveImage.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { getImageStyle } from "../utils/styles";
+import type { BaseImageProps } from "../types";
+
+export interface PrimitiveImageProps extends BaseImageProps {
+  source?: unknown;
+  fallbackLabel: string;
+}
+
+export const PrimitiveImage = React.memo(function PrimitiveImage({
+  source,
+  fallbackLabel,
+  alt = fallbackLabel,
+  loading = "lazy",
+  className,
+  ...styleProps
+}: PrimitiveImageProps) {
+  const style = getImageStyle(styleProps);
+
+  if (typeof source !== "string" || source.length === 0) {
+    return (
+      <span
+        aria-label={alt}
+        className={className}
+        data-diteme-missing-asset={fallbackLabel}
+        role="img"
+        style={style}
+      />
+    );
+  }
+
+  return (
+    <img
+      alt={alt}
+      className={className}
+      decoding="async"
+      loading={loading}
+      src={source}
+      style={style}
+    />
+  );
+});

package/src/components/createEmojiComponent.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { PrimitiveImage } from "./PrimitiveImage";
+import type { BaseImageProps, EmojiName } from "../types";
+
+export function createEmojiComponent(name: EmojiName | (string & {}), source: unknown) {
+  const Component = React.memo(function DitemeEmoji({
+    alt = name,
+    ...props
+  }: Omit<BaseImageProps, "animated"> & { animated?: boolean }) {
+    return (
+      <PrimitiveImage
+        {...props}
+        alt={alt}
+        fallbackLabel={name}
+        source={source}
+      />
+    );
+  });
+
+  Component.displayName = name
+    .split(/[-_]/)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+
+  return Component;
+}

package/src/components/createNativeEmojiComponent.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { NativePrimitiveImage } from "./NativePrimitiveImage";
+import type { BaseImageProps, EmojiName } from "../types";
+
+export function createNativeEmojiComponent(
+  name: EmojiName | (string & {}),
+  source: unknown,
+) {
+  const Component = React.memo(function DitemeNativeEmoji({
+    alt = name,
+    ...props
+  }: BaseImageProps) {
+    return (
+      <NativePrimitiveImage
+        {...props}
+        alt={alt}
+        fallbackLabel={name}
+        source={source}
+      />
+    );
+  });
+
+  Component.displayName = name
+    .split(/[-_]/)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+
+  return Component;
+}

package/src/generated.native.ts

@@ -0,0 +1,80 @@
+import AiTutorPNG from "./assets/emojis/ai_tutor.png";
+import CoinsPNG from "./assets/emojis/coins.png";
+import ConversationPNG from "./assets/emojis/conversation.png";
+import DailyChallengePNG from "./assets/emojis/daily-challenge.png";
+import DownloadsPNG from "./assets/emojis/downloads.png";
+import ExperiencePNG from "./assets/emojis/experience.png";
+import FavoritesPNG from "./assets/emojis/favorites.png";
+import FillInTheBlanksPNG from "./assets/emojis/fill-in-the-blanks.png";
+import FlashcardsPNG from "./assets/emojis/flashcards.png";
+import HighFivePNG from "./assets/emojis/high_five.png";
+import LeaderboardPNG from "./assets/emojis/leaderboard.png";
+import LessonsPNG from "./assets/emojis/lessons.png";
+import LevelUpPNG from "./assets/emojis/level_up.png";
+import ListeningPNG from "./assets/emojis/listening.png";
+import MatchingPNG from "./assets/emojis/matching.png";
+import MasterPNG from "./assets/emojis/master.png";
+import OfflineModePNG from "./assets/emojis/offline_mode.png";
+import PronounciationPNG from "./assets/emojis/pronounciation.png";
+import ProverbsPNG from "./assets/emojis/proverbs.png";
+import QuizPNG from "./assets/emojis/quiz.png";
+import ReadingPNG from "./assets/emojis/reading.png";
+import RewardPNG from "./assets/emojis/reward.png";
+import RewardsPNG from "./assets/emojis/rewards.png";
+import SpeakingPNG from "./assets/emojis/speaking.png";
+import StreakPNG from "./assets/emojis/streak.png";
+import TeamVictoryPNG from "./assets/emojis/team_victory.png";
+import TranslatePNG from "./assets/emojis/translate.png";
+import TrophyPNG from "./assets/emojis/trophy.png";
+import WavingPNG from "./assets/emojis/waving.png";
+import WinnerPNG from "./assets/emojis/winner.png";
+import XpEarnedPNG from "./assets/emojis/xp_earned.png";
+import WritingPNG from "./assets/emojis/writing.png";
+import { createNativeEmojiComponent } from "./components/createNativeEmojiComponent";
+
+export const AiTutor = createNativeEmojiComponent("ai_tutor", AiTutorPNG);
+export const Coins = createNativeEmojiComponent("coins", CoinsPNG);
+export const Conversation = createNativeEmojiComponent("conversation", ConversationPNG);
+export const DailyChallenge = createNativeEmojiComponent(
+  "daily-challenge",
+  DailyChallengePNG,
+);
+export const Downloads = createNativeEmojiComponent("downloads", DownloadsPNG);
+export const Experience = createNativeEmojiComponent("experience", ExperiencePNG);
+export const Favorites = createNativeEmojiComponent("favorites", FavoritesPNG);
+export const FillInTheBlanks = createNativeEmojiComponent(
+  "fill-in-the-blanks",
+  FillInTheBlanksPNG,
+);
+export const Flashcards = createNativeEmojiComponent("flashcards", FlashcardsPNG);
+export const HighFive = createNativeEmojiComponent("high_five", HighFivePNG);
+export const Leaderboard = createNativeEmojiComponent("leaderboard", LeaderboardPNG);
+export const Lessons = createNativeEmojiComponent("lessons", LessonsPNG);
+export const LevelUp = createNativeEmojiComponent("level_up", LevelUpPNG);
+export const Listening = createNativeEmojiComponent("listening", ListeningPNG);
+export const Matching = createNativeEmojiComponent("matching", MatchingPNG);
+export const Master = createNativeEmojiComponent("master", MasterPNG);
+export const OfflineMode = createNativeEmojiComponent(
+  "offline_mode",
+  OfflineModePNG,
+);
+export const Pronounciation = createNativeEmojiComponent(
+  "pronounciation",
+  PronounciationPNG,
+);
+export const Proverbs = createNativeEmojiComponent("proverbs", ProverbsPNG);
+export const Quiz = createNativeEmojiComponent("quiz", QuizPNG);
+export const Reading = createNativeEmojiComponent("reading", ReadingPNG);
+export const Reward = createNativeEmojiComponent("reward", RewardPNG);
+export const Rewards = createNativeEmojiComponent("rewards", RewardsPNG);
+export const Speaking = createNativeEmojiComponent("speaking", SpeakingPNG);
+export const Streak = createNativeEmojiComponent("streak", StreakPNG);
+export const TeamVictory = createNativeEmojiComponent("team_victory", TeamVictoryPNG);
+export const Translate = createNativeEmojiComponent("translate", TranslatePNG);
+export const Trophy = createNativeEmojiComponent("trophy", TrophyPNG);
+export const Waving = createNativeEmojiComponent("waving", WavingPNG);
+export const Winner = createNativeEmojiComponent("winner", WinnerPNG);
+export const XpEarned = createNativeEmojiComponent("xp_earned", XpEarnedPNG);
+export const Writing = createNativeEmojiComponent("writing", WritingPNG);
+
+export const Fire = createNativeEmojiComponent("fire", undefined);

package/src/generated.ts

@@ -0,0 +1,80 @@
+import AiTutorPNG from "./assets/emojis/ai_tutor.png";
+import CoinsPNG from "./assets/emojis/coins.png";
+import ConversationPNG from "./assets/emojis/conversation.png";
+import DailyChallengePNG from "./assets/emojis/daily-challenge.png";
+import DownloadsPNG from "./assets/emojis/downloads.png";
+import ExperiencePNG from "./assets/emojis/experience.png";
+import FavoritesPNG from "./assets/emojis/favorites.png";
+import FillInTheBlanksPNG from "./assets/emojis/fill-in-the-blanks.png";
+import FlashcardsPNG from "./assets/emojis/flashcards.png";
+import HighFivePNG from "./assets/emojis/high_five.png";
+import LeaderboardPNG from "./assets/emojis/leaderboard.png";
+import LessonsPNG from "./assets/emojis/lessons.png";
+import LevelUpPNG from "./assets/emojis/level_up.png";
+import ListeningPNG from "./assets/emojis/listening.png";
+import MatchingPNG from "./assets/emojis/matching.png";
+import MasterPNG from "./assets/emojis/master.png";
+import OfflineModePNG from "./assets/emojis/offline_mode.png";
+import PronounciationPNG from "./assets/emojis/pronounciation.png";
+import ProverbsPNG from "./assets/emojis/proverbs.png";
+import QuizPNG from "./assets/emojis/quiz.png";
+import ReadingPNG from "./assets/emojis/reading.png";
+import RewardPNG from "./assets/emojis/reward.png";
+import RewardsPNG from "./assets/emojis/rewards.png";
+import SpeakingPNG from "./assets/emojis/speaking.png";
+import StreakPNG from "./assets/emojis/streak.png";
+import TeamVictoryPNG from "./assets/emojis/team_victory.png";
+import TranslatePNG from "./assets/emojis/translate.png";
+import TrophyPNG from "./assets/emojis/trophy.png";
+import WavingPNG from "./assets/emojis/waving.png";
+import WinnerPNG from "./assets/emojis/winner.png";
+import XpEarnedPNG from "./assets/emojis/xp_earned.png";
+import WritingPNG from "./assets/emojis/writing.png";
+import { createEmojiComponent } from "./components/createEmojiComponent";
+
+export const AiTutor = createEmojiComponent("ai_tutor", AiTutorPNG);
+export const Coins = createEmojiComponent("coins", CoinsPNG);
+export const Conversation = createEmojiComponent("conversation", ConversationPNG);
+export const DailyChallenge = createEmojiComponent(
+  "daily-challenge",
+  DailyChallengePNG,
+);
+export const Downloads = createEmojiComponent("downloads", DownloadsPNG);
+export const Experience = createEmojiComponent("experience", ExperiencePNG);
+export const Favorites = createEmojiComponent("favorites", FavoritesPNG);
+export const FillInTheBlanks = createEmojiComponent(
+  "fill-in-the-blanks",
+  FillInTheBlanksPNG,
+);
+export const Flashcards = createEmojiComponent("flashcards", FlashcardsPNG);
+export const HighFive = createEmojiComponent("high_five", HighFivePNG);
+export const Leaderboard = createEmojiComponent("leaderboard", LeaderboardPNG);
+export const Lessons = createEmojiComponent("lessons", LessonsPNG);
+export const LevelUp = createEmojiComponent("level_up", LevelUpPNG);
+export const Listening = createEmojiComponent("listening", ListeningPNG);
+export const Matching = createEmojiComponent("matching", MatchingPNG);
+export const Master = createEmojiComponent("master", MasterPNG);
+export const OfflineMode = createEmojiComponent(
+  "offline_mode",
+  OfflineModePNG,
+);
+export const Pronounciation = createEmojiComponent(
+  "pronounciation",
+  PronounciationPNG,
+);
+export const Proverbs = createEmojiComponent("proverbs", ProverbsPNG);
+export const Quiz = createEmojiComponent("quiz", QuizPNG);
+export const Reading = createEmojiComponent("reading", ReadingPNG);
+export const Reward = createEmojiComponent("reward", RewardPNG);
+export const Rewards = createEmojiComponent("rewards", RewardsPNG);
+export const Speaking = createEmojiComponent("speaking", SpeakingPNG);
+export const Streak = createEmojiComponent("streak", StreakPNG);
+export const TeamVictory = createEmojiComponent("team_victory", TeamVictoryPNG);
+export const Translate = createEmojiComponent("translate", TranslatePNG);
+export const Trophy = createEmojiComponent("trophy", TrophyPNG);
+export const Waving = createEmojiComponent("waving", WavingPNG);
+export const Winner = createEmojiComponent("winner", WinnerPNG);
+export const XpEarned = createEmojiComponent("xp_earned", XpEarnedPNG);
+export const Writing = createEmojiComponent("writing", WritingPNG);
+
+export const Fire = createEmojiComponent("fire", undefined);

package/src/index.native.ts

@@ -0,0 +1,22 @@
+export { Avatar } from "./components/Avatar.native";
+export { Emoji } from "./components/Emoji.native";
+export {
+  avatarCharacters,
+  avatarRegistry,
+  getAvatarAsset,
+  zebra,
+} from "./registry/avatarRegistry";
+export { emojiNames, emojiRegistry, getEmojiAsset } from "./registry/emojiRegistry";
+export * from "./generated.native";
+export type {
+  AssetRegistry,
+  AvatarCharacter,
+  AvatarMood,
+  AvatarProps,
+  BaseImageProps,
+  EmojiName,
+  EmojiProps,
+  ImageFit,
+  ResolvedAsset,
+  ZebraMood,
+} from "./types";

package/src/index.ts

@@ -0,0 +1,22 @@
+export { Avatar } from "./components/Avatar";
+export { Emoji } from "./components/Emoji";
+export {
+  avatarCharacters,
+  avatarRegistry,
+  getAvatarAsset,
+  zebra,
+} from "./registry/avatarRegistry";
+export { emojiNames, emojiRegistry, getEmojiAsset } from "./registry/emojiRegistry";
+export * from "./generated";
+export type {
+  AssetRegistry,
+  AvatarCharacter,
+  AvatarMood,
+  AvatarProps,
+  BaseImageProps,
+  EmojiName,
+  EmojiProps,
+  ImageFit,
+  ResolvedAsset,
+  ZebraMood,
+} from "./types";