Skip to content

MIGRATION.md

Latest commit

 

History

History
182 lines (139 loc) · 4.37 KB

MIGRATION.md

File metadata and controls

182 lines (139 loc) · 4.37 KB

Migrations

From version 0.2.0-alpha.779 to >=0.2.0-alpha.780

CartesianChart

If you're using a Function in the dataKey - you need to define a dataKeyLabel as well.

The dataKeyLabel is required to identify the RowData in the formatter functions. If a string is used - this will automatically be used as the dataKeyLabel.

Before:

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

Now:

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

The Data Types from the CartesianChart have changed from any to unknown.

Before (With type any):

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>

Now: now you need to check the type explicit e.g.

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

or use the new typedCartesianChart which infers the type automatically

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>

From version 0.1.0 to version 0.2.0

With the latest update to @mittwald/flow-react-components, the way package exports are handled has changed. You no longer need to specify subdirectories explicitly when importing components and utilities. Instead, imports are now structured in a more streamlined way.

Changes in Imports

Previously, you had to import components and utilities from specific subdirectories, like this:

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";

With the new package structure, the same imports should be rewritten as follows:

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";

tsconfig.json

Set "module": "esnext" in your tsconfig.json, if you have trouble with missing module exports.

Migration Steps

Use Codemod

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

Replace src with your sources folder. If you do not use TypeScript in your project, use --parser jsx.

See the docs of jscodeshift

Do it manually

  1. Update all import statements in your project according to the new structure.
  2. Remove unnecessary subdirectory paths from imports.
  3. Verify your application still compiles and runs correctly.
  4. Run your test suite to ensure no regressions were introduced by the migration.

Benefits of This Change

  • Simplified import statements with a clearer structure.
  • Better maintainability as package updates no longer require path modifications.
  • Improved autocompletion support in modern IDEs.

From version 0.1.0-alpha.291 to 0.1.0-alpha.292

Renamed CSS export

The CSS export @mittwald/flow-react-components/styles has renamed to the more precise name @mittwald/flow-react-components/all.css, because the file contains the CSS of all components, and now there are CSS exports per component as well. A documentation on how to use them is planned.

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