### Start Development Environment for Components

Source: https://github.com/mittwald/flow/blob/main/README.md

Run this command to start the development environment for the components package. Ensure you have pnpm and nx installed.

```shell
pnpm nx dev components
```

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

### Install Acorn using npm

Source: https://github.com/mittwald/flow/blob/main/packages/components/patching/README.md

Install the Acorn JavaScript parser using npm. This is the recommended method for most users.

```sh
npm install acorn
```

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

### Prepare Test Browsers

Source: https://github.com/mittwald/flow/blob/main/packages/remote-react-components/CONTRIBUTE.md

Installs the necessary browsers for running visual regression tests. This command should be executed before running any tests.

```sh
pnpm test:browser:prepare
```

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

### AST Node Interface Example

Source: https://github.com/mittwald/flow/blob/main/packages/components/patching/README.md

Illustrates the structure of an AST node, including optional location and range information.

```javascript
{
  "end": Number,
  // If `locations` option is on:
  "loc": {
    "start": {line: Number, column: Number}
    "end": {line: Number, column: Number}
  },
  // If `ranges` option is on:
  "range": [Number, Number]
}
```

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

### Example Extension Configuration

Source: https://github.com/mittwald/flow/wiki/Developing-Frontends-for-Extensions

This JSON snippet shows how to configure an extension item in the project menu. It includes the URL for the extension and additional properties like a custom icon and a translated title.

```json
{
  "/projects/project/menu/section/extensions/item": {
    "url": "https://my-extension.com/project/:projectId",
    "additionalProperties": {
      "icon": "<svg>...</svg>",
      "title": "{\"de\": \"Meine Extension\"}"
    }
  }
}
```

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

### Install Flow Remote Components

Source: https://github.com/mittwald/flow/wiki/Developing-Frontends-for-Extensions

Install the necessary Flow Remote Components for React development. This is a prerequisite for building embedded frontends.

```sh
npm install @mittwald/flow-remote-react-components
```

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

### Basic Parsing Example

Source: https://github.com/mittwald/flow/blob/main/packages/components/patching/README.md

Demonstrates the basic usage of the `acorn.parse` function to parse a simple JavaScript expression and log the resulting AST.

```javascript
let acorn = require("acorn");
console.log(acorn.parse("1 + 1", { ecmaVersion: 2020 }));
```

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

### Build Acorn from Source

Source: https://github.com/mittwald/flow/blob/main/packages/components/patching/README.md

Clone the Acorn repository from GitHub, install dependencies, and build the parser yourself. This method is useful for development or custom builds.

```sh
git clone https://github.com/acornjs/acorn.git
cd acorn
npm install
```

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

### Basic React Tunnel Setup and Usage

Source: https://github.com/mittwald/flow/blob/main/packages/react-tunnel/README.md

Demonstrates how to set up the TunnelProvider and use TunnelEntry and TunnelExit components to render content conditionally in different parts of the application. Ensure TunnelProvider wraps all components that will use tunnels.

```jsx
import { TunnelProvider, TunnelEntry, TunnelExit } from "@mittwald/react-tunnel";

function App() {
  return (
    <TunnelProvider>
      <h1>My cool App</h1>
      <TunnelExit id="callToAction" />
      <PagesRouter />
    </>
  );
}

function ProfilePage(props) {
  const { user } = props;
  return (
    <Page>
      <EditProfileForm />
      {!user.mfaEnabled && (
        <TunnelEntry id="callToAction">
          <Link href="/profile/mfa">Enable MFA</Link>
        </TunnelEntry>
      )}
    </Page>
  );
}
```

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

### Comment Handling Example

Source: https://github.com/mittwald/flow/blob/main/packages/components/patching/README.md

Shows how to capture comments encountered during parsing by providing a callback function to the `onComment` option. The callback receives details about the comment type, content, and position.

```javascript
{
  type: "Line" | "Block",
  value: "comment text",
  start: Number,
}
```

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

### Attach Session Token to Axios Requests

Source: https://github.com/mittwald/flow/wiki/Developing-Frontends-for-Extensions

Recommended to use an HTTP client middleware or interceptor to automatically attach a fresh token to each request, as tokens are short-lived. This example uses Axios.

```javascript
import { getSessionToken } from "@mittwald/ext-bridge/browser";

axios.interceptors.request.use(async (request) => {
  const token = await getSessionToken();
  request.headers.set("x-session-token", token);
  return request;
});
```

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

### Verify Session Token with Express Middleware

Source: https://github.com/mittwald/flow/wiki/Developing-Frontends-for-Extensions

An Express middleware example that verifies the session token and attaches the verified payload to the request object. Always create a fresh access token on demand; never cache or reuse them.

```javascript
import { verify } from "@mittwald/ext-bridge";

app.use((req, res, next) => {
  const token = req.headers["x-session-token"];
  if (!token) return next("router");

  verify(token)
    .then((session) => {
      req.sessionToken = session;
      next();
    })
    .catch(() => res.sendStatus(401));
});
```

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

### Get Access Token for Mittwald API

Source: https://github.com/mittwald/flow/wiki/Developing-Frontends-for-Extensions

Use the session token to obtain an access token for communicating with the Mittwald API. This operation is secured by your global extension secret. Do not cache or store access tokens; always get a new one.

```typescript
import { getAccessToken } from "@mittwald/ext-bridge/node";

const accessToken = await getAccessToken(
  sessionTokenFromRequest,
  process.env.MY_EXT_SECRET
);

const projectsResponse = await fetch("https://api.mittwald.de/v2/projects", {
  headers: {
    Authorization: `Bearer ${accessToken}`,
  },
});
```

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

### Adjust Code Imports with Codemod

Source: https://github.com/mittwald/flow/blob/main/packages/remote-react-components/README.md

Use the jscodeshift CLI tool to automatically update import paths in your source code. Specify the parser based on your project's setup (TypeScript or JSX).

```shell
npx jscodeshift \
  -t https://raw.githubusercontent.com/mittwald/flow/refs/heads/main/packages/codemods/src/transforms/flowRemote.ts \
  --parser tsx \
  src
```

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

### Run Visual Regression Tests (Headless)

Source: https://github.com/mittwald/flow/blob/main/packages/remote-react-components/CONTRIBUTE.md

Executes visual regression tests in a headless Webkit browser. Differences in screenshots will be generated if detected.

```sh
pnpm nx run remote-react-components:test:visual --browser.name=webkit
```

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

### Browser Configuration Access Migration

Source: https://github.com/mittwald/flow/blob/main/packages/ext-bridge/MIGRATION.md

Illustrates the migration for accessing configuration in non-React browser environments. Previously, useExtBridge was used; now, getConfig from @mittwald/ext-bridge/browser is required.

```javascript
// After - Browser (non-React)
import { getConfig } from "@mittwald/ext-bridge/browser";
const config = getConfig();
```

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

### Iterating Over Tokens with Tokenizer

Source: https://github.com/mittwald/flow/blob/main/packages/components/patching/README.md

Demonstrates how to iterate over tokens generated by the acorn tokenizer using a for...of loop.

```javascript
for (let token of acorn.tokenizer(str)) {
  // iterate over the tokens
}
```

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

### Verify Method Location Migration

Source: https://github.com/mittwald/flow/blob/main/packages/ext-bridge/MIGRATION.md

Demonstrates the change in the import path for the verify method. Previously available directly from the main package, it is now located in @mittwald/ext-bridge/node.

```javascript
// Before - verify
import { verify } from "@mittwald/ext-bridge";

// After - verify
import { verify } from "@mittwald/ext-bridge/node";
```

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

### Hello World React Component with Flow Components

Source: https://github.com/mittwald/flow/wiki/Developing-Frontends-for-Extensions

A basic React component demonstrating the use of Flow Remote Components and the Ext Bridge. It displays a session ID within an alert box. Ensure RemoteRoot is used as the main wrapper.

```javascript
import {
  Alert,
  CodeBlock,
  Content,
  Heading,
} from "@mittwald/flow-remote-react-components";
import RemoteRoot from "@mittwald/flow-remote-react-components/RemoteRoot";
import { useConfig } from "@mittwald/ext-bridge/react";

function SessionInfo() {
  const config = useConfig();
  return <InlineCode>{config.sessionId}</InlineCode>;
}

export default function Demo() {
  return (
    <RemoteRoot>
      <Alert>
        <Heading>Hello World!</Heading>
        <Content>
          This is my first extension: <SessionInfo />
        </Content>
      </Alert>
    </RemoteRoot>
  );
}
```

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

### Transforming Code to Array of Tokens

Source: https://github.com/mittwald/flow/blob/main/packages/components/patching/README.md

Shows how to convert a string of code into an array of tokens using the spread syntax with the acorn tokenizer.

```javascript
var tokens = [...acorn.tokenizer(str)];
```

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

### Bindestrich-Regeln für Wortkombinationen

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/index.mdx

Koppeln Sie zweisprachige Wortkombinationen mit einem Bindestrich. Vermeiden Sie Bindestriche bei der Kopplung von Produktnamen wie 'mittwald' oder 'mStudio' an andere Wörter.

```text
Ein Tarif-Upgrade kommt selten allein. Erst recht im Cloud Hosting.
Ein Tarif Upgrade allein macht noch keinen Sommer. Auch nicht im Cloud-Hosting.
```

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

### React Configuration Access Migration

Source: https://github.com/mittwald/flow/blob/main/packages/ext-bridge/MIGRATION.md

Shows the change in how configuration is accessed in React components. Before, useExtBridge was used; now, useConfig from @mittwald/ext-bridge/react is the standard.

```javascript
// Before
import { useExtBridge } from "@mittwald/ext-bridge";
const { config } = useExtBridge();

// After - React component
import { useConfig } from "@mittwald/ext-bridge/react";
const config = useConfig();
```

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

### ContextMenu Loading State

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Implement the ContextMenu boundary to manage loading states. This boundary provides a loading indicator when context menu content is being fetched.

```jsx
<LiveCodeEditor example="context-menu-loading" editorDisabled/>
```

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

### LayoutCard with Sections Count

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

When essential functions or information are within a LayoutCard, enclose the entire card with `WithBoundaries.LayoutCard`. Pass the `sectionsCount` to correctly render the loading view based on the number of loaded sections.

```jsx
WithBoundaries.LayoutCard
  sectionsCount={loadedSections.length}
  // ... other props
```

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

### Run Visual Regression Tests in Dev Mode

Source: https://github.com/mittwald/flow/blob/main/packages/remote-react-components/CONTRIBUTE.md

Runs visual regression tests in a "real" browser, allowing direct interaction with the test environment. Useful for debugging.

```sh
pnpm nx run remote-react-components:test:visual:dev --browser.name=webkit
```

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

### ContentFragment Loading State

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Employ ContentFragment for multi-line content to manage loading states. This boundary provides a loading indicator for content that is being fetched.

```jsx
<LiveCodeEditor example="content-fragment-loading" editorDisabled zoom=".6" />
```

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

### Update Visual Regression Screenshots

Source: https://github.com/mittwald/flow/blob/main/packages/remote-react-components/CONTRIBUTE.md

Updates all existing screenshots for visual regression tests. This should be run after making changes to components or features.

```sh
pnpm nx run remote-react-components:test:visual:update
```

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

### Update import paths for @mittwald/flow-react-components

Source: https://github.com/mittwald/flow/blob/main/packages/components/MIGRATION.md

Imports from @mittwald/flow-react-components have been streamlined. Previously, explicit subdirectory paths were required; now, components and utilities are imported directly from the package root or specific sub-packages.

```javascript
import Button from "@mittwald/flow-react-components/Button";
import { useOverlayController } from "@mittwald/flow-react-components/controller";
import Field from "@mittwald/flow-react-components/react-hook-form/Field";
import { Link } from "@mittwald/flow-react-components/react-hook-form/nextjs";
```

```javascript
import { Button } from "@mittwald/flow-react-components";
import { useOverlayController } from "@mittwald/flow-react-components";
import { Field } from "@mittwald/flow-react-components/react-hook-form";
import { Link } from "@mittwald/flow-react-components/nextjs";
```

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

### Konsistente Begriffe für Aktionen

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/index.mdx

Verwenden Sie konsistente Begriffe, die sich logisch an der jeweiligen Aktion orientieren, um Verwirrung zu vermeiden. Beispiele: 'installiert'/'deinstalliert', 'eingeladen'/'ausgeladen', 'gebucht'/'gekündigt'.

```text
Was **installiert** wird, kann **deinstalliert** werden.
Was **eingeladen** wird, kann **ausgeladen** werden.
Was **gebucht** wird, kann **gekündigt** werden.
```

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

### Aktive vs. Passive Sprache

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/index.mdx

Verwenden Sie aktive Satzkonstruktionen, um Texte dynamischer und direkter zu gestalten. Vermeiden Sie passive Formulierungen.

```text
Paula hat den Grill angeschmissen.
Der Grill wurde von Paula angeschmissen.
```

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

### Extending Acorn Parser with JSX Plugin

Source: https://github.com/mittwald/flow/blob/main/packages/components/patching/README.md

Demonstrates how to extend the base Acorn Parser class with the acorn-jsx plugin to enable parsing of JSX syntax. This is useful when you need to parse JavaScript that includes JSX elements.

```javascript
var acorn = require("acorn");
var jsx = require("acorn-jsx");
var JSXParser = acorn.Parser.extend(jsx());
JSXParser.parse("foo(<bar/>)", { ecmaVersion: 2020 });
```

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

### Extend mStudio Actions Menu with Actions Component

Source: https://github.com/mittwald/flow/blob/main/packages/mstudio-ext-react-components/README.md

Use the `<Actions>` component to add custom menu items to the mStudio header's actions menu. Define custom menu items using the `<MenuItem>` component from `@mittwald/flow-remote-react-components`. Refer to mStudio's existing pages for best practices.

```tsx
import { MenuItem } from "@mittwald/flow-remote-react-components";
import { Actions } from "@mittwald/mstudio-ext-react-components";

function MainPage() {
  return (
    <>
      <Actions>
        <MenuItem onAction={onRename}>Rename</MenuItem>
        <MenuItem onAction={onDelete}>Delete</MenuItem>
      </Actions>
      {/* your code */}
    </>
  );
}
```

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

### Run jscodeshift codemod for migration

Source: https://github.com/mittwald/flow/blob/main/packages/components/MIGRATION.md

Use the provided jscodeshift command to automatically update import statements and other code patterns for the migration to version 0.2.0.

```shell
npx jscodeshift \
  -t https://raw.githubusercontent.com/mittwald/flow/refs/heads/main/packages/codemods/src/transforms/flow020.ts \
  --parser tsx \
  src
```

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

### Section Loading State

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Implement the Section boundary to manage loading states for individual sections. This provides a visual cue during content loading.

```jsx
<LiveCodeEditor example="section-loading" editorDisabled zoom=".6" />
```

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

### Avoid Non-Remote Components in Props Context

Source: https://github.com/mittwald/flow/blob/main/packages/components/CONTRIBUTE.md

Illustrates how to avoid using non-remote components within the props context to prevent potential issues during remote component development. Ensure that only remote-compatible components are passed.

```tsx
export const Component: FC<Props> = (props) => {
  const propsContext: PropsContext = {
    // This could cause issues
    NonRemoteComponent: {
      tunnelId: "actions",
    },
    Button: {
      size: "s",
      tunnelId: "actions",
    },
  };

  return (
    <PropsContextProvider props={propsContext}>
      <TunnelProvider>
        {children}
        <div className={styles.actions}>
          <TunnelExit id="actions" />
        </div>
      </TunnelProvider>
    </PropsContextProvider>
  );
};

```

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

### Extend mStudio Breadcrumbs with Breadcrumb Component

Source: https://github.com/mittwald/flow/blob/main/packages/mstudio-ext-react-components/README.md

Use the `<Breadcrumb>` component to add custom navigation items to the mStudio header. Define custom links using the `<Link>` component from `@mittwald/flow-remote-react-components`. This is particularly useful for extensions with multiple subpages. Consult mStudio's existing pages for best practices.

```tsx
import { Link } from "@mittwald/flow-remote-react-components";
import { Breadcrumb } from "@mittwald/mstudio-ext-react-components";

function ProfilePage() {
  return (
    <>
      <Breadcrumb>
        <Link href="/profiles">Profiles</Link>
        <Link href="/profiles/5">Profile</Link>
      </Breadcrumb>
      {/* your code */}
    </>
  );
}
```

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

### Avatar Loading State

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Implement the Avatar boundary to manage loading states. This boundary provides a loading indicator while avatar data is being fetched.

```jsx
<LiveCodeEditor example="avatar-loading" editorDisabled/>
```

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

### Speicherplatzangaben in binären Einheiten

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/index.mdx

Geben Sie Speichergrößen in binären Einheiten wie KiB, MiB oder GiB an, um technische Genauigkeit zu gewährleisten und Verwirrung durch uneinheitliche Umrechnungen zu vermeiden.

```text
1 GiB = 1.073.741.824 Bytes = 1024³ Bytes.
```

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

### Update CSS import path

Source: https://github.com/mittwald/flow/blob/main/packages/components/MIGRATION.md

The main CSS export path has changed from `@mittwald/flow-react-components/styles` to `@mittwald/flow-react-components/all.css` to better reflect its content.

```diff
// main.js
- import "@mittwald/flow-react-components/styles";
+ import "@mittwald/flow-react-components/all.css";
```

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

### LayoutCard Loading State

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Implement LayoutCard to manage loading states for the outermost boundary of a page. This provides a visual indicator while content is being fetched.

```jsx
<LiveCodeEditor example="layout-card-loading" editorDisabled zoom=".6" bgColor="dark" />
```

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

### Add dataKeyLabel for Function dataKey in CartesianChart

Source: https://github.com/mittwald/flow/blob/main/packages/components/MIGRATION.md

When using a function for `dataKey` in `CartesianChart`, a `dataKeyLabel` must now be provided. If `dataKeyLabel` is a string, it will be used automatically.

```tsx
<XAxis dataKey={() => 1337} />
```

```tsx
<XAxis dataKey={() => 1337} dataKeyLabel="leet" />
```

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

### ContextMenu Error Handling

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Use the ContextMenu boundary to replace normal context menus and handle error states. This ensures that context menus display errors correctly.

```jsx
<LiveCodeEditor example="context-menu-error" editorDisabled/>
```

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

### Text Loading State

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Implement the Text boundary to manage loading states for text content. This boundary provides a loading indicator while text data is being fetched.

```jsx
<LiveCodeEditor example="text-loading" editorDisabled/>
```

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

### Modal Loading State

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Implement the Modal boundary to manage loading states. This boundary uses the loading view of the Flow Component to indicate when modal content is being fetched.

```jsx
<LiveCodeEditor example="modal-loading" editorDisabled />
```

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

### Update Package Dependencies

Source: https://github.com/mittwald/flow/blob/main/packages/remote-react-components/README.md

Remove the old Flow React components package and add the new remote version using either Yarn or pnpm.

```shell
yarn remove @mittwald/flow-react-components
yarn add @mittwald/flow-remote-react-components

pnpm remove @mittwald/flow-react-components
pnpm add @mittwald/flow-remote-react-components
```

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

### Generate Session Token

Source: https://github.com/mittwald/flow/wiki/Developing-Frontends-for-Extensions

Use getSessionToken() to generate a session token. This function must be called client-side after the <RemoteRoot> component has rendered, and not during initial rendering.

```javascript
import { getSessionToken } from "@mittwald/ext-bridge/browser";

const token = await getSessionToken();
```

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

### SectionsFragment Loading State

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Employ SectionsFragment for managing loading states within tabs. This boundary renders a fragment, showing a loading indicator when content is being fetched.

```jsx
<LiveCodeEditor example="illustrated-message-loading" editorDisabled zoom=".6" />
```

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

### ContentFragment Error Handling

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Use ContentFragment for multi-line content to handle error states. This boundary ensures that even complex content displays errors correctly.

```jsx
<LiveCodeEditor example="content-fragment-error" editorDisabled zoom=".6" />
```

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

### Update Specific Visual Regression Tests

Source: https://github.com/mittwald/flow/blob/main/packages/remote-react-components/CONTRIBUTE.md

Updates screenshots for a specific component or feature. Useful for targeted updates when only a subset of tests needs refreshing.

```sh
pnpm nx run remote-react-components:test:visual:update NewComponent
```

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

### Section Error Handling

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Use the Section boundary to replace normal sections and handle error states. This ensures that individual sections display errors gracefully.

```jsx
<LiveCodeEditor example="section-error" editorDisabled zoom=".6" />
```

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

### ChartFragment Loading State

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Implement ChartFragment for CartesianCharts to manage loading states. This boundary provides a loading indicator while chart data is being fetched.

```jsx
<LiveCodeEditor example="chart-loading" editorDisabled zoom=".6"/>
```

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

### FieldFragment Loading State

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Employ FieldFragment for form fields with post-loaded content to manage loading states. This boundary provides a loading indicator for dynamically loaded field content.

```jsx
<LiveCodeEditor example="field-fragment-loading" editorDisabled/>
```

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

### Vermeidung von Großbuchstaben und Ausrufezeichen

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/index.mdx

Vermeiden Sie die übermäßige Verwendung von Großbuchstaben und Ausrufezeichen, um eine Schreibe-Mentalität zu verhindern und die Lesbarkeit zu verbessern.

```text
KEIN! GRUND! ZU! SCHREIEN!!!
```

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

### Modal Error Handling

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Use the Modal boundary to replace normal modals and handle error states. This ensures that modal dialogs display errors appropriately.

```jsx
<LiveCodeEditor example="modal-error" editorDisabled zoom=".6" />
```

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

### Overwrite mStudio Page Title with Title Component

Source: https://github.com/mittwald/flow/blob/main/packages/mstudio-ext-react-components/README.md

Use the `<Title>` component to overwrite the page title in the mStudio header, typically for extensions with subpages. Ensure to follow best practices observed in existing mStudio pages.

```tsx
import { Title } from "@mittwald/mstudio-ext-react-components";

function DetailsPage() {
  return (
    <>
      <Title>Details</Title>
      {/* your code */}
    </>
  );
}
```

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

### Anrede: Du statt Sie

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/index.mdx

Sprechen Sie User persönlich mit 'Du' an, um eine respektvolle und kollegiale Atmosphäre zu schaffen. Großschreiben Sie 'Du' und seine Ableitungen in Mailings und Tickets.

```text
Du weißt, mittwald hat das beste Hosting für Agenturen.
Ihr wisst, mittwald hat das beste Hosting für Agenturen.
```

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

### LayoutCard Error Handling

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Use LayoutCard for the outermost boundary of a page to handle error states. This ensures the entire page's layout is managed correctly during errors.

```jsx
<LiveCodeEditor example="layout-card-error" editorDisabled zoom=".6" bgColor="dark" />
```

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

### Avatar Error Handling

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Use the Avatar boundary to handle error states for avatars. This ensures that avatar components display errors gracefully.

```jsx
<LiveCodeEditor example="avatar-error" editorDisabled/>
```

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

### FieldFragment Error Handling

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Use FieldFragment for form fields with post-loaded content to handle error states. This ensures that fields with dynamic content display errors correctly.

```jsx
<LiveCodeEditor example="text-error" editorDisabled/>
```

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

### US-amerikanisches Englisch für englische Inhalte

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/03-content-guidelines/01-sprach-guide/index.mdx

Verwenden Sie amerikanisches Englisch (US English) für englische Texte, insbesondere für Rechtschreibung, Fachbegriffe und UI-Texte, da dies der etablierte Standard in der Tech-Welt ist.

```text
color, behavior, organization
colour, behaviour, organisation
```

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

### Handle unknown type for tickFormatter in CartesianChart

Source: https://github.com/mittwald/flow/blob/main/packages/components/MIGRATION.md

The data types for `CartesianChart` have changed from `any` to `unknown`. You must now explicitly check the type within `tickFormatter` or use `typedCartesianChart` for automatic type inference.

```tsx
const data = [
  {
    amount: 1,
    time: new Date("2026-08-11"),
  }
];

<CartesianChart data={data}>
  <XAxis
    dataKey="time"
    tickFormatter={(date) =>
      // date is typeof any
      Intl.DateTimeFormat("de", {
        month: "short",
        day: "2-digit",
      }).format(date)
    }
  />
</CartesianChart>
```

```tsx
<XAxis
  dataKey="time"
  tickFormatter={(date) => {
    // date is typeof unknown
    if (date instanceof Date) {
      return Intl.DateTimeFormat("de", {
        month: "short",
        day: "2-digit",
      }).format(date);
    }
  }}
/>
```

```tsx
interface ChartData {
  amount: number;
  time: Date,
};

const data: ChartData[] = [
  {
    amount: 1,
    time: new Date("2026-08-11"),
  }
];

const ExampleChart = typedCartesianChart<ChartData>();

<ExampleChart.Chart data={data}>
  <ExampleChart.XAxis
    dataKey="time"
    tickFormatter={(date) =>
      // date is typeof Date
      Intl.DateTimeFormat("de", {
        month: "short",
        day: "2-digit",
      }).format(date)
    }
  />
</ExampleChart.Chart>
```

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

### SectionsFragment Error Handling

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Utilize SectionsFragment as the outermost boundary within tabs to manage error states. It renders a fragment, displaying error information appropriately.

```jsx
<LiveCodeEditor example="illustrated-message-error" editorDisabled zoom=".6" />
```

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

### ChartFragment Error Handling

Source: https://github.com/mittwald/flow/blob/main/apps/docs/src/content/02-foundations/04-internal/01-boundaries/index.mdx

Use ChartFragment for CartesianCharts to handle error states. This ensures that charts display errors gracefully.

```jsx
<LiveCodeEditor example="chart-error" editorDisabled zoom=".6"/>
```

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