@fibery/ui-kit 1.13.0 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -23,7 +23,7 @@
     "src/tooltip.tsx",
     "src/BackButton.tsx",
     "src/Button",
-    "src/emoji-mart/**/*.ts*",
+    "src/emoji-picker/**/*.ts*",
     "src/a11y-color.ts"
   ],
   "license": "UNLICENSED",
@@ -43,7 +43,6 @@
     "color-hash": "1.0.3",
     "d3-shape": "1.3.7",
     "date-fns": "^2.29.2",
-    "emoji-mart": "3.0.1",
     "invariant": "2.2.4",
     "lodash": "4.17.21",
     "md5": "2.2.1",
@@ -60,9 +59,9 @@
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/emoji-data": "1.1.2",
-    "@fibery/helpers": "1.0.4",
-    "@fibery/react": "1.0.2"
+    "@fibery/helpers": "1.1.0",
+    "@fibery/emoji-data": "2.0.0",
+    "@fibery/react": "1.0.3"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -78,7 +77,6 @@
     "@testing-library/user-event": "13.5.0",
     "@types/chroma-js": "2.1.3",
     "@types/color-hash": "1.0.2",
-    "@types/emoji-mart": "3.0.8",
     "@types/invariant": "2.2.34",
     "@types/lodash": "4.14.172",
     "@types/prop-types": "15.7.5",

package/src/designSystem.ts

@@ -273,6 +273,7 @@ const lightColors = {
   gridPinnedCellBorderColor: slate.slate8,
   gridDisabledCellBgColor: slate.slate2,
   gridSelectedCellBgColor: indigo.indigo3,
+  gridHighlightedCellBgColor: indigo.indigo4,
   gridSelectedCellBorderColor: indigo.indigo5,
   gridSelectedPinnedCellBorderColor: indigo.indigo7,
   gridDisabledSelectedCellBgColor: indigo.indigo4,
@@ -453,6 +454,7 @@ const darkColors = {
   gridPinnedCellBorderColor: slateDark.slate8,
   gridDisabledCellBgColor: slateDark.slate3,
   gridSelectedCellBgColor: indigoDark.indigo3,
+  gridHighlightedCellBgColor: indigoDark.indigo5,
   gridSelectedCellBorderColor: indigoDark.indigo6,
   gridSelectedPinnedCellBorderColor: indigoDark.indigo7,
   gridDisabledSelectedCellBgColor: indigoDark.indigo5,

package/src/emoji-picker/app-icon-picker.tsx

@@ -0,0 +1,54 @@
+import {EmojiItem} from "@fibery/emoji-data/lib/src";
+import {ColorPicker} from "../ColorPicker";
+import {$TSFixMe} from "../tsfixme";
+import {LazyIconDataStore} from "./lazy-icon-data-store";
+import {EmojiPickerContent} from "./primitives/content";
+import {EmojiPickerFooter} from "./primitives/footer";
+import {EmojiPickerGrid} from "./primitives/grid";
+import {EmojiPickerHeader} from "./primitives/header";
+import {EmojiPickerRoot} from "./primitives/root";
+import {EmojiPickerSearch} from "./primitives/search";
+import {cardTypeColors} from "../designSystem";
+
+const i18n = {search: "Search icon...", notfound: "No Icons Found"};
+
+export type AppIconPickerProps = {
+  color?: string;
+  getHoverColor?: (color: string) => string | undefined;
+  colors?: string[];
+  onColorSelect?: (c: $TSFixMe) => void;
+
+  onSelect: (emoji: EmojiItem) => void;
+};
+export const AppIconPicker: React.FC<AppIconPickerProps> = ({
+  onSelect,
+  color,
+  colors = cardTypeColors,
+  onColorSelect,
+  getHoverColor,
+}) => {
+  return (
+    <EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect}>
+      <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={20}>
+        <LazyIconDataStore fallback={<div style={{height: "282px"}}></div>}>
+          <EmojiPickerHeader>
+            <EmojiPickerSearch autoFocus />
+          </EmojiPickerHeader>
+
+          <EmojiPickerGrid />
+        </LazyIconDataStore>
+
+        {onColorSelect ? (
+          <EmojiPickerFooter>
+            <ColorPicker
+              colors={colors}
+              getSwatchHoverColor={getHoverColor}
+              color={color}
+              onChangeComplete={onColorSelect}
+            />
+          </EmojiPickerFooter>
+        ) : null}
+      </EmojiPickerContent>
+    </EmojiPickerRoot>
+  );
+};

package/src/emoji-picker/emoji-index.ts

@@ -0,0 +1,8 @@
+import {makeEmojiData} from "@fibery/emoji-data";
+
+import data from "@fibery/emoji-data/data/all.json";
+
+import {getEmojiSet} from "./utils/emoji-set";
+
+// TODO: remove it. Emoji Data should not be accesed like this, prefer consuming it from context
+export const emojiIndex = makeEmojiData(data, {set: getEmojiSet()});

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

@@ -0,0 +1,75 @@
+import {EmojiItem} from "@fibery/emoji-data/lib/src";
+import {$TSFixMe} from "../tsfixme";
+import {EmojiPickerRoot} from "./primitives/root";
+import {EmojiPickerContent} from "./primitives/content";
+import {EmojiPickerHeader} from "./primitives/header";
+import {EmojiPickerSearch} from "./primitives/search";
+import {cx, css} from "@linaria/core";
+import {EmojiPickerSkinTone} from "./primitives/skin-tone";
+import {EmojiPickerGrid} from "./primitives/grid";
+import {LazyEmojiDataStore} from "./lazy-emoji-data-store";
+import {ColorPicker} from "../ColorPicker";
+import {EmojiPickerFooter} from "./primitives/footer";
+import {cardTypeColors} from "../designSystem";
+
+const i18n = {search: "Search emoji..."};
+
+export type EmojiPickerProps = {
+  color?: string;
+  getHoverColor?: (color: string) => string | undefined;
+  colors?: string[];
+  onColorSelect?: (c: $TSFixMe) => void;
+  showSkinTones?: boolean;
+
+  onSelect: (emoji: EmojiItem) => void;
+};
+export const EmojiPicker: React.FC<EmojiPickerProps> = ({
+  onSelect,
+  color,
+  colors = cardTypeColors,
+  onColorSelect,
+  getHoverColor,
+  showSkinTones,
+}) => {
+  return (
+    <EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect}>
+      <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={20}>
+        <LazyEmojiDataStore fallback={<div style={{height: "282px"}}></div>}>
+          <EmojiPickerHeader>
+            <EmojiPickerSearch
+              autoFocus
+              className={cx(
+                showSkinTones &&
+                  css`
+                    width: 250px !important;
+                  `
+              )}
+            />
+            {/* Temporary hacks. SkinTone should move to footer */}
+            {showSkinTones ? (
+              <EmojiPickerSkinTone
+                className={css`
+                  position: absolute;
+                  top: 4px;
+                  right: 12px;
+                `}
+              />
+            ) : null}
+          </EmojiPickerHeader>
+          <EmojiPickerGrid />
+        </LazyEmojiDataStore>
+
+        {onColorSelect ? (
+          <EmojiPickerFooter>
+            <ColorPicker
+              colors={colors}
+              getSwatchHoverColor={getHoverColor}
+              color={color}
+              onChangeComplete={onColorSelect}
+            />
+          </EmojiPickerFooter>
+        ) : null}
+      </EmojiPickerContent>
+    </EmojiPickerRoot>
+  );
+};

package/src/emoji-picker/emoji.tsx

@@ -0,0 +1,11 @@
+import {LazyEmojiDataStore} from "./lazy-emoji-data-store";
+import {Emoji as EmojiPrimitive, EmojiProps as EmojiPrimitiveProps} from "./primitives/emoji";
+
+export type EmojiProps = EmojiPrimitiveProps;
+export const Emoji: React.FC<EmojiPrimitiveProps> = function EmojiOrLoader(props) {
+  return (
+    <LazyEmojiDataStore fallback={<div style={{width: props.size, height: props.size}} />}>
+      <EmojiPrimitive {...props} />
+    </LazyEmojiDataStore>
+  );
+};

package/src/{emoji-mart → emoji-picker}/icon-emoji-picker.tsx

@@ -1,4 +1,5 @@
 import {css} from "@linaria/core";
+import {compact} from "lodash";
 import {Button} from "../Button";
 import {AntTabs} from "../antd";
 import {space, textStyles} from "../designSystem";
@@ -16,14 +17,16 @@ const TabHeader: React.FC<React.PropsWithChildren> = ({children}) => (
   </div>
 );
 
-type IconEmojiPickerProps = React.PropsWithChildren<{
-  onIconSelect: NonNullable<AppIconPickerProps["onSelect"]>;
-  onEmojiSelect: NonNullable<EmojiPickerProps["onSelect"]>;
+type TabKey = "icons" | "emojis";
+
+export type IconEmojiPickerProps = React.PropsWithChildren<{
+  onIconSelect?: AppIconPickerProps["onSelect"];
+  onEmojiSelect?: EmojiPickerProps["onSelect"];
   onColorSelect?: (c: $TSFixMe) => void;
   onReset?: () => void;
   resetLabel?: string;
-  defaultTab?: "icons" | "emojis";
-  showColorPickerOnTabs?: ("icons" | "emojis")[];
+  defaultTab?: TabKey;
+  showColorPickerOnTabs?: TabKey[];
   color?: string;
   getHoverColor?: (color: string) => string | undefined;
 }>;
@@ -43,26 +46,25 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
       animated={false}
       destroyInactiveTabPane
       defaultActiveKey={defaultTab}
-      items={[
-        {
+      items={compact([
+        onEmojiSelect && {
           key: "emojis",
           label: <TabHeader>Emojis</TabHeader>,
           children: (
             <EmojiPicker
-              autoFocus
               color={color}
               onColorSelect={showColorPickerOnTabs.includes("emojis") ? onColorSelect : undefined}
               getHoverColor={getHoverColor}
               onSelect={onEmojiSelect}
+              showSkinTones
             />
           ),
         },
-        {
+        onIconSelect && {
           key: "icons",
           label: <TabHeader>Icons</TabHeader>,
           children: (
             <AppIconPicker
-              autoFocus
               color={color}
               onColorSelect={showColorPickerOnTabs.includes("icons") ? onColorSelect : undefined}
               getHoverColor={getHoverColor}
@@ -70,7 +72,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
             />
           ),
         },
-      ]}
+      ])}
       tabBarExtraContent={
         onReset ? (
           <div

package/src/emoji-picker/index.tsx

@@ -0,0 +1,5 @@
+export {EmojiPickerRoot as Root} from "./root";
+export {EmojiPickerContent as Content} from "./content";
+export {EmojiPickerGrid as Grid} from "./grid";
+export {EmojiPickerSearch as Search} from "./search";
+export {EmojiPickerFooter as Footer} from "./footer";

package/src/emoji-picker/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>
+  );
+};

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

@@ -0,0 +1,55 @@
+import {makeEmojiData} from "@fibery/emoji-data";
+import {Suspense, lazy, useEffect, useState} from "react";
+import {getThemedUrl} from "../AppIconWithFallback";
+import {useThemeMode} from "../ThemeProvider";
+import {alignTheme} from "../theme-settings";
+import {EmojiDataStoreProvider, useEmojiDataStore} from "./stores/emoji-data-store";
+
+const EMPTY_DATA = {
+  aliases: {},
+  emojis: {},
+  categories: [],
+  compressed: false,
+};
+
+const LazyAppIcons = lazy(async () => {
+  const {default: appIcons} = await import("../appIcons.json");
+
+  return {
+    default: function EmojiDataStore({children}: React.PropsWithChildren) {
+      const emojiDataStore = useEmojiDataStore();
+      const themeMode = useThemeMode();
+      const alignedTheme = alignTheme(themeMode);
+
+      useEffect(() => {
+        // TODO: icons should be rendered as svg elements
+        const custom = appIcons.map((icon) => {
+          return {
+            ...icon,
+            imageUrl: getThemedUrl(icon.file, alignedTheme),
+          };
+        });
+
+        emojiDataStore.setCustom(custom);
+      }, [alignedTheme, emojiDataStore]);
+
+      return <>{children}</>;
+    },
+  };
+});
+
+export const LazyIconDataStore: React.FC<
+  React.PropsWithChildren<{
+    fallback: React.ReactNode;
+  }>
+> = ({fallback, children}) => {
+  const [emojiData] = useState(() => makeEmojiData(EMPTY_DATA));
+
+  return (
+    <EmojiDataStoreProvider data={emojiData}>
+      <Suspense fallback={fallback}>
+        <LazyAppIcons>{children}</LazyAppIcons>
+      </Suspense>
+    </EmojiDataStoreProvider>
+  );
+};

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

@@ -0,0 +1,107 @@
+import {Category} from "@fibery/emoji-data";
+import {CSSProperties, css} from "@linaria/core";
+import {space, textStyles, themeVars} from "../../designSystem";
+import {useEmojiPickerContentSettings} from "./content";
+import {Emoji} from "./emoji";
+import {emojiPadding} from "./layout";
+import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
+import {useEmojiSkin} from "./skin-provider";
+
+const categoryCss = css``;
+
+const categoryLabelCss = css`
+  ${textStyles.heading6}
+  color: ${themeVars.accentTextColor};
+  background-color: ${themeVars.actionMenuBg};
+  padding: ${space.l}px ${space.s}px ${space.xs}px ${space.s}px;
+  position: sticky;
+  top: 0;
+
+  /* is required only because contentVisibility lifts emoji up */
+  z-index: 1;
+`;
+
+const categoryListCss = css`
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+
+  & li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    line-height: 1;
+  }
+`;
+
+const notFoundCss = css`
+  padding-top: 70px;
+  text-align: center;
+
+  ${textStyles.regular};
+  color: ${themeVars.accentTextColor};
+`;
+
+const NotFound = () => {
+  const i18n = useEmojiPickerI18N();
+
+  return (
+    <div className={notFoundCss}>
+      <Emoji emoji="sleuth_or_spy" size={38} />
+      <div>{i18n.notfound}</div>
+    </div>
+  );
+};
+
+type EmojiPickerCategoryProps = {
+  category: Category;
+};
+export const EmojiPickerCategory: React.FC<EmojiPickerCategoryProps> = ({category}) => {
+  const i18n = useEmojiPickerI18N();
+  const emojiPickerCtx = useEmojiPickerCtx();
+  const emojiContentSettings = useEmojiPickerContentSettings();
+
+  const label = i18n.categories[category.id as keyof (typeof i18n)["categories"]] || category.name;
+
+  const skin = useEmojiSkin();
+
+  return (
+    <section className={categoryCss} aria-label={label}>
+      <div className={categoryLabelCss}>
+        <span aria-hidden={true /* already labeled by the section aria-label */}>{label}</span>
+      </div>
+
+      {category.emojis.length > 0 ? (
+        <ul className={categoryListCss}>
+          {category.emojis.map((id) => {
+            return (
+              <li
+                style={
+                  // css-only virtualization until implementing the real one
+                  {
+                    contentVisibility: "auto",
+                    containIntrinsicSize: `${emojiContentSettings.emojiSize + emojiPadding * 2}px`,
+                  } as CSSProperties
+                }
+                key={id}
+              >
+                <Emoji
+                  onClick={emojiPickerCtx.onEmojiSelect}
+                  emoji={id}
+                  forceSize
+                  version={emojiPickerCtx.version}
+                  skin={skin}
+                  tooltip
+                />
+              </li>
+            );
+          })}
+        </ul>
+      ) : (
+        <NotFound />
+      )}
+    </section>
+  );
+};

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

@@ -0,0 +1,48 @@
+import {createContext} from "@fibery/react/src/create-context";
+import {CSSProperties, css} from "@linaria/core";
+import {useMemo} from "react";
+import {themeVars} from "../../designSystem";
+import {contentHorizontalPadding, emojiPadding} from "./layout";
+
+const emojiPickerCss = css`
+  background-color: ${themeVars.actionMenuBg};
+`;
+
+type EmojiPickerContentSettings = {
+  perLine: number;
+  emojiSize: number;
+};
+
+const [Provider, useCtx] = createContext<EmojiPickerContentSettings>("EmojiPickerContentSettings");
+
+export type EmojiPickerContentProps = {
+  emojiHoverColor?: string;
+  perLine?: number;
+  emojiSize?: number;
+};
+export const EmojiPickerContent: React.FC<React.PropsWithChildren<EmojiPickerContentProps>> = ({
+  emojiHoverColor,
+  perLine = 9,
+  emojiSize = 20,
+  children,
+}) => {
+  const width = perLine * (emojiSize + emojiPadding * 2) + contentHorizontalPadding * 2;
+
+  const contentSettings = useMemo(
+    () => ({
+      emojiSize,
+      perLine,
+    }),
+    [emojiSize, perLine]
+  );
+
+  return (
+    <Provider value={contentSettings}>
+      <div style={{"--fibery-emoji-hover-color": emojiHoverColor, width} as CSSProperties} className={emojiPickerCss}>
+        {children}
+      </div>
+    </Provider>
+  );
+};
+
+export const useEmojiPickerContentSettings = useCtx;

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

@@ -0,0 +1,130 @@
+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`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: ${themeVars.textColor};
+`;
+
+const clickableCss = css`
+  padding: ${emojiPadding}px;
+  cursor: pointer;
+  margin: 0;
+  border: none;
+  background: none;
+  box-shadow: none;
+  border-radius: ${border.radius8}px;
+
+  &:hover {
+    background-color: var(--fibery-emoji-hover-color, ${themeVars.badgeBgColor});
+  }
+`;
+
+const getSizeStyle = (size: number) => ({
+  display: "inline-block",
+  width: size,
+  height: size,
+});
+
+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;
+
+  forceSize?: boolean;
+};
+export const Emoji: React.FC<EmojiProps> = ({
+  emoji: idOrColons,
+  size = 20,
+  tooltip,
+  forceSize = false,
+  onClick,
+  version = 14,
+  skin,
+}) => {
+  const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
+
+  if (!emoji) {
+    return null;
+  }
+
+  let emojiNode: React.ReactNode;
+
+  if ("native" in emoji) {
+    if (version >= emoji.version) {
+      emojiNode = (
+        <span
+          style={{
+            fontSize: size,
+            fontFamily:
+              '"Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji"',
+
+            ...(forceSize
+              ? {
+                  ...getSizeStyle(size),
+                  textAlign: "center",
+                  lineHeight: 1,
+                  wordBreak: "keep-all",
+                }
+              : {}),
+          }}
+        >
+          {emoji.native}
+        </span>
+      );
+    } else {
+      emojiNode = (
+        <span
+          style={{
+            ...getSizeStyle(size),
+
+            backgroundImage: `url(${emoji.sprite.src})`,
+            backgroundSize: emoji.sprite.size,
+            backgroundPosition: emoji.sprite.position,
+          }}
+        />
+      );
+    }
+  } else {
+    emojiNode = (
+      <span
+        style={{
+          ...getSizeStyle(size),
+          backgroundImage: `url(${emoji.imageUrl})`,
+          backgroundSize: "contain",
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "center",
+        }}
+      />
+    );
+  }
+
+  // TODO: use fibery's tooltip?
+  const title = tooltip ? emoji.id : undefined;
+
+  return onClick ? (
+    <button
+      type="button"
+      onClick={(e) => onClick(emoji, e)}
+      className={cx(emojiWrapperCss, clickableCss)}
+      title={title}
+      aria-label={emoji.name}
+    >
+      {emojiNode}
+    </button>
+  ) : (
+    <span className={emojiWrapperCss} 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>;
+};