@fibery/ui-kit 1.13.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.13.0",
+  "version": "1.15.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/react": "1.0.3",
+    "@fibery/helpers": "1.1.0",
+    "@fibery/emoji-data": "2.1.0"
   },
   "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",
@@ -95,8 +93,8 @@
     "svgo": "2.8.0",
     "typescript": "5.0.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.2.0",
-    "@fibery/eslint-config": "8.3.0"
+    "@fibery/eslint-config": "8.3.0",
+    "@fibery/babel-preset": "7.2.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/antd/styles.ts

@@ -1,8 +1,24 @@
 import {css} from "@linaria/core";
 import {colors, layout, border, shadows, space, textStyles, themeVars, transition} from "../designSystem";
 
+const inputVariables = {
+  default: {
+    "--input-border": themeVars.inputBorderColor,
+    "--input-hover-border": `0 0 0 1px ${themeVars.opacity.opacity40}`,
+    "--input-focus-border": `0 0 0 1px ${themeVars.opacity.opacity25}`,
+    "--input-focus-shadow": `0 0 0 3px ${themeVars.focus}`,
+  },
+  error: {
+    "--input-border": themeVars.inputErrorBorderColor,
+    "--input-hover-border": themeVars.inputErrorBorderHoverColor,
+    "--input-focus-border": themeVars.inputErrorBorderFocusColor,
+    "--input-focus-shadow": themeVars.inputErrorBorderFocusShadow,
+  },
+};
+
 export const inputOverrides = {
   main: {
+    ...inputVariables.default,
     font: "inherit",
     color: themeVars.textColor,
     outline: "none",
@@ -16,18 +32,18 @@ export const inputOverrides = {
     border: 0,
     borderColor: colors.transparent,
     transition: `box-shadow ${transition}`,
-    boxShadow: themeVars.inputBorderColor,
+    boxShadow: "var(--input-border)",
     letterSpacing: 0,
     "::placeholder": {
       color: themeVars.inputPlaceholderTextColor,
     },
   },
   hover: {
-    boxShadow: `0 0 0 1px ${themeVars.opacity.opacity40} !important`,
+    boxShadow: "var(--input-hover-border) !important",
     transition: `box-shadow ${transition}`,
   },
   focus: {
-    boxShadow: `0 0 0 1px ${themeVars.opacity.opacity25}, 0 0 0 3px ${themeVars.focus} !important`,
+    boxShadow: "var(--input-focus-border), var(--input-focus-shadow) !important",
     transition: `box-shadow ${transition}`,
   },
   disabled: {
@@ -63,6 +79,7 @@ export const inputStyles = css`
     },
     "& .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
     "& .ant-input": inputOverrides.main,
+    "& .ant-input-status-error": inputVariables.error,
     "& .ant-input[readonly].ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
     "& .ant-input:hover[readonly].ant-input:hover[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
     "& .ant-input-affix-wrapper:hover .ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},

package/src/designSystem.ts

@@ -157,6 +157,10 @@ const lightColors = {
   inputBorderFocusColor: `0 0 0 1px  ${getOpacities(slate.slate8).opacity100}`,
   inputBorderBlendMode: "multiply",
   inputPlaceholderTextColor: slate.slate9,
+  inputErrorBorderColor: `0 0 0 1px ${red.red11}`,
+  inputErrorBorderHoverColor: `0 0 0 1px ${getOpacities(red.red11).opacity40}`,
+  inputErrorBorderFocusColor: `0 0 0 1px ${getOpacities(red.red11).opacity25}`,
+  inputErrorBorderFocusShadow: `0 0 0 3px ${getOpacities(red.red11).opacity25}`,
   buttonPrimaryColor: indigo.indigo10,
   buttonColor: slate.slate10,
   buttonPrimaryTextColor: slate.slate2,
@@ -269,11 +273,12 @@ const lightColors = {
   gridHeaderTextColor: slate.slate9,
   // cell
   gridCellBgColor: whiteA.whiteA0,
-  gridCellBorderColor: slate.slate4,
+  gridCellBorderColor: slate.slate5,
   gridPinnedCellBorderColor: slate.slate8,
   gridDisabledCellBgColor: slate.slate2,
   gridSelectedCellBgColor: indigo.indigo3,
-  gridSelectedCellBorderColor: indigo.indigo5,
+  gridHighlightedCellBgColor: indigo.indigo4,
+  gridSelectedCellBorderColor: indigo.indigo6,
   gridSelectedPinnedCellBorderColor: indigo.indigo7,
   gridDisabledSelectedCellBgColor: indigo.indigo4,
   gridActiveCellBorderColor: indigo.indigo8,
@@ -340,6 +345,10 @@ const darkColors = {
   inputBorderFocusColor: `0 0 0 1px ${getOpacities(slateDark.slate9).opacity100}`,
   inputBorderBlendMode: "lighten",
   inputPlaceholderTextColor: slateDark.slate9,
+  inputErrorBorderColor: `0 0 0 1px ${red.red7}`,
+  inputErrorBorderHoverColor: `0 0 0 1px ${getOpacities(red.red7).opacity40}`,
+  inputErrorBorderFocusColor: `0 0 0 1px ${getOpacities(red.red7).opacity25}`,
+  inputErrorBorderFocusShadow: `0 0 0 3px ${getOpacities(red.red7).opacity25}`,
   buttonPrimaryColor: indigoDark.indigo10,
   buttonColor: slateDark.slate10,
   buttonPrimaryTextColor: slate.slate6,
@@ -449,11 +458,12 @@ const darkColors = {
   gridHeaderTextColor: slateDark.slate10,
   // cell
   gridCellBgColor: slateDark.slate2,
-  gridCellBorderColor: slateDark.slate5,
+  gridCellBorderColor: slateDark.slate6,
   gridPinnedCellBorderColor: slateDark.slate8,
   gridDisabledCellBgColor: slateDark.slate3,
   gridSelectedCellBgColor: indigoDark.indigo3,
-  gridSelectedCellBorderColor: indigoDark.indigo6,
+  gridHighlightedCellBgColor: indigoDark.indigo5,
+  gridSelectedCellBorderColor: indigoDark.indigo7,
   gridSelectedPinnedCellBorderColor: indigoDark.indigo7,
   gridDisabledSelectedCellBgColor: indigoDark.indigo5,
   gridActiveCellBorderColor: indigoDark.indigo9,
@@ -923,13 +933,6 @@ export const textStyles = {
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
   },
-  fake: {
-    fontFamily,
-    fontSize: typeSizes[7],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: colors.shades.opacity25,
-  },
   link: {
     color: themeVars.linkColor,
     borderBottom: themeVars.linkBorder,

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 "./stores/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,77 @@
+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 {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;
+  onCustomCategorySettings?: () => void;
+  onSelect: (emoji: EmojiItem) => void;
+  showSkinTones?: boolean;
+
+  searchRef?: React.RefObject<HTMLInputElement>;
+};
+export const EmojiPicker: React.FC<EmojiPickerProps> = ({
+  onSelect,
+  color,
+  colors = cardTypeColors,
+  onColorSelect,
+  onCustomCategorySettings,
+  getHoverColor,
+  showSkinTones,
+  searchRef,
+}) => {
+  return (
+    <EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect} onCustomCategorySettings={onCustomCategorySettings}>
+      <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={20}>
+        <EmojiPickerHeader>
+          <EmojiPickerSearch
+            searchRef={searchRef}
+            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 />
+
+        {onColorSelect ? (
+          <EmojiPickerFooter>
+            <ColorPicker
+              colors={colors}
+              getSwatchHoverColor={getHoverColor}
+              color={color}
+              onChangeComplete={onColorSelect}
+            />
+          </EmojiPickerFooter>
+        ) : null}
+      </EmojiPickerContent>
+    </EmojiPickerRoot>
+  );
+};

package/src/emoji-picker/emoji.tsx

@@ -0,0 +1,8 @@
+import {Emoji as EmojiPrimitive, EmojiProps as EmojiPrimitiveProps} from "./primitives/emoji";
+import {isApple} from "./utils/emoji-set";
+import {detectEmojiSupportLevel} from "./utils/emoji-support";
+
+export type EmojiProps = EmojiPrimitiveProps;
+export const Emoji: React.FC<EmojiPrimitiveProps> = (props) => {
+  return <EmojiPrimitive version={detectEmojiSupportLevel()} native={isApple()} {...props} />;
+};

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,19 @@ 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;
+  onCreateClick?: () => void;
+  onCustomEmojisSettings?: () => void;
   onReset?: () => void;
   resetLabel?: string;
-  defaultTab?: "icons" | "emojis";
-  showColorPickerOnTabs?: ("icons" | "emojis")[];
+  createLabel?: string;
+  defaultTab?: TabKey;
+  showColorPickerOnTabs?: TabKey[];
   color?: string;
   getHoverColor?: (color: string) => string | undefined;
 }>;
@@ -31,8 +37,11 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
   onIconSelect,
   onEmojiSelect,
   onColorSelect,
+  onCreateClick,
+  onCustomEmojisSettings,
   defaultTab,
   onReset,
+  createLabel = "Add Emoji",
   resetLabel = "Reset",
   showColorPickerOnTabs = ["icons", "emojis"],
   color,
@@ -43,26 +52,39 @@ 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}
-            />
+            <>
+              <EmojiPicker
+                color={color}
+                onColorSelect={showColorPickerOnTabs.includes("emojis") ? onColorSelect : undefined}
+                onCustomCategorySettings={onCustomEmojisSettings}
+                getHoverColor={getHoverColor}
+                onSelect={onEmojiSelect}
+                showSkinTones
+              />
+              {onCreateClick && (
+                <div
+                  className={css`
+                    padding: ${space.l}px;
+                  `}
+                >
+                  <Button size=":button-size/small" onClick={onCreateClick}>
+                    {createLabel}
+                  </Button>
+                </div>
+              )}
+            </>
           ),
         },
-        {
+        onIconSelect && {
           key: "icons",
           label: <TabHeader>Icons</TabHeader>,
           children: (
             <AppIconPicker
-              autoFocus
               color={color}
               onColorSelect={showColorPickerOnTabs.includes("icons") ? onColorSelect : undefined}
               getHoverColor={getHoverColor}
@@ -70,7 +92,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/primitives/category.tsx

@@ -0,0 +1,120 @@
+import {Category} from "@fibery/emoji-data";
+import {CSSProperties, css} from "@linaria/core";
+import {memo} from "react";
+import {IconButton} from "../../Button/icon-button";
+import {space, textStyles, themeVars} from "../../designSystem";
+import {Settings} from "../../icons/react";
+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;
+
+  display: flex;
+  align-items: center;
+  gap: ${space.xs}px;
+
+  /* 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 = memo<EmojiPickerCategoryProps>(function EmojiPickerCategoryComponent({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>
+        {category.id === "custom" && emojiPickerCtx.onCustomCategorySettings && (
+          <IconButton onClick={emojiPickerCtx.onCustomCategorySettings}>
+            <Settings iconSize={16} />
+          </IconButton>
+        )}
+      </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}
+                  size={emojiContentSettings.emojiSize}
+                  version={emojiPickerCtx.version}
+                  skin={skin}
+                  tooltip
+                  native={emojiPickerCtx.native}
+                />
+              </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;