@fibery/ui-kit 1.35.0 → 1.36.0

package/src/command-menu/index.tsx

@@ -0,0 +1,176 @@
+import {CommandInput, CommandItem, CommandList, CommandGroup, CommandRoot, CommandEmpty, CommandSeparator} from "cmdk";
+import {border, layout, space, textStyles, themeVars} from "../design-system";
+import {styled} from "@linaria/react";
+import {forwardRef, useRef, useState} from "react";
+import Search from "../icons/react/Search";
+import {css, cx} from "@linaria/core";
+import ClearInputFilled from "../icons/react/ClearInputFilled";
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
+import {useControllableState} from "@fibery/react/src/use-controllable-state";
+
+export const CommandMenuRoot = styled(CommandRoot)`
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: ${border.radius8}px;
+  background-color: ${themeVars.colorBgActionsMenu};
+`;
+
+const inputContainerCss = css`
+  display: flex;
+  padding: ${space.s8}px ${space.s12}px;
+  align-items: center;
+  border-bottom: 1px solid ${themeVars.separatorColor};
+
+  & input {
+    min-width: 120px;
+    width: 100%;
+    color: ${themeVars.textColor};
+    background-color: ${themeVars.transparent};
+    margin-left: ${space.s8}px;
+    font-size: 13px;
+    border: none;
+    outline: none;
+    resize: none;
+  }
+
+  & input::placeholder {
+    color: ${themeVars.accentTextColor};
+  }
+`;
+
+export const CommandMenuInput = forwardRef<
+  React.ElementRef<typeof CommandInput>,
+  React.ComponentPropsWithoutRef<typeof CommandInput>
+>(function CommandMenuInput(props, ref) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const composedRef = useComposedRefs(ref, inputRef);
+  const [value, onValueChange] = useControllableState({
+    value: props.value,
+    defaultValue: "",
+    onChange: props.onValueChange,
+  });
+  const clearValue = () => {
+    onValueChange("");
+
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+
+  return (
+    <div className={inputContainerCss}>
+      <Search iconSize={16} aria-hidden />
+      <CommandInput ref={composedRef} {...props} value={value} onValueChange={onValueChange} />
+      {value ? (
+        <div
+          className={css`
+            margin-left: ${space.s6}px;
+            cursor: pointer;
+          `}
+          onClick={clearValue}
+        >
+          <ClearInputFilled iconSize={16} containerSize={18} />
+        </div>
+      ) : null}
+    </div>
+  );
+});
+
+export const CommandMenuList = styled(CommandList)`
+  overflow-y: scroll;
+  height: var(--cmdk-list-height);
+  max-height: 450px;
+  transition: height 100ms ease;
+  margin-top: ${space.s4}px;
+`;
+
+export const CommandMenuEmpty = styled(CommandEmpty)`
+  ${textStyles.small}
+  display: flex;
+  align-items: center;
+  padding: 0 ${space.s12}px;
+  min-height: ${layout.itemHeight}px;
+  color: ${themeVars.accentTextColor};
+`;
+
+export const CommandMenuGroup = styled(CommandGroup)`
+  [cmdk-group-heading] {
+    ${textStyles.small}
+    display: flex;
+    align-items: center;
+    padding: 0 ${space.s8}px;
+    min-height: ${layout.groupTitleHeight}px;
+    color: ${themeVars.accentTextColor};
+  }
+`;
+
+export const CommandMenuSeparator = styled(CommandSeparator)`
+  background-color: ${themeVars.actionMenuSeparatorColor};
+  height: 0.5px;
+  margin: ${space.s4}px 0;
+`;
+
+const commandItemCss = css`
+  display: flex;
+  align-items: center;
+  gap: ${space.s6}px;
+  padding: 0 ${space.s12}px;
+  cursor: pointer;
+  min-height: ${layout.menuItemHeight}px;
+  margin: 0 ${space.s4}px;
+  border-radius: ${border.radius6}px;
+
+  &[data-selected="true"] {
+    margin: 0 4px;
+    background-color: ${themeVars.colorBgActionsMenuItemHover};
+  }
+`;
+const commandItemTitleCss = css`
+  flex: 1 1 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+export const CommandExpressionSelectItem = forwardRef<
+  React.ElementRef<typeof CommandItem>,
+  React.ComponentPropsWithoutRef<typeof CommandItem>
+>(function CommandMenuItem({className, children, ...props}, ref) {
+  return (
+    <CommandItem ref={ref} className={cx(commandItemCss, className)} {...props}>
+      {children}
+    </CommandItem>
+  );
+});
+
+export const CommandMenuItem = forwardRef<
+  React.ElementRef<typeof CommandItem>,
+  React.ComponentPropsWithoutRef<typeof CommandItem> & {
+    icon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+  }
+>(function CommandMenuItem({className, children, icon, rightIcon, ...props}, ref) {
+  const [showTitle, setShowTitle] = useState(false);
+
+  return (
+    <CommandItem ref={ref} className={cx(commandItemCss, className)} {...props}>
+      {icon}
+      <span
+        title={showTitle ? (children as string) : ""}
+        onMouseEnter={(e) => {
+          const target = e.target as HTMLElement;
+          if (typeof children === "string" && target.offsetWidth < target.scrollWidth) {
+            setShowTitle(true);
+          }
+        }}
+        className={commandItemTitleCss}
+      >
+        {children}
+      </span>
+      {rightIcon}
+    </CommandItem>
+  );
+});

package/src/comment.tsx

@@ -0,0 +1,218 @@
+import {css, cx} from "@linaria/core";
+import {FC, forwardRef, memo, ReactNode} from "react";
+import {AvatarImage, AvatarPlaceholder} from "./avatar";
+import {Item} from "./item";
+import {border, iconSize, space, textStyles, themeVars, transition} from "./design-system";
+import {formatDateFromNow} from "./format-date-from-now";
+import {LoadingSausage, LoadingSausageList} from "./loading-sausage";
+import {Tooltip} from "./tooltip";
+import {isMobile} from "./platform";
+
+export const commentContentStyle = css`
+  ${{
+    wordBreak: "break-word",
+    paddingTop: space.s6,
+    whiteSpace: "pre-line",
+  }}
+`;
+
+export const commentStyle = css`
+  ${{
+    borderRadius: border.radius6,
+    paddingLeft: space.s12,
+    paddingRight: space.s12,
+    paddingTop: space.s12,
+    paddingBottom: space.s6,
+    marginBottom: 1,
+    backgroundColor: themeVars.actionMenuBg,
+    transition: `box-shadow ${transition}`,
+    overflowX: "auto",
+  }}
+`;
+
+const avatarContainerStyle = css`
+  ${{marginRight: space.s8}}
+`;
+
+const infoContainerStyle = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  ${{
+    minHeight: iconSize,
+    ...textStyles.heading5,
+  }}
+`;
+
+const authorStyle = css`
+  ${{
+    display: "inline",
+    marginRight: space.s8,
+  }}
+`;
+
+const dateStyle = css`
+  ${{
+    display: "inline",
+    whiteSpace: "no-wrap",
+    paddingRight: 8,
+    ...textStyles.small,
+    color: themeVars.accentTextColor,
+  }}
+`;
+
+export const defaultCommentStyle = css``;
+
+interface CommentProps {
+  author?: string;
+  authorTitle?: string;
+  authorStyleClassName?: string;
+  avatarUrl?: string | null;
+  actions?: ReactNode;
+  customItemStyle?: string;
+  icon?: ReactNode;
+  date?: string;
+  children?: ReactNode;
+  avatarSize?: number;
+  dateTimeFormat?: string;
+  commentContentStyleClassName?: string;
+  actionsShowed?: boolean;
+}
+
+export const actionsClassName = css`
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  padding: ${space.s2 + 1}px;
+  background-color: ${themeVars.actionMenuBg};
+  border-radius: ${border.radius8}px;
+  box-shadow: ${themeVars.entityCardShadow};
+  gap: ${space.s2}px;
+
+  .${defaultCommentStyle}:hover & {
+    display: flex;
+  }
+`;
+export const Comment = memo(
+  forwardRef<HTMLDivElement, CommentProps>((props, ref) => {
+    const {
+      author,
+      authorTitle,
+      authorStyleClassName,
+      commentContentStyleClassName = commentContentStyle,
+      date,
+      avatarUrl,
+      actions,
+      children,
+      customItemStyle,
+      dateTimeFormat,
+      icon,
+      avatarSize = 24,
+      actionsShowed = false,
+    } = props;
+
+    const {formatted, relative} = formatDateFromNow(date, {format: dateTimeFormat});
+    const IconComponent = icon ? icon : null;
+    return (
+      <div
+        ref={ref}
+        className={cx(
+          css`
+            display: grid;
+            grid-template-columns: auto minmax(150px, 1fr);
+            align-items: center;
+            column-gap: ${space.s12}px;
+          `,
+          defaultCommentStyle,
+          customItemStyle ?? commentStyle
+        )}
+      >
+        <div>
+          {IconComponent ? IconComponent : <AvatarImage avatarUrl={avatarUrl} title={authorTitle} size={avatarSize} />}
+        </div>
+        <div
+          className={css`
+            display: grid;
+            position: relative;
+            grid-template-columns: 1fr auto;
+            align-items: center;
+            min-height: ${space.s24}px;
+          `}
+        >
+          <div className={infoContainerStyle}>
+            <div className={cx(authorStyle, authorStyleClassName)}>{author}</div>
+            {date && (
+              <Tooltip title={formatted} side="top">
+                <div className={dateStyle}>{relative}</div>
+              </Tooltip>
+            )}
+          </div>
+          {actions ? (
+            <div
+              className={cx(
+                actionsClassName,
+                (actionsShowed || isMobile) &&
+                  css`
+                    display: flex;
+                  `
+              )}
+            >
+              {actions}
+            </div>
+          ) : null}
+        </div>
+        <div />
+        <div className={commentContentStyleClassName}>{children}</div>
+      </div>
+    );
+  })
+);
+
+export const CommentPlaceholder: FC = () => {
+  return (
+    <Item
+      itemClassName={commentStyle}
+      multiline={true}
+      leftContainer={
+        <div className={avatarContainerStyle}>
+          <AvatarPlaceholder size={24} />
+        </div>
+      }
+    >
+      <Item itemClassName={infoContainerStyle}>
+        <div className={authorStyle}>
+          <LoadingSausage />
+        </div>
+      </Item>
+
+      <div className={commentContentStyle}>
+        <LoadingSausageList amount={3} />
+      </div>
+    </Item>
+  );
+};
+
+export const ErrorComment: FC<{error?: ReactNode}> = ({error}) => {
+  return (
+    <div>
+      <Item
+        itemClassName={cx(
+          commentStyle,
+          css`
+            ${{backgroundColor: themeVars.warningBgColor}}
+          `
+        )}
+        multiline={true}
+        leftContainer={
+          <div className={avatarContainerStyle}>
+            <AvatarPlaceholder size={24} />
+          </div>
+        }
+      >
+        <div>{error}</div>
+      </Item>
+    </div>
+  );
+};

package/src/context-menu/index.tsx

@@ -0,0 +1,134 @@
+import {css, cx} from "@linaria/core";
+import {styled} from "@linaria/react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import {forwardRef} from "react";
+import {border, layout, space, textStyles, themeVars} from "../design-system";
+
+export const Root = (contextMenuProps: ContextMenuPrimitive.ContextMenuProps) => (
+  <ContextMenuPrimitive.Root dir="ltr" {...contextMenuProps} />
+);
+
+export const Portal = ContextMenuPrimitive.Portal;
+export const Trigger = ContextMenuPrimitive.Trigger;
+
+export const rowItemStyles = {
+  ...textStyles.regular,
+  display: "flex",
+  alignItems: "center",
+  minHeight: layout.menuItemHeight,
+  outline: "none",
+  borderRadius: border.radius0,
+  padding: `0px ${space.s12}px`,
+  margin: `0px ${space.s4}px`,
+  cursor: "pointer",
+
+  "&:hover,&[data-highlighted]": {
+    inset: "10px 4px",
+    marginLeft: 4,
+    marginRight: 4,
+    backgroundColor: themeVars.colorBgActionsMenuItemHover,
+    borderRadius: border.radius6,
+  },
+
+  "&[data-disabled]": {
+    cursor: "default",
+    color: themeVars.disabledTextColor,
+
+    "&:hover": {
+      color: themeVars.disabledTextColor,
+      backgroundColor: themeVars.transparent,
+    },
+  },
+};
+
+const dropdownMenuContentStyles = css`
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* ant dropdown have z-index 1000 and sometimes we need to open dropdown from ant's one
+   * e.g. backlog actions on calendar
+   * TODO: use more reliable z-index strategy
+   */
+  z-index: 1001;
+  max-height: min(var(--radix-dropdown-menu-content-available-height), 680px);
+  padding-top: ${space.s4}px;
+  padding-bottom: ${space.s4}px;
+  min-width: 200px;
+  box-shadow: ${themeVars.actionMenuShadow};
+  border-radius: ${border.radius8}px;
+  background-color: ${themeVars.colorBgActionsMenu};
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation-duration: 400ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    animation-fill-mode: forwards;
+    will-change: transform, opacity;
+    &[data-state="open"] {
+      animation-name: slideDown;
+    }
+  }
+`;
+
+export type ContentProps = ContextMenuPrimitive.ContextMenuContentProps;
+
+export const Content = forwardRef<HTMLDivElement, ContentProps>(function ContextMenuContent({className, ...rest}, ref) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        ref={ref}
+        className={cx(dropdownMenuContentStyles, className)}
+        collisionPadding={space.s12 + space.s8}
+        {...rest}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+});
+
+export const Item = styled(ContextMenuPrimitive.Item)`
+  ${rowItemStyles}
+`;
+
+export const Separator = styled(ContextMenuPrimitive.Separator)`
+  ${{
+    backgroundColor: themeVars.separatorColor,
+    height: 1,
+    margin: `${space.s4}px 0`,
+  }}
+`;
+
+export const Group = ContextMenuPrimitive.Group;
+
+export const Label = styled(ContextMenuPrimitive.Label)`
+  ${{
+    ...textStyles.small,
+    color: themeVars.accentTextColor,
+    padding: `${space.s6}px ${space.s12}px`,
+  }}
+`;
+
+export const Sub = ContextMenuPrimitive.Sub;
+
+export const SubContent = forwardRef<HTMLDivElement, ContextMenuPrimitive.ContextMenuSubContentProps>(
+  function DropdownMenuSubContent({className, ...rest}, ref) {
+    return (
+      <ContextMenuPrimitive.Portal>
+        <ContextMenuPrimitive.SubContent ref={ref} className={cx(dropdownMenuContentStyles, className)} {...rest} />
+      </ContextMenuPrimitive.Portal>
+    );
+  }
+);
+
+export const SubTrigger = styled(ContextMenuPrimitive.SubTrigger)`
+  ${rowItemStyles}
+`;

package/src/copy-to-clipboard.ts

@@ -0,0 +1 @@
+export const copyToClipboard = (text: string) => window.navigator.clipboard.writeText(text);

package/src/country-selector.tsx

@@ -0,0 +1,29 @@
+import countryList from "react-select-country-list";
+import {FC} from "react";
+import {Select} from "./select";
+
+const restrictedCountries = "RU,BY,KP,SY,IR,SD,CU".split(",");
+const options = countryList()
+  .getData()
+  .filter((x) => !restrictedCountries.includes(x.value));
+const countryMap = new Map();
+options.forEach((option) => {
+  countryMap.set(option.value, option);
+});
+
+interface CountrySelectorProps {
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+export const CountrySelector: FC<CountrySelectorProps> = ({onChange = () => null, value}) => {
+  return (
+    <Select
+      isSearchable
+      options={options}
+      value={countryMap.get(value) ?? null}
+      placeholder="Select your country"
+      onChange={({value}) => onChange(value)}
+    />
+  );
+};

package/src/date-picker/autocomplete.tsx

@@ -0,0 +1,74 @@
+import moment from "moment";
+import {useMemo} from "react";
+import {Select} from "../select";
+import {SelectControlSettingsProvider} from "../select/select-control-settings-context";
+import {timeFormat as defaultTimeFormat} from "../design-system";
+
+const step = 30;
+
+export type Option = {
+  label: string;
+  value: string;
+};
+
+export type OnChangeArgs = Option | null;
+
+export const AutoComplete = ({
+  value,
+  timeFormat = defaultTimeFormat,
+  onChange,
+  menuIsOpen,
+  position,
+}: {
+  value: Date | null;
+  timeFormat?: string;
+  onChange: (args: OnChangeArgs) => void;
+  menuIsOpen: boolean;
+  position: number;
+}) => {
+  const options = useMemo(
+    () =>
+      Array.from({length: (24 * 60) / step}, (value, index) => {
+        const hour = Math.floor((index * step) / 60);
+        const minute = index * step - hour * 60;
+        const label = moment({hour, minute}).format(timeFormat);
+        return {value: label, label};
+      }),
+    [timeFormat]
+  );
+
+  const selectedOption = useMemo(() => {
+    if (!value) {
+      return null;
+    }
+    const timeValue = moment(value).format(timeFormat);
+    return options.find((option) => option.value === timeValue);
+  }, [value, timeFormat, options]);
+
+  return (
+    // We override select settings with empty popup container, as we need inline popup here, not inside some global container
+    <SelectControlSettingsProvider getPopupContainerElement={undefined}>
+      <Select<Option, false>
+        options={options}
+        menuIsOpen={menuIsOpen}
+        value={selectedOption}
+        onChange={onChange}
+        components={{
+          Control: () => null,
+        }}
+        styles={{
+          menu: (props) => ({
+            ...props,
+            zIndex: 1000000,
+            position: "absolute",
+            width: "auto",
+            top: position,
+            margin: 0,
+            left: 100,
+          }),
+          menuList: (props) => ({...props, width: 100}),
+        }}
+      />
+    </SelectControlSettingsProvider>
+  );
+};

package/src/date-picker/constants.ts

@@ -0,0 +1,3 @@
+export const datesSeparator = " → ";
+export const hourMinuteSeparator = ":";
+export const timeFormat = "HH:mm";

package/src/date-picker/contexts.ts

@@ -0,0 +1,7 @@
+import {createContext} from "react";
+import _ from "lodash";
+
+export const StartEndFocusContext = createContext({
+  focusOnStart: true,
+  setFocusOnStart: _.noop,
+});