open-index/open-npm huggingface dataset:
npm package: @haianh123bgln/redai-fe-v2-sdk
Description: Standard React Typescript Frontend SDK Template
Latest version: 0.0.1

# Redai Frontend SDK Template

## Overview
This is a comprehensive React TypeScript SDK template designed for building modern, flat-design component libraries. It features a built-in ActionBus for telemetry/events, strict TypeScript typings, and a utility-first styling approach using Tailwind CSS.

## Features
- **Architecture:** Library mode (Vite), ESM/CJS output.
- **Core:** In-memory `ActionBus` with middleware support (PII filtering, Audit logging).
- **Styling:** Tailwind CSS with CSS Variables for theming (Dark/Light mode ready).
- **Design:** Flat design, soft rounded corners, no borders/shadows.
- **Components:** 25+ Atomic/Molecular components ready to use.
- **Quality:** ESLint, Prettier, Vitest, Storybook.

## Installation

```bash
npm install
# or
pnpm install
```

## Commands

- `pnpm dev`: Start dev server (if applicable)
- `pnpm build`: Build the library for distribution (dist/)
- `pnpm storybook`: Launch Storybook documentation
- `pnpm test`: Run unit tests (Vitest)
- `pnpm lint`: Lint code
- `pnpm format`: Format code

## Usage

### Theming
Import the base styles in your app's entry point:
```tsx
import 'redai-fe-v2-sdk/dist/style.css'
```

To switch themes, toggle the `.theme-dark` class on the `html` or `body` tag.

### Component Usage
```tsx
import { Button, Input, useDispatchAction } from 'redai-fe-v2-sdk'

const MyForm = () => {
  const dispatch = useDispatchAction()
  
  return (
    <div>
      <Input placeholder="Enter data..." />
      <Button onClick={() => console.log('Clicked')}>Submit</Button>
    </div>
  )
}
```

### Telemetry / ActionBus
Events are automatically dispatched by interactive components. You can also subscribe globally:

```tsx
import { actionBus } from 'redai-fe-v2-sdk'

actionBus.subscribeAll((event) => {
  console.log('Telemetry Event:', event)
})
```

## Publishing
1. Update version in `package.json`
2. Run `pnpm build`
3. Run `npm publish`

## Project Structure
- `src/bus`: ActionBus logic
- `src/components`: UI Components (Atoms, Molecules, Organisms)
- `src/middleware`: Event middleware (PII, Logger)
- `src/styles`: Design tokens and CSS
npm package: @haibalai/cesium-babylonjs
Description: cesium中npm包的模板工程
Author: haibalai
Latest version: 1.0.2

# @haibalai/cesium-babylonjs

## Introduction

> 这是cesium babylonjs中相关的npm包的模板工程



```
# 安装

npm i @haibalai/cesium-babylonjs


```
npm package: @haibalai/gismap4-css
Description: arcgis中npm包的模板工程
Author: haibalai
Latest version: 1.2.0

# @haibalai/gismap4-css

## Introduction

这是 css 的npm包

## Download

1.使用npm下载

```shell
npm install @haibalai/gismap4-css
```


## License

[MIT](http://opensource.org/licenses/MIT)
npm package: @haibalai/mapbox-babylonjs
Description: babylonjs中npm包的模板工程
Author: haibalai
Latest version: 1.0.4

# @haibalai/mapbox-babylonjs

## Introduction

> 这是mapbox babylonjs中相关的npm包的模板工程



```
# 安装

npm i @haibalai/mapbox-babylonjs


```
npm package: @haibalai/mega
Description: mega package
Author: cityworks
Latest version: 1.0.5

# @cityworks/cesium

## Introduction

这是 cesium 的npm包

## Download

1.使用npm下载

```shell
npm install @cityworks/cesium
```

## Using

1.支持ES6的模块引用

比如要使用layerManager这个方法

```shell
import {layerManager} from '@cityworks/cesium'
```

2.支持CommonJS的模块引用

```shell
var gismap4 = require('@cityworks/cesium')
```

## License

[MIT](http://opensource.org/licenses/MIT)