Add alternative union string types

package.json

@@ -100,7 +100,7 @@
     "tiny-invariant": "^1.2.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
+    "typescript": "5.7.3"
   },
   "dependencies": {
     "flairup": "1.0.0"

src/Stylesheet/stylesheet.tsx

@@ -77,7 +77,7 @@ export const commonInteractionStyles = stylesheet.create({
   }
 });
 
-export function darkMode(key: string, value: Styles) {
+export function darkMode(key: string, value: Styles): Record<string, Record<string, Styles>> {
   return {
     '.epr-dark-theme': {
       [key]: value

src/components/body/EmojiCategory.tsx

@@ -7,11 +7,7 @@ import {
   commonStyles,
   stylesheet
 } from '../../Stylesheet/stylesheet';
-import {
-  CategoryConfig,
-  categoryFromCategoryConfig,
-  categoryNameFromCategoryConfig
-} from '../../config/categoryConfig';
+import { CategoryConfig } from '../../config/categoryConfig';
 
 type Props = Readonly<{
   categoryConfig: CategoryConfig;
@@ -26,9 +22,7 @@ export function EmojiCategory({
   hidden,
   hiddenOnSearch
 }: Props) {
-  const category = categoryFromCategoryConfig(categoryConfig);
-  const categoryName = categoryNameFromCategoryConfig(categoryConfig);
-
+  const { category, name } = categoryConfig;
   return (
     <li
       className={cx(
@@ -37,9 +31,9 @@ export function EmojiCategory({
         hiddenOnSearch && commonInteractionStyles.hiddenOnSearch
       )}
       data-name={category}
-      aria-label={categoryName}
+      aria-label={name}
     >
-      <h2 className={cx(styles.label)}>{categoryName}</h2>
+      <h2 className={cx(styles.label)}>{name}</h2>
       <div className={cx(styles.categoryContent)}>{children}</div>
     </li>
   );

src/components/body/EmojiList.tsx

@@ -4,9 +4,8 @@ import * as React from 'react';
 import { ClassNames } from '../../DomUtils/classNames';
 import { stylesheet } from '../../Stylesheet/stylesheet';
 import {
-  Categories,
-  CategoryConfig,
-  categoryFromCategoryConfig
+  Category,
+  CategoryConfig
 } from '../../config/categoryConfig';
 import {
   useCategoriesConfig,
@@ -34,9 +33,9 @@ export function EmojiList() {
   return (
     <ul className={cx(styles.emojiList)}>
       {categories.map(categoryConfig => {
-        const category = categoryFromCategoryConfig(categoryConfig);
+        const category = categoryConfig.category
 
-        if (category === Categories.SUGGESTED) {
+        if (category === 'suggested') {
           return <Suggested key={category} categoryConfig={categoryConfig} />;
         }
 
@@ -59,7 +58,7 @@ function RenderCategory({
   categoryConfig,
   renderdCategoriesCountRef
 }: {
-  category: Categories;
+  category: Category;
   categoryConfig: CategoryConfig;
   renderdCategoriesCountRef: React.MutableRefObject<number>;
 }) {

src/components/emoji/BaseEmojiProps.ts

@@ -1,6 +1,6 @@
 import { CustomEmoji } from '../../config/customEmojiConfig';
 import { DataEmoji } from '../../dataUtils/DataTypes';
-import { EmojiStyle } from '../../types/exposedTypes';
+import { EmojiStyle } from '../../types/public';
 
 export type BaseEmojiProps = {
   emoji?: DataEmoji | CustomEmoji;

src/components/emoji/EmojiImg.tsx

@@ -2,7 +2,7 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { stylesheet } from '../../Stylesheet/stylesheet';
-import { EmojiStyle } from '../../types/exposedTypes';
+import { EmojiStyle } from '../../types/public';
 
 import { emojiStyles } from './emojiStyles';
 

src/components/emoji/ExportedEmoji.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 
-import { EmojiStyle } from '../../types/exposedTypes';
+
+import { EmojiStyle } from '../../types/public';
 
 import { GetEmojiUrl } from './BaseEmojiProps';
 import { ViewOnlyEmoji } from './ViewOnlyEmoji';
 
 export function ExportedEmoji({
   unified,
   size = 32,
-  emojiStyle = EmojiStyle.APPLE,
+  emojiStyle = 'apple',
   lazyLoad = false,
   getEmojiUrl,
   emojiUrl

src/components/emoji/ViewOnlyEmoji.tsx

@@ -6,7 +6,6 @@ import {
   emojiUrlByUnified
 } from '../../dataUtils/emojiSelectors';
 import { isCustomEmoji } from '../../typeRefinements/typeRefinements';
-import { EmojiStyle } from '../../types/exposedTypes';
 import { useEmojisThatFailedToLoadState } from '../context/PickerContext';
 
 import { BaseEmojiProps } from './BaseEmojiProps';
@@ -40,7 +39,7 @@ export function ViewOnlyEmoji({
       <EmojiImg
         style={style}
         emojiName={unified}
-        emojiStyle={EmojiStyle.NATIVE}
+        emojiStyle={'native'}
         lazyLoad={lazyLoad}
         imgUrl={emojiToRender.imgUrl}
         onError={onError}
@@ -51,7 +50,7 @@ export function ViewOnlyEmoji({
 
   return (
     <>
-      {emojiStyle === EmojiStyle.NATIVE ? (
+      {emojiStyle === 'native' ? (
         <NativeEmoji unified={unified} style={style} className={className} />
       ) : (
         <EmojiImg

src/components/main/PickerMain.tsx

@@ -11,7 +11,6 @@ import {
 import useIsSearchMode from '../../hooks/useIsSearchMode';
 import { useKeyboardNavigation } from '../../hooks/useKeyboardNavigation';
 import { useOnFocus } from '../../hooks/useOnFocus';
-import { Theme } from '../../types/exposedTypes';
 import { usePickerMainRef } from '../context/ElementRefContext';
 import {
   PickerContextProvider,
@@ -56,8 +55,8 @@ function PickerRootElement({ children }: RootProps) {
       className={cx(
         styles.main,
         styles.baseVariables,
-        theme === Theme.DARK && styles.darkTheme,
-        theme === Theme.AUTO && styles.autoThemeDark,
+        theme === 'dark' && styles.darkTheme,
+        theme === 'auto' && styles.autoThemeDark,
         {
           [ClassNames.searchActive]: searchModeActive
         },

src/components/navigation/CategoryButton.tsx

@@ -7,10 +7,7 @@ import {
   darkMode,
   stylesheet
 } from '../../Stylesheet/stylesheet';
-import {
-  CategoryConfig,
-  categoryNameFromCategoryConfig
-} from '../../config/categoryConfig';
+import { CategoryConfig } from '../../config/categoryConfig';
 import { Button } from '../atoms/Button';
 
 import SVGNavigation from './svg/CategoryNav.svg';
@@ -42,7 +39,7 @@ export function CategoryButton({
         }
       )}
       onClick={onClick}
-      aria-label={categoryNameFromCategoryConfig(categoryConfig)}
+      aria-label={categoryConfig.name}
       aria-selected={isActiveCategory}
       role="tab"
       aria-controls="epr-category-nav-id"

src/components/navigation/CategoryNavigation.tsx

@@ -3,13 +3,11 @@ import * as React from 'react';
 import { useState } from 'react';
 
 import { stylesheet } from '../../Stylesheet/stylesheet';
-import { categoryFromCategoryConfig } from '../../config/categoryConfig';
 import { useCategoriesConfig } from '../../config/useConfig';
 import { useActiveCategoryScrollDetection } from '../../hooks/useActiveCategoryScrollDetection';
 import useIsSearchMode from '../../hooks/useIsSearchMode';
 import { useScrollCategoryIntoView } from '../../hooks/useScrollCategoryIntoView';
 import { useShouldHideCustomEmojis } from '../../hooks/useShouldHideCustomEmojis';
-import { isCustomCategory } from '../../typeRefinements/typeRefinements';
 import { useCategoryNavigationRef } from '../context/ElementRefContext';
 
 import { CategoryButton } from './CategoryButton';
@@ -33,13 +31,16 @@ export function CategoryNavigation() {
       ref={CategoryNavigationRef}
     >
       {categoriesConfig.map(categoryConfig => {
-        const category = categoryFromCategoryConfig(categoryConfig);
-        const isActiveCategory = category === activeCategory;
+        const category = categoryConfig.category
 
-        if (isCustomCategory(categoryConfig) && hideCustomCategory) {
+        const isSkippedCustom = hideCustomCategory && category === 'custom'
+        if (isSkippedCustom) {
           return null;
         }
 
+        const isActiveCategory = category === activeCategory;
+
+
         const allowNavigation = !isSearchMode && !isActiveCategory;
 
         return (

src/config/categoryConfig.ts

@@ -1,109 +1,96 @@
-import { Categories, SuggestionMode } from '../types/exposedTypes';
-
-export { Categories };
-
-const categoriesOrdered: Categories[] = [
-  Categories.SUGGESTED,
-  Categories.CUSTOM,
-  Categories.SMILEYS_PEOPLE,
-  Categories.ANIMALS_NATURE,
-  Categories.FOOD_DRINK,
-  Categories.TRAVEL_PLACES,
-  Categories.ACTIVITIES,
-  Categories.OBJECTS,
-  Categories.SYMBOLS,
-  Categories.FLAGS
-];
+import { SuggestionMode } from '../types/public';
+
+const CATEGORIES = [
+  'suggested',
+  'custom',
+  'smileys_people',
+  'animals_nature',
+  'food_drink',
+  'travel_places',
+  'activities',
+  'objects',
+  'symbols',
+  'flags'
+] as const;
+
+export type Category = typeof CATEGORIES[number];
 
 export const SuggestedRecent: CategoryConfig = {
   name: 'Recently Used',
-  category: Categories.SUGGESTED
-};
-
-export type CustomCategoryConfig = {
-  category: Categories.CUSTOM;
-  name: string;
+  category: 'suggested'
 };
 
-const configByCategory: Record<Categories, CategoryConfig> = {
-  [Categories.SUGGESTED]: {
-    category: Categories.SUGGESTED,
+const configByCategory: Record<Category, CategoryConfig> = {
+  suggested: {
+    category: 'suggested',
     name: 'Frequently Used'
   },
-  [Categories.CUSTOM]: {
-    category: Categories.CUSTOM,
+  custom: {
+    category: 'custom',
     name: 'Custom Emojis'
   },
-  [Categories.SMILEYS_PEOPLE]: {
-    category: Categories.SMILEYS_PEOPLE,
+  smileys_people: {
+    category: 'smileys_people',
     name: 'Smileys & People'
   },
-  [Categories.ANIMALS_NATURE]: {
-    category: Categories.ANIMALS_NATURE,
+  animals_nature: {
+    category: 'animals_nature',
     name: 'Animals & Nature'
   },
-  [Categories.FOOD_DRINK]: {
-    category: Categories.FOOD_DRINK,
+  food_drink: {
+    category: 'food_drink',
     name: 'Food & Drink'
   },
-  [Categories.TRAVEL_PLACES]: {
-    category: Categories.TRAVEL_PLACES,
+  travel_places: {
+    category: 'travel_places',
     name: 'Travel & Places'
   },
-  [Categories.ACTIVITIES]: {
-    category: Categories.ACTIVITIES,
+  activities: {
+    category: 'activities',
     name: 'Activities'
   },
-  [Categories.OBJECTS]: {
-    category: Categories.OBJECTS,
+  objects: {
+    category: 'objects',
     name: 'Objects'
   },
-  [Categories.SYMBOLS]: {
-    category: Categories.SYMBOLS,
+  symbols: {
+    category: 'symbols',
     name: 'Symbols'
   },
-  [Categories.FLAGS]: {
-    category: Categories.FLAGS,
+  flags: {
+    category: 'flags',
     name: 'Flags'
   }
 };
 
 export function baseCategoriesConfig(
-  modifiers?: Record<Categories, CategoryConfig>
+  modifiers?: Record<Category, CategoryConfig>
 ): CategoriesConfig {
-  return categoriesOrdered.map(category => {
+  return CATEGORIES.map(category => {
     return {
       ...configByCategory[category],
       ...(modifiers && modifiers[category] && modifiers[category])
     };
   });
 }
 
-export function categoryFromCategoryConfig(category: CategoryConfig) {
-  return category.category;
-}
-
-export function categoryNameFromCategoryConfig(category: CategoryConfig) {
-  return category.name;
-}
-
 export type CategoriesConfig = CategoryConfig[];
 
 export type CategoryConfig = {
-  category: Categories;
+  category: Category;
   name: string;
 };
 
-export type UserCategoryConfig = Array<Categories | CategoryConfig>;
+export type UserCategoryConfig = Array<Category | CategoryConfig>;
 
 export function mergeCategoriesConfig(
   userCategoriesConfig: UserCategoryConfig = [],
   modifiers: CategoryConfigModifiers = {}
 ): CategoriesConfig {
-  const extra = {} as Record<Categories, CategoryConfig>;
+  const extra = {} as Record<Category, CategoryConfig>;
 
-  if (modifiers.suggestionMode === SuggestionMode.RECENT) {
-    extra[Categories.SUGGESTED] = SuggestedRecent;
+  if (modifiers.suggestionMode === 'recent') {
+    extra['suggested'] = SuggestedRecent;
   }
 
   const base = baseCategoriesConfig(extra);
@@ -124,7 +111,7 @@ export function mergeCategoriesConfig(
 }
 
 function getBaseConfigByCategory(
-  category: Categories,
+  category: Category,
   modifier: CategoryConfig = {} as CategoryConfig
 ) {
   return Object.assign(configByCategory[category], modifier);