open-index/open-npm huggingface dataset:
npm package: @grubbe/ui
Description: grubbeUI v0.1
Author: grubbe
Latest version: 0.1.59

<p align="center">
  <a href="http://github.com/grubbeIO/gbb-ui">
    <img alt="grubbe-ui" height="75" src="https://firebasestorage.googleapis.com/v0/b/grubbeio.appspot.com/o/img%2Fgbbui_icon.svg?alt=media&token=4b94c5f3-bece-428f-9009-2aff60af4f3d">
  </a>
</p>

<h1 align="center">grubbe UI</h1>

<div align="center">

[![React version](https://img.shields.io/badge/React-^17.0.0-blue.svg?style=flat&logo=react)](https://github.com/grubbeIO/ui)
[![Current Version gbb](https://img.shields.io/badge/Current_Version-v0.1.X-success?style=flat&logo=html)](https://grubbe.io/ui)
[![Next Version gbb](https://img.shields.io/badge/Next_Version-v0.2.0-inactive?style=flat&logo=jira)](https://grubbe.io/ui)

</div>

<!-- BASE EJEMPLO: https://antd-admin.zuiidea.com/dashboard -->

- Preview - [https://grubbe.io/ui](https://grubbe.io)
- Documentation - [https://doc.grubbe.io/ui](https://grubbe.io)
- FAQ - [https://grubbe.io/ui/#/faq](https://grubbe.io)
- ChangeLog - [https://grubbe.io/ui/#/change-log](https://grubbe.io)

# Get Started

GbbUI is a reusable component library that helps grubbe developers build UIs faster.
The goal is to make building durable UIs more productive and satisfying.

## Install

Add gbbUI to your project.

```sh
npm install --save @grubbe/ui
# or
yarn add @grubbe/ui
```

## Usage

Import global styles into the index (.js | .ts)

```js
import { global as gbbUI } from "@grubbe/ui";
const { GlobalStyle } = gbbUI

...
// Inside of ReactDOM

<GlobalStyle />
```
adding <code>@grubbe/ui</code> you can import a gbb component to any file
```js
// App.js
import "./App.css";
import { H1, Button } from "@grubbe/ui";

function App() {
  return (
    <div className="App">
        <H1>Hello grubbe!</H1>
        <Button>Press here...</Button>
    </div>
  );
}

export default App;
```

## Browsers support

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
| --------- | --------- | --------- | --------- | --------- | 
|IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
npm package: @grubbylee/tiny-message-plus
Description: A standalone TinyVue-style Message component/plugin for Vue 3.
Author: XC Team
Latest version: 0.2.0

# @grubbylee/tiny-message-plus

一个独立目录开发的 Vue3 Message 扩展包，使用方式接近 TinyVue 的全局消息能力。

## 安装

```bash
npm i @grubbylee/tiny-message-plus
```

## 在项目中使用

```ts
import { createApp } from 'vue'
import App from './App.vue'
import { TinyMessagePlugin } from '@grubbylee/tiny-message-plus'

const app = createApp(App)
app.use(TinyMessagePlugin, {
  duration: 3000,
  offset: 16,
  max: 5,
  zIndex: 5000,
  safeTop: 'auto'
})
app.mount('#app')
```

## 调用方式

### 1) 组合式/普通模块调用

```ts
import { message } from '@grubbylee/tiny-message-plus'

message.success('保存成功')
message.error({ message: '保存失败', showClose: true })
const loading = message.loading({ message: '提交中...', showClose: true })

setTimeout(() => {
  loading.close()
}, 1600)
```

### 2) 组件内通过 this 调用

```ts
this.$message.info('提示内容')
this.$tinyMessage.warning('请先完善信息')
```

## API

- `message(options | text)`
- `message.info(options | text)`
- `message.success(options | text)`
- `message.warning(options | text)`
- `message.error(options | text)`
- `message.loading(options | text)`（默认不自动关闭）
- `message.close(id)`
- `message.closeAll()`
- `message.config({ duration, offset, max, zIndex, safeTop, appendTo })`

`options` 字段：

- `message: string` 消息文本
- `status?: 'info' | 'success' | 'warning' | 'error' | 'loading'`
- `duration?: number` 自动关闭时长(ms)
- `showClose?: boolean` 是否显示关闭按钮
- `zIndex?: number`
- `onClose?: () => void`

`config/plugin` 额外字段：

- `safeTop?: number | 'auto' | string | (() => number)`  
  说明：消息顶部安全区域。默认 `'auto'`，会自动避让页面顶部固定/吸顶 Header。  
  示例：`0`（不避让）、`'--app-header-height'`（读取 CSS 变量）、`() => 76`（动态函数）。
- `appendTo?: string | HTMLElement`  
  说明：消息挂载容器，默认 `'body'`。

## 本地开发

```bash
cd extensions/tiny-message-plus
npm install
npm run build
```

## 联调 Demo

```bash
cd extensions/tiny-message-plus
npm run demo
```

默认打开地址：`http://localhost:5179`

## 发布 npm

```bash
cd extensions/tiny-message-plus
npm run build
npm publish --access public
```
npm package: @grubendol/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 3.1.0

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @grubtech/integration-core
Description: Shared TypeScript types and utilities used internally by Grubtech Integration Agent packages.
Author: Grubtech
Latest version: 0.1.2

# Grubtech Integration Core

## What This Is

This package contains shared code definitions used by other parts of the Grubtech Integration Agent system. It's like a common dictionary that all the other packages use to speak the same language.

**Note:** You don't need to use this package directly. It's automatically included by the other packages.

## What This Does

Provides common definitions that other packages need:

**Data Structures**
- How cached documentation is stored
- How search results are organized
- How user sessions are tracked

**Integration Phases**
- Not Started
- Authentication
- Menu Sync
- Order Creation
- Order Status
- Go Live
- Completed

**Error Messages**
- Cache reading errors
- Cache writing errors
- Scraping errors
- Parsing errors
- Network errors
- Rate limit errors

## What Features This Supports

This package doesn't provide features directly. Instead, it helps other packages work together by giving them common definitions.

**For example:**
- When the MCP server searches documentation, it uses types from this package
- When tracking where you are in your integration, all packages use the same phase names
- When an error occurs, all packages use the same error codes

## Who Uses This

Other packages in the Grubtech Integration Agent system:
- `@grubtech/integration-agent` uses this
- `@grubtech/integration-mcp-server` uses this
- Any future packages will use this too

## Why This Exists

Without this package, each part of the system might define the same things differently. This package ensures everything works together smoothly.

Think of it like a shared vocabulary - everyone speaks the same language.

## Getting Help

You shouldn't need to interact with this package directly. It's used behind the scenes.

If you're having issues with the integration agent:
1. Try reinstalling: `npx @grubtech/integration-agent init`
2. Restart Claude Code
3. Contact Grubtech support: support@grubtech.com

## Related Packages

This is part of the Grubtech Integration Agent system:
- `@grubtech/integration-agent` - Main installer
- `@grubtech/integration-mcp-server` - Background engine
- `@grubtech/integration-personas` - AI personalities
- `@grubtech/integration-core` - This package

**Learn more:**
- Grubtech Website: https://www.grubtech.com
- API Documentation: https://docs.grubtech.io

---

© 2025 Grubtech. All rights reserved.
npm package: @grubtech/integration-mcp-server
Description: MCP server that provides Grubtech API documentation search and code generation tools for Claude Code.
Author: Grubtech
Latest version: 0.1.1

# Grubtech Integration MCP Server

## What This Is

This is the engine that powers the AI assistant for Grubtech integrations. It runs in the background and provides tools for Claude Code to answer your questions and generate code.

**Note:** You don't install this directly. Use the main installer instead:
```bash
npx @grubtech/integration-agent init
```

## What This Does

This server provides three main tools that Claude Code can use:

**1. Documentation Search**
- Searches through Grubtech documentation
- Finds relevant information based on your questions
- Returns answers in plain language

**2. Code Generation**
- Creates ready-to-use code examples
- Supports TypeScript, Python, Java, and cURL
- Includes error handling and comments

**3. Document Scraping**
- Downloads Grubtech documentation automatically
- Stores it locally for fast searching
- Updates when needed

## What Features This Supports

**Search Tool**
- Find information about authentication
- Learn about menu synchronization
- Understand order webhooks
- Get help with status updates
- Discover item availability features

**Code Templates**
- Authentication examples
- Menu sync code
- Order receiving webhooks
- Status update implementations
- Item availability management

**All templates include:**
- Working code you can copy-paste
- Error handling
- Comments explaining each part
- Placeholders for your credentials

## How It Works

1. Claude Code starts this server automatically
2. You ask a question in Claude Code
3. Claude uses this server's tools to search docs or generate code
4. You get instant answers and working code

Everything happens behind the scenes - you just chat with Claude!

## Technical Details

**For developers who want to know:**
- Uses Model Context Protocol (MCP)
- Provides three tools: search_documentation, generate_code, scrape_documentation
- Caches documentation locally in `~/.grubtech/cache/`
- Runs as a background service when Claude Code needs it

## Getting Help

You shouldn't need to interact with this package directly. If something isn't working:

1. Try reinstalling: `npx @grubtech/integration-agent init`
2. Restart Claude Code
3. Contact Grubtech support: support@grubtech.com

## Related Packages

This is part of the Grubtech Integration Agent system:
- `@grubtech/integration-agent` - Main installer (use this!)
- `@grubtech/integration-mcp-server` - This package
- `@grubtech/integration-personas` - AI personality configurations
- `@grubtech/integration-core` - Shared code

**Learn more:**
- Grubtech Website: https://www.grubtech.com
- API Documentation: https://docs.grubtech.io

---

© 2025 Grubtech. All rights reserved.