🎨: Sort import statements in story files for consistency

Signed-off-by: Alexandre Nicolaie <[email protected]>

Author: xunleii

.trunk/configs/.prettierrc.yaml

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

src/components/.storybook/scenarii.ts

@@ -1,4 +1,5 @@
 import { DirectedGraph } from 'graphology';
+
 import type { ApplicationGraph } from '../../types';
 import { HealthStatus, SyncStatus } from '../../types/application';
 import { createOrUpdateApplicationNode, resourceId, updateApplicationSubResources } from '../../utils';

src/components/ApplicationMap.stories.tsx

@@ -1,10 +1,12 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/test';
-import { expect } from '@storybook/test';
+import { expect, within } from '@storybook/test';
+
 import { ReactFlowProvider } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import React from 'react';
+
+import '../styles/index.scss';
 import { HealthStatus, RankDirection, isApplication } from '../types';
 import { allStatusScenario, denseScenario as complexTopology } from './.storybook/scenarii';
 import Map from './ApplicationMap';

src/components/ApplicationMap.tsx

@@ -1,8 +1,9 @@
 import Dagre from '@dagrejs/dagre';
+
 import * as React from 'react';
 import { Edge, MarkerType, MiniMap, ReactFlow, useEdgesState, useNodesState, useReactFlow } from '@xyflow/react';
 import { useEffect } from 'react';
-import '../styles/index.scss';
+
 import { ApplicationGraph, HealthStatus, RankDirectionType, SyncStatus } from '../types';
 import ApplicationMapNavigationControls from './ApplicationMapNavigationControls';
 import ApplicationMapNode, {

src/components/ApplicationMapNavigationControls.stories.tsx

@@ -1,7 +1,11 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
+
 import { ReactFlowProvider } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
 import React from 'react';
+
+import '../styles/index.scss';
 import ApplicationMapNavigationControls from './ApplicationMapNavigationControls';
 
 const meta: Meta<typeof ApplicationMapNavigationControls> = {

src/components/ApplicationMapNavigationControls.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { ControlButton, Panel } from '@xyflow/react';
-import '../styles/index.scss';
 
 /**
  * The **ApplicationMapNavigationControls** provides **interactive controls** for navigating the application map with

src/components/ApplicationMapNode.stories.tsx

@@ -1,10 +1,12 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent } from '@storybook/test';
-import { within } from '@storybook/test';
-import { expect } from '@storybook/test';
+import { expect, userEvent, within } from '@storybook/test';
+
 import { ReactFlowProvider } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
 import React from 'react';
+
+import '../styles/index.scss';
 import { HealthStatus, SyncStatus } from '../types/application';
 import ApplicationMapNode from './ApplicationMapNode';
 

src/components/ApplicationMapNode.tsx

@@ -1,6 +1,6 @@
 import { Handle, Node, NodeProps } from '@xyflow/react';
 import React from 'react';
-import '../styles/index.scss';
+
 import { HealthStatus, SyncStatus } from '../types/application';
 import { resourceId } from '../utils';
 import ApplicationNodeStatusIconHealth from './IconStatusHealth';

src/components/IconStatusHealth.stories.tsx

@@ -1,4 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+
+import '../styles/index.scss';
 import { HealthStatus } from '../types/application';
 import IconStatusHealth from './IconStatusHealth';
 

src/components/IconStatusHealth.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { HealthStatus, HealthStatuses } from '../types';
 
 /**

src/components/IconStatusSync.stories.tsx

@@ -1,4 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+
+import '../styles/index.scss';
 import { SyncStatus } from '../types/application';
 import IconStatusSync from './IconStatusSync';
 

src/components/IconStatusSync.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { SyncStatus, SyncStatuses } from '../types';
 
 /**

src/components/StateScreen.stories.tsx

@@ -1,5 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
+
 import React from 'react';
+
+import '../styles/index.scss';
 import StateScreen from './StateScreen';
 
 const meta: Meta<typeof StateScreen> = {

src/components/StatusPanel.stories.tsx

@@ -1,7 +1,8 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/test';
-import { expect } from '@storybook/test';
+import { expect, within } from '@storybook/test';
+
+import '../styles/index.scss';
 import { allStatusScenario, cyclicScenario } from './.storybook/scenarii';
 import StatusPanel from './StatusPanel';
 

src/components/StatusPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import '../styles/index.scss';
+
 import { ApplicationGraph, HealthStatus, SyncStatus, isApplication } from '../types';
 import { hasCycle as hasCycleFn } from '../utils/has_cycle';
 import IconStatusHealth from './IconStatusHealth';

src/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Edge, ReactFlowProvider } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+
 import ApplicationMap from './components/ApplicationMap';
 import StateScreen from './components/StateScreen';
 import StatusPanel from './components/StatusPanel';

src/types/index.ts

@@ -6,7 +6,9 @@
 // External dependencies
 // Internal type imports
 import { DirectedGraph } from 'graphology';
+
 import { Node } from '@xyflow/react';
+
 import type { Application, ApplicationKind, ApplicationSet, ApplicationUnion } from './application';
 import { HealthStatus, SyncStatus } from './application';
 import type { ArgoApplication } from './argocd';