feat(toolkit): User can have autoresize input when edit node and pipe…

…line name (#948)

Because

- Improve UX

This commit

- User can have autoresize input when edit node and pipeline name

packages/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instill-ai/toolkit",
-  "version": "0.68.3-rc.4",
+  "version": "0.68.3-rc.15",
   "description": "Instill AI's frontend toolkit",
   "repository": "https://github.com/instill-ai/design-system.git",
   "bugs": "https://github.com/instill-ai/design-system/issues",

packages/toolkit/src/components/AutoresizeInput.tsx

@@ -0,0 +1,57 @@
+import cn from "clsx";
+import { Nullable } from "../lib";
+
+/*
+  Usage:
+
+  // You need to make sure all the padding and text styles are the same as
+  // the input element you're using.
+
+  const textStyle = "text-sm font-medium p-2"
+  const [value] = React.useState("")
+
+  <AutoresizeInputWrapper
+    value={field.value ?? ""}
+    className="min-w-[280px] max-w-[400px] h-12"
+    placeholderClassname={textStyle}
+  >
+    <input
+      className={cn(
+        "!absolute !bottom-0 !left-0 !right-0 !top-0 p-2",
+        textStyle
+      )}
+      value={value}
+    />
+  </AutoresizeInputWrapper>
+
+*/
+
+export const AutoresizeInputWrapper = ({
+  placeholderClassname,
+  value,
+  className,
+  children,
+}: {
+  value: Nullable<string>;
+  className?: string;
+  children: React.ReactNode;
+  placeholderClassname?: string;
+}) => {
+  return (
+    <div className="flex">
+      <div className={cn("relative", className)}>
+        <div
+          className={cn(
+            "invisible !m-0 box-border h-full border-none",
+            placeholderClassname
+          )}
+          contentEditable={true}
+          suppressContentEditableWarning={true}
+        >
+          {value}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};

packages/toolkit/src/components/ImageWithFallback.tsx

@@ -28,6 +28,7 @@ export const ImageWithFallback = ({
       onError={() => {
         setError(true);
       }}
+      className="flex-shrink-0"
     />
   );
 };

packages/toolkit/src/components/Topbar.tsx

@@ -18,7 +18,7 @@ export const Topbar = (props: TopbarProps) => {
   return (
     <div
       className={cn(
-        "flex h-[var(--topbar-height)] flex-row border-b border-semantic-bg-line bg-semantic-bg-primary px-4",
+        "flex h-[var(--topbar-height)] box-content flex-row border-b border-semantic-bg-line bg-semantic-bg-primary px-4",
         className
       )}
     >

packages/toolkit/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from "./AutoresizeInput";
 export * from "./Breadcrumb";
 export * from "./CopyToClipboardButton";
 export * from "./CodeBlock";