Add dynamic nesting

toggle-corp · Sep 4, 2024 · 2cedb44 · 2cedb44
1 parent bb09910
commit 2cedb44
Show file tree

Hide file tree

Showing 16 changed files with 853 additions and 225 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,8 @@
     },
     "dependencies": {
         "@codemirror/lang-markdown": "^6.2.5",
+        "@dnd-kit/core": "^6.1.0",
+        "@dnd-kit/sortable": "^8.0.0",
         "@replit/codemirror-vim": "^6.2.1",
         "@sentry/react": "^8.26.0",
         "@togglecorp/fujs": "^2.2.0",
@@ -55,6 +57,7 @@
         "@vitejs/plugin-react-swc": "^3.5.0",
         "@vitest/coverage-v8": "^1.2.2",
         "autoprefixer": "^10.4.14",
+        "core": "link:@types/dnd-kit/core",
         "eslint": "^8.40.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-import-resolver-typescript": "^3.5.5",
@@ -74,6 +77,7 @@
         "postcss-preset-env": "^8.3.2",
         "postinstall-postinstall": "^2.1.0",
         "rollup-plugin-visualizer": "^5.9.0",
+        "sortable": "link:@types/dnd-kit/sortable",
         "stylelint": "^16.7.0",
         "stylelint-config-concentric": "^2.0.2",
         "stylelint-config-recommended": "^14.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App/routes/PageError/index.tsx b/src/App/routes/PageError/index.tsx
@@ -3,8 +3,15 @@ import {
     useEffect,
     useState,
 } from 'react';
+import {
+    IoCaretDown,
+    IoCaretUp,
+    IoHome,
+    IoReload,
+} from 'react-icons/io5';
 import { useRouteError } from 'react-router-dom';
 
+import Button from '#components/Button';
 import Link from '#components/Link';
 
 import styles from './styles.module.css';
@@ -24,14 +31,7 @@ function PageError() {
     const [
         fullErrorVisible,
         setFullErrorVisible,
-    ] = useState(false);
-
-    const handleErrorVisibleToggle = useCallback(
-        () => {
-            setFullErrorVisible((oldValue) => !oldValue);
-        },
-        [setFullErrorVisible],
-    );
+    ] = useState(import.meta.env.DEV);
 
     const handleReloadButtonClick = useCallback(
         () => {
@@ -49,45 +49,53 @@ function PageError() {
                     <h1 className={styles.heading}>
                         Looks like we ran into some issue!
                     </h1>
-                    <div className={styles.message}>
-                        {errorResponse?.error?.message
-                            ?? errorResponse?.message
-                            ?? 'Something unexpected happended!'}
-                    </div>
-                    <button
-                        type="button"
-                        name={undefined}
-                        onClick={handleErrorVisibleToggle}
-                    >
-                        {fullErrorVisible ? 'Hide Error' : 'Show Error'}
-                    </button>
+                    {!fullErrorVisible && (
+                        <div className={styles.stack}>
+                            {errorResponse?.error?.message
+                                ?? errorResponse?.message
+                                ?? 'Something unexpected happended!'}
+                        </div>
+                    )}
                     {fullErrorVisible && (
-                        <>
-                            <div className={styles.stack}>
-                                {errorResponse?.error?.stack
-                                    ?? errorResponse?.stack ?? 'Stack trace not available!'}
-                            </div>
-                            <div className={styles.actions}>
-                                See the developer console for more details.
-                            </div>
-                        </>
+                        <div className={styles.stack}>
+                            {errorResponse?.error?.stack
+                                ?? errorResponse?.stack ?? 'Stack trace not available!'}
+                        </div>
                     )}
                 </div>
+                <div>
+                    See the developer console for more details.
+                </div>
                 <div className={styles.footer}>
-                    {/* NOTE: using the anchor element as it will refresh the page */}
-                    <Link
-                        href="/"
-                        external
-                    >
-                        Go back to homepage
-                    </Link>
-                    <button
+                    <Button
                         type="button"
-                        name={undefined}
-                        onClick={handleReloadButtonClick}
+                        name={!fullErrorVisible}
+                        variant="transparent"
+                        onClick={setFullErrorVisible}
+                        title="Toggle error detail"
+                        actions={fullErrorVisible ? <IoCaretUp /> : <IoCaretDown />}
                     >
-                        Reload
-                    </button>
+                        {fullErrorVisible ? 'Hide details' : 'Show details'}
+                    </Button>
+                    <div className={styles.actions}>
+                        {/* NOTE: using the anchor element as it will refresh the page */}
+                        <Link
+                            href="/"
+                            external
+                            icons={<IoHome />}
+                            variant="quaternary"
+                        >
+                            Go to homepage
+                        </Link>
+                        <Button
+                            name={undefined}
+                            title="Reload page"
+                            onClick={handleReloadButtonClick}
+                            icons={<IoReload />}
+                        >
+                            Reload
+                        </Button>
+                    </div>
                 </div>
             </div>
         </div>

diff --git a/src/App/routes/PageError/styles.module.css b/src/App/routes/PageError/styles.module.css
@@ -8,56 +8,54 @@
     .container {
         display: flex;
         flex-direction: column;
-        /*
-        border-top: var(--go-ui-width-separator-large) solid var(--go-ui-color-primary-red);
-        border-radius: var(--go-ui-border-radius-xl);
-        box-shadow: var(--go-ui-box-shadow-2xl);
-        background-color: var(--go-ui-color-white);
-        padding: var(--go-ui-spacing-2xl);
-        width: calc(100% - var(--go-ui-spacing-2xl));
-        */
+        border-top: var(--width-separator-lg) solid var(--color-primary);
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--box-shadow-lg);
+        background-color: var(--color-foreground);
+        padding: var(--spacing-2xl);
+        width: calc(100% - var(--spacing-2xl));
         max-width: 60rem;
         max-height: 60rem;
-        /*
-        gap: var(--go-ui-spacing-2xl);
-        */
+        gap: var(--spacing-lg);
 
         .content {
             display: flex;
             flex-direction: column;
-            /*
-            gap: var(--go-ui-spacing-md);
-            */
+            gap: var(--spacing-md);
 
             .heading {
                 margin: 0;
-                /*
-                font-weight: var(--go-ui-font-weight-medium);
-                */
+                font-weight: var(--font-weight-semibold);
+            }
+
+            .message {
+                font-family: var(--font-family-mono);
             }
 
             .stack {
                 flex-grow: 1;
-                /*
-                background-color: var(--go-ui-color-background);
-                padding: var(--go-ui-spacing-md);
-                */
+                background-color: var(--color-background);
+                padding: var(--spacing-md);
                 width: 100%;
                 overflow: auto;
                 white-space: pre;
-                /*
-                font-family: var(--go-ui-font-family-mono);
-                */
+                font-family: var(--font-family-mono);
             }
         }
 
         .footer {
             display: flex;
             align-items: center;
-            justify-content: flex-end;
-            /*
-            gap: var(--go-ui-spacing-md);
-            */
+            justify-content: space-between;
+            flex-wrap: wrap;
+            gap: var(--spacing-md);
+
+            .actions {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                gap: var(--spacing-sm);
+            }
         }
     }
 }
diff --git a/src/components/Indent/index.tsx b/src/components/Indent/index.tsx
@@ -0,0 +1,23 @@
+import styles from './styles.module.css';
+
+interface Props {
+    level: number;
+}
+
+function Indent(props: Props) {
+    const { level } = props;
+
+    if (level === 0) {
+        return null;
+    }
+
+    return (
+        <div className={styles.indent}>
+            {Array.from(new Array(level).keys()).map((key) => (
+                <span key={key} className={styles.item} />
+            ))}
+        </div>
+    );
+}
+
+export default Indent;
diff --git a/src/components/Indent/styles.module.css b/src/components/Indent/styles.module.css
@@ -0,0 +1,12 @@
+.indent {
+    display: flex;
+    height: 100%;
+    gap: var(--spacing-sm);
+    min-height: 1.5rem;
+
+    .item {
+        height: 100%;
+        width: var(--spacing-xs);
+        border-right: var(--width-separator-sm) solid var(--color-separator-dark);
+    }
+}
diff --git a/src/index.css b/src/index.css
@@ -4,6 +4,7 @@
 
 :root {
     --font-family-sans-serif: "Fira Sans", sans-serif;
+    --font-family-mono: "Oxygen Mono", monospace;
 
     --color-primary: #c45332;
     --color-secondary: #9cb56e;
@@ -18,6 +19,7 @@
     --color-text-on-dark: #ffffff;
 
     --color-separator: rgba(0, 0, 0, 0.1);
+    --color-separator-dark: rgba(0, 0, 0, 0.2);
 
     --base-font-size: 1rem;
 
@@ -159,6 +161,26 @@ h1, h2, h3, h4, h5, h6 {
     font-weight: var(--font-weight-semibold);
 }
 
+h1 {
+    font-size: var(--font-size-2xl);
+}
+
+h2 {
+    font-size: var(--font-size-xl);
+}
+
+h3 {
+    font-size: var(--font-size-lg);
+}
+
+h4 {
+    font-size: var(--font-size-md);
+}
+
+h5 {
+    font-size: var(--font-size-sm);
+}
+
 p {
     margin: 0;
 }