0.1.7 • Published 5 months ago

minus-ui v0.1.7

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

minus-ui

minus-ui는 모던한 UI 개발을 위한 모노레포 라이브러리입니다. 컴포넌트, 스타일, 타입을 모듈화하여 제공하며, 필요에 따라 개별적으로 혹은 통합적으로 사용할 수 있습니다.

Headless를 지향하기 위하여 @minus-ui/styles를 따로 분리하였으며, headless를 원하지 않는 사용자를 위해 @minus-ui/core를 추가하였습니다.

📁 directory 구조

minus-ui/
│── packages/
│   ├── component/          # @minus-ui/component (UI Components)
│   │   ├── src/
│   │   │   ├── snackbar/
│   │   │   ├── tooltip/
│   │   │   ├── index.ts    # components entry
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   ├── vite.config.ts
│   │
│   ├── styles/             # @minus-ui/styles (CSS, 디자인 관련)
│   │   ├── src/
│   │   │   ├── snackbar.css
│   │   │   ├── tooltip.css
│   │   │   ├── index.ts    # styles entry (각 CSS를 export)
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   ├── vite.config.ts
│   │
│   ├── type/               # @minus-ui/type (TypeScript 타입)
│   │   ├── src/
│   │   │   ├── snackbarType.ts
│   │   │   ├── tooltipType.ts
│   │   │   ├── index.ts    # types entry
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   ├── vite.config.ts
│   │
│   ├── core/               # @minus-ui/core (모든 것을 한 번에 import)
│   │   ├── src/
│   │   │   ├── index.ts    # core entry (component, styles, type을 한 번에 export)
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   ├── vite.config.ts
│
│── package.json            # workspace 설정
│── pnpm-workspace.yaml     # pnpm workspace 관리
│── tsconfig.base.json      # 공통 TypeScript 설정

📦 패키지 구성

minus-ui는 다음과 같은 4개의 워크스페이스를 포함합니다.

1. @minus-ui/components

👉components readme 보러가기

  • 다양한 UI 컴포넌트 모음입니다.
  • React 기반으로 개발되었으며, 재사용 가능한 디자인 시스템을 제공합니다.

2. @minus-ui/styles

👉styles readme 보러가기

  • CSS 스타일 파일 모음입니다.
  • @minus-ui/components와 함께 사용할 수 있도록 디자인되었습니다.
  • 개별적으로 스타일 시스템을 적용하고 싶은 경우 사용 가능합니다.

3. @minus-ui/types

👉types readme 보러가기

  • TypeScript에서 활용할 수 있는 타입 정의 모음입니다.
  • @minus-ui/components@minus-ui/core에서 사용됩니다.

4. @minus-ui/core

👉core readme 보러가기

  • @minus-ui/components, @minus-ui/styles, @minus-ui/types를 하나로 묶은 패키지입니다.
  • 개별적으로 패키지를 설치할 필요 없이 한 번에 모든 기능을 사용하고 싶은 경우 사용하면 됩니다.

📥 설치 방법

필요한 패키지만 설치하거나, @minus-ui/core를 사용하여 한 번에 설치할 수 있습니다.

개별 패키지 설치

pnpm add @minus-ui/components
pnpm add @minus-ui/styles
pnpm add @minus-ui/types

전체 패키지 설치 (core 사용)

pnpm add @minus-ui/core

🚀 사용 방법

@minus-ui/components 사용 예제

자세한 사용방법은 각 package에 기재재

import { Tooltip } from "@minus-ui/components";

function App() {
  return <Tooltip/>;
}

@minus-ui/core 사용 예제

import { Tooltip } from "@minus-ui/core";
import "@minus-ui/core/Tooltip.css";

function App() {
  return <Tooltip/>;
}

🛠️ 개발 및 기여

이 프로젝트는 모노레포 형식으로 구성되어 있으며, pnpm을 사용하여 관리됩니다.

프로젝트 설정

git clone https://github.com/your-username/minus-ui.git
cd minus-ui
pnpm install

실행 및 빌드

pnpm build  # 모든 패키지 빌드
pnpm dev    # 개발 모드 실행

📜 라이선스

이 프로젝트는 MIT 라이선스를 따릅니다.

0.1.7

5 months ago

0.1.6

5 months ago

0.1.5

5 months ago

0.1.4

5 months ago

0.1.3

5 months ago

0.1.2

5 months ago

0.1.1

5 months ago

0.0.6

5 months ago

0.0.5

5 months ago

0.0.4

5 months ago

0.0.3

5 months ago

0.0.2

5 months ago

0.0.1

5 months ago