@fibery/ui-kit 1.0.4 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.0.4",
+  "version": "1.1.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",
@@ -17,6 +19,7 @@
     "src/loading-sausage.tsx",
     "src/icons/**/*.ts*",
     "src/Select",
+    "src/error-alert.tsx",
     "src/Pallete.ts"
   ],
   "license": "UNLICENSED",
@@ -32,17 +35,19 @@
     "@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",
     "prop-types": "15.7.2",
+    "rc-input-number": "^7.3.4",
     "rc-menu": "9.3.2",
     "rc-progress": "3.2.4",
     "react-color": "2.13.8",
@@ -59,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",
@@ -74,6 +79,7 @@
     "jest-junit": "13.0.0",
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
+    "typescript": "4.7.4",
     "unist-util-reduce": "0.2.2"
   },
   "jest": {

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

@@ -82,15 +82,12 @@ const getMainColor = ({color, dangerous, theme}) => {
     return color;
   }
   if (dangerous) {
-    return colors.danger;
+    return theme.danger;
   }
   if (!theme) {
     return colors.primary;
   }
-  if (theme.mode === "old") {
-    return theme.primary;
-  }
-  return theme.iconColor;
+  return theme.buttonColor;
 };
 
 const getBorderColor = ({mainColor, borderless, primary}) => {
@@ -100,7 +97,7 @@ const getBorderColor = ({mainColor, borderless, primary}) => {
   if (primary) {
     return mainColor;
   }
-  return getOpacities(mainColor).notSoThin;
+  return getOpacities(mainColor).opacity15;
 };
 
 const getHoverBorderColor = ({mainColor, borderless, primary, hoverBgColor}) => {
@@ -115,7 +112,7 @@ const getHoverBorderColor = ({mainColor, borderless, primary, hoverBgColor}) =>
 
 const getTextColor = ({mainColor, primary}) => {
   if (primary) {
-    return colors.inversedTextColor;
+    return themeVars.buttonPrimaryTextColor;
   }
   return mainColor;
 };
@@ -139,7 +136,7 @@ const getHoverBgColor = ({mainColor, borderless, primary}) => {
 
 const getSpinnerColor = ({mainColor, primary}) => {
   if (primary) {
-    return themeVars.inversedTextColor;
+    return colors.inversedTextColor;
   }
   return mainColor;
 };
@@ -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.primary}
+      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,4 @@ 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;

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,
@@ -90,6 +89,12 @@ export const componentsStyles: StylesConfig = {
     overflow: "visible",
     color: themeVars.textColor,
   }),
+  valueContainer(provided) {
+    return {
+      ...provided,
+      minWidth: 10,
+    };
+  },
   multiValue: (provided) => ({
     ...provided,
     color: themeVars.textColor,
@@ -122,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,
@@ -133,6 +139,10 @@ export const componentsStyles: StylesConfig = {
     cursor: state.isDisabled ? "not-allowed" : "default",
   }),
   indicatorSeparator: () => ({}),
+  input: (provided) => ({
+    ...provided,
+    color: themeVars.textColor,
+  }),
 };
 
 export const singleLineComponentsStyle: StylesConfig = {

package/src/ThemeProvider.tsx

@@ -1,9 +1,21 @@
-import {createContext, useContext, ReactNode} from "react";
-import {ThemeColors, getThemeColors, colors} from "./designSystem";
+import invariant from "invariant";
+import {createContext, ReactNode, useContext, useEffect, useState} from "react";
+import {colors, createInlineTheme, getThemeColors, ThemeColors} from "./designSystem";
+import {
+  subscribeOnThemeMenuPreferenceChange,
+  subscribeOnThemeModeChange,
+  subscribeOnThemePreferenceChange,
+  ThemeMenuPreference,
+  ThemeMode,
+  ThemePreference,
+} from "./theme-settings";
 
-const FiberyThemeContext = createContext<ThemeColors>(getThemeColors(colors.brandColors.blue));
+const FiberyThemePreferenceContext = createContext<ThemePreference | null>(null);
+const FiberyThemeMenuPreferenceContext = createContext<ThemeMenuPreference | null>(null);
 
-function FiberyThemeProvider({theme, children}: {theme: ThemeColors; children: ReactNode}): JSX.Element {
+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>;
 }
 
@@ -11,4 +23,118 @@ export function useTheme(): ThemeColors {
   return useContext(FiberyThemeContext);
 }
 
-export {FiberyThemeProvider as ThemeProvider};
+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 applyThemeToRoot(theme: ThemeColors) {
+  const inlineTheme = createInlineTheme(theme);
+  Object.entries(inlineTheme).forEach(([p, v]) => {
+    document.body.style.setProperty(p, v);
+  });
+}
+
+export function RootThemeProvider({
+  initialThemeMode,
+  initialPreference,
+  initialMenuPreference,
+  children,
+}: {
+  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(() => {
+    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);
+    if (themeMode === "dark") {
+      documentElement.classList.add(darkThemeClassName);
+      colorScheme = "dark";
+    } else if (themeMode === "light2") {
+      documentElement.classList.add(lightThemeAndDarkMenuClassName);
+    }
+
+    documentElement.style.colorScheme = colorScheme;
+    meta?.setAttribute("content", colorScheme);
+
+    return () => {
+      documentElement.classList.remove(darkThemeClassName);
+      documentElement.classList.remove(lightThemeAndDarkMenuClassName);
+    };
+  }, [themeMode]);
+  useEffect(() => {
+    applyThemeToRoot(theme);
+  }, [theme]);
+  return (
+    <FiberyThemePreferenceContext.Provider value={themePreference}>
+      <FiberyThemeMenuPreferenceContext.Provider value={themeMenuPreference}>
+        <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      </FiberyThemeMenuPreferenceContext.Provider>
+    </FiberyThemePreferenceContext.Provider>
+  );
+}
+
+interface WithThemeModeProps {
+  themeMode: ThemeMode;
+}
+
+export function withThemeMode<T extends WithThemeModeProps = WithThemeModeProps>(
+  WrappedComponent: React.ComponentType<T>
+) {
+  const displayName = WrappedComponent.displayName || WrappedComponent.name || "Component";
+
+  const ComponentWithThemeMode = (props: Omit<T, keyof WithThemeModeProps>) => {
+    const themeMode = useThemeMode();
+
+    return <WrappedComponent {...(props as T)} themeMode={themeMode} />;
+  };
+
+  ComponentWithThemeMode.displayName = `withThemeMode(${displayName})`;
+
+  return ComponentWithThemeMode;
+}
+
+export {ThemeProvider};

package/src/antd/styles.ts

@@ -32,15 +32,15 @@ export const inputOverrides = {
     transition: `box-shadow ${transition}`,
   },
   disabled: {
-    color: themeVars.accentTextColor,
-    backgroundColor: themeVars.inputDisabledBgColor,
+    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}`,
     },
   },
 };