migrating components from platform sources

Author: LuizFNJ

src/components/SentenceReport/SourceSummaryDisplay.tsx

@@ -1,19 +1,17 @@
 import React from "react";
-import { Typography } from "antd";
+import { Typography } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import SentenceReportSummary from "./SentenceReportSummary";
 import AletheiaButton from "../Button";
 
-const { Paragraph } = Typography;
-
 const SourceSummaryDisplay = ({ href }) => {
     const { t } = useTranslation();
 
     return (
-        <SentenceReportSummary>
-            <Paragraph className="sentence-content">
+        <SentenceReportSummary item>
+            <Typography variant="body1" className="sentence-content">
                 <cite>{href}</cite>
-            </Paragraph>
+            </Typography>
 
             <AletheiaButton
                 href={href}

src/components/Source/ClaimSourceList.style.tsx

@@ -9,6 +9,7 @@ export const ClaimSourceListStyle = styled.div`
     .source {
         display: flex;
         flex-direction: column;
+        font-size: 14px;
     }
 
     .all-sources-link-button {

src/components/Source/ClaimSourceList.tsx

@@ -1,5 +1,5 @@
 import AletheiaButton, { ButtonType } from "../Button";
-import { List, Typography } from "antd";
+import { Grid, Typography } from "@mui/material";
 
 import React from "react";
 import ClaimSourceListItem from "./ClaimSourceListItem";
@@ -17,46 +17,40 @@ const ClaimSourceList = ({
 }) => {
     const { t } = useTranslation();
     const sourcesGridColumns = 6;
+    const dataSource = showAllSources
+        ? sources
+        : sources.slice(0, sourcesGridColumns);
 
     return (
         <ClaimSourceListStyle>
             {sources && (
-                <List
-                    dataSource={
-                        showAllSources
-                            ? sources
-                            : sources.slice(0, sourcesGridColumns)
-                    }
-                    style={{ width: "100%" }}
-                    grid={{
-                        gutter: 38,
-                        xs: 1,
-                        sm: 2,
-                        md: 2,
-                        lg: 3,
-                        xl: 3,
-                        xxl: 3,
-                    }}
-                    renderItem={(source, index) => {
-                        return (
+                <Grid container style={{ width: '100%' }}>
+                    {dataSource.map((source, index) => (
+                        <Grid
+                            item
+                            xs={12}
+                            sm={6}
+                            md={6}
+                            lg={4}
+                            key={source}
+                        >
                             <ClaimSourceListItem
-                                key={index}
                                 source={source}
                                 index={index + 1}
                             />
-                        );
-                    }}
-                />
+                        </Grid>
+                    ))}
+                </Grid>
             )}
             {!showAllSources && sources?.length > sourcesGridColumns && (
                 <AletheiaButton
                     type={ButtonType.blue}
                     href={seeMoreHref}
                     className="all-sources-link-button"
                 >
-                    <Typography.Title level={4} className="all-sources-link">
+                    <Typography variant="h4" className="all-sources-link">
                         {t("claim:seeSourcesButton")}
-                    </Typography.Title>
+                    </Typography>
                 </AletheiaButton>
             )}
         </ClaimSourceListStyle>

src/components/Source/ClaimSourceListItem.tsx

@@ -1,31 +1,31 @@
-import { Col, List } from "antd";
+import { Grid, ListItem } from "@mui/material";
 
 import React from "react";
 
 const ClaimSourceListItem = ({ source, index }) => {
     const { href } = source;
 
     return (
-        <Col className="source">
+        <Grid item className="source">
             {typeof source === "object" ? (
-                <List.Item id={source?.props?.targetText || source?.targetText}>
+                <ListItem id={source?.props?.targetText || source?.targetText}>
                     <span style={{ marginRight: 4 }}>
                         {source?.props?.sup || source?.sup || index}.
                     </span>
                     <a href={href} target="_blank" rel="noopener noreferrer">
                         {href}
                     </a>
-                </List.Item>
+                </ListItem>
             ) : (
-                <List.Item id={source}>
+                <ListItem id={source}>
                     {/* TODO: Remove this ternary when source migration is done */}
                     {index}.{" "}
                     <a href={source} target="_blank" rel="noopener noreferrer">
                         {source}
                     </a>
-                </List.Item>
+                </ListItem>
             )}
-        </Col>
+        </Grid>
     );
 };
 

src/components/Source/CreateSource/CreateSourceView.tsx

@@ -1,15 +1,15 @@
 import React from "react";
-import { Col, Row } from "antd";
+import { Grid } from "@mui/material";
 import colors from "../../../styles/colors";
 import DynamicSourceForm from "./DynamicSourceForm";
 
 const CreateSourceView = () => {
     return (
-        <Row justify="center" style={{ background: colors.lightNeutral }}>
-            <Col span={18}>
+        <Grid container justifyContent="center" style={{ background: colors.lightNeutral }}>
+            <Grid item xs={9}>
                 <DynamicSourceForm />
-            </Col>
-        </Row>
+            </Grid>
+        </Grid>
     );
 };
 

src/components/Source/SourceList.tsx

@@ -3,7 +3,7 @@ import SourceApi from "../../api/sourceApi";
 import BaseList from "../List/BaseList";
 import SourceSkeleton from "../Skeleton/SourceSkeleton";
 import SourceListItem from "./SourceListItem";
-import { Col, Row } from "antd";
+import { Grid } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import { useAtom } from "jotai";
 import { currentNameSpace } from "../../atoms/namespace";
@@ -14,8 +14,8 @@ const SourceList = ({ footer = false }) => {
     const [nameSpace] = useAtom(currentNameSpace);
 
     return (
-        <Row justify="center">
-            <Col span={18}>
+        <Grid container justifyContent="center">
+            <Grid item xs={9} sm={12} lg={10}>
                 <BaseList
                     apiCall={SourceApi.get}
                     filter={{ nameSpace }}
@@ -34,8 +34,8 @@ const SourceList = ({ footer = false }) => {
                     emptyFallback={<SourceCreateCTA />}
                     footer={footer && <SourceCreateCTA />}
                 />
-            </Col>
-        </Row>
+            </Grid>
+        </Grid>
     );
 };
 export default SourceList;

src/components/Source/SourceListItem.style.tsx

@@ -1,9 +1,9 @@
 import colors from "../../styles/colors";
 import styled from "styled-components";
 import reviewColors from "../../constants/reviewColors";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 
-const SourceListItemStyled = styled(Col)`
+const SourceListItemStyled = styled(Grid)`
     display: flex;
     flex-direction: column;
     gap: 16px;
@@ -13,6 +13,7 @@ const SourceListItemStyled = styled(Col)`
         font-weight: 600;
         color: ${colors.primary};
         margin: 0;
+        width: 100%;
     }
 
     .title ::before {

src/components/Source/SourceListItem.tsx

@@ -1,11 +1,10 @@
 import React, { useMemo } from "react";
-import { Col, Typography } from "antd";
+import { Grid, Typography } from "@mui/material";
 import CardBase from "../CardBase";
 import AletheiaButton from "../Button";
 import { useTranslation } from "next-i18next";
 import SourceListItemStyled from "./SourceListItem.style";
 import ReviewClassification from "../ClaimReview/ReviewClassification";
-const { Paragraph } = Typography;
 const DOMAIN_PROTOCOL_REGEX = /^(https?:\/\/)?(www\.)?/;
 
 const SourceListItem = ({ source }) => {
@@ -22,25 +21,28 @@ const SourceListItem = ({ source }) => {
 
     return (
         <CardBase style={{ padding: "32px" }}>
-            <SourceListItemStyled
-                span={24}
+            <SourceListItemStyled container
+                xs={12}
                 classification={source.props.classification}
             >
                 <h4 className="title">{title}</h4>
 
-                <Paragraph
-                    style={{ marginBottom: 0 }}
-                    ellipsis={{
-                        rows: 4,
-                        expandable: false,
+                <Typography
+                    variant="body1"
+                    sx={{
+                        display: "-webkit-box",
+                        overflow: "hidden",
+                        WebkitBoxOrient: "vertical",
+                        WebkitLineClamp: 4,
+                        textOverflow: "ellipsis",
                     }}
                 >
                     <cite style={{ fontStyle: "normal" }}>
                         <p className="summary">{source.props.summary}</p>
                     </cite>
-                </Paragraph>
+                </Typography>
 
-                <Col className="footer">
+                <Grid item className="footer">
                     <ReviewClassification
                         label={t("sources:sourceReview")}
                         classification={source.props.classification}
@@ -53,7 +55,7 @@ const SourceListItem = ({ source }) => {
                     >
                         {t("sources:sourceCardButton")}
                     </AletheiaButton>
-                </Col>
+                </Grid>
             </SourceListItemStyled>
         </CardBase>
     );