@fibery/ui-kit 1.0.0

package/src/Loaders.js

@@ -0,0 +1,144 @@
+import {css, cx} from "@linaria/core";
+import {styled} from "@linaria/react";
+import {border, layout, space, textStyles, themeVars} from "./designSystem";
+import {getShiftStyle} from "./icons/getShiftStyle";
+import {LoadingSausage} from "./loading-sausage";
+import {useTheme} from "./ThemeProvider";
+
+export const LoadingView = styled.div`
+  position: ${(props) => (props.absolute ? "absolute" : "static")};
+  height: ${(props) => (props.absolute ? "auto" : "100%")};
+  background: ${(props) => props.backgroundColor || themeVars.mainBg};
+  ${{
+    top: layout.viewHeaderHeight,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    padding: space.xl,
+  }}
+`;
+
+export const LoadingHeader = styled.div`
+  position: ${(props) => (props.absolute ? "absolute" : "static")};
+  ${{
+    top: 0,
+    left: 0,
+    right: 0,
+    height: layout.viewHeaderHeight,
+    backgroundColor: themeVars.mainBg,
+    paddingBottom: space.l,
+    paddingLeft: space.l + space.s,
+    display: "flex",
+    justifyContent: "flex-end",
+    flexDirection: "column",
+    boxSizing: "border-box",
+  }};
+`;
+
+export const LoadingPage = ({absolute = true, contentLoader = true}) => (
+  <>
+    <LoadingHeader absolute={absolute}>
+      <LoadingSausage height={20} minWidth={300} maxWidth={300} animateAppearance />
+    </LoadingHeader>
+    {contentLoader && <LoadingView absolute={absolute} />}
+  </>
+);
+
+export const SidebarLoadingPage = () => (
+  <div
+    className={css`
+      ${{
+        width: layout.typeEditorWidth,
+        minWidth: layout.typeEditorMinWidth,
+        paddingBottom: space.xl,
+        overflowY: "scroll",
+        height: "100%",
+      }}
+    `}
+  >
+    <LoadingPage absolute={false} />
+  </div>
+);
+
+const loaderWrapperStyle = css`
+  ${{
+    padding: space.xxl,
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    marginLeft: space.l,
+    marginRight: space.l,
+    borderRadius: border.radius6,
+  }}
+`;
+
+const loaderStyle = css`
+  ${{paddingBottom: space.s, ...textStyles.regular}}
+`;
+export const LoadingApp = ({backgroundColor = "transparent", appName}) => (
+  <div className={loaderWrapperStyle} style={{backgroundColor}}>
+    <div className={loaderStyle}>{`Loading ${appName} app…`}</div>
+    <LoadingSausage minWidth={100} maxWidth={100} />
+  </div>
+);
+
+const spinner = css`
+  @keyframes spinnerAnimation {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  box-sizing: border-box;
+  border-radius: 50%;
+  border-style: solid;
+  animation: spinnerAnimation 0.6s linear infinite;
+`;
+
+const ContainerSpinner = styled.div`
+  width: ${(props) => props.containerSize}px;
+  height: ${(props) => props.containerSize}px;
+  line-height: ${(props) => props.containerSize}px;
+`;
+
+export const Spinner = ({size = 20, containerSize = 15, width = 2, color = "#000000", backgroundColor = "#FFFFFF"}) => {
+  const spinnerStyle = {
+    width: size,
+    height: size,
+    ...getShiftStyle({elementSize: size, containerSize}),
+    borderWidth: width,
+    borderColor: backgroundColor,
+    borderTopColor: color,
+  };
+
+  return (
+    <ContainerSpinner containerSize={containerSize}>
+      <div style={spinnerStyle} className={spinner} />
+    </ContainerSpinner>
+  );
+};
+
+export const LoadingTreeMenuItem = ({color, Icon, level, children}) => {
+  const theme = useTheme();
+  return (
+    <div
+      className={cx(
+        css`
+          display: flex;
+          gap: 0;
+          align-items: center;
+          height: ${layout.newMenuItemHeight}px;
+        `,
+        level === 0 &&
+          css`
+            padding-left: 5px;
+            gap: ${space.s}px;
+          `
+      )}
+    >
+      <Icon color={color} containerSize={layout.newMenuItemHeight} iconSize={18} />
+      {children || <LoadingSausage height={space.s} inverted={theme.mode === "dark"} />}
+    </div>
+  );
+};

package/src/Select/components.js

@@ -0,0 +1,64 @@
+import {useCallback} from "react";
+import {css} from "@linaria/core";
+import {components} from "react-windowed-select";
+import RemoveIcon from "../icons/react/Remove";
+import {Button} from "../Button";
+import {themeVars, space} from "../designSystem";
+import ArrowBottom from "../icons/react/ArrowBottom";
+import {dropdownIndicatorSize, expanderStyle} from "./styles";
+
+export const Option = ({children, ...props}) => {
+  const {onMouseMove, onMouseOver, ...rest} = props.innerProps;
+  const newProps = Object.assign(props, {innerProps: rest});
+  return <components.Option {...newProps}>{children}</components.Option>;
+};
+
+export const DropdownIndicator = (props) => (
+  <div
+    className={expanderStyle}
+    style={{
+      transform: props.selectProps.menuIsOpen ? "rotate(180deg)" : "",
+    }}
+  >
+    <ArrowBottom iconSize={dropdownIndicatorSize} color={themeVars.disabledTextColor} />
+  </div>
+);
+
+export const ClearIndicator = ({innerProps, selectProps}) => {
+  const onMouseDown = innerProps.onMouseDown;
+  const wrappedOnMouseDown = useCallback(
+    (e) => {
+      onMouseDown(e);
+      // This prevents false positive triggering in rc-trigger
+      e.nativeEvent.stopImmediatePropagation();
+    },
+    [onMouseDown]
+  );
+  return (
+    <Button
+      borderless
+      Icon={RemoveIcon}
+      disabled={selectProps.isDisabled}
+      size={":button-size/super-small"}
+      {...innerProps}
+      onMouseDown={wrappedOnMouseDown}
+    />
+  );
+};
+
+export const NoOptionsMessage = ({children}) => {
+  return (
+    <div
+      className={css`
+        ${{
+          paddingLeft: space.l + 2,
+          paddingRight: space.l + 2,
+          paddingTop: space.m,
+          paddingBottom: space.m,
+        }}
+      `}
+    >
+      {children}
+    </div>
+  );
+};

package/src/Select/index.d.ts

@@ -0,0 +1,11 @@
+import {FunctionComponent, ForwardRefRenderFunction} from "react";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Select: ForwardRefRenderFunction<{focus: () => void}, any>;
+export const CreatableSelect: FunctionComponent<any>;
+export const components: {
+  GroupHeading: FunctionComponent<any>;
+  Option: FunctionComponent<any>;
+  SingleValue: FunctionComponent<any>;
+  MultiValue: FunctionComponent<any>;
+};
+export const combineStyles: (...args: any[]) => any;

package/src/Select/index.js

@@ -0,0 +1,140 @@
+import cn from "classnames";
+import {useCallback, forwardRef} from "react";
+import BaseSelect 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} from "./components";
+import {componentsStyles, singleLineComponentsStyle} from "./styles";
+
+const GroupHeading = (props) => {
+  if (!props.children) {
+    return null;
+  }
+  return <components.GroupHeading {...props} />;
+};
+
+function Menu(props) {
+  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 const combineStyles = (stylesArray) => {
+  return stylesArray.reduce((acc, style) => {
+    Object.keys(style).forEach((key) => {
+      if (acc[key]) {
+        const temp = acc[key];
+        acc[key] = (provided, state) => style[key](temp(provided, state), state);
+      } else {
+        acc[key] = (provided, state) => style[key](provided, state);
+      }
+    });
+    return acc;
+  }, {});
+};
+
+export function SingleRowSelect({styles = {}, ...rest}) {
+  return <Select {...rest} styles={combineStyles([singleLineComponentsStyle, styles])} />;
+}
+
+export const Select = forwardRef(function Select(
+  {components, isCollectionMode, menuPortalTarget, onKeyDown, styles = {}, virtualized = true, ...rest},
+  forwardedRef
+) {
+  const theme = useTheme();
+  const combineThemes = useCallback((providedTheme) => ({...providedTheme, ...theme}), [theme]);
+  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;
+
+  return (
+    <SelectComponent
+      ref={forwardedRef}
+      menuPortalTarget={menuPortalTarget}
+      menuPlacement={"auto"}
+      style={createInlineTheme(theme)}
+      styles={combineStyles([componentsStyles, styles])}
+      theme={combineThemes}
+      isMulti={isCollectionMode}
+      backspaceRemovesValue={isCollectionMode}
+      tabSelectsValue={false}
+      components={{
+        Menu,
+        DropdownIndicator,
+        ClearIndicator,
+        Option,
+        MultiValueRemove: ClearIndicator,
+        NoOptionsMessage,
+        GroupHeading,
+        ...components,
+      }}
+      {...rest}
+      onKeyDown={handleKeyDown}
+      isDisabled={rest.disabled}
+    />
+  );
+});
+
+export function CreatableSelect({components, isCollectionMode, menuPortalTarget, styles = {}, ...rest}) {
+  const theme = useTheme();
+  const combineThemes = useCallback((providedTheme) => ({...providedTheme, ...theme}), [theme]);
+  return (
+    <BaseCreatableSelect
+      menuPortalTarget={menuPortalTarget}
+      menuPlacement={"auto"}
+      styles={combineStyles([componentsStyles, styles])}
+      theme={combineThemes}
+      isMulti={isCollectionMode}
+      backspaceRemovesValue={isCollectionMode}
+      tabSelectsValue={false}
+      components={{
+        Menu,
+        MenuList: WindowedMenuList,
+        DropdownIndicator,
+        ClearIndicator,
+        Option,
+        MultiValueRemove: ClearIndicator,
+        NoOptionsMessage,
+        GroupHeading,
+        ...components,
+      }}
+      {...rest}
+      isDisabled={rest.disabled}
+    />
+  );
+}

package/src/Select/lazy.js

@@ -0,0 +1,35 @@
+import {lazy, Suspense, forwardRef} from "react";
+import {SelectLoader} from "./select-loader";
+
+const LazySelect = lazy(async () => {
+  const {Select} = await import("./index");
+  return {default: Select};
+});
+
+export const ReactSelect = forwardRef((props, forwardedRef) => (
+  <Suspense fallback={<SelectLoader />}>
+    <LazySelect {...props} ref={forwardedRef} />
+  </Suspense>
+));
+
+const CreatableLazySelect = lazy(async () => {
+  const {CreatableSelect} = await import("./index");
+  return {default: CreatableSelect};
+});
+
+export const CreatableReactSelect = (props) => (
+  <Suspense fallback={<SelectLoader />}>
+    <CreatableLazySelect {...props} />
+  </Suspense>
+);
+
+const SingleRowLazySelect = lazy(async () => {
+  const {SingleRowSelect} = await import("./index");
+  return {default: SingleRowSelect};
+});
+
+export const SingleRowReactSelect = (props) => (
+  <Suspense fallback={<SelectLoader />}>
+    <SingleRowLazySelect {...props} />
+  </Suspense>
+);

package/src/Select/select-loader.tsx

@@ -0,0 +1,8 @@
+import {FormFieldLoader} from "../FormFieldLoader";
+import {LoadingSausageList} from "../loading-sausage";
+
+export const SelectLoader = () => (
+  <FormFieldLoader>
+    <LoadingSausageList amount={1} animateAppearance />
+  </FormFieldLoader>
+);

package/src/Select/styles.js

@@ -0,0 +1,133 @@
+import {css} from "@linaria/core";
+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,
+  }}
+`;
+
+function createControlStyle({isSingleLine}) {
+  const childDivStyle = {
+    padding: 0,
+    overflow: "visible",
+  };
+
+  if (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,
+  });
+}
+
+export const componentsStyles = {
+  option: (provided, state) => {
+    const disabledStyles = {
+      cursor: "not-allowed",
+      color: themeVars.disabledTextColor,
+    };
+    const enabledStyles = {
+      ":hover": {
+        backgroundColor: state.isFocused ? themeVars.actionMenuInnerHover : themeVars.actionMenuInnerHover,
+      },
+      ":active": {
+        backgroundColor: themeVars.actionMenuInnerHover,
+      },
+    };
+    return {
+      ...provided,
+      ...textStyles.regular,
+      minHeight: layout.menuItemHeight,
+      paddingLeft: space.l,
+      paddingRight: space.l,
+      paddingTop: 0,
+      paddingBottom: 0,
+      margin: 0,
+      backgroundColor: state.isFocused ? themeVars.actionMenuInnerHover : themeVars.actionMenuInnerBg,
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "stretch",
+      ...(state.isDisabled ? disabledStyles : enabledStyles),
+    };
+  },
+  placeholder: (provided) => ({
+    ...provided,
+    color: themeVars.disabledTextColor,
+    paddingLeft: 0,
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    width: "100%",
+  }),
+  singleValue: (provided) => ({
+    ...provided,
+    overflow: "visible",
+    color: themeVars.textColor,
+  }),
+  multiValue: (provided) => ({
+    ...provided,
+    color: themeVars.textColor,
+    backgroundColor: "auto",
+    marginTop: 0,
+    marginBottom: 0,
+    marginLeft: 0,
+    marginRight: space.l,
+    alignItems: "center",
+    height: layout.inputHeight - 2,
+  }),
+  control: createControlStyle({isSingleLine: false}),
+  group: (provided) => ({
+    ...provided,
+    padding: 0,
+    margin: 0,
+  }),
+  multiValueLabel: () => ({}),
+  groupHeading: (provided) => ({
+    ...provided,
+    paddingLeft: space.l,
+    paddingTop: space.l,
+    margin: 0,
+    ...textStyles.small,
+    color: themeVars.disabledTextColor,
+  }),
+  menuPortal: (provided) => ({
+    ...provided,
+    zIndex: 1050,
+  }),
+  menu: (provided) => ({
+    ...provided,
+    zIndex: 1050,
+    backgroundColor: themeVars.actionMenuInnerBg,
+    boxShadow: themeVars.actionMenuShadow,
+    borderRadius: border.radius6,
+  }),
+  container: (provided, state) => ({
+    ...provided,
+    pointerEvents: "auto",
+    cursor: state.isDisabled ? "not-allowed" : "default",
+  }),
+  indicatorSeparator: () => ({}),
+};
+
+export const singleLineComponentsStyle = {
+  control: createControlStyle({isSingleLine: true}),
+};

package/src/ThemeProvider.tsx

@@ -0,0 +1,14 @@
+import {createContext, useContext, ReactNode} from "react";
+import {ThemeColors, getThemeColors, colors} from "./designSystem";
+
+const FiberyThemeContext = createContext<ThemeColors>(getThemeColors(colors.brandColors.blue));
+
+function FiberyThemeProvider({theme, children}: {theme: ThemeColors; children: ReactNode}): JSX.Element {
+  return <FiberyThemeContext.Provider value={theme}>{children}</FiberyThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeColors {
+  return useContext(FiberyThemeContext);
+}
+
+export {FiberyThemeProvider as ThemeProvider};

package/src/create-inline-theme.ts

@@ -0,0 +1,55 @@
+export function createInlineTheme<T extends Record<string, unknown>>(themes: T): Record<string, string> {
+  return Object.entries(themes).reduce<Record<string, string>>((inlineTheme, [key, value]) => {
+    if (key === "opacity") {
+      Object.entries(themes.opacity as Record<string, string>).forEach(([opacityKey, opacityValue]) => {
+        inlineTheme[`--fibery-opacity-${opacityKey}`] = opacityValue;
+      }, "");
+
+      return inlineTheme;
+    }
+    if (key === "stateColors") {
+      Object.entries(themes.stateColors as Record<string, string>).forEach(([stateColorKey, stateColorValue]) => {
+        inlineTheme[`--fibery-state-colors-${stateColorKey}`] = stateColorValue;
+      }, "");
+
+      return inlineTheme;
+    }
+    if (key === "brandColors") {
+      Object.entries(themes.brandColors as Record<string, string>).forEach(([brandColorKey, brandColorValue]) => {
+        inlineTheme[`--fibery-brand-colors-${brandColorKey}`] = brandColorValue;
+      }, "");
+
+      return inlineTheme;
+    }
+    if (key === "shades") {
+      Object.entries(themes.shades as Record<string, string>).forEach(([shadeKey, shadeValue]) => {
+        inlineTheme[`--fibery-shades-${shadeKey}`] = shadeValue;
+      }, "");
+
+      return inlineTheme;
+    }
+    if (key === "lights") {
+      Object.entries(themes.lights as Record<string, string>).forEach(([lightKey, lightValue]) => {
+        inlineTheme[`--fibery-lights-${lightKey}`] = lightValue;
+      }, "");
+
+      return inlineTheme;
+    }
+    if (key === "separators") {
+      Object.entries(themes.separators as Record<string, string>).forEach(([separatorKey, separatorValue]) => {
+        inlineTheme[`--fibery-separator-${separatorKey}`] = separatorValue;
+      }, "");
+
+      return inlineTheme;
+    }
+    if (key === "inversedSeparators") {
+      Object.entries(themes.inversedSeparators as Record<string, string>).forEach(([separatorKey, separatorValue]) => {
+        inlineTheme[`--fibery-inversed-separators-${separatorKey}`] = separatorValue;
+      }, "");
+
+      return inlineTheme;
+    }
+    inlineTheme[`--fibery-color-${key}`] = value as string;
+    return inlineTheme;
+  }, {});
+}