@fibery/ui-kit 1.17.1 → 1.18.0

package/src/toast/primitives.tsx

@@ -0,0 +1,140 @@
+import {css, cx} from "@linaria/core";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import {ElementRef, forwardRef} from "react";
+import {border, space, textStyles, themeVars} from "../design-system";
+import CloseIcon from "../icons/react/Close";
+import {IconButton} from "../Button/icon-button";
+import {Button} from "../button";
+import {ButtonProps} from "../Button/button";
+import {useTheme} from "../theme-provider";
+
+export const ToastProvider = ToastPrimitives.Provider;
+
+const viewportCss = css`
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+  margin: 0;
+  z-index: 1010; // inherited from old toast implementation
+  padding: ${space.xl}px;
+  list-style: none;
+`;
+
+export const ToastViewport = forwardRef<
+  ElementRef<typeof ToastPrimitives.Viewport>,
+  ToastPrimitives.ToastViewportProps
+>(({className, ...props}, ref) => {
+  return <ToastPrimitives.Viewport ref={ref} className={cx(viewportCss, className)} {...props} />;
+});
+
+const rootCss = css`
+  background-color: ${themeVars.colorBgToastDefault};
+  padding: ${space.m}px ${space.m * 2}px;
+  border-radius: ${border.radius6}px;
+  box-shadow: ${themeVars.shadowModal};
+
+  @keyframes hide {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes slideIn {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes swipeOut {
+    from {
+      transform: translateX(var(--radix-toast-swipe-end-x));
+    }
+    to {
+      transform: translateX(calc(150px + var(--radix-toast-swipe-end-x)));
+      opacity: 0;
+    }
+  }
+
+  &[data-swipe="move"] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  &[data-swipe="cancel"] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    will-change: transform, opacity;
+
+    &[data-state="open"] {
+      animation: slideIn 200ms ease-out;
+    }
+    &[data-state="closed"] {
+      animation: hide 200ms ease-out;
+    }
+
+    &[data-swipe="end"] {
+      animation: swipeOut 200ms ease-out;
+    }
+  }
+`;
+
+export const ToastRoot = forwardRef<ElementRef<typeof ToastPrimitives.Root>, ToastPrimitives.ToastProps>(
+  ({className, ...props}, ref) => {
+    return <ToastPrimitives.Root ref={ref} className={cx(rootCss, className)} {...props}></ToastPrimitives.Root>;
+  }
+);
+
+const titleCss = css`
+  ${textStyles.heading5};
+`;
+
+export const ToastTitle = forwardRef<ElementRef<typeof ToastPrimitives.Title>, ToastPrimitives.ToastTitleProps>(
+  ({className, ...props}, ref) => {
+    return <ToastPrimitives.Title ref={ref} className={cx(className, titleCss)} {...props} />;
+  }
+);
+
+const descriptionCss = css`
+  ${textStyles.small};
+  color: ${themeVars.accentTextColor};
+`;
+
+export const ToastSubtitle = forwardRef<
+  ElementRef<typeof ToastPrimitives.Description>,
+  ToastPrimitives.ToastDescriptionProps
+>(({className, ...props}, ref) => {
+  return <ToastPrimitives.Description ref={ref} className={cx(className, descriptionCss)} {...props} />;
+});
+
+export const ToastAction = forwardRef<
+  ElementRef<typeof ToastPrimitives.Action>,
+  ButtonProps & {altText: ToastPrimitives.ToastActionProps["altText"]}
+>(({children, altText, ...props}, ref) => {
+  const theme = useTheme();
+  return (
+    <ToastPrimitives.Action ref={ref} altText={altText} asChild>
+      <Button color={theme.textColor} {...props}>
+        {children}
+      </Button>
+    </ToastPrimitives.Action>
+  );
+});
+
+export const ToastClose = () => {
+  return (
+    <ToastPrimitives.Close aria-label="Dismiss" asChild>
+      <IconButton>
+        <CloseIcon iconSize={16} />
+      </IconButton>
+    </ToastPrimitives.Close>
+  );
+};

package/src/tooltip.tsx

@@ -1,7 +1,7 @@
 import {css, cx} from "@linaria/core";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import {forwardRef, type ReactNode, type SyntheticEvent} from "react";
-import {border, fontWeight, lineHeight, space, themeVars, tooltipDelay} from "./designSystem";
+import {border, fontWeight, lineHeight, space, themeVars, tooltipDelay} from "./design-system";
 
 const preventDefaultAndStopPropagation = (e: SyntheticEvent) => {
   e.preventDefault();
@@ -93,7 +93,7 @@ export const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps> =
   <TooltipPrimitive.Provider disableHoverableContent skipDelayDuration={150} {...props} />
 );
 
-export type TooltipProps = Omit<React.ComponentPropsWithoutRef<"button">, "title"> & {
+export type TooltipProps = Omit<TooltipPrimitive.TooltipTriggerProps, "title"> & {
   title?: ReactNode;
   description?: ReactNode;
   content?: ReactNode;
@@ -115,7 +115,7 @@ export type TooltipProps = Omit<React.ComponentPropsWithoutRef<"button">, "title
  * NOTE:
  * When used together with other triggers (Collapsible, ActionsMenu...) of radix-based component it might
  * overwrite [data-state] attribute of trigger element and make styling a bit harder. As a workaround you might:
- * 1. Make sure that Tooltip is the lowest trigger. Usually we don't care about data-state of tooltip's trigger  (e.g. `<CollapsibleTrigger asChilde><Tooltip><Button/></Tooltip></CollapsibleTrigger>`)
+ * 1. Make sure that Tooltip is the lowest trigger. Usually we don't care about data-state of tooltip's trigger  (e.g. `<CollapsibleTrigger asChild><Tooltip><Button/></Tooltip></CollapsibleTrigger>`)
  * 2. Use controlled state of components and add classes for open states
  *
  * Ref: https://github.com/radix-ui/primitives/issues/602

package/src/BackButton.tsx

@@ -1,3 +0,0 @@
-import {BackButton} from "./Button/BackButton";
-
-export {BackButton};

package/src/Select/components.tsx

@@ -1,90 +0,0 @@
-import React, {ReactNode} from "react";
-import {css} from "@linaria/core";
-import {components} from "react-windowed-select";
-import RemoveIcon from "../icons/react/Remove";
-import {ClearIndicatorProps, DropdownIndicatorProps, GroupBase, MultiValueRemoveProps, OptionProps} from "react-select";
-import {Button} from "../Button/button";
-import {space, themeVars} from "../designSystem";
-import ArrowCollapseVertical from "../icons/react/ArrowCollapseVertical";
-import {expanderExpandedStyle, expanderStyle} from "./styles";
-import cn from "classnames";
-
-export const Option = <
-  TOption,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<TOption> = GroupBase<TOption>
->({
-  children,
-  ...props
-}: OptionProps<TOption, IsMulti, Group>) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const {onMouseMove, onMouseOver, ...rest} = props.innerProps;
-  const newProps = Object.assign(props, {innerProps: rest});
-  return <components.Option {...newProps}>{children}</components.Option>;
-};
-
-export function DropdownIndicator<
-  TOption,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<TOption> = GroupBase<TOption>
->(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
-  if (props.selectProps.isDisabled) {
-    return null;
-  }
-  return (
-    <div className={cn(expanderStyle, props.selectProps.menuIsOpen && expanderExpandedStyle)}>
-      <ArrowCollapseVertical color={themeVars.disabledTextColor} />
-    </div>
-  );
-}
-
-export function ClearIndicator<
-  TOption,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<TOption> = GroupBase<TOption>
->({
-  innerProps,
-  selectProps,
-}: ClearIndicatorProps<TOption, IsMulti, Group> | MultiValueRemoveProps<TOption, IsMulti, Group>) {
-  if (selectProps.isDisabled) {
-    return null;
-  }
-  return (
-    <div {...innerProps}>
-      <Button borderless Icon={RemoveIcon} disabled={selectProps.isDisabled} size={":button-size/super-small"} />
-    </div>
-  );
-}
-
-export const NoOptionsMessage = ({children}: {children: ReactNode}) => {
-  return (
-    <div
-      className={css`
-        ${{
-          paddingLeft: space.l + 2,
-          paddingRight: space.l + 2,
-          paddingTop: space.m,
-          paddingBottom: space.m,
-        }}
-      `}
-    >
-      {children}
-    </div>
-  );
-};
-
-const groupDividerContainerStyle = css`
-  padding: ${space.l}px 0;
-  box-sizing: content-box;
-`;
-
-const groupDividerStyle = css`
-  width: 100%;
-  border-top: 1px solid #eeeff1;
-`;
-
-export const GroupDivider = () => (
-  <div className={groupDividerContainerStyle}>
-    <div className={groupDividerStyle}></div>
-  </div>
-);