@bwg/ui

Vite로 만든 React UI 라이브러리입니다.

설치

npm install @bwg/ui

사용법

전체 import (모든 기능)

import { BwgButton, BwgGrid, formatDate } from "@bwg/ui";

카테고리별 import

Components (Common 컴포넌트들)

import { BwgGrid, BwgButtonGroup, BwgTable } from "@bwg/ui/components";

Core (Core 컴포넌트들)

import { BwgButton, BwgInput, BwgForm } from "@bwg/ui/core";

Utils (유틸리티 함수들)

import { formatDate, validateEmail, realFormat } from "@bwg/ui/utils";

Stores (상태 관리)

import { useCodeStore, useMenuDataStore } from "@bwg/ui/stores";

Provider (컨텍스트 프로바이더)

import { CommonCodeProvider, UtilsProvider } from "@bwg/ui/provider";

Styles (스타일 파일들)

// CSS 파일 직접 import
import "@bwg/ui/styles/main.css";

// 이미지 파일 참조
import iconUrl from "@bwg/ui/styles/assets/images/icon.png";

Public (퍼블릭 파일들)

// 퍼블릭 폴더의 파일들 참조
import config from "@bwg/ui/public/config.json";

빌드

npm run build

정리

# dist 폴더만 정리
npm run clean

# 빌드 전 자동으로 dist 폴더 정리 후 빌드
npm run build

개발

npm run dev

패키징

npm run pack

패키징된 파일은 libs/ 폴더에 저장됩니다.

다른 프로젝트에서 사용하기

# 로컬에서 설치
npm install ./libs/bwg-ui-1.0.0.tgz

# 또는 직접 경로 지정
npm install C:\test_dev\core\libs\bwg-ui-1.0.0.tgz

BwgEditor 관련 (필독)

패키지 버전 정보 고정

BwgEditor 사용 시 다음 패키지들의 버전을 반드시 고정해야 합니다.

npm i -E [email protected] [email protected] [email protected]

package.json에 다음과 같이 명시되어 있어야 합니다:

{
  "dependencies": {
    "quill": "1.3.7",
    "react-quill": "2.0.0",
    "quill-image-resize-module-react": "3.0.0"
  }
}

⚠️ 주의: 소비 프로젝트에서 위 버전과 다른 버전을 사용할 경우 다음 에러가 발생할 수 있습니다:

Uncaught TypeError: moduleClass is not a constructor