Create monorepo and typeScript react base project

.gitignore

@@ -154,5 +154,24 @@ dist
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
+## ci
+!/.ci
+
+## node
+**/node_modules/
+**/dist/
+**/dist-storybook/
+
+# Eclipse, Netbeans and IntelliJ files
+**/nbproject
+**/.classpath
+**/.project
+**/.settings
+**/jitexecutor
+
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+**/.idea/
+
 # Apache RAT
 .rat-reports

.husky/pre-commit

@@ -0,0 +1,18 @@
+#!/bin/sh
+#
+# Copyright 2026 The Serverless 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.
+#
+
+pnpm exec lint-staged

.npmrc

@@ -0,0 +1 @@
+ignore-workspace-root-check=true

.oxfmtrc.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "ignorePatterns": []
+}

.oxlintrc.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://oxc.rs/schema/oxlintrc.json",
+  "plugins": ["react", "typescript", "import", "jsx-a11y"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "typescript/no-unused-vars": ["warn", { "varsIgnorePattern": "^_" }],
+    "typescript/no-explicit-any": "warn"
+  },
+  "ignorePatterns": ["**/dist/", "**/dist-storybook/", "**/node_modules/"]
+}

.rat-excludes

@@ -1,9 +1,9 @@
 .gitattributes
 .npmrc
-.prettierignore
 .rat-excludes
 .rat-reports
 pnpm-lock.yaml
 pnpm-workspace.yaml
 repo/graph.dot
 repo/repo.iml
+

CODE_OF_CONDUCT.md

@@ -16,4 +16,4 @@
 
 # Code of Conduct
 
-We follow the [CNCF Code of Conduct](https://github.com/cncf/foundation/blob/main/code-of-conduct.md). Please contact the [CNCF Code of Conduct Committee](mailto:conduct@cncf.io) in order to report violations of the Code of Conduct.
+We follow the [CNCF Code of Conduct](https://github.com/cncf/foundation/blob/main/code-of-conduct.md). Please contact the [CNCF Code of Conduct Committee](mailto:conduct@cncf.io) in order to report violations of the Code of Conduct.

CONTRIBUTING.md

@@ -26,7 +26,7 @@ This project is the official, vendor-neutral visual editor for the [Serverless W
 
 To build and run the editor locally, you will need:
 - **Node.js** (current LTS version; see https://nodejs.org/)
-- **npm** or **pnpm**
+- **pnpm**
 
 ## Building the Project
 
@@ -38,10 +38,13 @@ git clone https://github.com/serverlessworkflow/editor.git
 cd editor
 
 # Install dependencies
-npm install
+pnpm install
 
-# Build all packages in the monorepo
-npm run build
+# Build all packages in the monorepo (development)
+pnpm run build:dev
+
+# Or build all packages in the monorepo (production)
+pnpm run build:prod
 ```
 
 ## Development Environment
@@ -73,7 +76,7 @@ For new features or architectural changes:
 * **Linting & Formatting**: Follow the existing code style and formatting conventions used in the files you are editing. If the package you are changing defines linting or formatting scripts, run those before submitting code.
 * **Testing**: Ensure that logic changes are covered by tests, and run the relevant test commands for the packages you modify (see their documentation or `package.json`).
 * **Component Design**: Follow functional component patterns and ensure that UI state is managed predictably within the monorepo structure.
-* **New package creation**: If a new package needs to be created, please follow the standards used by the existing packages, including the standard commands `build`, `build-prod`, `test`, `e2e-test`, `lint`
+* **New package creation**: If a new package needs to be created, please follow the standards used by the existing packages, including the standard commands `build:dev`, `build:prod`, `test`, `e2e-test`, `lint`
 
 ## Pull Request Process
 
@@ -87,4 +90,4 @@ For new features or architectural changes:
 ---
 
 ### Community and Communication
-Join the conversation on the [CNCF Slack](https://slack.cncf.io/) in the `#serverless-workflow` channel.
+Join the conversation on the [CNCF Slack](https://slack.cncf.io/) in the `#serverless-workflow` channel.

GOVERNANCE.md

@@ -27,4 +27,4 @@ Please refer to the primary governance document for details on contributor roles
 ---
 
 ## Community & Support
-If you have questions regarding the governance or how to get involved, please join us on the [CNCF Slack](https://slack.cncf.io/) in the `#serverless-workflow` channel.
+If you have questions regarding the governance or how to get involved, please join us on the [CNCF Slack](https://slack.cncf.io/) in the `#serverless-workflow` channel.

LICENSE

@@ -198,4 +198,4 @@
    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.
+   limitations under the License.

README.md

@@ -16,3 +16,28 @@
 
 # editor
 CNCF Serverless Workflow Specification Visual Editor
+
+## Prerequisites
+
+To build and run the editor locally, you will need:
+- **Node.js 22** (current LTS version; see https://nodejs.org/)
+- **pnpm 10.31.0**
+
+## Building the Project
+
+The project is structured as a monorepo to support multiple distribution targets (Web, VS Code, etc.) as defined in our architectural decisions.
+
+```bash
+# Clone the repository
+git clone https://github.com/serverlessworkflow/editor.git
+cd editor
+
+# Install dependencies
+pnpm install
+
+# Build all packages in the monorepo (development)
+pnpm run build:dev
+
+# Or build all packages in the monorepo (production)
+pnpm run build:prod
+```

package.json

@@ -3,23 +3,40 @@
   "version": "0.0.0",
   "private": true,
   "description": "CNCF Serverless Workflow Specification Visual Editor",
+  "homepage": "https://github.com/serverlessworkflow/editor",
+  "bugs": {
+    "url": "https://github.com/serverlessworkflow/editor/issues"
+  },
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/serverlessworkflow/editor.git"
   },
+  "type": "module",
   "scripts": {
     "dependencies:check": "syncpack lint",
     "dependencies:fix": "syncpack fix",
+    "format": "oxfmt --config .oxfmtrc.json",
+    "format:check": "oxfmt --config .oxfmtrc.json --check",
     "build:prod": "pnpm -r --stream --if-present build:prod",
     "build:dev": "pnpm -r --stream --if-present build:dev",
     "prepare": "husky"
   },
   "devDependencies": {
-    "husky": "^9.1.7",
-    "syncpack": "^14.2.0"
+    "husky": "catalog:",
+    "lint-staged": "catalog:",
+    "oxfmt": "catalog:",
+    "syncpack": "catalog:",
+    "typescript": "catalog:"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx,json,md,yml,yaml}": [
+      "pnpm format"
+    ]
   },
   "engines": {
-    "node": ">=24"
-  }
+    "node": ">=22",
+    "pnpm": "10.31.0"
+  },
+  "packageManager": "pnpm@10.31.0"
 }

packages/serverless-workflow-diagram-editor/.oxfmtrc.json

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

packages/serverless-workflow-diagram-editor/.oxlintrc.json

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

packages/serverless-workflow-diagram-editor/.storybook/main.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2021-Present The Serverless 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 { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  typescript: {
+    check: true,
+  },
+  core: {
+    disableTelemetry: true, // Do not collect data
+  },
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@chromatic-com/storybook", "@storybook/addon-vitest", "@storybook/addon-a11y", "@storybook/addon-docs"],
+  framework: "@storybook/react-vite",
+};
+
+export default config;

packages/serverless-workflow-diagram-editor/.storybook/preview.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2021-Present The Serverless 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 { Preview } from "@storybook/react-vite";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: "todo",
+    },
+  },
+};
+
+export default preview;

packages/serverless-workflow-diagram-editor/.storybook/vitest.setup.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2021-Present The Serverless 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 * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from "@storybook/react-vite";
+import * as projectAnnotations from "./preview";
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);