@fibery/ui-kit 1.0.6 → 1.2.1

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/theme-settings.ts

@@ -2,12 +2,15 @@ import {getMediaQueryList, subscribeOnChange as subscribeOnMediaQueryChange} fro
 
 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" | "old";
+export type ThemeMode = "dark" | "light" | "light2";
 
 export function getThemePreference(): ThemePreference {
   try {
@@ -19,6 +22,18 @@ export function getThemePreference(): ThemePreference {
     } 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";
   }
@@ -33,15 +48,42 @@ function getDarkMediaQuery() {
 
 export function getThemeMode(): ThemeMode {
   const preference = getThemePreference();
+  const menuPreference = getThemeMenuPreference();
 
   if (preference === "auto") {
-    return getDarkMediaQuery().matches ? "dark" : "light";
+    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) {
@@ -58,6 +100,25 @@ export function setThemePreference(preference: ThemePreference) {
   }
 }
 
+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();
@@ -78,11 +139,14 @@ export function subscribeOnThemePreferenceChange(cb: (themePreference: ThemePref
 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();
-    if (currentPref !== newPref) {
+    const newMenuPref = getThemeMenuPreference();
+    if (currentPref !== newPref || currentMenuPref !== newMenuPref) {
       currentPref = newPref;
+      currentMenuPref = newMenuPref;
       cb(getThemeMode());
     }
   };

package/src/theme-styles.ts

@@ -0,0 +1,18 @@
+import {css} from "@linaria/core";
+import {createInlineTheme, getThemeColors, colors} from "./designSystem";
+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 {
+      ${createInlineTheme(lightTheme, [])}
+    }
+    &.dark-theme:root {
+      ${createInlineTheme(darkTheme, [])}
+    }
+    &.light-theme-and-dark-menu:root {
+      ${createInlineTheme(light2Theme, [])}
+    }
+  }
+`;