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