@class101/ui-system 에서 Vibrant 로

:::caution

아직 ui-system에 있는 모든 컴포넌트가 vibrant-ui로 옮겨지지 않았습니다.

새로운 컴포넌트는 계속 추가되고 있으며 해당 문서도 업데이트될 예정입니다. 자세한 변경사항은 여기를 참고해주세요.

:::

`@vibrant-ui/components` 를 사용하기

이제 @class101/ui-system 대신 @vibrant-ui/components 에서 컴포넌트를 불러와서 새로운 Vibrant 컴포넌트를 사용하는 것을 돕는 문서입니다.

기존 @class101/ui-system 에서 사용하고 있던 컴포넌트 이름을 선택하면 해당 페이지에서 기존 컴포넌트와 대응되어 사용할 수 있는 @vibrant-ui/components 를 안내하고 변경점 및 사용법을 안내합니다.

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

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

:::note

현재 @vibrant-ui/components에 추가된 컴포넌트는 Vibrant Storybook에서 확인할 수 있습니다.

:::

주요 변경점

Vibrant 컴포넌트 사용 가이드

Box

Box 의 기본 레이아웃 값은 flex 입니다.

이제 모든 Box 컴포넌트는 flex 레이아웃으로 동작됩니다.

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

기존 ui-system의 Box 컴포넌트는 플랫폼에 따라 스타일이 다르게 적용되었습니다

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',
  }}
/>;

이제 모든 Box 컴포넌트는 flex-direction: column, align-content: stretch, flex-shrink: 1로 동작됩니다.

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

<ResponsiveStack /> 컴포넌트가 제거되고 <Stack /> 컴포넌트가 추가되었습니다.

Before

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

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

After

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

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

Paper

기존 `kind` 속성 삭제

kind 속성이 제거되고 borderColor 속성과 backgroundColor 속성을 동시에 사용할 수 있습니다.

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

Action

<Action /> 컴포넌트가 제거되고 <Pressable /> 컴포넌트가 추가되었습니다.

기존 Action 컴포넌트는 자체적으로 UI를 가지지 않고 자식 컴포넌트를 클릭가능하게 수정했지만, Pressable 컴포넌트는 자체적으로 UI를 갖고 클릭이벤트를 가집니다.

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>

SafeAreaContent

<SafeAreaContent /> 컴포넌트가 제거되고 <SafeAreaView /> 컴포넌트가 추가되었습니다.

기존 API의 변화는 없지만, minInsets를 통해 디바이스 safeArea 값이 minInsets보다 작을 때 minInsets에 적용된 값이 나오도록 수정되었습니다.

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

Dynamic Label 지원

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

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

입력창이 포커스 되었을 때 label이 애니메이션으로 동작됩니다.

prefix, suffix, renderStart, renderEnd

기존에 있던 renderRightIcon prop이 제거되고 prefix, suffix, renderStart, renderEnd가 추가되었습니다

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="입력"
  suffix="원"
  renderEnd={() => <Icon.EyeOn.Regular size={20} />}
/>

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

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

Icon

Remove `type` prop

Icon 컴포넌트에 type 속성이 제거되고 <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} />

Stack, VStack, HStack

Stack, VStack, HStack 의 초기값

Stack, VStack, HStack 의 초기값은 @class101/ui-system 과 동일하게 설정되어 있습니다. 즉, justifyContent 의 기본값은 start 로, alignItems 의 기본값은 stretch 로 설정되어 있습니다. Stack direction 에 따라 주축 방향의 start 에 정렬되고, 교차축 방향으로 stretch 되는 상태가 기본입니다.

props	기본값
justifyContent	start
alignItems	stretch

기존 `alignment` 속성 삭제

기존에는 alignment 가 VStack 에서는 justifyContent 속성으로, HStack 에서는 alignmentItems 로 변환이 되고 있엇습니다. 이를 개선하여 alignment 속성을 제거하고 alignVertical alignHorizontal 속성을 추가했습니다. 이 두 속성은, <Stack /> 의 direction 과 무관하게 가로축, 세로축 기준으로의 정렬을 반영합니다. 즉 아래와 같이 적용됩니다.

<VStack /> 의 경우

컴포넌트 입력 속성	대응되는 정렬 속성
alignVertical	justifyContent
alignHorizontal	alignItems

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

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

@class101/ui-system 에서 Vibrant 로

@vibrant-ui/components 를 사용하기​

주요 변경점​

Vibrant 컴포넌트 사용 가이드​

Box​

Box 의 기본 레이아웃 값은 flex 입니다.​

ResponsiveStack​

Paper​

기존 kind 속성 삭제​

Action​

SafeAreaContent​

TextField​

Dynamic Label 지원​

prefix, suffix, renderStart, renderEnd​

Icon​

Remove type prop​

Stack, VStack, HStack​

Stack, VStack, HStack 의 초기값​

기존 alignment 속성 삭제​

`@vibrant-ui/components` 를 사용하기

주요 변경점

Vibrant 컴포넌트 사용 가이드

Box

Box 의 기본 레이아웃 값은 flex 입니다.

ResponsiveStack

Paper

기존 `kind` 속성 삭제

Action

SafeAreaContent

TextField

Dynamic Label 지원

prefix, suffix, renderStart, renderEnd

Icon

Remove `type` prop

Stack, VStack, HStack

Stack, VStack, HStack 의 초기값

기존 `alignment` 속성 삭제