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/select/select.tsx

@@ -28,17 +28,38 @@ const useSelectContext = () => {
   return context
 }
 
-const Root = ({ children, size = "base", ...props }: SelectProps) => {
+/**
+ * This component is based on [Radix UI Select](https://www.radix-ui.com/primitives/docs/components/select).
+ * It also accepts all props of the HTML `select` component.
+ */
+const Root = ({
+  children, 
+  /**
+   * The select's size.
+   */
+  size = "base", 
+  ...props
+}: SelectProps) => {
   return (
     <SelectContext.Provider value={React.useMemo(() => ({ size }), [size])}>
       <SelectPrimitive.Root {...props}>{children}</SelectPrimitive.Root>
     </SelectContext.Provider>
   )
 }
+Root.displayName = "Select"
 
+/**
+ * Groups multiple items together.
+ */
 const Group = SelectPrimitive.Group
+Group.displayName = "Select.Group"
 
+/**
+ * Displays the selected value, or a placeholder if no value is selected.
+ * It's based on [Radix UI Select Value](https://www.radix-ui.com/primitives/docs/components/select#value).
+ */
 const Value = SelectPrimitive.Value
+Value.displayName = "Select.Value"
 
 const triggerVariants = cva({
   base: clx(
@@ -59,6 +80,9 @@ const triggerVariants = cva({
   },
 })
 
+/**
+ * The trigger that toggles the select.
+ */
 const Trigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
@@ -78,7 +102,7 @@ const Trigger = React.forwardRef<
     </SelectPrimitive.Trigger>
   )
 })
-Trigger.displayName = SelectPrimitive.Trigger.displayName
+Trigger.displayName = "Select.Trigger"
 
 const Content = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -127,8 +151,11 @@ const Content = React.forwardRef<
     </SelectPrimitive.Portal>
   )
 )
-Content.displayName = SelectPrimitive.Content.displayName
+Content.displayName = "Select.Content"
 
+/**
+ * Used to label a group of items.
+ */
 const Label = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
@@ -142,8 +169,12 @@ const Label = React.forwardRef<
     {...props}
   />
 ))
-Label.displayName = SelectPrimitive.Label.displayName
+Label.displayName = "Select.Label"
 
+/**
+ * An item in the select. It's based on [Radix UI Select Item](https://www.radix-ui.com/primitives/docs/components/select#item)
+ * and accepts its props.
+ */
 const Item = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
@@ -177,7 +208,7 @@ const Item = React.forwardRef<
     </SelectPrimitive.Item>
   )
 })
-Item.displayName = SelectPrimitive.Item.displayName
+Item.displayName = "Select.Item"
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -189,7 +220,7 @@ const Separator = React.forwardRef<
     {...props}
   />
 ))
-Separator.displayName = SelectPrimitive.Separator.displayName
+Separator.displayName = "Select.Separator"
 
 const Select = Object.assign(Root, {
   Group,