@fibery/ui-kit 1.36.2 → 1.38.0

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

@@ -1,22 +1,18 @@
 import {css} from "@linaria/core";
 import {compact} from "lodash";
-import {AntTabs} from "../antd/Tabs";
 import {Button} from "../button/button";
-import {space, textStyles} from "../design-system";
+import {colors, space} from "../design-system";
 import EmojiDelete from "../icons/react/EmojiDelete";
 import {$TSFixMe} from "../tsfixme";
 import {AppIconPicker, AppIconPickerProps} from "./app-icon-picker";
 import {EmojiPicker, EmojiPickerProps} from "./emoji-picker";
+import {TabNavItem, TabNavLink, TabNavList, TabNavRoot} from "../tab-nav/tab-nav";
+import {useState} from "react";
 
-const TabHeader: React.FC<React.PropsWithChildren> = ({children}) => (
-  <div
-    className={css`
-      ${textStyles.heading5}
-    `}
-  >
-    {children}
-  </div>
-);
+const tabNavRootStyle = css`
+  padding: ${space.s4}px ${space.s12}px 0 ${space.s12}px;
+  box-shadow: inset 0 -1px ${colors.shades.opacity5};
+`;
 
 type TabKey = "icons" | "emojis";
 
@@ -49,65 +45,84 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
   color,
   getHoverColor,
 }) => {
+  const items = compact([
+    onEmojiSelect && {
+      key: "emojis" as const,
+      label: "Emojis",
+      children: (
+        <>
+          <EmojiPicker
+            emojiSize={emojiSize}
+            color={color}
+            onColorSelect={showColorPickerOnTabs.includes("emojis") ? onColorSelect : undefined}
+            onCustomCategorySettings={onCustomEmojisSettings}
+            onAddCustomEmoji={onCreateClick}
+            getHoverColor={getHoverColor}
+            onSelect={onEmojiSelect}
+            showSkinTones
+          />
+        </>
+      ),
+    },
+    onIconSelect && {
+      key: "icons" as const,
+      label: "Icons",
+      children: (
+        <AppIconPicker
+          emojiSize={emojiSize}
+          color={color}
+          onColorSelect={showColorPickerOnTabs.includes("icons") ? onColorSelect : undefined}
+          getHoverColor={getHoverColor}
+          onSelect={onIconSelect}
+        />
+      ),
+    },
+  ]);
+
+  const firstTab = items[0];
+  const [activeTab, setActiveTab] = useState(defaultTab || firstTab?.key);
+
   return (
-    <AntTabs
-      wrapClassName={css`
+    <div
+      className={css`
+        display: flex;
+        flex-direction: column;
         height: 100%;
-        & .ant-tabs,
-        & .ant-tabs-content,
-        & .ant-tabs-tabpane,
-        & .ant-tabs-content-holder {
-          height: 100%;
-        }
       `}
-      animated={false}
-      destroyInactiveTabPane
-      defaultActiveKey={defaultTab}
-      items={compact([
-        onEmojiSelect && {
-          key: "emojis",
-          label: <TabHeader>Emojis</TabHeader>,
-          children: (
-            <>
-              <EmojiPicker
-                emojiSize={emojiSize}
-                color={color}
-                onColorSelect={showColorPickerOnTabs.includes("emojis") ? onColorSelect : undefined}
-                onCustomCategorySettings={onCustomEmojisSettings}
-                onAddCustomEmoji={onCreateClick}
-                getHoverColor={getHoverColor}
-                onSelect={onEmojiSelect}
-                showSkinTones
-              />
-            </>
-          ),
-        },
-        onIconSelect && {
-          key: "icons",
-          label: <TabHeader>Icons</TabHeader>,
-          children: (
-            <AppIconPicker
-              color={color}
-              onColorSelect={showColorPickerOnTabs.includes("icons") ? onColorSelect : undefined}
-              getHoverColor={getHoverColor}
-              onSelect={onIconSelect}
-            />
-          ),
-        },
-      ])}
-      tabBarExtraContent={
-        onReset ? (
-          <div
-            className={css`
-              padding-right: ${space.s12}px;
-            `}
-          >
-            <Button variant="outline" color="neutral" iconStart={<EmojiDelete />} size={"small"} onClick={onReset}>
-              {resetLabel}
-            </Button>
-          </div>
-        ) : null
-      }
-    />
+    >
+      <TabNavRoot className={tabNavRootStyle}>
+        <div
+          className={css`
+            display: flex;
+            justify-content: space-between;
+          `}
+        >
+          <TabNavList>
+            {items.map((item) => {
+              return (
+                <TabNavLink key={item.key} active={item.key === activeTab} onSelect={() => setActiveTab(item.key)}>
+                  {item.label}
+                </TabNavLink>
+              );
+            })}
+          </TabNavList>
+          {onReset && (
+            <TabNavItem>
+              <Button
+                size="small"
+                variant="ghost"
+                color="neutral"
+                iconStart={<EmojiDelete />}
+                onClick={onReset}
+                supportMobile
+              >
+                {resetLabel}
+              </Button>
+            </TabNavItem>
+          )}
+        </div>
+      </TabNavRoot>
+      {items.find((item) => item.key === activeTab)?.children}
+    </div>
   );
 };

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

@@ -5,7 +5,6 @@ const footerCss = css`
   position: relative;
   border-top: 1px solid var(--fibery-color-separatorColor);
   padding: ${space.s6}px ${space.s12}px;
-  height: 40px;
 
   display: flex;
   align-items: center;

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

@@ -6,6 +6,7 @@ const pickerHeader = css`
   padding: ${space.s12}px ${contentHorizontalPadding}px ${space.s6}px ${contentHorizontalPadding}px;
   position: relative;
 `;
+
 export const EmojiPickerHeader: React.FC<React.PropsWithChildren> = ({children}) => {
   return <div className={pickerHeader}>{children}</div>;
 };

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

@@ -4,7 +4,6 @@ import {css, cx} from "@linaria/core";
 import {startTransition, useId, useRef} from "react";
 import {IconButton} from "../../button/icon-button";
 import {border, space, textStyles, themeVars} from "../../design-system";
-import Close from "../../icons/react/Close";
 import Search from "../../icons/react/Search";
 import {useEmojiDataStore} from "../stores/emoji-data-store";
 import type {EmojiPickerGridHandle} from "./grid";
@@ -12,6 +11,7 @@ import {useEmojiPreview, useSetEmojiPreview} from "./preview-provider";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useFoundEmojis, useSetFoundEmojis} from "./search-provider";
 import {useEmojiSkin} from "./skin-provider";
+import ClearInputFilled from "../../icons/react/ClearInputFilled";
 
 const searchCss = css`
   ${textStyles.regular}
@@ -24,8 +24,8 @@ const searchCss = css`
 
   display: flex;
   align-items: center;
-  padding-left: ${space.s8}px;
-  gap: ${space.s2}px;
+  padding: 0 ${space.s4}px;
+  gap: ${space.s4}px;
 
   /* For screenreaders only, via https://stackoverflow.com/a/19758620 */
   & .sr-only {
@@ -64,7 +64,6 @@ const searchIconCss = css`
 const extraActionSlotCss = css`
   background-color: var(--fibery-emoji-hover-color, ${themeVars.inputCopyBgColor});
   border-radius: ${border.radius5}px;
-  margin-right: ${space.s4}px;
 `;
 
 export type EmojiPickerSearchProps = {
@@ -157,15 +156,9 @@ export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({
 
   return (
     <section className={cx(searchCss, className)} aria-label={i18n.search}>
-      {foundEmojis ? (
-        <IconButton size="small" onClick={clearSearch}>
-          <Close />
-        </IconButton>
-      ) : (
-        <span className={searchIconCss}>
-          <Search iconSize={16} />
-        </span>
-      )}
+      <span className={searchIconCss}>
+        <Search iconSize={16} />
+      </span>
 
       <input
         ref={setRefs}
@@ -189,6 +182,12 @@ export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({
         {i18n.search}
       </label>
 
+      {foundEmojis && (
+        <IconButton size="small" onClick={clearSearch}>
+          <ClearInputFilled />
+        </IconButton>
+      )}
+
       {extraAction ? <div className={extraActionSlotCss}>{extraAction}</div> : null}
     </section>
   );

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

@@ -82,6 +82,7 @@ export const EmojiPickerSkinTone: React.FC<EmojiPickerSkinToneProps> = ({classNa
             }
             setOpened(!opened);
           }}
+          supportMobile
           className={css`
             &:hover:not(:disabled),
             &:focus-visible {

package/src/emoji-picker/use-responsive-emoji-size.ts

@@ -0,0 +1,11 @@
+import {useMemo} from "react";
+import {measureScrollbar} from "@fibery/helpers/utils/measure-scrollbar";
+import {useIsPhone} from "../use-is-phone";
+
+export const useResponsiveEmojiSize = () => {
+  const isPhone = useIsPhone();
+  return useMemo(
+    () => (isPhone ? Math.min(Math.floor((document.body.clientWidth - 24 - measureScrollbar() - 9 * 12) / 9), 40) : 20),
+    [isPhone]
+  );
+};

package/src/emoji-picker/utils/emoji-set.ts

@@ -1,5 +1,6 @@
 import {SpritesheetSet} from "@fibery/emoji-data";
+import {isAndroid} from "../../is-android";
 
 export const isApple = () => /Mac|iPhone|iPad/.test(navigator.userAgent);
 
-export const getEmojiSet = (): SpritesheetSet => (isApple() ? "apple" : "twitter");
+export const getEmojiSet = (): SpritesheetSet => (isApple() ? "apple" : isAndroid() ? "google" : "twitter");

package/src/empty-state/empty-state.tsx

@@ -1,5 +1,6 @@
 import {css, cx} from "@linaria/core";
 import {fontWeight, space, textStyles, themeVars} from "../design-system";
+import {mobileRootSelector} from "../mobile-styles";
 
 const emptyStateCss = css`
   display: flex;
@@ -31,7 +32,12 @@ const headingCss = css`
   font-weight: ${fontWeight.semibold};
   color: ${themeVars.textColor};
   margin: 0;
+
+  ${mobileRootSelector} & {
+    ${textStyles.heading4}
+  }
 `;
+
 const descriptionCss = css`
   ${textStyles.regular};
   color: ${themeVars.accentTextColor};

package/src/error-alert/error-alert.tsx

@@ -1,16 +1,16 @@
 import {css} from "@linaria/core";
 import {IconButton} from "../button/icon-button";
-import {border, layout, space, textStyles, themeVars} from "../design-system";
+import {border, fontWeight, layout, space, textStyles, themeVars, typeSizes} from "../design-system";
 import CloseIcon from "../icons/react/Close";
-import WarningIcon from "../icons/react/WarningTriangle";
+import WarningFilledIcon from "../icons/react/WarningTriangleFilled";
 import {useTheme} from "../theme-provider";
 import {ErrorAlertActionElement} from "./error-alert-action";
 
 const errorAlert = css`
   background-color: ${themeVars.errorBgColor};
-  padding: ${space.s8}px ${space.s8}px ${space.s8}px ${space.s12}px;
+  padding: ${space.s12}px;
   min-height: ${layout.itemHeight}px;
-  border-radius: ${border.radius6}px;
+  border-radius: ${border.radius8}px;
   display: flex;
   gap: ${space.s8}px;
   align-items: center;
@@ -22,14 +22,26 @@ const infoStyle = css`
 
   display: flex;
   flex-direction: column;
+  gap: ${space.s4}px;
+  padding: 0 ${space.s4}px;
+  justify-content: center;
+  align-items: flex-start;
 `;
 
 const messageStyle = css`
-  ${textStyles.regular};
+  ${{
+    ...textStyles.regular,
+    fontSize: typeSizes[5],
+    fontWeight: fontWeight.medium,
+    color: themeVars.errorTextColor,
+  }};
 `;
 
 const descriptionStyle = css`
-  ${textStyles.small};
+  ${{
+    ...textStyles.small,
+    color: themeVars.errorTextColor,
+  }};
 `;
 
 export type ErrorAlertProps = {
@@ -43,7 +55,7 @@ export const ErrorAlert: React.FC<ErrorAlertProps> = ({message, description, act
 
   return (
     <div className={errorAlert}>
-      <WarningIcon color={theme.errorButtonColor} iconSize={16} containerSize={16} />
+      <WarningFilledIcon color={theme.errorButtonColor} iconSize={16} containerSize={16} />
       <div className={infoStyle}>
         <span className={messageStyle}>{message}</span>
         {description ? <span className={descriptionStyle}>{description}</span> : null}

package/src/field-app-icon.tsx

@@ -0,0 +1,29 @@
+import {AppIconWithFallback} from "./app-icon-with-fallback";
+
+const appIconPrefix = ":app-icon/";
+
+export const makeFieldAppIcon = (iconName: string) => appIconPrefix + iconName;
+
+export const isAppIcon = (name: string) => name.startsWith(appIconPrefix);
+export const getAppIconName = (appIconName: string) => appIconName.slice(appIconPrefix.length);
+
+export function FieldAppIcon({
+  iconName,
+  color,
+  containerSize,
+  iconSize,
+}: {
+  iconName: string;
+  color?: string;
+  containerSize?: number;
+  iconSize?: number;
+}) {
+  return (
+    <AppIconWithFallback
+      name={getAppIconName(iconName)}
+      color={color}
+      containerSize={containerSize}
+      iconSize={iconSize}
+    />
+  );
+}

package/src/field-container.tsx

@@ -21,10 +21,11 @@ type Props = {
   collapsible?: boolean;
   collapsed?: boolean;
   onCollapseChange?: (collapsed: boolean) => void;
+  badge?: ReactNode;
   children: ReactNode;
 };
 
-export const FieldContainer = ({label, collapsible = false, collapsed, onCollapseChange, children}: Props) => {
+export const FieldContainer = ({label, collapsible = false, collapsed, onCollapseChange, badge, children}: Props) => {
   return (
     <CollapsibleSection
       label={label ? <div className={labelStyle}>{label}</div> : undefined}
@@ -32,6 +33,7 @@ export const FieldContainer = ({label, collapsible = false, collapsed, onCollaps
       collapsed={collapsed}
       collapsedDefault={true}
       onCollapsedChange={onCollapseChange}
+      badge={badge}
     >
       <div
         className={
@@ -192,7 +194,7 @@ const checkboxFieldContainerStyle = css`
 const checkboxFieldLabelStyle = css`
   ${{
     ...textStyles.heading6,
-    paddingTop: space.s2,
+    paddingTop: space.s1,
   }}
 `;
 

package/src/field-icon.tsx

@@ -0,0 +1,29 @@
+import {FieldAppIcon, isAppIcon} from "./field-app-icon";
+import {iconSize as defaultIconSize} from "./design-system";
+import {lazy, Suspense} from "react";
+
+const FieldTypeIconLazy = lazy(() => import("./field-type-icon"));
+
+export function FieldIcon({
+  iconName,
+  color,
+  containerSize,
+  iconSize = defaultIconSize,
+}: {
+  iconName?: string;
+  color?: string;
+  containerSize?: number;
+  iconSize?: number;
+}): JSX.Element {
+  if (iconName && isAppIcon(iconName)) {
+    return <FieldAppIcon iconName={iconName} color={color} containerSize={containerSize} iconSize={iconSize} />;
+  }
+
+  const defaultSize = containerSize || iconSize;
+
+  return (
+    <Suspense fallback={<div style={{width: defaultSize, height: defaultSize}} />}>
+      <FieldTypeIconLazy iconName={iconName} color={color} containerSize={containerSize} iconSize={iconSize} />
+    </Suspense>
+  );
+}

package/src/field-type-icon.tsx

@@ -0,0 +1,82 @@
+import AppIcon from "./icons/react/App";
+import TypeText from "./icons/react/TypeText";
+import TypeRichText from "./icons/react/TypeRichText";
+import TypeNumber from "./icons/react/TypeNumber";
+import TypeSingleSelect from "./icons/react/TypeSingleSelect";
+import TypeMultiSelect from "./icons/react/TypeMultiSelect";
+import TypeDate from "./icons/react/TypeDate";
+import TypeCheckbox from "./icons/react/TypeCheckbox";
+import TypeUrl from "./icons/react/TypeUrl";
+import TypeEmail from "./icons/react/TypeEmail";
+import TypeLocation from "./icons/react/TypeLocation";
+import TypeRelation from "./icons/react/TypeRelation";
+import TypeLookup from "./icons/react/TypeLookup";
+import TypeFormula from "./icons/react/TypeFormula";
+import ExtensionReferences from "./icons/react/ExtensionReferences";
+import ExtensionAssignments from "./icons/react/ExtensionAssignments";
+import ExtensionAvatar from "./icons/react/ExtensionAvatar";
+import ExtensionComments from "./icons/react/ExtensionComments";
+import ViewDocument from "./icons/react/ViewDocument";
+import ExtensionFiles from "./icons/react/ExtensionFiles";
+import ViewCanvas from "./icons/react/ViewCanvas";
+import ExtensionWorkflow from "./icons/react/ExtensionWorkflow";
+import TypeMoney from "./icons/react/TypeMoney";
+import TypePercent from "./icons/react/TypePercent";
+import TypeButton from "./icons/react/TypeButton";
+import Delete from "./icons/react/Delete";
+import TypePhone from "./icons/react/TypePhone";
+import TypeEmoji from "./icons/react/TypeEmoji";
+import UserRole from "./icons/react/UserRole";
+import DatabaseStroke from "./icons/react/DatabaseStroke";
+import {IconBaseProps} from "./icons/types";
+
+const iconNameToComponent: Record<string, React.FC<IconBaseProps>> = {
+  ":icon/type/database": DatabaseStroke,
+  ":icon/type/text": TypeText,
+  ":icon/type/button": TypeButton,
+  ":icon/type/rich-text": TypeRichText,
+  ":icon/type/number": TypeNumber,
+  ":icon/type/single-select": TypeSingleSelect,
+  ":icon/type/multi-select": TypeMultiSelect,
+  ":icon/type/date": TypeDate,
+  ":icon/type/checkbox": TypeCheckbox,
+  ":icon/type/url": TypeUrl,
+  ":icon/type/email": TypeEmail,
+  ":icon/type/phone": TypePhone,
+  ":icon/type/emoji": TypeEmoji,
+  ":icon/type/location": TypeLocation,
+  ":icon/type/relation": TypeRelation,
+  ":icon/type/lookup": TypeLookup,
+  ":icon/type/formula": TypeFormula,
+  ":icon/extension/references": ExtensionReferences,
+  ":icon/extension/assignments": ExtensionAssignments,
+  ":icon/extension/avatar": ExtensionAvatar,
+  ":icon/extension/icon": TypeEmoji,
+  ":icon/extension/comments": ExtensionComments,
+  ":icon/view-document": ViewDocument,
+  ":icon/extension/files": ExtensionFiles,
+  ":icon/view-canvas": ViewCanvas,
+  ":icon/extension/workflow": ExtensionWorkflow,
+  ":icon/type/money": TypeMoney,
+  ":icon/type/percent": TypePercent,
+  ":icon/type/deleted-field": Delete,
+  ":icon/type/user-role": UserRole,
+};
+
+function getFieldIconComponent(iconName?: string) {
+  return (iconName && iconNameToComponent[iconName]) || AppIcon;
+}
+
+type Props = {
+  iconName?: string;
+  color?: string;
+  containerSize?: number;
+  iconSize?: number;
+};
+
+function FieldTypeIcon({iconName, color, containerSize, iconSize}: Props): JSX.Element {
+  const Icon = getFieldIconComponent(iconName);
+  return <Icon color={color} containerSize={containerSize} iconSize={iconSize} />;
+}
+
+export default FieldTypeIcon;