@fibery/ui-kit 1.0.5 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.0.5",
+  "version": "1.2.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -8,6 +8,8 @@
     "src/Button.d.ts",
     "src/Button.js",
     "src/designSystem.ts",
+    "src/theme-settings.ts",
+    "src/media-query-utils.ts",
     "src/create-inline-theme.ts",
     "src/form-field-loader.tsx",
     "src/ThemeProvider.tsx",
@@ -33,13 +35,14 @@
     "@linaria/core": "3.0.0-beta.15",
     "@linaria/react": "3.0.0-beta.15",
     "@popperjs/core": "2.9.3",
-    "@radix-ui/react-dropdown-menu": "0.1.1",
+    "@radix-ui/react-dropdown-menu": "1.0.0",
     "antd": "4.18.8",
     "chroma-js": "2.1.2",
     "classnames": "2.3.1",
     "color-hash": "1.0.3",
     "d3-shape": "1.3.7",
     "emoji-mart": "3.0.1",
+    "invariant": "2.2.4",
     "lodash": "4.17.21",
     "md5": "2.2.1",
     "moment": "2.20.1",
@@ -61,7 +64,7 @@
   },
   "devDependencies": {
     "@fibery/babel-preset": "7.2.0",
-    "@fibery/eslint-config": "7.1.0",
+    "@fibery/eslint-config": "8.1.0",
     "@fibery/text-editor": "1.0.0",
     "@linaria/babel-preset": "3.0.0-beta.15",
     "@types/chroma-js": "2.1.3",

package/src/Button.d.ts

@@ -21,4 +21,6 @@ export const ActionsButton: FunctionComponent<{
   color?: string;
   onClick?: Props["onClick"];
 }>;
-export const ActionsButtonCompact: FunctionComponent<{inverted?: boolean; onClick?: Props["onClick"]}>;
+export const ActionsButtonCompact: FunctionComponent<
+  {inverted?: boolean} & Omit<Props, "color" | "borderless" | "Icon" | "size">
+>;

package/src/Button.js

@@ -87,9 +87,6 @@ const getMainColor = ({color, dangerous, theme}) => {
   if (!theme) {
     return colors.primary;
   }
-  if (theme.mode === "old") {
-    return theme.primary;
-  }
   return theme.buttonColor;
 };
 
@@ -347,15 +344,16 @@ export function ActionsButton({onClick, label = ``, disabled}) {
   return <Button Icon={MoreIcon} onClick={onClick} borderless aria-label={label} disabled={disabled} />;
 }
 
-export function ActionsButtonCompact({inverted, onClick}) {
+export const ActionsButtonCompact = forwardRef(({inverted, ...rest}, ref) => {
   const theme = useTheme();
   return (
     <Button
+      ref={ref}
       size={":button-size/small"}
       Icon={MoreCompactIcon}
-      onClick={onClick}
       color={inverted ? colors.inversedTextColor : theme.buttonColor}
       borderless
+      {...rest}
     />
   );
-}
+});

package/src/Pallete.ts

@@ -11,7 +11,7 @@ export const slate = {
   slate10: "hsl(205, 9.0%, 47.3%)",
   slate11: "hsl(204, 14.0%, 37.3%)",
   slate12: "hsl(200, 7.0%, 8.8%)",
-};
+} as const;
 
 export const slateDark = {
   slate1: "hsl(200, 7.0%, 8.8%)",
@@ -26,7 +26,7 @@ export const slateDark = {
   slate10: "hsl(206, 5.2%, 49.5%)",
   slate11: "hsl(206, 6.0%, 63.0%)",
   slate12: "hsl(210, 6.0%, 93.0%)",
-};
+} as const;
 
 export const sage = {
   sage1: "hsl(155, 30.0%, 98.8%)",
@@ -41,7 +41,7 @@ export const sage = {
   sage10: "hsl(154, 2.8%, 51.7%)",
   sage11: "hsl(155, 3.0%, 43.0%)",
   sage12: "hsl(155, 24.0%, 9.0%)",
-};
+} as const;
 
 export const sageDark = {
   sage1: "hsl(160, 7.0%, 8.4%)",
@@ -56,7 +56,7 @@ export const sageDark = {
   sage10: "hsl(153, 4.8%, 48.2%)",
   sage11: "hsl(155, 5.0%, 61.8%)",
   sage12: "hsl(155, 6.0%, 93.0%)",
-};
+} as const;
 
 export const teal = {
   teal1: "hsl(165, 60.0%, 98.8%)",
@@ -71,7 +71,7 @@ export const teal = {
   teal10: "hsl(173, 83.4%, 32.5%)",
   teal11: "hsl(174, 90.0%, 25.2%)",
   teal12: "hsl(170, 50.0%, 12.5%)",
-};
+} as const;
 
 export const tealDark = {
   teal1: "hsl(168, 48.0%, 6.5%)",
@@ -86,7 +86,7 @@ export const tealDark = {
   teal10: "hsl(174, 83.9%, 38.2%)",
   teal11: "hsl(174, 90.0%, 40.7%)",
   teal12: "hsl(166, 73.0%, 93.1%)",
-};
+} as const;
 
 export const indigo = {
   indigo1: "hsl(225, 60.0%, 99.4%)",
@@ -101,7 +101,7 @@ export const indigo = {
   indigo10: "hsl(226, 58.6%, 51.3%)",
   indigo11: "hsl(226, 55.0%, 45.0%)",
   indigo12: "hsl(226, 62.0%, 17.0%)",
-};
+} as const;
 
 export const indigoDark = {
   indigo1: "hsl(229, 24.0%, 10.0%)",
@@ -116,7 +116,7 @@ export const indigoDark = {
   indigo10: "hsl(227, 75.2%, 61.6%)",
   indigo11: "hsl(228, 100%, 75.9%)",
   indigo12: "hsl(226, 83.0%, 96.3%)",
-};
+} as const;
 
 export const red = {
   red1: "hsl(359, 100%, 99.4%)",
@@ -131,7 +131,7 @@ export const red = {
   red10: "hsl(358, 69.4%, 55.2%)",
   red11: "hsl(358, 65.0%, 48.7%)",
   red12: "hsl(354, 50.0%, 14.6%)",
-};
+} as const;
 
 export const redDark = {
   red1: "hsl(353, 23.0%, 9.8%)",
@@ -146,7 +146,7 @@ export const redDark = {
   red10: "hsl(358, 85.3%, 64.0%)",
   red11: "hsl(358, 100%, 69.5%)",
   red12: "hsl(351, 89.0%, 96.0%)",
-};
+} as const;
 
 export const blue = {
   blue1: "hsl(206, 100%, 99.2%)",
@@ -161,7 +161,7 @@ export const blue = {
   blue10: "hsl(208, 100%, 47.3%)",
   blue11: "hsl(211, 100%, 43.2%)",
   blue12: "hsl(211, 100%, 15.0%)",
-};
+} as const;
 
 export const blueDark = {
   blue1: "hsl(212, 35.0%, 9.2%)",
@@ -176,7 +176,7 @@ export const blueDark = {
   blue10: "hsl(209, 100%, 60.6%)",
   blue11: "hsl(210, 100%, 66.1%)",
   blue12: "hsl(206, 98.0%, 95.8%)",
-};
+} as const;
 
 export const yellow = {
   yellow1: "hsl(60, 54.0%, 98.5%)",
@@ -191,7 +191,7 @@ export const yellow = {
   yellow10: "hsl(50, 100%, 48.5%)",
   yellow11: "hsl(42, 100%, 29.0%)",
   yellow12: "hsl(40, 55.0%, 13.5%)",
-};
+} as const;
 
 export const yellowDark = {
   yellow1: "hsl(45, 100%, 5.5%)",
@@ -206,7 +206,7 @@ export const yellowDark = {
   yellow10: "hsl(54, 100%, 68.0%)",
   yellow11: "hsl(48, 100%, 47.0%)",
   yellow12: "hsl(53, 100%, 91.0%)",
-};
+} as const;
 
 export const blackA = {
   blackA0: "#000000",
@@ -222,7 +222,7 @@ export const blackA = {
   blackA10: "hsla(0, 0%, 0%, 0.478)",
   blackA11: "hsla(0, 0%, 0%, 0.565)",
   blackA12: "hsla(0, 0%, 0%, 0.910)",
-};
+} as const;
 
 export const whiteA = {
   whiteA0: "#FFFFFF",
@@ -238,4 +238,28 @@ export const whiteA = {
   whiteA10: "hsla(0, 0%, 100%, 0.446)",
   whiteA11: "hsla(0, 0%, 100%, 0.592)",
   whiteA12: "hsla(0, 0%, 100%, 0.923)",
-};
+} as const;
+
+export const opacity = {
+  opacity100: 1,
+  opacity95: 0.95,
+  opacity90: 0.9,
+  opacity85: 0.85,
+  opacity80: 0.8,
+  opacity75: 0.75,
+  opacity70: 0.7,
+  opacity65: 0.65,
+  opacity60: 0.6,
+  opacity55: 0.55,
+  opacity50: 0.5,
+  opacity45: 0.45,
+  opacity40: 0.4,
+  opacity35: 0.35,
+  opacity30: 0.3,
+  opacity25: 0.25,
+  opacity20: 0.2,
+  opacity15: 0.15,
+  opacity10: 0.1,
+  opacity5: 0.05,
+  opacity0: 0,
+} as const;

package/src/Select/components.tsx

@@ -5,8 +5,9 @@ import RemoveIcon from "../icons/react/Remove";
 import {OptionProps, DropdownIndicatorProps, ClearIndicatorProps, MultiValueRemoveProps, GroupBase} from "react-select";
 import {Button} from "../Button";
 import {themeVars, space} from "../designSystem";
-import ArrowBottom from "../icons/react/ArrowBottom";
-import {dropdownIndicatorSize, expanderStyle} from "./styles";
+import ArrowCollapseVertical from "../icons/react/ArrowCollapseVertical";
+import {expanderStyle, expanderExpandedStyle} from "./styles";
+import cn from "classnames";
 
 export const Option = <
   TOption,
@@ -28,13 +29,8 @@ export function DropdownIndicator<
   Group extends GroupBase<TOption> = GroupBase<TOption>
 >(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
   return (
-    <div
-      className={expanderStyle}
-      style={{
-        transform: props.selectProps.menuIsOpen ? "rotate(180deg)" : "",
-      }}
-    >
-      <ArrowBottom iconSize={dropdownIndicatorSize} color={themeVars.disabledTextColor} />
+    <div className={cn(expanderStyle, props.selectProps.menuIsOpen && expanderExpandedStyle)}>
+      <ArrowCollapseVertical color={themeVars.disabledTextColor} />
     </div>
   );
 }

package/src/Select/styles.ts

@@ -4,15 +4,14 @@ import type {StylesConfig, CSSObjectWithLabel, ControlProps} from "react-select"
 import {inputOverrides} from "../antd/styles";
 import {border, layout, space, textStyles, themeVars, transition} from "../designSystem";
 
-export const dropdownIndicatorSize = 16;
-
 export const expanderStyle = css`
   ${{
     transition: `transform ${transition}`,
-    width: dropdownIndicatorSize,
-    height: dropdownIndicatorSize,
   }}
 `;
+export const expanderExpandedStyle = css`
+  transform: rotate(180deg);
+`;
 
 function createControlStyle({
   isSingleLine,
@@ -128,6 +127,7 @@ export const componentsStyles: StylesConfig = {
   }),
   menu: (provided) => ({
     ...provided,
+    color: themeVars.disabledTextColor,
     zIndex: 1050,
     backgroundColor: themeVars.actionMenuInnerBg,
     boxShadow: themeVars.actionMenuShadow as unknown as Property.BoxShadow,

package/src/ThemeProvider.tsx

@@ -1,83 +1,113 @@
-import {createContext, ReactNode, useContext, useEffect, useMemo, useState} from "react";
-import {colors, createInlineTheme, getThemeColors, ThemeColors} from "./designSystem";
+import invariant from "invariant";
+import {themeStyles} from "@fibery/ui-kit/src/theme-styles";
+import {createContext, ReactNode, useContext, useEffect, useState} from "react";
+import {colors, getThemeColors, ThemeColors} from "./designSystem";
 import {
+  subscribeOnThemeMenuPreferenceChange,
   subscribeOnThemeModeChange,
   subscribeOnThemePreferenceChange,
+  ThemeMenuPreference,
   ThemeMode,
   ThemePreference,
 } from "./theme-settings";
 
-const FiberyThemeModeContext = createContext<{themeMode: ThemeMode; themePreference: ThemePreference}>({
-  themeMode: "light",
-  themePreference: "auto",
-});
+const FiberyThemePreferenceContext = createContext<ThemePreference | null>(null);
+const FiberyThemeMenuPreferenceContext = createContext<ThemeMenuPreference | null>(null);
+
 const FiberyThemeContext = createContext<ThemeColors>(getThemeColors(colors.brandColors.blue, "light"));
 
 function ThemeProvider({theme, children}: {theme: ThemeColors; children: ReactNode}): JSX.Element {
   return <FiberyThemeContext.Provider value={theme}>{children}</FiberyThemeContext.Provider>;
 }
 
-function ThemeModeProvider({
-  oldTheming = true,
+export function useTheme(): ThemeColors {
+  return useContext(FiberyThemeContext);
+}
+
+export function useThemeMode(): ThemeMode {
+  const theme = useTheme();
+  return theme.mode;
+}
+
+export function useThemePreference(): ThemePreference {
+  const themePreference = useContext(FiberyThemePreferenceContext);
+
+  invariant(
+    themePreference,
+    "could not find theme preference context value; please ensure the component is wrapped in a <FiberyThemePreferenceContext>"
+  );
+
+  return themePreference;
+}
+
+export function useThemeMenuPreference(): ThemeMenuPreference {
+  const themeMenuPreference = useContext(FiberyThemeMenuPreferenceContext);
+
+  invariant(
+    themeMenuPreference,
+    "could not find theme menu preference context value; please ensure the component is wrapped in a <FiberyThemeMenuPreferenceContext>"
+  );
+
+  return themeMenuPreference;
+}
+
+export function RootThemeProvider({
   initialThemeMode,
   initialPreference,
+  initialMenuPreference,
   children,
 }: {
-  oldTheming: boolean;
   initialThemeMode: ThemeMode;
   initialPreference: ThemePreference;
+  initialMenuPreference: ThemeMenuPreference;
   children: ReactNode;
 }): JSX.Element {
   const [themeMode, setThemeMode] = useState<ThemeMode>(initialThemeMode);
   const [themePreference, setThemePreference] = useState<ThemePreference>(initialPreference);
+  const [themeMenuPreference, setThemeMenuPreference] = useState<ThemeMenuPreference>(initialMenuPreference);
+  const theme = getThemeColors(colors.brandColors.blue, themeMode);
+  useEffect(() => {
+    const unsubscribeMode = subscribeOnThemeModeChange(setThemeMode);
+    const unsubscribePreference = subscribeOnThemePreferenceChange(setThemePreference);
+    const unsubscribeMenuPreference = subscribeOnThemeMenuPreferenceChange(setThemeMenuPreference);
+    return () => {
+      unsubscribeMode();
+      unsubscribePreference();
+      unsubscribeMenuPreference();
+    };
+  }, []);
   useEffect(() => {
-    if (!oldTheming) {
-      const unsubscribeMode = subscribeOnThemeModeChange(setThemeMode);
-      const unsubscribePreference = subscribeOnThemePreferenceChange(setThemePreference);
-      return () => {
-        unsubscribeMode();
-        unsubscribePreference();
-      };
+    const darkThemeClassName = "dark-theme";
+    const lightThemeAndDarkMenuClassName = "light-theme-and-dark-menu";
+    const meta = document.querySelector('meta[name="color-scheme"]');
+    let colorScheme = "light";
+    const documentElement = document.documentElement;
+    documentElement.classList.remove(darkThemeClassName);
+    documentElement.classList.remove(lightThemeAndDarkMenuClassName);
+    documentElement.classList.add(themeStyles);
+    if (themeMode === "dark") {
+      documentElement.classList.add(darkThemeClassName);
+      colorScheme = "dark";
+    } else if (themeMode === "light2") {
+      documentElement.classList.add(lightThemeAndDarkMenuClassName);
     }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    return () => {};
-  }, [oldTheming]);
-  const value = useMemo(
-    () => ({
-      themeMode,
-      themePreference,
-    }),
-    [themeMode, themePreference]
-  );
-  return <FiberyThemeModeContext.Provider value={value}>{children}</FiberyThemeModeContext.Provider>;
-}
-
-export function useTheme(): ThemeColors {
-  return useContext(FiberyThemeContext);
-}
 
-export function useThemeMode(): ThemeMode {
-  return useContext(FiberyThemeModeContext).themeMode;
-}
+    documentElement.style.colorScheme = colorScheme;
+    meta?.setAttribute("content", colorScheme);
 
-export function useThemePreference(): ThemePreference {
-  return useContext(FiberyThemeModeContext).themePreference;
-}
+    return () => {
+      documentElement.classList.remove(darkThemeClassName);
+      documentElement.classList.remove(lightThemeAndDarkMenuClassName);
+    };
+  }, [themeMode]);
 
-export function applyThemeToRoot(theme: ThemeColors) {
-  const inlineTheme = createInlineTheme(theme);
-  Object.entries(inlineTheme).forEach(([p, v]) => {
-    document.body.style.setProperty(p, v);
-  });
-}
-
-export function RootThemeProvider({children}: {children: JSX.Element}): JSX.Element {
-  const themeMode = useThemeMode();
-  const theme = getThemeColors(colors.brandColors.blue, themeMode);
-  useEffect(() => {
-    applyThemeToRoot(theme);
-  }, [theme]);
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  return (
+    <FiberyThemePreferenceContext.Provider value={themePreference}>
+      <FiberyThemeMenuPreferenceContext.Provider value={themeMenuPreference}>
+        <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      </FiberyThemeMenuPreferenceContext.Provider>
+    </FiberyThemePreferenceContext.Provider>
+  );
 }
 
 interface WithThemeModeProps {
@@ -100,4 +130,4 @@ export function withThemeMode<T extends WithThemeModeProps = WithThemeModeProps>
   return ComponentWithThemeMode;
 }
 
-export {ThemeProvider, ThemeModeProvider};
+export {ThemeProvider};

package/src/antd/styles.ts

@@ -32,15 +32,15 @@ export const inputOverrides = {
     transition: `box-shadow ${transition}`,
   },
   disabled: {
-    color: `${themeVars.accentTextColor}`,
+    color: `${themeVars.accentTextColor} !important`,
     backgroundColor: `${themeVars.inputDisabledBgColor} !important`,
     borderColor: colors.transparent,
-    boxShadow: `${themeVars.inputBorderColor} !important`,
+    boxShadow: `${themeVars.inputDisabledBorderColor} !important`,
     transition: `box-shadow ${transition}`,
     WebkitTextFillColor: "currentColor",
     cursor: "default",
     ":hover": {
-      boxShadow: `${themeVars.inputBorderColor}`,
+      boxShadow: `${themeVars.inputDisabledBorderColor}`,
     },
   },
 };

package/src/create-inline-theme.ts

@@ -1,5 +1,12 @@
-export function createInlineTheme<T extends Record<string, unknown>>(themes: T): Record<string, string> {
+export function createInlineTheme<T extends Record<string, unknown>>(
+  themes: T,
+  rejectKeys: Array<string>
+): Record<string, string> {
   return Object.entries(themes).reduce<Record<string, string>>((inlineTheme, [key, value]) => {
+    if (rejectKeys.includes(key)) {
+      return inlineTheme;
+    }
+
     if (key === "opacity") {
       Object.entries(themes.opacity as Record<string, string>).forEach(([opacityKey, opacityValue]) => {
         inlineTheme[`--fibery-opacity-${opacityKey}`] = opacityValue;