@fibery/ui-kit 1.9.2 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.9.2",
+  "version": "1.10.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -23,9 +23,7 @@
     "src/tooltip.tsx",
     "src/BackButton.tsx",
     "src/Button",
-    "src/emoji-mart.tsx",
-    "src/emoji-picker.tsx",
-    "src/app-icon-picker.tsx"
+    "src/emoji-mart/*.ts*"
   ],
   "license": "UNLICENSED",
   "dependencies": {
@@ -95,8 +93,8 @@
     "svgo": "2.8.0",
     "typescript": "5.0.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/eslint-config": "8.3.0",
-    "@fibery/babel-preset": "7.2.0"
+    "@fibery/babel-preset": "7.2.0",
+    "@fibery/eslint-config": "8.3.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/designSystem.ts

@@ -579,13 +579,11 @@ export const colors = {
   ...getTypeColors(brandColors.green, "light"),
   brandColors,
   stateColors,
-  textColor: "#2A3844",
-  inversedTextColor: "#FFFFFF",
-  disabledInversedTextColor: lights.opacity25,
-  unitBg: "rgba(220, 224, 228, 0.33)",
   transparent,
   shades,
   lights,
+  inversedTextColor: "#FFFFFF",
+  disabledInversedTextColor: lights.opacity25,
 } as const;
 
 export const space = {

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

@@ -1,9 +1,9 @@
 import {forwardRef, useMemo} from "react";
 import {EmojiMartWrapper, NimblePicker, PickerProps} from "./emoji-mart";
-import {useThemeMode} from "./ThemeProvider";
-import {alignTheme} from "./theme-settings";
-import appIcons from "./appIcons.json";
-import {getThemedUrl} from "./AppIconWithFallback";
+import {useThemeMode} from "../ThemeProvider";
+import {alignTheme} from "../theme-settings";
+import appIcons from "../appIcons.json";
+import {getThemedUrl} from "../AppIconWithFallback";
 
 const EMPTY_DATA = {
   aliases: {},

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

@@ -1,10 +1,9 @@
 import "emoji-mart/css/emoji-mart.css";
 import {forwardRef} from "react";
-import {border, space, textStyles, themeVars} from "./designSystem";
+import {border, space, textStyles, themeVars} from "../designSystem";
 import {cx, css} from "@linaria/core";
-import {Emoji as EmojiMartEmoji, EmojiProps} from "emoji-mart";
+import {Emoji, EmojiProps} from "emoji-mart";
 
-export {detectEmojiSupportLevel} from "./emojiSupport";
 export {emojiIndex, Picker, NimblePicker} from "emoji-mart";
 export type {BaseEmoji, PickerProps, EmojiSkin} from "emoji-mart";
 
@@ -117,6 +116,20 @@ export const EmojiMartWrapper = forwardRef<HTMLDivElement, EmojiMartWrapperProps
   );
 });
 
-export const Emoji: React.FC<EmojiProps> = (props) => {
-  return <EmojiMartEmoji backgroundImageFn={backgroundImageFn} {...props} />;
+const emojiWrapperCss = css`
+  & span.emoji-mart-emoji-native {
+    line-height: 1;
+    vertical-align: middle;
+    & span {
+      vertical-align: middle;
+    }
+  }
+`;
+
+export const EmojiMartEmoji: React.FC<EmojiProps> = (props) => {
+  return (
+    <span className={emojiWrapperCss}>
+      <Emoji backgroundImageFn={backgroundImageFn} {...props} />
+    </span>
+  );
 };

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

@@ -1,9 +1,9 @@
 import {forwardRef} from "react";
-import {useTheme, useThemeMode} from "./ThemeProvider";
+import {useTheme, useThemeMode} from "../ThemeProvider";
 import {EmojiMartWrapper, Picker, PickerProps, backgroundImageFn} from "./emoji-mart";
-import {alignTheme} from "./theme-settings";
+import {alignTheme} from "../theme-settings";
 
-type EmojiPickerProps = {
+export type EmojiPickerProps = {
   borderless?: boolean;
 } & PickerProps;
 

package/src/emoji-mart/emoji-support.ts

@@ -0,0 +1,101 @@
+// copied from https://github.com/nolanlawson/emoji-picker-element/
+const versionsAndTestEmoji = {
+  "🫠": 14,
+  "🥲": 13.1, // smiling face with tear, technically from v13 but see note above
+  "🥻": 12.1, // sari, technically from v12 but see note above
+  "🥰": 11,
+  "🤩": 5,
+  "👱‍♀️": 4,
+  "🤣": 3,
+  "👁️‍🗨️": 2,
+  "😀": 1,
+  "😐️": 0.7,
+  "😃": 0.6,
+};
+const FONT_FAMILY =
+  '"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",' +
+  '"Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif';
+const rIC = typeof requestIdleCallback === "function" ? requestIdleCallback : setTimeout;
+
+// only used in jest tests
+const simulateCanvasError = false;
+const simulateOldBrowser = false;
+
+const getTextFeature = (text: string, color: string) => {
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 1;
+
+  const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+  ctx.textBaseline = "top";
+  ctx.font = `100px ${FONT_FAMILY}`;
+  ctx.fillStyle = color;
+  ctx.scale(0.01, 0.01);
+  ctx.fillText(text, 0, 0);
+
+  return ctx.getImageData(0, 0, 1, 1).data;
+};
+
+const compareFeatures = (feature1: Uint8ClampedArray, feature2: Uint8ClampedArray) => {
+  const feature1Str = [...feature1].join(",");
+  const feature2Str = [...feature2].join(",");
+  // This is RGBA, so for 0,0,0, we are checking that the first RGB is not all zeroes.
+  // Most of the time when unsupported this is 0,0,0,0, but on Chrome on Mac it is
+  // 0,0,0,61 - there is a transparency here.
+  return feature1Str === feature2Str && !feature1Str.startsWith("0,0,0,");
+};
+
+function testColorEmojiSupported(text: string) {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore TODO: fix type error
+  if (process.env.NODE_ENV === "test") {
+    if (simulateCanvasError) {
+      throw new Error("canvas error");
+    } else if (simulateOldBrowser) {
+      return Object.entries(versionsAndTestEmoji)
+        .filter(([, version]) => version < 12)
+        .map(([emoji]) => emoji)
+        .includes(text);
+    }
+    return true; // avoid using canvas in jest
+  }
+  // Render white and black and then compare them to each other and ensure they're the same
+  // color, and neither one is black. This shows that the emoji was rendered in color.
+  const feature1 = getTextFeature(text, "#000");
+  const feature2 = getTextFeature(text, "#fff");
+  return feature1 && feature2 && compareFeatures(feature1, feature2);
+}
+
+function determineEmojiSupportLevel() {
+  performance.mark("determineEmojiSupportLevel");
+  const entries = Object.entries(versionsAndTestEmoji);
+  try {
+    // start with latest emoji and work backwards
+    for (const [emoji, version] of entries) {
+      if (testColorEmojiSupported(emoji)) {
+        return version;
+      }
+    }
+  } catch (e) {
+    // canvas error
+    // eslint-disable-next-line no-console
+    console.log("Ignoring canvas error", e);
+  } finally {
+    performance.measure("determineEmojiSupportLevel", "determineEmojiSupportLevel");
+  }
+  // In case of an error, be generous and just assume all emoji are supported (e.g. for canvas errors
+  // due to anti-fingerprinting add-ons). Better to show some gray boxes than nothing at all.
+  return entries[0][1]; // first one in the list is the most recent version
+}
+
+// Check which emojis we know for sure aren't supported, based on Unicode version level
+let promise: Promise<number>;
+export const detectEmojiSupportLevel = () => {
+  if (!promise) {
+    promise = new Promise((resolve) => {
+      rIC(
+        () => resolve(determineEmojiSupportLevel()) // delay so ideally this can run while IDB is first populating
+      );
+    });
+  }
+  return promise;
+};

package/src/emoji-mart/emoji.tsx

@@ -0,0 +1,24 @@
+import {lazy, Suspense} from "react";
+import {detectEmojiSupportLevel} from "./emoji-support";
+
+const LazyEmojiComponent = lazy(async () => {
+  const {EmojiMartEmoji} = await import("./emoji-mart");
+  const level = await detectEmojiSupportLevel();
+
+  function Emoji(props: React.ComponentPropsWithoutRef<typeof EmojiMartEmoji>) {
+    return <EmojiMartEmoji {...props} native={level >= 5} />;
+  }
+  return {
+    default: Emoji,
+  };
+});
+
+export const Emoji: React.FC<React.ComponentPropsWithoutRef<typeof LazyEmojiComponent>> = function EmojiOrLoader(
+  props
+) {
+  return (
+    <Suspense fallback={<div style={{width: props.size, height: props.size}} />}>
+      <LazyEmojiComponent {...props} />
+    </Suspense>
+  );
+};

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

@@ -0,0 +1,61 @@
+import {css} from "@linaria/core";
+import {AntTabs} from "../antd";
+import {AppIconPicker, AppIconPickerProps} from "./app-icon-picker";
+import {space, textStyles} from "../designSystem";
+import {EmojiPicker, EmojiPickerProps} from "./emoji-picker";
+import {Button} from "../Button";
+
+const TabHeader: React.FC<React.PropsWithChildren> = ({children}) => (
+  <div
+    className={css`
+      ${textStyles.heading5}
+    `}
+  >
+    {children}
+  </div>
+);
+
+type IconEmojiPickerProps = React.PropsWithChildren<{
+  onIconSelect: NonNullable<AppIconPickerProps["onSelect"]>;
+  onEmojiSelect: NonNullable<EmojiPickerProps["onSelect"]>;
+  onReset?: () => void;
+  resetLabel?: string;
+}>;
+export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
+  onIconSelect,
+  onEmojiSelect,
+  onReset,
+  resetLabel = "Reset",
+}) => {
+  return (
+    <AntTabs
+      animated={false}
+      destroyInactiveTabPane
+      items={[
+        {
+          key: "Icons",
+          label: <TabHeader>Icons</TabHeader>,
+          children: <AppIconPicker onSelect={onIconSelect} />,
+        },
+        {
+          key: "Emojis",
+          label: <TabHeader>Emojis</TabHeader>,
+          children: <EmojiPicker onSelect={onEmojiSelect} />,
+        },
+      ]}
+      tabBarExtraContent={
+        onReset ? (
+          <div
+            className={css`
+              padding-right: ${space.m}px;
+            `}
+          >
+            <Button size={":button-size/small"} onClick={onReset}>
+              {resetLabel}
+            </Button>
+          </div>
+        ) : null
+      }
+    />
+  );
+};