@fibery/ui-kit 1.42.0 → 2.0.1

package/src/design-system/layout.ts

@@ -42,7 +42,7 @@ export const space = {
 export const layout = {
   logoSize: 18,
   menuDefaultWidth: 243,
-  fiberyAiSidebarDefaultWidth: 420,
+  fiberyAiSidebarDefaultWidth: 360,
   fiberyAiSidebarMaxWidth: 920,
   desktopToolbarHeight: 32,
   desktopMenuMinWidth: 240,

package/src/design-system/theme.ts

@@ -1,4 +1,4 @@
-import {Colors, makeThemeDefs, pickColors, pickFns, ThemeDefs} from "./colors";
+import {cardTypeColors, Colors, makeThemeDefs, pickColors, pickFns, ThemeDefs} from "./colors";
 import {getTypeColors, TypeColors} from "./colors-js";
 import {ThemeMode} from "../theme-settings";
 import {defaultPaletteKey, makeDefaultPalette, ThemePalette} from "../palette-generator";
@@ -16,6 +16,9 @@ export function makeThemeApi(palette: ThemePalette, defs: ThemeDefs, mode: Theme
       }
       return values.light;
     },
+    get defaultCardTypeColorUppercaseHex() {
+      return palette.key.includes("arch") ? cardTypeColors[14] : cardTypeColors[10];
+    },
   };
 }
 

package/src/design-system/vars.test.ts

@@ -6,6 +6,10 @@ import {defaultPalette} from "../theme-styles";
 test("makeThemeVars", () => {
   expect(Object.entries(makeThemeVars(getThemeColors(null, "light2", defaultPalette)))).toMatchInlineSnapshot(`
     [
+      [
+        "defaultCardTypeColorUppercaseHex",
+        "var(--fibery-color-defaultCardTypeColorUppercaseHex)",
+      ],
       [
         "primary",
         "var(--fibery-color-primary)",

package/src/design-system.test.ts

@@ -18,6 +18,7 @@ test("exports", () => {
       "getEnumTextColor",
       "getLinearGradient",
       "getObjectColorMemoized",
+      "alpha",
       "getOpacities",
       "getTextColor",
       "getThemeColors",

package/src/design-system.ts

@@ -1,4 +1,4 @@
-export {opacity, getOpacities} from "./design-system/alpha";
+export {opacity, getOpacities, alpha} from "./design-system/alpha";
 export {transition, easing, duration, tooltipDelay} from "./design-system/animation";
 export {cardTypeColors} from "./design-system/colors";
 export {getLinearGradient, getEnumTextColor, dropCursorColor, shadows} from "./design-system/colors-css";

package/src/dropdown-menu/index.tsx

@@ -178,6 +178,10 @@ export const Item = styled(DropdownMenuPrimitive.Item)`
   ${rowItemStyles}
 `;
 
+export const CheckboxItem = styled(DropdownMenuPrimitive.CheckboxItem)`
+  ${rowItemStyles}
+`;
+
 export const Separator = styled(DropdownMenuPrimitive.Separator)`
   ${{
     backgroundColor: themeVars.actionMenuSeparatorColor,

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

@@ -4,6 +4,7 @@ import {css, cx} from "@linaria/core";
 import {themeVars} from "../../design-system";
 import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
 import {useEmojiRenderConfig} from "./render-config-provider";
+import {traceError} from "@fibery/helpers/utils/trace";
 
 const emojiWrapperCss = css`
   color: ${themeVars.textColor};
@@ -62,6 +63,17 @@ export const Emoji = forwardRef<HTMLSpanElement, EmojiProps>(
     {className, emoji: idOrColons, size, version = 14, fallback = "hidden", skin, native, showTitle = false, ...rest},
     ref
   ) => {
+    // remove after investigation of FIBERY-UI-36GW
+    if (typeof idOrColons !== "string") {
+      traceError(
+        new Error(
+          `Assign to misha-erm. Emoji key must be a string, received: ${typeof idOrColons}. Stringified: ${JSON.stringify(
+            idOrColons
+          )}`
+        )
+      );
+    }
+
     const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
     const config = useEmojiRenderConfig();
     if (!emoji) {

package/src/emoji-picker/primitives/grid.tsx

@@ -160,36 +160,78 @@ export const EmojiPickerGrid = forwardRef<EmojiPickerGridHandle, EmojiPickerGrid
 
     const emojiPreview = useEmojiPreview();
 
-    useImperativeHandle(
-      ref,
-      () => {
-        return {
-          scrollToTop: () => {
-            virtuosoRef.current?.scrollToIndex(0);
-          },
-          navigate(direction) {
-            const virtuoso = virtuosoRef.current;
-            if (!virtuoso) {
-              return false;
+    useImperativeHandle(ref, () => {
+      return {
+        scrollToTop: () => {
+          virtuosoRef.current?.scrollToIndex(0);
+        },
+        navigate(direction) {
+          const virtuoso = virtuosoRef.current;
+          if (!virtuoso) {
+            return false;
+          }
+
+          // TODO: not optimal. Probably better to lift up in context and store focused index separately instead of calculating it every time
+          let colIdx = -1;
+          let rowIdx = emojiPreview
+            ? dataByRows.findIndex(
+                ({categoryId, emojis}) =>
+                  categoryId === emojiPreview.categoryId &&
+                  (colIdx = emojis.findIndex((id) => id === emojiPreview.emoji.id)) > -1
+              )
+            : -1;
+
+          switch (direction) {
+            case "down": {
+              rowIdx++;
+              const nextRow = dataByRows[rowIdx];
+              if (nextRow) {
+                colIdx = Math.min(Math.max(colIdx, 0), nextRow.emojis.length - 1);
+
+                virtuoso.scrollIntoView({
+                  index: rowIdx,
+                  done: () =>
+                    setEmojiPreview({
+                      categoryId: nextRow.categoryId,
+                      emoji: emojiData.get(nextRow.emojis[colIdx]) as EmojiItem,
+                    }),
+                });
+                return true;
+              }
+
+              break;
             }
+            case "up": {
+              rowIdx--;
+              const nextRow = dataByRows[rowIdx];
+              if (nextRow) {
+                colIdx = Math.min(Math.max(colIdx, 0), nextRow.emojis.length - 1);
+
+                virtuoso.scrollIntoView({
+                  index: rowIdx,
+                  calculateViewLocation: calculateViewLocation,
+                  done: () =>
+                    setEmojiPreview({
+                      categoryId: nextRow.categoryId,
+                      emoji: emojiData.get(nextRow.emojis[colIdx]) as EmojiItem,
+                    }),
+                });
+
+                return true;
+              }
 
-            // TODO: not optimal. Probably better to lift up in context and store focused index separately instead of calculating it every time
-            let colIdx = -1;
-            let rowIdx = emojiPreview
-              ? dataByRows.findIndex(
-                  ({categoryId, emojis}) =>
-                    categoryId === emojiPreview.categoryId &&
-                    (colIdx = emojis.findIndex((id) => id === emojiPreview.emoji.id)) > -1
-                )
-              : -1;
-
-            switch (direction) {
-              case "down": {
+              break;
+            }
+            case "right": {
+              let nextRow = dataByRows[rowIdx];
+              colIdx++;
+
+              if (!nextRow?.emojis[colIdx]) {
                 rowIdx++;
-                const nextRow = dataByRows[rowIdx];
-                if (nextRow) {
-                  colIdx = Math.min(Math.max(colIdx, 0), nextRow.emojis.length - 1);
+                nextRow = dataByRows[rowIdx];
 
+                if (nextRow) {
+                  colIdx = 0;
                   virtuoso.scrollIntoView({
                     index: rowIdx,
                     done: () =>
@@ -199,102 +241,56 @@ export const EmojiPickerGrid = forwardRef<EmojiPickerGridHandle, EmojiPickerGrid
                       }),
                   });
                   return true;
+                } else {
+                  return false;
                 }
-
-                break;
               }
-              case "up": {
+
+              setEmojiPreview({
+                categoryId: nextRow.categoryId,
+                emoji: emojiData.get(nextRow.emojis[colIdx]) as EmojiItem,
+              });
+              return true;
+            }
+            case "left": {
+              const row = dataByRows[rowIdx];
+              colIdx--;
+
+              if (!row?.emojis[colIdx]) {
                 rowIdx--;
                 const nextRow = dataByRows[rowIdx];
-                if (nextRow) {
-                  colIdx = Math.min(Math.max(colIdx, 0), nextRow.emojis.length - 1);
 
+                if (nextRow) {
+                  colIdx = nextRow.emojis.length - 1;
                   virtuoso.scrollIntoView({
                     index: rowIdx,
-                    calculateViewLocation: calculateViewLocation,
+                    calculateViewLocation,
                     done: () =>
                       setEmojiPreview({
                         categoryId: nextRow.categoryId,
                         emoji: emojiData.get(nextRow.emojis[colIdx]) as EmojiItem,
                       }),
                   });
-
                   return true;
+                } else {
+                  return false;
                 }
-
-                break;
               }
-              case "right": {
-                let nextRow = dataByRows[rowIdx];
-                colIdx++;
-
-                if (!nextRow?.emojis[colIdx]) {
-                  rowIdx++;
-                  nextRow = dataByRows[rowIdx];
-
-                  if (nextRow) {
-                    colIdx = 0;
-                    virtuoso.scrollIntoView({
-                      index: rowIdx,
-                      done: () =>
-                        setEmojiPreview({
-                          categoryId: nextRow.categoryId,
-                          emoji: emojiData.get(nextRow.emojis[colIdx]) as EmojiItem,
-                        }),
-                    });
-                    return true;
-                  } else {
-                    return false;
-                  }
-                }
 
-                setEmojiPreview({
-                  categoryId: nextRow.categoryId,
-                  emoji: emojiData.get(nextRow.emojis[colIdx]) as EmojiItem,
-                });
-                return true;
-              }
-              case "left": {
-                const row = dataByRows[rowIdx];
-                colIdx--;
-
-                if (!row?.emojis[colIdx]) {
-                  rowIdx--;
-                  const nextRow = dataByRows[rowIdx];
-
-                  if (nextRow) {
-                    colIdx = nextRow.emojis.length - 1;
-                    virtuoso.scrollIntoView({
-                      index: rowIdx,
-                      calculateViewLocation,
-                      done: () =>
-                        setEmojiPreview({
-                          categoryId: nextRow.categoryId,
-                          emoji: emojiData.get(nextRow.emojis[colIdx]) as EmojiItem,
-                        }),
-                    });
-                    return true;
-                  } else {
-                    return false;
-                  }
-                }
-
-                setEmojiPreview({
-                  categoryId: row.categoryId,
-                  emoji: emojiData.get(row.emojis[colIdx]) as EmojiItem,
-                });
-                return true;
-              }
-              default:
-                break;
+              setEmojiPreview({
+                categoryId: row.categoryId,
+                emoji: emojiData.get(row.emojis[colIdx]) as EmojiItem,
+              });
+              return true;
             }
-
-            return false;
-          },
-        };
-      },
-      [dataByRows, emojiData, emojiPreview, setEmojiPreview]
-    );
+            default:
+              break;
+          }
+
+          return false;
+        },
+      };
+    }, [dataByRows, emojiData, emojiPreview, setEmojiPreview]);
 
     return (
       <div

package/src/emoji.tsx

@@ -17,6 +17,7 @@ const StyledEmoji = styled.span<{size: number; inline: boolean}>`
   cursor: ${(props) => (props.onClick ? "pointer" : "inherit")};
 `;
 
+/** @deprecated Use Emoji from emoji-picker instead */
 export const Emoji = ({symbol, label = "", size = 1.4, inline = true, onClick}: Props): JSX.Element => {
   const ariaLabelProps = {
     ...(label && {label: label}),