open-index/open-npm huggingface dataset:
npm package: @rainbowfish/element-ui
Description: A Component Library for Vue.js.
Latest version: 2.7.18

# element-ui 样式重置

## Install
```shell
npm install @rf/element-ui -S
```

## Quick Start
``` javascript
import Vue from 'vue'
import Element from '@rf/element-ui'

Vue.use(Element)
```

## LICENSE
[MIT](LICENSE)
npm package: @rainbowfish/pc-react
Description: React components library
Author: lisipeng
Latest version: 0.1.0

## react-pc-upload

### 安装最后已经发布的组件库来试试

~~~javascript
npm install @rainbowfish/pc-react --save
~~~

### 使用

~~~javascript
// 加载样式
import '@rainbowfish/pc-react/dist/style/cropper.css';
// 引入组件
import { AdvanceUpload } from '@rainbowfish/pc-react'
~~~
npm package: @rainbowfish/umi-plugin-chunks
Description: @rainbowfish/umi-plugin-chunks
Latest version: 1.0.5

# @rainbowfish/umi-plugins-chunks

## 启用方式

安装包后默认注册，如需使用分包功能，需要配置`chunks`，详情见配置。

## 介绍

umi 提供了`chunks`配置，需要使用`chainWebpack`手动配置`optimization`，多个项目重复配置不太友好，后续如果修改，全部工程都要改一波。自定义个插件来实现。

## 使用前后对比

### 修改前

![](https://tva1.sinaimg.cn/large/008i3skNly1gpvnnwkbvrj31hy0u07lx.jpg)

### 修改方案

![](https://tva1.sinaimg.cn/large/008i3skNly1gpvnrom21vj31g00u0nfa.jpg)

### 修改后

![](https://tva1.sinaimg.cn/large/008i3skNly1gpvnthrz6ij31mo0u01ku.jpg)  
![](https://tva1.sinaimg.cn/large/008i3skNly1gpvnu2k46uj31n50u01kx.jpg)

## 安装

Using npm:

```bash
$ npm install --save-dev @rainbowfish/umi-plugin-chunks
```

or using yarn:

```bash
$ yarn add @rainbowfish/umi-plugin-chunks --dev
```

## 配置

扩展 umi 配置文件：

```js
// .umirc or config/config.js 等其他umi支持的配置文件
import { defineConfig } from 'umi';

export default defineConfig({
  /**
   * 需要拆分的模块名称
   * 根据webpack打包分析（ANALYZE=1 umi build） 自行判断哪些需要拆分
   * 建议仅配置一下比较大的包，分包的目的是减少单个包体积，并发加载。
   * 如果分的太多反而影响加载速度
   */
  chunks: ['rc-', '@sentry', '@umijs', 'lodash', 'antd', '@ant-design'],
});
```

## 遇到的问题与解决

###  分包配置后，build 测试正常分包，但是 umi dev 运行，浏览器空白，无报错

配置如下

```js
import { defineConfig } from 'umi';
export default defineConfig({
  chunks: ['rc-', '@sentry', '@umijs', 'lodash', 'antd', '@ant-design'],
});
```

经过排查，umi.js 是打包后的入口文件，像这样  
![](https://tva1.sinaimg.cn/large/008i3skNly1gpvtweoeejj318q09qmyq.jpg)

配置分包后，没有加入'umi'，导致没有入口，什么也不会加载，像这样  
![](https://tva1.sinaimg.cn/large/008i3skNly1gpvtzrgv16j31ci0e4gr1.jpg)

这样就清晰了，`chunks` 中增加'umi'即可，这也是默认值

所以开发插件时，做了处理，配置了 `chunks`，如果数组中没有 umi，则会自动加入，只需配置需要的分包模块即可。😁

```js
import { defineConfig } from 'umi';
export default defineConfig({
  // 增加入口 'umi'
  chunks: ['rc-', '@sentry', '@umijs', 'lodash', 'antd', '@ant-design', 'umi'],
});
```

### 分包报错 chunk of xxx not found

刚开始配置时，遇到下图这样的报错，经过排查，是因为配置的`chunks`和`cacheGroups`中的配置不对应，像图中这个报错，就是`chunks`配置了`dva`，但是`cacheGroups`没有对应的处理，可见配置时需要一一对应，多个项目配置繁琐、易错，这也是开发这个插件的原因。😺

![](https://tva1.sinaimg.cn/large/008i3skNly1gpvx1e3h9tj31ya0tm4jv.jpg) ·
npm package: @rainbowlaces/base
Description: An extensible and modular Node.js framework for building scalable web applications with built-in support for routing, middleware, configuration management, and more, designed for simplicity and ease of use.
Latest version: 3.19.0

# @rainbowlaces/base

Minimal, modular TypeScript foundation + CLI for building Node + browser services.

## Features
- Lightweight core (config, DI, modules, request handling, logging)
- Built‑in modules: static assets, templates, devtools
- Custom decorators for config, DI, modules, requests
- Structured logger with redaction + serialization
- Scaffolding templates for new projects
- Fast build (esbuild) + full test suite

## Install
```bash
pnpm add @rainbowlaces/base
```

## Quick Start
```ts
import { Base, baseModule } from '@rainbowlaces/base';

@baseModule()
class AppModule {}

async function main() {
  const app = new Base({ modules: [AppModule] });
  await app.start();
}
main();
```

## CLI (via bin/cli.js)
```bash
npx base init my-app    # scaffold project
npx base build          # build
npx base lint           # lint
npx base start          # start dev/test app
```

## Concepts
- Core: types + lifecycle orchestration
- Modules: pluggable features
- Config: class/decorator driven configuration registry
- DI: decorator-driven dependency graph
- Request Handler: HTTP/WebSocket routing + context phases
- Logger: redactors + serializers for safe logs

## Extending
Add a module under `src/modules/YourModule` and export through `src/index.ts`.

## License
MIT
npm package: @rainbowlaces/create-base
Description: Initializer for the Base Framework.
Latest version: 3.19.0

# create-base

Scaffolding CLI to generate a new project preconfigured with `@rainbowlaces/base` tooling (TypeScript, ESLint, templates, module layout).

## Usage
```bash
npx create-base my-app
cd my-app
pnpm install
pnpm build
pnpm test
```

## What You Get
- TS configs (base + client)
- ESLint config + custom rule support
- Sample module (`HelloModule`)
- Client loader + entrypoint
- Scripts for build, test, lint, start

## Options (basic)
Currently minimal; pass the target directory name. Future flags (planned): template selection, skip-install, module presets.

## Relation to @rainbowlaces/base
This just copies templates from `packages/base/scaffold` and does light post-processing. Use it to keep new repos consistent.

## License
MIT
npm package: @raincatcher-examples/angularjs-extensions
Description: Set of angularjs directives to extend existing UI components
Author: feedhenry-raincatcher@redhat.com
Latest version: 1.1.2

# RainCatcher Angular.js Extensions

Set of angularjs directives to extend existing UI components.
Module contains example directives that we used for the demo purposes.
This module can be used as template to extend existing RainCatcher user interface.

## Extending workorders

RainCatcher by default provides minimal metadata for workorders.
Depending on business requirements, developers can add additional metadata like gps, location, address and description. This data can be used for preview and informational purposes or even for route optimalization and scheduling workorders.

Extending workorders data is possible by providing implementation for 2 angular directives:

 - `workorder-data`: Data directive, should implement static fields that displays data.

 - `workorder-data-edit`: Data-edit directive, should implement fields that allow to change/edit data.

Directives should operate on existing field outside workorder to avoid name conflicts:
`workorder.data.yourcustomfield`

## User interface

If your user interface requires additional styles or libraries they need to be included in top level application.
Standard bootstrap and angular material directives are available in top level mobile and portal applications.

[Angular reference](https://material.angularjs.org/latest/api)

## Development

Module using grunt to build angular templates that are in `dist` folder.
To build templates use

    grunt wfmTemplate:build
    
You can also rebuild templates on every save

    grunt wfmTemplate:watch

## Integration

Entry file exposes new angular module implementation that can be mounted into root application module.
Npm module should be integrated with both mobile and portal applications in order to present additional workorder data to users.

> Note: Demo application already contains `@raincatcher-examples/angularjs-extensions` module. When adding custom module demo module should be removed to avoid collisions

## Publishing

In order to consume a module, it needs to be published to a public or private npm registry.

> Note: Change template package name and authors in order to publish it as your own custom module.

> Note: If you do not want to publish your module into your npm registry you can also include all directives directly in the demo application.
npm package: @raincatcher-examples/step-vehicle-inspection
Description: An vehicle-inspection module
Author: feedhenry-raincatcher@redhat.com
Latest version: 1.1.2

# FeedHenry RainCatcher vehicle-inspection

A vehicle-inspection module for FeedHenry RainCatcher providing a set of directives.
The following items of a car can be checked with this module :
- Fuel
- Tires
- Lights

#### Setup
This module is packaged in a CommonJS format, exporting the name of the Angular namespace.
The module can be included in an angular.js as follows:

```javascript
angular.module('app', [
, require('@raincatcher/vehicle-inspection').ngModule
...
])
```

##### Angular service
#### Directives

| Name | Attributes |
| ---- | ----------- |
| vehicle-inspection-form | |
| vehicle-inspection | vehicle-inspection|
npm package: @raincatcher/angularjs-workflow
Description: An Angularjs implementation for workflows
Author: feedhenry-raincatcher@redhat.com
Latest version: 1.1.2

# Raincatcher Workflow Angular User Interface

This module is an Angular JS implementation of Workflows for the Raincatcher project.

## Setup

This module is packaged in a CommonJS format, exporting the name of the Angular namespace.
The module can be included in an angular.js as follows:

```javascript
var config = {
  mode: 'admin',
  listColumnViewId: 'listColumnView',
  mainColumnViewId: 'detailColumnView'
};

angular.module('app', [
...
, require('fh-wfm-workflow-angular')(config)
...
])
```

### Configuration Options

The following configuration options are available for this module:

#### mode (Required)

Allows to switch between user based views and admin views. Possible values 'admin' or 'user'

#### mainColumnViewId (Required)

This is the identifier for the Angular view where the main Workflow views will be rendered.

#### listColumnViewId (Optional)

This is the identifier for the Angular view where the list of Workflows will be rendered into.
This is useful for organizing where the lists will be rendered on-screen.
If not specified, the lists will be rendered into the `mainColumnViewId`.
This is only used for the `admin` mode of the module.

#### toolbarViewId (User Required)

This is the identifier of the Angular view where the progress of a workflow is displayed to the user.
This is only required for scenarios where a workflow is being progressed (e.g. in a mobile application)

### Workflow Directives

| Name | Description |
| ---- | ----------- |
| workflow-detail | Displays the workflow to the user and allows re-ordering of the steps. |
| workflow-form | Allows editing of the workflow name |
| workflow-list | Displays a list of workflows |
| workflow-progress | Displays the current progress of a workflow |
| workflow-result | Displays the result of a single workflow |
| workflow-step-detail | Displays the detail for a single step of a workflow |
| workflow-step-form | Allows the user to edit a single step of the workflow |

### Workflow Step Process

The following directives are used to guide a user through the steps necessary to complete a workflow.
The workflow module itself does not contain the logic required for each step, but uses the template directives to render each of the steps to the user.

The `workflow-process-parent` route is an Angular JS abstract route that is used for all steps in a workflow.

The `workflow-process-begin` route and controller are used to display the summary of the workflow and any results that there may be.

The `workflow-process-steps` route publishes topics to get the current state of the workflow for a workorder.
Based on the state, the `workflow-step` directive renders the template defined in the workflow step.
At this point, control is passed to the module that implements the individual step.

## Development

Install module dependencies

      npm install

Link module into your app

      npm link .

Start monitor changes in templates.

      grunt wfmTemplate:watch
npm package: @raincatcher/angularjs-workorder
Description: Angular UI Implementation of Workorders
Author: feedhenry-raincatcher@redhat.com
Latest version: 1.1.2

# Raincatcher Workorder Angular User Interface

This module is an Angular JS implementation of Workorders for the Raincatcher project.

## Setup

This module is packaged in a CommonJS format, exporting the name of the Angular namespace.  The module can be included in an angular.js as follows:

```javascript

var config = {
  mode: 'admin',
  listColumnViewId: 'listColumnView',
  detailColumnViewId: 'detailColumnView'
};

angular.module('app', [
...
, require('fh-wfm-workorder-angular')(config)
...
])
```

### Configuration Options

The following configuration options are available for this module:

#### Mode

The module can have two modes: `admin` and `user`. These modes affect what options are presented to the user in the directives.

E.g. If the module is in `user` mode, the user will not have the option to edit / delete workorders when viewing the workorder details.

#### mainColumnViewId (Required)

This is the identifier for the Angular view where the main Workorder views will be rendered.

#### listColumnViewId (Optional)

This is the identifier for the Angular view where the list of Workorders will be rendered into. This is useful for organising where the lists will be rendered on-screen. If not specified, the lists will be rendered into the `mainColumnViewId`.

### Workorder directives

| Name | Description |
| ---- | ----------- |
| workorder-list | Listing all of the Workorders with their current status |
| workorder | Listing the detail for a single Workorder |
| workorder-summary | Listing the detail for the workorder, along with the result, if completed. |
| workorder-form | A form for updating and deleting Workorders |
npm package: @raincatcher/auth-passport
Description: Passport authentication module
Author: feedhenry-raincatcher@redhat.com
Latest version: 1.1.2

# RainCatcher PassportAuth
The PassportAuth module is RainCatcher's implementation of  [PassportJS](http://passportjs.org/) and is the default authentication and authorization module for RainCatcher. The PassportAuth module provides:
- Creation and initialization of a Passport authentication service using Passport's local and JWT strategy
- Protection of express routes from requests by user authentication and authorization
- Usage of persistent login sessions using [express-session](https://github.com/expressjs/session)


## Quick Start
### Setup
```typescript
import { PassportAuth, UserRepository, UserService }  from '@raincatcher/auth-passport'

// Initialize user data repository, user service and passport
const userRepo: UserRepository = new YourUserRepository();
const userService: UserService = new YourUserService();
const authService: PassportAuth = new PassportAuth(userRepo, userService);
...
authService.init(router, sessionOptions);
  or
authService.init(router, undefined, secret);
...
```
In order to use cookie-based authentication, specify the sessionOptions.
- For more information about the available express session options, see  [express-session](https://github.com/expressjs/session).

When the sessionOptions is not passed, Passport will use token-based authentication using Passport's JWT strategy by default.
- Ensure that a secret is defined to be used by Passport's JWT strategy.

### Usage
#### Authentication
Using session based authentication
```typescript
app.post('/cookie-login', authService.authenticate('local', options));
```
- For more information on Passport's authenticate options, see [PassportJS authenticate documentation](http://passportjs.org/docs/authenticate)

Using token based authentication
```typescript
app.post('/token-login', authService.authenticateWithToken(secret, userService, userRepo));
```
- This sends the signed token and user profile back to the client upon successful authentication.
- The token's payload contains the user's username and is signed using the given secret.

#### Protecting Routes
```typescript
app.get('/secureEndpoint', authService.protect('admin'), (req: express.Request, res: express.Response) => {
    res.json({routeName: '/secureEndpoint', msg: 'authenticated and authorized to access secure resource'});
});
```

#### JWT: 
When using token based authentication, the JWT token needs to be included in each subsequent requests after a successful login as part of the `Authorization` header: 
  ```
    Authorization: JWT JSON_WEB_TOKEN_STRING
  ```
- For more information on Passport's JWT strategy, please see [passport-jwt](https://github.com/themikenicholson/passport-jwt)

### Sample Implementation
See [./example](https://github.com/feedhenry-raincatcher/raincatcher-core/tree/master/cloud/passportauth/example) for a sample implementation