From c87ad70f95851fdf504ac4c67cd386dc67fb1ab8 Mon Sep 17 00:00:00 2001
From: Vincentius Roger Kuswara <vincentiusrkuswara@gmail.com>
Date: Sun, 1 Dec 2024 20:16:52 +0800
Subject: [PATCH] fix: update docs to follow the newest format

---
 .../virtualization-custom-item-height.raw.jsx | 53 +++++++++++++++++
 .../virtualization-custom-item-height.ts      | 58 +------------------
 .../virtualization-max-listbox-height.raw.jsx | 52 +++++++++++++++++
 .../virtualization-max-listbox-height.ts      | 57 +-----------------
 .../virtualization-ten-thousand.raw.jsx       | 51 ++++++++++++++++
 .../virtualization-ten-thousand.ts            | 56 +-----------------
 .../autocomplete/virtualization.raw.jsx       | 51 ++++++++++++++++
 .../components/autocomplete/virtualization.ts | 56 +-----------------
 8 files changed, 211 insertions(+), 223 deletions(-)
 create mode 100644 apps/docs/content/components/autocomplete/virtualization-custom-item-height.raw.jsx
 create mode 100644 apps/docs/content/components/autocomplete/virtualization-max-listbox-height.raw.jsx
 create mode 100644 apps/docs/content/components/autocomplete/virtualization-ten-thousand.raw.jsx
 create mode 100644 apps/docs/content/components/autocomplete/virtualization.raw.jsx

diff --git a/apps/docs/content/components/autocomplete/virtualization-custom-item-height.raw.jsx b/apps/docs/content/components/autocomplete/virtualization-custom-item-height.raw.jsx
new file mode 100644
index 0000000000..e53108d669
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/virtualization-custom-item-height.raw.jsx
@@ -0,0 +1,53 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(1000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Autocomplete
+        isVirtualized
+        className="max-w-xs"
+        defaultItems={items}
+        itemHeight={40}
+        label="Search from 1000 items"
+        maxListboxHeight={400}
+        placeholder="Search..."
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/virtualization-custom-item-height.ts b/apps/docs/content/components/autocomplete/virtualization-custom-item-height.ts
index c3211acadd..fd9a236015 100644
--- a/apps/docs/content/components/autocomplete/virtualization-custom-item-height.ts
+++ b/apps/docs/content/components/autocomplete/virtualization-custom-item-height.ts
@@ -1,60 +1,4 @@
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-
-const generateItems = (n) => {
-  const items = [
-    "Cat",
-    "Dog",
-    "Elephant",
-    "Lion",
-    "Tiger",
-    "Giraffe",
-    "Dolphin",
-    "Penguin",
-    "Zebra",
-    "Shark",
-    "Whale",
-    "Otter",
-    "Crocodile",
-  ];
-
-  const dataset = [];
-
-  for (let i = 0; i < n; i++) {
-    const item = items[i % items.length];
-
-    dataset.push({
-      label: \`\${item}\${i}\`,
-      value: \`\${item.toLowerCase()}\${i}\`,
-      description: "Sample description",
-    });
-  }
-
-  return dataset;
-};
-
-export default function App() {
-  const items = generateItems(1000);
-
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Autocomplete 
-        isVirtualized
-        label="Search from 1000 items" 
-        className="max-w-xs"
-        defaultItems={items}
-        placeholder="Search..."
-        maxListboxHeight={400}
-        itemHeight={40}
-      >
-        {(item) => (
-          <AutocompleteItem key={item.value}>
-            {item.label}
-          </AutocompleteItem>
-        )}
-      </Autocomplete>
-    </div>
-  );
-}`;
+import App from "./virtualization-custom-item-height.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.raw.jsx b/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.raw.jsx
new file mode 100644
index 0000000000..55aaf5d903
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.raw.jsx
@@ -0,0 +1,52 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(1000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Autocomplete
+        isVirtualized
+        className="max-w-xs"
+        defaultItems={items}
+        label="Search from 1000 items"
+        maxListboxHeight={400}
+        placeholder="Search..."
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.ts b/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.ts
index eb630f7340..c23ef32193 100644
--- a/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.ts
+++ b/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.ts
@@ -1,59 +1,4 @@
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-
-const generateItems = (n) => {
-  const items = [
-    "Cat",
-    "Dog",
-    "Elephant",
-    "Lion",
-    "Tiger",
-    "Giraffe",
-    "Dolphin",
-    "Penguin",
-    "Zebra",
-    "Shark",
-    "Whale",
-    "Otter",
-    "Crocodile",
-  ];
-
-  const dataset = [];
-
-  for (let i = 0; i < n; i++) {
-    const item = items[i % items.length];
-
-    dataset.push({
-      label: \`\${item}\${i}\`,
-      value: \`\${item.toLowerCase()}\${i}\`,
-      description: "Sample description",
-    });
-  }
-
-  return dataset;
-};
-
-export default function App() {
-  const items = generateItems(1000);
-
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Autocomplete 
-        isVirtualized
-        label="Search from 1000 items" 
-        className="max-w-xs"
-        defaultItems={items}
-        placeholder="Search..."
-        maxListboxHeight={400}
-      >
-        {(item) => (
-          <AutocompleteItem key={item.value}>
-            {item.label}
-          </AutocompleteItem>
-        )}
-      </Autocomplete>
-    </div>
-  );
-}`;
+import App from "./virtualization-max-listbox-height.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/autocomplete/virtualization-ten-thousand.raw.jsx b/apps/docs/content/components/autocomplete/virtualization-ten-thousand.raw.jsx
new file mode 100644
index 0000000000..5cff3537f6
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/virtualization-ten-thousand.raw.jsx
@@ -0,0 +1,51 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(10000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Autocomplete
+        isVirtualized
+        className="max-w-xs"
+        defaultItems={items}
+        label="Search from 10000 items"
+        placeholder="Search..."
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/virtualization-ten-thousand.ts b/apps/docs/content/components/autocomplete/virtualization-ten-thousand.ts
index 1e45f238ab..1b8e486cb5 100644
--- a/apps/docs/content/components/autocomplete/virtualization-ten-thousand.ts
+++ b/apps/docs/content/components/autocomplete/virtualization-ten-thousand.ts
@@ -1,58 +1,4 @@
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-
-const generateItems = (n) => {
-  const items = [
-    "Cat",
-    "Dog",
-    "Elephant",
-    "Lion",
-    "Tiger",
-    "Giraffe",
-    "Dolphin",
-    "Penguin",
-    "Zebra",
-    "Shark",
-    "Whale",
-    "Otter",
-    "Crocodile",
-  ];
-
-  const dataset = [];
-
-  for (let i = 0; i < n; i++) {
-    const item = items[i % items.length];
-
-    dataset.push({
-      label: \`\${item}\${i}\`,
-      value: \`\${item.toLowerCase()}\${i}\`,
-      description: "Sample description",
-    });
-  }
-
-  return dataset;
-};
-
-export default function App() {
-  const items = generateItems(10000);
-
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Autocomplete 
-        isVirtualized
-        label="Search from 10000 items" 
-        className="max-w-xs"
-        defaultItems={items}
-        placeholder="Search..."
-      >
-        {(item) => (
-          <AutocompleteItem key={item.value}>
-            {item.label}
-          </AutocompleteItem>
-        )}
-      </Autocomplete>
-    </div>
-  );
-}`;
+import App from "./virtualization-ten-thousand.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/autocomplete/virtualization.raw.jsx b/apps/docs/content/components/autocomplete/virtualization.raw.jsx
new file mode 100644
index 0000000000..aff71743cb
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/virtualization.raw.jsx
@@ -0,0 +1,51 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(1000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Autocomplete
+        isVirtualized
+        className="max-w-xs"
+        defaultItems={items}
+        label="Search from 1000 items"
+        placeholder="Search..."
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/virtualization.ts b/apps/docs/content/components/autocomplete/virtualization.ts
index 254a3072f2..e40cbd641f 100644
--- a/apps/docs/content/components/autocomplete/virtualization.ts
+++ b/apps/docs/content/components/autocomplete/virtualization.ts
@@ -1,58 +1,4 @@
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-
-const generateItems = (n) => {
-  const items = [
-    "Cat",
-    "Dog",
-    "Elephant",
-    "Lion",
-    "Tiger",
-    "Giraffe",
-    "Dolphin",
-    "Penguin",
-    "Zebra",
-    "Shark",
-    "Whale",
-    "Otter",
-    "Crocodile",
-  ];
-
-  const dataset = [];
-
-  for (let i = 0; i < n; i++) {
-    const item = items[i % items.length];
-
-    dataset.push({
-      label: \`\${item}\${i}\`,
-      value: \`\${item.toLowerCase()}\${i}\`,
-      description: "Sample description",
-    });
-  }
-
-  return dataset;
-};
-
-export default function App() {
-  const items = generateItems(1000);
-
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Autocomplete 
-        isVirtualized
-        label="Search from 1000 items" 
-        className="max-w-xs"
-        defaultItems={items}
-        placeholder="Search..."
-      >
-        {(item) => (
-          <AutocompleteItem key={item.value}>
-            {item.label}
-          </AutocompleteItem>
-        )}
-      </Autocomplete>
-    </div>
-  );
-}`;
+import App from "./virtualization.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,