From 60af481e099a24eed350b0985c07db1479e46429 Mon Sep 17 00:00:00 2001
From: Quek Ruo Ling <ruoling.quek@ufinity.com>
Date: Wed, 2 Oct 2024 00:52:28 +0800
Subject: [PATCH] [V3][RL] Improve source code display

---
 .eslintrc                                 |  7 ++++
 src/typography/typography.tsx             | 45 ++++++++++++-----------
 stories/typography/typography.stories.tsx | 12 +++---
 3 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index ca8821681..a0a557248 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -92,6 +92,13 @@
             {
                 "additionalHooks": "useIsomorphicLayoutEffect"
             }
+        ],
+        "@typescript-eslint/no-unused-vars": [
+            "error",
+            {
+                "argsIgnorePattern": "^_",
+                "varsIgnorePattern": "^_"
+            }
         ]
     }
 }
diff --git a/src/typography/typography.tsx b/src/typography/typography.tsx
index 86166bd50..4c27841b1 100644
--- a/src/typography/typography.tsx
+++ b/src/typography/typography.tsx
@@ -8,40 +8,44 @@ import { TypographyLinkProps, TypographyProps } from "./types";
 export namespace Typography {
     const createHeader = (
         tag: keyof JSX.IntrinsicElements,
-        textStyle: TypographySizeType
+        textStyle: TypographySizeType,
+        displayName: string
     ) => {
         const Header = styled(tag).attrs<TypographyProps>(({ inline }) => ({
             as: inline ? "span" : undefined,
         }))<TypographyProps>`
             ${(props) => createTypographyStyles(textStyle, props)}
         `;
-        Header.displayName = `Header-${textStyle}`;
+        Header.displayName = `Typography.${displayName}`;
         return Header;
     };
 
-    export const HeaderXXL = createHeader("h1", "header-xxl");
-    export const HeaderXL = createHeader("h2", "header-xl");
-    export const HeaderLG = createHeader("h3", "header-lg");
-    export const HeaderMD = createHeader("h4", "header-md");
-    export const HeaderSM = createHeader("h5", "header-sm");
-    export const HeaderXS = createHeader("h6", "header-xs");
+    export const HeaderXXL = createHeader("h1", "header-xxl", "HeaderXXL");
+    export const HeaderXL = createHeader("h2", "header-xl", "HeaderXL");
+    export const HeaderLG = createHeader("h3", "header-lg", "HeaderLG");
+    export const HeaderMD = createHeader("h4", "header-md", "HeaderMD");
+    export const HeaderSM = createHeader("h5", "header-sm", "HeaderSM");
+    export const HeaderXS = createHeader("h6", "header-xs", "HeaderXS");
 
-    const createBody = (textStyle: TypographySizeType) => {
+    const createBody = (textStyle: TypographySizeType, displayName: string) => {
         const Body = styled.p.attrs<TypographyProps>(({ inline }) => ({
             as: inline ? "span" : undefined,
         }))<TypographyProps>`
             ${(props) => createTypographyStyles(textStyle, props)}
         `;
-        Body.displayName = `Body-${textStyle}`;
+        Body.displayName = `Typography.${displayName}`;
         return Body;
     };
 
-    export const BodyBL = createBody("body-baseline");
-    export const BodyLG = createBody("body-lg");
-    export const BodyMD = createBody("body-md");
-    export const BodySM = createBody("body-sm");
+    export const BodyBL = createBody("body-baseline", "BodyBL");
+    export const BodyLG = createBody("body-lg", "BodyLG");
+    export const BodyMD = createBody("body-md", "BodyMD");
+    export const BodySM = createBody("body-sm", "BodySM");
 
-    const createLinkComponent = (textStyle: TypographySizeType) => {
+    const createLinkComponent = (
+        textStyle: TypographySizeType,
+        displayName: string
+    ) => {
         const HyperlinkBase = styled.a<TypographyLinkProps>`
             ${(props) => css`
                 ${getTextStyle(textStyle, props.weight || "regular")}
@@ -66,15 +70,14 @@ export namespace Typography {
                 {external && <StyledExternalIcon />}
             </HyperlinkBase>
         );
-
-        Component.displayName = `Link-${textStyle}`;
+        Component.displayName = `Typography.${displayName}`;
         return Component;
     };
 
-    export const LinkBL = createLinkComponent("body-baseline");
-    export const LinkMD = createLinkComponent("body-md");
-    export const LinkLG = createLinkComponent("body-lg");
-    export const LinkSM = createLinkComponent("body-sm");
+    export const LinkBL = createLinkComponent("body-baseline", "LinkBL");
+    export const LinkMD = createLinkComponent("body-md", "LinkMD");
+    export const LinkLG = createLinkComponent("body-lg", "LinkLG");
+    export const LinkSM = createLinkComponent("body-sm", "LinkSM");
 }
 
 const StyledExternalIcon = styled(ExternalIcon)`
diff --git a/stories/typography/typography.stories.tsx b/stories/typography/typography.stories.tsx
index 06d0b2d8f..45fca4716 100644
--- a/stories/typography/typography.stories.tsx
+++ b/stories/typography/typography.stories.tsx
@@ -7,7 +7,7 @@ const meta: Meta = {
 export default meta;
 
 export const InlineText: StoryObj = {
-    render: () => (
+    render: (_args) => (
         <Typography.BodySM>
             The quick brown fox{" "}
             <Typography.BodyBL inline>jumps</Typography.BodyBL> over the lazy
@@ -17,7 +17,7 @@ export const InlineText: StoryObj = {
 };
 
 export const InlineLink: StoryObj = {
-    render: () => (
+    render: (_args) => (
         <Typography.BodyBL>
             The quick brown fox{" "}
             <Typography.LinkBL href="https://www.google.com">
@@ -29,7 +29,7 @@ export const InlineLink: StoryObj = {
 };
 
 export const MixedFontWeights: StoryObj = {
-    render: () => (
+    render: (_args) => (
         <Typography.BodyBL>
             The{" "}
             <Typography.BodyBL weight="light" inline>
@@ -47,7 +47,7 @@ export const MixedFontWeights: StoryObj = {
 };
 
 export const Paragraphs: StoryObj = {
-    render: () => (
+    render: (_args) => (
         <>
             <Typography.BodyBL paragraph>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
@@ -64,7 +64,7 @@ export const Paragraphs: StoryObj = {
 };
 
 export const ExternalLink: StoryObj = {
-    render: () => (
+    render: (_args) => (
         <Typography.BodyBL>
             The quick brown fox{" "}
             <Typography.LinkBL href="https://www.google.com" external>
@@ -84,7 +84,7 @@ export const TypographySet: StoryObj = {
         ),
     ],
     tags: ["pattern"],
-    render: () => (
+    render: (_args) => (
         <>
             <Typography.HeaderXXL>HeaderXXL: Lorem ipsum</Typography.HeaderXXL>
             <Typography.HeaderXL>HeaderXL: Lorem ipsum</Typography.HeaderXL>