From 4fc3ee2ac770c92d3f4907c4d96d536afdea32d5 Mon Sep 17 00:00:00 2001
From: Max Frederiksen <max.frederiksen@ess.eu>
Date: Mon, 17 Mar 2025 16:02:37 +0100
Subject: [PATCH] CE-3632: Tidy up AutoComplete stories, implement typing
EllipsisText
---
.../common/Autocomplete/Autocomplete.tsx | 2 +-
src/components/common/Autocomplete/index.ts | 4 +-
.../common/EllipsisText/EllipsisText.tsx | 33 ++++++------
src/components/common/EllipsisText/index.ts | 4 +-
.../EllipsisText/EllipsisText.stories.tsx | 54 +++++++++++--------
src/stories/fields/Autocomplete.stories.tsx | 11 ++--
6 files changed, 59 insertions(+), 49 deletions(-)
diff --git a/src/components/common/Autocomplete/Autocomplete.tsx b/src/components/common/Autocomplete/Autocomplete.tsx
index 8d257be4..dfd33049 100644
--- a/src/components/common/Autocomplete/Autocomplete.tsx
+++ b/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;
diff --git a/src/components/common/Autocomplete/index.ts b/src/components/common/Autocomplete/index.ts
index 6a44e8c4..81c4513a 100644
--- a/src/components/common/Autocomplete/index.ts
+++ b/src/components/common/Autocomplete/index.ts
@@ -1,3 +1,3 @@
-import { Autocomplete } from "./Autocomplete";
+import { Autocomplete, type AutocompleteProps } from "./Autocomplete";
-export { Autocomplete };
+export { Autocomplete, type AutocompleteProps };
diff --git a/src/components/common/EllipsisText/EllipsisText.tsx b/src/components/common/EllipsisText/EllipsisText.tsx
index 66d90e17..fdcc5684 100644
--- a/src/components/common/EllipsisText/EllipsisText.tsx
+++ b/src/components/common/EllipsisText/EllipsisText.tsx
@@ -1,21 +1,25 @@
-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
-};
diff --git a/src/components/common/EllipsisText/index.ts b/src/components/common/EllipsisText/index.ts
index 1b4eecea..e49d0561 100644
--- a/src/components/common/EllipsisText/index.ts
+++ b/src/components/common/EllipsisText/index.ts
@@ -1,3 +1,3 @@
-import { EllipsisText } from "./EllipsisText";
+import { EllipsisText, type EllipsisTextProps } from "./EllipsisText";
-export { EllipsisText };
+export { EllipsisText, type EllipsisTextProps };
diff --git a/src/stories/common/EllipsisText/EllipsisText.stories.tsx b/src/stories/common/EllipsisText/EllipsisText.stories.tsx
index b8cde697..189ed9a0 100644
--- a/src/stories/common/EllipsisText/EllipsisText.stories.tsx
+++ b/src/stories/common/EllipsisText/EllipsisText.stories.tsx
@@ -1,14 +1,23 @@
+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,44 +58,42 @@ Default.args = {
}
};
-const ExternalLinkTemplate = ({ text, ...props }) => {
+const ExternalLinkTemplate = ({ children, ...props }: EllipsisTextProps) => {
return (
- <MemoryRouter>
- <Container>
- <ExternalLink
- to="https://europeanspallationsource.se/"
- label={text}
- >
- <EllipsisText {...props}>{text}</EllipsisText>
- </ExternalLink>
- </Container>
- </MemoryRouter>
+ <Container>
+ <ExternalLink
+ to="https://europeanspallationsource.se/"
+ label={children}
+ >
+ <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 = {
diff --git a/src/stories/fields/Autocomplete.stories.tsx b/src/stories/fields/Autocomplete.stories.tsx
index c72ccca3..015a6507 100644
--- a/src/stories/fields/Autocomplete.stories.tsx
+++ b/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
--
GitLab