@diteme/emojis 0.1.0

package/src/png.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const source: string;
+  export default source;
+}

package/src/react-native.d.ts

@@ -0,0 +1,18 @@
+declare module "react-native" {
+  import type * as React from "react";
+
+  export interface ImageProps {
+    accessibilityLabel?: string;
+    resizeMode?: "contain" | "cover" | "stretch" | "center";
+    source?: unknown;
+    style?: unknown;
+  }
+
+  export interface ViewProps {
+    accessibilityLabel?: string;
+    style?: unknown;
+  }
+
+  export const Image: React.ComponentType<ImageProps>;
+  export const View: React.ComponentType<ViewProps>;
+}

package/src/registry/avatarRegistry.ts

@@ -0,0 +1,41 @@
+import CongratulationsPNG from "../assets/avatars/zebra/congratulations.png";
+import DisappointedPNG from "../assets/avatars/zebra/disappointed.png";
+import HappyPNG from "../assets/avatars/zebra/happy.png";
+import ProudPNG from "../assets/avatars/zebra/proud.png";
+import ReadingPNG from "../assets/avatars/zebra/reading.png";
+import SadPNG from "../assets/avatars/zebra/sad.png";
+import SurprisedPNG from "../assets/avatars/zebra/surprised.png";
+import ThinkingPNG from "../assets/avatars/zebra/thinking.png";
+import type {
+  AvatarCharacter,
+  ResolvedAsset,
+  ZebraMood,
+} from "../types";
+
+const png = (source: unknown): ResolvedAsset => ({ source, type: "png" });
+
+export const zebra = {
+  congratulations: png(CongratulationsPNG),
+  disappointed: png(DisappointedPNG),
+  happy: png(HappyPNG),
+  proud: png(ProudPNG),
+  reading: png(ReadingPNG),
+  sad: png(SadPNG),
+  surprised: png(SurprisedPNG),
+  thinking: png(ThinkingPNG),
+} as const satisfies Readonly<Record<ZebraMood, ResolvedAsset>>;
+
+export const avatarRegistry = {
+  zebra,
+} as const satisfies Readonly<Record<AvatarCharacter, typeof zebra>>;
+
+export const avatarCharacters = Object.keys(
+  avatarRegistry,
+) as AvatarCharacter[];
+
+export function getAvatarAsset(
+  character: string,
+  mood: string,
+): ResolvedAsset | undefined {
+  return avatarRegistry[character as AvatarCharacter]?.[mood as ZebraMood];
+}

package/src/registry/emojiRegistry.ts

@@ -0,0 +1,76 @@
+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 type { AssetRegistry, EmojiName, ResolvedAsset } from "../types";
+
+const png = (source: unknown): ResolvedAsset => ({ source, type: "png" });
+
+export const emojiRegistry = {
+  ai_tutor: png(AiTutorPNG),
+  coins: png(CoinsPNG),
+  conversation: png(ConversationPNG),
+  "daily-challenge": png(DailyChallengePNG),
+  downloads: png(DownloadsPNG),
+  experience: png(ExperiencePNG),
+  favorites: png(FavoritesPNG),
+  "fill-in-the-blanks": png(FillInTheBlanksPNG),
+  flashcards: png(FlashcardsPNG),
+  high_five: png(HighFivePNG),
+  leaderboard: png(LeaderboardPNG),
+  lessons: png(LessonsPNG),
+  level_up: png(LevelUpPNG),
+  listening: png(ListeningPNG),
+  matching: png(MatchingPNG),
+  master: png(MasterPNG),
+  offline_mode: png(OfflineModePNG),
+  pronounciation: png(PronounciationPNG),
+  proverbs: png(ProverbsPNG),
+  quiz: png(QuizPNG),
+  reading: png(ReadingPNG),
+  reward: png(RewardPNG),
+  rewards: png(RewardsPNG),
+  speaking: png(SpeakingPNG),
+  streak: png(StreakPNG),
+  team_victory: png(TeamVictoryPNG),
+  translate: png(TranslatePNG),
+  trophy: png(TrophyPNG),
+  waving: png(WavingPNG),
+  winner: png(WinnerPNG),
+  xp_earned: png(XpEarnedPNG),
+  writing: png(WritingPNG),
+} as const satisfies AssetRegistry<EmojiName>;
+
+export const emojiNames = Object.keys(emojiRegistry) as EmojiName[];
+
+export function getEmojiAsset(name: string): ResolvedAsset | undefined {
+  return emojiRegistry[name as EmojiName];
+}

package/src/types.ts

@@ -0,0 +1,81 @@
+import type * as React from "react";
+
+export type ImageFit = "contain" | "cover" | "fill" | "none" | "scale-down";
+
+export interface BaseImageProps {
+  size?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  alt?: string;
+  loading?: "lazy" | "eager";
+  borderRadius?: number | string;
+  objectFit?: ImageFit;
+  animated?: boolean;
+}
+
+export type EmojiName =
+  | "ai_tutor"
+  | "coins"
+  | "conversation"
+  | "daily-challenge"
+  | "downloads"
+  | "experience"
+  | "favorites"
+  | "fill-in-the-blanks"
+  | "flashcards"
+  | "high_five"
+  | "leaderboard"
+  | "lessons"
+  | "level_up"
+  | "listening"
+  | "matching"
+  | "master"
+  | "offline_mode"
+  | "pronounciation"
+  | "proverbs"
+  | "quiz"
+  | "reading"
+  | "reward"
+  | "rewards"
+  | "speaking"
+  | "streak"
+  | "team_victory"
+  | "translate"
+  | "trophy"
+  | "waving"
+  | "winner"
+  | "xp_earned"
+  | "writing";
+
+export type AvatarCharacter = "zebra";
+
+export type ZebraMood =
+  | "congratulations"
+  | "disappointed"
+  | "happy"
+  | "proud"
+  | "reading"
+  | "sad"
+  | "surprised"
+  | "thinking";
+
+export type AvatarMood = ZebraMood;
+
+export interface EmojiProps extends BaseImageProps {
+  name: EmojiName | (string & {});
+}
+
+export interface AvatarProps extends BaseImageProps {
+  character: AvatarCharacter | (string & {});
+  mood: AvatarMood | (string & {});
+}
+
+export interface ResolvedAsset {
+  source: unknown;
+  type: "png" | "svg" | "lottie" | "rive" | "glb";
+  animated?: boolean;
+}
+
+export type AssetRegistry<TName extends string = string> = Readonly<
+  Record<TName, ResolvedAsset>
+>;

package/src/utils/nativeStyles.ts

@@ -0,0 +1,18 @@
+import type { BaseImageProps } from "../types";
+import { DEFAULT_SIZE } from "./styles";
+
+export function getNativeImageStyle({
+  size = DEFAULT_SIZE,
+  style,
+  borderRadius = style?.borderRadius,
+}: Pick<BaseImageProps, "size" | "style" | "borderRadius" | "objectFit">) {
+  return [
+    {
+      width: size,
+      height: size,
+      borderRadius,
+      flexShrink: 0,
+    },
+    style,
+  ];
+}

package/src/utils/styles.ts

@@ -0,0 +1,23 @@
+import type * as React from "react";
+import type { BaseImageProps } from "../types";
+
+export const DEFAULT_SIZE = 32;
+
+export function getImageStyle({
+  size = DEFAULT_SIZE,
+  style,
+  borderRadius = style?.borderRadius,
+  objectFit = "contain",
+}: Pick<BaseImageProps, "size" | "style" | "borderRadius" | "objectFit">):
+React.CSSProperties {
+  return {
+    width: size,
+    height: size,
+    maxWidth: "100%",
+    objectFit,
+    borderRadius,
+    display: "block",
+    flexShrink: 0,
+    ...style,
+  };
+}