@fibery/ui-kit 1.35.0 → 1.36.1

package/scripts/generate-icons.mjs

@@ -0,0 +1,116 @@
+import path from "path";
+import fs from "fs-extra";
+import {readFile} from "fs/promises";
+import svgo from "svgo";
+import {parse} from "svg-parser";
+import glob from "glob";
+import {promisify} from "util";
+import _ from "lodash";
+import {recursiveReduce} from "unist-util-reduce";
+import {fileURLToPath} from "url";
+
+const svgoConfig = (prefix) => ({
+  plugins: [
+    {
+      name: "preset-default",
+    },
+    {
+      name: "prefixIds",
+      params: {
+        prefix,
+      },
+    },
+  ],
+});
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const template = `
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const <%= identifier %>: IconDefinition = <%= content %>;
+
+export default <%= identifier %>;
+`;
+
+const render = _.template(
+  `
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import <%= svgIdentifier %>Svg from '../ast/<%= svgIdentifier %>';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const <%= svgIdentifier %> = forwardRef<SVGSVGElement, IconBaseProps>(function <%= svgIdentifier %>(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={<%= svgIdentifier %>Svg} />});
+
+export default <%= svgIdentifier %>;
+`.trim()
+);
+
+const defTemplate = _.template(template);
+
+const iconsDir = path.join(__dirname, "../src/icons");
+const iconsSvgPathDir = path.join(iconsDir, "./svg");
+const iconsReactPathDir = path.join(iconsDir, "./react");
+const iconsAstPathDir = path.join(iconsDir, "./ast");
+const iconPaths = await promisify(glob)("**/*.svg", {cwd: iconsSvgPathDir});
+
+await fs.remove(iconsReactPathDir);
+await fs.remove(iconsAstPathDir);
+let entryText =
+  `
+  // This icon file is generated automatically.
+  `.trim() + "\n";
+for (const iconPath of iconPaths) {
+  const name = _.upperFirst(_.camelCase(iconPath.replace("/", "-").replace(".svg", "")));
+  const ast = parse(
+    svgo.optimize((await readFile(path.join(iconsSvgPathDir, iconPath))).toString(), svgoConfig(name)).data
+  );
+
+  await fs.outputFile(
+    path.join(iconsAstPathDir, `./${name}.ts`),
+    defTemplate({
+      identifier: name,
+      content: JSON.stringify({
+        icon: recursiveReduce(ast, (node) => {
+          const {class: className, xmlns, ...rest} = node.properties ?? {};
+          return {
+            ...node,
+            properties: Object.fromEntries(Object.entries(rest).map(([key, value]) => [_.camelCase(key), value])),
+          };
+        }),
+        name: _.kebabCase(name),
+      }),
+    })
+  );
+
+  await fs.outputFile(
+    path.join(iconsReactPathDir, `${name}.tsx`),
+    render({
+      svgIdentifier: name,
+    })
+  );
+
+  entryText += `export { default as ${name} } from './${name}';\n`;
+}
+await fs.outputFile(path.join(iconsReactPathDir, `./index.tsx`), entryText);
+await fs.outputFile(path.join(iconsAstPathDir, `./index.tsx`), entryText);
+
+// import {getSvg, iconNames} from "../Icon";
+//
+// it.skip("generate", async () => {
+//   console.log(iconNames);
+//   for (const iconName of iconNames) {
+//     await fs.outputFile(
+//       path.join(__dirname, "./icons", iconName.replace(":icon", "svg") + ".svg"),
+//       `<?xml version="1.0" standalone="no"?>\n` + getSvg({name: iconName})
+//     );
+//   }
+//   expect(true).toEqual(true);
+// });

package/src/__mocks__/createInlineTheme.js

@@ -0,0 +1,3 @@
+export function createInlineTheme() {
+  return {};
+}

package/src/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

package/src/a11y-color.ts

@@ -27,7 +27,7 @@ class LRUCache<TKey, TValue> {
     this.#cache.delete(key);
 
     if (this.#cache.size === this.#capacity) {
-      this.#cache.delete(this.#cache.keys().next().value);
+      this.#cache.delete(this.#cache.keys().next().value!);
       this.#cache.set(key, value);
     } else {
       this.#cache.set(key, value);

package/src/action-badge.tsx

@@ -0,0 +1,63 @@
+import {css, cx} from "@linaria/core";
+import {forwardRef, ReactNode} from "react";
+import {BaseButton, BaseButtonProps} from "./button/base-button";
+import {space, themeVars, typeSizes} from "./design-system";
+import {iconSizeVar} from "./icons/Icon";
+
+const containerStyle = css`
+  display: inline-flex;
+  vertical-align: text-top;
+  height: 18px;
+  align-items: center;
+  padding: ${space.s2}px ${space.s4}px;
+  border-radius: 20px;
+
+  font-size: ${typeSizes[6]}px;
+  text-transform: uppercase;
+
+  &:is(:disabled) {
+    color: ${themeVars.accentTextColor};
+    border-color: ${themeVars.colorBorderButtonOutlineNeutralDefault};
+  }
+
+  ${iconSizeVar}: 14px;
+`;
+
+const smallStyle = css`
+  height: 16px;
+
+  ${iconSizeVar}: 12px;
+`;
+
+interface ActionBadgeProps extends BaseButtonProps {
+  iconStart?: ReactNode;
+  iconEnd?: ReactNode;
+  size?: "small" | "default";
+}
+
+export const ActionBadge = forwardRef<HTMLButtonElement, ActionBadgeProps>(function ActionBadgeComponent(
+  {className, iconStart, iconEnd, size, children, ...rest},
+  ref
+) {
+  return (
+    <BaseButton
+      ref={ref}
+      className={cx(containerStyle, size === "small" && smallStyle, className)}
+      color="accent"
+      variant="outline"
+      {...rest}
+    >
+      {iconStart}
+      {children ? (
+        <span
+          className={css`
+            padding: 0 ${space.s2}px;
+          `}
+        >
+          {children}
+        </span>
+      ) : null}
+      {iconEnd}
+    </BaseButton>
+  );
+});

package/src/actions-panel.tsx

@@ -0,0 +1,50 @@
+import {Children, forwardRef, ReactElement, ReactNode} from "react";
+import {css} from "@linaria/core";
+import {space} from "./design-system";
+
+const gridStyle = css`
+  align-items: center;
+  position: relative;
+`;
+
+type Props = {
+  children: ReactNode;
+  inline?: boolean;
+  gap?: number;
+};
+export const ActionsPanel = forwardRef<HTMLDivElement, Props>(function ActionsPanelComponent(
+  {children, inline, gap = space.s4},
+  ref
+) {
+  const childrenArray = Children.toArray(children);
+  if (childrenArray.length === 0) {
+    return null;
+  }
+  return (
+    <div
+      data-id="actions-panel"
+      ref={ref}
+      className={gridStyle}
+      style={{
+        display: inline ? "inline-grid" : "grid",
+        gridGap: gap,
+        gridAutoFlow: "column",
+      }}
+    >
+      {childrenArray.map((child) => {
+        return (
+          <div
+            className={css`
+              &:empty {
+                display: none;
+              }
+            `}
+            key={(child as ReactElement).key}
+          >
+            {child}
+          </div>
+        );
+      })}
+    </div>
+  );
+});

package/src/ai/max-tokens.tsx

@@ -0,0 +1,42 @@
+import {css} from "@linaria/core";
+import {useState, useCallback} from "react";
+import {$TSFixMe} from "../tsfixme";
+
+const inputStyle = css`
+  width: 68px;
+`;
+
+type Props = {
+  initialValue: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  onChange: (n: number) => void;
+};
+
+export const MaxTokens = ({min = 1, max = 2048, step = 1, initialValue, onChange}: Props) => {
+  const [internalValue, setInternalValue] = useState(initialValue);
+
+  const handleChange = useCallback(
+    (event: $TSFixMe) => {
+      const nextValue: number = parseInt(event.target.value);
+      setInternalValue(nextValue);
+      onChange(nextValue);
+    },
+    [onChange, setInternalValue]
+  );
+
+  return (
+    <div>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={internalValue}
+        onChange={handleChange}
+        className={inputStyle}
+      />
+    </div>
+  );
+};

package/src/ai/model.tsx

@@ -0,0 +1,79 @@
+import {css} from "@linaria/core";
+import {useCallback, useState} from "react";
+import {Tooltip} from "../tooltip";
+import {Emoji} from "../emoji";
+import {border, textStyles, themeVars, typeSizes} from "../design-system";
+
+const exampleItemCodeStyle = css`
+  ${{
+    ...textStyles.code,
+    fontSize: typeSizes[5],
+    whiteSpace: "initial",
+    textAlign: "left",
+    borderRadius: border.radius4,
+    border: "none",
+    backgroundColor: themeVars.transparent,
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: themeVars.opacity.opacity10,
+    },
+  }}
+`;
+
+type Props = {
+  initialValue: string;
+  onChange: (s: string) => void;
+};
+
+const indicators = [
+  {
+    name: "gpt-3.5-turbo-16k",
+    symbol: "🤖",
+    desc: (
+      <>
+        <p>$0.003 / 1K tokens</p>
+        <p>Most capable GPT-3.5 model optimized for chat at 1/30th the cost of GPT-4 model</p>
+        <p>Good at: Complex intent, cause and effect, summarization for audience</p>
+      </>
+    ),
+  },
+  {
+    name: "gpt-4",
+    symbol: "🧠",
+    desc: (
+      <>
+        <p>$0.0600 / 1K tokens.</p>
+        <p>With broad general knowledge and domain expertise,</p>
+        <p>GPT-4 can follow complex instructions in natural language and solve difficult problems with accuracy</p>
+        <p>Excellent at: Complex intent, cause and effect, summarization for audience</p>
+      </>
+    ),
+  },
+];
+const delta = 1;
+const rotate = (n: number, min: number, max: number) => (n > max ? min : n);
+
+export const Model = ({initialValue, onChange}: Props) => {
+  const [index, setIndex] = useState(indicators.map(({name}) => name).indexOf(initialValue));
+  const onUseButtonClick = useCallback(() => {
+    const nextIndex = rotate(index + delta, 0, indicators.length - 1);
+    onChange(indicators[nextIndex].name);
+    setIndex(nextIndex);
+  }, [onChange, index]);
+  const item = indicators[index];
+  return (
+    <div>
+      <Tooltip
+        // props
+        title={`Model: ${item.name}`}
+        // eslint-disable-next-line
+        description={item.desc}
+        instant
+      >
+        <button type={"button"} onClick={onUseButtonClick} className={exampleItemCodeStyle}>
+          <Emoji symbol={item.symbol} label={item.name} size={1.25} inline={true} />
+        </button>
+      </Tooltip>
+    </div>
+  );
+};

package/src/ai/temperature.tsx

@@ -0,0 +1,75 @@
+import {css} from "@linaria/core";
+import {useCallback, useState} from "react";
+import {Tooltip} from "../tooltip";
+import {Emoji} from "../emoji";
+import {border, textStyles, themeVars, typeSizes} from "../design-system";
+
+const exampleItemCodeStyle = css`
+  ${{
+    ...textStyles.code,
+    fontSize: typeSizes[5],
+    whiteSpace: "initial",
+    textAlign: "left",
+    borderRadius: border.radius4,
+    border: "none",
+    backgroundColor: themeVars.transparent,
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: themeVars.opacity.opacity10,
+    },
+  }}
+`;
+
+type Props = {
+  initialValue: number;
+  onChange: (s: number) => void;
+};
+
+const indicators = [
+  {
+    symbol: "🥸",
+  },
+  {
+    symbol: "🧐",
+  },
+  {
+    symbol: "🤓",
+  },
+  {
+    symbol: "😎",
+  },
+  {
+    symbol: "👽",
+  },
+];
+const delta = 0.25;
+const rotate = (n: number, min: number, max: number) => (n > max ? min : n);
+
+export const Temperature = ({initialValue, onChange}: Props) => {
+  const [index, setIndex] = useState(Math.floor(initialValue / delta));
+  const [temperature, setTemperature] = useState(initialValue);
+  const onUseButtonClick = useCallback(() => {
+    const nextTemperature = rotate(temperature + delta, 0, 1);
+    onChange(nextTemperature);
+    setTemperature(nextTemperature);
+    setIndex(rotate(index + 1, 0, 4));
+  }, [onChange, temperature, setTemperature, index]);
+  const item = indicators[index];
+  return (
+    <div>
+      <Tooltip
+        // props
+        title={`Click to change`}
+        // eslint-disable-next-line
+        description={`Model's temperature: ${temperature.toFixed(
+          2
+        )}. Temperature controls the degree of randomness in generated output. A lower temperature setting will result in more predictable and less creative outputs while a higher temperature setting will result in more unpredictable and more creative outputs.`}
+        instant
+      >
+        <button type={"button"} onClick={onUseButtonClick} className={exampleItemCodeStyle}>
+          <Emoji symbol={item.symbol} label={String(temperature)} size={1.25} inline={true} />
+        </button>
+      </Tooltip>
+    </div>
+  );
+};

package/src/animated-height-container.tsx

@@ -0,0 +1,82 @@
+import {useSize} from "@fibery/react/src/use-size";
+import React, {ComponentProps, forwardRef, useEffect, useRef, useState} from "react";
+import {duration, transition} from "./design-system";
+import cx from "classnames";
+import _ from "lodash";
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
+
+interface AnimatedHeightContainerProps extends ComponentProps<"div"> {
+  noAnimation?: boolean;
+}
+
+export const AnimatedHeightContainer = forwardRef<HTMLDivElement, AnimatedHeightContainerProps>(
+  function AnimatedHeightContainerComponent({className, noAnimation = false, children, ...otherProps}, ref) {
+    const measuredContainer = useRef<HTMLDivElement | null>(null);
+    const size = useSize(measuredContainer);
+
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const composedRef = useComposedRefs(ref, containerRef);
+
+    // This is needed to prevent initial animation
+    const [heightMeasured, setHeightMeasured] = useState(false);
+    const [previousHeight, setPreviousHeight] = useState(size.height);
+
+    useEffect(() => {
+      let timeoutId: number;
+
+      // Here we set heightMeasured flag on `next` render
+      // after the size is known, which prevents animation on initial component render
+      if (size.width !== 0 && size.height !== 0) {
+        setHeightMeasured(true);
+      }
+      if (heightMeasured && size.height !== previousHeight) {
+        timeoutId = window.setTimeout(() => setPreviousHeight(size.height), duration);
+      }
+
+      return () => clearTimeout(timeoutId);
+    }, [size, heightMeasured, previousHeight]);
+
+    const doAnimation = heightMeasured && !noAnimation;
+    const animating = doAnimation && previousHeight !== size.height;
+
+    // Disable scroll so that overflowed contend won't show on focus
+    // https://stackoverflow.com/questions/67694101/overflowed-content-is-showing-on-focus
+    useEffect(() => {
+      let cleanup = _.noop;
+
+      if (animating && containerRef.current) {
+        const element = containerRef.current;
+        const handler = () => {
+          element.scrollTop = 0;
+        };
+
+        element.addEventListener("scroll", handler);
+
+        cleanup = () => {
+          element.removeEventListener("scroll", handler);
+        };
+      }
+
+      return cleanup;
+    }, [animating]);
+
+    const style = animating
+      ? {
+          ...otherProps.style,
+          overflow: "hidden",
+          height: doAnimation ? size.height : "auto",
+          transition: doAnimation ? `height ${transition}` : undefined,
+        }
+      : {
+          ...otherProps.style,
+          overflow: "visible",
+          height: doAnimation ? size.height : "auto",
+        };
+
+    return (
+      <div ref={composedRef} className={cx(className)} {...otherProps} style={style}>
+        <div ref={measuredContainer}>{children}</div>
+      </div>
+    );
+  }
+);

package/src/animated-number.tsx

@@ -0,0 +1,38 @@
+import {ReactNode, useEffect, useMemo, useState} from "react";
+
+type AnimatedNumberProps = {
+  children: number;
+  speed?: number;
+  fps?: number;
+  fixed?: number;
+  format?: (value: number) => ReactNode;
+};
+
+export function AnimatedNumber({children, speed = 300, fps = 12, fixed, format}: AnimatedNumberProps) {
+  const [currentValue, setCurrentValue] = useState<number>(children);
+  const frameTime = useMemo(() => 1000 / fps, [fps]);
+  const step = useMemo(
+    () => (children - currentValue) / (speed / frameTime),
+    [frameTime, currentValue, speed, children]
+  );
+  const printedValue =
+    fixed === undefined
+      ? currentValue
+      : fixed === 0
+      ? Math.round(currentValue)
+      : parseFloat(currentValue.toFixed(fixed));
+  useEffect(() => {
+    let timeout: number | undefined;
+    if (step < 0 ? currentValue > children : currentValue < children && currentValue !== children) {
+      timeout = window.setTimeout(() => {
+        setCurrentValue(currentValue + step);
+      }, frameTime);
+    } else {
+      setCurrentValue(children);
+    }
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [children, step, currentValue, frameTime]);
+  return <>{format ? format(printedValue) : printedValue}</>;
+}

package/src/animations.tsx

@@ -0,0 +1,62 @@
+import {css, cx} from "@linaria/core";
+import {FC, ReactNode, useLayoutEffect, useRef, useState} from "react";
+
+const pulseStyle = css`
+  @keyframes pulse {
+    0% {
+      transform: scale(0.8);
+    }
+    5% {
+      transform: scale(1);
+    }
+    10% {
+      transform: scale(0.8);
+    }
+    15% {
+      transform: scale(1.2);
+    }
+    50% {
+      transform: scale(0.8);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  animation: pulse 1.4s infinite;
+`;
+
+export const Pulse: FC<{children?: ReactNode}> = ({children}) => <div className={pulseStyle}>{children}</div>;
+
+const popupStyle = css`
+  @keyframes pop-up {
+    0% {
+      transform: translateY(50px) scale(0);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0px) scale(1);
+      opacity: 1;
+    }
+  }
+  transform: translateY(50px) scale(0);
+  opacity: 0;
+  animation: pop-up 0.6s cubic-bezier(0.27, 0.53, 0.28, 1.58) forwards;
+`;
+
+export const usePopupEffect = ({enabled}: {enabled: boolean}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [animate, setAnimate] = useState(true);
+  useLayoutEffect(() => {
+    const htmlDivElement = ref.current;
+    const stopAnimation = enabled && htmlDivElement?.addEventListener("animationend", () => setAnimate(false));
+    return () => {
+      if (htmlDivElement && stopAnimation) {
+        htmlDivElement.removeEventListener("animationend", stopAnimation);
+      }
+    };
+  }, [enabled]);
+  return {
+    ref,
+    popupEffectClassName: cx(enabled && animate && popupStyle),
+  };
+};

package/src/antd/AutoComplete.d.ts

@@ -0,0 +1 @@
+export const AntAutoComplete: FunctionComponent<any>;

package/src/antd/AutoComplete.js

@@ -0,0 +1,34 @@
+import {css} from "@linaria/core";
+import {getWrapper} from "./get-wrapper";
+import AutoComplete from "antd/lib/auto-complete";
+import "antd/lib/auto-complete/style/css";
+import {border, layout, space, textStyles, themeVars} from "../design-system";
+import {wrapWithPopupContainer} from "./utils";
+
+const autoCompleteStyles = css`
+  ${{
+    "& .ant-select-selection": {
+      backgroundColor: themeVars.transparent,
+    },
+    "& .ant-select-dropdown": {
+      boxShadow: themeVars.actionMenuShadow,
+      borderRadius: border.radius4,
+    },
+    "& .ant-select-dropdown-menu-item": {
+      ...textStyles.regular,
+      height: layout.inputHeight,
+      display: "flex",
+      alignItems: "center",
+      paddingLeft: space.s12,
+      paddingRight: space.s24,
+      transition: "none",
+      "&.ant-select-dropdown-menu-item-active, &:hover": {
+        backgroundColor: themeVars.actionMenuHover,
+      },
+      "&.ant-select-dropdown-menu-item-selected": {
+        backgroundColor: themeVars.actionMenuHover,
+      },
+    },
+  }}
+`;
+export const AntAutoComplete = wrapWithPopupContainer(getWrapper(autoCompleteStyles), AutoComplete);

package/src/antd/Tabs.d.ts

@@ -0,0 +1,5 @@
+import {FunctionComponent} from "react";
+import {TabsProps} from "antd/lib/tabs";
+
+export const AntTabs: FunctionComponent<TabsProps & {wrapClassName?: string}>;
+export const tabsStyles: string;