### Install Project Dependencies with pnpm

Source: https://github.com/gorules/jdm-editor/blob/master/CONTRIBUTING.md

Use this command to install all necessary project dependencies. Ensure you have pnpm installed globally.

```bash
pnpm i
```

--------------------------------

### Run Storybook for Development

Source: https://github.com/gorules/jdm-editor/blob/master/CONTRIBUTING.md

Start the Storybook development server to view and test components in isolation. This command is used for interactive component development.

```bash
pnpm storybook
```

--------------------------------

### Install JDM Editor with npm

Source: https://github.com/gorules/jdm-editor/blob/master/README.md

Install the JDM Editor package using npm. This command is used to add the library to your project dependencies.

```bash
npm i @gorules/jdm-editor
```

--------------------------------

### Self-hosting Monaco Editor in Vite

Source: https://github.com/gorules/jdm-editor/blob/master/README.md

Configure Monaco Editor workers for different languages within a Vite environment. This setup ensures proper loading and functioning of the editor.

```typescript
import type { Monaco } from '@monaco-editor/react';
import { loader } from '@monaco-editor/react';
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

declare global {
  interface Window {
    monaco?: Monaco;
  }
}

self.monaco = monaco;

self.MonacoEnvironment = {
  getWorker(workerId: string, label: string): Promise<Worker> | Worker {
    if (label === 'json') {
      return new jsonWorker();
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker();
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker();
    }
    if (label === 'typescript' || label === 'javascript') {
      return new tsWorker();
    }

    return new editorWorker();
  },
};

loader.config({ monaco });
```

--------------------------------

### Build Project Output

Source: https://github.com/gorules/jdm-editor/blob/master/CONTRIBUTING.md

Execute this command to compile the project and generate the final build output. This is typically used before deployment or for checking the packaged code.

```bash
pnpm build
```

--------------------------------

### Run Project Tests

Source: https://github.com/gorules/jdm-editor/blob/master/CONTRIBUTING.md

Execute all defined tests for the project. This command ensures that the current codebase functions as expected.

```bash
pnpm test
```

--------------------------------

### Commit with Commitizen

Source: https://github.com/gorules/jdm-editor/blob/master/CONTRIBUTING.md

Use this command to initiate a Git commit. Commitizen will prompt you to fill in required fields, ensuring commit messages adhere to project standards.

```bash
git cz
```

--------------------------------

### Format Code with Prettier

Source: https://github.com/gorules/jdm-editor/blob/master/CONTRIBUTING.md

Run the code formatting tool to check for linting and Prettier issues. This command identifies potential style problems in the codebase.

```bash
pnpm format
```

--------------------------------

### Fix Linting and Formatting Issues

Source: https://github.com/gorules/jdm-editor/blob/master/CONTRIBUTING.md

Automatically fix linting and Prettier problems in the codebase. Use this command to ensure code style consistency.

```bash
pnpm format:fix
```

--------------------------------

### Run Test Coverage

Source: https://github.com/gorules/jdm-editor/blob/master/CONTRIBUTING.md

Run tests and generate a code coverage report. This helps in identifying areas of the code that are not adequately tested and ensures coverage does not decrease.

```bash
pnpm test:coverage
```

--------------------------------

### Basic JDM Editor Usage

Source: https://github.com/gorules/jdm-editor/blob/master/packages/jdm-editor/README.md

Import and use the JDM Editor components within a React application. Ensure to import the necessary CSS.

```typescript
import '@gorules/jdm-editor/dist/style.css';
import { DecisionGraph, JdmConfigProvider } from '@gorules/jdm-editor';

...

<JdmConfigProvider>
  <DecisionGraph
    value={graph}
    onChange={(val) => setGraph(val as any)}
  />
</JdmConfigProvider>
```

--------------------------------

### Integrate JDM Editor into a React App

Source: https://github.com/gorules/jdm-editor/blob/master/README.md

Import necessary components and CSS for the JDM Editor. Ensure the JdmConfigProvider wraps your DecisionGraph component.

```typescript
import '@gorules/jdm-editor/dist/style.css';
import { DecisionGraph, JdmConfigProvider } from '@gorules/jdm-editor';

<JdmConfigProvider>
  <DecisionGraph
    value={graph}
    onChange={(val) => setGraph(val as any)}
  />
</JdmConfigProvider>
```

--------------------------------

### DecisionGraph Component Props

Source: https://github.com/gorules/jdm-editor/blob/master/packages/jdm-editor/README.md

Defines the properties available for the DecisionGraph component, used for visualizing and editing decision graphs.

```typescript
export type DecisionGraphProps = {
  id?: string;
  forwardedRef?: (instance: DecisionGraphRef) => void;
  defaultValue?: DecisionGraphType;
  value?: DecisionGraphType;
  disabled?: boolean;
  configurable?: boolean;
  components?: CustomNodeType[];
  onChange?: (val: DecisionGraphType) => void;
  manager?: DragDropManager;
  reactFlowProOptions?: ProOptions;
  onReactFlowInit?: () => void;
  simulate?: Simulation;
};
```

--------------------------------

### DecisionGraph Component Props

Source: https://github.com/gorules/jdm-editor/blob/master/README.md

Defines the properties available for the DecisionGraph component, including configuration for IDs, refs, values, views, custom nodes, and event handlers.

```typescript
export type DecisionGraphProps = {
  id?: string;
  forwardedRef?: (instance: DecisionGraphRef) => void;
  defaultValue?: DecisionGraphType;
  value?: DecisionGraphType;
  disabled?: boolean;
  viewConfig?: ViewConfig;
  components?: CustomNodeType[];
  onChange?: (val: DecisionGraphType) => void;
  manager?: DragDropManager;
  reactFlowProOptions?: ProOptions;
  onReactFlowInit?: () => void;
};
```

--------------------------------

### DecisionTable Component Props

Source: https://github.com/gorules/jdm-editor/blob/master/packages/jdm-editor/README.md

Defines the properties available for the DecisionTable component, used for creating and managing decision tables.

```typescript
export type DecisionTableProps = {
  id?: string;
  defaultValue?: DecisionTableType;
  value?: DecisionTableType;
  onChange?: (decisionTable: DecisionTableType) => void;
  activeRules?: string[];
  configurable?: boolean;
  disabled?: boolean;
  disableHitPolicy?: boolean;
  minColWidth?: number;
  colWidth?: number;
  inputsSchema?: SchemaSelectProps[];
  outputsSchema?: SchemaSelectProps[];
  cellRenderer?: (props: CellProps) => JSX.Element | null | undefined;
};
```

--------------------------------

### DecisionTable Component Props

Source: https://github.com/gorules/jdm-editor/blob/master/README.md

Defines the properties for the DecisionTable component, covering its ID, default and current values, change handlers, active rules, permissions, and schema configurations.

```typescript
export type DecisionTableProps = {
  id?: string;
  defaultValue?: DecisionTableType;
  value?: DecisionTableType;
  onChange?: (decisionTable: DecisionTableType) => void;
  activeRules?: string[];
  permission?: DecisionTablePermission;
  disabled?: boolean;
  disableHitPolicy?: boolean;
  minColWidth?: number;
  colWidth?: number;
  inputsSchema?: SchemaSelectProps[];
  outputsSchema?: SchemaSelectProps[];
  cellRenderer?: (props: CellProps) => JSX.Element | null | undefined;
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.