feat(docs): V2 Components Documentation

packages/site/src/componentList.ts

@@ -53,13 +53,6 @@ export const componentList = [
     sections: ["Forms & Inputs"],
     additionalMatches: ["Search", "Typeahead", "Suggest"],
   },
-  {
-    title: "Autocomplete (v2)",
-    to: "/components/Autocomplete (v2)",
-    imageURL: "/Autocomplete.png",
-    sections: ["Forms & Inputs"],
-    additionalMatches: ["Search", "Typeahead", "Suggest", "Rebuilt"],
-  },
   {
     title: "AutoLink",
     to: "/components/AutoLink",

packages/site/src/content/Autocomplete/index.tsx

@@ -1,42 +1,47 @@
-import AutocompleteContent from "./Autocomplete.stories.mdx";
-import Props from "./Autocomplete.props.json";
-import Notes from "./AutocompleteNotes.mdx";
-import { ContentExport } from "../../types/content";
+import AutocompleteContent from "./v1/Autocomplete.stories.mdx";
+import Props from "./v1/Autocomplete.props.json";
+import RebuiltContent from "./v2/AutocompleteV2.stories.mdx";
+import Notes from "./v1/AutocompleteNotes.mdx";
+import RebuiltNotes from "./v2/AutocompleteV2Notes.mdx";
+import originalExample from "./v1/example";
+import RebuiltProps from "./v2/AutocompleteV2.props.json";
+import rebuiltExample from "./v2/example";
+import { VersionedContentExport } from "../../types/content";
 import { getStorybookUrl } from "../../layout/getStorybookUrl";
 
 export default {
-  content: () => <AutocompleteContent />,
-  props: Props,
-  component: {
-    element: `
-
-const [value, setValue] = useState();
-    const getOptions = () => {
-      return [
-        { value: 1, label: "Hobbitss" },
-        { value: 2, label: "Super heroes" },
-        { value: 3, label: "Space wars and treks" },
-      ]
-    }
-
-  return <Autocomplete
-      getOptions={getOptions}
-      initialOptions={[]}
-      placeholder="Autocomplete"
-      value={value}
-      onChange={setValue}
-    />;
-
-`,
+  v1: {
+    content: () => <AutocompleteContent />,
+    props: Props,
+    component: {
+      element: originalExample,
+    },
+    title: "Autocomplete",
+    links: [
+      {
+        label: "Storybook",
+        url: getStorybookUrl(
+          "?path=/docs/components-forms-and-inputs-autocomplete--docs",
+        ),
+      },
+    ],
+    notes: () => <Notes />,
   },
-  title: "Autocomplete",
-  links: [
-    {
-      label: "Storybook",
-      url: getStorybookUrl(
-        "?path=/docs/components-forms-and-inputs-autocomplete--docs",
-      ),
+  v2: {
+    content: () => <RebuiltContent />,
+    props: RebuiltProps,
+    component: {
+      element: rebuiltExample,
     },
-  ],
-  notes: () => <Notes />,
-} as const satisfies ContentExport;
+    title: "Autocomplete V2",
+    links: [
+      {
+        label: "Storybook",
+        url: getStorybookUrl(
+          "?path=/story/components-forms-and-inputs-autocomplete-web-v2--flat",
+        ),
+      },
+    ],
+    notes: () => <RebuiltNotes />,
+  },
+} as const satisfies VersionedContentExport;

packages/site/src/content/Autocomplete/v1/example.ts

@@ -0,0 +1,21 @@
+export default `
+
+const [value, setValue] = useState();
+const getOptions = () => {
+  return [
+    { value: 1, label: "Hobbits" },
+    { value: 2, label: "Super heroes" },
+    { value: 3, label: "Space wars and treks" },
+  ]
+}
+
+return (
+  <Autocomplete
+    getOptions={getOptions}
+    initialOptions={[]}
+    placeholder="Autocomplete"
+    value={value}
+    onChange={setValue}
+  />
+);
+`;