open-index/open-npm huggingface dataset:
npm package: @nans13/react-bs-grid
Description: Twitter Bootsrap Grid system for React
Author: Nans
Latest version: 2.0.3

# React Flex Grid system

A tiny library that add only the Twitter Boostrap grid system in your project.

  

## Installation

`npm install @nans/react-bs-grid`

## Usage

### Simple use

    <Container>
	    <div>items</div>
	   	<div>items</div>
	    <div>items</div>
	</Container>

### Parameters
**Direction**

    <Container direction='row'||'row-reverse'||'column'||'column-reverse' />

![flex direction](https://css-tricks.com/wp-content/uploads/2013/04/flex-direction2.svg)
    

------------
**Justify**

    <Container justify='flex-start'||'flex-end'|| 'space-between'||'space-around'||'center', />

![flex direction](https://css-tricks.com/wp-content/uploads/2013/04/justify-content-2.svg)

------------
**alignItem**

    <Container alignItem='flex-start'||'flex-end'||'stretch'|| 'center', />

![flex direction](https://css-tricks.com/wp-content/uploads/2014/05/align-items.svg)

------------
**alignContent**

    <Container alignContent='flex-start'||'flex-end'||'space-between'||'space-around'||'stretch'||'center' />

![flex alignContent](https://css-tricks.com/wp-content/uploads/2013/04/align-content.svg)
    
------------
**Wrap**

    <Container wrap='nowrap'||'wrap'||'wrap-reverse' />

![flex wrap](https://css-tricks.com/wp-content/uploads/2014/05/flex-wrap.svg)

------------

**Hidden**

    <Container hidden={true || false} />

## Usage with Col
col allows to manage parameters on children.

    <Container>
	    <Col order="1" alignSelf="stretch"></Col>
	    <Col></Col>
    </Container>

### Parameters
**Order**

    <Col order={INT} />

![flex direction](https://css-tricks.com/wp-content/uploads/2013/04/order-2.svg)
    

------------
**Align-Self**

    <Col alignSelf='flex-start'||'flex-end'||'stretch'||'center', />

![flex direction](https://css-tricks.com/wp-content/uploads/2014/05/align-self.svg)

------------
**Flex**
Manage the "col" size

    <container>
        <Col flex=1/>
	    <Col flex=2/>
	    <Col flex=1/>
    </container>

------------

**Hidden**

    <Container hidden={true || false} />

------------


## Usage with display management 
Like twitter bootstrap I use *xs, sm, md, xl, lg* to make the difference between all the display size.

| type  | screen size   |
| ------------ | ------------ |
| xs | < 576px  |
| sm  |  < 768px |
| md  | < 992px  |
| lg  | < 1200px  |
| xl  | other |

each type use a simple Object

    { 
	    direction: [directionType],
		justify: [justifyType],
		wrap: [wrapType],
		alignContent: [alignContentType],
		alignItem: [alignItemType],
		hidden: [bool]
	}

    <Container 
	    xs={{hidden: true}} 
	    sm={{direction: 'column'}} 
	    md={{direction: 'row'}} 
	/>
	
	<Col 
	    xs={{hidden: true}} 
	    sm={{flex: 2}} 
	/>

**The display works with "min-width" so if you want to display in column from md (so lg and xl included) you just have to put the parameters in md = {...}**



## Storybook

`npm run storybook`

## Test

`npm run test:watch`
npm package: @nanspace/ui
Description: nan ui
Author: mehisa
Latest version: 0.1.1

# @nanspace/nan

## @nanspace/ui

An awesome nan UI component builed with styled-components.

Component List:

- [ ] Theming
- [x] Box
  - [x] Theming
- [x] Grid
  - [x] Theming
- [x] Button
  - [x] Theming
- [x] Tooltip
  - [x] Theming
- [x] TextView
  - [x] Theming
- [x] Input
  - [x] Theming
- [x] InputField
  - [x] Theming
- [x] Tooltip
  - [x] Theming
- [x] Alert
  - [x] Theming
- [x] Modal
  - [x] Theming
- [x] WLTPagination
  - [x] Theming
- [x] CheckBox
  - [ ] Theming

## @nanspace/utils

COMING SOON

## @nanspace/core

COMING SOON

## @nanspace/icon

COMING SOON
npm package: @nanspace/util
Description: nan util
Author: mehisa
Latest version: 0.1.1

# `@nanspace/util`

> TODO: description

## Usage

CommonJS

```javascript
const { uriEncode } = require('@nanspace/util')

const obj = {
  page: 1,
  pageSize: 10,
  filter: {
    user: {
      name: 'john',
    },
  },
}

const encodedParams = uriEncode(obj)
```

CommonJS

```javascript
import { uriEncode } from '@nanspace/util'

const obj = {
  page: 1,
  pageSize: 10,
  filter: {
    user: {
      name: 'john',
    },
  },
}

const encodedParams = uriEncode(obj)
```
npm package: @nanta/capacitor-intents
Description: Simple intent tools for Capacitor on Android
Author: Mike Summerfeldt
Latest version: 1.1.1

# @nanta/capacitor-intents

Simple intent tools for Capacitor on Android platform.

Origin fork from [capacitor-intents](https://github.com/IT-MikeS/capacitor-intents)。
This fork mainly support android 14+ platform.

## Install

```bash
npm install @nanta/capacitor-intents
npx cap sync
```

## Usage

## API

<docgen-index>

* [`registerBroadcastReceiver(...)`](#registerbroadcastreceiver)
* [`unregisterBroadcastReceiver(...)`](#unregisterbroadcastreceiver)
* [`getDeviceInfo()`](#getdeviceinfo)
* [`sendBroadcastIntent(...)`](#sendbroadcastintent)

</docgen-index>

<docgen-api>
<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->

### registerBroadcastReceiver(...)

```typescript
registerBroadcastReceiver(options: { filters: string[]; }, callback: (data: { [key: string]: any; }) => void) => any
```

| Param          | Type                                                    |
| -------------- | ------------------------------------------------------- |
| **`options`**  | <code>{ filters: {}; }</code>                           |
| **`callback`** | <code>(data: { [key: string]: any; }) =&gt; void</code> |

**Returns:** <code>any</code>

--------------------


### unregisterBroadcastReceiver(...)

```typescript
unregisterBroadcastReceiver(options: { id: string; }) => any
```

| Param         | Type                         |
| ------------- | ---------------------------- |
| **`options`** | <code>{ id: string; }</code> |

**Returns:** <code>any</code>

--------------------


### getDeviceInfo()

```typescript
getDeviceInfo() => any
```

**Returns:** <code>any</code>

--------------------


### sendBroadcastIntent(...)

```typescript
sendBroadcastIntent(options: { action: string; value: { [key: string]: any; }; }) => any
```

| Param         | Type                                                             |
| ------------- | ---------------------------------------------------------------- |
| **`options`** | <code>{ action: string; value: { [key: string]: any; }; }</code> |

**Returns:** <code>any</code>

--------------------

</docgen-api>
npm package: @nanta/ui
Description: ant-design based ui framework.
Author: Aborn Jiang
Latest version: 0.1.11

# nanta-ui

 <p>
     <a href="https://github.com/nantajs/nanta-ui/actions/workflows/docs.yml"><img src="https://github.com/nantajs/nanta-ui/actions/workflows/docs.yml/badge.svg"></a>
     <a href="https://www.npmjs.com/package/@nanta/ui"><img src="https://badgen.net/npm/dm/@nanta/ui" alt="Download"></a>
     <a href="https://www.npmjs.com/package/@nanta/ui"><img src="https://badgen.net/npm/v/@nanta/ui" alt="Version"></a>
     <a href="https://www.npmjs.com/package/@nanta/ui"><img src="https://badgen.net/npm/license/@nanta/ui" alt="License"></a> 
</p>

Ant-design based UI framework. [Docs](https://nantajs.github.io/nanta-ui/#/).  

![index](docs/nantaui.png)

## Features
- Schema-style form/table design.  
- Light-weight ui component library.  
- Typescript support.  
- Support vue 3 and nuxt 3 (SSR support).  
- Vite support.  
- I18N support (Default 'en').  

## Deps

- Vue 3.0
- [ant-design-vue](https://github.com/vueComponent/ant-design-vue)  
- Lodash
- vue-i18n

## Setup

1. Install **nanta-ui**

```shell
yarn add @nanta/ui
yarn install
```

2. Configure
- **Vue 3** framework   
  Install Antd plugin in `main.ts`
```js
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import { setupNanta } from '@nanta/ui';
import '@nanta/ui/dist/style.css';
const app = createApp(App);
setupNanta(app);
app.use(Antd).mount('#app');
```

Here is an example in `docs`, and another example [nanta-ui-vue](https://github.com/nantajs/nanta-ui-vue):   
```shell
yarn docs
```

- **Nuxt 3** framework  
  Auto-install Antd plguin, create `nantaui.ts` in `<projectDir>/plugins/` with the following boilerplate:  
```js
// plugins/nantaui.ts
import { defineNuxtPlugin } from '#app';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import { setupNanta } from '@nanta/ui';
import '@nanta/ui/dist/style.css';

export default defineNuxtPlugin(nuxtApp => {
  setupNanta(nuxtApp.vueApp);
  nuxtApp.vueApp.use(Antd)
})
```
Here is an exmple [nanta-ui-nuxt](https://github.com/nantajs/nanta-ui-nuxt)

- **Nuxt 3 Module** setup (recommended)  
The simplest way to setup nanta in Nuxt env. Your can use [nanta](https://github.com/nantajs/nuxt-nanta) module.  

```shell
yarn add @nanta/nuxt-nanta
yarn install
```

And add **nanta** module to nuxt.config.ts  
```ts
export default defineNuxtConfig({
  modules: [
    'nanta',    
  ],
})
```

## Notice

This project still in alpha stage, you can try it in non-production environment.

## How to dev

1. build package

```shell
yarn package
```

2. test pkg in local

```shell
yarn pack  # pack local
npm install nanta-ui-v0.1.0-alpha.1.tgz  # install local
```

3. publish to npm
Remove nanta-ui && local deps befor publish it.

```shell
npm publish --access public
```