@ryencatchers/ui

Ryencatchers design system

Getting started

in a folder by level (ex. /child)

yarn: yarn yarn dev

npm: npm install npm run dev

Admin Components

컴포넌트 별 Ticket 확인 https://www.notion.so/ryencatchers/12a4ba6c348642469183c919d9cf94e6?v=49ca56a8e26e47dab7b80aab06ee95f6

Parameters:

| Level | Component | Props | Required | Type | Description | | --------- | ---------------- | ------------- | -------- | ------------------------------ | ---------------------------------------------------------------------------- | | Child | Input | value | true | string | | | | | theme | false | "light" or "dark" | | | | | type | false | "login" or "basic" | 인풋 형식(로그인에쓰이는 인풋인지 일반 인풋인지) | | | | error | false | boolean | 인풋 상태 | | | | inputType | true | "email" | "password" | 인풋타입 | | | | info | false | boolean | basic 인풋 타이틀 옆 아이콘 on off여부 | | | | inputStyles | false | object | 인풋스타일 | | | | title | false | string | 일반인풋 타이틀 | | | | placeholder | false | string | 인풋 placeholder | | --------- | ---------------- | ------------- | -------- | ------------------------------ | ---------------------------------------------------------------------------- | --- | | Child | Input | | | | | | Child | CheckBox | | | | | | Child | Button | children | true | string or JSX.Elementren | 태그 내 string text 혹은 element 요소 | | | | theme | false | "dark" or "light" or "primary" | 버튼 색상(기본 스타일) | | | | type | false | "fill" or "outline" | 버튼 타입 | | | | size | false | "medium" or "small" | 버튼 사이즈 | | | | isDisabled | false | boolean | 이벤트 실행 가능 여부 | | | | hasCircleIcon | false | boolean | Circle 아이콘 생성 여부 | | | | iconPosition | false | "right" or "left" | Circle 아이콘 위치 | | | | outterStyles | false | object | 버튼 스타일 | | | | textStyles | false | object | 텍스트 스타일 | | | | onClick | false | function | 클릭 시 이벤트 | | Child | Dropdown | | | | | | Child | BreadCremb | | | | | | Child | RadioButton | title | Yes | string | 태그 내 string text | | | | onChange | Yes | function | 클릭 시 button check 또는 uncheck | | | | isSelected | Yes | boolean | checked(true)/unchecked(false) 지정 | | | | disabled | No | boolean | 이벤트 실행 가능 여부 | | | | color | No | string | 선택시 보이는 Button 컬러 | | | | outterStyles | No | object | 전체 스타일 | | | | textStyles | No | object | 텍스트 스타일 | | Child | Logo | | | | | | Child | NavItem | | | | | | Child | SubMenu | | | | | | Child | Topbar | | | | | | Child | ButtonGroup | | | | | | Child | WidgetTitle | | | | | | Child | Pagination | | | | | | Child | TableTitle | title | true | string or JSX.Element | | | | TableTitle | align | false | "left" or "center" or "right" | 태그 내 string title 혹은 element 요소 | | | | TableTitle | searchFunc | false | function | 요소 정렬 방식 | | | TableTitle | filterFunc | false | function | 검색 함수 | | | TableTitle | sortFunc | false | function | 필터 함수 | | | TableTitle | width | false | number | 정렬 함수 | | | TableTitle | outterStyle | false | object | 전체 스타일 | | | TableTitle | textStyle | false | object | Title 스타일 | | Child | TableItem | | | | | | Child | ListItem | | | | | | Child | SocialLogin | | | | | | Container | Sidebar | | | | | | Container | Login | | | | | | Container | RadioButtonGroup | data | Yes | string[] | Radio button 생성 data array | | | | onChange | Yes | function | 클릭 시 button check 또는 uncheck, 해당 radio button 값 상위 컴포넌트로 전달 | | | | selected | Yes | boolean | 현재 checked 아이템 |