Migrate to twenty-ui about twenty HOT 1 OPEN

Migration Steps

1. Identify Components to Migrate

   • Review components in /packages/twenty-front/src and /packages/twenty-website/src.
   • List components that have equivalents in twenty-ui.

2. Update Imports

   • Replace existing component imports with twenty-ui components.

   // Example: Replace Button component
   import { Button } from 'twenty-ui';

3. Adjust Component Usage

   • Modify component usage to match twenty-ui API.

   // Example: Update Button usage
   <Button variant="primary" onClick={handleClick}>Click Me</Button>

4. Update Styles

   • Ensure styles are consistent with twenty-ui theme.
   • Remove redundant CSS or Emotion styles.

5. Test Components

   • Verify functionality and appearance of updated components.
   • Use Storybook stories in twenty-ui for reference.

6. Repeat for All Components

   • Continue the process for each component identified in step 1.

Relevant Files

• twenty-ui components: /packages/twenty-ui/src/components
• twenty-front components: /packages/twenty-front/src
• twenty-website components: /packages/twenty-website/src

Example Migration

• File: /packages/twenty-front/src/components/OldButton.tsx
• Before:

  import React from 'react';
  import './OldButton.css';
  
  const OldButton = ({ onClick, children }) => (
    <button className="old-button" onClick={onClick}>{children}</button>
  );
  
  export default OldButton;

• After:

  import React from 'react';
  import { Button } from 'twenty-ui';
  
  const NewButton = ({ onClick, children }) => (
    <Button variant="primary" onClick={onClick}>{children}</Button>
  );
  
  export default NewButton;

References

/packages/twenty-ui
/packages/twenty-front/src
/packages/twenty-website/src

Ask Greptile

from twenty.