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

www/docs/src/theme/DocPage/Layout/Main/index.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import {useDocsSidebar} from '@docusaurus/theme-common/internal';
-import styles from './styles.module.css';
-
-export default function DocPageLayoutMain({hiddenSidebarContainer, children}) {
-  const sidebar = useDocsSidebar();
-  return (
-    <main
-      className={clsx(
-        styles.docMainContainer,
-        (hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
-      )}>
-      <div
-        className={clsx(
-          'container padding-top--md docs-page-container',
-          styles.docItemWrapper,
-          hiddenSidebarContainer && styles.docItemWrapperEnhanced,
-        )}>
-        {children}
-      </div>
-    </main>
-  );
-}

www/docs/src/theme/DocPage/Layout/Main/index.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+import clsx from "clsx"
+import { useDocsSidebar } from "@docusaurus/theme-common/internal"
+import type { Props } from "@theme/DocPage/Layout/Main"
+
+export default function DocPageLayoutMain({
+  hiddenSidebarContainer,
+  children,
+}: Props): JSX.Element {
+  const sidebar = useDocsSidebar()
+  return (
+    <main
+      className={clsx(
+        "tw-flex tw-flex-col tw-w-full lg:tw-flex-grow lg:tw-max-w-[calc(100%-320px)]",
+        (hiddenSidebarContainer || !sidebar) && "lg:tw-max-w-[calc(100%-30px)]"
+      )}
+    >
+      <div
+        className={clsx(
+          "container padding-top--md tw-px-0",
+          hiddenSidebarContainer && "lg:tw-max-w-main-content-hidden-sidebar"
+        )}
+      >
+        {children}
+      </div>
+    </main>
+  )
+}

www/docs/src/theme/DocPage/Layout/Main/styles.module.css

@@ -1,22 +0,0 @@
-.docMainContainer {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-@media (min-width: 997px) {
-  .docMainContainer {
-    flex-grow: 1;
-    max-width: calc(100% - var(--doc-sidebar-width));
-  }
-
-  .docMainContainerEnhanced {
-    max-width: calc(100% - var(--doc-sidebar-hidden-width));
-  }
-
-  .docItemWrapperEnhanced {
-    max-width: calc(
-      var(--ifm-container-width) + var(--doc-sidebar-width)
-    ) !important;
-  }
-}

www/docs/src/theme/DocPage/Layout/Sidebar/index.js

@@ -1,84 +0,0 @@
-import React, {useState, useCallback, useRef} from 'react';
-import clsx from 'clsx';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-import {useDocsSidebar} from '@docusaurus/theme-common/internal';
-import {useLocation} from '@docusaurus/router';
-import DocSidebar from '@theme/DocSidebar';
-import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton';
-import styles from './styles.module.css';
-import { SwitchTransition, CSSTransition } from 'react-transition-group';
-// Reset sidebar state when sidebar changes
-// Use React key to unmount/remount the children
-// See https://github.com/facebook/docusaurus/issues/3414
-function ResetOnSidebarChange({children}) {
-  const sidebar = useDocsSidebar();
-  return (
-    <React.Fragment key={sidebar?.name ?? 'noSidebar'}>
-      {children}
-    </React.Fragment>
-  );
-}
-export default function DocPageLayoutSidebar({
-  sidebar,
-  hiddenSidebarContainer,
-  setHiddenSidebarContainer,
-}) {
-  const {pathname} = useLocation();
-  const [hiddenSidebar, setHiddenSidebar] = useState(false);
-  const toggleSidebar = useCallback(() => {
-    if (hiddenSidebar) {
-      setHiddenSidebar(false);
-    }
-    setHiddenSidebarContainer((value) => !value);
-  }, [setHiddenSidebarContainer, hiddenSidebar]);
-  const {name} = useDocsSidebar()
-  const sidebarRef = useRef(null)
-  return (
-          <aside
-            className={clsx(
-              ThemeClassNames.docs.docSidebarContainer,
-              styles.docSidebarContainer,
-              hiddenSidebarContainer && styles.docSidebarContainerHidden,
-            )}
-            onTransitionEnd={(e) => {
-              if (!e.currentTarget.classList.contains(styles.docSidebarContainer)) {
-                return;
-              }
-              if (hiddenSidebarContainer) {
-                setHiddenSidebar(true);
-              }
-            }}>
-            <SwitchTransition>
-              <CSSTransition
-                key={name}
-                nodeRef={sidebarRef}
-                classNames={{
-                  enter: 'animate__animated animate__fadeInLeft',
-                  exit: 'animate__animated animate__fadeOutLeft'
-                }}
-                timeout={200}
-              >
-              <div
-                className={styles.sidebarViewportWrapper}
-                ref={sidebarRef}>
-                <ResetOnSidebarChange>
-                  <div
-                    className={clsx(
-                      styles.sidebarViewport,
-                      hiddenSidebar && styles.sidebarViewportHidden,
-                    )}>
-                    <DocSidebar
-                      sidebar={sidebar}
-                      path={pathname}
-                      onCollapse={toggleSidebar}
-                      isHidden={hiddenSidebar}
-                    />
-                    {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
-                  </div>
-              </ResetOnSidebarChange>
-              </div>
-        </CSSTransition>
-      </SwitchTransition>
-          </aside>
-  );
-}

www/docs/src/theme/DocPage/Layout/Sidebar/index.tsx

@@ -0,0 +1,96 @@
+import React, { type ReactNode, useState, useCallback, useRef } from "react"
+import clsx from "clsx"
+import { ThemeClassNames } from "@docusaurus/theme-common"
+import { useDocsSidebar } from "@docusaurus/theme-common/internal"
+import { useLocation } from "@docusaurus/router"
+import DocSidebar from "@theme/DocSidebar"
+import ExpandButton from "@theme/DocPage/Layout/Sidebar/ExpandButton"
+import type { Props } from "@theme/DocPage/Layout/Sidebar"
+import { SwitchTransition, CSSTransition } from "react-transition-group"
+
+// Reset sidebar state when sidebar changes
+// Use React key to unmount/remount the children
+// See https://github.com/facebook/docusaurus/issues/3414
+function ResetOnSidebarChange({ children }: { children: ReactNode }) {
+  const sidebar = useDocsSidebar()
+  return (
+    <React.Fragment key={sidebar?.name ?? "noSidebar"}>
+      {children}
+    </React.Fragment>
+  )
+}
+
+export default function DocPageLayoutSidebar({
+  sidebar,
+  hiddenSidebarContainer,
+  setHiddenSidebarContainer,
+}: Props): JSX.Element {
+  const { pathname } = useLocation()
+
+  const [hiddenSidebar, setHiddenSidebar] = useState(false)
+  const toggleSidebar = useCallback(() => {
+    if (hiddenSidebar) {
+      setHiddenSidebar(false)
+    }
+    setHiddenSidebarContainer((value) => !value)
+  }, [setHiddenSidebarContainer, hiddenSidebar])
+
+  const { name } = useDocsSidebar()
+  const sidebarRef = useRef(null)
+
+  return (
+    <aside
+      className={clsx(
+        ThemeClassNames.docs.docSidebarContainer,
+        "lg:tw-block lg:tw-w-sidebar lg:tw-will-change-[width] lg:tw-transition-[width] lg:tw-ease-ease tw-clip tw-hidden tw-duration-200",
+        hiddenSidebarContainer && "lg:tw-w-sidebar-hidden lg:tw-cursor-pointer"
+      )}
+      onTransitionEnd={(e) => {
+        if (
+          !e.currentTarget.classList.contains(
+            ThemeClassNames.docs.docSidebarContainer
+          )
+        ) {
+          return
+        }
+
+        if (hiddenSidebarContainer) {
+          setHiddenSidebar(true)
+        }
+      }}
+    >
+      <SwitchTransition>
+        <CSSTransition
+          key={name}
+          nodeRef={sidebarRef}
+          classNames={{
+            enter: "animate__animated animate__fadeInLeft animate__fastest",
+            exit: "animate__animated animate__fadeOutLeft animate__fastest",
+          }}
+          timeout={200}
+        >
+          <div
+            className={clsx(
+              "lg:tw-top-[57px] lg:tw-sticky lg:tw-max-h-screen lg:[&>div]:tw-max-h-screen"
+            )}
+            ref={sidebarRef}
+          >
+            <ResetOnSidebarChange>
+              <div>
+                <DocSidebar
+                  sidebar={sidebar}
+                  path={pathname}
+                  onCollapse={toggleSidebar}
+                  isHidden={hiddenSidebar}
+                />
+                {hiddenSidebar && (
+                  <ExpandButton toggleSidebar={toggleSidebar} />
+                )}
+              </div>
+            </ResetOnSidebarChange>
+          </div>
+        </CSSTransition>
+      </SwitchTransition>
+    </aside>
+  )
+}

www/docs/src/theme/DocPage/Layout/Sidebar/styles.module.css

@@ -1,36 +0,0 @@
-:root {
-  --doc-sidebar-width: 300px;
-  --doc-sidebar-hidden-width: 30px;
-}
-
-.docSidebarContainer {
-  display: none;
-
-  --animate-duration: 0.2s;
-}
-
-@media (min-width: 997px) {
-  .docSidebarContainer {
-    display: block;
-    width: var(--doc-sidebar-width);
-    /* margin-top: calc(-1 * var(--ifm-navbar-height)); */
-    will-change: width;
-    transition: width var(--ifm-transition-fast) ease;
-    clip-path: inset(0);
-  }
-
-  .docSidebarContainerHidden {
-    width: var(--doc-sidebar-hidden-width);
-    cursor: pointer;
-  }
-
-  .sidebarViewportWrapper {
-    top: var(--ifm-navbar-height);
-    position: sticky;
-  }
-
-  .sidebarViewportWrapper,
-  .sidebarViewportWrapper > div {
-    max-height: 100vh;
-  }
-}

www/docs/src/theme/DocPage/index.tsx

@@ -1,28 +1,30 @@
-import React from 'react';
-import clsx from 'clsx';
+import React from "react"
+import clsx from "clsx"
 import {
   HtmlClassNameProvider,
   ThemeClassNames,
   PageMetadata,
-} from '@docusaurus/theme-common';
+} from "@docusaurus/theme-common"
 import {
   docVersionSearchTag,
   DocsSidebarProvider,
   DocsVersionProvider,
   useDocRouteMetadata,
-} from '@docusaurus/theme-common/internal';
-import DocPageLayout from '@theme/DocPage/Layout';
-import NotFound from '@theme/NotFound';
-import SearchMetadata from '@theme/SearchMetadata';
-function DocPageMetadata(props) {
-  const {versionMetadata} = props;
+} from "@docusaurus/theme-common/internal"
+import DocPageLayout from "@theme/DocPage/Layout"
+import NotFound from "@theme/NotFound"
+import SearchMetadata from "@theme/SearchMetadata"
+import type { Props } from "@theme/DocPage"
+
+function DocPageMetadata(props: Props): JSX.Element {
+  const { versionMetadata } = props
   return (
     <>
       <SearchMetadata
         version={versionMetadata.version}
         tag={docVersionSearchTag(
           versionMetadata.pluginId,
-          versionMetadata.version,
+          versionMetadata.version
         )}
       />
       <PageMetadata>
@@ -31,16 +33,16 @@ function DocPageMetadata(props) {
         )}
       </PageMetadata>
     </>
-  );
+  )
 }
-export default function DocPage(props) {
-  const {versionMetadata} = props;
-  const currentDocRouteMetadata = useDocRouteMetadata(props);
+
+export default function DocPage(props: Props): JSX.Element {
+  const { versionMetadata } = props
+  const currentDocRouteMetadata = useDocRouteMetadata(props)
   if (!currentDocRouteMetadata) {
-    return <NotFound />;
+    return <NotFound />
   }
-  const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
-  
+  const { docElement, sidebarName, sidebarItems } = currentDocRouteMetadata
   return (
     <>
       <DocPageMetadata {...props} />
@@ -49,9 +51,10 @@ export default function DocPage(props) {
           // TODO: it should be removed from here
           ThemeClassNames.wrapper.docsPages,
           ThemeClassNames.page.docsDocPage,
-          props.versionMetadata.className,
-          sidebarName && 'doc-has-sidebar'
-        )}>
+          props.versionMetadata.className
+          // sidebarName && "doc-has-sidebar"
+        )}
+      >
         <DocsVersionProvider version={versionMetadata}>
           <DocsSidebarProvider name={sidebarName} items={sidebarItems}>
             <DocPageLayout>{docElement}</DocPageLayout>
@@ -59,5 +62,5 @@ export default function DocPage(props) {
         </DocsVersionProvider>
       </HtmlClassNameProvider>
     </>
-  );
+  )
 }