feat(docusaurus-theme): redirect to GH using types definition

packages/docusaurus-theme/src/components/prop_table/prop_table.tsx

@@ -16,8 +16,57 @@ import {
 } from '@elastic/eui-docgen';
 import { useCallback, useMemo } from 'react';
 import { css } from '@emotion/react';
-import { PropTableExtendedTypes } from './extended_types';
 import Heading from '@theme/Heading';
+import types from '@elastic/eui-docgen/dist/types.json';
+
+import { PropTableExtendedTypes } from './extended_types';
+
+export interface Source {
+  fileName: string;
+  line: number;
+  character: number;
+  url: string;
+}
+
+export interface Child {
+  id: number;
+  name: string;
+  variant: string;
+  kind: number;
+  flags: Record<string, unknown>;
+  children?: Child[];
+  groups?: Group[];
+  sources?: Source[];
+  type?: {
+    type: string;
+    types?: { type: string; value?: string }[];
+    declaration?: Record<string, unknown>;
+    target?: { qualifiedName: string };
+    name?: string;
+    package?: string;
+  };
+  defaultValue?: string;
+}
+
+export interface Group {
+  title: string;
+  children: number[];
+}
+
+export interface Types {
+  schemaVersion: string;
+  id: number;
+  name: string;
+  variant: string;
+  kind: number;
+  flags: Record<string, unknown>;
+  children: Child[];
+  groups: Group[];
+  packageName: string;
+  readme: unknown[];
+  symbolIdMap: Record<string, unknown>;
+  files: Record<string, unknown>;
+}
 
 export interface PropTableProps {
   definition: ProcessedComponent;
@@ -136,15 +185,30 @@ export const PropTable = ({
           value: ProcessedComponentProp['description'],
           prop: ProcessedComponentProp
         ) {
+          const result = value
+            .replace(/{@link (\w+)}/g, (_, componentName) => {
+              const componentSource = (types as Types).children.find(
+                (item) => item.name === componentName
+              )?.sources?.[0];
+
+              if (componentSource) {
+                const { fileName, line } = componentSource;
+                return `[${componentName}](https://github.com/elastic/eui/tree/main/packages/${fileName}#L${line})`;
+              } else {
+                return `\`${componentName}\``;
+              }
+            })
+            .trim();
+
           return (
             <EuiFlexGroup
               direction="column"
               alignItems="flexStart"
               gutterSize="s"
             >
-              {value?.trim() && (
+              {result && (
                 <EuiMarkdownFormat css={styles.description}>
-                  {value}
+                  {result}
                 </EuiMarkdownFormat>
               )}
               {prop.type && (

packages/eui-docgen/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "clear": "rimraf dist/ lib/",
     "generate": "ts-node src/main.ts",
-    "build": "tsc && yarn generate"
+    "build": "tsc && yarn generate && yarn typedoc",
+    "typedoc": "typedoc"
   },
   "repository": {
     "type": "git",
@@ -18,10 +19,11 @@
     "glob": "^11.0.0",
     "react-docgen-typescript": "^2.2.2",
     "ts-node": "^10.9.2",
-    "typescript": "~5.5.4"
+    "typescript": "^5.8.3"
   },
   "devDependencies": {
-    "rimraf": "^6.0.1"
+    "rimraf": "^6.0.1",
+    "typedoc": "^0.28.3"
   },
   "files": [
     "dist",

packages/eui-docgen/typedoc.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": ["../eui"],
+  "entryPointStrategy": "packages",
+  "outputs": [
+    {
+      "name": "json",
+      "path": "dist/types.json",
+    }
+  ],
+  "exclude": ["**/node_modules/**"]
+}

packages/eui-theme-common/src/global_styling/variables/typography.ts

@@ -138,7 +138,7 @@ export interface _EuiThemeTitle {
 export type _EuiThemeFont = _EuiThemeFontBase & {
   scale: _EuiThemeFontScales;
   /**
-   * @see {@link https://eui.elastic.co/#/theming/typography/values%23font-weight | Reference} for more information
+   * See {@link https://eui.elastic.co/#/theming/typography/values%23font-weight | Reference} for more information
    */
   weight: _EuiThemeFontWeights;
   body: _EuiThemeBody;

packages/eui-theme-common/src/services/theme/types.ts

@@ -64,7 +64,7 @@ export type EuiThemeShapeBase = {
   /** - Default value: 16 */
   base: _EuiThemeBase;
   /**
-   * @see {@link https://eui.elastic.co/#/theming/sizing | Reference} for more information
+   * See {@link https://eui.elastic.co/#/theming/sizing | Reference} for more information
    */
   size: _EuiThemeSizes;
   font: _EuiThemeFont;

packages/eui/changelogs/upcoming/8626.md

@@ -0,0 +1,3 @@
+**Dependency updates**
+
+- Updated `typescript` to v5.8.3

packages/eui/src/components/basic_table/basic_table.tsx

@@ -227,7 +227,7 @@ interface BasicTableProps<T extends object>
    */
   cellProps?: object | CellPropsCallback<T>;
   /**
-   * An array of one of the objects: #EuiTableFieldDataColumnType, #EuiTableComputedColumnType or #EuiTableActionsColumnType.
+   * An array of one of the objects: {@link EuiTableFieldDataColumnType}, {@link EuiTableComputedColumnType} or {@link EuiTableActionsColumnType}.
    */
   columns: Array<EuiBasicTableColumn<T>>;
   /**
@@ -251,23 +251,24 @@ interface BasicTableProps<T extends object>
    */
   noItemsMessage?: ReactNode;
   /**
-   * Called whenever pagination or sorting changes (this property is required when either pagination or sorting is configured). See #Criteria or #CriteriaWithPagination
+   * Called whenever pagination or sorting changes (this property is required when either pagination or sorting is configured).
+   * {@link Criteria} or {@link CriteriaWithPagination}
    */
   onChange?: (criteria: Criteria<T>) => void;
   /**
-   * Configures #Pagination
+   * Configures {@link Pagination}
    */
   pagination?: undefined;
   /**
    * Applied to `EuiTableRow`
    */
   rowProps?: object | RowPropsCallback<T>;
   /**
-   * Configures #EuiTableSelectionType
+   * Configures {@link EuiTableSelectionType}
    */
   selection?: EuiTableSelectionType<T>;
   /**
-   * Configures #EuiTableSortingType
+   * Configures {@link EuiTableSortingType}
    */
   sorting?: EuiTableSortingType<T>;
   /**

packages/eui/src/components/basic_table/in_memory_table.tsx

@@ -77,7 +77,7 @@ type InMemoryTableProps<T extends object> = Omit<
 > & {
   message?: ReactNode;
   /**
-   * Configures #Search.
+   * Configures {@link Search}.
    */
   search?: Search;
   /**
@@ -93,11 +93,11 @@ type InMemoryTableProps<T extends object> = Omit<
    */
   searchFormat?: 'eql' | 'text';
   /**
-   * Configures #Pagination
+   * Configures {@link Pagination}
    */
   pagination?: undefined;
   /**
-   * Configures #EuiTableSortingType
+   * Configures {@link EuiTableSortingType}
    */
   sorting?: Sorting;
   /**
@@ -107,11 +107,13 @@ type InMemoryTableProps<T extends object> = Omit<
   /**
    * `onChange` is not required when `pagination` and/or `sorting` are configured,
    * but if `onChange` is present it is responsible for handling state for each/both.
-   * See #Criteria or #CriteriaWithPagination
+   * {@link Criteria} or {@link CriteriaWithPagination}
    */
   onChange?: EuiBasicTableProps<T>['onChange'];
   /**
-   * Callback for when table pagination or sorting is changed. This is meant to be informational only, and not used to set any state as the in-memory table already manages this state. See #Criteria or #CriteriaWithPagination.
+   * Callback for when table pagination or sorting is changed. This is meant to be informational only,
+   * and not used to set any state as the in-memory table already manages this state.
+   * {@link Criteria} or {@link CriteriaWithPagination}.
    */
   onTableChange?: (nextValues: Criteria<T>) => void;
   executeQueryOptions?: {

packages/eui/src/components/basic_table/table_types.ts

@@ -163,7 +163,7 @@ export type EuiTableComputedColumnType<T> = CommonProps &
 
 export type EuiTableActionsColumnType<T extends object> = {
   /**
-   * An array of one of the objects: #DefaultItemAction or #CustomItemAction
+   * An array of one of the objects: {@link DefaultItemAction} or {@link CustomItemAction}
    */
   actions: Array<Action<T>>;
   /**

packages/eui/src/components/breadcrumbs/types.ts

@@ -32,7 +32,7 @@ export type EuiBreadcrumbResponsiveMaxCount = {
 export type EuiBreadcrumbsProps = CommonProps & {
   /**
    * Hides extra (above the max) breadcrumbs under a collapsed item as the window gets smaller.
-   * Pass a custom #EuiBreadcrumbResponsiveMaxCount object to change the number of breadcrumbs to show at the particular breakpoints.
+   * Pass a custom {@link EuiBreadcrumbResponsiveMaxCount} object to change the number of breadcrumbs to show at the particular breakpoints.
    *
    * Pass `false` to turn this behavior off.
    *
@@ -55,7 +55,7 @@ export type EuiBreadcrumbsProps = CommonProps & {
   max?: number | null;
 
   /**
-   * The array of individual #EuiBreadcrumb items
+   * The array of individual {@link EuiBreadcrumb} items
    */
   breadcrumbs: EuiBreadcrumbProps[];
 

packages/eui/src/components/button/button_group/button_group.tsx

@@ -100,7 +100,7 @@ export type EuiButtonGroupProps = CommonProps & {
    */
   type?: 'single' | 'multi';
   /**
-   * An array of #EuiButtonGroupOptionProps
+   * An array of {@link EuiButtonGroupOptionProps}
    */
   options: EuiButtonGroupOptionProps[];
 } & (

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx

@@ -88,7 +88,7 @@ export type EuiCollapsibleNavItemProps = _SharedEuiCollapsibleNavItemProps &
       /**
        * Will render either an accordion or group of nested child item links.
        *
-       * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
+       * Accepts any {@link EuiCollapsibleNavItemProps}. Or, to render completely custom
        * subitem content, pass an object with a `renderItem` callback.
        */
       items: EuiCollapsibleNavSubItemProps[];

packages/eui/src/components/color_picker/color_palette_display/color_palette_display.tsx

@@ -29,7 +29,7 @@ export type EuiColorPaletteDisplaySize = (typeof SIZES)[number];
 
 export interface EuiColorPaletteDisplayShared {
   /**
-   * Array of color `strings` or an array of #PaletteColorStop. The stops must be numbers in an ordered range.
+   * Array of color `strings` or an array of {@link PaletteColorStop}. The stops must be numbers in an ordered range.
    */
   palette: string[] | PaletteColorStop[];
 }

packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx

@@ -47,7 +47,7 @@ export interface EuiColorPalettePickerPaletteTextProps extends CommonProps {
    */
   type: 'text';
   /**
-   * Array of color `strings` or an array of #PaletteColorStop. The stops must be numbers in an ordered range.
+   * Array of color `strings` or an array of {@link PaletteColorStop}. The stops must be numbers in an ordered range.
    */
   palette?: string[] | PaletteColorStop[];
 }
@@ -70,7 +70,7 @@ export interface EuiColorPalettePickerPaletteFixedProps extends CommonProps {
    */
   type: 'fixed';
   /**
-   * Array of color `strings` or an array of #PaletteColorStop. The stops must be numbers in an ordered range.
+   * Array of color `strings` or an array of {@link PaletteColorStop}. The stops must be numbers in an ordered range.
    */
   palette: string[] | PaletteColorStop[];
 }
@@ -93,7 +93,7 @@ export interface EuiColorPalettePickerPaletteGradientProps extends CommonProps {
    */
   type: 'gradient';
   /**
-   * Array of color `strings` or an array of #PaletteColorStop. The stops must be numbers in an ordered range.
+   * Array of color `strings` or an array of {@link PaletteColorStop}. The stops must be numbers in an ordered range.
    */
   palette: string[] | PaletteColorStop[];
 }
@@ -114,7 +114,7 @@ export type EuiColorPalettePickerProps<T extends string> = CommonProps &
     selectionDisplay?: 'palette' | 'title';
 
     /**
-     * An array of one of the following objects: #EuiColorPalettePickerPaletteText, #EuiColorPalettePickerPaletteFixed, #EuiColorPalettePickerPaletteGradient
+     * An array of one of the following objects: {@link EuiColorPalettePickerPaletteText}, {@link EuiColorPalettePickerPaletteFixed}, {@link EuiColorPalettePickerPaletteGradient}
      */
     palettes: EuiColorPalettePickerPaletteProps[];
   };

packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx

@@ -75,7 +75,7 @@ export type EuiComboBoxOptionsListProps<T> = CommonProps & {
   onOptionEnterKey?: OptionHandler<T>;
   onScroll?: ListProps['onScroll'];
   /**
-   * Array of EuiComboBoxOptionOption objects. See #EuiComboBoxOptionOption
+   * Array of EuiComboBoxOptionOption objects. See {@link EuiComboBoxOptionOption}
    */
   options: Array<EuiComboBoxOptionOption<T>>;
   renderOption?: (

packages/eui/src/components/comment_list/comment_list.tsx

@@ -16,7 +16,7 @@ export type EuiCommentListProps = Omit<
   'items' | 'gutterSize'
 > & {
   /**
-   * List of comments to render. See #EuiComment
+   * List of comments to render. See {@link EuiComment}
    */
   comments?: EuiCommentProps[];
   /**