Merge pull request #4 from shawkyebrahim2514/Development

Modification and Refactoring
shawkyebrahim2514 · Dec 5, 2024 · 51d6716 · 51d6716
2 parents 58b06b1 + 0a21272
commit 51d6716
Show file tree

Hide file tree

Showing 16 changed files with 356 additions and 193 deletions.
diff --git a/react-frontend/src/Types/contexts.ts b/react-frontend/src/Types/contexts.ts
@@ -1,4 +1,5 @@
 type ColorLevels = {
+    0: string,
     50: string,
     100: string,
     200: string,

diff --git a/react-frontend/src/components/Button/index.tsx b/react-frontend/src/components/Button/index.tsx
@@ -26,9 +26,10 @@ type ButtonProps = {
     readonly size?: keyof typeof differentSizes;
     readonly style?: React.CSSProperties;
     readonly pointer?: boolean;
+    readonly children?: JSX.Element[];
 }
 
-export default function Button({ icon, text, onClick, size = "lg", style, pointer }: ButtonProps) {
+export default function Button({ icon, text, onClick, size = "lg", style, pointer, children }: ButtonProps) {
     const { theme } = useThemeContext();
     const buttonStyle = useMemo(() => css({
         padding: differentSizes[size].padding,
@@ -50,6 +51,7 @@ export default function Button({ icon, text, onClick, size = "lg", style, pointe
             onKeyDown={handleKeyDown} >
             {icon}
             {text}
+            {children}
         </div >
     )
 }
diff --git a/react-frontend/src/components/CenteredSection/Header.tsx b/react-frontend/src/components/CenteredSection/Header.tsx
@@ -36,7 +36,7 @@ function HeaderTitle({ title, icon }: Readonly<Pick<HeaderProps, "title" | "icon
             alignItems: "center",
             justifyContent: "center",
             gap: "0.5rem",
-            color: theme.colors.base[600],
+            color: theme.colors.base[700],
         }
     }, [theme.colors]);
 

diff --git a/react-frontend/src/components/HTMLMarkdown/AncherLinkMarkdown.tsx b/react-frontend/src/components/HTMLMarkdown/AncherLinkMarkdown.tsx
@@ -11,6 +11,7 @@ type AncherLinkMarkdownProps = {
 const AncherLinkMarkdown = ({ node, ...props }: AncherLinkMarkdownProps) => {
     const title = props.children as string;
     const link = node?.properties?.href as string;
+    // `[[Google]](https://www.google.com)`
     const matchButtonLink = /\[(.*)\]/.exec(title);
     if (matchButtonLink) {
         return (
@@ -23,6 +24,7 @@ const AncherLinkMarkdown = ({ node, ...props }: AncherLinkMarkdownProps) => {
             />
         )
     }
+    // `[Google](https://www.google.com)`
     return (
         <Header
             title={title}

diff --git a/react-frontend/src/components/HTMLMarkdown/BlockquoteMarkdown.tsx b/react-frontend/src/components/HTMLMarkdown/BlockquoteMarkdown.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useThemeContext } from '../../contexts/ThemeContext';
-import type { Element, Node, Text, Parent, RootContent } from 'hast'
+import type { Element, RootContent } from 'hast'
 import MainSection from '../MainSection';
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
 import { Fragment, jsx, jsxs } from 'react/jsx-runtime'
@@ -16,65 +16,17 @@ type BlockquoteMarkdownProps = {
     node?: Element,
 } & React.HTMLAttributes<HTMLQuoteElement>;
 
-const isTextNode = (node: Node): node is Text => {
-    return node?.type === 'text';
-};
 
-const isParentNode = (node: Node): node is Parent => {
-    return node && 'children' in node;
-};
-
-const dfsVisit = (currentNode: Node, callback: (node: Node) => boolean | undefined): boolean => {
-    let isFinished = false;
-    if (isParentNode(currentNode)) {
-        for (const child of currentNode.children) {
-            isFinished = callback(child) || isFinished;
-            if (!isFinished) {
-                isFinished = dfsVisit(child, callback) || isFinished;
-            }
-        }
-    }
-    return isFinished;
-};
-
-const BlockquoteMarkdown = ({ node, ...props }: BlockquoteMarkdownProps) => {
+const BlockquoteMarkdown = ({ node, className, ...props }: BlockquoteMarkdownProps) => {
     const { theme } = useThemeContext();
-
-    let { className, title, content } = useMemo(() => {
-        let className = props?.className?.split(' ') || [];
-        let title = '';
-        let content: Node[] = node?.children || [];
-        let completed = false;
-        dfsVisit(node as Node, (currentNode: Node) => {
-            if (completed) {
-                content.push(currentNode);
-            } else if (isTextNode(currentNode)) {
-                if (currentNode.value) {
-                    const match = /\[!(.+)\](.*)/.exec(currentNode.value);
-                    if (match) {
-                        match[1].trim().split(' ').forEach((element) => {
-                            className.push(element);
-                        });
-                        title = match[2].trim();
-                        content = [];
-                        completed = true;
-                        return true;
-                    }
-                }
-            }
-            return false;
-        });
-        return { className, title, content };
-    }, [node, props.className]);
-
     const contentJSXElementsFromAST = useMemo(() => (
-        content.map((element) => toJsxRuntime(element as RootContent, {
+        node?.children.map((element) => toJsxRuntime(element as RootContent, {
             Fragment, jsx, jsxs, passNode: true, components: {
                 ...markdownComponents,
                 br: () => null,
             }
         }))
-    ), [content]);
+    ), [node?.children]);
 
     const targetElement = useMemo((): TargetElementType => ({
         "highlight-background": {
@@ -104,10 +56,9 @@ const BlockquoteMarkdown = ({ node, ...props }: BlockquoteMarkdownProps) => {
     let colorType = useMemo((): BlockquoteColorType => className?.includes("secondary") ? "secondary" : "base", [className]);
     let colors = useMemo(() => targetElement[backgroundType][colorType], [backgroundType, colorType, targetElement]);
 
-    if (className.includes("popup")) {
+    if (className?.includes("popup")) {
         return (
-            <MainSection
-                title={title}>
+            <MainSection>
                 {contentJSXElementsFromAST}
             </MainSection>
         );
@@ -118,13 +69,12 @@ const BlockquoteMarkdown = ({ node, ...props }: BlockquoteMarkdownProps) => {
         className='blockquote'
         style={{
             ...props.style,
-            padding: "1rem",
+            padding: "0 1rem",
             position: "relative",
             margin: "1rem 0",
             backgroundColor: `${colors.containerBackgroundColor}`,
             color: `${colors.barColor}`
         }}>
-        <h3>{title}</h3>
         <div style={{
             position: "absolute",
             left: 0,

diff --git a/react-frontend/src/components/HTMLMarkdown/HeadingMarkdown.tsx b/react-frontend/src/components/HTMLMarkdown/HeadingMarkdown.tsx
@@ -4,62 +4,88 @@ type HeadingMarkdownProps = React.HTMLAttributes<HTMLHRElement> & {
     headingNumber: "one" | "two" | "three" | "four" | "five" | "six",
 }
 
-const HeadingMarkdown = ({ headingNumber, ...props }: HeadingMarkdownProps) => {
+const HeadingMarkdown = ({ headingNumber, children, ...props }: HeadingMarkdownProps) => {
     const { theme } = useThemeContext();
     const HTMLHeadingStyles: Record<HeadingMarkdownProps["headingNumber"], React.CSSProperties> = {
         one: {
             fontSize: "3.8rem",
             fontWeight: 700,
-            color: theme.colors.base[800]
+            // color: theme.colors.base[800]
         },
         two: {
             fontSize: "2.2rem",
-            color: theme.colors.base[800]
+            fontWeight: 700,
+            // color: theme.colors.base[800]
         },
         three: {
-            fontSize: "1.8rem"
+            fontSize: "1.8rem",
+            fontWeight: 700,
+            // color: theme.colors.base[800]
         },
         four: {
-            fontSize: "1.4rem"
+            fontSize: "1.4rem",
+            fontWeight: 700,
+            // color: theme.colors.base[800]
         },
         five: {
-            fontSize: "1.2rem"
+            fontSize: "1.2rem",
+            fontWeight: 700,
+            // color: theme.colors.base[800]
         },
         six: {
-            fontSize: "1.1rem"
+            fontSize: "1.1rem",
+            color: theme.colors.base[800]
         }
     }
     const HTMLHeadings: Record<HeadingMarkdownProps["headingNumber"], JSX.Element> = {
-        one: <h1 {...props}
-            style={{
-                ...props.style,
-                ...HTMLHeadingStyles.one
-            }} />,
-        two: <h2 {...props}
-            style={{
-                ...props.style,
-                ...HTMLHeadingStyles.two
-            }} />,
-        three: <h3 {...props}
-            style={{
-                ...props.style,
-                ...HTMLHeadingStyles.three
-            }} />,
-        four: <h4 {...props}
-            style={{
-                ...props.style,
-                ...HTMLHeadingStyles.four
-            }} />,
-        five: <h5 {...props}
-            style={{
-                ...props.style,
-                ...HTMLHeadingStyles.five
-            }} />,
-        six: <h6 {...props}
-            style={{
-                ...props.style,
-                ...HTMLHeadingStyles.six
-            }} />
+        one:
+            <h1 {...props}
+                style={{
+                    ...props.style,
+                    ...HTMLHeadingStyles.one
+                }}>
+                {children}
+            </h1>,
+        two:
+            <h2 {...props}
+                style={{
+                    ...props.style,
+                    ...HTMLHeadingStyles.two
+                }}>
+                {children}
+            </h2>,
+        three:
+            <h3 {...props}
+                style={{
+                    ...props.style,
+                    ...HTMLHeadingStyles.three
+                }}>
+                {children}
+            </h3>,
+        four:
+            <h4 {...props}
+                style={{
+                    ...props.style,
+                    ...HTMLHeadingStyles.four
+                }}>
+                {children}
+            </h4>,
+        five:
+            <h5 {...props}
+                style={{
+                    ...props.style,
+                    ...HTMLHeadingStyles.five
+                }}>
+                {children}
+            </h5>,
+        six:
+            <h6 {...props}
+                style={{
+                    ...props.style,
+                    ...HTMLHeadingStyles.six
+                }}>
+                {children}
+            </h6>,
     }
 
     return HTMLHeadings[headingNumber];

diff --git a/react-frontend/src/components/HTMLMarkdown/HrMarkdown.tsx b/react-frontend/src/components/HTMLMarkdown/HrMarkdown.tsx
@@ -7,7 +7,7 @@ const HrMarkdown = ({ ...props }: React.HTMLAttributes<HTMLHRElement>) => {
         margin: "1rem 0",
         backgroundColor: theme.colors.base[200],
         height: "1px",
-    }), []);
+    }), [theme.colors.base]);
     return (
         <div {...props} style={{
             ...props.style,