open-index/open-npm huggingface dataset:
npm package: @rokku/design
Description: Mobile UI Components built on React
Author: xtmike008@gmail.com
Latest version: 0.0.21

<p align="center">
    <img alt="logo" src="http://cdn.rokku.icu/logo.png" width="120" style="margin-bottom: 10px;">
</p>

<h1 align="center">Rokku</h1>

<p align="center">🍙 轻量、可靠的移动端 React 组件库</p>

<p align="center">
    <img src="https://img.shields.io/npm/v/@rokku/design.svg?style=flat-square" alt="npm version" />
    <img src="https://img.shields.io/bundlephobia/minzip/@rokku/design?style=flat-square" >
    <img src="https://img.shields.io/github/languages/top/Hyattria/rokku?style=flat-square">
    <img src="https://img.shields.io/librariesio/release/npm/@rokku/design?style=flat-square">
    <img src="https://img.shields.io/npm/dt/@rokku/design.svg?style=flat-square&color=#4fc08d" alt="downloads" />
    <img src="https://img.shields.io/jsdelivr/npm/hm/@rokku/design?style=flat-square" alt="Jsdelivr Hits">
</p>

<p align="center">
  🔥 <a href="http://www.rokku.icu">文档网站</a>
</p>

## 特性

- 30+ 高质量组件，覆盖移动端基本场景
- 支持按需引入
- 支持主题定制
- 支持 TypeScript

## 📦 Init App

npm

```bash
npm install
```

yarn

```bash
yarn
```

## 🔨 使用

### 启动文档

```bash
yarn start
```

### 打包文档

```bash
yarn docs:build
```

### 发布文档

```bash
yarn docs:deploy
```

### 打包组件

```bash
yarn build
```

### 测试组件

```bash
yarn test
```

### 发布 npm 包

```bash
yarn release
```

## Components completion status

### Layout Components

- [x] Flex 布局

### Basic Components

- [x] Button 按钮
- [x] Icon 图标
- [x] Popup 弹出框
- [x] Cell 单元格
- [x] Toast 轻提示
- [x] 内置样式（IPhoneX 适配，细边框等）

### Form Components

- [x] Field 输入框
- [x] CheckBox 复选框
- [x] Radio 单选框
- [x] Picker 选择器
- [x] Stepper 步进器
- [x] Search 搜索
- [x] DatetimePicker 时间选择
- [x] PasswordInput 密码输入框

### Display Components

- [x] Collapse 折叠面板
- [x] NoticeBar 通知栏
- [x] Sticky 粘性布局
- [x] Swipe 轮播
- [x] Empty 空状态
- [x] List 列表
- [x] Tag 标签

### Action Components

- [x] Loading 加载
- [x] Overlay 遮罩层
- [x] Dialog 弹出层
- [x] PullRefresh 下拉刷新

### Navigation Components

- [x] IndexBar 索引栏
- [x] NavBar 导航栏
- [x] Tabs 标签页
npm package: @rokku/icons
Description: rokku icons
Latest version: 1.0.5

# Rokku Icons

## Install

#### NPM

```shell
npm i @rokku/icons -S
```

#### YARN

```shell
yarn add @rokku/icons
```

## Contribution

### Update Icons

1. Update assets/icons.sketch
2. Make a Pull Request

### Add New Icon

1. Add new icon to assets/icons.sketch
2. Add icon name to src/config.js
3. Add icon codepoints to build/codepoints.js
4. Make a Pull Request
npm package: @rokku/touch-emulator
Description: Rokku touch emulator
Latest version: 1.0.0

# rokku Touch Emulator

在桌面端上模拟移动端 touch 事件，实现方式来自于 [hammerjs/touchemulator](https://github.com/hammerjs/touchemulator).

## Install

#### NPM

```shell
npm i @rokku/touch-emulator -S
```

#### YARN

```shell
yarn add @rokku/touch-emulator
```

## 使用指南

直接在代码中引入模块即可，模块会自动完成初始化并生效

```js
import '@rokku/touch-emulator';
```
npm package: @rokmohar/medusa-payment-manual
Description: Manual payment plugin for Medusa 2
Author: Rok Mohar
Latest version: 1.0.3

# Manual payment for MedusaJS v2

## Installation

Run the following command to install the plugin with **npm**:

```bash
npm install --save @rokmohar/medusa-payment-manual
```

Or with **yarn**:

```bash
yarn add @rokmohar/medusa-payment-manual
```

## ⚠️ MedusaJS v2.5.0 or newer

This plugin is only for MedusaJS v2.5.0 or newer.

If you are using MedusaJS v2.4.0 or older, please use the [older version of this plugin](https://github.com/rokmohar/medusa-payment-manual/tree/v0.1.4).

## Configuration

Add the plugin to your `medusa-config.ts` file:

```js
import { loadEnv, defineConfig } from '@medusajs/framework/utils'

loadEnv(process.env.NODE_ENV || 'development', process.cwd())

module.exports = defineConfig({
  // ... other config
  modules: [
    // ... other modules
    {
      resolve: '@medusajs/medusa/payment',
      options: {
        providers: [
          // ... other providers
          {
            resolve: '@rokmohar/medusa-payment-manual',
            id: 'manual',
          },
        ],
      },
    },
  ],
})
```
npm package: @rokmohar/medusa-plugin-algolia
Description: Algolia plugin for Medusa 2
Author: Rok Mohar
Latest version: 1.0.7

# Algolia plugin for Medusa V2

## Installation

Run the following command to install the plugin with **npm**:

```bash
npm install --save @rokmohar/medusa-plugin-algolia
```

Or with **yarn**:

```bash
yarn add @rokmohar/medusa-plugin-algolia
```

### Upgrade to v1.0

_This step is required only if you are upgrading from previous version to v1.0._

- The plugin now supports new MedusaJS plugin system.
- Subscribers are included in the plugin.
- You don't need custom subscribers anymore, you can remove them.

## ⚠️ MedusaJS v2.4.0 or newer

This plugin is only for MedusaJS v2.4.0 or newer.

If you are using MedusaJS v2.3.1 or older, please use the [older version of this plugin](https://github.com/rokmohar/medusa-plugin-algolia/tree/v0.1.1).

## Configuration

Add the plugin to your `medusa-config.ts` file:

```js
import { loadEnv, defineConfig } from '@medusajs/framework/utils'

loadEnv(process.env.NODE_ENV || 'development', process.cwd())

module.exports = defineConfig({
  // ... other config
  plugins: [
    // ... other plugins
    {
      resolve: '@rokmohar/medusa-plugin-algolia',
      options: {
        applicationId: process.env.ALGOLIA_APP_ID,
        adminApiKey: process.env.ALGOLIA_ADMIN_API_KEY,
        settings: {
          products: {
            indexSettings: {
              searchableAttributes: ['title', 'description'],
              attributesToRetrieve: [
                'id',
                'title',
                'description',
                'handle',
                'thumbnail',
                'variants',
                'variant_sku',
                'options',
                'collection_title',
                'collection_handle',
                'images',
              ],
            },
            // Create your own transformer
            /*transformer: (product) => ({
              id: product.id,
              // other attributes...
            }),*/
          },
        },
      },
    },
  ],
})
```

## ENV variables

Add the environment variables to your `.env` and `.env.template` file:

```env
# ... others vars
ALGOLIA_APP_ID=
ALGOLIA_ADMIN_API_KEY=
```

## Add search to Medusa NextJS starter

You can find instructions on how to add search to a Medusa NextJS starter inside the [nextjs](nextjs) folder.
npm package: @rokmohar/medusa-plugin-pushover
Description: Pushover plugin for Medusa 2
Author: Rok Mohar
Latest version: 0.1.2

# Pushover plugin for Medusa V2

## Installation

Run the following command to install the plugin with **npm**:

```bash
npm install --save @rokmohar/medusa-plugin-pushover
```

Or with **yarn**:

```bash
yarn add @rokmohar/medusa-plugin-pushover
```

## Configuration

Add the plugin to your `medusa-config.ts` file:

```js
import { loadEnv, defineConfig } from '@medusajs/framework/utils'

loadEnv(process.env.NODE_ENV || 'development', process.cwd())

module.exports = defineConfig({
  // ... other config
  plugins: [
    // ... other plugins
    {
      resolve: '@rokmohar/medusa-plugin-pushover',
      options: {
        config: {
          userKey: process.env.PUSHOVER_USER_KEY ?? '',
          apiToken: process.env.PUSHOVER_TOKEN ?? '',
        },
      },
    },
  ],
})
```

## ENV variables

Add the environment variables to your `.env` and `.env.template` file:

```env
# ... others vars
PUSHOVER_USER_KEY=
PUSHOVER_API_TOKEN=
```
npm package: @rokoli/vue-tiny-i18n
Description: A very tiny Vue3 i18n library.
Latest version: 0.3.0

# vue-tiny-1i8n

A very tiny Vue3 i18n library.

## Install

```sh
npm install --save @rokoli/vue-tiny-i18n
```

## Configuration with Vite

```js
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import TinyI18nPlugin from '@rokoli/vue-tiny-i18n/plugin'

export default defineConfig({
  plugins: [vue(), TinyI18nPlugin()],
})
```

## Usage

Create the i18n plugin along with Vue’s `createApp`:

```js
// main.js
import { createApp } from 'vue'
import { createI18n } from '@rokoli/vue-tiny-i18n'
import App from './App.vue'

createApp(App)
  .use(createI18n({ locale: 'de' }))
  .mount('#app')
```

Then use it in your components like this:

```vue
<template>
  <h1>{{ t('title') }}</h1>
</template>

<script setup>
import { useI18n } from '@rokoli/vue-tiny-i18n'
const { t } = useI18n()
</script>

<i18n lang="yaml">
en:
  title: Hello World!
de:
  title: Hallo Welt!
</i18n>
```