opsramp-desing-system

Problematic

opsramp-design-system

Builds and depends on outdated version of libraries and NodeJS

As a Result

  • Building complexity
  • Local running and debugging complexity
  • Blocking upgrades for Micro Frontends
  • Developer fatigue
  • Code duplication across Micro Frontends

Solution

Update!

Step 1

Create new Storybook v8 project

  • React
  • TypeScript
  • ESLint
  • Tailwind
  • runs on Vite
  • Jest → Vitest
  • v16 branch name in gitlab

Step 2

Create opsramp-design-system-legacy project

  • Same as original opsramp-design-system
  • Kept in sync with opsramp-design-system
  • v15-legacy branch in gitlab

Step 3

Depend opsramp-design-system on opsramp-design-system-legacy

Step 4

Gradually migrate components

  • Fix component code
  • Fix typings of components
  • Fix dependencies
  • Fix storybook
  • Fix tests

Step 5

export { ThemeProvider, useTheme } from './context/theme';
export { lightTheme, darkTheme } from './context/theme/sets';


// components that has been migrated to new version
export { Button, type ButtonProps } from './components/buttons/Button/Button';
export { IconButton } from './components/buttons/IconButton/IconButton';
export { StackButton } from './components/buttons/StackButton/StackButton';
export { Toggle } from './components/Toggle/Toggle';


// re-exported components from opsramp-desing-system-legacy
export { Avatar } from 'opsramp-design-system-legacy';
export { Checkbox, CheckboxButton, CheckboxGroup } from 'opsramp-design-system-legacy';

So imports in Micro Frontends are not changed

import { Button, Avatar } form 'opsramp-desing-system';

No impact on a daily work! 🥳

Next Steps

  • Migrate all components
  • Remove dependency on opsramp-desing-system-legacy
  • Introduce performance improvements
  • Try to eliminate heavy dependencies
  • Combine with gromet

Thank You

deck

By Viktor Shevchenko

Made with Slides.com

deck

  • 34

More from Viktor Shevchenko