docs: add framework page (#12162)

* initial draft

* finalize page

* fix vale error

* changes to intro

* small fix

* added features list

www/packages/docs-ui/src/components/SplitLists/index.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo } from "react"
+import { Link } from "../Link"
+
+type SplitListItem = {
+  title: string
+  link: string
+  description?: string
+}
+
+export type SplitListProps = {
+  items: SplitListItem[]
+  listsNum?: number
+}
+
+export const SplitList = ({ items, listsNum = 2 }: SplitListProps) => {
+  const lists = useMemo(() => {
+    const lists: SplitListItem[][] = new Array(listsNum).fill(0).map(() => [])
+    // Split the items into listsNum lists
+    // by pushing each item into the list at index i % listsNum
+    // where i is the index of the item in the items array
+    // This will create a round-robin distribution of the items
+    // across the lists
+    // For example, if items = [1, 2, 3, 4, 5] and listsNum = 2
+    // the result will be [[1, 3, 5], [2, 4]]
+    items.forEach((item, index) => {
+      lists[index % listsNum].push(item)
+    })
+    return lists
+  }, [items, listsNum])
+
+  return (
+    <div className="flex flex-col md:flex-row gap-docs_0.5 w-full">
+      {lists.map((list, index) => (
+        <ul key={index} className="flex-1">
+          {list.map((item) => (
+            <li key={item.link} className="mb-docs_0.5">
+              <Link href={item.link}>{item.title}</Link>
+              {item.description && (
+                <>
+                  : <p className="text-docs_3">{item.description}</p>
+                </>
+              )}
+            </li>
+          ))}
+        </ul>
+      ))}
+    </div>
+  )
+}

www/packages/docs-ui/src/components/index.ts

@@ -70,6 +70,7 @@ export * from "./Select"
 export * from "./Sidebar"
 export * from "./Sidebar/Item"
 export * from "./SourceCodeLink"
+export * from "./SplitLists"
 export * from "./Table"
 export * from "./Tabs"
 export * from "./TextArea"

www/packages/docs-utils/src/get-clean-md.ts

@@ -20,6 +20,7 @@ import {
   parsePackageInstall,
   parsePrerequisites,
   parseSourceCodeLink,
+  parseSplitList,
   parseTable,
   parseTabs,
   parseTypeList,
@@ -46,6 +47,7 @@ const parsers: Record<string, ComponentParser> = {
   IconSearch: parseIconSearch,
   HookValues: parseHookValues,
   Colors: parseColors,
+  SplitList: parseSplitList,
 }
 
 const isComponentAllowed = (nodeName: string): boolean => {

www/packages/docs-utils/src/utils/parsers.ts

@@ -886,6 +886,71 @@ export const parseColors: ComponentParser<{
   })
 }
 
+export const parseSplitList: ComponentParser = (
+  node: UnistNodeWithData,
+  index: number,
+  parent: UnistTree
+): VisitorResult => {
+  const items = node.attributes?.find((attr) => attr.name === "items")
+
+  if (!items || typeof items.value === "string" || !items.value.data?.estree) {
+    return
+  }
+
+  const itemsJsVar = estreeToJs(items.value.data.estree)
+
+  if (!itemsJsVar || !Array.isArray(itemsJsVar)) {
+    return
+  }
+
+  const listItems = itemsJsVar
+    .map((item) => {
+      if (
+        !isExpressionJsVarObj(item) ||
+        !("title" in item) ||
+        !("link" in item) ||
+        !isExpressionJsVarLiteral(item.title) ||
+        !isExpressionJsVarLiteral(item.link)
+      ) {
+        return null
+      }
+      const description = isExpressionJsVarLiteral(item.description)
+        ? (item.description.data as string)
+        : ""
+      return {
+        type: "listItem",
+        children: [
+          {
+            type: "paragraph",
+            children: [
+              {
+                type: "link",
+                url: `${item.link.data}`,
+                children: [
+                  {
+                    type: "text",
+                    value: `${item.title.data}${description ? `: ${description}` : ""}`,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      }
+    })
+    .filter(Boolean) as UnistNode[]
+  if (!listItems.length) {
+    return
+  }
+  parent?.children.splice(index, 1, {
+    type: "list",
+    ordered: false,
+    spread: false,
+    children: listItems,
+  })
+  return [SKIP, index]
+}
+
 /**
  * Helpers
  */