@lotte-innovate/lui NPM

LOTTE UI COMPONENT LIBRARY

Introduction

모든 L-UI 구성 요소를 내보내는 단일 패키지입니다.

일관되고 통일된 컴포넌트를 제공하며 사용자 정의 및 재사용 가능합니다.

이 라이브러리는 React로 구축된 프로젝트를 지원합니다.

Installation

패키지를 설치하기 위해 아래 명령어를 사용합니다.

  npm i @lotte-innovate/lui

  yarn add @lotte-innovate/lui

Setup

패키지를 설치한 후 css 스타일을 프로젝트로 가져옵니다.

프로젝트 App 진입 파일에 다음 줄을 추가해줍니다.

  import '@lotte-innovate/lui/dist/globals.css';

Usage

React 프로젝트에서 컴포넌트를 사용하는 방법에 대한 예시입니다.

import React from 'react';
import { Button } from '@lotte-innovate/lui';

const App = () => {
  return (
    <div>
      <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
    </div>
  );
};

export default App;

컴포넌트에서 아이콘을 사용하려면, 다음과 같은 방법으로 아이콘을 가져올 수 있습니다.

import React from 'react';
import { IconButton } from '@lotte-innovate/lui';
import { MagnifyingGlassIcon } from '@radix-ui/react-icons';

const App = () => {
  return (
    <div>
      <IconButton>
        <MagnifyingGlassIcon />
      </IconButton>
    </div>
  );
};

export default App;

Components

구분	종류
Typography 컴포넌트	Text, Header
기본 컴포넌트	Avatar, Badge, Button, Icon Button, Label
입력 컴포넌트	Checkbox, Checkbox Group, Checkbox Cards, Radio, Radio Group, Radio Cards, Select, Slider, Switch, Text Area, Text Field, Toggle, Toggle Group
네비게이션 컴포넌트	Menubar, Navigation Menu, Tabs, Tab Nav
레이아웃 컴포넌트	Aspeact Ratio, Card, Inset, Scroll Area, Separator, Table
피드백 컴포넌트	Alert Dialog, Dialog, Hover Card, Popover, Toast, Tooltip
로딩 컴포넌트	Progress, Skeleton, Spinner,
메뉴 및 선택 컴포넌트	Context Menu, Dropdown Menu, Segmented Control
기타 컴포넌트	Accordian, Callout

구분	종류
비교 차트	Bar, Line
구성 차트	Pie, Doughnut
분포 차트	Bubble
관계 차트	Radar

name	description	단계	option
Color	27가지 색상을 라이트/다크/알파/알파다크 모드 제공	1~12단계	blue, crimson, teal, orange, purple, amber...
Radius	컴포넌트의 둥글기 적용	5단계	none, small, medium, large, full
Scaling	컴포넌트의 비율	5단계	90%, 95%, 100%, 105%, 110%
Weight	컴포넌트의 텍스트 굵기	4단계	regular, medium, semibold, bold
Appearance	컴포넌트의 디자인 스타일	6단계	classic, ghost, outline, soft, solid, surface
Size	컴포넌트의 크기	5단계	x-small, small, medium, large, x-large

Theme

L-UI는 테마 컨텍스트를 제공하여 배포된 컴포넌트들에 대해 다양한 테마를 적용할 수 있게 합니다.

Color, Radius, Scaling, Weight 를 한번에 적용할 수 있습니다.

먼저 App 최상단에 LuiThemeProvider를 추가하여 테마 컨텍스트를 제공합니다.

import { LuiThemeProvider } from '@lotte-innovate/lui';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="bg-white">
      <body>
        <LuiThemeProvider>{children}</LuiThemeProvider>
      </body>
    </html>
  );
}

import { LuiThemeProvider } from '@lotte-innovate/lui';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <LuiThemeProvider>
      <App />
    </LuiThemeProvider>
  </React.StrictMode>,
);

테마를 변경하려면 useTheme훅을 사용합니다.

useTheme훅은 현재 테마와 테마를 업데이트할 수 있는 함수를 제공합니다.

import { useTheme, Button } from '@lotte-innovate/lui';

const ThemeChanger = () => {
  const { theme, updateTheme } = useTheme();

  // 초기 값 설정 시
  theme.themeRadius: 'none' | 'small' | 'medium' | 'large' | 'full';
  theme.themeColor: 'olive' | 'sand' | 'tomato' | 'red' | 'ruby' | 'crimson' | 'pink' | 'plum' 등 ..,
  theme.themeScaling: '90%' | '95%' | '100%' | '105%' | '110%';
  theme.themeWeight: 'regular' | 'medium' | 'semibold' | 'bold';

  // 테마 변경 시
  updateTheme({ themeRadius: "full", themeColor: "amber", themeScaling: "110%" });

  return (
    <div>
      <Button>버튼</Button>
    </div>
  );
};