open-index/open-npm huggingface dataset:
npm package: @shopcircle/app-manager-web-components
Description: A framework-independent UI library for pricing, built with Web Components.
Author: Chirag
Latest version: 1.0.5

# AppManager Web Components SDK

Lightweight, framework-agnostic pricing UI SDK with no external UI dependencies.

### Build
```
npm install
npm run build
```

### Demo
- Run `npm run dev` and open `/public/serve.html`.
- Edit source files for instant live reload.

### Usage

Include the SDK via CDN in your HTML:

```html
<script src="https://cdn.jsdelivr.net/npm/@shop-circle/app-manager-web-components@{version}/dist/app-manager-web-components.umd.js"></script>
```

#### Components

- `<app-manager-billing-page>`: Use this for custom UI (no external dependencies required).
- `<app-manager-billing-page-polaris>`: Use this if your app uses Shopify Polaris web components.
  - **Important:** You must also include the Polaris script in your HTML if it is not already present:
    ```html
    <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
    ```

### Listening for Plan Selection Events

Both `<app-manager-billing-page>` and `<app-manager-billing-page-polaris>` emit a custom event `app-manager:plan-select` when a user selects either the "Free plan" or chooses to "Choose later". You can listen for this event and handle each case separately:

```js
document.addEventListener('app-manager:plan-select', e => {
  if (e.detail && e.detail.free_plan) {
    console.log('Free plan selected:', e.detail);
    // Handle free plan selection
  } else if (e.detail && e.detail.choose_later) {
    console.log('Choose later selected:', e.detail);
    // Handle choose later action
  }
});
```

### Notes
- This SDK does not require or load any external UI libraries by default.
- For `<app-manager-billing-page-polaris>`, you must include the Polaris script as shown above if your app does not already include it.
npm package: @shopee-group/v3-ui-vue-components-simplified
Description: Упрощенная UI библиотека компонентов для Vue 3, основанная на родительском проекте.
Latest version: 0.0.5

# @shopee-group/v3-ui-vue-components-simplified

Упрощенная UI библиотека компонентов для Vue 3, основанная на родительском проекте.

## Установка

```bash
npm install @shopee-group/v3-ui-vue-components-simplified
```

## Использование

### Основные компоненты (default variant)

```typescript
import { MyButton } from '@shopee-group/v3-ui-vue-components-simplified';

// В компоненте
<MyButton label="Click me" @click="handleClick" />
```

### Альтернативные компоненты (other variant)

```typescript
import { MyButton } from '@shopee-group/v3-ui-vue-components-simplified/other';

// В компоненте
<MyButton label="Click me" @click="handleClick" />
```

## Разработка

### Установка зависимостей

```bash
npm install
```

### Запуск в режиме разработки

```bash
npm run dev
```

### Сборка

```bash
# Сборка всех вариантов
npm run build

# Сборка конкретного варианта
npm run build:variant -- default
npm run build:variant -- other
```

### Storybook

```bash
npm run storybook
```

## Публикация

### Подготовка к публикации

1. Убедитесь, что у вас есть аккаунт на npmjs.com
2. Войдите в npm: `npm login --scope=@shopee-group`

### Публикация новой версии

```bash
# Patch версия (0.0.1 -> 0.0.2)
npm run publish:patch

# Minor версия (0.0.1 -> 0.1.0)
npm run publish:minor

# Major версия (0.0.1 -> 1.0.0)
npm run publish:major
```

## Структура проекта

```
src/
├── components/          # Компоненты
│   └── MyButton/
│       ├── Default/     # Основная версия
│       └── Other/       # Альтернативная версия
├── entries/             # Точки входа для экспорта
│   ├── default.ts       # Основные компоненты
│   └── other.ts         # Альтернативные компоненты
└── utils/               # Утилиты
```

## Требования

- Vue 3.x
- Node.js 18+

---

[GitLab проект](https://gitlab.com/shopee-app/v3-ui-vue-components-simplified) | [npm пакет](https://www.npmjs.com/package/@shopee-group/v3-ui-vue-components-simplified)
npm package: @shopee-ui/icon
Description: A icon component for Vue.js.
Latest version: 0.0.7
Deprecated: this package has been deprecated

# shopee-icon
---
## Props
| Property | Description | Type | Accepted Values | Default |
|:--|:--|:--|:--|:--|
| name | name of icon | String | - | - |
| spin | whether spin the icon | Boolean | - | false |
npm package: @shopfe/shreact-freetemplate-common
Description: ## 说明 店铺装修ISV模板通用方法
Latest version: 0.0.1

# jdreact-plugin-freetemplate-common

## 说明
店铺装修ISV模板通用方法

## 安装
`npm install @ares/jdreact-plugin-freetemplate-common --save`

## 使用

```jsx
import React from 'react'
import { View } from 'react-native'
import { JDTouchable, JDLog } from '@areslabs/jdreact-core-scripts'

import { Floor } from '@ares/jdreact-plugin-freetemplate-common'

export default class Example extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: this.props.data
        };
        // 注册监听楼层刷新
        FloorManager.addFloorDataUpdateListener(this, this.props.id);
    }

    render() {
        this.addListener();
        return (<JDTouchable onPress={this.clickHandle.bind(this)} >
            <Floor {...this.props}>
                <View style={{ backgroundColor: this.state.data.color, height: this.state.data.height }} >
                </View>
            </Floor>
        </JDTouchable>
        )
    }

    clickHandle(event) {
        let { uid } = FloorManager.getFloorIdentiInfo(this, this.props.id);
        JDLog.d(`uid=${uid}-event=${event}`);
    }

    /**
     * 监听楼层刷新后的回调方法
     * 
     * @param {Object} data
     * @memberof Example
     */
    onFloorDataUpdate(data) {
        this.setState({
            data
        })
    }
}
```

## 组件props
使用`Floor`或`NavTab`时需要通过`{...this.props}`传递原生参数

## 组件API

### FloorManager


#### addFloorDataUpdateListener
FloorManager.addFloorDataUpdateListener(Object object, string id)
注册楼层数据更新的监听

object
楼层组件this

id
楼层的参数id

#### onFloorDataUpdate
onFloorDataUpdate(Object data)
楼层数据更新的回调函数

data
楼层的数据
npm package: @shopfront/react-toggle
Description: An elegant, accessible toggle component for React. Also a glorified checkbox.
Author: Shopfront
Latest version: 7.0.1

An elegant, accessible toggle component for React. Also a glorified checkbox.

> We've forked the library from aaronshaf/react-toggle as it seems that library was no longer being actively
maintained. The library has had a number of fixes added to it and has been rewritten in TypeScript.

See [usage and examples](http://aaronshaf.github.io/react-toggle/).

## Props

The component takes the following props.

| Prop              | Type       | Description |
|-------------------|------------|-------------|
| `checked`         | _boolean_  | If `true`, the toggle is checked. If `false`, the toggle is unchecked. Use this if you want to treat the toggle as a controlled component |
| `defaultChecked`  | _boolean_  | If `true` on initial render, the toggle is checked. If `false` on initial render, the toggle is unchecked. Use this if you want to treat the toggle as an uncontrolled component |
| `onChange`        | _function_ | Callback function to invoke when the user clicks on the toggle. The function signature should be the following: `function(e) { }`. To get the current checked status from the event, use `e.target.checked`. |
| `onFocus`         | _function_ | Callback function to invoke when field has focus. The function signature should be the following: `function(e) { }` |
| `onBlur`          | _function_ | Callback function to invoke when field loses focus. The function signature should be the following: `function(e) { }` |
| `name`            | _string_   | The value of the `name` attribute of the wrapped \<input\> element |
| `value`           | _string_   | The value of the `value` attribute of the wrapped \<input\> element |
| `id`              | _string_   | The value of the `id` attribute of the wrapped \<input\> element |
| `icons`        | _object_  | If `false`, no icons are displayed. You may also pass custom icon components in `icons={{{checked: <CheckedIcon />, unchecked: <UncheckedIcon />}}` |
| `aria-labelledby` | _string_   | The value of the `aria-labelledby` attribute of the wrapped \<input\> element |
| `aria-label`      | _string_   | The value of the `aria-label` attribute of the wrapped \<input\> element |
| `disabled`        | _boolean_  | If `true`, the toggle is disabled. If `false`, the toggle is enabled |

## Installation

```bash
npm install @shopfront/react-toggle
```

## Usage

If you want the default styling, include the component's [CSS](./style.css) with

```javascript
import "@shopfront/react-toggle/style.css" // for ES6 modules
// or
require("@shopfront/react-toggle/style.css") // for CommonJS
```

## Development

```shell
npm install
npm run dev
```

## Build

```shell
npm run build
```

## License

MIT
npm package: @shopfront/select
Description: An opinionated select component for React
Author: Shopfront
Latest version: 1.1.6

# @onshopfront/select

An opinionated asynchronous select component for React.

## Installation

Simply install as any other node dependency

```
yarn add @onshopfront/select
```

```
npm install --save @onshopfront/select
```

## Getting Started

Import the component where ever you'd like to use it

```
import { Select } from "@onshopfront/select"

export const MyForm = () => {
    return (
        <Select />
    );
}
```

Somewhere in your application you'll also need to expose the CSS stylesheet
or implement it yourself. If you're using a code bundling tool such as webpack
this is easy. We normally import it during our bootstrapping phase for our application.

```
import "@onshopfront/select/dist/select.css"
```