@fibery/ui-kit 1.0.2 → 1.0.5

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "main": "index.ts",
   "private": false,
   "files": [
+    "src/antd/styles.ts",
     "src/Button.d.ts",
     "src/Button.js",
     "src/designSystem.ts",
@@ -16,6 +17,7 @@
     "src/loading-sausage.tsx",
     "src/icons/**/*.ts*",
     "src/Select",
+    "src/error-alert.tsx",
     "src/Pallete.ts"
   ],
   "license": "UNLICENSED",
@@ -42,14 +44,15 @@
     "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",
     "react-day-picker": "7.4.8",
     "react-popper": "2.2.5",
-    "react-select": "3.0.8",
+    "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
-    "react-windowed-select": "2.0.5",
+    "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1"
   },
   "peerDependencies": {
@@ -64,6 +67,7 @@
     "@types/chroma-js": "2.1.3",
     "@types/color-hash": "1.0.2",
     "@types/emoji-mart": "3.0.8",
+    "csstype": "3.0.8",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "fs-extra": "10.0.0",
@@ -72,6 +76,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.js

@@ -82,7 +82,7 @@ const getMainColor = ({color, dangerous, theme}) => {
     return color;
   }
   if (dangerous) {
-    return colors.danger;
+    return theme.danger;
   }
   if (!theme) {
     return colors.primary;
@@ -90,7 +90,7 @@ const getMainColor = ({color, dangerous, theme}) => {
   if (theme.mode === "old") {
     return theme.primary;
   }
-  return theme.iconColor;
+  return theme.buttonColor;
 };
 
 const getBorderColor = ({mainColor, borderless, primary}) => {
@@ -100,7 +100,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 +115,7 @@ const getHoverBorderColor = ({mainColor, borderless, primary, hoverBgColor}) =>
 
 const getTextColor = ({mainColor, primary}) => {
   if (primary) {
-    return colors.inversedTextColor;
+    return themeVars.buttonPrimaryTextColor;
   }
   return mainColor;
 };
@@ -139,7 +139,7 @@ const getHoverBgColor = ({mainColor, borderless, primary}) => {
 
 const getSpinnerColor = ({mainColor, primary}) => {
   if (primary) {
-    return themeVars.inversedTextColor;
+    return colors.inversedTextColor;
   }
   return mainColor;
 };
@@ -354,7 +354,7 @@ export function ActionsButtonCompact({inverted, onClick}) {
       size={":button-size/small"}
       Icon={MoreCompactIcon}
       onClick={onClick}
-      color={inverted ? colors.inversedTextColor : theme.primary}
+      color={inverted ? colors.inversedTextColor : theme.buttonColor}
       borderless
     />
   );

package/src/Select/components.tsx

@@ -0,0 +1,87 @@
+import {useCallback, ReactNode} from "react";
+import {css} from "@linaria/core";
+import {components} from "react-windowed-select";
+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";
+
+export const Option = <
+  TOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<TOption> = GroupBase<TOption>
+>({
+  children,
+  ...props
+}: OptionProps<TOption, IsMulti, Group>) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {onMouseMove, onMouseOver, ...rest} = props.innerProps;
+  const newProps = Object.assign(props, {innerProps: rest});
+  return <components.Option {...newProps}>{children}</components.Option>;
+};
+
+export function DropdownIndicator<
+  TOption,
+  IsMulti extends boolean = boolean,
+  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>
+  );
+}
+
+export function ClearIndicator<
+  TOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<TOption> = GroupBase<TOption>
+>({
+  innerProps,
+  selectProps,
+}: ClearIndicatorProps<TOption, IsMulti, Group> | MultiValueRemoveProps<TOption, IsMulti, Group>) {
+  const onMouseDown = innerProps.onMouseDown;
+  const wrappedOnMouseDown = useCallback(
+    (e) => {
+      onMouseDown?.(e);
+      // This prevents false positive triggering in rc-trigger
+      e.nativeEvent.stopImmediatePropagation();
+    },
+    [onMouseDown]
+  );
+  return (
+    <div {...innerProps}>
+      <Button
+        borderless
+        Icon={RemoveIcon}
+        disabled={selectProps.isDisabled}
+        size={":button-size/super-small"}
+        onMouseDown={wrappedOnMouseDown}
+      />
+    </div>
+  );
+}
+
+export const NoOptionsMessage = ({children}: {children: ReactNode}) => {
+  return (
+    <div
+      className={css`
+        ${{
+          paddingLeft: space.l + 2,
+          paddingRight: space.l + 2,
+          paddingTop: space.m,
+          paddingBottom: space.m,
+        }}
+      `}
+    >
+      {children}
+    </div>
+  );
+};

package/src/Select/index.tsx

@@ -0,0 +1,210 @@
+import cn from "classnames";
+import {useCallback, forwardRef} from "react";
+import BaseSelect, {
+  GroupHeadingProps,
+  MenuProps,
+  StylesConfig,
+  Props as BaseSelectProps,
+  GroupBase,
+  OptionsOrGroups,
+  OptionProps,
+  SingleValueProps,
+  MultiValueProps,
+} from "react-select";
+import BaseCreatableSelect from "react-select/creatable";
+import WindowedSelect, {components, WindowedMenuList} from "react-windowed-select";
+import {createInlineTheme} from "../designSystem";
+import {useTheme} from "../ThemeProvider";
+import {ClearIndicator, DropdownIndicator, NoOptionsMessage, Option as OptionComponent} from "./components";
+import {componentsStyles, singleLineComponentsStyle} from "./styles";
+
+export type {OptionsOrGroups, GroupBase, StylesConfig, OptionProps, SingleValueProps, MultiValueProps};
+
+function GroupHeading<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(props: GroupHeadingProps<Option, IsMulti, Group>) {
+  if (!props.children) {
+    return null;
+  }
+  return <components.GroupHeading {...props} />;
+}
+
+function Menu<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
+  props: MenuProps<Option, IsMulti, Group>
+) {
+  const theme = useTheme();
+  const {innerProps, className} = props;
+  const overridedInnerProps = {...innerProps, style: {...innerProps.style, ...createInlineTheme(theme)}};
+  return <components.Menu {...props} innerProps={overridedInnerProps} className={cn(className, "react-select-menu")} />;
+}
+
+export {components};
+
+export function combineStyles<
+  Option,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(stylesArray: StylesConfig<Option, IsMulti, Group>[]): StylesConfig<Option, IsMulti, Group> {
+  return stylesArray.reduce<StylesConfig<Option, IsMulti, Group>>((acc, style) => {
+    Object.keys(style).forEach((key) => {
+      /* eslint-disable @typescript-eslint/ban-ts-comment */
+      // @ts-ignore
+      if (acc[key]) {
+        // @ts-ignore
+        const temp = acc[key];
+        // @ts-ignore
+        acc[key] = (provided, state) => style[key](temp(provided, state), state);
+      } else {
+        // @ts-ignore
+        acc[key] = (provided, state) => style[key](provided, state);
+      }
+      /* eslint-enable @typescript-eslint/ban-ts-comment */
+    });
+    return acc;
+  }, {});
+}
+
+export type SelectProps<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> = Omit<Omit<Omit<BaseSelectProps<Option, IsMulti, Group>, "isMulti">, "backspaceRemovesValue">, "isDisabled"> & {
+  virtualized?: boolean;
+  isCollectionMode?: IsMulti;
+  disabled?: boolean;
+};
+export function SingleRowSelect<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({styles = {}, ...rest}: SelectProps<Option, IsMulti, Group>) {
+  return (
+    <Select<Option, IsMulti, Group>
+      {...rest}
+      styles={combineStyles<Option, IsMulti, Group>([
+        singleLineComponentsStyle as unknown as StylesConfig<Option, IsMulti, Group>,
+        styles,
+      ])}
+    />
+  );
+}
+
+export const Select = forwardRef(function Select<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(
+  {
+    components,
+    isCollectionMode,
+    menuPortalTarget,
+    onKeyDown,
+    styles = {},
+    virtualized = true,
+    ...rest
+  }: SelectProps<Option, IsMulti, Group>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  forwardedRef: any
+) {
+  const handleKeyDown = useCallback(
+    (e) => {
+      switch (e.key) {
+        case "Escape":
+          if (rest.menuIsOpen) {
+            e.stopPropagation();
+          }
+          break;
+        case "Home":
+          e.preventDefault();
+          if (e.shiftKey) {
+            e.target.selectionStart = 0;
+          } else {
+            e.target.setSelectionRange(0, 0);
+          }
+          break;
+        case "End": {
+          e.preventDefault();
+          const len = e.target.value.length;
+          if (e.shiftKey) {
+            e.target.selectionEnd = len;
+          } else {
+            e.target.setSelectionRange(len, len);
+          }
+          break;
+        }
+        default:
+      }
+      onKeyDown && onKeyDown(e);
+    },
+    [onKeyDown, rest.menuIsOpen]
+  );
+
+  const SelectComponent = (virtualized ? WindowedSelect : BaseSelect) as unknown as typeof BaseSelect;
+
+  return (
+    <SelectComponent
+      ref={forwardedRef}
+      menuPortalTarget={menuPortalTarget}
+      menuPlacement={"auto"}
+      styles={combineStyles<Option, IsMulti, Group>([
+        componentsStyles as unknown as StylesConfig<Option, IsMulti, Group>,
+        styles,
+      ])}
+      isMulti={isCollectionMode}
+      backspaceRemovesValue={isCollectionMode}
+      tabSelectsValue={false}
+      components={{
+        Menu,
+        DropdownIndicator,
+        ClearIndicator,
+        Option: OptionComponent,
+        MultiValueRemove: ClearIndicator,
+        NoOptionsMessage,
+        GroupHeading,
+        ...components,
+      }}
+      {...rest}
+      onKeyDown={handleKeyDown}
+      isDisabled={rest.disabled}
+    />
+  );
+  // eslint-disable-next-line no-use-before-define
+}) as <Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
+  // eslint-disable-next-line no-use-before-define,@typescript-eslint/no-explicit-any
+  props: SelectProps<Option, IsMulti, Group> & {ref?: any}
+) => JSX.Element;
+
+export function CreatableSelect<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({components, isCollectionMode, menuPortalTarget, styles = {}, ...rest}: SelectProps<Option, IsMulti, Group>) {
+  return (
+    <BaseCreatableSelect
+      menuPortalTarget={menuPortalTarget}
+      menuPlacement={"auto"}
+      styles={combineStyles<Option, IsMulti, Group>([
+        componentsStyles as unknown as StylesConfig<Option, IsMulti, Group>,
+        styles,
+      ])}
+      isMulti={isCollectionMode}
+      backspaceRemovesValue={isCollectionMode}
+      tabSelectsValue={false}
+      components={{
+        Menu,
+        MenuList: WindowedMenuList,
+        DropdownIndicator,
+        ClearIndicator,
+        Option: OptionComponent,
+        MultiValueRemove: ClearIndicator,
+        NoOptionsMessage,
+        GroupHeading,
+        ...components,
+      }}
+      {...rest}
+      isDisabled={rest.disabled}
+    />
+  );
+}

package/src/Select/{styles.js → styles.ts}

@@ -1,4 +1,6 @@
 import {css} from "@linaria/core";
+import {Property} from "csstype";
+import type {StylesConfig, CSSObjectWithLabel, ControlProps} from "react-select";
 import {inputOverrides} from "../antd/styles";
 import {border, layout, space, textStyles, themeVars, transition} from "../designSystem";
 
@@ -12,8 +14,12 @@ export const expanderStyle = css`
   }}
 `;
 
-function createControlStyle({isSingleLine}) {
-  const childDivStyle = {
+function createControlStyle({
+  isSingleLine,
+}: {
+  isSingleLine: boolean;
+}): (base: CSSObjectWithLabel, props: ControlProps) => CSSObjectWithLabel {
+  const childDivStyle: CSSObjectWithLabel = {
     padding: 0,
     overflow: "visible",
   };
@@ -22,23 +28,24 @@ function createControlStyle({isSingleLine}) {
     childDivStyle.flexWrap = "nowrap";
   }
 
-  return (provided, state) => ({
-    display: "flex",
-    flexWrap: isSingleLine ? "nowrap" : "wrap",
-    justifyContent: "space-between",
-    width: "100%",
-    minHeight: layout.inputHeight,
-    ...inputOverrides.main,
-    ...(state.isFocused && inputOverrides.focus),
-    ...(state.isDisabled && inputOverrides.disabled),
-    ":hover": !state.isFocused && !state.isDisabled && inputOverrides.hover,
-    paddingLeft: space.l,
-    paddingRight: space.l,
-    "& > div": childDivStyle,
-  });
+  return (provided, state) =>
+    ({
+      display: "flex",
+      flexWrap: isSingleLine ? "nowrap" : "wrap",
+      justifyContent: "space-between",
+      width: "100%",
+      ...inputOverrides.main,
+      minHeight: layout.inputHeight,
+      ...(state.isFocused && inputOverrides.focus),
+      ...(state.isDisabled && inputOverrides.disabled),
+      ":hover": !state.isFocused && !state.isDisabled ? inputOverrides.hover : {},
+      paddingLeft: space.l,
+      paddingRight: space.l,
+      "& > div": childDivStyle,
+    } as unknown as CSSObjectWithLabel);
 }
 
-export const componentsStyles = {
+export const componentsStyles: StylesConfig = {
   option: (provided, state) => {
     const disabledStyles = {
       cursor: "not-allowed",
@@ -83,6 +90,12 @@ export const componentsStyles = {
     overflow: "visible",
     color: themeVars.textColor,
   }),
+  valueContainer(provided) {
+    return {
+      ...provided,
+      minWidth: 10,
+    };
+  },
   multiValue: (provided) => ({
     ...provided,
     color: themeVars.textColor,
@@ -117,7 +130,7 @@ export const componentsStyles = {
     ...provided,
     zIndex: 1050,
     backgroundColor: themeVars.actionMenuInnerBg,
-    boxShadow: themeVars.actionMenuShadow,
+    boxShadow: themeVars.actionMenuShadow as unknown as Property.BoxShadow,
     borderRadius: border.radius6,
   }),
   container: (provided, state) => ({
@@ -126,8 +139,12 @@ export const componentsStyles = {
     cursor: state.isDisabled ? "not-allowed" : "default",
   }),
   indicatorSeparator: () => ({}),
+  input: (provided) => ({
+    ...provided,
+    color: themeVars.textColor,
+  }),
 };
 
-export const singleLineComponentsStyle = {
+export const singleLineComponentsStyle: StylesConfig = {
   control: createControlStyle({isSingleLine: true}),
 };

package/src/ThemeProvider.tsx

@@ -1,14 +1,103 @@
-import {createContext, useContext, ReactNode} from "react";
-import {ThemeColors, getThemeColors, colors} from "./designSystem";
+import {createContext, ReactNode, useContext, useEffect, useMemo, useState} from "react";
+import {colors, createInlineTheme, getThemeColors, ThemeColors} from "./designSystem";
+import {
+  subscribeOnThemeModeChange,
+  subscribeOnThemePreferenceChange,
+  ThemeMode,
+  ThemePreference,
+} from "./theme-settings";
 
-const FiberyThemeContext = createContext<ThemeColors>(getThemeColors(colors.brandColors.blue));
+const FiberyThemeModeContext = createContext<{themeMode: ThemeMode; themePreference: ThemePreference}>({
+  themeMode: "light",
+  themePreference: "auto",
+});
+const FiberyThemeContext = createContext<ThemeColors>(getThemeColors(colors.brandColors.blue, "light"));
 
-function FiberyThemeProvider({theme, children}: {theme: ThemeColors; children: ReactNode}): JSX.Element {
+function ThemeProvider({theme, children}: {theme: ThemeColors; children: ReactNode}): JSX.Element {
   return <FiberyThemeContext.Provider value={theme}>{children}</FiberyThemeContext.Provider>;
 }
 
+function ThemeModeProvider({
+  oldTheming = true,
+  initialThemeMode,
+  initialPreference,
+  children,
+}: {
+  oldTheming: boolean;
+  initialThemeMode: ThemeMode;
+  initialPreference: ThemePreference;
+  children: ReactNode;
+}): JSX.Element {
+  const [themeMode, setThemeMode] = useState<ThemeMode>(initialThemeMode);
+  const [themePreference, setThemePreference] = useState<ThemePreference>(initialPreference);
+  useEffect(() => {
+    if (!oldTheming) {
+      const unsubscribeMode = subscribeOnThemeModeChange(setThemeMode);
+      const unsubscribePreference = subscribeOnThemePreferenceChange(setThemePreference);
+      return () => {
+        unsubscribeMode();
+        unsubscribePreference();
+      };
+    }
+    // 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 {FiberyThemeProvider as ThemeProvider};
+export function useThemeMode(): ThemeMode {
+  return useContext(FiberyThemeModeContext).themeMode;
+}
+
+export function useThemePreference(): ThemePreference {
+  return useContext(FiberyThemeModeContext).themePreference;
+}
+
+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>;
+}
+
+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, ThemeModeProvider};