docs: refactor to use TypeScript, ESLint, and Tailwind CSS (#4136)

* docs(refactoring): configured eslint and typescript (#3511) * docs: configured eslint and typescript * fixed yarn.lock * docs(refactoring): migrate components directory to typescript (#3517) * docs: migrate components directory to typescript * removed vscode settings * fix following merge * docs: refactored QueryNote component (#3576) * docs: refactored first batch of theme components (#3579) * docs: refactored second batch of theme components (#3580) * added missing badge styles * fix after merge * docs(refactoring): migrated remaining component to TypeScript (#3770) * docs(refactoring): configured eslint and typescript (#3511) * docs: configured eslint and typescript * fixed yarn.lock * docs(refactoring): migrate components directory to typescript (#3517) * docs: migrate components directory to typescript * removed vscode settings * fix following merge * docs: refactored QueryNote component (#3576) * docs: refactored first batch of theme components (#3579) * docs: refactored second batch of theme components (#3580) * added missing badge styles * docs: refactoring second batch of theme components * fix after merge * refactored icons and other components * docs: refactored all components * docs(refactoring): set up and configured Tailwind Css (#3841) * docs: added tailwind config * docs: added more tailwind configurations * add includes option * added more tailwind configurations * fix to configurations * docs(refactoring): use tailwind css (#4134) * docs: added tailwind config * docs: added more tailwind configurations * add includes option * added more tailwind configurations * fix to configurations * docs(refactoring): refactored all styles to use tailwind css (#4132) * refactored Badge component to use tailwind css * refactored Bordered component to use tailwind css * updated to latest docusaurus * refactored BorderedIcon component to use tailwind css * refactored Feedback component to use tailwind css * refactored icons and footersociallinks to tailwind css * start refactoring of large card * refactored large card styling * refactored until admonitions * refactored until codeblock * refactored until Tabs * refactored Tabs (without testing * finished refactoring styles to tailwind css * upgraded to version 2.4.1 * general fixes * adjusted eslint configurations * fixed ignore files * fixes to large card * fix search styling * fix npx command * updated tabs to use isCodeTabs prop * fixed os tabs * removed os-tabs class in favor of general styling * improvements to buttons * fix for searchbar * fixed redocly download button * chore: added eslint code action (#4135) * small change in commerce modules page
2023-05-19 14:56:48 +03:00
parent 29a88bbf98
commit 94907730d2
292 changed files with 11721 additions and 42102 deletions
@@ -1,62 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import Redoc from '@theme-original/Redoc';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-
-export default function RedocWrapper(props) {
-
-  const isBrowser = useIsBrowser();
-  const [loading, setLoading] = useState(isBrowser ? document.readyState !== 'complete' : true)
-  
-  useEffect(() => {
-    if (isBrowser) {
-
-      //redocusaurus in dark mode displays styling wrong
-      //until the issue is resolved, this is a work around to hide
-      //the bad styling
-      window.onload = function () {
-        setLoading(false);
-      }
-
-      //fallback in case the onload function does not execute
-      setTimeout(() => {
-        if (loading) {
-          setLoading(false);
-        }
-      }, 1000)
-      
-      function scrollHandler () {
-        const redocSidebar = document.querySelector('.redocusaurus .menu-content');
-        const navbar = document.querySelector('.navbar');
-        if (!redocSidebar || !navbar) {
-          return;
-        }
-  
-        let offset = navbar.clientHeight;
-        for (let [_, className] of navbar.classList.entries()) {
-          if (className.indexOf('navbarHidden') !== -1) {
-            offset = 0;
-            break;
-          }
-        }
-        
-        redocSidebar.style.top = `${offset}px`
-      }
-  
-      window.addEventListener('scroll', scrollHandler);
-  
-      return () => {
-        window.removeEventListener('scroll', scrollHandler);
-      }
-    }
-  }, [isBrowser])
-  
-  return (
-    <div style={{
-      opacity: loading ? 0 : 1,
-      transition: 'opacity 0.2s'
-    }}>
-      <Redoc {...props} />
-    </div>
-  );
-}
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from "react"
+import Redoc from "@theme-original/Redoc"
+import type RedocType from "@theme-original/Redoc"
+import type { WrapperProps } from "@docusaurus/types"
+import useIsBrowser from "@docusaurus/useIsBrowser"
+
+type Props = WrapperProps<typeof RedocType>
+
+export default function RedocWrapper(props: Props): JSX.Element {
+  const isBrowser = useIsBrowser()
+  const [loading, setLoading] = useState(
+    isBrowser ? document.readyState !== "complete" : true
+  )
+
+  useEffect(() => {
+    if (isBrowser) {
+      // redocusaurus in dark mode displays styling wrong
+      // until the issue is resolved, this is a work around to hide
+      // the bad styling
+      window.onload = function () {
+        setLoading(false)
+      }
+
+      // fallback in case the onload function does not execute
+      setTimeout(() => {
+        if (loading) {
+          setLoading(false)
+        }
+      }, 1000)
+
+      const scrollHandler = () => {
+        const redocSidebar = document.querySelector(
+          ".redocusaurus .menu-content"
+        ) as HTMLElement
+        const navbar = document.querySelector(".navbar") as HTMLElement
+        if (!redocSidebar || !navbar) {
+          return
+        }
+
+        let offset = navbar.clientHeight
+        // @ts-expect-error: error for entries
+        for (const [, className] of navbar.classList.entries()) {
+          if (className.indexOf("navbarHidden") !== -1) {
+            offset = 0
+            break
+          }
+        }
+
+        redocSidebar.style.top = `${offset}px`
+      }
+
+      window.addEventListener("scroll", scrollHandler)
+
+      return () => {
+        window.removeEventListener("scroll", scrollHandler)
+      }
+    }
+  }, [isBrowser])
+
+  return (
+    <div
+      style={{
+        opacity: loading ? 0 : 1,
+        transition: "opacity 0.2s",
+      }}
+    >
+      <Redoc {...props} />
+    </div>
+  )
+}