@fibery/ui-kit 1.8.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -22,7 +22,10 @@
     "src/Pallete.ts",
     "src/tooltip.tsx",
     "src/BackButton.tsx",
-    "src/Button"
+    "src/Button",
+    "src/emoji-mart.tsx",
+    "src/emoji-picker.tsx",
+    "src/app-icon-picker.tsx"
   ],
   "license": "UNLICENSED",
   "dependencies": {
@@ -92,8 +95,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/Button/button-base.tsx

@@ -31,7 +31,7 @@ const getBorderColor = ({
   if (primary) {
     return mainColor;
   }
-  return getOpacities(mainColor).opacity15;
+  return getOpacities(mainColor).opacity30;
 };
 
 const getHoverBorderColor = ({

package/src/Select/index.tsx

@@ -19,6 +19,7 @@ import BaseSelect, {
   ActionMeta,
   OnChangeValue,
   PropsValue,
+  components as reactSelectComponents,
 } from "react-select";
 import BaseCreatableSelect, {CreatableProps} from "react-select/creatable";
 import WindowedSelect, {components, WindowedMenuList} from "react-windowed-select";
@@ -245,6 +246,7 @@ export function CreatableSelectInner<
     isCollectionMode,
     menuPortalTarget,
     styles = {},
+    virtualized = true,
     ...rest
   }: CreatableProps<Option, IsMulti, Group> & SelectProps<Option, IsMulti, Group>,
   ref: any
@@ -263,7 +265,7 @@ export function CreatableSelectInner<
       tabSelectsValue={false}
       components={{
         Menu,
-        MenuList: WindowedMenuList,
+        MenuList: virtualized ? WindowedMenuList : reactSelectComponents.MenuList,
         DropdownIndicator,
         ClearIndicator,
         Option: OptionComponent,

package/src/app-icon-picker.tsx

@@ -0,0 +1,50 @@
+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";
+
+const EMPTY_DATA = {
+  aliases: {},
+  emojis: {},
+  categories: [],
+  compressed: false,
+};
+
+export type AppIconPickerProps = {borderless?: boolean} & PickerProps;
+
+export const AppIconPicker = forwardRef<HTMLDivElement, AppIconPickerProps>(function AppIconPicker(
+  {borderless = true, ...pickerProps},
+  ref
+) {
+  const themeMode = useThemeMode();
+
+  const alignedTheme = alignTheme(themeMode);
+
+  const customIcons = useMemo(
+    () =>
+      appIcons.map((icon) => {
+        return {
+          ...icon,
+          imageUrl: getThemedUrl(icon.file, alignedTheme),
+        };
+      }),
+    [alignedTheme]
+  );
+
+  return (
+    <EmojiMartWrapper ref={ref} borderless={borderless} hideCategories>
+      <NimblePicker
+        data={EMPTY_DATA}
+        theme={alignedTheme}
+        showSkinTones={false}
+        showPreview={false}
+        title=""
+        custom={customIcons}
+        emojiSize={22}
+        {...pickerProps}
+      />
+    </EmojiMartWrapper>
+  );
+});

package/src/designSystem.ts

@@ -237,8 +237,8 @@ const lightColors = {
   filterGroupBorder: blackA.blackA3,
   //end
   disabledInversedTextColor: shades.opacity25,
-  danger: brandColors.red,
-  active: brandColors.red,
+  danger: red.red9,
+  active: red.red9,
   warning: "#FFD41E",
   cardBg: "#FFFFFF",
   cardSelected: "#FFFB8F",
@@ -397,8 +397,8 @@ const darkColors = {
   filterGroupBorder: whiteA.whiteA3,
   //end
   disabledInversedTextColor: lights.opacity25,
-  danger: redDark.red9,
-  active: brandColors.red,
+  danger: redDark.red10,
+  active: redDark.red10,
   warning: "#FFD41E",
   cardBg: slateDark.slate6,
   cardSelected: slateDark.slate5,
@@ -584,16 +584,11 @@ export const colors = {
   inversedTextColor: "#FFFFFF",
   disabledInversedTextColor: lights.opacity25,
   danger: brandColors.red,
-  active: brandColors.red,
-  warning: "#FFD41E",
-  cardBg: "#FFFFFF",
   cardSelected: "#FFFB8F",
   cardSelectedHover: "rgba(240, 244, 247, 0.6)",
-  selectedImageBorder: "rgba(42, 56, 68, 0.3)",
   unitBg: "rgba(220, 224, 228, 0.33)",
   infoBox: "rgba(255, 212, 0, 0.2)",
   errorBg: "rgba(255, 241, 240, 1)",
-  timelineScaleSelectBorderColor: chroma("#FFFFFF").alpha(opacity.opacity40).css(),
   transparent,
   shades,
   lights,
@@ -892,7 +887,7 @@ export const textStyles = {
     lineHeight: lineHeight.regular,
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
-    border: `1px solid ${colors.active}`,
+    border: `1px solid ${themeVars.active}`,
     borderRadius: radius,
   },
 } as const;

package/src/emoji-mart.tsx

@@ -0,0 +1,111 @@
+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 as EmojiMartEmoji, EmojiProps} from "emoji-mart";
+
+export {detectEmojiSupportLevel} from "./emojiSupport";
+export {emojiIndex, Picker, NimblePicker} from "emoji-mart";
+export type {BaseEmoji, PickerProps, EmojiSkin} from "emoji-mart";
+
+export const backgroundImageFn = () => "https://assets-temp.fibery.io/images/emoji-datasource-apple-5_0_1-64.png";
+
+const emojiMartCss = css`
+  .emoji-mart {
+    background-color: ${themeVars.actionMenuBg};
+    margin-top: ${space.xxs}px;
+    display: block;
+  }
+
+  .emoji-mart-bar {
+    border-bottom: 1px solid ${themeVars.separatorColor};
+
+    &:last-child {
+      border-top: 1px solid ${themeVars.separatorColor};
+    }
+  }
+
+  .emoji-mart-search {
+    padding-bottom: ${space.s}px;
+
+    & input {
+      ${textStyles.regular}
+      background-color: ${themeVars.inputBgColor};
+      color: ${themeVars.textColor};
+      box-shadow: ${themeVars.inputBorderColor};
+      height: 34px;
+      border: 0;
+    }
+  }
+
+  .emoji-anchor-bar {
+    height: ${space.xxs}px;
+  }
+
+  .emoji-mart-category-label {
+    & span {
+      ${textStyles.heading6}
+      background-color: ${themeVars.actionMenuBg};
+      color: ${themeVars.textColor};
+      color: ${themeVars.accentTextColor};
+      padding-top: ${space.l}px;
+    }
+  }
+
+  .emoji-mart-category .emoji-mart-emoji span,
+  .emoji-mart-anchor {
+    cursor: pointer !important;
+  }
+
+  .emoji-mart-category .emoji-mart-emoji:hover::before {
+    background-color: ${themeVars.badgeBgColor} !important;
+    border-radius: ${border.radius8}px !important;
+  }
+  .emoji-mart-dark .emoji-mart-category-label span {
+    background-color: ${themeVars.actionMenuBg};
+  }
+
+  .emoji-mart-skin-swatch {
+    cursor: pointer;
+  }
+
+  .emoji-mart-preview {
+    height: 50px;
+  }
+
+  .emoji-mart-preview-skins {
+    right: 15px;
+  }
+`;
+
+const borderlessEmojiMartCss = css`
+  .emoji-mart {
+    border-radius: 0;
+    border: none;
+  }
+`;
+const hideCategoriesEmojiMartCss = css`
+  .emoji-mart-bar:first-child {
+    display: none;
+  }
+`;
+
+type EmojiMartWrapperProps = React.PropsWithChildren<{borderless?: boolean; hideCategories?: boolean}>;
+
+export const EmojiMartWrapper = forwardRef<HTMLDivElement, EmojiMartWrapperProps>(function EmojiMartWrapper(
+  {borderless, hideCategories, children},
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={cx(emojiMartCss, borderless && borderlessEmojiMartCss, hideCategories && hideCategoriesEmojiMartCss)}
+    >
+      {children}
+    </div>
+  );
+});
+
+export const Emoji: React.FC<EmojiProps> = (props) => {
+  return <EmojiMartEmoji backgroundImageFn={backgroundImageFn} {...props} />;
+};

package/src/emoji-picker.tsx

@@ -0,0 +1,32 @@
+import {forwardRef} from "react";
+import {useTheme, useThemeMode} from "./ThemeProvider";
+import {EmojiMartWrapper, Picker, PickerProps, backgroundImageFn} from "./emoji-mart";
+import {alignTheme} from "./theme-settings";
+
+type EmojiPickerProps = {
+  borderless?: boolean;
+} & PickerProps;
+
+export const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(function EmojiPickerComponent(
+  {borderless = true, ...pickerProps},
+  ref
+) {
+  const themeMode = useThemeMode();
+  const theme = useTheme();
+
+  return (
+    <EmojiMartWrapper ref={ref} borderless={borderless}>
+      <Picker
+        theme={alignTheme(themeMode)}
+        backgroundImageFn={backgroundImageFn}
+        native
+        title={""}
+        showPreview={false}
+        color={theme.primary}
+        emoji=""
+        emojiSize={22}
+        {...pickerProps}
+      />
+    </EmojiMartWrapper>
+  );
+});