From 6e0b71493df24773fd5498f6e6a65f00d21ef950 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Tue, 18 Apr 2023 11:30:57 +0200 Subject: [PATCH] core-components: declare DependencyGraphTypes as a namespace Signed-off-by: Patrik Oldsberg --- .changeset/hip-lamps-love.md | 5 + packages/core-components/api-report.md | 163 ++++------- .../DependencyGraph/DefaultLabel.tsx | 4 +- .../DependencyGraph/DefaultNode.tsx | 4 +- .../DependencyGraph.stories.tsx | 12 +- .../DependencyGraph/DependencyGraph.test.tsx | 6 +- .../DependencyGraph/DependencyGraph.tsx | 43 ++- .../components/DependencyGraph/Edge.test.tsx | 4 +- .../src/components/DependencyGraph/Edge.tsx | 21 +- .../components/DependencyGraph/Node.test.tsx | 4 +- .../src/components/DependencyGraph/Node.tsx | 12 +- .../src/components/DependencyGraph/index.ts | 4 +- .../src/components/DependencyGraph/types.ts | 265 ++++++++++-------- 13 files changed, 253 insertions(+), 294 deletions(-) create mode 100644 .changeset/hip-lamps-love.md diff --git a/.changeset/hip-lamps-love.md b/.changeset/hip-lamps-love.md new file mode 100644 index 0000000000..2614e38fdc --- /dev/null +++ b/.changeset/hip-lamps-love.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Switched internal declaration of `DependencyGraphTypes` to use `namespace`. diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 1e5fa77ed3..9f4aca1dcf 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -65,14 +65,6 @@ export type AlertDisplayProps = { transientTimeoutMs?: number; }; -// @public -enum Alignment { - DOWN_LEFT = 'DL', - DOWN_RIGHT = 'DR', - UP_LEFT = 'UL', - UP_RIGHT = 'UR', -} - // @public export function Avatar(props: AvatarProps): JSX.Element; @@ -214,13 +206,6 @@ export type CustomProviderClassKey = 'form' | 'button'; // @public (undocumented) export function DashboardIcon(props: IconComponentProps): JSX.Element; -// @public -type DependencyEdge = T & { - from: string; - to: string; - label?: string; -}; - // @public export function DependencyGraph( props: DependencyGraphProps, @@ -242,59 +227,75 @@ export type DependencyGraphNodeClassKey = 'node'; export interface DependencyGraphProps extends React_2.SVGProps { acyclicer?: 'greedy'; - // Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver - align?: Alignment; + align?: DependencyGraphTypes.Alignment; curve?: 'curveStepBefore' | 'curveMonotoneX'; defs?: SVGDefsElement | SVGDefsElement[]; - // Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver - direction?: Direction; + direction?: DependencyGraphTypes.Direction; edgeMargin?: number; edgeRanks?: number; - edges: DependencyEdge[]; + edges: DependencyGraphTypes.DependencyEdge[]; edgeWeight?: number; fit?: 'grow' | 'contain'; labelOffset?: number; - // Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver - labelPosition?: LabelPosition; + labelPosition?: DependencyGraphTypes.LabelPosition; nodeMargin?: number; - nodes: DependencyNode[]; + nodes: DependencyGraphTypes.DependencyNode[]; paddingX?: number; paddingY?: number; - // Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver - ranker?: Ranker; + ranker?: DependencyGraphTypes.Ranker; rankMargin?: number; - renderLabel?: RenderLabelFunction; - renderNode?: RenderNodeFunction; + renderLabel?: DependencyGraphTypes.RenderLabelFunction; + renderNode?: DependencyGraphTypes.RenderNodeFunction; zoom?: 'enabled' | 'disabled' | 'enable-on-click'; } -declare namespace DependencyGraphTypes { - export { - DependencyEdge, - RenderLabelProps, - RenderLabelFunction, - DependencyNode, - RenderNodeProps, - RenderNodeFunction, - Direction, - Alignment, - Ranker, - LabelPosition, +// @public +export namespace DependencyGraphTypes { + export enum Alignment { + DOWN_LEFT = 'DL', + DOWN_RIGHT = 'DR', + UP_LEFT = 'UL', + UP_RIGHT = 'UR', + } + export type DependencyEdge = T & { + from: string; + to: string; + label?: string; + }; + export type DependencyNode = T & { + id: string; + }; + export enum Direction { + BOTTOM_TOP = 'BT', + LEFT_RIGHT = 'LR', + RIGHT_LEFT = 'RL', + TOP_BOTTOM = 'TB', + } + export enum LabelPosition { + // (undocumented) + CENTER = 'c', + // (undocumented) + LEFT = 'l', + // (undocumented) + RIGHT = 'r', + } + export enum Ranker { + LONGEST_PATH = 'longest-path', + NETWORK_SIMPLEX = 'network-simplex', + TIGHT_TREE = 'tight-tree', + } + export type RenderLabelFunction = ( + props: RenderLabelProps, + ) => React_2.ReactNode; + export type RenderLabelProps = { + edge: DependencyEdge; + }; + export type RenderNodeFunction = ( + props: RenderNodeProps, + ) => React_2.ReactNode; + export type RenderNodeProps = { + node: DependencyNode; }; -} -export { DependencyGraphTypes }; - -// @public -type DependencyNode = T & { - id: string; -}; - -// @public -enum Direction { - BOTTOM_TOP = 'BT', - LEFT_RIGHT = 'LR', - RIGHT_LEFT = 'RL', - TOP_BOTTOM = 'TB', } // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts @@ -598,16 +599,6 @@ export type ItemCardHeaderProps = Partial> & { children?: React_2.ReactNode; }; -// @public -enum LabelPosition { - // (undocumented) - CENTER = 'c', - // (undocumented) - LEFT = 'l', - // (undocumented) - RIGHT = 'r', -} - // Warning: (ae-forgotten-export) The symbol "Props_7" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "Lifecycle" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -818,48 +809,6 @@ export type ProxiedSignInPageProps = SignInPageProps & { headers?: HeadersInit | (() => HeadersInit) | (() => Promise); }; -// Warning: (ae-missing-release-tag) "Ranker" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public -enum Ranker { - LONGEST_PATH = 'longest-path', - NETWORK_SIMPLEX = 'network-simplex', - TIGHT_TREE = 'tight-tree', -} - -// Warning: (ae-missing-release-tag) "RenderLabelFunction" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public -type RenderLabelFunction = ( - props: RenderLabelProps, -) => React_2.ReactNode; - -// Warning: (ae-missing-release-tag) "RenderLabelProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver -// Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver -// -// @public -type RenderLabelProps = { - edge: DependencyEdge; -}; - -// Warning: (ae-missing-release-tag) "RenderNodeFunction" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver -// -// @public -type RenderNodeFunction = ( - props: RenderNodeProps, -) => React_2.ReactNode; - -// Warning: (ae-missing-release-tag) "RenderNodeProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver -// Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver -// -// @public -type RenderNodeProps = { - node: DependencyNode; -}; - // Warning: (ae-missing-release-tag) "ResponseErrorPanel" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public @@ -1517,8 +1466,8 @@ export type WarningPanelClassKey = // Warnings were encountered during analysis: // -// src/components/DependencyGraph/types.d.ts:16:5 - (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "DependencyNode" -// src/components/DependencyGraph/types.d.ts:20:5 - (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "DependencyNode" +// src/components/DependencyGraph/types.d.ts:22:9 - (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "DependencyNode" +// src/components/DependencyGraph/types.d.ts:26:9 - (ae-unresolved-link) The @link reference could not be resolved: The package "@backstage/core-components" does not have an export "DependencyNode" // src/components/TabbedLayout/RoutedTabs.d.ts:9:5 - (ae-forgotten-export) The symbol "SubRoute_2" needs to be exported by the entry point index.d.ts // src/components/Table/Table.d.ts:20:5 - (ae-forgotten-export) The symbol "SelectedFilters" needs to be exported by the entry point index.d.ts // src/layout/ErrorBoundary/ErrorBoundary.d.ts:8:5 - (ae-forgotten-export) The symbol "SlackChannel" needs to be exported by the entry point index.d.ts diff --git a/packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx b/packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx index d04bf78869..677782cf57 100644 --- a/packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx +++ b/packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx @@ -17,7 +17,7 @@ import React from 'react'; import makeStyles from '@material-ui/core/styles/makeStyles'; import { BackstageTheme } from '@backstage/theme'; -import { RenderLabelProps } from './types'; +import { DependencyGraphTypes as Types } from './types'; /** @public */ export type DependencyGraphDefaultLabelClassKey = 'text'; @@ -32,7 +32,7 @@ const useStyles = makeStyles( ); /** @public */ -export function DefaultLabel({ edge: { label } }: RenderLabelProps) { +export function DefaultLabel({ edge: { label } }: Types.RenderLabelProps) { const classes = useStyles(); return ( diff --git a/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx b/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx index b46aeb85e3..5c28375118 100644 --- a/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx +++ b/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { BackstageTheme } from '@backstage/theme'; -import { RenderNodeProps } from './types'; +import { DependencyGraphTypes as Types } from './types'; /** @public */ export type DependencyGraphDefaultNodeClassKey = 'node' | 'text'; @@ -36,7 +36,7 @@ const useStyles = makeStyles( ); /** @public */ -export function DefaultNode({ node: { id } }: RenderNodeProps) { +export function DefaultNode({ node: { id } }: Types.RenderNodeProps) { const classes = useStyles(); const [width, setWidth] = React.useState(0); const [height, setHeight] = React.useState(0); diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.stories.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.stories.tsx index e81988976c..99d6e7d0fd 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.stories.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.stories.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { DependencyGraph } from './DependencyGraph'; -import { Direction, LabelPosition } from './types'; +import { DependencyGraphTypes as Types } from './types'; export default { title: 'Data Display/DependencyGraph', @@ -82,7 +82,7 @@ export const BottomToTop = () => ( ( ( { { ', () => { @@ -89,7 +89,7 @@ describe('', () => { it('renders nodes according to renderNode prop', async () => { const singleNode = [nodes[0]]; - const renderNode = (props: RenderNodeProps) => ( + const renderNode = (props: Types.RenderNodeProps) => ( {props.node.id} @@ -107,7 +107,7 @@ describe('', () => { it('renders labels according to renderLabel prop', async () => { const labeledEdge = [{ ...edges[0], label: 'label' }]; - const renderLabel = (props: RenderLabelProps) => ( + const renderLabel = (props: Types.RenderLabelProps) => ( {props.edge.label} diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index 94d152ce1e..d9cf6caec3 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -21,16 +21,7 @@ import useTheme from '@material-ui/core/styles/useTheme'; import dagre from 'dagre'; import debounce from 'lodash/debounce'; import { BackstageTheme } from '@backstage/theme'; -import { - DependencyEdge, - DependencyNode, - Direction, - Alignment, - Ranker, - RenderNodeFunction, - RenderLabelFunction, - LabelPosition, -} from './types'; +import { DependencyGraphTypes as Types } from './types'; import { Node } from './Node'; import { Edge, GraphEdge } from './Edge'; import { ARROW_MARKER_ID } from './constants'; @@ -47,11 +38,11 @@ export interface DependencyGraphProps /** * Edges of graph */ - edges: DependencyEdge[]; + edges: Types.DependencyEdge[]; /** * Nodes of Graph */ - nodes: DependencyNode[]; + nodes: Types.DependencyNode[]; /** * Graph {@link DependencyGraphTypes.Direction | direction} * @@ -59,11 +50,11 @@ export interface DependencyGraphProps * * Default: `DependencyGraphTypes.Direction.TOP_BOTTOM` */ - direction?: Direction; + direction?: Types.Direction; /** * Node {@link DependencyGraphTypes.Alignment | alignment} */ - align?: Alignment; + align?: Types.Alignment; /** * Margin between nodes on each rank * @@ -115,7 +106,7 @@ export interface DependencyGraphProps * * Default: `DependencyGraphTypes.Ranker.NETWORK_SIMPLEX` */ - ranker?: Ranker; + ranker?: Types.Ranker; /** * {@link DependencyGraphTypes.LabelPosition | Position} of label in relation to edge * @@ -123,7 +114,7 @@ export interface DependencyGraphProps * * Default: `DependencyGraphTypes.LabelPosition.RIGHT` */ - labelPosition?: LabelPosition; + labelPosition?: Types.LabelPosition; /** * How much to move label away from edge * @@ -144,11 +135,11 @@ export interface DependencyGraphProps /** * Custom node rendering component */ - renderNode?: RenderNodeFunction; + renderNode?: Types.RenderNodeFunction; /** * Custom label rendering component */ - renderLabel?: RenderLabelFunction; + renderLabel?: Types.RenderLabelFunction; /** * {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs | Defs} shared by rendered SVG to be used by * {@link DependencyGraphProps.renderNode} and/or {@link DependencyGraphProps.renderLabel} @@ -194,7 +185,7 @@ export function DependencyGraph( edges, nodes, renderNode, - direction = Direction.TOP_BOTTOM, + direction = Types.Direction.TOP_BOTTOM, align, nodeMargin = 50, edgeMargin = 10, @@ -202,8 +193,8 @@ export function DependencyGraph( paddingX = 0, paddingY = 0, acyclicer, - ranker = Ranker.NETWORK_SIMPLEX, - labelPosition = LabelPosition.RIGHT, + ranker = Types.Ranker.NETWORK_SIMPLEX, + labelPosition = Types.LabelPosition.RIGHT, labelOffset = 10, edgeRanks = 1, edgeWeight = 1, @@ -218,9 +209,9 @@ export function DependencyGraph( const [containerWidth, setContainerWidth] = React.useState(100); const [containerHeight, setContainerHeight] = React.useState(100); - const graph = React.useRef>>( - new dagre.graphlib.Graph(), - ); + const graph = React.useRef< + dagre.graphlib.Graph> + >(new dagre.graphlib.Graph()); const [graphWidth, setGraphWidth] = React.useState( graph.current.graph()?.width || 0, ); @@ -389,13 +380,13 @@ export function DependencyGraph( updateGraph, ]); - function setNode(id: string, node: DependencyNode) { + function setNode(id: string, node: Types.DependencyNode) { graph.current.setNode(id, node); updateGraph(); return graph.current; } - function setEdge(id: dagre.Edge, edge: DependencyEdge) { + function setEdge(id: dagre.Edge, edge: Types.DependencyEdge) { graph.current.setEdge(id, edge); updateGraph(); return graph.current; diff --git a/packages/core-components/src/components/DependencyGraph/Edge.test.tsx b/packages/core-components/src/components/DependencyGraph/Edge.test.tsx index 21d677388e..78fb27f15f 100644 --- a/packages/core-components/src/components/DependencyGraph/Edge.test.tsx +++ b/packages/core-components/src/components/DependencyGraph/Edge.test.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import { Edge } from './Edge'; -import { RenderLabelProps } from './types'; +import { DependencyGraphTypes as Types } from './types'; const fromNode = 'node'; const toNode = 'other-node'; @@ -38,7 +38,7 @@ const id = { }; const setEdge = jest.fn(); -const renderElement = jest.fn((props: RenderLabelProps) => ( +const renderElement = jest.fn((props: Types.RenderLabelProps) => (
{props.edge.label}
)); diff --git a/packages/core-components/src/components/DependencyGraph/Edge.tsx b/packages/core-components/src/components/DependencyGraph/Edge.tsx index aae737b9ea..4e3ba96e48 100644 --- a/packages/core-components/src/components/DependencyGraph/Edge.tsx +++ b/packages/core-components/src/components/DependencyGraph/Edge.tsx @@ -19,12 +19,7 @@ import * as d3Shape from 'd3-shape'; import isFinite from 'lodash/isFinite'; import makeStyles from '@material-ui/core/styles/makeStyles'; import { BackstageTheme } from '@backstage/theme'; -import { - RenderLabelProps, - RenderLabelFunction, - DependencyEdge, - LabelPosition, -} from './types'; +import { DependencyGraphTypes as Types } from './types'; import { EDGE_TEST_ID, LABEL_TEST_ID } from './constants'; import { DefaultLabel } from './DefaultLabel'; import dagre from 'dagre'; @@ -35,11 +30,13 @@ export type EdgeProperties = { width?: number; height?: number; labeloffset?: number; - labelpos?: LabelPosition; + labelpos?: Types.LabelPosition; minlen?: number; weight?: number; }; -export type GraphEdge = DependencyEdge & dagre.GraphEdge & EdgeProperties; +export type GraphEdge = Types.DependencyEdge & + dagre.GraphEdge & + EdgeProperties; /** @public */ export type DependencyGraphEdgeClassKey = 'path' | 'label'; @@ -65,15 +62,15 @@ type EdgePoint = dagre.GraphEdge['points'][0]; export type EdgeComponentProps = { id: dagre.Edge; edge: GraphEdge; - render?: RenderLabelFunction; + render?: Types.RenderLabelFunction; setEdge: ( id: dagre.Edge, - edge: DependencyEdge, + edge: Types.DependencyEdge, ) => dagre.graphlib.Graph<{}>; curve: 'curveStepBefore' | 'curveMonotoneX'; }; -const renderDefault = (props: RenderLabelProps) => ( +const renderDefault = (props: Types.RenderLabelProps) => ( ); @@ -85,7 +82,7 @@ export function Edge({ curve, }: EdgeComponentProps) { const { x = 0, y = 0, width, height, points } = edge; - const labelProps: DependencyEdge = edge; + const labelProps: Types.DependencyEdge = edge; const classes = useStyles(); const labelRef = React.useRef(null); diff --git a/packages/core-components/src/components/DependencyGraph/Node.test.tsx b/packages/core-components/src/components/DependencyGraph/Node.test.tsx index ea69220336..e1af58e731 100644 --- a/packages/core-components/src/components/DependencyGraph/Node.test.tsx +++ b/packages/core-components/src/components/DependencyGraph/Node.test.tsx @@ -18,11 +18,11 @@ import React from 'react'; import dagre from 'dagre'; import { render } from '@testing-library/react'; import { Node } from './Node'; -import { RenderNodeProps } from './types'; +import { DependencyGraphTypes as Types } from './types'; const node = { id: 'abc', x: 0, y: 0, width: 0, height: 0 }; const setNode = jest.fn(() => new dagre.graphlib.Graph()); -const renderElement = jest.fn((props: RenderNodeProps) => ( +const renderElement = jest.fn((props: Types.RenderNodeProps) => (
{props.node.id}
)); diff --git a/packages/core-components/src/components/DependencyGraph/Node.tsx b/packages/core-components/src/components/DependencyGraph/Node.tsx index 505f9e61c7..133f45aed9 100644 --- a/packages/core-components/src/components/DependencyGraph/Node.tsx +++ b/packages/core-components/src/components/DependencyGraph/Node.tsx @@ -17,7 +17,7 @@ import React from 'react'; import makeStyles from '@material-ui/core/styles/makeStyles'; import { DefaultNode } from './DefaultNode'; -import { RenderNodeFunction, RenderNodeProps, DependencyNode } from './types'; +import { DependencyGraphTypes as Types } from './types'; import { NODE_TEST_ID } from './constants'; import dagre from 'dagre'; @@ -33,15 +33,17 @@ const useStyles = makeStyles( { name: 'BackstageDependencyGraphNode' }, ); -export type GraphNode = dagre.Node>; +export type GraphNode = dagre.Node>; export type NodeComponentProps = { node: GraphNode; - render?: RenderNodeFunction; + render?: Types.RenderNodeFunction; setNode: dagre.graphlib.Graph['setNode']; }; -const renderDefault = (props: RenderNodeProps) => ; +const renderDefault = (props: Types.RenderNodeProps) => ( + +); export function Node({ render = renderDefault, @@ -49,7 +51,7 @@ export function Node({ node, }: NodeComponentProps) { const { width, height, x = 0, y = 0 } = node; - const nodeProps: DependencyNode = node; + const nodeProps: Types.DependencyNode = node; const classes = useStyles(); const nodeRef = React.useRef(null); diff --git a/packages/core-components/src/components/DependencyGraph/index.ts b/packages/core-components/src/components/DependencyGraph/index.ts index 23ab81bab9..3d25f5c0e1 100644 --- a/packages/core-components/src/components/DependencyGraph/index.ts +++ b/packages/core-components/src/components/DependencyGraph/index.ts @@ -14,11 +14,9 @@ * limitations under the License. */ -import * as DependencyGraphTypes from './types'; - export { DependencyGraph } from './DependencyGraph'; export type { DependencyGraphProps } from './DependencyGraph'; -export { DependencyGraphTypes }; +export { DependencyGraphTypes } from './types'; export type { DependencyGraphDefaultLabelClassKey } from './DefaultLabel'; export type { DependencyGraphDefaultNodeClassKey } from './DefaultNode'; diff --git a/packages/core-components/src/components/DependencyGraph/types.ts b/packages/core-components/src/components/DependencyGraph/types.ts index 4ae6057bd7..f4df5b3066 100644 --- a/packages/core-components/src/components/DependencyGraph/types.ts +++ b/packages/core-components/src/components/DependencyGraph/types.ts @@ -23,135 +23,152 @@ import React from 'react'; /** - * Edge of {@link DependencyGraph} + * Types for the {@link DependencyGraph} component. * * @public */ -export type DependencyEdge = T & { +export namespace DependencyGraphTypes { /** - * ID of {@link DependencyNode} from where the Edge start - */ - from: string; - /** - * ID of {@link DependencyNode} to where the Edge goes to - */ - to: string; - /** - * Label assigned and rendered with the Edge - */ - label?: string; -}; - -/** - * Properties of {@link DependencyGraphTypes.RenderLabelFunction} for {@link DependencyGraphTypes.DependencyEdge} - */ -export type RenderLabelProps = { edge: DependencyEdge }; - -/** - * Custom React component for edge labels - */ -export type RenderLabelFunction = ( - props: RenderLabelProps, -) => React.ReactNode; - -/** - * Node of {@link DependencyGraph} - * - * @public - */ -export type DependencyNode = T & { - id: string; -}; - -/** - * Properties of {@link DependencyGraphTypes.RenderNodeFunction} for {@link DependencyGraphTypes.DependencyNode} - */ -export type RenderNodeProps = { node: DependencyNode }; - -/** - * Custom React component for graph {@link DependencyGraphTypes.DependencyNode} - */ -export type RenderNodeFunction = ( - props: RenderNodeProps, -) => React.ReactNode; - -/** - * Graph direction - * - * @public - */ -export enum Direction { - /** - * Top to Bottom - */ - TOP_BOTTOM = 'TB', - /** - * Bottom to Top - */ - BOTTOM_TOP = 'BT', - /** - * Left to Right - */ - LEFT_RIGHT = 'LR', - /** - * Right to Left - */ - RIGHT_LEFT = 'RL', -} - -/** - * Node alignment - * - * @public - */ -export enum Alignment { - /** - * Up Left - */ - UP_LEFT = 'UL', - /** - * Up Right - */ - UP_RIGHT = 'UR', - /** - * Down Left - */ - DOWN_LEFT = 'DL', - /** - * Down Right - */ - DOWN_RIGHT = 'DR', -} - -/** - * Algorithm used to rand nodes in graph - */ -export enum Ranker { - /** - * {@link https://en.wikipedia.org/wiki/Network_simplex_algorithm | Network Simplex} algorithm - */ - NETWORK_SIMPLEX = 'network-simplex', - /** - * Tight Tree algorithm - */ - TIGHT_TREE = 'tight-tree', - /** - * Longest path algorithm + * Edge of {@link DependencyGraph} * - * @remarks - * - * Simplest and fastest + * @public */ - LONGEST_PATH = 'longest-path', -} + export type DependencyEdge = T & { + /** + * ID of {@link DependencyNode} from where the Edge start + */ + from: string; + /** + * ID of {@link DependencyNode} to where the Edge goes to + */ + to: string; + /** + * Label assigned and rendered with the Edge + */ + label?: string; + }; -/** - * Position of label in relation to the edge - * - * @public - */ -export enum LabelPosition { - LEFT = 'l', - RIGHT = 'r', - CENTER = 'c', + /** + * Properties of {@link DependencyGraphTypes.RenderLabelFunction} for {@link DependencyGraphTypes.DependencyEdge} + * + * @public + */ + export type RenderLabelProps = { edge: DependencyEdge }; + + /** + * Custom React component for edge labels + * + * @public + */ + export type RenderLabelFunction = ( + props: RenderLabelProps, + ) => React.ReactNode; + + /** + * Node of {@link DependencyGraph} + * + * @public + */ + export type DependencyNode = T & { + id: string; + }; + + /** + * Properties of {@link DependencyGraphTypes.RenderNodeFunction} for {@link DependencyGraphTypes.DependencyNode} + * + * @public + */ + export type RenderNodeProps = { node: DependencyNode }; + + /** + * Custom React component for graph {@link DependencyGraphTypes.DependencyNode} + * + * @public + */ + export type RenderNodeFunction = ( + props: RenderNodeProps, + ) => React.ReactNode; + + /** + * Graph direction + * + * @public + */ + export enum Direction { + /** + * Top to Bottom + */ + TOP_BOTTOM = 'TB', + /** + * Bottom to Top + */ + BOTTOM_TOP = 'BT', + /** + * Left to Right + */ + LEFT_RIGHT = 'LR', + /** + * Right to Left + */ + RIGHT_LEFT = 'RL', + } + + /** + * Node alignment + * + * @public + */ + export enum Alignment { + /** + * Up Left + */ + UP_LEFT = 'UL', + /** + * Up Right + */ + UP_RIGHT = 'UR', + /** + * Down Left + */ + DOWN_LEFT = 'DL', + /** + * Down Right + */ + DOWN_RIGHT = 'DR', + } + + /** + * Algorithm used to rand nodes in graph + * + * @public + */ + export enum Ranker { + /** + * {@link https://en.wikipedia.org/wiki/Network_simplex_algorithm | Network Simplex} algorithm + */ + NETWORK_SIMPLEX = 'network-simplex', + /** + * Tight Tree algorithm + */ + TIGHT_TREE = 'tight-tree', + /** + * Longest path algorithm + * + * @remarks + * + * Simplest and fastest + */ + LONGEST_PATH = 'longest-path', + } + + /** + * Position of label in relation to the edge + * + * @public + */ + export enum LabelPosition { + LEFT = 'l', + RIGHT = 'r', + CENTER = 'c', + } }