CE-3632: Tidy up AutoComplete stories, implement typing EllipsisText

src/components/common/Autocomplete/Autocomplete.tsx

@@ -6,7 +6,7 @@ import {
   AutocompleteProps as MuiAutocompleteProps
 } from "@mui/material";
 
-interface AutocompleteProps<Value> {
+export interface AutocompleteProps<Value> {
   loading: boolean;
   autocompleteProps: MuiAutocompleteProps<Value, false, true, false>;
   textFieldProps: TextFieldProps;

src/components/common/Autocomplete/index.ts

-import { Autocomplete } from "./Autocomplete";
+import { Autocomplete, type AutocompleteProps } from "./Autocomplete";
 
-export { Autocomplete };
+export { Autocomplete, type AutocompleteProps };

src/components/common/EllipsisText/EllipsisText.tsx

-import { Tooltip, Typography } from "@mui/material";
-import { string, object, bool, node } from "prop-types";
+import {
+  Tooltip,
+  Typography,
+  TypographyProps,
+  TooltipProps
+} from "@mui/material";
+
+export interface EllipsisTextProps {
+  title?: string;
+  disableTooltip?: boolean;
+  TypographyProps?: TypographyProps;
+  TooltipProps?: TooltipProps;
+  children: string;
+}
 
-/**
- * Displays cutoff text with an ellipsis and a tooltip with the rest of the text.
- * @param {string} title text to display in the tooltip. The child element is used
- * by default so title is only necessary if the child is a React component.
- * @param {boolean} disableTooltip disables the tooltip feature.
- * @param {object} TypographyProps Additional props for the Typography component
- * @param {object} TooltipProps Additional props for the Tooltip component
- */
 export const EllipsisText = ({
   title,
   disableTooltip = false,
   TypographyProps,
   TooltipProps,
   children
-}) => {
+}: EllipsisTextProps) => {
   const renderedText = (
     <Typography
       noWrap
@@ -39,10 +43,3 @@ export const EllipsisText = ({
     </Tooltip>
   );
 };
-EllipsisText.propTypes = {
-  title: string,
-  disableTooltip: bool,
-  TypographyProps: object,
-  TooltipProps: object,
-  children: node
-};

src/components/common/EllipsisText/index.ts

-import { EllipsisText } from "./EllipsisText";
+import { EllipsisText, type EllipsisTextProps } from "./EllipsisText";
 
-export { EllipsisText };
+export { EllipsisText, type EllipsisTextProps };

src/stories/common/EllipsisText/EllipsisText.stories.tsx

+import { ReactNode } from "react";
 import { Paper, Typography } from "@mui/material";
 import { MemoryRouter } from "react-router-dom";
-import { EllipsisText } from "../../../components/common/EllipsisText";
+import { Meta } from "@storybook/react";
+import {
+  EllipsisText,
+  EllipsisTextProps
+} from "../../../components/common/EllipsisText";
 import { ExternalLink, InternalLink } from "../../../components/common/Link";
 
 export default {
   title: "Common/EllipsisText",
   component: EllipsisText
-};
+} as Meta<typeof EllipsisText>;
+
+interface ContainerProps {
+  children: ReactNode;
+}
 
-const Container = ({ children }) => {
+const Container = ({ children }: ContainerProps) => {
   return (
     <Paper sx={{ height: "100vh", padding: 2 }}>
       <Typography>The following text is too long:</Typography>
@@ -28,17 +37,18 @@ const Container = ({ children }) => {
   );
 };
 
-const TextTemplate = ({ text, ...props }) => {
+const TextTemplate = ({ children, ...props }: EllipsisTextProps) => {
   return (
     <Container>
-      <EllipsisText {...props}>{text}</EllipsisText>
+      <EllipsisText {...props}>{children}</EllipsisText>
     </Container>
   );
 };
 
-export const Default = (args) => <TextTemplate {...args} />;
+export const Default = (args: EllipsisTextProps) => <TextTemplate {...args} />;
 Default.args = {
-  text: "There's some really important information here but it is obscured!",
+  children:
+    "There's some really important information here but it is obscured!",
   TypographyProps: {
     variant: "body2"
   },
@@ -48,43 +58,43 @@ Default.args = {
   }
 };
 
-const ExternalLinkTemplate = ({ text, ...props }) => {
+const ExternalLinkTemplate = ({ children, ...props }: EllipsisTextProps) => {
   return (
     <Container>
       <ExternalLink
         newTab
         href="https://europeanspallationsource.se/"
-        label={text}
+        label={children}
       >
-        <EllipsisText {...props}>{text}</EllipsisText>
+        <EllipsisText {...props}>{children}</EllipsisText>
       </ExternalLink>
     </Container>
   );
 };
 
-export const ExternalLinkEllipsisText = (args) => (
+export const ExternalLinkEllipsisText = (args: EllipsisTextProps) => (
   <ExternalLinkTemplate {...args} />
 );
 ExternalLinkEllipsisText.args = {
   ...Default.args
 };
 
-const InternalLinkTemplate = ({ text, ...props }) => {
+const InternalLinkTemplate = ({ children, ...props }: EllipsisTextProps) => {
   return (
     <MemoryRouter>
       <Container>
         <InternalLink
           to="/"
-          label={text}
+          label={children}
         >
-          <EllipsisText {...props}>{text}</EllipsisText>
+          <EllipsisText {...props}>{children}</EllipsisText>
         </InternalLink>
       </Container>
     </MemoryRouter>
   );
 };
 
-export const InternalLinkEllipsisText = (args) => (
+export const InternalLinkEllipsisText = (args: EllipsisTextProps) => (
   <InternalLinkTemplate {...args} />
 );
 InternalLinkEllipsisText.args = {

src/stories/fields/Autocomplete.stories.tsx

@@ -25,13 +25,13 @@ const data = [
 ];
 
 interface AutocompleteProps {
-  loading?: boolean;
+  loading: boolean;
 }
 
 const Template = ({ loading, ...args }: AutocompleteProps) => {
   return (
     <Autocomplete
-      loading={loading || false}
+      loading={loading}
       autocompleteProps={{
         options: data,
         getOptionLabel: (option) => {
@@ -57,7 +57,12 @@ const Template = ({ loading, ...args }: AutocompleteProps) => {
   );
 };
 
-export const Default = (args: typeof Autocomplete) => <Template {...args} />;
+export const Default = (args: typeof Autocomplete) => (
+  <Template
+    loading={false}
+    {...args}
+  />
+);
 
 export const Loading = (args: typeof Autocomplete) => (
   <Template