open-index/open-npm huggingface dataset:
npm package: @mci-fe/keycloak
Description: 基于 keycloak 的鉴权
Latest version: 1.1.0

# 介绍

基于 keycloak 的鉴权

# 使用

- 1. 项目主入口

```ts
import { initKeycloak } from '@mci-fe/keycloak';

initKeycloak({
  url: 'https://dev1-kc.mcisaas.com/auth',
  realm: 'numa-realm',
  clientId: 'xxx',
}).then(() => {
  console.log('keycloak初始化成功');
  // ...实例化react根节点
});
```

2. 获取Token

```ts
import { getKCToken } from '@mci-fe/keycloak';

// 这里要注意使用await等待异步token回调， 内部会做refreshToken刷新机制
const token = await getKCToken();

const headers = {
  Authorization: `Bearer ${token}`,
};

await fetch(url, { headers });

// ...
```

3. 获取RefreshToken

```ts
import { getKCRefreshToken } from '@mci-fe/keycloak';

const refreshToken = await getKCRefreshToken();

// ...
```

4. 登出

```ts
import { logout } from '@mci-fe/keycloak';

const logoutClickHandler = () => {
  logout();
};
```
npm package: @mci-fe/satoken
Description: - 基于 后端SaToken 的鉴权
Latest version: 1.0.3

# 介绍

- 基于 后端SaToken 的鉴权

- 注意：使用前请先确保将apps/auth-service通过Flow流水线构建到对应环境
  - https://web.${env}.mcisaas.com/workbrnch/auth-service/

# 使用

- 1. 项目主入口

```ts
import { initSaToken } from '@mci-fe/satoken';

initSaToken({
  host: 'https://web.dev1.mcisaas.com',
  client: 'xxx',
}).then(() => {
  console.log('SaToken登录完成');
  // ...实例化react根节点
});
```

2. 获取Token

```ts
import { getToken } from '@mci-fe/satoken';

// 这里要注意使用await等待异步token回调， 内部会做refreshToken刷新机制
const token = await getToken();

const headers = {
  Authorization: `Bearer ${token}`,
};

await fetch(url, { headers });

// ...
```

3. 获取RefreshToken

```ts
import { getRefreshToken } from '@mci-fe/satoken';

const refreshToken = await getRefreshToken();

// ...
```

4. 登出

```ts
import { logout } from '@mci-fe/satoken';

const logoutClickHandler = () => {
  logout();
};
```
npm package: @mci-fe/user-auth
Description: - 用户信息和权限管理模块
Latest version: 1.3.0

# 介绍

- 用户信息和权限管理模块

- 注意：当前只是支持对接 kc

# 使用

### 1. 在相应的子应用安装 `@mci/user-auth` 包

```js
$ pnpm add @mci/user-auth --workspace
```

### 2. 使用 `initUserAuth(dataSource, accessConfig)` 进行初始化

视需要接入的子应用的类型不同，初始化方式也不同。不同之处在于，对于独立子应用而言，它在初始化传入的第一个参数 dataSource 是 systemCode，而对于微前端子应用来说，它的 dataSource 则是主应用已经请求过的拿回来的用户信息和权限信息。

第二个参数 `accessConfig` 是可选的，它是用配置文件 `access.ts` 导入的（该文件约定俗成存放在 `/src/config/access.ts` 这个路径之下）。主要是用于 button 级别的权限配置场景。简单的样例如下：

```js
import { AccessConfig } from '@mci/user-auth';

export default {
  canViewTestMenu: (roleList, authCodeList) => {
    return authCodeList.map((_) => _.authCode).includes('1020001005');
  },
} satisfies AccessConfig;
```

#### 2.1 独立子应用接入

```js
import accessConfig from '@/config/access';

const { UserAuthProvider } = await initUserAuth('1020', accessConfig);
```

在这里，`1020` 就是 systemCode。

#### 2.2 微前端子应用接入

```js
 import accessConfig from '@/config/access';

async function render(props: MicroAppProps) {
  const { container, routerBase = '/', userInfo, authInfo } = props;
  // ......

  const { UserAuthProvider } = await initUserAuth(
    {
      user: userInfo,
      auth: authInfo,
    },
    accessConfig,
  );
}
```

### 3. 把 `<UserAuthProvider>` 挂在到 UI 组件树的顶部

```js
root.render(
  <React.StrictMode>
    // ...
    <UserAuthProvider>
      <App />
    </UserAuthProvider>
    // ...
  </React.StrictMode>,
);
```

### 4. 消费权限相关的 API

#### 4.1 对路由进行鉴权 - `authForRoute()`

首先, 要对 `/src/config/menu.tsx` 进行配置。menu 配置是一个树状结构的数据，你可以在每一个需要权限控制的节点上增加一个字段：`authCode`。该字段的值是一个数组，用于表达，只要当前用户拥有该数组上的任何一个 authCode ，他/她就有权限查看当前的路由页面。配置示例：

```js
const routeMap: ProLayoutProps['route'] = {
  path: '/',
  name: '挂牌管理',
  component: <Welcome />,
  routes: [
    {
      path: 'subject-authentication',
      name: '申请主体认证',
      icon: <SmileFilled />,
      component: <DroListed />,
      authCode: ['1020001004'],
    },
  ],
  authCode: ['1020001001'],
};

```

然后，在渲染之前，用 `authForRoute()` 对 `routeMap` 进行包裹：

```js
<ProConfigProvider hashed={false}>
  // ...
  {generatePath2RouteComponentMap(authForRoute(defaultProps.route)).map(([path, component]) => (
    <Route
      key={path}
      index={path === '/'}
      path={path}
      element={<Suspense fallback={'loading'}>{component}</Suspense>}
    />
  ))}
  // ...
</ProConfigProvider>
```

#### 4.2 在非菜单/路由的更细颗粒度的地方进行鉴权

```js
import { useAccess, Access } from '@mci/user-auth';

function Test() {
  const access = useAccess();

  return (
    <Access accessible={access.canViewSomePage}>
      <button
        onClick={() => {
          if (!access.canClickTestButton) {
            alert('Oops, 你没有权限点击该按钮');
          }
        }}>
        测试
      </button>
    </Access>
  );
}
```
npm package: @mcinteerj/clawdbot-gmail
Description: Gmail channel plugin for Clawdbot - uses gog CLI for secure Gmail access
Author: Jake McInteer
Latest version: 1.0.2

# Gmail Channel (Plugin)

Connects Clawdbot to Gmail via the `gog` CLI.

## Installation

This is a plugin. To install from source:

```bash
clawdbot plugins install ./extensions/gmail
```

## Features

- **Polling-based sync**: Robustly fetches new unread emails from Inbox.
- **Circuit Breaker**: Handles API failures and rate limiting gracefully.
- **Rich Text**: Markdown support for outbound emails.
- **Threading**: Native Gmail thread support.
- **Archiving**: Automatically archives threads upon reply.

## Reply Behavior

- **Reply All**: When the bot replies to a thread, it uses "Reply All" to ensure all participants are included.
- **Allowlist Gatekeeping**: The bot only responds to emails from senders on the `allowFrom` list. However, if an allowed user includes others (CC) who are *not* on the allowlist, the bot will still "Reply All", including them in the conversation. This allows authorized users to bring others into the loop.

## Configuration

Add to `clawdbot.json`:

```json5
{
  "channels": {
    "gmail": {
      "accounts": {
        "main": {
          "email": "user@gmail.com",
          "allowFrom": ["*"]
        }
      }
    }
  }
}
```

## Development

Run tests:
```bash
./node_modules/.bin/vitest run extensions/gmail/src/
```
npm package: @mcintire/ui-components
Description: A set of isolated, reusable components built with React and TypeScript.
Latest version: 1.0.1

# React Component Library

A set of isolated, reusable components built with React and TypeScript.

## Quick Start

```
git clone https://github.com/mcopper1226/react-storybook-starter.git my-components
cd my-components
yarn
yarn start
```

## Building the Package

To generate a build, simply run `yarn build`.

## About the Project

This is a vanilla React application with very minimal configuration. Code is linted and formatted. Checked in code should be formatted, but this is not enforced programatically. To format, simply run `yarn prettier:fix`.

### Storybook

To view components, run `yarn storybook`. Story setup can be found in the individual component directories with the `*.stories.tsx` extension. Note: these files are not included in the dist output.

### Styles (Modules and Global)

The project uses a mix of global SCSS and SCSS modules that are scoped to individual components. This approach helps guard against inadvertent naming collisions and keeps things tidier.

To use a global class:

- `<div className='container'>`
- Global styles should live in the styles directory and must be imported through the `base.scss` entry point.

To use a module:

- Create a file that follows the convention: `[name].module.scss` (ideally placed inside of the component directory, but it doesn't have to be)
- Import this module at the top of your component file: import styles from [name].module.scss
- Use the styles reference in all of your class: `<div className={styles.fancy}>Fancy Text</div>`
- Note: if your class name includes a hyphen character, you will need to use bracket notation: `<div className={styles['fancy--alternate']}>Alternate Fancy Text</div>`
npm package: @mcintyre94/eslint-config-solana
Description: ESLint rules to be shared across all Solana Labs projects
Author: Solana Maintainers
Latest version: 1.0.3

# Solana ESLint config

Let's share this ESLint config across all of our projects, to keep things consistent.

## Installation

1. Install this package in the target project, along with the required peer dependencies
   ```bash
   pnpx install-peerdeps@2 --pnpm --dev @solana/eslint-config-solana
   ```
2. Create an `.eslint.json` file in your target project that extends this module
   ```json
   {
     "extends": ["@solana/eslint-config-solana"]
   }
   ```
npm package: @mcintyre94/mpl-account-compression
Description: JavaScript client for the Mpl Account Compression program
Latest version: 0.0.3

# JavaScript client

A generated JavaScript library for the Mpl Account Compression program.

## Getting started

To build and test your JavaScript client from the root of the repository, you may use the following command.

```sh
pnpm clients:js:test
```

This will start a new local validator, if one is not already running, and run the tests for your JavaScript client.

## Available client scripts.

Alternatively, you can go into the client directory and run the tests directly.

```sh
# Build your programs and start the validator.
pnpm programs:build
pnpm validator:restart

# Go into the client directory and run the tests.
cd clients/js
pnpm install
pnpm build
pnpm test
```

You may also use the following scripts to lint and/or format your JavaScript client.

```sh
pnpm lint
pnpm lint:fix
pnpm format
pnpm format:fix
```
npm package: @mcintyre94/mpl-bubblegum
Description: JavaScript client for the Sauce Mpl Bubblegum program
Latest version: 0.0.3

# JavaScript client

A generated JavaScript library for the Sauce Mpl Bubblegum program.

## Getting started

To build and test your JavaScript client from the root of the repository, you may use the following command.

```sh
pnpm clients:js:test
```

This will start a new local validator, if one is not already running, and run the tests for your JavaScript client.

## Available client scripts.

Alternatively, you can go into the client directory and run the tests directly.

```sh
# Build your programs and start the validator.
pnpm programs:build
pnpm validator:restart

# Go into the client directory and run the tests.
cd clients/js
pnpm install
pnpm build
pnpm test
```

You may also use the following scripts to lint and/or format your JavaScript client.

```sh
pnpm lint
pnpm lint:fix
pnpm format
pnpm format:fix
```
npm package: @mcintyre94/mpl-token-metadata
Description: JavaScript client for the Token Metadata program
Latest version: 0.0.5

# JavaScript client

A generated JavaScript library for the Token Metadata program.

## Getting started

To build and test your JavaScript client from the root of the repository, you may use the following command.

```sh
pnpm clients:js:test
```

This will start a new local validator, if one is not already running, and run the tests for your JavaScript client.

## Available client scripts.

Alternatively, you can go into the client directory and run the tests directly.

```sh
# Build your programs and start the validator.
pnpm programs:build
pnpm validator:restart

# Go into the client directory and run the tests.
cd clients/js
pnpm install
pnpm build
pnpm test
```

You may also use the following scripts to lint and/or format your JavaScript client.

```sh
pnpm lint
pnpm lint:fix
pnpm format
pnpm format:fix
```