fix #283 - feat: Reduce warnings in build and test logs

.oxlintrc.json

@@ -4,7 +4,13 @@
   "rules": {
     "react/react-in-jsx-scope": "off",
     "typescript/no-unused-vars": ["warn", { "varsIgnorePattern": "^_" }],
-    "typescript/no-explicit-any": "warn"
+    "typescript/no-explicit-any": "warn",
+    "jsx-a11y/prefer-tag-over-role": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-noninteractive-element-interactions": "off"
   },
-  "ignorePatterns": ["**/dist/", "**/dist-storybook/", "**/node_modules/"]
+  "ignorePatterns": ["**/dist/", "**/dist-storybook/", "**/node_modules/"],
+  "options": {
+    "denyWarnings": true
+  }
 }

examples/vanilla-web-component/vite.config.ts

@@ -26,5 +26,7 @@ export default defineConfig({
   build: {
     emptyOutDir: false,
     sourcemap: true,
+    // Raised to 5000 to suppress chunk size warning
+    chunkSizeWarningLimit: 5000,
   },
 });

packages/i18n/.oxfmtrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["../../.oxfmtrc.json"]
+}

packages/i18n/.oxlintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["../../.oxlintrc.json"]
+}

packages/i18n/package.json

@@ -28,7 +28,10 @@
   "scripts": {
     "clean": "rimraf ./dist",
     "build:dev": "pnpm clean && tsc -p tsconfig.json && vite build",
-    "build:prod": "pnpm run build:dev && pnpm test",
+    "build:prod": "pnpm lint && pnpm run build:dev && pnpm test",
+    "lint": "oxlint --config .oxlintrc.json src/ tests/",
+    "format": "oxfmt --config .oxfmtrc.json",
+    "format:check": "oxfmt --config .oxfmtrc.json --check",
     "test": "vitest run"
   },
   "devDependencies": {
@@ -37,6 +40,8 @@
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "oxfmt": "catalog:",
+    "oxlint": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
     "rimraf": "catalog:",

packages/open-workflow-diagram-editor/src/components/ui/combobox.tsx

@@ -267,7 +267,7 @@ function ComboboxChip({
   );
 }
 
-function ComboboxChipsInput({ className, children, ...props }: ComboboxPrimitive.Input.Props) {
+function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
   return (
     <ComboboxPrimitive.Input
       data-slot="combobox-chip-input"

packages/open-workflow-diagram-editor/stories/README.md

@@ -25,6 +25,7 @@ This directory contains Storybook stories and documentation.
 - **`examples/`** - Open Workflow Specification examples
 - **`use-cases/`** - Real-world use case examples
 - **`assets/`** - Images and media files used in stories
+- **`helpers.ts`** - Shared utilities for creating stories
 
 ## Running Storybook
 

packages/open-workflow-diagram-editor/stories/examples/Examples.stories.tsx

@@ -16,6 +16,7 @@
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { DiagramEditor } from "../features/DiagramEditor";
+import { createWorkflowStory } from "../helpers";
 import * as workflows from "./index";
 
 const meta = {
@@ -33,25 +34,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // Constants for shared configuration
-const DEFAULT_STORY_ARGS = {
-  isReadOnly: true,
-  locale: "en" as const,
-} as const;
-
-/**
- * Factory function to create workflow story configurations
- * @param workflowContent - The YAML workflow content to display
- * @returns Story configuration object
- */
-const createWorkflowStory = (workflowContent: string): Story => {
-  return {
-    args: {
-      ...DEFAULT_STORY_ARGS,
-      content: workflowContent,
-    },
-  };
-};
-
 // Story definitions using the factory function
 export const AccumulateRoomReadings: Story = createWorkflowStory(workflows.accumulateRoomReadings);
 export const AuthenticationOAuth2: Story = createWorkflowStory(workflows.authenticationOAuth2);

packages/open-workflow-diagram-editor/stories/features/DiagramEditor.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-
+import { createWorkflowStory } from "../helpers";
 import { DiagramEditor } from "./DiagramEditor";
 
 const workflowExample = `document:
@@ -107,13 +107,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Component: Story = {
-  args: {
-    isReadOnly: true,
-    locale: "en",
-    content: workflowExample,
-  },
-};
+export const Component: Story = createWorkflowStory(workflowExample);
 
 /* The two stories below each isolate ONE piece of spec syntax the editor must accept,
  * and both must render clean (no error badge).
@@ -147,19 +141,7 @@ do:
               roomId: \${ .roomid }`;
 
 /* A URI is an RFC 3986 URI-reference, so a relative one is valid and must not error. */
-export const RelativeUriEndpoint: Story = {
-  args: {
-    isReadOnly: true,
-    locale: "en",
-    content: relativeUriEndpointExample,
-  },
-};
+export const RelativeUriEndpoint: Story = createWorkflowStory(relativeUriEndpointExample);
 
 /* `source` is optional when emitting (runtimes generate it from the workflow) — so omitting it must not error. */
-export const EmitWithoutSource: Story = {
-  args: {
-    isReadOnly: true,
-    locale: "en",
-    content: emitWithoutSourceExample,
-  },
-};
+export const EmitWithoutSource: Story = createWorkflowStory(emitWithoutSourceExample);

packages/open-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.tsx

@@ -71,9 +71,6 @@ export const DiagramEditorDragNDrop = (props: Omit<DiagramEditorProps, "content"
     e.target.value = "";
   };
 
-  /* TODO: Remove this console log when the DiagramEditor is using the content from the param  */
-  console.log("### content updated:\n", content);
-
   return (
     <div style={{ height: "100vh" }}>
       <div

packages/open-workflow-diagram-editor/stories/features/DiagramEditorErrorBoundary.stories.tsx

@@ -18,6 +18,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { DiagramEditorErrorBoundary } from "../../src/diagram-editor/error-pages/DiagramEditorErrorBoundary";
 import { ColorMode } from "../../src/types/colorMode";
 import { useResolvedColorMode } from "../../src/hooks/useResolvedColorMode";
+import { spyOn } from "storybook/test";
 
 type DiagramEditorErrorBoundaryProps = {
   title?: string;
@@ -29,11 +30,29 @@ type DiagramEditorErrorBoundaryStoryProps = DiagramEditorErrorBoundaryProps & {
   colorMode?: ColorMode;
 };
 
-const ThrowError = ({ message = "Test error message" }: { message?: string }) => {
+const DEFAULT_ERROR_MESSAGE = "Test error message";
+const CUSTOM_ERROR_MESSAGE = "Custom error details in snippet";
+
+const ThrowError = ({ message = DEFAULT_ERROR_MESSAGE }: { message?: string }) => {
   throw new Error(message);
 };
 
 const meta = {
+  beforeEach: () => {
+    const originalConsoleError = console.error;
+
+    const consoleErrorSpy = spyOn(console, "error").mockImplementation((...args) => {
+      const error = args[1];
+
+      if (error instanceof Error && (error.message===DEFAULT_ERROR_MESSAGE || error.message===CUSTOM_ERROR_MESSAGE)) {
+        return;
+      }
+
+      originalConsoleError(...args);
+    });
+
+    return () => consoleErrorSpy.mockRestore();
+  },
   title: "Features/DiagramEditorErrorBoundary",
   component: DiagramEditorErrorBoundary,
   tags: ["autodocs"],
@@ -78,6 +97,6 @@ export const WithErrorCustomMessage: Story = {
   args: {
     title: "Custom Error Title",
     message: "This is a custom error message",
-    children: <ThrowError message="Custom error details in snippet" />,
+    children: <ThrowError message={CUSTOM_ERROR_MESSAGE} />,
   },
 };

packages/open-workflow-diagram-editor/stories/features/ValidationErrors.stories.tsx

@@ -16,6 +16,7 @@
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { DiagramEditor } from "./DiagramEditor";
+import { createWorkflowStory } from "../helpers";
 
 const meta = {
   title: "Features/Validation Errors",
@@ -31,15 +32,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const DEFAULT_STORY_ARGS = {
-  isReadOnly: true,
-  locale: "en" as const,
-} as const;
-
-const createWorkflowStory = (content: string): Story => ({
-  args: { ...DEFAULT_STORY_ARGS, content },
-});
-
 export const DocumentError: Story = createWorkflowStory(
   `
   document:

packages/open-workflow-diagram-editor/stories/helpers.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { StoryObj } from "@storybook/react-vite";
+import type { DiagramEditor } from "./features/DiagramEditor";
+
+type Story = StoryObj<typeof DiagramEditor>;
+
+const DEFAULT_STORY_ARGS = {
+  isReadOnly: true,
+  locale: "en" as const,
+} as const;
+
+/**
+ * Creates a workflow story with default configuration and play function.
+ * 
+ * @param workflowContent - The workflow YAML/JSON content to display
+ * @returns A configured Story object
+ */
+export const createWorkflowStory = (workflowContent: string): Story => {
+  return {
+    args: {
+      ...DEFAULT_STORY_ARGS,
+      content: workflowContent,
+    },
+    play: async ({ canvas }) => {
+      // Wait for the start node to be rendered to ensure all async state updates are complete
+      await canvas.findByTestId("start-node-root-entry-node");
+    },
+  };
+};

packages/open-workflow-diagram-editor/stories/use-cases/UseCases.stories.tsx

@@ -16,6 +16,7 @@
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { DiagramEditor } from "../features/DiagramEditor";
+import { createWorkflowStory } from "../helpers";
 import * as workflows from "./index";
 
 const meta = {
@@ -32,20 +33,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const DEFAULT_STORY_ARGS = {
-  isReadOnly: true,
-  locale: "en" as const,
-} as const;
-
-const createWorkflowStory = (workflowContent: string): Story => {
-  return {
-    args: {
-      ...DEFAULT_STORY_ARGS,
-      content: workflowContent,
-    },
-  };
-};
-
 export const AutomatedDataBackup: Story = createWorkflowStory(workflows.automatedDataBackup);
 export const ManagingEVChargingStations: Story = createWorkflowStory(
   workflows.managingEVChargingStations,

packages/open-workflow-diagram-editor/tests/core/taskDetails.test.ts

@@ -271,6 +271,7 @@ describe("getTaskDetails", () => {
         output: { as: "${ .output }" },
         export: { as: "${ .export }" },
         timeout: "PT5M",
+        // eslint-disable-next-line unicorn/no-thenable -- then is an Open Workflow Spec field
         then: "next",
       }),
     );