open-index/open-npm huggingface dataset:
npm package: @suminmon/widget-test
Description: React 기반의 위젯 앱 패키지입니다. Emotion, Jotai, React Query를 활용하여 상태 관리와 스타일링, 데이터 패칭을 효율적으로 처리합니다. Vite로 빌드하며, npm에 배포되어 외부 프로젝트에서 손쉽게 사용할 수 있습니다.
Latest version: 0.0.3

# suminpixel-widget-test

React 기반의 위젯 앱 패키지입니다. Emotion, Jotai, React Query를 활용하여 상태 관리와 스타일링, 데이터 패칭을 효율적으로 처리합니다. Vite로 빌드하며, npm에 배포되어 외부 프로젝트에서 손쉽게 사용할 수 있습니다.

## 주요 기술 스택

- **React**: UI 개발
- **Emotion**: CSS-in-JS 스타일링
- **Jotai**: 전역 상태 관리
- **React Query**: 서버 상태 및 데이터 패칭
- **Vite**: 번들러 및 빌드 도구

## 설치 방법

```bash
npm install @suminmon/widget-test
# 또는
yarn add @suminmon/widget-test
```

## 사용법

### 1. React 컴포넌트로 사용

설치 후, 아래와 같이 위젯을 임포트하여 사용할 수 있습니다:

```jsx
import { Widget } from '@suminmon/widget-test';

function App() {
  return (
    <div>
      <Widget />
    </div>
  );
}

export default App;
```

### 2. Web Component로 사용 (React 16/비React 환경)

빌드된 `widget-element.umd.js` 파일을 `<script>`로 불러온 뒤, HTML에서 `<widget-element></widget-element>`로 사용할 수 있습니다.

```html
<script src="widget-element.umd.js"></script>
<widget-element></widget-element>
```

props(예: onDrop) 전달은 JS property로 할당해야 합니다:

```js
const el = document.querySelector('widget-element');
el.onDrop = (element, customValue) => {
  console.log('드롭된 element:', element);
  console.log('커스텀 값:', customValue);
};
```

## 개발 및 빌드

### 개발 서버 실행

```bash
npm run dev
```

### 빌드

```bash
npm run build
```

### 빌드 결과물 확인

```bash
npm run preview
```

## 배포 (npm)

1. `package.json`의 `name`, `version`, `main`, `module` 등 정보를 확인하세요.
2. 빌드 후 아래 명령어로 배포합니다:

```bash
npm publish --access public
```

> **참고:** npm에 최초 배포 시 `npm login`이 필요할 수 있습니다.

## 예제

```jsx
import { Widget } from '@suminmon/widget-test';

function Example() {
  return <Widget someProp="value" />;
}
```

## 라이선스

MIT 

## Widget 컴포넌트 기능 명세

### 드래그 앤 드롭 핸들러 지원

- **핸들러(props)로 외부에서 element와 customValue를 받아 드롭할 수 있습니다.**
- 사용자는 `onDrop` props를 통해 드롭 이벤트를 처리할 수 있습니다.
- 드롭 시, 드롭된 element(HTMLElement)와 customValue(옵셔널)가 `onDrop` 함수의 인자로 전달됩니다.
- 기본적으로 `onDrop`에서 element와 customValue를 `console.log`로 출력하는 기능이 포함되어 있습니다.

#### Props 타입

```tsx
type WidgetProps = {
  /**
   * 드롭 이벤트 발생 시 호출됩니다.
   * @param element 드롭된 HTMLElement
   * @param customValue (옵셔널) 사용자 정의 값
   */
  onDrop: (element: HTMLElement, customValue?: any) => void;
};
```

#### 사용 예시

```tsx
import { Widget } from '@suminmon/widget-test';

function App() {
  return (
    <Widget
      onDrop={(element, customValue) => {
        console.log('드롭된 element:', element);
        console.log('커스텀 값:', customValue);
      }}
    />
  );
}
``` 

export { Widget } from "./Widget";
npm package: @sumintong/smt-ui
Description: 高颜值、轻量化的 UniApp Vue3 组件库
Latest version: 0.0.2

# SMT-UI (SMT Design)

<p align="left">
    <img src="https://img.shields.io/badge/version-0.0.1-blue.svg" alt="Version">
    <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License">
    <img src="https://img.shields.io/badge/vue-3.x-green.svg" alt="Vue">
    <img src="https://img.shields.io/badge/uniapp-compatible-green.svg" alt="UniApp">
</p>

基于 Vue 3 + TypeScript 开发的 UniApp UI 组件库，提供丰富的组件和工具库，致力于提供轻量、高颜值的移动端开发体验。

## ✨ 特性

- 🚀 **60+ 高质量组件**：覆盖移动端主流场景
- 📐 **TypeScript**：完备的类型定义
- 🎨 **主题定制**：基于 CSS 变量，支持实时切换与暗黑模式
- 🛠 **内置工具库**：深拷贝、防抖节流、格式化、规则校验等
- 📱 **多端发布**：完美支持 H5、微信小程序、App

## 📦 安装

```bash
# 使用 pnpm (推荐)
pnpm add @sumintong/smt-ui

# 使用 npm
npm install @sumintong/smt-ui
```

## 🔨 快速上手

### 1. 配置 easycom (推荐)

修改项目根目录下的 `pages.json`，配置后无需 `import` 即可直接使用组件。

```json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^mt-(.*)": "@sumintong/smt-ui/src/components/$1/$1.vue"
    }
  },
  "pages": [
    // ...
  ]
}
```

### 2. 引入样式

在项目的 `App.vue` 或 `uni.scss` 中引入全局样式：

```scss
/* 在 App.vue 的 style 中引入 */
@import '@sumintong/smt-ui/src/index.scss';
```

### 3. 使用组件

```html
<template>
  <view>
    <mt-button type="primary">主要按钮</mt-button>
  </view>
</template>
```

## 🧩 组件库概览

目前已支持基础布局、表单输入、反馈提示、展示导航等完整移动端交互组件。详情请参考 [官方文档 (开发中)](#)。

## 🛠 JS 工具库

```typescript
import { formatDate, debounce, request } from '@sumintong/smt-ui'

// 格式化日期
formatDate(new Date(), 'yyyy-MM-dd')

// 接口请求 (Promise 封装)
request({ url: '/api/user', method: 'GET' })
```

---

Copyright (c) 2026 SMT Team. Released under the MIT License.