@fibery/ui-kit 1.0.5 → 1.2.0

package/src/icons/react/SlackIcon.tsx

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

package/src/icons/react/SlideMenu.tsx

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

package/src/icons/react/SlideMenuOpened.tsx

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

package/src/icons/react/index.tsx

@@ -40,6 +40,7 @@ export { default as DoubleArrowLeft } from './DoubleArrowLeft';
 export { default as DoubleArrowRight } from './DoubleArrowRight';
 export { default as DragBlockHandle } from './DragBlockHandle';
 export { default as DragHandle } from './DragHandle';
+export { default as Email } from './Email';
 export { default as ExtensionAssignments } from './ExtensionAssignments';
 export { default as ExtensionAvatar } from './ExtensionAvatar';
 export { default as ExtensionComments } from './ExtensionComments';
@@ -131,8 +132,13 @@ 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 SidebarFieldsOpened } from './SidebarFieldsOpened';
+export { default as SidebarFields } from './SidebarFields';
 export { default as Sidebar } from './Sidebar';
+export { default as SlackIcon } from './SlackIcon';
 export { default as Slack } from './Slack';
+export { default as SlideMenuOpened } from './SlideMenuOpened';
+export { default as SlideMenu } from './SlideMenu';
 export { default as SmartFolder } from './SmartFolder';
 export { default as SortOnBottom } from './SortOnBottom';
 export { default as SortOnTop } from './SortOnTop';

package/src/loading-sausage.tsx

@@ -2,7 +2,7 @@ import {css} from "@linaria/core";
 import {styled} from "@linaria/react";
 import cn from "classnames";
 import _ from "lodash";
-import {useRef, memo} from "react";
+import {memo, useRef} from "react";
 import {space, themeVars} from "./designSystem";
 
 const getRandomWithSeed = _.memoize((seed: number) => {
@@ -101,7 +101,7 @@ const Container = styled.div<{height: number}>`
   }
 `;
 
-type Props = {
+export type LoadingSausageProps = {
   minWidth?: number;
   maxWidth?: number;
   height?: number;
@@ -119,7 +119,7 @@ export const LoadingSausage = memo(function LoadingSausage({
   inverted = false,
   margins = true,
   animateAppearance = false,
-}: Props): JSX.Element {
+}: LoadingSausageProps): JSX.Element {
   const widthRef = useRef(getRandomInt(minWidth, maxWidth, index));
   return (
     <Container
@@ -139,8 +139,8 @@ type SausageListProps = {
   amount?: number;
   minAmount?: number;
   maxAmount?: number;
-  WrapperComponent?: ({children}: {children: JSX.Element}) => JSX.Element;
-} & Omit<Props, "index">;
+  WrapperComponent?: ({children}: {children: JSX.Element}) => JSX.Element | null;
+} & Omit<LoadingSausageProps, "index">;
 export const LoadingSausageList = memo<SausageListProps>(function LoadingSausageList({
   amount,
   minAmount = 1,

package/src/media-query-utils.ts

@@ -0,0 +1,24 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+export function getMediaQueryList(query: string) {
+  // need for test
+  return typeof window !== undefined && window.matchMedia
+    ? window.matchMedia(query)
+    : ({matches: false, addEventListener: noop, removeEventListener: noop} as unknown as MediaQueryList);
+}
+
+export function subscribeOnChange(mediaQueryList: MediaQueryList, cb: (evt: MediaQueryListEvent) => void): () => void {
+  // Safari 13 doesn't support addEventListener here
+  if (mediaQueryList.addEventListener) {
+    mediaQueryList.addEventListener("change", cb);
+    return () => {
+      mediaQueryList.removeEventListener("change", cb);
+    };
+  } else if (mediaQueryList.addListener) {
+    mediaQueryList.addListener(cb);
+    return () => {
+      mediaQueryList.removeListener(cb);
+    };
+  }
+  return noop;
+}

package/src/theme-settings.ts

@@ -0,0 +1,164 @@
+import {getMediaQueryList, subscribeOnChange as subscribeOnMediaQueryChange} from "./media-query-utils";
+
+const listenersThemeMode = new Map();
+const listenersThemePreference = new Map();
+const listenersThemeMenuPreference = new Map();
+
+const themePreferenceKey = "theme-preference";
+const themeMenuPreferenceKey = "theme-menu-preference";
+
+export type ThemePreference = "dark" | "light" | "auto";
+export type ThemeMenuPreference = "dark" | "auto";
+
+export type ThemeMode = "dark" | "light" | "light2";
+
+export function getThemePreference(): ThemePreference {
+  try {
+    const item = localStorage.getItem(themePreferenceKey);
+    if (item === "auto") {
+      return "auto";
+    } else if (item === "dark") {
+      return "dark";
+    } else if (item === "light") {
+      return "light";
+    }
+  } catch (e) {
+    return "light";
+  }
+  return "light";
+}
+
+export function getThemeMenuPreference(): ThemeMenuPreference {
+  try {
+    const item = localStorage.getItem(themeMenuPreferenceKey);
+    if (item === "dark") {
+      return "dark";
+    }
+  } catch (e) {
+    return "auto";
+  }
+  return "auto";
+}
+
+const darkModeQuery = "(prefers-color-scheme: dark)";
+
+function getDarkMediaQuery() {
+  return getMediaQueryList(darkModeQuery);
+}
+
+export function getThemeMode(): ThemeMode {
+  const preference = getThemePreference();
+  const menuPreference = getThemeMenuPreference();
+
+  if (preference === "auto") {
+    const matches = getDarkMediaQuery().matches;
+    if (matches) {
+      return "dark";
+    }
+    if (menuPreference === "dark") {
+      return "light2";
+    }
+    return "light";
+  } else if (preference === "dark") {
+    return "dark";
+  }
+  if (menuPreference === "dark") {
+    return "light2";
+  }
+  return "light";
+}
+
+export function setThemeMenuPreference(menuPreference: ThemeMenuPreference) {
+  try {
+    if (getThemeMenuPreference() !== menuPreference) {
+      localStorage.setItem(themeMenuPreferenceKey, menuPreference);
+      listenersThemeMode.forEach((cb) => {
+        cb(getThemeMode());
+      });
+      listenersThemeMenuPreference.forEach((cb) => {
+        cb(menuPreference);
+      });
+    }
+  } catch (e) {
+    // skip error
+  }
+}
+
+export function setThemePreference(preference: ThemePreference) {
+  try {
+    if (getThemePreference() !== preference) {
+      localStorage.setItem(themePreferenceKey, preference);
+      listenersThemeMode.forEach((cb) => {
+        cb(getThemeMode());
+      });
+      listenersThemePreference.forEach((cb) => {
+        cb(preference);
+      });
+    }
+  } catch (e) {
+    // skip error
+  }
+}
+
+export function subscribeOnThemeMenuPreferenceChange(
+  cb: (themeMenuPreference: ThemeMenuPreference) => void
+): () => void {
+  listenersThemeMenuPreference.set(cb, cb);
+  let currentPref = getThemeMenuPreference();
+  const storageListener = () => {
+    const newMenuPref = getThemeMenuPreference();
+    if (currentPref !== newMenuPref) {
+      currentPref = newMenuPref;
+      cb(newMenuPref);
+    }
+  };
+  window.addEventListener("storage", storageListener);
+  return () => {
+    listenersThemeMenuPreference.delete(cb);
+    window.removeEventListener("storage", storageListener);
+  };
+}
+
+export function subscribeOnThemePreferenceChange(cb: (themePreference: ThemePreference) => void): () => void {
+  listenersThemePreference.set(cb, cb);
+  let currentPref = getThemePreference();
+  const storageListener = () => {
+    const newPref = getThemePreference();
+    if (currentPref !== newPref) {
+      currentPref = newPref;
+      cb(newPref);
+    }
+  };
+  window.addEventListener("storage", storageListener);
+  return () => {
+    listenersThemePreference.delete(cb);
+    window.removeEventListener("storage", storageListener);
+  };
+}
+
+export function subscribeOnThemeModeChange(cb: (themeMode: ThemeMode) => void): () => void {
+  listenersThemeMode.set(cb, cb);
+  let currentPref = getThemePreference();
+  let currentMenuPref = getThemeMenuPreference();
+  const darkMediaQuery = getDarkMediaQuery();
+  const storageListener = () => {
+    const newPref = getThemePreference();
+    const newMenuPref = getThemeMenuPreference();
+    if (currentPref !== newPref || currentMenuPref !== newMenuPref) {
+      currentPref = newPref;
+      currentMenuPref = newMenuPref;
+      cb(getThemeMode());
+    }
+  };
+  window.addEventListener("storage", storageListener);
+  const unsubscribe = subscribeOnMediaQueryChange(darkMediaQuery, () => {
+    if (getThemePreference() === "auto") {
+      cb(getThemeMode());
+    }
+  });
+  return () => {
+    listenersThemeMode.delete(cb);
+    unsubscribe();
+    window.removeEventListener("storage", storageListener);
+  };
+}