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

* Created an helper to fix React act() warnings
* removed console.log which is not needed anymore
* Suppressed errorlog in DiagramEditorErrorBoundary.stories.tsx
* fix SVG warnings in Edge tests with explicit wrapper
* Add oxlint and oxfmt to i18n
* Vanilla example: increase Vite chunk size warning limit
* Block CI execution for linting issues

---------

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Author: fantonangeli

.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