@fibery/ui-kit 1.34.8 → 1.36.0

package/src/field-container.tsx

@@ -0,0 +1,213 @@
+import {css, cx} from "@linaria/core";
+import {styled} from "@linaria/react";
+import {FC, PropsWithChildren, ReactNode, useEffect, useRef, useState} from "react";
+import screenfull from "screenfull";
+import {border, space, textStyles, themeVars} from "./design-system";
+import {IconButton} from "./button/icon-button";
+import FocusModeIcon from "./icons/react/FocusMode";
+import FocusModeOffIcon from "./icons/react/FocusModeOff";
+import {Tooltip} from "./tooltip";
+import {CollapsibleSection} from "./collapsible-section";
+
+const labelStyle = css`
+  ${{...textStyles.heading6}};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+type Props = {
+  label?: string;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  onCollapseChange?: (collapsed: boolean) => void;
+  children: ReactNode;
+};
+
+export const FieldContainer = ({label, collapsible = false, collapsed, onCollapseChange, children}: Props) => {
+  return (
+    <CollapsibleSection
+      label={label ? <div className={labelStyle}>{label}</div> : undefined}
+      collapsible={collapsible}
+      collapsed={collapsed}
+      collapsedDefault={true}
+      onCollapsedChange={onCollapseChange}
+    >
+      <div
+        className={
+          label &&
+          css`
+            margin-top: ${space.s12}px;
+          `
+        }
+      >
+        {children}
+      </div>
+    </CollapsibleSection>
+  );
+};
+
+const fullscreenModeContainerStyle = css`
+  background: ${themeVars.panelBg};
+  padding: ${space.s8}px ${space.s6 + space.s12}px;
+`;
+
+const fullscreenModeContentStyle = css`
+  margin: auto;
+  max-width: 1400px;
+`;
+
+const fullscreenButton = css`
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 1;
+`;
+
+const fullscreenWithOptionsButton = css`
+  &.${fullscreenButton} {
+    right: 46px;
+  }
+`;
+
+export const FieldFullscreenSupportContainer: FC<
+  PropsWithChildren<{
+    label?: string;
+    description?: ReactNode;
+    withOptions?: boolean;
+    disabled?: boolean;
+    onToggleFullscreenMode: (isFullscreen: boolean) => void;
+    fullScreenButtonPosition?: {top: number; right: number};
+  }>
+> = ({
+  label,
+  onToggleFullscreenMode,
+  withOptions = false,
+  disabled = false,
+  children,
+  description,
+  fullScreenButtonPosition,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  function toggleFullscreen() {
+    if (!screenfull.element) {
+      screenfull.request(ref.current || undefined).catch((err) => {
+        alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+      });
+    } else {
+      screenfull.exit();
+    }
+  }
+
+  useEffect(() => {
+    const listener = () => {
+      setIsFullscreen(Boolean(screenfull.element));
+      onToggleFullscreenMode(Boolean(screenfull.element));
+    };
+    if (screenfull.isEnabled) {
+      screenfull.on("change", listener);
+    }
+    return () => {
+      if (screenfull.isEnabled) {
+        screenfull.off("change", listener);
+      }
+    };
+  }, [onToggleFullscreenMode]);
+
+  const fullscreen = (
+    <div className={cx(fullscreenButton, withOptions && fullscreenWithOptionsButton)} style={fullScreenButtonPosition}>
+      {disabled ? (
+        <IconButton
+          disabled={disabled}
+          className={isFullscreen ? "actions-visible" : "actions-hidden"}
+          size={"small"}
+          onClick={toggleFullscreen}
+        >
+          {isFullscreen ? <FocusModeOffIcon /> : <FocusModeIcon />}
+        </IconButton>
+      ) : (
+        <Tooltip side="bottom" title={isFullscreen ? "Exit full screen" : "Full screen"}>
+          <IconButton
+            className={isFullscreen ? "actions-visible" : "actions-hidden"}
+            size={"small"}
+            onClick={toggleFullscreen}
+          >
+            {isFullscreen ? <FocusModeOffIcon /> : <FocusModeIcon />}
+          </IconButton>
+        </Tooltip>
+      )}
+    </div>
+  );
+  return (
+    <div className={cx(isFullscreen && fullscreenModeContainerStyle)} ref={ref}>
+      <div
+        className={cx(
+          css`
+            position: relative;
+          `,
+          isFullscreen && fullscreenModeContentStyle
+        )}
+      >
+        <FieldContainer label={label}>
+          {description ?? null}
+          <div
+            className={css`
+              position: relative;
+            `}
+          >
+            {screenfull.isEnabled ? fullscreen : null}
+            {children}
+          </div>
+        </FieldContainer>
+      </div>
+    </div>
+  );
+};
+
+const fieldStackStyle = css`
+  ${{
+    display: "grid",
+    gridGap: space.s16,
+    padding: space.s20,
+    borderRadius: border.radius6,
+  }}
+`;
+
+export const FieldListContainerNoBg: FC<PropsWithChildren> = (props) => {
+  const {children} = props;
+  return <div className={fieldStackStyle}>{children}</div>;
+};
+
+const checkboxFieldContainerStyle = css`
+  ${{
+    display: "grid",
+    gridGap: space.s8,
+    gridTemplateColumns: "auto 1fr",
+    cursor: "pointer",
+  }}
+`;
+
+const checkboxFieldLabelStyle = css`
+  ${{
+    ...textStyles.heading6,
+    paddingTop: space.s2,
+  }}
+`;
+
+export const CheckboxFieldContainer = ({label, children}: {label?: string; children: ReactNode}) => {
+  return (
+    <div>
+      <label className={checkboxFieldContainerStyle}>
+        <div>{children}</div>
+        {label && <div className={checkboxFieldLabelStyle}>{label}</div>}
+      </label>
+    </div>
+  );
+};
+
+export const FieldCard = styled.div`
+  background-color: ${themeVars.actionMenuBg};
+  border-radius: ${border.radius6}px;
+`;

package/src/file-item.tsx

@@ -0,0 +1,151 @@
+import {css, cx} from "@linaria/core";
+import {PureComponent} from "react";
+import {ActionsMenu, ActionsMenuItem} from "./actions-menu";
+import {ActionsButtonCompact} from "./button/actions-button-compact";
+import {Item} from "./item";
+import {border, colors, fontWeight, space, textStyles, themeVars} from "./design-system";
+import {makeButtonColors} from "./button/make-button-colors";
+
+const fileItemStyle = css`
+  ${{
+    display: "block",
+    height: "100%",
+    backgroundColor: themeVars.entityCardBgColor,
+    backgroundSize: "cover",
+    textDecoration: "none",
+    borderRadius: border.radius6,
+    boxShadow: themeVars.entityCardShadow,
+    "&:focus": {textDecoration: "none"},
+  }}
+`;
+
+const overlayStyle = css`
+  ${{
+    width: "100%",
+    height: "100%",
+    padding: space.s12,
+    overflow: "hidden",
+    color: themeVars.textColor,
+    borderRadius: border.radius6,
+  }}
+`;
+
+const nameStyle = css`
+  ${{
+    wordBreak: "break-word",
+    textDecoration: "none",
+    height: textStyles.regular.fontSize * textStyles.regular.lineHeight * 5,
+    overflow: "hidden",
+    marginTop: space.s2,
+  }}
+`;
+
+const imageOverlayStyle = css`
+  ${{
+    background: "linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%)",
+    backgroundSize: "100% 200%",
+    backgroundPosition: "0 100%",
+    transition: "0.2s all ease-in-out",
+    color: themeVars.transparent,
+    borderRadius: border.radius6,
+    "&:hover": {
+      backgroundPosition: "0% 0%",
+      color: colors.inversedTextColor,
+    },
+  }}
+`;
+
+const fileOverlayStyle = css`
+  ${{
+    background: "transparent",
+  }}
+`;
+
+export type FileItemType = {
+  name: string;
+  url: string;
+  thumbnailUrl: string | null;
+  status?: string;
+};
+
+export type FileItemProps = {
+  data: FileItemType;
+  onRemoveClick: (x: FileItemType) => void;
+  disabled?: boolean;
+};
+
+export class FileItem extends PureComponent<FileItemProps> {
+  _renderStatus() {
+    const {status} = this.props.data;
+    if (status === "done" || status === "remove-error") {
+      return "";
+    }
+    let statusText = `status=${status}`;
+    if (status === "deleting") {
+      statusText = "Deleting…";
+    }
+    if (status === "uploading") {
+      statusText = "Uploading…";
+    }
+    return <b>{statusText}</b>;
+  }
+
+  render() {
+    const {name, url, thumbnailUrl, status} = this.props.data;
+
+    const isActive = status === "uploading" || status === "deleting";
+    const isBackgroundReady = thumbnailUrl && !isActive;
+
+    return (
+      <a
+        href={url}
+        rel="noopener noreferrer nofollow"
+        target="_blank"
+        style={isBackgroundReady ? {backgroundImage: `url(${thumbnailUrl})`} : {}}
+        className={cx(
+          fileItemStyle,
+          isActive &&
+            css`
+              ${{backgroundColor: themeVars.entityCardSelectedColor}}
+            `
+        )}
+      >
+        <div className={cx(overlayStyle, isBackgroundReady ? imageOverlayStyle : fileOverlayStyle)}>
+          <Item
+            multiline
+            textClassName={nameStyle}
+            rightContainer={
+              <ActionsMenu
+                trigger={
+                  <ActionsButtonCompact
+                    style={isBackgroundReady ? makeButtonColors(colors.inversedTextColor, "ghost") : undefined}
+                  />
+                }
+              >
+                <a download={name} href={url}>
+                  <ActionsMenuItem>Download</ActionsMenuItem>
+                </a>
+                <ActionsMenuItem
+                  onSelect={() => this.props.onRemoveClick(this.props.data)}
+                  dangerous
+                  disabled={this.props.disabled}
+                >
+                  Delete
+                </ActionsMenuItem>
+              </ActionsMenu>
+            }
+          >
+            <div
+              className={css`
+                ${fontWeight}
+              `}
+            >
+              {this._renderStatus()}
+            </div>
+            {name}
+          </Item>
+        </div>
+      </a>
+    );
+  }
+}

package/src/form-utils.ts

@@ -0,0 +1,7 @@
+import {KeyboardEvent} from "react";
+
+export const ignoreEnter = (e: KeyboardEvent) => {
+  if (e.keyCode === 13) {
+    e.preventDefault();
+  }
+};

package/src/format-date-from-now.ts

@@ -0,0 +1,33 @@
+import moment from "moment";
+
+const currentLocale = moment.locale();
+// both locale and defineLocale update the global locale
+moment.locale("en-for-comments", {
+  relativeTime: {
+    future: "in %s",
+    past: "%s ago",
+    s: "seconds",
+    ss: "%ss",
+    m: "a minute",
+    mm: "%dm",
+    h: "an hour",
+    hh: "%dh",
+    d: "a day",
+    dd: "%dd",
+    M: "a month",
+    MM: "%dM",
+    y: "a year",
+    yy: "%dY",
+  },
+});
+// so revert back to the original one
+moment.locale(currentLocale);
+
+export function formatDateFromNow(date?: string, options: {format?: string} = {}) {
+  const momentDate = moment(date);
+  momentDate.locale("en-for-comments");
+  return {
+    formatted: momentDate.format(options.format ?? "MMMM Do YYYY, h:mm:ss a"),
+    relative: momentDate.fromNow(),
+  };
+}

package/src/full-fibery-logo.tsx

@@ -0,0 +1,26 @@
+import {themeVars} from "./design-system";
+
+export function FullFiberyLogo({
+  color = themeVars.colorBgButtonSolidNeutralDefault,
+  height = 24,
+}: {
+  color?: string;
+  height?: number;
+}) {
+  return (
+    <svg height={height} fill={color} viewBox="0 0 84 24" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4.47617 19.175C4.0702 19.174 3.67216 19.0613 3.32468 18.849C2.9772 18.6368 2.69336 18.3329 2.50359 17.97C2.31381 17.6072 2.22523 17.1989 2.24734 16.789C2.26945 16.3791 2.40141 15.983 2.6291 15.6432L10.9365 3.31319C11.2812 2.84489 11.7915 2.52931 12.3608 2.43234C12.9301 2.33537 13.5145 2.4645 13.9919 2.79277C14.4693 3.12104 14.8029 3.62309 14.923 4.19411C15.0431 4.76512 14.9405 5.36099 14.6365 5.85731L6.32915 18.1873C6.12351 18.4924 5.84711 18.7419 5.5241 18.9141C5.20109 19.0863 4.84131 19.1759 4.47617 19.175Z" />
+      <path d="M8.95854 4.71531L7.88341 3.54367C7.47931 3.10291 6.91859 2.84252 6.32462 2.81978C5.73064 2.79705 5.15207 3.01384 4.71617 3.42245C4.28027 3.83107 4.02275 4.39804 4.00027 4.99864C3.97778 5.59925 4.19218 6.18428 4.59628 6.62505L5.15561 7.23432L7.37468 7.06611L8.95854 4.71531Z" />
+      <path d="M14.6436 7.38037L17.0851 7.1953C17.2092 7.1859 17.3336 7.18701 17.4569 7.19845C17.5856 7.2099 17.7138 7.23266 17.8403 7.26693C18.414 7.42241 18.9031 7.80198 19.2001 8.32213C19.497 8.84228 19.5775 9.46039 19.4237 10.0405C19.2699 10.6206 18.8946 11.1152 18.3801 11.4155L7.74384 17.6212L14.6436 7.38037Z" />
+      <path d="M10.589 21.6009C10.1096 21.6017 9.64263 21.447 9.25663 21.1596C8.87063 20.8722 8.58595 20.4672 8.44442 20.0041L7.98002 18.4798L10.4175 17.0576L12.4965 17.8837L12.7365 18.6692C12.9112 19.2431 12.8535 19.8637 12.576 20.3946C12.2985 20.9255 11.8239 21.3233 11.2565 21.5006C11.0401 21.5674 10.8152 21.6012 10.589 21.6009Z" />
+      <path d="M16.3317 13.6071L11.3629 16.5061L15.4549 18.132C15.716 18.2335 15.9937 18.2843 16.2734 18.2816V18.2801C16.7948 18.2798 17.2998 18.0956 17.7012 17.7591C18.1026 17.4227 18.3754 16.9551 18.4724 16.437C18.5694 15.919 18.4845 15.383 18.2325 14.9214C17.9805 14.4599 17.5771 14.1017 17.0918 13.9087L16.3317 13.6071Z" />
+      <path d="M6.76034 7.97792L3.53552 12.7643L2.71111 12.8268C2.65487 12.8313 2.59863 12.8328 2.54239 12.8328C1.96233 12.8336 1.40459 12.6067 0.986621 12.2C0.568653 11.7933 0.32307 11.2385 0.301587 10.6524C0.280103 10.0662 0.484396 9.49453 0.871446 9.05766C1.2585 8.62078 1.7981 8.35283 2.37663 8.31022L6.76034 7.97792Z" />
+      <path d="M26.699 18.785V4.85854H35.5134V6.95034H28.8789V10.757H34.6604V12.83H28.8789V18.785H26.699Z" />
+      <path d="M38.471 7.28955C37.6559 7.28955 37.0304 6.68651 37.0304 5.87617C37.0304 5.08468 37.6559 4.50049 38.471 4.50049C39.2482 4.50049 39.8548 5.08468 39.8548 5.87617C39.8548 6.68651 39.2482 7.28955 38.471 7.28955ZM39.4757 18.785H37.3906V8.62754H39.4757V18.785Z" />
+      <path d="M47.7011 8.38255C50.6203 8.38255 52.8002 10.7382 52.8002 13.7157C52.8002 16.6932 50.6203 19.03 47.6822 19.03C46.1657 19.03 45.0284 18.3327 44.2322 17.3339V18.785H42.1661V4.50049H44.2512V10.0974C45.0663 9.07982 46.1847 8.38255 47.7011 8.38255ZM47.4168 17.0889C49.3882 17.0889 50.6582 15.5625 50.6582 13.6968C50.6582 11.85 49.3882 10.3047 47.4168 10.3047C45.4264 10.3047 44.1564 11.8689 44.1564 13.6968C44.1564 15.5625 45.4264 17.0889 47.4168 17.0889Z" />
+      <path d="M64.5129 13.5084C64.5129 13.923 64.475 14.2245 64.4371 14.5072H56.4567C56.7411 15.9582 57.7457 17.1643 59.8498 17.1643C61.025 17.1643 62.4088 16.712 63.3187 16.0713L64.1906 17.5978C63.2618 18.3139 61.6127 19.0111 59.774 19.0111C55.926 19.0111 54.2958 16.354 54.2958 13.678C54.2958 10.6628 56.3809 8.38255 59.5086 8.38255C62.3709 8.38255 64.5129 10.2859 64.5129 13.5084ZM59.5086 10.1728C57.9163 10.1728 56.76 11.247 56.4567 12.8111H62.4088C62.2382 11.1905 61.044 10.1728 59.5086 10.1728Z" />
+      <path d="M66.5641 18.785V8.62754H68.5544V10.0786C69.18 8.91021 70.1467 8.36371 71.4547 8.36371C71.8148 8.36371 72.2318 8.4014 72.6678 8.53331L72.4783 10.5497C72.0992 10.4178 71.72 10.3613 71.3599 10.3613C69.8813 10.3613 68.6492 11.3224 68.6492 13.5838V18.785H66.5641Z" />
+      <path d="M81.4053 8.62754H83.699L79.4719 19.7084C78.562 22.1017 77.3867 23.1005 75.6618 23.1005C74.9604 23.1005 74.3538 22.9497 73.9179 22.6671L74.2211 20.8768C74.6003 21.0464 75.0552 21.1971 75.4912 21.1971C76.3063 21.1971 76.9508 20.726 77.5005 19.4634L77.8227 18.7096L73.3871 8.62754H75.7945L78.7895 15.9582L81.4053 8.62754Z" />
+    </svg>
+  );
+}

package/src/get-trigger-node-popup-container.ts

@@ -0,0 +1,7 @@
+import {assert} from "@fibery/helpers/utils/trace";
+
+export const getTriggerNodePopupContainer = (triggerNode: HTMLElement) => {
+  // TODO reproduce or consider falling back to document.body in case trigger is unmounted
+  assert(triggerNode, "triggerNode");
+  return triggerNode;
+};

package/src/guide-link.tsx

@@ -0,0 +1,24 @@
+import {Button} from "./button/button";
+import {ButtonSize} from "./button/base-button";
+import HintIcon from "./icons/react/Hint";
+import {IconButton} from "./button/icon-button";
+
+type GuideLinkProps = React.PropsWithChildren<{
+  href: string;
+  size?: ButtonSize;
+}>;
+export const GuideLink: React.FC<GuideLinkProps> = ({href, children, size = "small"}) => {
+  return (
+    <a href={href} rel="noreferrer" target={"_blank"}>
+      {children ? (
+        <Button iconStart={<HintIcon />} variant="ghost" color="neutral" size={size}>
+          {children}
+        </Button>
+      ) : (
+        <IconButton size={size}>
+          <HintIcon />
+        </IconButton>
+      )}
+    </a>
+  );
+};

package/src/header-layout.tsx

@@ -0,0 +1,33 @@
+import {css} from "@linaria/core";
+import {ReactNode} from "react";
+import {space, textStyles, themeVars} from "./design-system";
+
+const containerStyle = css`
+  padding: ${space.s8}px;
+  border-bottom: 1px solid ${themeVars.separatorColor};
+`;
+
+const topGridCompactStyle = css`
+  ${textStyles.regular}
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export function HeaderLayout({actions, children}: {actions?: ReactNode; children: ReactNode}) {
+  return (
+    <div className={containerStyle}>
+      <div className={topGridCompactStyle}>
+        <div
+          className={css`
+            ${textStyles.heading4}
+            position: relative;
+          `}
+        >
+          {children}
+        </div>
+        <div>{actions}</div>
+      </div>
+    </div>
+  );
+}

package/src/hint.tsx

@@ -0,0 +1,47 @@
+import {space, themeVars} from "./design-system";
+import {css} from "@linaria/core";
+import {FC, ReactNode} from "react";
+import {Item} from "./item";
+import {Tooltip, TooltipProps} from "./tooltip";
+import HintIcon from "./icons/react/Hint";
+
+const hintContainerStyle = css`
+  margin-left: ${space.s2}px;
+`;
+
+interface HintProps {
+  text?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  multiline?: boolean;
+  tooltipSide?: TooltipProps["side"];
+  tooltipAlign?: TooltipProps["align"];
+  children?: ReactNode;
+}
+
+export const Hint: FC<HintProps> = ({
+  children,
+  text,
+  title,
+  description,
+  multiline,
+  tooltipSide = "top",
+  tooltipAlign = "center",
+}) => {
+  return (
+    <Item
+      inline
+      multiline={multiline}
+      containerClassName={hintContainerStyle}
+      rightContainer={
+        <Tooltip title={text || title} description={description} side={tooltipSide} align={tooltipAlign}>
+          <div>
+            <HintIcon viewBox={"0 0 20 20"} color={themeVars.iconColor} containerSize={20} iconSize={18} />
+          </div>
+        </Tooltip>
+      }
+    >
+      {children}
+    </Item>
+  );
+};

package/src/hoverable-via-display.tsx

@@ -0,0 +1,29 @@
+import cn from "classnames";
+import {css} from "@linaria/core";
+import {FC, ReactNode} from "react";
+
+const hoverableStyle = css`
+  display: none;
+`;
+
+export const hoverableParentStyle = {
+  "&:hover .hoverable": {
+    display: "block",
+  },
+  "&:hover .hidden-on-hover": {
+    display: "none",
+  },
+};
+
+interface HoverableProps {
+  active?: boolean;
+  children?: ReactNode;
+}
+
+export const Hoverable: FC<HoverableProps> = ({children, active}) => (
+  <div className={cn("hoverable", !active && hoverableStyle)}>{children}</div>
+);
+
+export const HiddenOnHover: FC<{children?: ReactNode}> = ({children}) => (
+  <div className="hidden-on-hover">{children}</div>
+);

package/src/hoverable.tsx

@@ -0,0 +1,53 @@
+import {css} from "@linaria/core";
+import cx from "classnames";
+import {FC, ReactNode} from "react";
+
+const hoverableClassName = css`
+  ${{
+    opacity: 0,
+    width: 0,
+    overflow: "hidden",
+    pointerEvents: "none",
+  }}
+`;
+
+export const hoverableHiddenStyle = {
+  opacity: 0,
+  width: 0,
+  overflow: "hidden",
+  pointerEvents: "none",
+};
+
+export const hoverableParentStyle = {
+  "&:hover .hoverable": {
+    opacity: 1,
+    width: "auto",
+    overflow: "visible",
+    pointerEvents: "auto",
+  },
+  "&:hover .hidden-on-hover": hoverableHiddenStyle,
+  "&:hover .invisible-on-hover": {
+    visibility: "hidden",
+  },
+};
+
+export const forceHiddenParentStyle = {
+  ".hidden-on-hover": hoverableHiddenStyle,
+};
+
+interface HoverableProps {
+  active?: boolean;
+  children?: ReactNode;
+}
+
+export const Hoverable: FC<HoverableProps> = ({children, active = false}) => (
+  <div className={cx("hoverable", {[hoverableClassName]: !active})}>{children}</div>
+);
+
+export const HiddenOnHover: FC<{children?: ReactNode}> = ({children}) => (
+  <div className="hidden-on-hover">{children}</div>
+);
+
+export const InvisibleOnHover: FC<{children?: ReactNode}> = ({children}) => (
+  <div className="invisible-on-hover">{children}</div>
+);