@fibery/ui-kit 1.7.7 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.7.7",
+  "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": {
@@ -58,8 +61,8 @@
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/helpers": "1.0.2",
-    "@fibery/react": "1.0.0"
+    "@fibery/helpers": "1.0.3",
+    "@fibery/react": "1.0.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",

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

@@ -17,6 +17,9 @@ import BaseSelect, {
   SingleValueProps,
   StylesConfig,
   ActionMeta,
+  OnChangeValue,
+  PropsValue,
+  components as reactSelectComponents,
 } from "react-select";
 import BaseCreatableSelect, {CreatableProps} from "react-select/creatable";
 import WindowedSelect, {components, WindowedMenuList} from "react-windowed-select";
@@ -46,6 +49,8 @@ export type {
   SingleValue,
   MultiValue,
   ActionMeta,
+  OnChangeValue,
+  PropsValue,
 };
 
 function GroupHeading<
@@ -241,6 +246,7 @@ export function CreatableSelectInner<
     isCollectionMode,
     menuPortalTarget,
     styles = {},
+    virtualized = true,
     ...rest
   }: CreatableProps<Option, IsMulti, Group> & SelectProps<Option, IsMulti, Group>,
   ref: any
@@ -259,7 +265,7 @@ export function CreatableSelectInner<
       tabSelectsValue={false}
       components={{
         Menu,
-        MenuList: WindowedMenuList,
+        MenuList: virtualized ? WindowedMenuList : reactSelectComponents.MenuList,
         DropdownIndicator,
         ClearIndicator,
         Option: OptionComponent,

package/src/Select/select-in-popover.tsx

@@ -14,7 +14,17 @@ import React, {
 } from "react";
 import {Popup} from "../Popup";
 import {$TSFixMe} from "../tsfixme";
-import {combineStyles, GroupBase, OptionsOrGroups, Select as ReactSelect, SelectProps, StylesConfig} from "./index";
+import {
+  combineStyles,
+  GroupBase,
+  OptionsOrGroups,
+  Select as ReactSelect,
+  SelectProps,
+  StylesConfig,
+  OnChangeValue,
+  ActionMeta,
+  PropsValue,
+} from "./index";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
 
 const offset = [0, space.xs] as [number, number];
@@ -102,7 +112,7 @@ type Ref = {
 };
 
 type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
-  value?: Option;
+  value?: PropsValue<Option>;
   menuIsOpen?: boolean;
   autoFocus?: boolean;
   defaultMenuIsOpen?: boolean;
@@ -116,7 +126,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   onFocus?: () => void;
   isCollectionMode?: IsMulti;
   isClearable?: boolean;
-  onChange: (...arg: $TSFixMe) => void;
+  onChange: (newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
   onMenuOpen: () => void;
   onMenuClose: () => void | boolean;
   renderValue?: () => ReactNode;
@@ -296,11 +306,11 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
               controlShouldRenderValue
               closeMenuOnScroll={false}
               closeMenuOnSelect={false}
-              onChange={(...arg) => {
+              onChange={(newValue, actionMeta) => {
                 if (hideOnChange) {
                   onHide();
                 }
-                onChange(...arg);
+                onChange(newValue, actionMeta);
               }}
               placeholder={placeholder}
               onInputChange={onInputChange}

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>
+  );
+});

package/src/icons/ast/FiberyMono.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const FiberyMono: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M16.735 6.544a1.788 1.788 0 0 1 .644 2.112 1.764 1.764 0 0 1-.758.888l-9.98 5.826a1.733 1.733 0 0 1-2.16-.328 1.778 1.778 0 0 1-.161-2.201l6.493-9.628a1.734 1.734 0 0 1 2.387-.407 1.786 1.786 0 0 1 .504 2.394l-3.74 5.557 3.519-4.354 2.135-.162c.396-.03.79.077 1.117.303ZM9.575 4.64l-1.15-1.252a1.733 1.733 0 0 0-2.157-.329c-.343.2-.609.513-.753.886-.145.373-.16.785-.044 1.168l.45 1.477 1.41.28-3.22.242a1.74 1.74 0 0 0-1.056.471 1.785 1.785 0 0 0-.318 2.181c.199.346.508.614.877.76l1.54.61 4.42-6.494Zm5.584 6.086-6.777 3.93.482 1.592c.137.45.445.826.856 1.046.411.22.892.266 1.337.128a1.76 1.76 0 0 0 1.034-.866c.218-.415.263-.902.127-1.351l-.288-.944-1.078-.866 3.497 1.386c.368.144.775.157 1.152.038a1.75 1.75 0 0 0 .926-.694 1.784 1.784 0 0 0-.162-2.195l-1.106-1.204Z"},"children":[]}],"metadata":""}]},"name":"fibery-mono"};
+
+export default FiberyMono;

package/src/icons/ast/RicheditorBlockCallout.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const RicheditorBlockCallout: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4 4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4Zm12 1.5H4a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5ZM7.473 10H5.548C5.215 10 5 9.793 5 9.467V7.543C5 7.207 5.204 7 5.548 7h1.925c.323 0 .527.207.527.543v1.924c0 .326-.215.533-.527.533Z"},"children":[]}],"metadata":""}]},"name":"richeditor-block-callout"};
+
+export default RicheditorBlockCallout;

package/src/icons/ast/index.tsx

@@ -56,6 +56,7 @@ export { default as ExtensionWorkflow } from './ExtensionWorkflow';
 export { default as FavoritesChecked } from './FavoritesChecked';
 export { default as FavoritesMenu } from './FavoritesMenu';
 export { default as Favorites } from './Favorites';
+export { default as FiberyMono } from './FiberyMono';
 export { default as Fields } from './Fields';
 export { default as FileUpload } from './FileUpload';
 export { default as Filter } from './Filter';
@@ -100,6 +101,7 @@ export { default as Remove } from './Remove';
 export { default as Reply } from './Reply';
 export { default as Restore } from './Restore';
 export { default as RicheditorActionsMore } from './RicheditorActionsMore';
+export { default as RicheditorBlockCallout } from './RicheditorBlockCallout';
 export { default as RicheditorBlockCode } from './RicheditorBlockCode';
 export { default as RicheditorBlockEntity } from './RicheditorBlockEntity';
 export { default as RicheditorBlockFile } from './RicheditorBlockFile';

package/src/icons/react/FiberyMono.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import FiberyMonoSvg from '../ast/FiberyMono';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const FiberyMono = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={FiberyMonoSvg} />;
+
+FiberyMono.displayName = 'FiberyMono';
+export default FiberyMono;

package/src/icons/react/RicheditorBlockCallout.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import RicheditorBlockCalloutSvg from '../ast/RicheditorBlockCallout';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const RicheditorBlockCallout = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={RicheditorBlockCalloutSvg} />;
+
+RicheditorBlockCallout.displayName = 'RicheditorBlockCallout';
+export default RicheditorBlockCallout;

package/src/icons/react/index.tsx

@@ -56,6 +56,7 @@ export { default as ExtensionWorkflow } from './ExtensionWorkflow';
 export { default as FavoritesChecked } from './FavoritesChecked';
 export { default as FavoritesMenu } from './FavoritesMenu';
 export { default as Favorites } from './Favorites';
+export { default as FiberyMono } from './FiberyMono';
 export { default as Fields } from './Fields';
 export { default as FileUpload } from './FileUpload';
 export { default as Filter } from './Filter';
@@ -100,6 +101,7 @@ export { default as Remove } from './Remove';
 export { default as Reply } from './Reply';
 export { default as Restore } from './Restore';
 export { default as RicheditorActionsMore } from './RicheditorActionsMore';
+export { default as RicheditorBlockCallout } from './RicheditorBlockCallout';
 export { default as RicheditorBlockCode } from './RicheditorBlockCode';
 export { default as RicheditorBlockEntity } from './RicheditorBlockEntity';
 export { default as RicheditorBlockFile } from './RicheditorBlockFile';