docs: create docs workspace (#5174)

* docs: migrate ui docs to docs universe

* created yarn workspace

* added eslint and tsconfig configurations

* fix eslint configurations

* fixed eslint configurations

* shared tailwind configurations

* added shared ui package

* added more shared components

* migrating more components

* made details components shared

* move InlineCode component

* moved InputText

* moved Loading component

* Moved Modal component

* moved Select components

* Moved Tooltip component

* moved Search components

* moved ColorMode provider

* Moved Notification components and providers

* used icons package

* use UI colors in api-reference

* moved Navbar component

* used Navbar and Search in UI docs

* added Feedback to UI docs

* general enhancements

* fix color mode

* added copy colors file from ui-preset

* added features and enhancements to UI docs

* move Sidebar component and provider

* general fixes and preparations for deployment

* update docusaurus version

* adjusted versions

* fix output directory

* remove rootDirectory property

* fix yarn.lock

* moved code component

* added vale for all docs MD and MDX

* fix tests

* fix vale error

* fix deployment errors

* change ignore commands

* add output directory

* fix docs test

* general fixes

* content fixes

* fix announcement script

* added changeset

* fix vale checks

* added nofilter option

* fix vale error

www/apps/api-reference/layouts/Divided/index.tsx

@@ -0,0 +1,52 @@
+import clsx from "clsx"
+import { forwardRef } from "react"
+
+type DividedLayoutProps = {
+  mainContent: React.ReactNode
+  codeContent: React.ReactNode
+  className?: string
+  mainContentClassName?: string
+  codeContentClassName?: string
+}
+
+const DividedLayout = forwardRef<HTMLDivElement, DividedLayoutProps>(
+  function DividedLayout(
+    {
+      mainContent,
+      codeContent,
+      className,
+      mainContentClassName,
+      codeContentClassName,
+    },
+    ref
+  ) {
+    return (
+      <div
+        className={clsx(
+          "flex w-full flex-col justify-between lg:flex-row lg:gap-4",
+          className
+        )}
+        ref={ref}
+      >
+        <div
+          className={clsx(
+            "w-full flex-shrink-0 flex-grow-0 lg:w-[calc(50%-32px)] lg:basis-[calc(50%-32px)] lg:pl-4",
+            mainContentClassName
+          )}
+        >
+          {mainContent}
+        </div>
+        <div
+          className={clsx(
+            "w-full flex-shrink-0 flex-grow-0 lg:w-[calc(50%-32px)] lg:basis-[calc(50%-32px)] lg:pr-1.5",
+            codeContentClassName
+          )}
+        >
+          {codeContent}
+        </div>
+      </div>
+    )
+  }
+)
+
+export default DividedLayout