@fibery/ui-kit 1.13.0 → 1.15.0

package/src/emoji-picker/primitives/emoji.tsx

@@ -0,0 +1,131 @@
+import {EmojiItem, EmojiSkin} from "@fibery/emoji-data";
+import {css, cx} from "@linaria/core";
+import {border, themeVars} from "../../designSystem";
+import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
+import {emojiPadding} from "./layout";
+
+const emojiWrapperCss = css`
+  color: ${themeVars.textColor};
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla",
+    "Noto Color Emoji", "Android Emoji";
+`;
+const emojiWrapperSizedCss = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const emojiInlineImgCss = css`
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.1em;
+`;
+const emojiSizedImgCss = css`
+  width: 100%;
+  height: 100%;
+`;
+
+const clickableCss = css`
+  padding: ${emojiPadding}px;
+  cursor: pointer;
+  font-size: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  box-shadow: none;
+  border-radius: ${border.radius8}px;
+
+  &:hover {
+    background-color: var(--fibery-emoji-hover-color, ${themeVars.badgeBgColor});
+  }
+`;
+
+// This is needed to keep text-selection working for image based emojis Details: https://the.fibery.io/SoftDev/bug/Improve-selection-text-with-emojis-8963
+const emptyPixel = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
+
+export type EmojiProps = {
+  size?: number;
+  /** id or colons */
+  emoji: string;
+  tooltip?: boolean;
+  /** max supported version of emojis */
+  version?: number;
+  onClick?: (emoji: EmojiItem, event: React.MouseEvent) => void;
+  skin?: EmojiSkin;
+  /** render emoji as native unicode if possible */
+  native?: boolean;
+};
+export const Emoji: React.FC<EmojiProps> = ({
+  emoji: idOrColons,
+  tooltip,
+  size,
+  onClick,
+  version = 14,
+  skin,
+  native,
+}) => {
+  const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
+
+  if (!emoji) {
+    return null;
+  }
+
+  let emojiNode: React.ReactNode;
+
+  if ("native" in emoji) {
+    if (native && version >= emoji.version) {
+      emojiNode = emoji.native;
+    } else {
+      emojiNode = (
+        <img
+          alt={emoji.name}
+          className={cx(size ? emojiSizedImgCss : emojiInlineImgCss)}
+          src={emptyPixel}
+          style={{
+            backgroundImage: `url(${emoji.sprite.src})`,
+            backgroundSize: emoji.sprite.size,
+            backgroundPosition: emoji.sprite.position,
+          }}
+        />
+      );
+    }
+  } else {
+    emojiNode = (
+      <img
+        alt={emoji.name}
+        loading="lazy"
+        className={cx(size ? emojiSizedImgCss : emojiInlineImgCss)}
+        src={emoji.imageUrl}
+      />
+    );
+  }
+
+  // TODO: use fibery's tooltip?
+  const title = tooltip ? emoji.shortNames[0] : undefined;
+
+  const style = size ? {fontSize: size, width: size, height: size} : {};
+
+  return onClick ? (
+    <button
+      type="button"
+      onClick={(e) => onClick(emoji, e)}
+      className={cx(clickableCss)}
+      title={title}
+      aria-label={emoji.name}
+    >
+      <span style={style} className={cx(emojiWrapperCss, size && emojiWrapperSizedCss)}>
+        {emojiNode}
+      </span>
+    </button>
+  ) : (
+    <span
+      style={style}
+      className={cx(emojiWrapperCss, size && emojiWrapperSizedCss)}
+      title={title}
+      aria-label={emoji.name}
+    >
+      {emojiNode}
+    </span>
+  );
+};

package/src/emoji-picker/primitives/footer.tsx

@@ -0,0 +1,12 @@
+import {css} from "@linaria/core";
+import {space} from "../../designSystem";
+
+const footerCss = css`
+  border-top: 1px solid var(--fibery-color-separatorColor);
+  padding: 0 ${space.s}px;
+`;
+
+export const EmojiPickerFooter: React.FC<React.PropsWithChildren> = ({children}) => {
+  // TODO: Preview + ColorPicker + Skin Tone
+  return <div className={footerCss}>{children}</div>;
+};

package/src/emoji-picker/primitives/grid.tsx

@@ -0,0 +1,67 @@
+import {css} from "@linaria/core";
+import {useLayoutEffect, useMemo, useRef, useState} from "react";
+import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
+import {get as getFrequentlyUsed} from "../utils/frequently";
+import {EmojiPickerCategory} from "./category";
+import {useEmojiPickerContentSettings} from "./content";
+import {contentHorizontalPadding} from "./layout";
+import {useFoundEmojis} from "./search-provider";
+
+const gridWrapperCss = css`
+  height: 238px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+
+  padding: 0 ${contentHorizontalPadding}px;
+`;
+
+const AllCategories = () => {
+  const contentSettings = useEmojiPickerContentSettings();
+
+  // TODO: filter frequently used to not have zombie dom nodes
+  const [recentCategory] = useState(() => ({
+    id: "recent",
+    name: "Recent",
+    emojis: getFrequentlyUsed(contentSettings.perLine),
+  }));
+
+  const categories = useEmojiDataStoreSelector((store) => store.getCategories());
+
+  return (
+    <>
+      {recentCategory.emojis.length > 0 ? <EmojiPickerCategory category={recentCategory} /> : null}
+      {categories.map((category) => {
+        return <EmojiPickerCategory key={category.id} category={category} />;
+      })}
+    </>
+  );
+};
+
+export const EmojiPickerGrid = () => {
+  const foundEmojis = useFoundEmojis();
+  const ref = useRef<HTMLDivElement>(null);
+
+  const searchCategory = useMemo(
+    () =>
+      foundEmojis
+        ? {
+            id: "search",
+            name: "Search",
+            emojis: foundEmojis.map(({id}) => id),
+          }
+        : null,
+    [foundEmojis]
+  );
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.scrollTop = 0;
+    }
+  }, [foundEmojis]);
+
+  return (
+    <div ref={ref} className={gridWrapperCss}>
+      {searchCategory ? <EmojiPickerCategory category={searchCategory} /> : <AllCategories />}
+    </div>
+  );
+};

package/src/emoji-picker/primitives/header.tsx

@@ -0,0 +1,11 @@
+import {css} from "@linaria/core";
+import {space} from "../../designSystem";
+import {contentHorizontalPadding} from "./layout";
+
+const pickerHeader = css`
+  padding: ${space.s}px ${contentHorizontalPadding}px;
+  position: relative;
+`;
+export const EmojiPickerHeader: React.FC<React.PropsWithChildren> = ({children}) => {
+  return <div className={pickerHeader}>{children}</div>;
+};

package/src/emoji-picker/primitives/layout.ts

@@ -0,0 +1,5 @@
+import {space} from "../../designSystem";
+
+export const emojiPadding = space.s;
+
+export const contentHorizontalPadding = space.l;

package/src/emoji-picker/primitives/root.tsx

@@ -0,0 +1,89 @@
+import {EmojiItem} from "@fibery/emoji-data";
+import {createContext} from "@fibery/react/src/create-context";
+import {useMemo} from "react";
+import {EmojiPickerSearchProvider} from "./search-provider";
+import {detectEmojiSupportLevel} from "../utils/emoji-support";
+import {EmojiSkinProvider} from "./skin-provider";
+import {add as addToFrequentlyUsed} from "../utils/frequently";
+import {isApple} from "../utils/emoji-set";
+import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
+
+type EmojiPickerCtx = {
+  version: number;
+  onEmojiSelect: (emoji: EmojiItem) => void;
+  onCustomCategorySettings?: () => void;
+  native: boolean;
+};
+const [Provider, useCtx] = createContext<EmojiPickerCtx>("EmojiPickerRoot");
+
+// TODO: replace with simple props to atomic components???
+const defaultI18N = {
+  search: "Search",
+  clear: "Clear", // Accessible label on "clear" button
+  notfound: "No Emoji Found",
+  skintext: "Select emoji skin tone",
+  categories: {
+    search: "Search Results",
+    recent: "Frequently Used",
+    people: "Smileys & People",
+    nature: "Animals & Nature",
+    foods: "Food & Drink",
+    activity: "Activity",
+    places: "Travel & Places",
+    objects: "Objects",
+    symbols: "Symbols",
+    flags: "Flags",
+    custom: "Custom",
+  },
+  categorieslabel: "Emoji categories", // Accessible title for the list of categories
+  skintones: {
+    1: "Default Skin Tone",
+    2: "Light Skin Tone",
+    3: "Medium-Light Skin Tone",
+    4: "Medium Skin Tone",
+    5: "Medium-Dark Skin Tone",
+    6: "Dark Skin Tone",
+  },
+};
+type I18N = typeof defaultI18N;
+
+const [I18NProvider, useI18N] = createContext<I18N>("EmojiPickerI18N");
+
+export const EmojiPickerRoot: React.FC<
+  React.PropsWithChildren<{
+    i18n?: Partial<I18N>;
+    onEmojiSelect: (emoji: EmojiItem) => void;
+    onCustomCategorySettings?: () => void;
+  }>
+> = ({i18n, onEmojiSelect, onCustomCategorySettings, children}) => {
+  const mergedI18N = useMemo(() => ({...defaultI18N, ...i18n}), [i18n]);
+
+  const onEmojiSelectCb = useCallbackRef(onEmojiSelect);
+  const onCustomCategorySettingsCb = useCallbackRef(onCustomCategorySettings);
+
+  const emojiPickerCtx = useMemo(
+    () => ({
+      version: detectEmojiSupportLevel(),
+      native: isApple(),
+      onCustomCategorySettings: onCustomCategorySettingsCb,
+      onEmojiSelect(emoji: EmojiItem) {
+        onEmojiSelectCb(emoji);
+        addToFrequentlyUsed(emoji.id);
+      },
+    }),
+    [onEmojiSelectCb, onCustomCategorySettingsCb]
+  );
+
+  return (
+    <Provider value={emojiPickerCtx}>
+      <EmojiSkinProvider>
+        <EmojiPickerSearchProvider>
+          <I18NProvider value={mergedI18N}>{children}</I18NProvider>
+        </EmojiPickerSearchProvider>
+      </EmojiSkinProvider>
+    </Provider>
+  );
+};
+
+export const useEmojiPickerCtx = useCtx;
+export const useEmojiPickerI18N = useI18N;

package/src/emoji-picker/primitives/search-provider.tsx

@@ -0,0 +1,22 @@
+import {EmojiItem} from "@fibery/emoji-data";
+import {createContext} from "@fibery/react/src/create-context";
+import {useState} from "react";
+
+type SearchSetterCtx = (emojis: EmojiItem[] | null) => void;
+type SearchValueCtx = EmojiItem[] | null;
+
+const [SetterProvider, useSetterCtx] = createContext<SearchSetterCtx>("EmojiPickerSearchProvider");
+const [ValueProvider, useValueCtx] = createContext<SearchValueCtx>("EmojiPickerSearchValueProvider");
+
+export const EmojiPickerSearchProvider: React.FC<React.PropsWithChildren> = ({children}) => {
+  const [found, setFound] = useState<EmojiItem[] | null>(null);
+
+  return (
+    <SetterProvider value={setFound}>
+      <ValueProvider value={found}>{children}</ValueProvider>
+    </SetterProvider>
+  );
+};
+
+export const useSetFoundEmojis = useSetterCtx;
+export const useFoundEmojis = useValueCtx;

package/src/emoji-picker/primitives/search.tsx

@@ -0,0 +1,141 @@
+import {EmojiItem} from "@fibery/emoji-data";
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
+import {css, cx} from "@linaria/core";
+import {startTransition, useId, useRef} from "react";
+import {IconButton} from "../../Button/icon-button";
+import {border, space, textStyles, themeVars} from "../../designSystem";
+import Close from "../../icons/react/Close";
+import Search from "../../icons/react/Search";
+import {useEmojiDataStore} from "../stores/emoji-data-store";
+import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
+import {useFoundEmojis, useSetFoundEmojis} from "./search-provider";
+import {useEmojiSkin} from "./skin-provider";
+
+const searchCss = css`
+  ${textStyles.regular}
+  width: 100%;
+  background-color: ${themeVars.inputBgColor};
+  box-shadow: ${themeVars.inputBorderColor};
+  height: 32px;
+  border-radius: ${border.radius6}px;
+
+  display: flex;
+  align-items: center;
+  padding-left: ${space.l}px;
+  padding-right: ${space.m}px;
+  gap: ${space.xxs}px;
+
+  /* For screenreaders only, via https://stackoverflow.com/a/19758620 */
+  & .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+`;
+
+const searchInputCss = css`
+  background-color: ${themeVars.inputBgColor};
+  border: 0;
+  outline: none;
+  width: 100%;
+
+  &,
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    /* remove webkit/blink styles for <input type="search">
+    * via https://stackoverflow.com/a/9422689 */
+    -webkit-appearance: none;
+  }
+`;
+
+const searchIconCss = css`
+  padding: ${space.xxs}px;
+`;
+
+export type EmojiPickerSearchProps = {
+  autoFocus?: boolean;
+
+  className?: string;
+
+  searchRef?: React.RefObject<HTMLInputElement>;
+};
+
+export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus, className, searchRef}) => {
+  const ref = useRef<HTMLInputElement>(null);
+
+  const setRefs = useComposedRefs(ref, searchRef);
+
+  const i18n = useEmojiPickerI18N();
+  const emojiPicker = useEmojiPickerCtx();
+  const emojiData = useEmojiDataStore();
+  const foundEmojis = useFoundEmojis();
+  const skin = useEmojiSkin();
+  const _setFoundEmojis = useSetFoundEmojis();
+
+  const setFoundEmojis = (emojis: EmojiItem[] | null) => {
+    // improves responsiveness of input.
+    // TODO: better just implement a proper virtualization
+    startTransition(() => _setFoundEmojis(emojis));
+  };
+
+  const inputId = `emoji-picker-search-${useId()}`;
+
+  const clearSearch = () => {
+    setFoundEmojis(null);
+    if (ref.current) {
+      ref.current.value = "";
+      ref.current.focus();
+    }
+  };
+
+  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
+    if (e.key === "Enter" && foundEmojis && foundEmojis.length > 0) {
+      emojiPicker.onEmojiSelect(foundEmojis[0]);
+
+      e.preventDefault();
+    }
+  };
+
+  return (
+    <section className={cx(searchCss, className)} aria-label={i18n.search}>
+      <input
+        ref={setRefs}
+        autoFocus={autoFocus}
+        id={inputId}
+        className={searchInputCss}
+        type="search"
+        placeholder={i18n.search}
+        onKeyDown={onKeyDown}
+        onChange={(e) => {
+          const value = e.target.value;
+
+          setFoundEmojis(value ? emojiData.search(value, {skin}) : null);
+        }}
+      />
+      {/*
+       * Use a <label> in addition to the placeholder for accessibility, but place it off-screen
+       * http://www.maxability.co.in/2016/01/placeholder-attribute-and-why-it-is-not-accessible/
+       */}
+      <label className="sr-only" htmlFor={inputId}>
+        {i18n.search}
+      </label>
+
+      {foundEmojis ? (
+        <IconButton size="small" onClick={clearSearch}>
+          <Close iconSize={16} />
+        </IconButton>
+      ) : (
+        <span className={searchIconCss}>
+          <Search iconSize={16} />
+        </span>
+      )}
+    </section>
+  );
+};

package/src/emoji-picker/primitives/skin-provider.tsx

@@ -0,0 +1,27 @@
+import {useCallback, useState} from "react";
+import {createContext} from "@fibery/react/src/create-context";
+import * as store from "../utils/store";
+import {EmojiSkin} from "@fibery/emoji-data";
+
+type Setter = (v: EmojiSkin) => void;
+
+const [SetterProvider, useSetterCtx] = createContext<Setter>("EmojiSkinSetterProvider");
+const [ValueProvider, useValueCtx] = createContext<EmojiSkin>("EmojiSkinProvider");
+
+export const EmojiSkinProvider: React.FC<React.PropsWithChildren> = ({children}) => {
+  const [skin, setSkin] = useState(() => store.get("skin") || 1);
+
+  const setter = useCallback<Setter>((v) => {
+    store.update({skin: v});
+    setSkin(v);
+  }, []);
+
+  return (
+    <SetterProvider value={setter}>
+      <ValueProvider value={skin}>{children}</ValueProvider>
+    </SetterProvider>
+  );
+};
+
+export const useSetEmojiSkin = useSetterCtx;
+export const useEmojiSkin = useValueCtx;

package/src/emoji-picker/primitives/skin-tone.tsx

@@ -0,0 +1,103 @@
+import {EmojiSkin} from "@fibery/emoji-data";
+import {css, cx} from "@linaria/core";
+import {useState} from "react";
+import {textStyles, themeVars} from "../../designSystem";
+import {Emoji} from "./emoji";
+import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
+import {useEmojiSkin, useSetEmojiSkin} from "./skin-provider";
+
+const skinToneWrapperCss = css`
+  display: flex;
+  align-items: center;
+  background-color: ${themeVars.actionMenuBg};
+  font-size: 0;
+  line-height: 1.15;
+
+  /* magic constant until skin tone is removed from picker search bar */
+  height: 36px;
+`;
+
+const skinToneSwatchCss = css`
+  overflow: hidden;
+  width: 0;
+  padding: 0;
+  transition-property: width, padding;
+  transition-duration: 0.125s;
+  transition-timing-function: ease-out;
+
+  &:nth-child(1) {
+    transition-delay: 0s;
+  }
+  &:nth-child(2) {
+    transition-delay: 0.03s;
+  }
+  &:nth-child(3) {
+    transition-delay: 0.06s;
+  }
+  &:nth-child(4) {
+    transition-delay: 0.09s;
+  }
+  &:nth-child(5) {
+    transition-delay: 0.12s;
+  }
+  &:nth-child(6) {
+    transition-delay: 0.15s;
+  }
+`;
+
+const expandedCss = css`
+  width: 32px;
+`;
+
+const openedSkinTextCss = css`
+  display: inline-block;
+  vertical-align: middle;
+  ${textStyles.small};
+
+  width: 98px;
+  color: ${themeVars.accentTextColor};
+  padding-left: 8px;
+`;
+
+export type EmojiPickerSkinToneProps = {
+  className?: string;
+};
+export const EmojiPickerSkinTone: React.FC<EmojiPickerSkinToneProps> = ({className}) => {
+  const [opened, setOpened] = useState(false);
+  const emojiPickerCtx = useEmojiPickerCtx();
+  const i18n = useEmojiPickerI18N();
+  const setSkin = useSetEmojiSkin();
+  const skin = useEmojiSkin();
+
+  const skinToneNodes = [];
+
+  for (let skinTone = 1; skinTone <= 6; skinTone++) {
+    const selected = skinTone === skin;
+
+    skinToneNodes.push(
+      <span key={`skin-tone-${skinTone}`} className={cx(skinToneSwatchCss, (selected || opened) && expandedCss)}>
+        <span data-skin={skinTone}>
+          <Emoji
+            onClick={() => {
+              if (opened) {
+                setSkin(skinTone as EmojiSkin);
+              }
+              setOpened(!opened);
+            }}
+            emoji={`:hand::skin-tone-${skinTone}:`}
+            version={emojiPickerCtx.version}
+            native={emojiPickerCtx.native}
+            size={20}
+          />
+        </span>
+      </span>
+    );
+  }
+
+  return (
+    <div className={cx(skinToneWrapperCss, className)}>
+      <div className={cx(opened && openedSkinTextCss)}>{i18n.skintext}</div>
+      {skinToneNodes}
+    </div>
+  );
+};

package/src/emoji-picker/stores/emoji-data-store.tsx

@@ -0,0 +1,50 @@
+import type {EmojiData} from "@fibery/emoji-data";
+import {PubSub, makePubSub} from "@fibery/helpers/utils/pub-sub";
+import {createContext} from "@fibery/react/src/create-context";
+import {useMemo, useSyncExternalStore} from "react";
+
+export type EmojiDataStore = EmojiData & {pubSub: PubSub};
+
+export const makeEmojiDataStore = (emojiData: EmojiData): EmojiDataStore => {
+  const pubSub = makePubSub();
+
+  return {
+    ...emojiData,
+
+    setCustom(...args: Parameters<EmojiData["setCustom"]>) {
+      emojiData.setCustom(...args);
+      pubSub.publish();
+    },
+    addCustomEmoji(...args: Parameters<EmojiData["addCustomEmoji"]>) {
+      emojiData.addCustomEmoji(...args);
+      pubSub.publish();
+    },
+    removeCustomEmoji(...args: Parameters<EmojiData["removeCustomEmoji"]>) {
+      emojiData.removeCustomEmoji(...args);
+      pubSub.publish();
+    },
+
+    pubSub,
+  };
+};
+
+// TODO: this should probably wrap the whole app so every component shares the same data
+const [DataStoreProvider, useDataStoreCtx] = createContext<EmojiDataStore>("EmojiDataStore");
+
+export const EmojiDataStoreProvider: React.FC<
+  React.PropsWithChildren<{
+    data: EmojiData;
+  }>
+> = ({data, children}) => {
+  const emojiDataStore = useMemo(() => makeEmojiDataStore(data), [data]);
+
+  return <DataStoreProvider value={emojiDataStore}>{children}</DataStoreProvider>;
+};
+
+export const useEmojiDataStore = useDataStoreCtx;
+
+export const useEmojiDataStoreSelector = <Snapshot,>(getter: (emojiDataStore: EmojiDataStore) => Snapshot) => {
+  const dataStore = useDataStoreCtx();
+
+  return useSyncExternalStore(dataStore.pubSub.subscribe, () => getter(dataStore));
+};

package/src/emoji-picker/stores/lazy-emoji-data-store.tsx

@@ -0,0 +1,29 @@
+import {makeEmojiData} from "@fibery/emoji-data";
+import {Suspense, lazy} from "react";
+import {EmojiDataStoreProvider} from "./stores/emoji-data-store";
+import {getEmojiSet} from "./utils/emoji-set";
+import {loadEmojiData} from "./utils/load-emoji-data";
+
+const LazyEmojiDataStoreComponent = lazy(async () => {
+  const rawData = await loadEmojiData();
+
+  const emojiData = makeEmojiData(rawData, {set: getEmojiSet()});
+
+  return {
+    default: function EmojiDataStore({children}: React.PropsWithChildren) {
+      return <EmojiDataStoreProvider data={emojiData}>{children}</EmojiDataStoreProvider>;
+    },
+  };
+});
+
+export const LazyEmojiDataStore: React.FC<
+  React.PropsWithChildren<{
+    fallback: React.ReactNode;
+  }>
+> = ({fallback, children}) => {
+  return (
+    <Suspense fallback={fallback}>
+      <LazyEmojiDataStoreComponent>{children}</LazyEmojiDataStoreComponent>
+    </Suspense>
+  );
+};