@fibery/ui-kit 1.13.0 → 1.15.0

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

@@ -1,5 +0,0 @@
-import {NimbleEmojiIndex} from "@fibery/emoji-data";
-
-import data from "@fibery/emoji-data/data/all.json";
-
-export const emojiIndex = new NimbleEmojiIndex(data);

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

@@ -1,216 +0,0 @@
-import {CSSProperties, css, cx} from "@linaria/core";
-import "emoji-mart/css/emoji-mart.css";
-import {forwardRef} from "react";
-import {useTheme, useThemeMode} from "../ThemeProvider";
-import {border, fontFamily, space, textStyles, themeVars} from "../designSystem";
-
-import {NimblePickerProps, NimblePicker as Picker} from "emoji-mart";
-import {alignTheme} from "../theme-settings";
-
-export type {BaseEmoji, EmojiSkin, NimblePickerProps} from "emoji-mart";
-
-export const NimblePicker = (props: NimblePickerProps) => {
-  const themeMode = useThemeMode();
-  const theme = useTheme();
-
-  return (
-    <Picker
-      theme={alignTheme(themeMode)}
-      title={""}
-      showPreview={false}
-      skinEmoji="hand"
-      color={theme.primary}
-      emoji=""
-      emojiSize={20}
-      emojiTooltip
-      {...props}
-    />
-  );
-};
-
-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: 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: 32px;
-      border: 0;
-    }
-
-    & .emoji-mart-search-icon {
-      top: 5px;
-      right: 4px;
-    }
-  }
-
-  .emoji-mart-scroll {
-    padding-left: 0;
-    padding-right: 0;
-    height: 238px;
-  }
-
-  .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: var(--fibery-emoji-hover-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: 0px;
-    position: unset;
-  }
-
-  .emoji-mart-emoji {
-    color: ${themeVars.textColor};
-    /* pathetic attemts to make it a bit faster without forking */
-    content-visibility: auto;
-    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;
-        }
-
-        &: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`
-  .emoji-mart {
-    border-radius: 0;
-    border: none;
-  }
-`;
-const hideCategoriesEmojiMartCss = css`
-  .emoji-mart-bar:first-child {
-    display: none;
-  }
-`;
-
-const emojiMartWithShortSearchCss = css`
-  .emoji-mart-search {
-    width: 250px;
-  }
-`;
-
-type EmojiMartWrapperProps = React.PropsWithChildren<{
-  borderless?: boolean;
-  hideCategories?: boolean;
-  shortSearch?: boolean;
-  emojiHoverColor?: string;
-}>;
-
-export const EmojiMartWrapper = forwardRef<HTMLDivElement, EmojiMartWrapperProps>(function EmojiMartWrapper(
-  {borderless, hideCategories, emojiHoverColor, shortSearch, children},
-  ref
-) {
-  return (
-    <div
-      style={{"--fibery-emoji-hover-color": emojiHoverColor} as CSSProperties}
-      ref={ref}
-      className={cx(
-        emojiMartCss,
-        borderless && borderlessEmojiMartCss,
-        hideCategories && hideCategoriesEmojiMartCss,
-        shortSearch && emojiMartWithShortSearchCss
-      )}
-    >
-      {children}
-    </div>
-  );
-});

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

@@ -1,78 +0,0 @@
-import {Suspense, forwardRef, lazy} from "react";
-import {ColorPicker} from "../ColorPicker";
-import {cardTypeColors} from "../designSystem";
-import {$TSFixMe} from "../tsfixme";
-import {EmojiMartWrapper, NimblePicker, NimblePickerProps} from "./emoji-mart";
-import {EmojiDataProps, getEmojiDataProps} from "./data/get-data";
-
-type NimblePickerWithData = Omit<NimblePickerProps, keyof EmojiDataProps>;
-
-const NimblePickerWithData = lazy(async () => {
-  const emojiDataProps = await getEmojiDataProps();
-
-  return {
-    default: function EmojiPicker(props: NimblePickerWithData) {
-      return <NimblePicker {...props} {...emojiDataProps} />;
-    },
-  };
-});
-
-const EmojiPickerComponent: React.FC<NimblePickerWithData> = (props) => {
-  return (
-    <Suspense
-      fallback={
-        <div
-          className="emoji-mart"
-          style={{
-            height: "280px",
-          }}
-        />
-      }
-    >
-      <NimblePickerWithData {...props} />
-    </Suspense>
-  );
-};
-
-export type EmojiPickerProps = {
-  borderless?: boolean;
-  color?: string;
-  getHoverColor?: (color: string) => string | undefined;
-  colors?: string[];
-  onColorSelect?: (c: $TSFixMe) => void;
-} & NimblePickerWithData;
-
-const i18n = {search: "Search emoji..."};
-
-export const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(function EmojiPicker(
-  {
-    borderless = true,
-    color,
-    getHoverColor,
-    colors = cardTypeColors,
-    onColorSelect,
-    showSkinTones = true,
-    ...pickerProps
-  },
-  ref
-) {
-  return (
-    <EmojiMartWrapper
-      ref={ref}
-      emojiHoverColor={color ? getHoverColor?.(color) : undefined}
-      borderless={borderless}
-      hideCategories
-      shortSearch={showSkinTones}
-    >
-      <EmojiPickerComponent showSkinTones={showSkinTones} i18n={i18n} {...pickerProps} />
-      {onColorSelect ? (
-        <ColorPicker
-          colors={colors}
-          getSwatchHoverColor={getHoverColor}
-          color={color}
-          onChangeComplete={onColorSelect}
-        />
-      ) : null}
-    </EmojiMartWrapper>
-  );
-});