@fibery/ui-kit 1.10.0 → 1.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -51,7 +51,7 @@
     "rc-input-number": "7.3.11",
     "rc-menu": "9.8.1",
     "rc-progress": "3.4.1",
-    "react-color": "2.13.8",
+    "react-color": "2.19.3",
     "react-day-picker": "8.1.4",
     "react-popper": "2.3.0",
     "react-select": "5.3.2",
@@ -59,8 +59,8 @@
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/helpers": "1.0.4",
-    "@fibery/react": "1.0.2"
+    "@fibery/react": "1.0.2",
+    "@fibery/helpers": "1.0.4"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/designSystem.ts

@@ -202,6 +202,7 @@ const lightColors = {
   cellBackgroundColor: slate.slate2,
   cellBackgroundHoverColor: getOpacities(slate.slate6).opacity30,
   cellBorderColor: getOpacities(slate.slate8).opacity50,
+  cellPinnedBorderColor: getOpacities(slate.slate8).opacity70,
   tableRowWarningColor: getOpacities(yellow.yellow6).opacity60,
   errorBgColor: getOpacities(red.red9).opacity20,
   errorTextColor: red.red11,
@@ -254,6 +255,7 @@ const lightColors = {
   progressFillBg: slate.slate11,
   progressFillText: whiteA.whiteA0,
   searchFiltersBg: slate.slate1,
+  colorPickerSwatchBorder: blackA.blackA7,
 } as const;
 
 const darkMenu = {
@@ -364,6 +366,7 @@ const darkColors = {
   cellBackgroundColor: slateDark.slate2,
   cellBackgroundHoverColor: getOpacities(slateDark.slate6).opacity30,
   cellBorderColor: getOpacities(slateDark.slate9).opacity50,
+  cellPinnedBorderColor: getOpacities(slateDark.slate9).opacity70,
   tableRowWarningColor: getOpacities(yellowDark.yellow9).opacity40,
   errorBgColor: getOpacities(redDark.red9).opacity60,
   errorTextColor: red.red7,
@@ -414,6 +417,7 @@ const darkColors = {
   progressFillBg: slate.slate11,
   progressFillText: whiteA.whiteA0,
   searchFiltersBg: slateDark.slate2,
+  colorPickerSwatchBorder: blackA.blackA7,
   ...darkMenu,
 } as const;
 
@@ -554,6 +558,9 @@ export const getEnumBackgroundColor = _.memoize(
 );
 
 export const cardTypeColors = [
+  "#4A4A4A",
+  "#6A849B",
+  "#BEC5CC",
   "#D40915",
   "#E72065",
   "#9C2BAF",
@@ -568,8 +575,6 @@ export const cardTypeColors = [
   "#FBA32F",
   "#FC551F",
   "#B04E31",
-  "#6A849B",
-  "#4A4A4A",
 ] as const;
 
 export const pastelColors = cardTypeColors.map((color) => makeChromaColor(color).luminance(0.8).hex());

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

@@ -4,6 +4,9 @@ import {useThemeMode} from "../ThemeProvider";
 import {alignTheme} from "../theme-settings";
 import appIcons from "../appIcons.json";
 import {getThemedUrl} from "../AppIconWithFallback";
+import {$TSFixMe} from "../tsfixme";
+import {cardTypeColors} from "../designSystem";
+import {ColorPicker} from "../ColorPicker";
 
 const EMPTY_DATA = {
   aliases: {},
@@ -12,10 +15,16 @@ const EMPTY_DATA = {
   compressed: false,
 };
 
-export type AppIconPickerProps = {borderless?: boolean} & PickerProps;
+export type AppIconPickerProps = {
+  borderless?: boolean;
+  color?: string;
+  onColorSelect?: (c: $TSFixMe) => void;
+} & PickerProps;
+
+const i18n = {search: "Search icon..."};
 
 export const AppIconPicker = forwardRef<HTMLDivElement, AppIconPickerProps>(function AppIconPicker(
-  {borderless = true, ...pickerProps},
+  {borderless = true, onColorSelect, color, ...pickerProps},
   ref
 ) {
   const themeMode = useThemeMode();
@@ -34,17 +43,20 @@ export const AppIconPicker = forwardRef<HTMLDivElement, AppIconPickerProps>(func
   );
 
   return (
-    <EmojiMartWrapper ref={ref} borderless={borderless} hideCategories>
+    <EmojiMartWrapper ref={ref} color={color} borderless={borderless} hideCategories>
       <NimblePicker
         data={EMPTY_DATA}
         theme={alignedTheme}
         showSkinTones={false}
         showPreview={false}
+        emojiTooltip
         title=""
         custom={customIcons}
-        emojiSize={22}
+        emojiSize={20}
+        i18n={i18n}
         {...pickerProps}
       />
+      {onColorSelect ? <ColorPicker colors={cardTypeColors} color={color} onChangeComplete={onColorSelect} /> : null}
     </EmojiMartWrapper>
   );
 });

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

@@ -1,40 +1,63 @@
+import {CSSProperties, css, cx} from "@linaria/core";
+import {Emoji, EmojiProps} from "emoji-mart";
 import "emoji-mart/css/emoji-mart.css";
 import {forwardRef} from "react";
-import {border, space, textStyles, themeVars} from "../designSystem";
-import {cx, css} from "@linaria/core";
-import {Emoji, EmojiProps} from "emoji-mart";
+import {useTheme} from "../ThemeProvider";
+import {a11yColor} from "../a11y-color";
+import {border, fontFamily, getOpacities, space, textStyles, themeVars} from "../designSystem";
 
-export {emojiIndex, Picker, NimblePicker} from "emoji-mart";
-export type {BaseEmoji, PickerProps, EmojiSkin} from "emoji-mart";
+export {NimblePicker, Picker, emojiIndex} from "emoji-mart";
+export type {BaseEmoji, EmojiSkin, PickerProps} from "emoji-mart";
 
 export const backgroundImageFn = () => "https://assets-temp.fibery.io/images/emoji-datasource-apple-5_0_1-64.png";
 
 const emojiMartCss = css`
+  padding: 0 ${space.l}px;
+  position: relative;
+
   .emoji-mart {
+    font-family: ${fontFamily};
     background-color: ${themeVars.actionMenuBg};
     margin-top: ${space.xxs}px;
     display: block;
+    width: 288px !important;
+
+    + * {
+      border-top: 1px solid ${themeVars.separatorColor};
+    }
   }
 
   .emoji-mart-bar {
     border-bottom: 1px solid ${themeVars.separatorColor};
 
     &:last-child {
-      border-top: 1px solid ${themeVars.separatorColor};
+      border: 0;
     }
   }
 
   .emoji-mart-search {
     padding-bottom: ${space.s}px;
+    padding-left: 0;
+    padding-right: 0;
 
     & input {
       ${textStyles.regular}
       background-color: ${themeVars.inputBgColor};
       color: ${themeVars.textColor};
       box-shadow: ${themeVars.inputBorderColor};
-      height: 34px;
+      height: 32px;
       border: 0;
     }
+
+    & .emoji-mart-search-icon {
+      top: 5px;
+      right: 4px;
+    }
+  }
+
+  .emoji-mart-scroll {
+    padding-left: 0;
+    padding-right: 0;
   }
 
   .emoji-anchor-bar {
@@ -57,7 +80,7 @@ const emojiMartCss = css`
   }
 
   .emoji-mart-category .emoji-mart-emoji:hover::before {
-    background-color: ${themeVars.badgeBgColor} !important;
+    background-color: var(--emoji-bg-color) !important;
     border-radius: ${border.radius8}px !important;
   }
   .emoji-mart-dark .emoji-mart-category-label span {
@@ -69,23 +92,70 @@ const emojiMartCss = css`
   }
 
   .emoji-mart-preview {
-    height: 50px;
-  }
-
-  .emoji-mart-preview-skins {
-    right: 15px;
+    height: 0px;
+    position: unset;
   }
 
   .emoji-mart-emoji {
     /* pathetic attemts to make it a bit faster without forking */
     content-visibility: auto;
-    contain-intrinsic-size: 22px;
+    contain-intrinsic-size: 20px;
+    cursor: pointer;
   }
   .emoji-mart-category-list,
   .emoji-mart-category-list li {
     /* hack to maintain correct size of hidden emojis becuase of content-visibility */
     line-height: 0;
   }
+  .emoji-mart-preview-skins {
+    top: 16px;
+    right: 12px !important;
+    z-index: 2;
+    background-color: ${themeVars.actionMenuBg};
+
+    & .emoji-mart-skin-swatches {
+      background-color: ${themeVars.actionMenuBg};
+
+      &.opened {
+        & .emoji-mart-skin-swatch {
+          width: 32px !important;
+        }
+      }
+
+      & .emoji-mart-skin-swatch {
+        height: 32px !important;
+
+        &.selected {
+          width: 32px !important;
+          padding: 0;
+        }
+
+        & .emoji-mart-emoji-native span {
+          width: 20px;
+          font-size: 20px !important;
+          height: 20px;
+          display: inline-block;
+        }
+
+        &:hover {
+          background-color: ${themeVars.badgeBgColor} !important;
+          border-radius: ${border.radius8}px !important;
+        }
+      }
+      & .emoji-mart-skin-text {
+        height: auto;
+        padding: 0;
+        background-color: ${themeVars.actionMenuBg};
+        color: ${themeVars.accentTextColor};
+        border-radius: 0;
+
+        &.opened {
+          width: 98px;
+          padding-left: 8px;
+        }
+      }
+    }
+  }
 `;
 
 const borderlessEmojiMartCss = css`
@@ -100,16 +170,37 @@ const hideCategoriesEmojiMartCss = css`
   }
 `;
 
-type EmojiMartWrapperProps = React.PropsWithChildren<{borderless?: boolean; hideCategories?: boolean}>;
+const emojiMartWithShortSearchCss = css`
+  .emoji-mart-search {
+    width: 250px;
+  }
+`;
+
+type EmojiMartWrapperProps = React.PropsWithChildren<{
+  borderless?: boolean;
+  hideCategories?: boolean;
+  shortSearch?: boolean;
+  color?: string;
+}>;
 
 export const EmojiMartWrapper = forwardRef<HTMLDivElement, EmojiMartWrapperProps>(function EmojiMartWrapper(
-  {borderless, hideCategories, children},
+  {borderless, hideCategories, color, shortSearch, children},
   ref
 ) {
+  const theme = useTheme();
+
+  const bgColor = color ? a11yColor(getOpacities(color).opacity20, theme.menuBg, 1.3) : theme.badgeBgColor;
+
   return (
     <div
+      style={{"--emoji-bg-color": bgColor} as CSSProperties}
       ref={ref}
-      className={cx(emojiMartCss, borderless && borderlessEmojiMartCss, hideCategories && hideCategoriesEmojiMartCss)}
+      className={cx(
+        emojiMartCss,
+        borderless && borderlessEmojiMartCss,
+        hideCategories && hideCategoriesEmojiMartCss,
+        shortSearch && emojiMartWithShortSearchCss
+      )}
     >
       {children}
     </div>

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

@@ -2,31 +2,44 @@ import {forwardRef} from "react";
 import {useTheme, useThemeMode} from "../ThemeProvider";
 import {EmojiMartWrapper, Picker, PickerProps, backgroundImageFn} from "./emoji-mart";
 import {alignTheme} from "../theme-settings";
+import {$TSFixMe} from "../tsfixme";
+import {ColorPicker} from "../ColorPicker";
+import {cardTypeColors} from "../designSystem";
 
 export type EmojiPickerProps = {
   borderless?: boolean;
+  color?: string;
+  colors?: string[];
+  onColorSelect?: (c: $TSFixMe) => void;
 } & PickerProps;
 
+const i18n = {search: "Search emoji..."};
+
 export const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(function EmojiPickerComponent(
-  {borderless = true, ...pickerProps},
+  {borderless = true, color, colors = cardTypeColors, onColorSelect, showSkinTones = true, ...pickerProps},
   ref
 ) {
   const themeMode = useThemeMode();
   const theme = useTheme();
 
   return (
-    <EmojiMartWrapper ref={ref} borderless={borderless}>
+    <EmojiMartWrapper ref={ref} color={color} borderless={borderless} hideCategories shortSearch={showSkinTones}>
       <Picker
         theme={alignTheme(themeMode)}
         backgroundImageFn={backgroundImageFn}
         native
         title={""}
         showPreview={false}
+        showSkinTones={showSkinTones}
+        skinEmoji="hand"
         color={theme.primary}
         emoji=""
-        emojiSize={22}
+        emojiSize={20}
+        emojiTooltip
+        i18n={i18n}
         {...pickerProps}
       />
+      {onColorSelect ? <ColorPicker colors={colors} color={color} onChangeComplete={onColorSelect} /> : null}
     </EmojiMartWrapper>
   );
 });

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

@@ -1,9 +1,10 @@
 import {css} from "@linaria/core";
+import {Button} from "../Button";
 import {AntTabs} from "../antd";
-import {AppIconPicker, AppIconPickerProps} from "./app-icon-picker";
 import {space, textStyles} from "../designSystem";
+import {$TSFixMe} from "../tsfixme";
+import {AppIconPicker, AppIconPickerProps} from "./app-icon-picker";
 import {EmojiPicker, EmojiPickerProps} from "./emoji-picker";
-import {Button} from "../Button";
 
 const TabHeader: React.FC<React.PropsWithChildren> = ({children}) => (
   <div
@@ -18,36 +19,43 @@ const TabHeader: React.FC<React.PropsWithChildren> = ({children}) => (
 type IconEmojiPickerProps = React.PropsWithChildren<{
   onIconSelect: NonNullable<AppIconPickerProps["onSelect"]>;
   onEmojiSelect: NonNullable<EmojiPickerProps["onSelect"]>;
+  onColorSelect?: (c: $TSFixMe) => void;
   onReset?: () => void;
   resetLabel?: string;
+  defaultTab?: "icons" | "emojis";
+  color?: string;
 }>;
 export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
   onIconSelect,
   onEmojiSelect,
+  onColorSelect,
+  defaultTab,
   onReset,
   resetLabel = "Reset",
+  color,
 }) => {
   return (
     <AntTabs
       animated={false}
       destroyInactiveTabPane
+      defaultActiveKey={defaultTab}
       items={[
         {
-          key: "Icons",
+          key: "icons",
           label: <TabHeader>Icons</TabHeader>,
-          children: <AppIconPicker onSelect={onIconSelect} />,
+          children: <AppIconPicker color={color} onColorSelect={onColorSelect} onSelect={onIconSelect} />,
         },
         {
-          key: "Emojis",
+          key: "emojis",
           label: <TabHeader>Emojis</TabHeader>,
-          children: <EmojiPicker onSelect={onEmojiSelect} />,
+          children: <EmojiPicker color={color} onColorSelect={onColorSelect} onSelect={onEmojiSelect} />,
         },
       ]}
       tabBarExtraContent={
         onReset ? (
           <div
             className={css`
-              padding-right: ${space.m}px;
+              padding-right: ${space.l}px;
             `}
           >
             <Button size={":button-size/small"} onClick={onReset}>