chore: Setup for Entity Item

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

@@ -60,6 +60,7 @@ export const ContentTextWrapper = styled.div`
   overflow: hidden;
   flex: 1;
   min-width: 0;
+  flex-shrink: 0;
 
   & .${ListItemTextOverflowClassName} {
     overflow: hidden;
@@ -115,7 +116,6 @@ export const StyledListItem = styled.div<{
   padding-left: var(--ads-v2-spaces-3);
 
   ${({ size }) => Sizes[size]}
-
   &[data-isblockdescription="true"] {
     height: 54px;
   }
@@ -128,6 +128,7 @@ export const StyledListItem = styled.div<{
     ${RightControlWrapper} {
       display: none;
     }
+
     &:hover ${RightControlWrapper} {
       display: block;
     }
@@ -138,6 +139,7 @@ export const StyledListItem = styled.div<{
   }
 
   /* disabled style */
+
   &[data-disabled="true"] {
     cursor: not-allowed;
     opacity: var(--ads-v2-opacity-disabled);
@@ -153,6 +155,7 @@ export const StyledListItem = styled.div<{
   }
 
   /* Focus styles */
+
   &:focus-visible {
     outline: var(--ads-v2-border-width-outline) solid
       var(--ads-v2-color-outline);

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

@@ -91,7 +91,7 @@ function ListItem(props: ListItemProps) {
   } = props;
   const isBlockDescription = descriptionType === "block";
 
-  const listItemhandleKeyDown = (e: React.KeyboardEvent) => {
+  const listItemHandleKeyDown = (e: React.KeyboardEvent) => {
     if (!props.isDisabled && props.onClick) {
       switch (e.key) {
         case "Enter":
@@ -120,7 +120,7 @@ function ListItem(props: ListItemProps) {
     >
       <ContentTextWrapper
         onClick={handleOnClick}
-        onKeyDown={listItemhandleKeyDown}
+        onKeyDown={listItemHandleKeyDown}
       >
         {startIcon}
         {props.customTitleComponent ? (

app/client/packages/design-system/ads/src/List/List.types.tsx

@@ -3,12 +3,12 @@ import type { ReactNode } from "react";
 
 export type ListSizes = Extract<Sizes, "md" | "lg">;
 
-export interface ListItemProps {
+interface BaseListItemProps {
   /** The icon to display before the list item title. */
   startIcon?: ReactNode;
   /** The control to display at the end. */
   rightControl?: ReactNode;
-  /**  */
+  /** Control the visibility trigger of right control */
   rightControlVisibility?: "hover" | "always";
   /** callback for when the list item is clicked */
   onClick: () => void;
@@ -20,8 +20,6 @@ export interface ListItemProps {
   size?: ListSizes;
   /** Whether to show the list item in error state */
   hasError?: boolean;
-  /** The title/label of the list item */
-  title: string;
   /** Description text to be shown alongside the title */
   description?: string;
   /** `inline` type will show the description beside the title. `block` type will show the description
@@ -32,10 +30,24 @@ export interface ListItemProps {
   className?: string;
   /** id for the list item */
   id?: string;
+}
+
+interface ListItemWithTitle extends BaseListItemProps {
+  /** The title/label of the list item */
+  title: string;
+  customTitleComponent?: never;
+}
+
+interface ListItemWithCustomTitleComponent extends BaseListItemProps {
+  title?: never;
   /** customTitleComponent for the list item to use input component for name editing */
-  customTitleComponent?: ReactNode | ReactNode[];
+  customTitleComponent: ReactNode | ReactNode[];
 }
 
+export type ListItemProps =
+  | ListItemWithTitle
+  | ListItemWithCustomTitleComponent;
+
 export interface ListProps {
   items: ListItemProps[];
   className?: string;

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.stories.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable no-console */
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { EntityItem } from "./EntityItem";
+import type { EntityItemProps } from "./EntityItem.types";
+import { ExplorerContainer } from "../ExplorerContainer";
+import { Flex, Button, Icon } from "../../..";
+
+const meta: Meta<typeof EntityItem> = {
+  title: "ADS/Templates/Entity Explorer/Entity Item",
+  component: EntityItem,
+};
+
+export default meta;
+
+const Template = (props: EntityItemProps) => {
+  const { name, nameEditorConfig } = props;
+
+  const onClick = () => console.log("Add clicked");
+
+  const rightControl = (
+    <Button isIconButton kind="tertiary" startIcon="comment-context-menu" />
+  );
+
+  const startIcon = <Icon name="apps-line" />;
+
+  return (
+    <Flex bg="white" overflow="hidden" width="400px">
+      <ExplorerContainer borderRight="STANDARD" height="500px" width="255px">
+        <Flex p="spaces-3">
+          <EntityItem
+            {...{
+              startIcon,
+              name,
+              nameEditorConfig,
+              onClick,
+              rightControl,
+            }}
+          />
+        </Flex>
+      </ExplorerContainer>
+    </Flex>
+  );
+};
+
+export const Basic = Template.bind({}) as StoryObj;
+
+Basic.args = {
+  name: "Entity Name",
+};
+
+export const InEditingMode = Template.bind({}) as StoryObj;
+
+InEditingMode.args = {
+  name: "Entity Name",
+  nameEditorConfig: {
+    isEditing: true,
+    canEdit: true,
+  },
+};

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styled.ts

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { Text } from "../../..";
+
+export const EntityEditableName = styled(Text)`
+  height: 32px;
+  flex: 1;
+  min-width: 3ch;
+`;

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo, useState } from "react";
+import { ListItem } from "../../../List";
+import type { EntityItemProps } from "./EntityItem.types";
+import { ContentTextWrapper } from "../../../List/List.styles";
+// import { usePrevious } from "@mantine/hooks";
+import { useEventCallback } from "usehooks-ts";
+import { normaliseName } from "./utils";
+import { EntityEditableName } from "./EntityItem.styled";
+
+export const EntityItem = (props: EntityItemProps) => {
+  // const previousName = usePrevious(props.name);
+  const [editableName, setEditableName] = useState(props.name);
+
+  const handleTitleChange = useEventCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = normaliseName(e.target.value);
+
+      setEditableName(value);
+      props.nameEditorConfig?.validateName(value);
+    },
+  );
+
+  const inputProps = useMemo(
+    () => ({
+      onChange: handleTitleChange,
+      style: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        height: "32px",
+        top: 0,
+      },
+    }),
+    [handleTitleChange],
+  );
+
+  const customTitle = useMemo(() => {
+    if (!props.nameEditorConfig) {
+      return <ContentTextWrapper>{props.name}</ContentTextWrapper>;
+    } else {
+      return (
+        <EntityEditableName inputProps={inputProps} isEditable kind="body-m">
+          {editableName}
+        </EntityEditableName>
+      );
+    }
+  }, [editableName, inputProps, props.name, props.nameEditorConfig]);
+
+  return <ListItem {...props} customTitleComponent={customTitle} />;
+};

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.types.ts

@@ -0,0 +1,19 @@
+import type { ListItemProps } from "../../../List";
+
+export interface EntityItemProps
+  extends Omit<ListItemProps, "title" | "customTitleComponent"> {
+  name: string;
+  /** Control the name editing behaviour */
+  nameEditorConfig?: {
+    // Set editable based on user permissions
+    canEdit: boolean;
+    // State to control the editable state of the input
+    isEditing: boolean;
+    // Shows a loading spinner in place of the startIcon
+    isLoading: boolean;
+    // Called when user attempts to save a valid name
+    onEditComplete: () => void;
+    // Provide a function validate the new name
+    validateName: (newName: string) => string | null;
+  };
+}

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/index.ts

@@ -0,0 +1 @@
+export { EntityItem } from "./EntityItem";

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/utils.ts

@@ -0,0 +1,8 @@
+export const normaliseName = (value: string, limit?: number) => {
+  const separatorRegex = /\W+/;
+
+  return value
+    .split(separatorRegex)
+    .join("_")
+    .slice(0, limit || 30);
+};

app/client/packages/design-system/ads/src/Templates/EntityExplorer/index.ts

@@ -5,3 +5,4 @@ export * from "./SearchAndAdd";
 export { EmptyState } from "./EmptyState";
 export { NoSearchResults } from "./NoSearchResults";
 export * from "./ExplorerContainer";
+export * from "./EntityItem";