@redocly/theme 0.62.0-custom.0 → 0.62.0-custom.1

package/src/ext/process-scorecard.ts

@@ -1,14 +1,59 @@
 import { useCallback } from 'react';
 
-import type { CatalogItem } from '@redocly/theme';
+import type { CatalogItem } from '@redocly/theme/core/types';
+import type { ReactNode } from 'react';
+
+export type ScorecardApiTableRow<TScorecard = unknown> = {
+  api: CatalogItem;
+  scorecard?: TScorecard;
+};
+
+export type ScorecardApiTableColumnStatus = 'error' | 'warning' | 'success';
+
+export type ScorecardApiTableColumnDetails<TScorecard = unknown> = {
+  hidden?: boolean;
+  tabLabel?: string;
+  description?: ReactNode | ((row: ScorecardApiTableRow<TScorecard>) => ReactNode);
+  render?: (params: { row: ScorecardApiTableRow<TScorecard>; value: unknown }) => ReactNode;
+  status?:
+    | ScorecardApiTableColumnStatus
+    | ((params: {
+        row: ScorecardApiTableRow<TScorecard>;
+        value: unknown;
+      }) => ScorecardApiTableColumnStatus);
+  statusRule?: 'problem-if-truthy' | 'problem-if-falsy';
+};
+
+export type ScorecardApiTableColumn<TScorecard = unknown> = {
+  id: string;
+  header: string;
+  placement?: 'beforeLevels' | 'afterLevels';
+  size?: number;
+  minSize?: number;
+  maxSize?: number;
+  sortRule?: 'string' | 'number' | 'date';
+  sortDescFirst?: boolean;
+  getValue?: (row: ScorecardApiTableRow<TScorecard>) => unknown;
+  getSortValue?: (row: ScorecardApiTableRow<TScorecard>) => unknown;
+  render?: (params: { row: ScorecardApiTableRow<TScorecard>; value: unknown }) => ReactNode;
+  details?: ScorecardApiTableColumnDetails<TScorecard>;
+  sortingFn?: (params: {
+    rowA: ScorecardApiTableRow<TScorecard>;
+    rowB: ScorecardApiTableRow<TScorecard>;
+    valueA: unknown;
+    valueB: unknown;
+  }) => number;
+};
 
 export function useProcessScorecard(): {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   processScorecard: <T = any>(scorecard: T, api: CatalogItem) => T;
   processInfo: <T>(info: T) => T;
+  getApiTableColumns: () => ScorecardApiTableColumn[];
 } {
   return {
     processScorecard: useCallback((scorecard) => scorecard, []),
     processInfo: useCallback((info) => info, []),
+    getApiTableColumns: useCallback(() => [], []),
   };
 }

package/src/icons/DirectionRightIcon/DirectionRightIcon.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M9.5 4L8.79295 4.70705L11.0859 7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V14H5V8H11.0859L8.79295 10.2929L9.5 11L13 7.5L9.5 4Z"
+      fill="#1A1C21"
+    />
+    <path d="M5 2H4V6H5V2Z" fill="#1A1C21" />
+  </svg>
+);
+
+export const DirectionRightIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DirectionRightIcon/DirectionRightIcon',
+}))`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+  vertical-align: middle;
+`;