0.1.104 • Published 2 months ago

@lotte-innovate/ui-component-test v0.1.104

Weekly downloads
-
License
-
Repository
-
Last release
2 months ago

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 컴포넌트Header, Text
기본 컴포넌트Avatar, Badge, Button, IconButton, Label
입력 컴포넌트DatePicker, Editor, Slider, TextArea, TextField
선택 컴포넌트Checkbox, CheckboxCards, CheckboxGroup, Radio, RadioCards, RadioGroup, Select, Toggle, ToggleGroup, ToggleSwitch
네비게이션 컴포넌트Breadcrumb, GNB, Menubar, NavigationMenu, SNB, Tab Nav, Tabs
레이아웃 컴포넌트AspectRatio, Card, Footer, Grid, Inset, ScrollArea, Separator, Table
구분종류
비교 차트Bar, Line
구성 차트Pie, Doughnut
분포 차트Bubble
관계 차트Radar
namedescription단계option테마적용여부
Color27가지 색상을 라이트/다크/알파/알파다크 모드 제공1~12단계blue, crimson, teal, orange, purple, amber...O
Radius컴포넌트의 둥글기 적용5단계none, small, medium, large, fullO
Scaling컴포넌트의 비율5단계90%, 95%, 100%, 105%, 110%O
Weight컴포넌트의 텍스트 굵기4단계regular, medium, semibold, boldO
Appearance컴포넌트의 디자인 스타일6단계classic, ghost, outline, soft, solid, surfaceX
Size컴포넌트의 크기5단계x-small, small, medium, large, x-largeX

Theme

각 컴포넌트들은 공통 Props를 개별적으로 적용할 수도 있고, 테마를 통해 컴포넌트의 스타일을 한번에 변경할 수도 있습니다.

L-UI는 테마 컨텍스트를 제공하여 Color, Radius, Scaling, Weight 를 모든 컴포넌트에 동일한 스타일을 지정할 수 있습니다..

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

Next.js와 같은 프레임워크를 사용하는 프로젝트에서 사용 예시

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(
  <LuiThemeProvider>
    <App />
  </LuiThemeProvider>,
);

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

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

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

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

  // 초기 값 설정 시
  theme.themeRadius: 'none';
  theme.themeColor: 'olive';
  theme.themeScaling: '90%';
  theme.themeWeight: 'regular';

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

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

테마가 적용되었지만 일부 컴포넌트는 스타일을 다르게 하고 싶은 경우, 각 컴포넌트에 직접 Props를 전달하여 스타일을 재정의할 수 있습니다.

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

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

  theme.themeRadius: 'full';
  theme.themeColor: 'blue';

  return (
    <div>
      <Button>테마 적용 버튼</Button>
      <Button radius="none" color="crimson">테마 미적용 버튼</Button>
    </div>
  );
};

License

@lotte-innovate

@babel/runtime@babel/runtime-corejs3@radix-ui/colors@radix-ui/react-accordion@radix-ui/react-checkbox@radix-ui/react-dialog@radix-ui/react-dropdown-menu@radix-ui/react-hover-card@radix-ui/react-icons@radix-ui/react-label@radix-ui/react-menubar@radix-ui/react-navigation-menu@radix-ui/react-popover@radix-ui/react-radio-group@radix-ui/react-select@radix-ui/react-separator@radix-ui/react-slider@radix-ui/react-switch@radix-ui/react-tabs@radix-ui/react-toast@radix-ui/react-tooltip@radix-ui/themes@stitches/core@stitches/react@storybook/addon-a11y@storybook/manager-api@tanstack/react-table@tinymce/tinymce-reactchart.jschartjs-plugin-datalabelsclass-variance-authorityclsxcross-envdotenvmarkednextreactreact-chartjs-2react-domreact-tabsrollup-plugin-peer-deps-externalrollup-plugin-postcssrollup-plugin-preserve-directivesstorybook-addon-deep-controlsstorybook-dark-modetailwind-mergetinymce
0.1.103

2 months ago

0.1.102

2 months ago

0.1.104

2 months ago

0.1.101

2 months ago

0.1.100

2 months ago

0.1.69-beta.9

2 months ago

0.1.69-beta.8

2 months ago

0.1.69-beta.7

2 months ago

0.1.69-beta.6

2 months ago

0.1.69-beta.5

2 months ago

0.1.69-beta.4

2 months ago

0.1.69-beta.3

2 months ago

0.1.69-beta.2

2 months ago

0.1.69-beta.1

2 months ago

0.1.69-beta.0

2 months ago

0.1.69-beta.10

2 months ago

0.1.97

2 months ago

0.1.98

2 months ago

0.1.99

2 months ago

0.1.76

2 months ago

0.1.77

2 months ago

0.1.78

2 months ago

0.1.79

2 months ago

0.1.67

2 months ago

0.1.68

2 months ago

0.1.69

2 months ago

0.0.84

2 months ago

0.0.85

2 months ago

0.0.86

2 months ago

0.0.87

2 months ago

0.0.88

2 months ago

0.0.89

2 months ago

0.1.57

2 months ago

0.1.58

2 months ago

0.1.59

2 months ago

0.0.80

2 months ago

0.0.81

2 months ago

0.0.82

2 months ago

0.0.83

2 months ago

0.0.73

2 months ago

0.0.74

2 months ago

0.0.77

2 months ago

0.0.78

2 months ago

0.0.79

2 months ago

0.0.70

2 months ago

0.0.71

2 months ago

0.0.72

2 months ago

0.0.63

2 months ago

0.0.64

2 months ago

0.0.65

2 months ago

0.0.66

2 months ago

0.0.67

2 months ago

0.0.68

2 months ago

0.0.69

2 months ago

0.1.96

2 months ago

0.1.94

2 months ago

0.1.95

2 months ago

0.1.63

2 months ago

0.1.64

2 months ago

0.1.65

2 months ago

0.1.66

2 months ago

0.1.60

2 months ago

0.1.61

2 months ago

0.1.62

2 months ago

0.1.55

2 months ago

0.1.56

2 months ago

0.0.61

2 months ago

0.1.90

2 months ago

0.1.91

2 months ago

0.1.92

2 months ago

0.1.93

2 months ago

0.1.52

2 months ago

0.1.53

2 months ago

0.1.54

2 months ago

0.1.50

2 months ago

0.1.51

2 months ago

0.1.49

2 months ago

0.1.43

2 months ago

0.1.44

2 months ago

0.1.45

2 months ago

0.1.46

2 months ago

0.1.47

2 months ago

0.1.48

2 months ago

0.0.60

2 months ago

0.0.59

2 months ago

0.0.51

2 months ago

0.0.52

2 months ago

0.0.53

2 months ago

0.0.54

2 months ago

0.0.55

2 months ago

0.0.58

2 months ago

0.0.50

2 months ago

0.0.49

2 months ago

0.0.40

2 months ago

0.0.41

2 months ago

0.0.42

2 months ago

0.0.43

2 months ago

0.0.44

2 months ago

0.0.45

2 months ago

0.0.47

2 months ago

0.1.85

2 months ago

0.1.86

2 months ago

0.1.87

2 months ago

0.1.89

2 months ago

0.1.80

2 months ago

0.1.81

2 months ago

0.1.82

2 months ago

0.1.83

2 months ago

0.1.84

2 months ago

0.1.74

2 months ago

0.1.75

2 months ago

0.1.70

2 months ago

0.1.71

2 months ago

0.1.72

2 months ago

0.1.73

2 months ago

0.1.41

2 months ago

0.1.42

2 months ago

0.1.40

2 months ago

0.1.38

2 months ago

0.1.39

2 months ago

0.1.35

2 months ago

0.1.36

2 months ago

0.1.37

2 months ago

0.1.34

3 months ago

0.1.31

3 months ago

0.1.32

3 months ago

0.1.33

3 months ago

0.1.30

3 months ago

0.1.27

3 months ago

0.1.28

3 months ago

0.1.29

3 months ago

0.1.20

3 months ago

0.1.21

3 months ago

0.1.22

3 months ago

0.1.23

3 months ago

0.1.24

3 months ago

0.1.25

3 months ago

0.1.26

3 months ago

0.1.19

3 months ago

0.1.17

3 months ago

0.1.18

3 months ago

0.1.10

4 months ago

0.1.11

4 months ago

0.1.12

4 months ago

0.1.13

4 months ago

0.1.14

4 months ago

0.1.15

4 months ago

0.0.37

4 months ago

0.0.31

4 months ago

0.0.32

4 months ago

0.0.33

4 months ago

0.0.34

4 months ago

0.0.36

4 months ago

0.1.0

4 months ago

0.1.2

4 months ago

0.1.1

4 months ago

0.1.8

4 months ago

0.1.7

4 months ago

0.1.9

4 months ago

0.1.4

4 months ago

0.1.3

4 months ago

0.1.6

4 months ago

0.1.5

4 months ago

0.2.1

4 months ago

0.2.0

4 months ago

0.1.16

4 months ago

0.2.2

4 months ago

0.0.20

4 months ago

0.0.21

4 months ago

0.0.22

4 months ago

0.0.24

4 months ago

0.0.25

4 months ago

0.0.15

4 months ago

0.0.16

4 months ago

0.0.17

4 months ago

0.0.18

4 months ago

0.0.19

4 months ago

0.0.30

4 months ago

0.0.14

4 months ago

0.0.26

4 months ago

0.0.27

4 months ago

0.0.29

4 months ago

0.0.10

4 months ago

0.0.11

4 months ago

0.0.12

4 months ago

0.0.13

4 months ago

0.0.1

4 months ago

0.0.3

4 months ago

0.0.2

4 months ago

0.0.9

4 months ago

0.0.8

4 months ago

0.0.5

4 months ago

0.0.4

4 months ago

0.0.7

4 months ago

0.0.6

4 months ago

0.0.0

4 months ago