@fibery/ui-kit 1.3.1 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -15,13 +15,13 @@
     "src/form-field-loader.tsx",
     "src/ThemeProvider.tsx",
     "src/Item.tsx",
-    "src/Loaders.d.ts",
-    "src/Loaders.js",
+    "src/loaders.tsx",
     "src/loading-sausage.tsx",
     "src/icons/**/*.ts*",
     "src/Select",
     "src/error-alert.tsx",
-    "src/Pallete.ts"
+    "src/Pallete.ts",
+    "src/tooltip.tsx"
   ],
   "license": "UNLICENSED",
   "scripts": {
@@ -31,7 +31,7 @@
     "generate-icons": "node scripts/generate-icons.mjs"
   },
   "dependencies": {
-    "@fibery/helpers": "1.0.0",
+    "@fibery/helpers": "1.0.2",
     "@fibery/react": "1.0.0",
     "@linaria/core": "3.0.0-beta.15",
     "@linaria/react": "3.0.0-beta.15",
@@ -39,9 +39,11 @@
     "@radix-ui/react-dropdown-menu": "1.0.0",
     "antd": "4.18.8",
     "chroma-js": "2.1.2",
+    "chrono-node": "^2.4.1",
     "classnames": "2.3.1",
     "color-hash": "1.0.3",
     "d3-shape": "1.3.7",
+    "date-fns": "^2.29.2",
     "emoji-mart": "3.0.1",
     "invariant": "2.2.4",
     "lodash": "4.17.21",
@@ -52,7 +54,7 @@
     "rc-menu": "9.3.2",
     "rc-progress": "3.2.4",
     "react-color": "2.13.8",
-    "react-day-picker": "7.4.8",
+    "react-day-picker": "8.1.3",
     "react-popper": "2.2.5",
     "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",

package/src/Button.js

@@ -9,7 +9,7 @@ import {border, colors, fontWeight, getDarkenColor, getOpacities, opacity, textS
 import MoreIcon from "./icons/react/More";
 import MoreCompactIcon from "./icons/react/MoreCompact";
 import {Item} from "./Item";
-import {Spinner} from "./Loaders";
+import {Spinner} from "./loaders";
 import {useTheme} from "./ThemeProvider";
 
 const baseSize = 14;
@@ -110,9 +110,9 @@ const getHoverBorderColor = ({mainColor, borderless, primary, hoverBgColor}) =>
   return mainColor;
 };
 
-const getTextColor = ({mainColor, primary}) => {
+const getTextColor = ({mainColor, primary, theme}) => {
   if (primary) {
-    return themeVars.buttonPrimaryTextColor;
+    return theme.buttonPrimaryTextColor;
   }
   return mainColor;
 };
@@ -250,13 +250,14 @@ export const Button = forwardRef(
       onClick,
       className,
       shortcut,
+      noOverflow = true,
       ...rest
     },
     forwardedRef
   ) => {
     const theme = useTheme();
     const mainColor = getMainColor({color, dangerous, theme});
-    const textColor = getTextColor({mainColor, primary});
+    const textColor = getTextColor({mainColor, primary, theme});
     const spinnerBgColor = getOpacities(textColor).light;
     const spinnerColor = getSpinnerColor({mainColor, primary});
     const bgColor = getBgColor({mainColor, primary});
@@ -315,7 +316,7 @@ export const Button = forwardRef(
           }}
           containerClassName={cx({[leftContainerClassName]: leftContainer && hasNonEmptyChild(children)})}
           rightContainer={shortcut && <span className={cx(shortcutStyle)}>{shortcut}</span>}
-          noOverflow
+          noOverflow={noOverflow}
         >
           {children}
         </Item>

package/src/Select/index.tsx

@@ -10,6 +10,9 @@ import BaseSelect, {
   OptionProps,
   SingleValueProps,
   MultiValueProps,
+  SingleValue,
+  MultiValue,
+  mergeStyles,
 } from "react-select";
 import BaseCreatableSelect from "react-select/creatable";
 import WindowedSelect, {components, WindowedMenuList} from "react-windowed-select";
@@ -18,7 +21,16 @@ 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};
+export type {
+  OptionsOrGroups,
+  GroupBase,
+  StylesConfig,
+  OptionProps,
+  SingleValueProps,
+  MultiValueProps,
+  SingleValue,
+  MultiValue,
+};
 
 function GroupHeading<
   Option = unknown,
@@ -46,24 +58,8 @@ 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;
-  }, {});
+>(stylesConfigs: StylesConfig<Option, IsMulti, Group>[]) {
+  return stylesConfigs.reduce(mergeStyles, {});
 }
 
 export type SelectProps<
@@ -75,6 +71,7 @@ export type SelectProps<
   isCollectionMode?: IsMulti;
   disabled?: boolean;
 };
+
 export function SingleRowSelect<
   Option = unknown,
   IsMulti extends boolean = boolean,

package/src/designSystem.ts

@@ -207,9 +207,13 @@ const lightColors = {
   floatEditorMenuBg: slate.slate1,
   floatEditorActiveColor: indigoDark.indigo10,
   commentColor: getOpacities(yellow.yellow6).opacity60,
+  cellBackgroundColor: sage.sage2,
+  cellBackgroundHoverColor: getOpacities(sage.sage6).opacity30,
   cellBorderColor: getOpacities(slate.slate8).opacity50,
   tableRowWarningColor: getOpacities(yellow.yellow6).opacity60,
   errorBgColor: getOpacities(red.red9).opacity60,
+  errorTextColor: red.red12,
+  errorButtonColor: red.red9,
   warningBgColor: getOpacities(yellow.yellow6).opacity60,
   warningButtonColor: yellow.yellow11,
   infoBox: getOpacities(yellow.yellow4).opacity50,
@@ -234,7 +238,6 @@ const lightColors = {
   }`,
   selectedColorBorder: getOpacities(slate.slate6).opacity50,
   //end
-  placeholderTextColor: "#65788B",
   disabledInversedTextColor: shades.light,
   danger: brandColors.red,
   active: brandColors.red,
@@ -242,8 +245,6 @@ const lightColors = {
   cardBg: "#FFFFFF",
   cardSelected: "#FFFB8F",
   cardSelectedHover: "rgba(240, 244, 247, 0.6)",
-  errorBg: "rgba(255, 241, 240, 1)",
-  timelineCard: "#FCE07D",
   transparent,
   shades: lights,
   lights: shades,
@@ -283,7 +284,7 @@ const darkColors = {
   sidebarShadow: `-3px 0px 10px 0px ${getOpacities(slateDark.slate1).opacity80}`,
   textColor: slate.slate6,
   textSelectionColor: getOpacities(blueDark.blue10).opacity40,
-  accentTextColor: slate.slate10,
+  accentTextColor: slateDark.slate10,
   disabledTextColor: slateDark.slate9,
   inversedTextColor: slateDark.slate6,
   linkColor: indigoDark.indigo11,
@@ -331,10 +332,10 @@ const darkColors = {
   iconColor: slate.slate9,
   appIconColor: getOpacities(slate.slate2).opacity70,
   mentionBgColor: slateDark.slate5,
-  entityCardBgColor: slateDark.slate4,
+  entityCardBgColor: slateDark.slate5,
   entityCardSelectedColor: slateDark.slate5,
-  entityCardHoverColor: getOpacities(slateDark.slate5).opacity95,
-  entityCardDoneColor: slateDark.slate3,
+  entityCardHoverColor: getOpacities(slateDark.slate6).opacity50,
+  entityCardDoneColor: getOpacities(slateDark.slate5).opacity30,
   entityCardShadow: `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${
     getOpacities(slateDark.slate2).opacity20
   }`,
@@ -351,12 +352,16 @@ const darkColors = {
   floatEditorMenuBg: slateDark.slate6,
   floatEditorActiveColor: indigoDark.indigo11,
   commentColor: getOpacities(yellowDark.yellow9).opacity40,
+  cellBackgroundColor: slateDark.slate2,
+  cellBackgroundHoverColor: getOpacities(slateDark.slate6).opacity30,
   cellBorderColor: getOpacities(slateDark.slate9).opacity50,
   tableRowWarningColor: getOpacities(yellowDark.yellow9).opacity40,
   errorBgColor: getOpacities(redDark.red9).opacity60,
+  errorTextColor: redDark.red12,
+  errorButtonColor: redDark.red10,
   warningBgColor: getOpacities(yellowDark.yellow8).opacity60,
   warningButtonColor: yellowDark.yellow11,
-  infoBox: getOpacities(yellowDark.yellow8).opacity40,
+  infoBox: getOpacities(yellowDark.yellow9).opacity20,
   appCardBgColor: slateDark.slate2,
   appCardHoverColor: slateDark.slate2,
   appCardShadow: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity50}, 0 2px 4px -4px ${
@@ -376,7 +381,6 @@ const darkColors = {
   instrumentsMenuShadow: `0px 2px 8px ${getOpacities(slate.slate2).opacity95}`,
   selectedColorBorder: getOpacities(slate.slate6).opacity20,
   //end
-  placeholderTextColor: "#65788B",
   disabledInversedTextColor: lights.light,
   danger: redDark.red9,
   active: brandColors.red,
@@ -384,8 +388,6 @@ const darkColors = {
   cardBg: slateDark.slate6,
   cardSelected: slateDark.slate5,
   cardSelectedHover: slateDark.slate5,
-  errorBg: "rgba(255, 241, 240, 1)",
-  timelineCard: "#FCE07D",
   transparent,
   shades,
   lights,
@@ -550,7 +552,6 @@ export const colors = {
   brandColors,
   stateColors,
   textColor: "#2A3844",
-  placeholderTextColor: "#65788B",
   disabledTextColor: shades.regular,
   inversedTextColor: "#FFFFFF",
   disabledInversedTextColor: lights.light,
@@ -564,7 +565,6 @@ export const colors = {
   unitBg: "rgba(220, 224, 228, 0.33)",
   infoBox: "rgba(255, 212, 0, 0.2)",
   errorBg: "rgba(255, 241, 240, 1)",
-  timelineCard: "#FCE07D",
   timelineScaleSelectBorderColor: chroma("#FFFFFF").alpha(opacity.regular).css(),
   transparent,
   shades,
@@ -846,8 +846,6 @@ export const textStyles = {
     lineHeight: lineHeight.regular,
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
-    backgroundColor: colors.timelineCard,
-    border: `1px solid ${colors.timelineCard}`,
     borderRadius: radius,
   },
   important: {

package/src/error-alert.tsx

@@ -1,29 +1,29 @@
 import {css} from "@linaria/core";
-import {colors, getOpacities, layout, radius, space, textStyles} from "./designSystem";
+import {layout, border, space, textStyles, themeVars} from "./designSystem";
 import {Button} from "./Button";
 import CloseIcon from "./icons/react/Close";
+import {useTheme} from "@fibery/ui-kit/src/ThemeProvider";
 
 const errorAlert = css`
-  border: 1px solid ${colors.stateColors.error};
-  background-color: ${colors.errorBg};
-  padding: 0 ${space.l}px;
+  background-color: ${themeVars.errorBgColor};
+  padding: ${space.m}px ${space.l}px;
   min-height: ${layout.itemHeight}px;
-  border-radius: ${radius}px;
+  border-radius: ${border.radius6}px;
   display: flex;
   gap: ${space.s}px;
   align-items: center;
 `;
 
 const messageStyle = css`
-  ${textStyles.heading5}
+  ${textStyles.heading5};
+  color: ${themeVars.errorTextColor};
 `;
 
 const descriptionStyle = css`
-  ${textStyles.regular}
+  ${textStyles.regular};
+  color: ${themeVars.errorTextColor};
 `;
 
-const buttonColor = getOpacities(colors.placeholderTextColor).overlay;
-
 export function ErrorAlert({
   message,
   description,
@@ -35,6 +35,8 @@ export function ErrorAlert({
   closable?: boolean;
   onClose?: () => void;
 }): JSX.Element {
+  const theme = useTheme();
+  const buttonColor = theme.errorButtonColor;
   return (
     <div className={errorAlert}>
       <div
@@ -47,7 +49,7 @@ export function ErrorAlert({
       </div>
       {closable && onClose ? (
         <div>
-          <Button borderless onClick={onClose} color={buttonColor} Icon={CloseIcon} width={26} />
+          <Button borderless onClick={onClose} color={buttonColor} Icon={CloseIcon} width={24} />
         </div>
       ) : null}
     </div>

package/src/icons/ast/Github.ts

@@ -0,0 +1,32 @@
+// This icon file is generated automatically.
+
+import {IconDefinition} from "../types";
+
+const Github: IconDefinition = {
+  icon: {
+    type: "root",
+    children: [
+      {
+        type: "element",
+        tagName: "svg",
+        properties: {viewBox: "0 0 20 20"},
+        children: [
+          {
+            type: "element",
+            tagName: "path",
+            properties: {
+              clipRule: "evenodd",
+              d: "M10 2c-4.42 0-8 3.58-8 8 0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 18 10c0-4.42-3.58-8-8-8z",
+              fillRule: "evenodd",
+            },
+            children: [],
+          },
+        ],
+        metadata: "",
+      },
+    ],
+  },
+  name: "github",
+};
+
+export default Github;

package/src/icons/ast/Gitlab.ts

@@ -0,0 +1,30 @@
+// This icon file is generated automatically.
+
+import {IconDefinition} from "../types";
+
+const Gitlab: IconDefinition = {
+  icon: {
+    type: "root",
+    children: [
+      {
+        type: "element",
+        tagName: "svg",
+        properties: {viewBox: "0 0 20 20"},
+        children: [
+          {
+            type: "element",
+            tagName: "path",
+            properties: {
+              d: "m17.734 8.636-.022-.058-2.178-5.717a.57.57 0 0 0-.89-.236.586.586 0 0 0-.194.295l-1.47 4.526H7.025L5.555 2.92a.575.575 0 0 0-.194-.296.581.581 0 0 0-.666-.036.575.575 0 0 0-.224.272L2.289 8.575l-.022.058a4.09 4.09 0 0 0-.11 2.576 4.069 4.069 0 0 0 1.452 2.125l.007.006.02.014 3.318 2.5 1.64 1.249 1 .76a.67.67 0 0 0 .814 0l1-.76 1.64-1.25 3.338-2.514.009-.007a4.07 4.07 0 0 0 1.448-2.123 4.092 4.092 0 0 0-.109-2.573Z",
+            },
+            children: [],
+          },
+        ],
+        metadata: "",
+      },
+    ],
+  },
+  name: "gitlab",
+};
+
+export default Gitlab;