Merge pull request #48 from chezmoi-sh/feature/improve-storybook-stories

♻️: cleanup & improve components & storybook

Author: xunleii

.storybook/main.ts

@@ -22,7 +22,7 @@ const config: StorybookConfig = {
   },
 
   typescript: {
-    reactDocgen: 'react-docgen-typescript',
+    reactDocgen: 'react-docgen',
   },
 };
 

.trunk/configs/.prettierrc.yaml

@@ -20,4 +20,5 @@ importOrder:
   - '^@xyflow/(.*)$'
   - '^[./]'
 importOrderGroupNamespaceSpecifiers: true
+importOrderSeparation: true
 importOrderSortSpecifiers: true

.trunk/trunk.yaml

@@ -25,20 +25,21 @@ lint:
     - [email protected]
     - [email protected]
     - [email protected]
-    - [email protected].427
+    - [email protected].432
     - git-diff-check
     - [email protected]
     - [email protected]:
         packages:
           - '@trivago/[email protected]'
     - [email protected]
-    - [email protected].31
+    - [email protected].33
   ignore:
     - linters: [ALL]
       paths:
         - 'examples/**/*.yaml'
-        - 'examples/**/*.yml'
-        - 'examples/**/*.yaml.j2'
+    - linters: [markdownlint]
+      paths:
+        - 'src/**/*.mdx'
 actions:
   disabled:
     - trunk-announce

src/components/.storybook/scenarii.ts

@@ -1,34 +1,26 @@
 import { DirectedGraph } from 'graphology';
-import type { ApplicationGraph, ApplicationGraphNode } from '../../types';
+
+import type { ApplicationGraph } from '../../types';
 import { HealthStatus, SyncStatus } from '../../types/application';
 import { createOrUpdateApplicationNode, resourceId, updateApplicationSubResources } from '../../utils';
 
 /**
- * ScenarioGraph utilities for Storybook scenarios.
- *
- * This file provides the ScenarioGraph class, which is used to programmatically construct and manipulate
- * ArgoCD Application and ApplicationSet graphs for use in Storybook stories and tests.
- *
- * The ScenarioGraph class allows you to:
- *   - Create Application and ApplicationSet nodes
- *   - Link nodes to represent relationships
- *   - Retrieve the resulting ApplicationGraph for use in UI components or tests
+ * ScenarioGraph provides a fluent API to build and manipulate an ApplicationGraph
+ * for Storybook scenarios and tests. It supports creating Application and ApplicationSet nodes,
+ * linking them, and retrieving the resulting graph.
  *
  * Usage:
- *   const scenario = new ScenarioGraph();
- *   scenario.createApplication('my-app');
- *   scenario.createApplicationSet('my-appset');
- *   scenario.linkApplication(...);
- *   const graph = scenario.createScenarioGraph();
+ *
+ * ```ts
+ *   const scenario = new ScenarioGraph()
+ *     .createApplication(...)
+ *     .createApplicationSet(...)
+ *     .addParentRef(...)
+ *     .createScenarioGraph()
+ * ```
  *
  * This is intended for use in Storybook and test environments only.
  */
-
-/**
- * ScenarioGraph provides a fluent API to build and manipulate an ApplicationGraph
- * for Storybook scenarios and tests. It supports creating Application and ApplicationSet nodes,
- * linking them, and retrieving the resulting graph.
- */
 export class ScenarioGraph {
   private graph: ApplicationGraph;
 

src/components/ApplicationMap.stories.tsx

@@ -1,22 +1,25 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
+import { expect, within } from '@storybook/test';
+
 import { ReactFlowProvider } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import React from 'react';
-import { allStatusScenario, denseScenario } from './.storybook/scenarii';
-import Map, { RankDirection } from './ApplicationMap';
+
+import '../styles/index.scss';
+import { HealthStatus, RankDirection, isApplication } from '../types';
+import { allStatusScenario, denseScenario as complexTopology } from './.storybook/scenarii';
+import Map from './ApplicationMap';
 
 const meta: Meta<typeof Map> = {
-  title: 'ApplicationMap/Map',
+  title: 'Components/Application Map/ApplicationMap',
   component: Map,
   tags: ['autodocs'],
   decorators: [
     (Story: any) => (
       <div className="argocd-application-map__container">
         <ReactFlowProvider>
-          <div style={{ width: '100vw', height: '60vh', background: '#f8f9fa' }}>
-            <Story />
-          </div>
+          <Story />
         </ReactFlowProvider>
       </div>
     ),
@@ -29,9 +32,7 @@ export const Basic: Story = {
   args: {
     graph: allStatusScenario,
     rankdir: RankDirection.LR,
-    selectedNodes: [],
-    selectedEdges: [],
-    onEdgeClick: action('onEdgeClick'),
+    selectedApplications: [],
     onPaneClick: action('onPaneClick'),
     onApplicationClick: action('onApplicationClick'),
     onApplicationSetClick: action('onApplicationSetClick'),
@@ -40,11 +41,42 @@ export const Basic: Story = {
 
 export const ComplexTopology: Story = {
   args: {
-    graph: denseScenario,
+    graph: complexTopology,
     rankdir: RankDirection.LR,
-    selectedNodes: [],
-    selectedEdges: [],
-    onEdgeClick: action('onEdgeClick'),
+    selectedApplications: [],
     onPaneClick: action('onPaneClick'),
+    onApplicationClick: action('onApplicationClick'),
+    onApplicationSetClick: action('onApplicationSetClick'),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const root_app_1 = await canvas.findByTestId('rf__node-Application/default/root-app1');
+    expect(root_app_1.children[0]).toHaveClass('argocd-application-map__node--default');
+
+    const root_app_2 = await canvas.findByTestId('rf__node-Application/default/root-app2');
+    expect(root_app_2.children[0]).toHaveClass('argocd-application-map__node--default');
+  },
+};
+
+export const ComplexTopologyWithSelection: Story = {
+  args: {
+    graph: complexTopology,
+    rankdir: RankDirection.LR,
+    selectedApplications: complexTopology.filterNodes(
+      (_, attributes) => isApplication(attributes.data) && attributes.data.status.health === HealthStatus.Degraded
+    ),
+    onPaneClick: action('onPaneClick'),
+    onApplicationClick: action('onApplicationClick'),
+    onApplicationSetClick: action('onApplicationSetClick'),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const root_app_1 = await canvas.findByTestId('rf__node-Application/default/root-app1');
+    expect(root_app_1.children[0]).toHaveClass('argocd-application-map__node--unselected');
+
+    const root_app_2 = await canvas.findByTestId('rf__node-Application/default/root-app2');
+    expect(root_app_2.children[0]).toHaveClass('argocd-application-map__node--selected');
   },
 };