From @class101/ui-system to Vibrant

:::caution

Migrating ui-system components to Vibrant UI is still in progress. Components and documents will continue to be updeated. Learn more here. :::

Staring with @vibrant-ui/components

The migration guide helps users use @vibrant-ui/components instead of @class101/ui-system. Each section with the component name of @class101/ui-system contains changes between libraries and instructions for smooth replacements.

// Before
import { Paper, VStack, Body } from '@class101/ui-system';

// After
import {
  Paper,
  VStack,
  Body,
} from '@vibrant-ui/components';

:::note

We update Storybook always and simultaneously!

Check out realesed Vibrant components in Vibrant Storybook.

:::

Changes

Vibrant Component Guide

Box

Default layout value of Box is Flex.

In Vibrant Ui, <Box /> uses flexbox layout system.

type BoxProps = {
  display: 'flex' | 'none';
  // ...other
};

In ui-system, <Box /> uses a different layout system depending on the platform.

import { Box } from '@class101/ui-system';

<Box display="flex" />;

// Web
<div
  style={{
    display: 'flex',
    flexGrow: 0,
    flexShrink: 1,
    flexBasis: 'auto',
    alignContent: 'stretch',
    flexDirection: 'row',
  }}
/>

// Native
<View
  style={{
    display: 'flex',
    flexGrow: 0,
    flexShrink: 0,
    flexBasis: 'auto',
    alignContent: 'flex-start',
    flexDirection: 'column',
  }}
/>;

In Vibrant Ui, all the <Box /> take flex-direction: column, align-content: stretch, flex-shrink: 1 as default layout properties.

import { Box } from '@vibrant-ui/core';

<Box />

// Web
<div
  style={{
    display: 'flex',
    flexGrow: 0,
    flexShrink: 1,
    flexBasis: 'auto',
    alignContent: 'stretch',
    flexDirection: 'column'
  }}
/>

// Native
<View
  style={{
    display: 'flex',
    flexGrow: 0,
    flexShrink: 1,
    flexBasis: 'auto',
    alignContent: 'stretch',
    flexDirection: 'column'
  }}
/>

ResponsiveStack

Use <Stack /> instead of <ResponsiveStack />.

Before

// import { ResponsiveStack } from '@class101/ui-system';

<ResponsiveStack direction={['vertical', 'horizontal']} />

After

// import { Stack } from '@vibrant-ui/components';

<Stack direction={['vertical', 'horizontal']} />

Paper

kind property is deprecated

kind property of <Paper /> is deprecated.

borderColor and backgroundColor properties are added.

Before

// import { Paper } from '@class101/ui-system';

<Paper kind="background" backgroundColor="primary" />
<Paper kind="border" borderColor="outlinePrimary" borderWidth={1} />

After

// import { Paper } from '@vibrant-ui/components'; <Paper backgroundColor="primaryContainer" width={100} height={100} borderColor="outlinePrimary" borderWidth={1} borderStyle="solid" />

// import { Paper } from '@vibrant-ui/components';

<Paper
  backgroundColor="primaryContainer"
  width={100}
  height={100}
  borderColor="outlinePrimary"
  borderWidth={1}
  borderStyle="solid"
/>

Loading...

Action

Use <Pressable /> instead of <Action />.

In ui-system, <Action /> doesn't own UI and its children components are clickable. In Vibrant, <Pressable /> own its UI and click events.

Before

// import { Action, Body } from '@class101/ui-system';

<Action onClick={() => alert('click')}>
  <Body level={3}>Pressable Text</Body>
</Action>

After

// import { Pressable, Body } from '@vibrant-ui/components'; <Pressable onClick={() => alert('click')}> <Body level={3}>Pressable Text</Body> </Pressable>

// import { Pressable, Body } from '@vibrant-ui/components';

<Pressable onClick={() => alert('click')}>
  <Body level={3}>Pressable Text</Body>
</Pressable>

Loading...

SafeAreaContent

Use <SafeAreaView /> instead of <SafeAreaContent />.

There is no change of API, but mininstes selects the minimum between the safeArea value of device and users' input value.

Before

// import { SafeAreaContent } from '@class101/ui-system';

<SafeAreaContent mode="margin" insets={['bottom', 'top']} />

After

// import { SafeAreaView } from '@vibrant-ui/components';

<SafeAreaView
  mode="margin"
  insets={['bottom', 'top']}
  minInsets={{ bottom: 32, top: 32 }}
/>

TextField

Support Dynamic Label

<TextField state="normal" label="Focus Here!" />

<TextField state="normal" label="Focus Here!" />

Loading...

When <TextField /> is focused, the animation on the label works.

prefix, suffix, renderStart, renderEnd

renderRightIcon property is deprecated. prefix, suffix, renderStart, renderEnd are added.

Before

// import { TextField } from '@class101/ui-system';

<TextField
  state="normal"
  size="md"
  renderRightIcon={() => (
    <Icon.EyeOn size={20} kind="regular" />
  )}
/>

After

// import { TextField } from '@vibrant-ui/components'; <TextField state="default" prefix="input" suffix="Won" renderEnd={() => <Icon.EyeOn.Regular size={20} />} />

// import { TextField } from '@vibrant-ui/components';

<TextField
  state="default"
  prefix="input"
  suffix="Won"
  renderEnd={() => <Icon.EyeOn.Regular size={20} />}
/>

Loading...

Icon

Remove type prop

type property is deprecated. Use seperate Icon component such as <Icon.Play.Regular />.

Before

// import { Icon } from '@class101/ui-system';

<Icon.Play type="regular" size={20} />

After

// import { Icon } from '@vibrant-ui/icons'; <Icon.Play.Regular size={20} />

// import { Icon } from '@vibrant-ui/icons';

<Icon.Play.Regular size={20} />

Loading...

Stack, VStack, HStack

Default values of Stack, VStack, HStack

Default values of <Stack />, <VStack />, <HStack /> are same with @class101/ui-system.

justifyContent property aligned with main axis has start as default.

alignItems property aligned with cross axis is stretch as default.

props	Default Value
justifyContent	start
alignItems	stretch

alignment is deprecated

In the ui-system, alignment is quite confusing property.

It transformed as justifyContent in <VStack />, while it transformed as alignmendItems in <HStack />.

Vibrant UI fixes this inconsistency, and introduces alignVertical and alignHorizontal.

These properties are transformed with the consideration of stack's flex direction.

Therefore, alignVertical and alignHorizontal represent aligmnent in absolute column and row.

Check out the below summary.

Case of <VStack />

props	matching property in VStack
alignVertical	justifyContent
alignHorizontal	alignItems

Case of <HStack />

props	matching property in HStack
alignVertical	alignItems
alignHorizontal	justifyContent

Before

// import { VStack, HStack  } from '@class101/ui-system';
<Vstack alignment="center" />
<HStack alignment="center" />

After

// import { VStack } from '@vibrant-ui/components'; <VStack height={300} alignVertical="center"> <Box height={50} minWidth={50} backgroundColor="onView1" /> <Box height={50} minWidth={50} backgroundColor="onView2" /> <Box height={50} minWidth={50} backgroundColor="onView3" /> </VStack>

// import { VStack } from '@vibrant-ui/components';
<VStack height={300} alignVertical="center">
  <Box
    height={50}
    minWidth={50}
    backgroundColor="onView1"
  />
  <Box
    height={50}
    minWidth={50}
    backgroundColor="onView2"
  />
  <Box
    height={50}
    minWidth={50}
    backgroundColor="onView3"
  />
</VStack>

Loading...

// import { HStack } from '@vibrant-ui/components'; <HStack alignVertical="center"> <Box minHeight={50} width={50} backgroundColor="onView1" /> <Box minHeight={50} width={50} backgroundColor="onView2" /> <Box minHeight={50} width={50} backgroundColor="onView3" /> </HStack>

// import { HStack } from '@vibrant-ui/components';
<HStack alignVertical="center">
  <Box
    minHeight={50}
    width={50}
    backgroundColor="onView1"
  />
  <Box
    minHeight={50}
    width={50}
    backgroundColor="onView2"
  />
  <Box
    minHeight={50}
    width={50}
    backgroundColor="onView3"
  />
</HStack>

Loading...