docs: generate documentation for UI components (#5849)

* added tool to generate spec files for React components

* use typedoc for missing descriptions and types

* improvements and fixes

* improvements

* added doc comments for half of the components

* add custom resolver + more doc comments

* added all tsdocs

* general improvements

* add specs to UI docs

* added github action

* remove unnecessary api route

* Added readme for react-docs-generator

* remove comment

* Update packages/design-system/ui/src/components/currency-input/currency-input.tsx

Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>

* remove description of aria fields + add generate script

---------

Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>

packages/design-system/ui/src/components/code-block/code-block.tsx

@@ -6,10 +6,25 @@ import { Copy } from "@/components/copy"
 import { clx } from "@/utils/clx"
 
 export type CodeSnippet = {
+  /**
+   * The label of the code snippet's tab.
+   */
   label: string
+  /**
+   * The language of the code snippet. For example, `tsx`.
+   */
   language: string
+  /**
+   * The code snippet.
+   */
   code: string
+  /**
+   * Whether to hide the line numbers shown as the side of the code snippet.
+   */
   hideLineNumbers?: boolean
+  /**
+   * Whether to hide the copy button.
+   */
   hideCopy?: boolean
 }
 
@@ -36,7 +51,13 @@ type RootProps = {
   snippets: CodeSnippet[]
 }
 
+/**
+ * This component is based on the `div` element and supports all of its props
+ */
 const Root = ({
+  /**
+   * The code snippets.
+   */
   snippets,
   className,
   children,
@@ -58,14 +79,21 @@ const Root = ({
     </CodeBlockContext.Provider>
   )
 }
+Root.displayName = "CodeBlock"
 
 type HeaderProps = {
   hideLabels?: boolean
 }
 
+/**
+ * This component is based on the `div` element and supports all of its props
+ */
 const HeaderComponent = ({
   children,
   className,
+  /**
+   * Whether to hide the code snippets' labels.
+   */
   hideLabels = false,
   ...props
 }: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {
@@ -98,7 +126,11 @@ const HeaderComponent = ({
     </div>
   )
 }
+HeaderComponent.displayName = "CodeBlock.Header"
 
+/**
+ * This component is based on the `div` element and supports all of its props
+ */
 const Meta = ({
   className,
   ...props
@@ -110,9 +142,13 @@ const Meta = ({
     />
   )
 }
+Meta.displayName = "CodeBlock.Header.Meta"
 
 const Header = Object.assign(HeaderComponent, { Meta })
 
+/**
+ * This component is based on the `div` element and supports all of its props
+ */
 const Body = ({
   className,
   ...props
@@ -240,6 +276,7 @@ const Body = ({
     </div>
   )
 }
+Body.displayName = "CodeBlock.Body"
 
 const CodeBlock = Object.assign(Root, { Body, Header, Meta })