Skip to main content
🏠Getting StartedUpgrading to Quantum v2.0.0Version: 2.0.0-beta.7

Upgrading to Quantum v2.0.0

Overview

This section provides a detailed guide for migrating your project from Quantum Design System v1 to v2. The primary change in this migration involves moving from Stencil-based React components to native React components, along with the removal of the "Qtm" prefix from component names in the @qtm/react2 library.

Key Change in v2

Native React Support and Component Renaming

  • @qtm/react2: Introduced a new library of native React components. This is separate from the original @qtm/react which is implemented with Stencil. The decision to remove Stencil for the React package was due to numerous issues with DOM manipulation, especially with dynamic changes.
  • Component Renaming: The "Qtm" prefix has been removed from component names in the @qtm/react2 library. For example, QtmButton is now Button. To facilitate the migration, you can use aliasing like import { Button as QtmButton } from '@qtm/react2.
  • No More Web-Components Dependency: The @qtm/react2 package no longer has dependencies on web-components.
info

Start using Quantum @qtm/react2 Storybook implementation, offering fully React-based components library.

Migration Steps

Step 1: Update Dependencies

Update your project's dependencies to the latest versions of Quantum Design System packages. Modify your package.json to reflect the new package names and versions.

Before:

"dependencies": {
"@qtm/react": "^1.0.0",
"@qtm/web-components": "^1.0.0",
"@qtm/tailwind-preset": "^1.0.0",
"@qtm/tokens": "^1.0.0",
// other dependencies
}

After:

"dependencies": {
"@qtm/react2": "^2.0.0-beta.0",
"@qtm/tailwind-preset": "^2.0.0-beta.0",
"@qtm/tokens": "^2.0.0-beta.0",
// other dependencies
}

Run the following command to update your dependencies:

npm install

Step 2: Refactor Component Imports

Refactor your component imports to use the new @qtm/react2 package for native React components and update the component names.

Before:

import { QtmButton } from '@qtm/react';

After:

import { Button as QtmButton } from '@qtm/react2';

Alternatively, you can directly use the new component names without aliasing:

import { Button } from '@qtm/react2';

function App() {
return <Button>Submit</Button>;
}

export default App;

Step 3: Update CSS

Ensure your CSS references are updated to include the necessary styles from the new @qtm/react2 package.

Before:

@import '@qtm/web-components/dist/web-components/web-components.css';

After:

@import '@qtm/react2/dist/style.css';

Step 4: Adjust for API Changes

Review the component API changes and adjust your code accordingly. This might include updating props, event handlers, and other component-specific configurations.

Step 5: Test Your Application

Thoroughly test your application to ensure all components are rendering correctly and there are no regressions. Pay special attention to styles, functionality, and performance.

Contributions and Issues

If you encounter any issues during the migration process, please open an issue or submit a pull request with your suggested changes. For contribution guidelines, consult this documentation.