### Initialize Noodl Platform for Node.js

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-platform/README.md

Similar to Electron, this TypeScript snippet illustrates the initial setup for the Noodl platform in a Node.js application. It requires importing `@noodl/platform-node` at the start to enable Node-specific functionalities. After this, common modules like `filesystem` and `platform` can be imported from the main `@noodl/platform` package.

```ts
// Setup the platform before anything else is loading
// This is a problem since we are calling the platform when importing
import "@noodl/platform-node";

// Then import the platform etc via:
import { filesystem, platform } from "@noodl/platform";
```

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

### Build and Run Noodl Editor from Source

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/README.md

These npm commands are used for managing the Noodl Editor when building from source. `npm install` sets up all necessary project dependencies. `npm start` builds production versions of the cloud and React runtimes and then starts the Noodl Editor. `npm run dev` starts the editor with development versions of the runtimes, watching for file changes for a quicker development workflow. `npm run test:editor` executes the test suite specifically for the Noodl Editor.

```bash
# Install all dependencies
npm install

# Start the Noodl Editor and build a production version of the cloud and react runtime (useful when running Noodl from source but want to deploy to production)
npm start

# Start the Noodl Editor and watch the filesystem for changes to the runtimes. Development versions of the runtimes, not meant for production (mostly due to source maps and file size)
# This is ideal for a quick workflow when doing changes on the runtimes.
npm run dev

# Start Noodl Editor test runner
npm run test:editor
```

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

### Check Page Router start page in OpenNoodl (JSON)

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Illustrates how to verify the designated start page for a Page Router node. This ensures the correct initial navigation path.

```JSON
{
  "path": "/App:%Group:%Router",
  "paramseq": {
    "pages": {
      "startPage": "/Page 2"
    }
  }
}
```

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

### Install OpenNoodl on Arch Linux

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/README.md

This command demonstrates how to install OpenNoodl on Arch Linux using the `yay` AUR helper. It fetches and installs the `opennoodl` package from the Arch User Repository, making the application available on your system.

```bash
yay -S opennoodl
```

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

### Install Noodl Platform for Node.js

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-platform/README.md

This command shows how to install the necessary Noodl platform packages for a Node.js environment. It uses `npm` to install both the core `@noodl/platform` package and the Node-specific `@noodl/platform-node` package, making them available for use in your project.

```shell
$ npm install @noodl/platform @noodl/platform-node
```

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

### APIDOC: Tutorial Condition Path Syntax

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Defines the syntax for specifying paths to nodes within the tutorial condition system. Paths start with the component name and can include tokens for labels (`#label`), types (`%type`), or child indices (`index`). The first part is always a component, followed by root node matching, and then child node matching.

```APIDOC
Path Syntax:
- `/Main:%Group`: "/Main" component -> Any root node with the type "Group". Picks the first if multiple.
- `/Main:%Group:%Button`: "/Main" component -> Any root node with the type "Group" -> First child with the type "Button".
- `/Main:#Some Label`: "/Main" component -> A root node with the label "Some Label".
- `/Main:#Some Label:0`: "/Main" component -> A root node with the label "Some Label" -> First child.
- `/Main:#Some Label:%Button`: "/Main" component -> A root node with the label "Some Label" -> First child with the type "Button".
- `/#Sheet A/Comp A:JavaScriptFunction`: Sheet "Sheet A" component "Comp A" -> A root node with the type "Function" (refer to project.json for node types).
```

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

### Apache License 2.0 Boilerplate Notice

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/src/assets/OpenSans/LICENSE.txt

This snippet provides the standard boilerplate notice for applying the Apache License, Version 2.0 to a work. It includes placeholders for the copyright year and owner, and outlines the terms under which the work is licensed. This text should be enclosed in the appropriate comment syntax for the file format where it is applied.

```Text
Copyright [yyyy] [name of copyright owner]

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.
```

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

### Perform Noodl JSON Storage Operations

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-platform/README.md

This TypeScript example demonstrates common operations with Noodl's `JSONStorage` for persistent configuration. It shows how to retrieve data using `get()`, store data using `set()`, and remove data using `remove()`, all of which return Promises indicating completion or providing the retrieved content.

```ts
import { JSONStorage } from "@noodl/platform";

JSONStorage.get("my-key").then((content) => {
  // content = json file
});

JSONStorage.set("my-key", { key: "value" }).then(() => {
  // done
});

JSONStorage.remove("my-key").then(() => {
  // done
});
```

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

### JavaScript Initialization for OpenNoodl Runtime

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-viewer-react/static/viewer/index.html

This JavaScript code initializes the Noodl runtime environment. It sets up a global `Noodl` object to define modules and renders the Noodl React application into the 'root' DOM element once the document is fully loaded. It includes placeholders for module dependencies and main module code.

```JavaScript
window.__noodl_modules = [];
window.Noodl = {
  defineModule: function (m) {
    window.__noodl_modules.push(m);
  },
  deployed: false,
  Env: {}
};
document.addEventListener("DOMContentLoaded", function () {
  const root = document.getElementById('root');
  window.Noodl._viewerReact.render(root, __noodl_modules, { isLocal: true });
});
```

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

### Storybook MDX Documentation Setup for Color Palettes

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-core-ui/src/stories/design-tokens/_01_colors.stories.mdx

This snippet demonstrates the setup of a Storybook MDX page for documenting design tokens, specifically color palettes. It includes importing necessary Storybook components and custom React components to render theme and base color sheets, along with setting page metadata.

```JavaScript
import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
import { ThemeColorPaletteSheet, BaseColorPaletteSheet } from './_01_colors_palettes';

<Meta title="Design Tokens/01. Colors" />

<ThemeColorPaletteSheet />

<BaseColorPaletteSheet />
```

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

### Check connection between OpenNoodl nodes (JSON)

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Provides an example of verifying a connection between two specific nodes, identifying the source and target ports involved in the connection.

```JSON
{
  "from": "/My component:%Model2",
  "to": "/My component::%Image",
  "hasconnection": "prop-url,src"
}
```

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

### Check state node parameters in OpenNoodl (JSON)

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

An example of checking specific state parameters within a state node. This snippet shows how to verify the presence of certain states and their associated values.

```JSON
{
  "path": "/App:#root:1",
  "paramseq": {
    "paramseq": {
      "states": "Visible,Hidden",
      "values": "Opacity"
    }
  }
}
```

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

### Basic CSS Styling for OpenNoodl Application

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-viewer-react/static/viewer/index.html

This CSS defines the fundamental layout and appearance for an OpenNoodl web application. It includes reset styles, body and root container properties, image drag prevention, box-sizing, tap highlight prevention, and custom font definitions for 'Open Sans' from local assets.

```CSS
body { margin: 0; padding: 0; background-color: white; }
.body-scroll { overflow: hidden auto; }
img { -webkit-user-drag: none; }
* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
#root { display: flex; width: 100%; height: 100%; overflow: hidden; position: fixed; }
.body-scroll > #root { width: 100%; height: auto; min-height: 100vh; flex-direction: column; overflow: initial; position: initial; }
@font-face { font-family: "Open Sans"; src: url(ndl_assets/OpenSans-Regular.ttf); }
@font-face { font-family: "Open Sans"; src: url(ndl_assets/OpenSans-Bold.ttf); font-weight: bold; }
```

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

### Retrieve Noodl Platform Build Number

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-platform/README.md

This TypeScript example demonstrates how to access platform-specific information, specifically retrieving the application's build number. It imports the `platform` module from `@noodl/platform` and uses its `getBuildNumber()` method, which returns a Promise that resolves with the version string.

```ts
import { platform } from "@noodl/platform";

platform.getBuildNumber().then((version) => {});
```

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

### Display Poppins Font Typography Example in Storybook

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-core-ui/src/stories/design-tokens/_02_typography.stories.mdx

This snippet uses Storybook's `Typeset` component to visually demonstrate the 'Poppins' font family. Similar to the Inter font example, it displays a range of font sizes from 12 to 48 pixels with a font weight of 500 and the same sample text.

```JSX
<Typeset
  fontSizes={[
    Number(12),
    Number(14),
    Number(16),
    Number(20),
    Number(24),
    Number(28),
    Number(32),
    Number(40),
    Number(48)
  ]}
  fontWeight={500}
  sampleText={'Over the horizon comes the break of dawn.'}
  fontFamily={'Poppins'}
/>
```

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

### Display Inter Font Typography Example in Storybook

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-core-ui/src/stories/design-tokens/_02_typography.stories.mdx

This snippet uses Storybook's `Typeset` component to visually demonstrate the 'Inter' font family. It showcases a range of font sizes from 12 to 48 pixels with a fixed font weight of 500 and a sample text.

```JSX
<Typeset
  fontSizes={[
    Number(12),
    Number(14),
    Number(16),
    Number(20),
    Number(24),
    Number(28),
    Number(32),
    Number(40),
    Number(48)
  ]}
  fontWeight={500}
  sampleText={'Over the horizon comes the break of dawn.'}
  fontFamily={'Inter'}
/>
```

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

### HTML Template for a Tutorial Step Without Conditions

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Outlines the HTML structure for a tutorial step that automatically displays its popup content without requiring specific user actions. It includes a `data-template="item"` for the tutorial bar entry and a `data-template="popup"` for the associated content.

```HTML
<div>
  <div data-template="item">
    <header>...header text and stuff ...</header>
    <h2>Some text</h2>
  </div>
  <div data-template="popup">... popup content ...</div>
</div>
```

```HTML
<div>
  <div>
    <div data-template="item">
      <header>Info</header>
      <h2>The node graph</h2>
    </div>
    <div data-template="popup">
      <img src="node-graph.gif" />
      <h2>The node graph</h2>
      <p>Some text</p>
    </div>
  </div>
</div>
```

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

### HTML Template for a Tutorial Step with Conditions

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Describes the HTML structure for a tutorial step that only activates its popup when specified conditions are met. The `data-conditions` attribute holds a JSON array of conditions, and a `lesson-checkmark` span can be used for visual feedback.

```HTML
<div data-conditions="[ list of conditions as json ]" }>
  <div data-template="item">
    <header>...header text and stuff ... <span class="lesson-checkmark"></span></header>
    <h3>Some text</h3>
  </div>
  <div data-template="popup">... popup content ...</div>
</div>
```

```HTML
<div
  data-conditions='[
        {"path":"/App:%Group:0","exists":true}
    ]'
>
  <div data-template="item">
    <header>Task <span class="lesson-checkmark"></span></header>
    <h3>Drag the text node back to make it visible again</h3>
  </div>

  <div data-template="popup">
    <img src="drag-text-out.gif" />
  </div>
</div>
```

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

### JavaScript Entry Point for Noodl Application Rendering

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-viewer-react/static/deploy/index.html

This JavaScript code snippet serves as the main entry point for a Noodl application. It waits for the DOM to be fully loaded, then retrieves the 'root' element and uses the Noodl viewer's React renderer to deploy the application with provided modules and project data.

```JavaScript
<%modules_dependencies%> <%index_js%> <%modules_main%> document.addEventListener("DOMContentLoaded", function () { const root = document.getElementById("root"); window.Noodl._viewerReact.renderDeployed(root, __noodl_modules, window.projectData); });
```

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

### Initialize Noodl Platform for Electron

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-platform/README.md

This snippet demonstrates how to set up the Noodl platform for Electron applications. It involves importing the `@noodl/platform-electron` package early in the application's lifecycle to ensure platform-specific features are available. Subsequently, core modules like `filesystem` and `platform` can be imported from `@noodl/platform`.

```ts
// Setup the platform before anything else is loading
// This is a problem since we are calling the platform when importing
import "@noodl/platform-electron";

// Then import the platform etc via:
import { filesystem, platform } from "@noodl/platform";
```

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

### HTML Template for a Modal Popup Tutorial Step

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Defines the HTML structure for a tutorial step that appears as a full-screen modal popup. This type of step requires user dismissal to proceed and is often used for initial explanations or important announcements. The `data-template="popup"` attribute identifies the content as a modal.

```HTML
<div data-template="popup">... any html ...</div>
```

```HTML
<div data-template="popup">
  <img src="cool-gif.gif" />
  <h2>Welcome to this tutorial</h2>
  <p>You're going to learn some awesome stuff</p>
</div>
```

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

### HTML Template for Custom Width Tutorial Step

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Illustrates how to set a custom width for a tutorial item using an inline `style` attribute. This is useful for accommodating longer text or specific layout requirements within the tutorial bar, overriding the standard size.

```HTML
<div>
  <div data-template="item" style="width: 300px">...</div>
  <div data-template="popup">...</div>
</div>
```

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

### Check Page Input parameters and connections in OpenNoodl (JSON)

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Shows how to verify the existence of specific page input parameters and their connections to other nodes. For multiple parameters, the order in the comma-separated list is important.

```JSON
[
  {
    "path": "/Page 1:%PageInputs",
    "paramseq": {
      "pathParams": "myPageInput"
    }
  },
  {
    "from": "/Page 1:%PageInputs",
    "to": "/Page 1:%Page:%Text",
    "hasconnection": "pm-myPageInput,text"
  }
]
```

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

### Check node parameters in OpenNoodl (JSON)

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Demonstrates how to verify the values of one or more parameters on a specific node, as defined in the `project.json` file. This is useful for ensuring node configuration.

```JSON
{
  "path": "/App:#root:1",
  "paramseq": {
    "color": "#000000",
    "width": { "value": 300, "unit": "px" },
    "alignX": "center",
    "alignY": "center",
    "sizeMode": "contentSize"
  }
}
```

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

### Initialize Noodl Editor Bundle

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/src/editor/index.html

This JavaScript snippet determines the base path for the Noodl editor bundle. In development mode (when `process.env.devMode` is 'yes'), it points to a local server; otherwise, it uses a relative path. It then dynamically injects a script tag into the document to load the `index.bundle.js` file, ensuring the Noodl editor is loaded correctly.

```JavaScript
const path = process.env.devMode !== 'yes' ? '.' : 'http://localhost:8080/src/editor'; document.write("<script defer src=\"${path}/index.bundle.js\"><\/script>");
```

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

### Initialize Noodl Viewer Script in JavaScript

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/src/frames/viewer-frame/index.html

This JavaScript snippet dynamically loads the Noodl Viewer's main bundle. It determines the script's base path based on the `devMode` environment variable, pointing to a local development server for development or a relative path for production, and then injects the script into the document using `document.write`.

```JavaScript
const path = process.env.devMode !== 'yes' ? '.' : 'http://localhost:8080/src/frames/viewer-frame'; document.write(`<script defer src=\"${path}/index.bundle.js\"><\\/script>`);
```

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

### Basic CSS Styling for Noodl Application Layout

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-viewer-react/static/deploy/index.html

This CSS snippet provides fundamental styling for the body and root elements of a web application, ensuring proper layout and preventing user drag on images. It sets up a flex container for the root and handles scrolling behavior.

```CSS
body { margin: 0; padding: 0; background-color: white; }
.body-scroll { overflow: hidden auto; }
img { -webkit-user-drag: none; }
* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
#root { display: flex; width: 100%; height: 100%; overflow: hidden; position: fixed; }
.body-scroll > #root { width: 100%; height: auto; min-height: 100vh; flex-direction: column; overflow: initial; position: initial; }
```

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

### Check Navigate node target page in OpenNoodl (JSON)

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Demonstrates how to check if a Navigate node is configured to point to a specific target page, ensuring correct navigation behavior.

```JSON
{
  "path": "/App:%RouterNavigate",
  "paramseq": {
    "target": "/Page 2"
  }
}
```

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

### Read JSON File using Noodl Filesystem

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-platform/README.md

This snippet illustrates how to read a JSON file using the Noodl platform's `filesystem` module. It imports `filesystem` from `@noodl/platform` and calls `readJson()` with the file path. The method returns a Promise that resolves with the parsed JSON content, which can then be accessed.

```ts
import { filesystem } from "@noodl/platform";

filesystem.readJson("path/to/file.json").then((content) => {
  console.log(content.value);
});
```

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

### Exit lesson from HTML button click in OpenNoodl (HTML)

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Shows how to add a `data-click` attribute to an HTML button to trigger the `exitEditor` action within the OpenNoodl editor. This allows for custom UI elements to control lesson flow.

```HTML
<button style="width: 150px" data-click="exitEditor">EXIT LESSON</button>
```

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

### Check if a port exists on an OpenNoodl node (JSON)

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Illustrates how to verify the existence of a specific port on a given node. This is crucial for validating node interfaces and connectivity.

```JSON
{
  "path": "/App:#some function node",
  "hasport": "myInput"
}
```

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

### JSON Condition: Check Node Connection

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Defines a JSON condition to verify if a connection exists between two specified nodes and their respective ports. The `from` and `to` properties specify the node paths, and `hasconnection` specifies the source and target port names as a comma-separated string.

```JSON
{
  "from": "/App:#nodeLabelA",
  "to": "/App:#nodeLabelB",
  "hasconnection": "sourcePortName,targetPortName"
}
```

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

### Define Node-Specific Sidebar Panel in Node Definition

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/sidebar.md

Illustrates how to specify a custom sidebar panel directly within a node's definition. When this node is selected in the Noodl editor, the specified panel (e.g., 'PortEditor') will automatically open in the sidebar, providing context-specific controls.

```ts
{
  panels: [
    {
      name: "PortEditor",
    }
  ],
}
```

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

### Displaying Project Icons in Storybook MDX

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-core-ui/src/stories/design-tokens/_03_icons.stories.mdx

This JavaScript/JSX snippet, typically found in a Storybook MDX file, imports necessary components from Storybook and a custom `Icon` component. It then iterates over the `IconName` enumeration to dynamically render each icon within an `IconGallery`, providing a visual catalog of all available icons in the Storybook documentation.

```JavaScript
import { Meta, IconGallery, IconItem } from '@storybook/addon-docs/blocks';
import { Icon, IconName } from '../../components/common/Icon';

<Meta title="Design Tokens/03. Icons" />

# Iconography

<IconGallery>
  {Object.entries(IconName).map(([iconName, iconValue]) => (
    <IconItem key={iconName} name={iconName}>
      <Icon icon={iconValue} />
    </IconItem>
  ))}
</IconGallery>
```

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

### Check Object node properties in OpenNoodl (JSON)

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Demonstrates how to check if an Object node contains specific properties. It's important to note that the order of property creation matters for this check.

```JSON
{
  "path": "/My component:%Model2",
  "paramseq": {
    "properties": "url,author"
  }
}
```

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

### JSON Condition: Check Node Type

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Defines a JSON condition to verify if a node at a specified path is of a specific type. The `hastype` property takes the expected node type string as its value.

```JSON
{
  "path": "/App:#root:1",
  "hastype": "Group"
}
```

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

### JSON Condition: Check Node Parameters

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Defines a JSON condition to verify if one or more parameters on a node at a specified path have any value set. The `hasparams` property takes a comma-separated string of parameter names to check.

```JSON
{
  "path": "/App:#root:1",
  "hasparams": "marginLeft,marginRight"
}
```

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

### Register Sidebar Panel with Noodl SidebarModel

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/sidebar.md

Registers the previously defined `UndoQueuePanelView` as a new sidebar panel within the Noodl application. This configuration includes properties such as visibility, a unique ID, display name, order, icon, and a factory function to instantiate the panel's view.

```ts
SidebarModel.instance.register({
  hidden: false,
  id: 'undo-queue',
  name: 'Undo Queue',
  order: 10,
  icon: 'sidebar-toolbar-components-icon',
  panel: (args) => new UndoQueuePanelView()
});
```

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

### JSON Condition: Check Node Label

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Defines a JSON condition to verify if a node at a specified path has a particular label. The `haslabel` property takes the expected label string as its value.

```JSON
{
  "path": "/App:#root:1",
  "haslabel": "Some label"
}
```

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

### Check Page Router pages in OpenNoodl (JSON)

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Shows how to check if a Page Router node contains a specific set of pages. Unlike object properties, the order of pages does not matter for this check.

```JSON
{
  "path": "/App:%Group:%Router",
  "paramseq": {
    "pages": {
      "routes": ["/Page 1", "/Page 2", "/Page 3"]
    }
  }
}
```

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

### Create React Component for Undo Queue Sidebar Panel

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/sidebar.md

Defines a React functional component `UndoQueuePanel` and a `ReactView` class `UndoQueuePanelView` to display the undo queue. It uses Noodl UI components and manages its state with React hooks. This component will serve as the content for a custom sidebar panel.

```tsx
import React, { useState } from 'react';
import { ReactView } from '../../../../shared/ReactView';

import { UndoQueue } from '@noodl-models/undo-queue-model';

import { PrimaryButton } from '@noodl-core-ui/inputs/PrimaryButton';
import { Container, ContainerDirection } from '@noodl-core-ui/layout/Container';

function UndoQueuePanel({}) {
  const [queue, setQueue] = useState([]);

  function refresh() {
    const undoQueue: TSFixme[] = UndoQueue.instance.queue;
    setQueue([...undoQueue]);
  }

  return (
    <>
      <Container hasXSpacing hasYSpacing>
        <PrimaryButton label="Refresh" onClick={refresh} isGrowing />
      </Container>
      <Container hasXSpacing hasYSpacing direction={ContainerDirection.Vertical}>
        {queue.map((item, index) => (
          <PrimaryButton key={index} label={item.label} isGrowing />
        ))}
      </Container>
    </>
  );
}

// NOTE: Once Frames component is rewritten to React we don't need to have the
//       ReactView here.
export class UndoQueuePanelView extends ReactView<{}> {
  constructor(args) {
    super({});
  }

  protected renderReact(props: {}): JSX.Element {
    return UndoQueuePanel({});
  }
}
```

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

### JSON Condition: Check Node Existence by Path

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/docs/interactive-lessons.md

Defines a JSON condition to verify the existence or non-existence of a node at a specified path. The `exists` property can be set to `true` to check for presence or `false` to check for absence of the node.

```JSON
{"path":"/App:#root:1", "exists":true}
```

```JSON
{"path":"/App:#root:1", "exists":false}
```

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

### Configure Node.js `require` and Jasmine Timeout for Spec Runner

Source: https://github.com/the-low-code-foundation/opennoodl/blob/main/packages/noodl-editor/tests/SpecRunner.html

This JavaScript snippet customizes Node.js's `require` function to synchronously load `.html`, `.css`, and `.json` files by reading their content. It also sets the default timeout interval for Jasmine tests to 60 seconds (60,000 milliseconds), which is crucial for accommodating long-running asynchronous tests.

```JavaScript
var fs = require('fs');
['.html', '.css'].forEach(ext => {
  require.extensions[ext] = function (module, filename) {
    module.exports = fs.readFileSync(filename, 'utf8');
  };
});
require.extensions['.json'] = function (module, filename) {
  module.exports = JSON.parse(fs.readFileSync(filename, 'utf8'));
};
jasmine.DEFAULT_TIMEOUT_INTERVAL = 60 * 1000;
```

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