@fibery/ui-kit 1.17.1 → 1.18.0

package/src/icons/ast/index.tsx

@@ -16,7 +16,6 @@ export { default as AntdFilledInfoCircle } from './AntdFilledInfoCircle';
 export { default as AppDetails } from './AppDetails';
 export { default as AppStoreOneColor } from './AppStoreOneColor';
 export { default as AppStore } from './AppStore';
-export { default as AppTemplatesOneColor } from './AppTemplatesOneColor';
 export { default as AppTemplates } from './AppTemplates';
 export { default as AppWebhooks } from './AppWebhooks';
 export { default as AppWiki } from './AppWiki';
@@ -35,6 +34,9 @@ export { default as Back } from './Back';
 export { default as BacklogIcon } from './BacklogIcon';
 export { default as BatchActionsIcon } from './BatchActionsIcon';
 export { default as BellCircle } from './BellCircle';
+export { default as BellFilled } from './BellFilled';
+export { default as BellOff } from './BellOff';
+export { default as BellRinging } from './BellRinging';
 export { default as BellX } from './BellX';
 export { default as Bolt } from './Bolt';
 export { default as Cards } from './Cards';
@@ -49,7 +51,6 @@ export { default as Columns2 } from './Columns2';
 export { default as Columns4 } from './Columns4';
 export { default as Columns } from './Columns';
 export { default as Copy } from './Copy';
-export { default as CopyUrl } from './CopyUrl';
 export { default as Database } from './Database';
 export { default as Delete } from './Delete';
 export { default as Demo } from './Demo';
@@ -60,6 +61,7 @@ export { default as DragHandle } from './DragHandle';
 export { default as DynamicFilterValue } from './DynamicFilterValue';
 export { default as Email } from './Email';
 export { default as EmojiDelete } from './EmojiDelete';
+export { default as Export } from './Export';
 export { default as ExtensionAssignments } from './ExtensionAssignments';
 export { default as ExtensionAvatar } from './ExtensionAvatar';
 export { default as ExtensionComments } from './ExtensionComments';
@@ -67,7 +69,7 @@ export { default as ExtensionFiles } from './ExtensionFiles';
 export { default as ExtensionReferences } from './ExtensionReferences';
 export { default as ExtensionWorkflow } from './ExtensionWorkflow';
 export { default as FavoritesChecked } from './FavoritesChecked';
-export { default as FavoritesMenu } from './FavoritesMenu';
+export { default as FavoritesOff } from './FavoritesOff';
 export { default as Favorites } from './Favorites';
 export { default as FiberyMono } from './FiberyMono';
 export { default as Fields } from './Fields';
@@ -80,6 +82,7 @@ export { default as FormWithCover } from './FormWithCover';
 export { default as FormWithoutCover } from './FormWithoutCover';
 export { default as Github } from './Github';
 export { default as Gitlab } from './Gitlab';
+export { default as GlobeSimple } from './GlobeSimple';
 export { default as Globe } from './Globe';
 export { default as GoogleDrive } from './GoogleDrive';
 export { default as GoogleMap } from './GoogleMap';
@@ -87,16 +90,18 @@ export { default as Hide } from './Hide';
 export { default as Hint } from './Hint';
 export { default as Home } from './Home';
 export { default as ImageXmark } from './ImageXmark';
+export { default as Import } from './Import';
 export { default as Integration } from './Integration';
 export { default as InvitePeople } from './InvitePeople';
 export { default as Items } from './Items';
 export { default as Jira } from './Jira';
+export { default as Lab } from './Lab';
 export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
+export { default as Link } from './Link';
 export { default as Lock } from './Lock';
 export { default as Loom } from './Loom';
-export { default as Markdown } from './Markdown';
 export { default as MenuCollapser } from './MenuCollapser';
 export { default as MessagePlusSquare } from './MessagePlusSquare';
 export { default as Milestones } from './Milestones';
@@ -106,6 +111,7 @@ export { default as Mixpanel } from './Mixpanel';
 export { default as MoreCompact } from './MoreCompact';
 export { default as More } from './More';
 export { default as MySpace } from './MySpace';
+export { default as Network } from './Network';
 export { default as Notifications } from './Notifications';
 export { default as ObjChild } from './ObjChild';
 export { default as ObjM2M } from './ObjM2M';
@@ -116,6 +122,8 @@ export { default as OnSchedule } from './OnSchedule';
 export { default as OpenAsPage } from './OpenAsPage';
 export { default as PageRegularMode } from './PageRegularMode';
 export { default as PageWideMode } from './PageWideMode';
+export { default as Pencil } from './Pencil';
+export { default as People } from './People';
 export { default as Photo } from './Photo';
 export { default as Popup } from './Popup';
 export { default as Posts } from './Posts';
@@ -172,6 +180,7 @@ export { default as SelfReferenceOn } from './SelfReferenceOn';
 export { default as Settings } from './Settings';
 export { default as Share } from './Share';
 export { default as Shared } from './Shared';
+export { default as ShieldKeyhole } from './ShieldKeyhole';
 export { default as SidebarFieldsOpened } from './SidebarFieldsOpened';
 export { default as SidebarFields } from './SidebarFields';
 export { default as Sidebar } from './Sidebar';
@@ -186,6 +195,7 @@ export { default as SortOnTop } from './SortOnTop';
 export { default as Sort } from './Sort';
 export { default as Spinner } from './Spinner';
 export { default as Templates } from './Templates';
+export { default as Terminal } from './Terminal';
 export { default as Twitter } from './Twitter';
 export { default as TypeBoolean } from './TypeBoolean';
 export { default as TypeButton } from './TypeButton';

package/src/icons/{getIconContainerStyle.tsx → get-icon-container-style.tsx}

@@ -1,5 +1,5 @@
 import {CSSProperties} from "react";
-import {themeVars} from "../designSystem";
+import {themeVars} from "../design-system";
 
 export const getIconContainerStyle = (
   containerSize: number,

package/src/icons/react/BellFilled.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import BellFilledSvg from '../ast/BellFilled';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const BellFilled = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={BellFilledSvg} />;
+
+BellFilled.displayName = 'BellFilled';
+export default BellFilled;

package/src/icons/react/BellOff.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import BellOffSvg from '../ast/BellOff';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const BellOff = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={BellOffSvg} />;
+
+BellOff.displayName = 'BellOff';
+export default BellOff;

package/src/icons/react/BellRinging.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import BellRingingSvg from '../ast/BellRinging';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const BellRinging = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={BellRingingSvg} />;
+
+BellRinging.displayName = 'BellRinging';
+export default BellRinging;

package/src/icons/react/Export.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import ExportSvg from '../ast/Export';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Export = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={ExportSvg} />;
+
+Export.displayName = 'Export';
+export default Export;

package/src/icons/react/FavoritesOff.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import FavoritesOffSvg from '../ast/FavoritesOff';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const FavoritesOff = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={FavoritesOffSvg} />;
+
+FavoritesOff.displayName = 'FavoritesOff';
+export default FavoritesOff;

package/src/icons/react/GlobeSimple.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import GlobeSimpleSvg from '../ast/GlobeSimple';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const GlobeSimple = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={GlobeSimpleSvg} />;
+
+GlobeSimple.displayName = 'GlobeSimple';
+export default GlobeSimple;

package/src/icons/react/Import.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import ImportSvg from '../ast/Import';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Import = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={ImportSvg} />;
+
+Import.displayName = 'Import';
+export default Import;

package/src/icons/react/Lab.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import LabSvg from '../ast/Lab';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Lab = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={LabSvg} />;
+
+Lab.displayName = 'Lab';
+export default Lab;

package/src/icons/react/Link.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import LinkSvg from '../ast/Link';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Link = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={LinkSvg} />;
+
+Link.displayName = 'Link';
+export default Link;

package/src/icons/react/Network.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import NetworkSvg from '../ast/Network';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Network = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={NetworkSvg} />;
+
+Network.displayName = 'Network';
+export default Network;

package/src/icons/react/Pencil.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import PencilSvg from '../ast/Pencil';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Pencil = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={PencilSvg} />;
+
+Pencil.displayName = 'Pencil';
+export default Pencil;

package/src/icons/react/People.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import PeopleSvg from '../ast/People';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const People = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={PeopleSvg} />;
+
+People.displayName = 'People';
+export default People;

package/src/icons/react/ShieldKeyhole.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import ShieldKeyholeSvg from '../ast/ShieldKeyhole';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const ShieldKeyhole = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={ShieldKeyholeSvg} />;
+
+ShieldKeyhole.displayName = 'ShieldKeyhole';
+export default ShieldKeyhole;

package/src/icons/react/Terminal.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import TerminalSvg from '../ast/Terminal';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Terminal = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={TerminalSvg} />;
+
+Terminal.displayName = 'Terminal';
+export default Terminal;

package/src/icons/react/index.tsx

@@ -16,7 +16,6 @@ export { default as AntdFilledInfoCircle } from './AntdFilledInfoCircle';
 export { default as AppDetails } from './AppDetails';
 export { default as AppStoreOneColor } from './AppStoreOneColor';
 export { default as AppStore } from './AppStore';
-export { default as AppTemplatesOneColor } from './AppTemplatesOneColor';
 export { default as AppTemplates } from './AppTemplates';
 export { default as AppWebhooks } from './AppWebhooks';
 export { default as AppWiki } from './AppWiki';
@@ -35,6 +34,9 @@ export { default as Back } from './Back';
 export { default as BacklogIcon } from './BacklogIcon';
 export { default as BatchActionsIcon } from './BatchActionsIcon';
 export { default as BellCircle } from './BellCircle';
+export { default as BellFilled } from './BellFilled';
+export { default as BellOff } from './BellOff';
+export { default as BellRinging } from './BellRinging';
 export { default as BellX } from './BellX';
 export { default as Bolt } from './Bolt';
 export { default as Cards } from './Cards';
@@ -49,7 +51,6 @@ export { default as Columns2 } from './Columns2';
 export { default as Columns4 } from './Columns4';
 export { default as Columns } from './Columns';
 export { default as Copy } from './Copy';
-export { default as CopyUrl } from './CopyUrl';
 export { default as Database } from './Database';
 export { default as Delete } from './Delete';
 export { default as Demo } from './Demo';
@@ -60,6 +61,7 @@ export { default as DragHandle } from './DragHandle';
 export { default as DynamicFilterValue } from './DynamicFilterValue';
 export { default as Email } from './Email';
 export { default as EmojiDelete } from './EmojiDelete';
+export { default as Export } from './Export';
 export { default as ExtensionAssignments } from './ExtensionAssignments';
 export { default as ExtensionAvatar } from './ExtensionAvatar';
 export { default as ExtensionComments } from './ExtensionComments';
@@ -67,7 +69,7 @@ export { default as ExtensionFiles } from './ExtensionFiles';
 export { default as ExtensionReferences } from './ExtensionReferences';
 export { default as ExtensionWorkflow } from './ExtensionWorkflow';
 export { default as FavoritesChecked } from './FavoritesChecked';
-export { default as FavoritesMenu } from './FavoritesMenu';
+export { default as FavoritesOff } from './FavoritesOff';
 export { default as Favorites } from './Favorites';
 export { default as FiberyMono } from './FiberyMono';
 export { default as Fields } from './Fields';
@@ -80,6 +82,7 @@ export { default as FormWithCover } from './FormWithCover';
 export { default as FormWithoutCover } from './FormWithoutCover';
 export { default as Github } from './Github';
 export { default as Gitlab } from './Gitlab';
+export { default as GlobeSimple } from './GlobeSimple';
 export { default as Globe } from './Globe';
 export { default as GoogleDrive } from './GoogleDrive';
 export { default as GoogleMap } from './GoogleMap';
@@ -87,16 +90,18 @@ export { default as Hide } from './Hide';
 export { default as Hint } from './Hint';
 export { default as Home } from './Home';
 export { default as ImageXmark } from './ImageXmark';
+export { default as Import } from './Import';
 export { default as Integration } from './Integration';
 export { default as InvitePeople } from './InvitePeople';
 export { default as Items } from './Items';
 export { default as Jira } from './Jira';
+export { default as Lab } from './Lab';
 export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
+export { default as Link } from './Link';
 export { default as Lock } from './Lock';
 export { default as Loom } from './Loom';
-export { default as Markdown } from './Markdown';
 export { default as MenuCollapser } from './MenuCollapser';
 export { default as MessagePlusSquare } from './MessagePlusSquare';
 export { default as Milestones } from './Milestones';
@@ -106,6 +111,7 @@ export { default as Mixpanel } from './Mixpanel';
 export { default as MoreCompact } from './MoreCompact';
 export { default as More } from './More';
 export { default as MySpace } from './MySpace';
+export { default as Network } from './Network';
 export { default as Notifications } from './Notifications';
 export { default as ObjChild } from './ObjChild';
 export { default as ObjM2M } from './ObjM2M';
@@ -116,6 +122,8 @@ export { default as OnSchedule } from './OnSchedule';
 export { default as OpenAsPage } from './OpenAsPage';
 export { default as PageRegularMode } from './PageRegularMode';
 export { default as PageWideMode } from './PageWideMode';
+export { default as Pencil } from './Pencil';
+export { default as People } from './People';
 export { default as Photo } from './Photo';
 export { default as Popup } from './Popup';
 export { default as Posts } from './Posts';
@@ -172,6 +180,7 @@ export { default as SelfReferenceOn } from './SelfReferenceOn';
 export { default as Settings } from './Settings';
 export { default as Share } from './Share';
 export { default as Shared } from './Shared';
+export { default as ShieldKeyhole } from './ShieldKeyhole';
 export { default as SidebarFieldsOpened } from './SidebarFieldsOpened';
 export { default as SidebarFields } from './SidebarFields';
 export { default as Sidebar } from './Sidebar';
@@ -186,6 +195,7 @@ export { default as SortOnTop } from './SortOnTop';
 export { default as Sort } from './Sort';
 export { default as Spinner } from './Spinner';
 export { default as Templates } from './Templates';
+export { default as Terminal } from './Terminal';
 export { default as Twitter } from './Twitter';
 export { default as TypeBoolean } from './TypeBoolean';
 export { default as TypeButton } from './TypeButton';

package/src/{Item.tsx → item.tsx}

@@ -1,7 +1,7 @@
 import {css} from "@linaria/core";
 import cx from "classnames";
 import {forwardRef, Ref, ReactNode, MouseEvent, CSSProperties, AriaRole} from "react";
-import {themeVars} from "./designSystem";
+import {themeVars} from "./design-system";
 
 const getGridStyle = ({
   multiline,

package/src/loaders.tsx

@@ -1,11 +1,11 @@
 import {css, cx} from "@linaria/core";
 import {styled} from "@linaria/react";
-import {ReactNode} from "react";
+import {ReactNode, memo} from "react";
 import {IconBaseProps} from "./icons/types";
-import {border, layout, space, textStyles, themeVars} from "./designSystem";
-import {getShiftStyle} from "./icons/getShiftStyle";
+import {border, layout, space, textStyles, themeVars} from "./design-system";
+import {getShiftStyle} from "./icons/get-shift-style";
 import {LoadingSausage} from "./loading-sausage";
-import {useTheme} from "./ThemeProvider";
+import {useTheme} from "./theme-provider";
 
 export const LoadingView = styled.div<{absolute: boolean; backgroundColor?: string}>`
   position: ${(props) => (props.absolute ? "absolute" : "static")};
@@ -104,7 +104,20 @@ const ContainerSpinner = styled.div<{containerSize: number}>`
   line-height: ${(props) => props.containerSize}px;
 `;
 
-export const Spinner = ({size = 20, containerSize = 15, width = 2, color = "#000000", backgroundColor = "#FFFFFF"}) => {
+type SpinnerProps = {
+  size?: number;
+  containerSize?: number;
+  width?: number;
+  color?: string;
+  backgroundColor?: string;
+};
+export const Spinner = memo<SpinnerProps>(function Spinner({
+  size = 20,
+  containerSize = 15,
+  width = 2,
+  color = "#000000",
+  backgroundColor = "#FFFFFF",
+}) {
   const spinnerStyle = {
     width: size,
     height: size,
@@ -119,7 +132,7 @@ export const Spinner = ({size = 20, containerSize = 15, width = 2, color = "#000
       <div style={spinnerStyle} className={spinner} />
     </ContainerSpinner>
   );
-};
+});
 
 export const LoadingTreeMenuItem = ({
   color,

package/src/loading-sausage.tsx

@@ -3,7 +3,7 @@ import {styled} from "@linaria/react";
 import cn from "classnames";
 import _ from "lodash";
 import {memo, useRef} from "react";
-import {space, themeVars} from "./designSystem";
+import {space, themeVars} from "./design-system";
 
 const getRandomWithSeed = _.memoize((seed: number) => {
   const x = Math.sin(seed + 1) * 10000;
@@ -11,6 +11,8 @@ const getRandomWithSeed = _.memoize((seed: number) => {
 });
 
 export const getRandomInt = (min: number, max: number, seed?: number): number => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   const random = seed ? getRandomWithSeed(seed) : process.env.NODE_ENV === "test" ? 0.5 : Math.random();
   return Math.floor(random * (max - min + 1)) + min;
 };

package/src/{ThemeProvider.tsx → theme-provider.tsx}

@@ -1,7 +1,7 @@
 import invariant from "invariant";
 import {themeStyles} from "./theme-styles";
 import {createContext, ReactNode, useContext, useEffect, useState} from "react";
-import {colors, getThemeColors, ThemeColors} from "./designSystem";
+import {colors, getThemeColors, ThemeColors} from "./design-system";
 import {
   subscribeOnThemeMenuPreferenceChange,
   subscribeOnThemeModeChange,
@@ -51,6 +51,16 @@ export function useThemeMenuPreference(): ThemeMenuPreference {
   return themeMenuPreference;
 }
 
+export function useMenuTheme() {
+  const themeMode = useThemeMode();
+  return getThemeColors(colors.brandColors.blue, themeMode === "light" ? "light" : "dark");
+}
+
+export function MenuThemeProvider({children}: {children: ReactNode}) {
+  const theme = useMenuTheme();
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+}
+
 export function RootThemeProvider({
   initialThemeMode,
   initialPreference,

package/src/theme-styles.ts

@@ -1,8 +1,8 @@
 import {css} from "@linaria/core";
-import {createInlineTheme, getThemeColors, colors} from "./designSystem";
+import {createInlineTheme, getThemeColors, colors} from "./design-system";
 const lightTheme = getThemeColors(colors.brandColors.blue, "light");
 const darkTheme = getThemeColors(colors.brandColors.blue, "dark");
-const light2Theme = getThemeColors(colors.brandColors.blue, "light2");
+
 export const themeStyles = css`
   :global(html) {
     &:root {
@@ -11,8 +11,5 @@ export const themeStyles = css`
     &.dark-theme:root {
       ${createInlineTheme(darkTheme, [])}
     }
-    &.light-theme-and-dark-menu:root {
-      ${createInlineTheme(light2Theme, [])}
-    }
   }
 `;

package/src/toast/index.tsx

@@ -0,0 +1,47 @@
+import {css} from "@linaria/core";
+import {ToastRoot, ToastTitle, ToastSubtitle, ToastClose, ToastAction} from "./primitives";
+import {space} from "../design-system";
+
+export {ToastProvider, ToastViewport, ToastAction} from "./primitives";
+
+export type ToastProps = {
+  title: React.ReactNode;
+  subTitle?: React.ReactNode;
+  icon?: React.ReactNode;
+  action?: React.ReactElement<typeof ToastAction>;
+  autoClose?: boolean;
+};
+
+const rootCss = css`
+  min-width: 320px;
+  display: flex;
+  align-items: center;
+  gap: ${space.l}px;
+`;
+
+const messageCss = css`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  gap: ${space.xs}px;
+`;
+
+const iconCss = css`
+  grid-area: icon;
+`;
+export const Toast: React.FC<ToastProps> = ({title, subTitle, icon, action, autoClose = true}) => {
+  const close = autoClose ? null : <ToastClose />;
+
+  return (
+    <ToastRoot duration={autoClose ? 5000 : Infinity} className={rootCss}>
+      {icon ? <div className={iconCss}>{icon}</div> : null}
+      <div className={messageCss}>
+        <ToastTitle>{title}</ToastTitle>
+        {subTitle ? <ToastSubtitle>{subTitle}</ToastSubtitle> : null}
+      </div>
+
+      {action}
+      {close}
+    </ToastRoot>
+  );
+};