Merge branch 'release' into chore/unskip-redis-test

app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_types_validation_spec.ts

@@ -43,17 +43,16 @@ describe(
       // Click unix cell edit
       table.ClickOnEditIcon(row, column);
 
-      // Click on specific date within
+      // Click on a specific date within the view port of the date picker
+      // Date picker opens in september 2024 due to the Table data set
       agHelper.GetNClick(
-        `${table._dateInputPopover} [aria-label='${table.getFormattedTomorrowDates().verboseFormat}']`,
+        `${table._dateInputPopover} [aria-label='Thu Sep 26 2024']`,
       );
 
-      // Check that date is set in column
+      // Check that the date is set in column
       table
         .ReadTableRowColumnData(row, column, "v2")
-        .then((val) =>
-          expect(val).to.equal(table.getFormattedTomorrowDates().isoFormat),
-        );
+        .then((val) => expect(val).to.equal("2024-09-26"));
     };
 
     it("1. should allow inline editing of Unix Timestamp in seconds (unix/s)", () => {

app/client/cypress/support/Pages/Table.ts

@@ -854,38 +854,4 @@ export class Table {
     this.agHelper.GetHoverNClick(selector, 1, true);
     verify && cy.get(selector).eq(1).should("be.disabled");
   }
-
-  /**
-   * Helper function to get formatted date strings for tomorrow's date.
-   *
-   * @returns {Object} An object containing:
-   *  - verbose format (e.g., "Sat Sep 21 2024")
-   *  - ISO date format (e.g., "2024-09-21")
-   */
-  public getFormattedTomorrowDates() {
-    // Create a new Date object for today
-    const tomorrow = new Date();
-
-    // Set the date to tomorrow by adding 1 to today's date
-    tomorrow.setDate(tomorrow.getDate() + 1);
-
-    // Format tomorrow's date in verbose form (e.g., "Sat Sep 21 2024")
-    const verboseFormat = tomorrow
-      .toLocaleDateString("en-US", {
-        weekday: "short",
-        year: "numeric",
-        month: "short",
-        day: "2-digit",
-      })
-      .replace(/,/g, ""); // Remove commas from the formatted string
-
-    // Format tomorrow's date in ISO form (e.g., "2024-09-21")
-    const isoFormat = tomorrow.toISOString().split("T")[0]; // Extract the date part only
-
-    // Return both formatted date strings as an object
-    return {
-      verboseFormat,
-      isoFormat,
-    };
-  }
 }

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> &

app/client/packages/design-system/widgets/jest.config.js

@@ -1,3 +1,5 @@
+const esModules = ["remark-gfm"].join("|");
+
 module.exports = {
   preset: "ts-jest",
   roots: ["<rootDir>/src"],
@@ -6,6 +8,9 @@ module.exports = {
   moduleNameMapper: {
     "\\.(css)$": "<rootDir>../../../test/__mocks__/styleMock.js",
   },
+  transformIgnorePatterns: [
+    `[/\\\\]node_modules[/\\\\](?!${esModules}).+\\.(js|jsx|mjs|cjs|ts|tsx)$`,
+  ],
   globals: {
     "ts-jest": {
       useESM: true,

app/client/packages/design-system/widgets/package.json

@@ -28,7 +28,8 @@
     "lodash": "*",
     "react-aria-components": "^1.2.1",
     "react-markdown": "^9.0.1",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",