feat: editable ide tabs

app/client/jest.config.js

@@ -17,7 +17,7 @@ module.exports = {
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "css"],
   moduleDirectories: ["node_modules", "src", "test"],
   transformIgnorePatterns: [
-    "<rootDir>/node_modules/(?!codemirror|konva|react-dnd|dnd-core|@babel|(@blueprintjs)|@github|lodash-es|@draft-js-plugins|react-documents|linkedom|assert-never|axios)",
+    "<rootDir>/node_modules/(?!codemirror|konva|react-dnd|dnd-core|@babel|(@blueprintjs)|@github|lodash-es|@draft-js-plugins|react-documents|linkedom|assert-never|axios|usehooks-ts)",
   ],
   moduleNameMapper: {
     "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",

app/client/package.json

@@ -227,6 +227,7 @@
     "typescript": "^5.5.4",
     "unescape-js": "^1.1.4",
     "url-search-params-polyfill": "^8.0.0",
+    "usehooks-ts": "^3.1.0",
     "uuid": "^9.0.0",
     "validate-color": "^2.2.4",
     "web-vitals": "3.5.2",

app/client/packages/design-system/ads/src/Text/Text.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Text } from "./Text";
 import type { Meta, StoryObj } from "@storybook/react";
 
@@ -25,15 +25,17 @@ export const EditableTextStory: Story = {
   },
   render: function Render(args) {
     const [text, setText] = React.useState(args.children);
+    const inputProps = useMemo(
+      () => ({
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+          setText(e.target.value);
+        },
+      }),
+      [],
+    );
 
     return (
-      <Text
-        {...args}
-        onChange={(e) => {
-          // @ts-expect-error type error
-          setText(e.target.value);
-        }}
-      >
+      <Text inputProps={inputProps} {...args}>
         {text}
       </Text>
     );

app/client/packages/design-system/ads/src/Text/Text.styles.tsx

@@ -125,7 +125,7 @@ export const StyledText = styled.span<{
   isBold?: boolean;
   isItalic?: boolean;
   isUnderlined?: boolean;
-  isStriked?: boolean;
+  isStrikethrough?: boolean;
   isEditable?: boolean;
 }>`
   ${TypographyScales}
@@ -160,8 +160,8 @@ export const StyledText = styled.span<{
     text-decoration: underline;
   }
 
-  /* Striked style */
-  &[data-striked="true"] {
+  /* Strikethrough style */
+  &[data-strikethrough="true"] {
     text-decoration: line-through;
   }
 
@@ -191,10 +191,8 @@ export const StyledEditableInput = styled.input`
   border: 1px solid transparent;
   border-radius: var(--ads-v2-border-radius);
   outline: none;
-  padding: 0;
   margin: 0;
   position: absolute;
-  left: -3px;
   top: -3px;
   width: 100%;
   padding: var(--ads-v2-spaces-1);
@@ -205,6 +203,6 @@ export const StyledEditableInput = styled.input`
 
   &:focus,
   &:active {
-    border-color: var(--ads-v2-colors-control-field-default-border);
+    border-color: var(--ads-v2-colors-control-field-active-border);
   }
 `;

app/client/packages/design-system/ads/src/Text/Text.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import clsx from "classnames";
-import type { TextProps } from "./Text.types";
+import type { RenderAsElement, TextProps } from "./Text.types";
 import { StyledEditableInput, StyledText } from "./Text.styles";
 import { TextClassName } from "./Text.constants";
 
@@ -9,49 +9,49 @@ TODO:
  - add segment header style to list of styles
  */
 
-function Text({
-  children,
-  className,
-  color,
-  inputProps,
-  isEditable,
-  kind,
-  onChange,
-  renderAs,
-  ...rest
-}: TextProps) {
+const Text = forwardRef<RenderAsElement, TextProps>(function Text(
+  {
+    children,
+    className,
+    color,
+    inputProps,
+    inputRef,
+    isEditable,
+    kind,
+    renderAs,
+    ...rest
+  }: TextProps,
+  ref,
+) {
   return (
     <StyledText
       as={renderAs}
       className={clsx(TextClassName, className)}
       color={color}
       data-bold={rest.isBold}
       data-italic={rest.isItalic}
-      data-striked={rest.isStriked}
+      data-strikethrough={rest.isStrikethrough}
       data-underlined={rest.isUnderlined}
       data-value={isEditable && typeof children === "string" ? children : null}
       isEditable={isEditable && typeof children === "string"}
       kind={kind}
+      ref={ref}
       {...rest}
     >
       {isEditable && typeof children === "string" ? (
-        <StyledEditableInput
-          onChange={onChange}
-          value={children}
-          {...inputProps}
-        />
+        <StyledEditableInput ref={inputRef} value={children} {...inputProps} />
       ) : (
         children
       )}
     </StyledText>
   );
-}
+});
 
 Text.displayName = "Text";
 
 Text.defaultProps = {
   renderAs: "span",
-  kind: "span",
+  kind: "body-m",
 };
 
 export { Text };

app/client/packages/design-system/ads/src/Text/Text.types.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import type React from "react";
 
+/** Text style variant */
 export type TextKind =
   | "heading-xl"
   | "heading-l"
@@ -14,7 +15,14 @@ export type TextKind =
   | "action-s"
   | "code";
 
-// Text props
+/** All possible element types text can be rendered as, matches renderAs prop */
+export type RenderAsElement =
+  | HTMLHeadingElement
+  | HTMLLabelElement
+  | HTMLParagraphElement
+  | HTMLSpanElement;
+
+/** Text component props */
 export type TextProps = {
   /** to change the rendering component */
   renderAs?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
@@ -32,17 +40,14 @@ export type TextProps = {
   isItalic?: boolean;
   /** whether the text is underlined or not */
   isUnderlined?: boolean;
-  /** whether the text is striked or not */
-  isStriked?: boolean;
+  /** whether the text is strikethrough or not */
+  isStrikethrough?: boolean;
   /** whether the text is editable or not */
   isEditable?: boolean;
-  /** onChange event for editable text */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   /** input component props while isEditable is true */
-  inputProps?: Omit<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    "value" | "onChange"
-  >;
+  inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value">;
+  /** ref for input component */
+  inputRef?: React.RefObject<HTMLInputElement>;
 } & React.HTMLAttributes<HTMLLabelElement> &
   React.HTMLAttributes<HTMLHeadingElement> &
   React.HTMLAttributes<HTMLParagraphElement> &