From e77c3ca600984f6c9b0e57466675960a9416bd03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= <cysiak0412@gmail.com>
Date: Mon, 13 May 2024 14:24:34 +0200
Subject: [PATCH] Use Table of Contents from @swmansion/t-rex-ui

---
 docs/src/theme/TOCCollapsible/index.js    |  3 ++
 docs/src/theme/TOCItems/Tree.js           | 38 ++---------------------
 docs/src/theme/TOCItems/index.js          |  3 ++
 docs/src/theme/TOCItems/styles.module.css | 15 ---------
 4 files changed, 9 insertions(+), 50 deletions(-)
 create mode 100644 docs/src/theme/TOCCollapsible/index.js
 create mode 100644 docs/src/theme/TOCItems/index.js
 delete mode 100644 docs/src/theme/TOCItems/styles.module.css

diff --git a/docs/src/theme/TOCCollapsible/index.js b/docs/src/theme/TOCCollapsible/index.js
new file mode 100644
index 0000000000..81bfb454ae
--- /dev/null
+++ b/docs/src/theme/TOCCollapsible/index.js
@@ -0,0 +1,3 @@
+import { TOCCollapsible } from '@swmansion/t-rex-ui';
+
+export default TOCCollapsible;
diff --git a/docs/src/theme/TOCItems/Tree.js b/docs/src/theme/TOCItems/Tree.js
index 9d93abf1dc..4983afc968 100644
--- a/docs/src/theme/TOCItems/Tree.js
+++ b/docs/src/theme/TOCItems/Tree.js
@@ -1,35 +1,3 @@
-import React from 'react';
-import styles from './styles.module.css';
-import clsx from 'clsx';
-// Recursive component rendering the toc tree
-function TOCItemTree({ toc, className, linkClassName, isChild }) {
-  if (!toc.length) {
-    return null;
-  }
-  return (
-    <ul className={clsx(styles.tocItems, isChild ? undefined : className)}>
-      {toc.map((heading) => (
-        <li key={heading.id}>
-          {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-          <a
-            href={`#${heading.id}`}
-            className={linkClassName ?? undefined}
-            // Developer provided the HTML, so assume it's safe.
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{
-              __html: `<span>${heading.value}</span>`,
-            }}
-          />
-          <TOCItemTree
-            isChild
-            toc={heading.children}
-            className={className}
-            linkClassName={linkClassName}
-          />
-        </li>
-      ))}
-    </ul>
-  );
-}
-// Memo only the tree root is enough
-export default React.memo(TOCItemTree);
+import { TOCItemTree } from '@swmansion/t-rex-ui';
+
+export default TOCItemTree;
diff --git a/docs/src/theme/TOCItems/index.js b/docs/src/theme/TOCItems/index.js
new file mode 100644
index 0000000000..086bd62715
--- /dev/null
+++ b/docs/src/theme/TOCItems/index.js
@@ -0,0 +1,3 @@
+import { TOCItems } from '@swmansion/t-rex-ui';
+
+export default TOCItems;
diff --git a/docs/src/theme/TOCItems/styles.module.css b/docs/src/theme/TOCItems/styles.module.css
deleted file mode 100644
index 73a184ec2f..0000000000
--- a/docs/src/theme/TOCItems/styles.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.tocItems span {
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 1.2;
-}
-
-.tocItems a[class*='active'] span {
-  text-decoration: underline;
-  text-underline-offset: 4px;
-}
-
-.tocItems a code {
-  padding: 0;
-  background-color: inherit;
-}