feat(docs): migrate documentation site into monorepo (#5912)

apps/docs/src/components/widgets/adding.tsx

@@ -0,0 +1,9 @@
+export const AddingWidget = () => {
+  return (
+    <p>
+      You can find how to add the widget on the{" "}
+      <a href="../../getting-started/after-the-installation#embed-integration-data-using-widgets">Widgets</a>{" "}
+      documentation page.
+    </p>
+  );
+};

apps/docs/src/components/widgets/configuration.tsx

@@ -0,0 +1,87 @@
+import { WidgetConfiguration, WidgetConfigurationItem } from "@site/src/types";
+
+interface WidgetConfigProps {
+  configuration: WidgetConfiguration;
+}
+
+export const WidgetConfig = (props: WidgetConfigProps) => {
+  const innerConfigs = getInnerConfigs(props.configuration);
+
+  return (
+    <div>
+      <ConfigTable configuration={props.configuration} />
+
+      {innerConfigs.map((item) => (
+        <>
+          <h3 id={item.name}>{item.name}</h3>
+
+          <ConfigTable configuration={item.configuration} />
+        </>
+      ))}
+    </div>
+  );
+};
+
+const ConfigTable = (props: WidgetConfigProps) => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Description</th>
+          <th>Values</th>
+          <th>Default value</th>
+        </tr>
+      </thead>
+      <tbody>
+        {props.configuration.items.map((item, index) => (
+          <tr key={index}>
+            <td>{item.name}</td>
+            <td>{item.description}</td>
+            <td>
+              <ConfigValues values={item.values} />
+            </td>
+            <td>{item.defaultValue}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+const ConfigValues = ({ values }: Pick<WidgetConfigurationItem, "values">) => {
+  if (typeof values === "string") return <span>{values}</span>;
+  if (values.type === "boolean") return <span>yes / no</span>;
+  if (values.type === "string") return <span>String</span>;
+  if (values.type === "select") {
+    return (
+      <ul>
+        {values.options.map((option) => (
+          <li key={option}>{option}</li>
+        ))}
+      </ul>
+    );
+  }
+
+  const reference = <a href={`#${values.name}`}>{values.name}</a>;
+  if (values.type === "object") return reference;
+  if (values.type === "array") return <span>{reference}[]</span>;
+};
+
+const getInnerConfigs = (config: WidgetConfiguration) => {
+  const configItems: Extract<WidgetConfigurationItem["values"], { type: "object" | "array" }>[] = [];
+  config.items.forEach((item) => {
+    if (
+      item.values &&
+      typeof item.values === "object" &&
+      (item.values.type === "object" || item.values.type === "array")
+    ) {
+      configItems.push(item.values);
+      const innerItems = getInnerConfigs(item.values.configuration);
+      if (innerItems.length > 0) {
+        configItems.push(...innerItems);
+      }
+    }
+  });
+  return configItems;
+};

apps/docs/src/components/widgets/header.tsx

@@ -0,0 +1,22 @@
+import { DocsHeader } from "../ui/header";
+import { WidgetDefinition } from "@site/src/types";
+
+interface WidgetHeaderProps {
+  widget: WidgetDefinition;
+  categories: string[];
+}
+
+export const WidgetHeader = (props: WidgetHeaderProps) => {
+  return (
+    <DocsHeader
+      title={props.widget.name}
+      description={props.widget.description}
+      icon={
+        <div className="w-12 h-12 flex justify-center items-center bg-red-500 bg-opacity-10 rounded-md">
+          <props.widget.icon size={32} stroke={1.5} className="stroke-red-500" />
+        </div>
+      }
+      categories={props.categories}
+    />
+  );
+};

apps/docs/src/components/widgets/integrations.tsx

@@ -0,0 +1,52 @@
+import { useColorMode } from "@docusaurus/theme-common";
+import { IntegrationDefinition } from "@site/src/types";
+import { IconExternalLink } from "@tabler/icons-react";
+import { getIntegrationIconUrl } from "../integrations/header";
+
+interface WidgetIntegrationsProps {
+  items: {
+    integration: IntegrationDefinition;
+    note?: string;
+  }[];
+}
+
+export const WidgetIntegrations = ({ items }: WidgetIntegrationsProps) => {
+  const { isDarkTheme } = useColorMode();
+
+  return (
+    <div className="flex flex-col gap-4 mt-4 w-full">
+      <div className="flex flex-col gap-2">
+        {items.map((item) => (
+          <div
+            key={item.integration.name}
+            className="flex gap-6 rounded-xl border border-solid dark:border-[#333] border-[#e5e7eb] p-4 shadow-sm w-full items-center justify-between"
+          >
+            <div className="flex gap-6 items-center">
+              <img
+                width={40}
+                height={40}
+                src={getIntegrationIconUrl(item.integration, isDarkTheme)}
+                alt={`${item.integration.name} icon`}
+                className="w-10 h-10"
+              />
+
+              <div className="flex flex-col gap-0">
+                <span className="text-base font-bold">{item.integration.name}</span>
+                <span className="text-sm dark:text-[#999999] text-[#696969]">{item.integration.description}</span>
+                {item.note && <span className="text-xs text-yellow-500 mt-1">{item.note}</span>}
+              </div>
+            </div>
+
+            <a
+              href={item.integration.path}
+              className="border border-solid border-[#e5e7eb] dark:border-[#333] p-2 py-1 rounded-md gap-2 flex justify-center items-center hover:no-underline hover:bg-slate-100 dark:hover:bg-gray-800"
+            >
+              <IconExternalLink size={16} stroke={1.5} className="dark:stroke-white stroke-black" />
+              <span className="dark:text-white text-black font-medium text-sm">Details</span>
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};