open-index/open-npm huggingface dataset:
npm package: @gdjiami/cli
Description: CLI for build front end project.
Author: ivan lee
Latest version: 1.3.3-alpha5

# CLI

**[Getting Started](https://gdjiami.github.io/jm-cli)**

CLI for build Typescript & React App
jm-cli 是 mygzb 前端团队使用的项目运行和构建工具。提供了高性能, 强团队编码规范, 约定大于配置的构建环境. 可以让开发者更专注于业务的开发, 增强项目的可维护性.

## 安装

```shell
yarn global add @gdjiami/cli
# or
npm i -g @gdjiami/cli

jm help
```

jm-cli 支持在全局模式调用，也支持作为项目的依赖调用。我们推荐后者，因为他和项目是绑定版本的，不会应该版本不兼容而无法运行。

## 创建项目

```shell
jm create my-app
```

上面的命令将创建一个默认的项目。 项目结构如下:

```sh
my-app
├── README.md
├── node_modules
├── package.json
├── yarn.lock
├── global.d.ts
├── tsconfig.json
├── tslint.json
├── .gitignore
├── .env
├── .env.production
├── .env.development
├── public
└── src
    ├── layouts
    |   └── layout.pug
    ├── css
    |   └── ...
    ├── components
    |   └── ...
    ├── containers
    |   └── ...
    ├── admin.pug
    ├── admin.tsx
    ├── index.pug
    └── index.tsx
```

jm-cli 天然支持多页应用，这里的 admin.pug 和 index.pug 就是两个应用入口。jm-cli 会搜索与它们同名的 Typescript 入口文件。 项目结构的具体详情将在 Folder Structure 中说明。现在可以打开项目目录运行:

```shell
cd my-app
```

## NPM Scripts

新创建的项目会内置以下命令

### start

在开发服务器中运行，默认运行在 8080 端口，在启动成功后会自动开发默认浏览器.

### build

编译生产环境包，资源将输出到 dist 目录

### serve

运行生产环境包。这个命令会采用和 start 一样的配置（例如端口和代理配置）来运行服务器，方便测试生产环境包.

### analyze

对 webpack 的生产环境包构建进行分析，方便开发者对应用进行拆包优化.

## License

jm-cli is open source software licensed as [MIT](LICENSE).
npm package: @gdjiami/gzb-jssdk
Description: MyGZB Webview JSSDK
Author: ivan
Latest version: 1.10.13

# GZB JSSDK(v1)

**注意：新项目使用 jssdk ,请直接使用 @gzbapp/sdk，@gdjiami/gzb-jssdk 只在老项目中使用，如有更新，则同步更新 @gzbapp/sdk 库。该库将不再维护。**

工作宝JSSDK, 是[工作宝APP](https://www.mygzb.com/)面向web应用提供的开发工具包， 
用于在工作宝应用的webview内调用APP 服务. 目前支持`PC`, `Android`, `IOS`平台。

通过这些接口可以实现选择图片，获取当前位置，分享，拨打电话， 发送短信，打开工作宝应用对话框等功能，
提升工作宝嵌入应用的网页体验

## 安装

```
yarn add @gdjiami/gzb-jssdk
```

或者
```
npm install @gdjiami/gzb-jssdk --save
```

## 接口协议
[GZB-JSSDK-SPECS](http://jmfe.gitee.io/jm-fe/sdk/spec.html)

## 文档和DEMO

[GZB-JSSDK-DEMO](http://jmfe.gitee.io/gzb-jssdk-demo/)

## 使用
基本使用

```typescript
import Api, { BridgeResponseError } from '@gdjiami/gzb-jssdk'
const api = api()

// 简单接口
api.setTitle('hello gzb')

```

UMD版本
```html
<script src="path/to/gzb-jssdk.umd.js"></script>
<script>
  var api = GZB.api()
  api.setTitle('hello gzb')
</script>
```

异步回调接口

```typescript
async function chooseImage() {
  try {
    // 接口返回Promise， 所有可以配合使用async/await 编写更加简洁的异步代码
    const { width, height, name, quality, dataUrl } = await api.chooseImage({
      quality: 80
    })
    preview(dataUrl)
  } catch(error: BridgeResponseError) {
    console.log(error.errCode, error.message)
  }
}
```

事件接口, 工作宝JSSDK， 目前支持两种类型的事件， `beforeunload`和`beforegoback`，
分别对应原生窗口中的关闭和返回按钮. 

**beforeunload**: beforeunload 事件类似于浏览器端的beforeunload 事件，你可以通过返回字符串来弹出一个确认框,
如果用户点击确认就会退出应用。
```typescript
api.addListener('beforeunload', event => {
  return 'Are Sure to exit?'
})
```

你也可以通过返回false，会调用`event.preventDefault()` 来阻止默认行为。 需要注意的是返回
false 还会阻止后续订阅者的调用.

```typescript
api.addListener('beforeunload', event => {
  event.preventDefault()
  myCustomConfirm('确认退出', () => {
    saveSomething()
    api.exit()
  })
})
```

> 事件接口目前有较为严重的问题，当你开发的是单页应用， 可以考虑使用这些接口。如果是多页应用，
> 由于原生Bridge绑定原有的回调，当切换页面后，会导致绑定事件的按钮失效。详见[已知问题](#known-issues)
> 解决这个问题的暂时方法是使用`api.locationTo` 来进行网站导航

用户代理检测

```typescript
import { Device } from '@gdjiami/gzb-jssdk'

if (Device.mobile()) {
  // is mobile
} else if (Device.tablet()) {
  // is tablet
} else {
  // is desktop
}
```

## 兼容性

1.0 版本使用`Typescript`重写，依然兼容旧的接口，只不过**只在**`umd`压缩版本中提供，文件为`dist/gzb-jssdk.umd.js`,  可以
通过script标签进行导入 ：

```html
<script src="path/to/gzb-jssdk.umd.js"></script>
<script>
// 接口调用
var api = customApi.init()
api.setTitle('hello')
api.chooseImg({
  quality: 80,
  targetType: 'width',
  target: 700,
}, function(res) {
  if (res.result === 'true') {
    // 调用成功
    // 预览图片
    preview(res.imgData)
  } else {
    console.log(res.errCode, errMsg)
  }
})

// 用户代理检测
var detector =  window.JH.Detector
detector.Android()
detector.isMobile()
detector.IOS()
// ...
</script>
```

> 注意：旧版接口将在下一大版本中移除，不要将他们用在新项目中。详见[CHANGELOG](./CHANGELOG.md)

> JSSDK 依赖于Promise，你需要确保你的环境支持Promise


<h2 id="known-issues">已知问题</h2>

+ `setBar` 不能应用于多页应用，如果在当前页面绑定了close和goback事件， 当跳转到其他页面时，close，goback按钮将会失效, 因为没办法找到原来的回调，所以目前只建议在单页应用只使用`api.addListener('beforeunload')` 和`api.addListener('beforegoback')`
npm package: @gdjiami/hooks
Description: react hooks for mygzb.com
Author: ivan
Latest version: 0.5.1

# React Hooks 🚧

A collection for React Hooks

## Install

```shell
yarn add @gdjiami/hooks -D
#or
npm i @gdjiami/hooks --save-dev
```

## Usage

```jsx
import React, { useState } from 'react'
import {
  useToggle,
  useOnMount,
  useOnUnmount,
  useOnUpdate,
} from '@gdjiami/hooks'

export const Countter = () => {
  const [open, toggleOpen] = useToggle(true)
  const [counter, setCounter] = useState(0)

  useOnMount(() => {
    console.log('mounted')
  })

  useOnUpdate(() => {
    console.log('counter update:', counter)
  }, counter)

  useOnUnmount(() => {
    console.log('will unmount')
  })

  return (
    <div>
      <button onClick={toggleOpen}>{open ? 'on' : 'off'}</button>
      {open && (
        <div>
          <div>counter: {counter}</div>
          <div>
            <button onClick={() => setCounter(counter + 1)}>increase</button>
            <button onClick={() => setCounter(counter + 1)}>decrease</button>
          </div>
        </div>
      )}
    </div>
  )
}
```

## Example

## Docs

## Related Project

- [react-hooks-global-state](https://github.com/dai-shi/react-hooks-global-state): 提供类 redux 的全局状态管理
- [react-spring](https://github.com/react-spring/react-spring): 弹性动画
- [mobx-react-lite](https://github.com/mobxjs/mobx-react-lite): 配合 mobx 使用
- [rxjs-hooks](https://github.com/LeetCode-OpenSource/rxjs-hooks): 配合 rxjs 6 使用
npm package: @gdjiami/jslib
Description: Jiami FrontEnd helpers and Services
Author: ivan
Latest version: 0.5.2

# 佳米前端工具库

文档说明请看 ☞ [这里](https://gdjiami.github.io/jslib/code/globals.html)

IE8 兼容版本位于 ie8/ 子目录下
npm package: @gdjiami/jsonrpc-encryption
Description: JSON RPC Client By Encryption
Author: jerry
Latest version: 1.2.9-beta1

# jsonrpc-encryption

## 介绍

基于 @gdjiami/jsonrpc 封装了加解密操作

加密算法: RSA + AES

在接口请求时能够自动完成上传数据的加密与接收数据的解密, 前端开发无需过多考虑数据的加解密操作

## 安装

```shell
yarn add @gdjiami/jsonrpc-encryption
```

## 使用

```js
// rpc.ts 生成rpc实例
const rpc = getInstance(root, { ignoreProtocolError: true })
```

```js
// 在入口文件处初始化加解密密钥,与后台进行协商
useOnMount(async () => {
  try {
    return await rpc.initial()
  } catch (error) {
    message.error(error.message)
  }
  return null
})
```

```js
// 使用 encryptRequest 进行加密请求, 其返回数据已自动解密处理
const authResult = await rpc.encryptRequest('auth.login', { account, password })
```

## 注意事项

- 前后端的加解密操作必须保持一致, 否则会出现解密失败

- 只要是刷新 securityId 报错, 就会重新进行协商密钥

- 其他请求返回错误码为 642, 会重新进行协商密钥

## 参考

[JSONRPC 协议](https://www.jsonrpc.org/specification)

## License

This project is licensed under the terms of the
[MIT license](LICENSE).
npm package: @gdjiami/rc-components-ie8
Description: mygzb.com React Components
Author: ivan
Latest version: 0.3.3

# React Components IE 8 版本

React 组件库， 收集了工作宝中后台应用的常用组件或套件. 致力于减少应用开发的代码重复，提高维护效率

## 依赖

- [react-router v3](https://github.com/ReactTraining/react-router/blob/v2.8.1/docs/API.md)
- [history v3](https://github.com/ReactTraining/history/tree/v3)
- [antd v1](https://1x.ant.design/components/table/#components-table-demo-expand-children)
- [anujs](TODO:)
npm package: @gdkf/cli-theme
Description: 主题生成工具
Latest version: 0.0.7

# @gdkf/cli-theme

> 主题生成工具.


> 当前版本仅支持 kfui-terminal@2.6.x ， kfui-terminal@2.5.x 系列不支持主题生成；


## Installation
全局安装脚手架
```shell
npm i @gdkf/cli-theme -g
```

安装主题包
```shell
npm i @gdkf/theme-terminal-v2 -D
```

## CLI
```shell
# 初始化变量文件
kt --init [file path]

# 生成主题
kt [--config variable file path] [--out theme path]
```

## Options
### config
Variable file path（变量文件路径）, default `./kamfu-variables.scss`.

### out
Theme output path（生成的主题路径）, default `./theme`.


## Examples

### 安装依赖
```shell
# 全局安装主题生成工具
npm i @gdkf/cli-theme -g

# 安装开发依赖-主题包
npm i @gdkf/theme-terminal-v2 -D

# 安装生产依赖-组件库（2.6.*）
npm i kfui-terminal
```
### 在项目中应用 

> 在`kfui-terminal@2.6.x`中使用

- 执行`kt --init`指令初始化变量文件，默认会在项目根目录生成`./kamfu-variables.scss`文件
  ```shell
  # 初始化变量文件
  kt --init
  ```

- 修改`./kamfu-variables.scss`文件中的主题对应的颜色值

- 执行`kt`指令生成主题，默认会在项目根目录中生成`./theme`主题文件夹
  ```shell
  # 生成主题
  kt
  ```

- 在main.js引入生成的主题css
  ```javascript 
  // 引入elementUI,不需要引入element-ui的css文件
  import Element from 'element-ui'
  import Viewer from 'viewerjs'
  import 'viewerjs/dist/viewer.css'
  import { TweenLite } from 'gsap'
  import KamfuUI from 'kfui-terminal'
  // import 'kfui-terminal/lib/theme-chalk/index.css' // 默认主题
  import '../theme/index.css' // 引入生成的主题包，主题包位置可自行存放


  Vue.prototype.$Viewer = Viewer
  Vue.prototype.$TweenLite = TweenLite

  Vue.use(Element)
  Vue.use(KamfuUI)

  ```




## License
MIT
npm package: @gdkmd/http
Description: Sử dụng cho gdk
Author: Do Vui
Latest version: 1.0.6

##HƯỚNG DẪN SỬ DỤNG
#Ví dụ: app.module.ts
``` 
import {GdkHttpClientConfigModule} from '@gdkmd/http';

const appConfig: GdkConfigUrl = {  
  urlBaseServer: 'URLAPI'
  urlLogin: '/auth/login',
  urlHome: '/'
}

@NgModule({
  declarations: [
    AppComponent,



  ],
  imports: [
   .....................
    GdkHttpClientConfigModule.forRoot(appConfig)
   
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
npm package: @gdkmd/httpclient
Description: Sử dụng cho gdk
Author: Do Vui
Latest version: 1.1.28

##HƯỚNG DẪN SỬ DỤNG
#Ví dụ: app.module.ts
>Version: >1.0.9 dùng cho mongodb
``` 
import{GdkConfigUrl} from '@gdkmd/httpclient';
const appConfig: GdkConfigUrl = {  
  urlBaseServer: 'URLAPI'
}

@NgModule({
  declarations: [
    AppComponent,



  ],
  imports: [
   .....................
    GdkHttpClientConfigModule.forRoot(appConfig)
   
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Tìm và thêm như bên dưới:
"scripts": [..............
              "node_modules/alertifyjs/build/alertify.min.js",
              ................
            ]
```
npm package: @gdkmd/httphnm
Description: Sử dụng cho gdk
Author: Do Vui
Latest version: 1.0.0

##HƯỚNG DẪN SỬ DỤNG
#Ví dụ: app.module.ts
>Version: >1.0.9 dùng cho mongodb
``` 
import{GdkConfigUrl} from '@gdkmd/httpclient';
const appConfig: GdkConfigUrl = {  
  urlBaseServer: 'URLAPI'
}

@NgModule({
  declarations: [
    AppComponent,



  ],
  imports: [
   .....................
    GdkHttpClientConfigModule.forRoot(appConfig)
   
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Tìm và thêm như bên dưới:
"scripts": [..............
              "node_modules/alertifyjs/build/alertify.min.js",
              ................
            ]
```
npm package: @gdkmd/httpxhd
Description: Sử dụng cho gdk
Author: Do Vui
Latest version: 1.0.2

##HƯỚNG DẪN SỬ DỤNG
#Ví dụ: app.module.ts
>Version: >1.0.9 dùng cho mongodb
``` 
import{GdkConfigUrl} from '@gdkmd/httpclient';
const appConfig: GdkConfigUrl = {  
  urlBaseServer: 'URLAPI'
}

@NgModule({
  declarations: [
    AppComponent,



  ],
  imports: [
   .....................
    GdkHttpClientConfigModule.forRoot(appConfig)
   
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Tìm và thêm như bên dưới:
"scripts": [..............
              "node_modules/alertifyjs/build/alertify.min.js",
              ................
            ]
```
npm package: @gdmod/api
Description: Helper functions to mod GDevelop games and an API to create GDMod mods.
Author: arthuro555
Latest version: 0.3.0

## API

The API is the part that handles mod loading and giving mods an interface to make modding easier.

### Extensions Loader

The extension loader hot loads GDevelop extensions, as they are not included in every game (unused ones are filtered out when exporting), to be able to access GDevelops full functionality inside mods.
The list of includes is generated automatically using some modifications to GDCore (to be able to access includes from javascript) and a simple script. You can find it all here: https://github.com/arthuro555/GDevelop/tree/gdmod-generate-includes-list.
npm package: @gdmod/web-loader
Description: The GDMod loader for the web, in form of a chrome extension.
Author: arthuro555
Latest version: 0.3.0

# Web Loader

This browser extension permits to load mods on web games

## Development

When working on the API, to test changes in the browser, you need to reimport the api into the extension.
The script `npm run watch` will watch for changes and reimport the API automatically.
Note that the manifest in the extension directory is automatically generated. to change it, change the template in this folder.

## Installation

Installation instructions for users [on the wiki](https://github.com/arthuro555/gdmod/wiki/Installation-Guide#install-it).

## Usage

When a page contains a GDevelop game, the extension will automatically patch it to gain access to the whole game.
Then you can click on the top right the Extension's Icon.
If the current page has a patched GDevelop game, it will let you open a control pannel from which you can control the game.

## Internal Work

#### Injection

It works by Injecting a content script to every page and iframe. This script is sandboxed but has access to the chrome APIs (injector.js).
So we set up with the limited access we have a forwarding of window message events and forward it to the all the extension's scripts and pages.
Then we use our limited access to document to add a script element that loads a script (injected.js) that will be loaded by the page and not the extension, and therefore has complete access to everything (it runs unsandboxed).

#### Patching

We now verify if `window.gdjs` is present.
If it is we assume this is a GDevelop game.
In that case we define the global object `GDAPI` and scan for all children of `gdjs` object having "Code" in its name and a child named `func`.
Those are the event sheets of every scene.
We rename the original `func` to `originalFunc` and override func with the following:

```js
function(runtimeScene) {
    window.GDAPI.game = runtimeScene.getGame();
    originalFunc(runtimeScene);
}
```

With that we gain access to the whole game permanently, and with that the control of every scene too.
npm package: @gdn/cors-express-middleware
Description: ## Usage:
Author: Guidion
Latest version: 1.0.8

# Cors Express Middleware

## Usage:

```js
import { Container } from 'inversify';
import CorsMiddleware from '@gdn/cors-express-middleware';
...
let server = new InversifyExpressServer(kernel);
server.setConfig((app: any) => {
  app.use(CorsMiddleware(['test.nl']));
});
...

```
npm package: @gdn/envify-nconf
Description: A ready to use loading to the process.env for nconf.
Author: Guidion
Latest version: 1.3.2

# Envify nconf
A ready to use loading to the process.env for nconf.

## Installation

```bash
npm install --save @gdn/envify-nconf

```

You can make use of this library by calling is as soon as possible in your project.
Example:
```js
import { load } from '@gdn/envify-nconf';
// Load config settings
load();
...

```
OR

```js
require('@gdn/envify-nconf').load();
...

```

The .load function has 2 parameters:
1. configFolder: string | Default: process.cwd() + /config
2. branch: string | Optional | default: checks env vars for Travis and CircleCI branches


## Hierarchy and settings
The following settings will be loaded in the following hierarchy:
1. args
2. env
3. local.json
4. {branch}.json
5. default.json
npm package: @gdn/library
Description: Guidion library
Author: Ionic Team
Latest version: 0.0.7

# Guidion Library with Stencil

## Getting Started

Run project:

```bash
npm install
npm start
```

To watch for file changes during develop, run:

```bash
npm run dev
```

To build the component for production, run:

```bash
npm run build
```

## Publish to NPM

```bash
npm version patch/minor/major
npm publish
```
npm package: @gdn/meteor-model
Description: Implements a basic functionality to build Meteor models that hold business logic, validation and data persistance.
Author: Guidion B.V.
Latest version: 0.3.2

![travis build](https://travis-ci.com/GuidionDev/meteor-model.svg?token=bMu85Urom9SKygWhZ7dr&branch=master)

## meteor-model

Implements a basic functionality to build Meteor models that hold business logic, validation and data persistance. It's built to work in combination with typescript.

### Functionality

##### 1. Assign default attributes
##### 2. Validate records according to its validation rules
##### 3. Generate error messages for every invalid attributes
##### 4. Persist data through a Meteor endpoint (when used in the browser)
##### 5. Persist data through Mongo (when used in Node)

### Using it in your project

##### 1. npm install --save @gdn/meteor-model
##### 2. Extend from either meteorModel or baseModel
###### Use BaseModel if you just need validation and no persistance, MeteorModel contains both.
##### 3. Make sure to set the COLLECTION and COLLECTION_NAME fields with your mongo collection and it's name.
###### If you use Meteor model on the front-end, for example to save, it will try to use a meteor method called COLLECTION_NAME.save 
##### 4. Create (typescript) properties to expose the attributes stored and retrieved by meteorModel
##### 5. (Optional) Use validation rules, or create your own to validate user input either server side or client side(or both)

### Example usage

~~~~
import {MeteorModel, RequiredValidator} from '@gdn/meteor-model';
import {products, productCollectionName} from './collections';

export default class Product extends MeteorModel{
  constructor(initialAttributes:Object) {     
    super(initialAttributes);
  }
  
  private validationRules = {
    name: [new RequiredValidator()],    
    price: [new RequiredValidator()]
  }

  public static COLLECTION_NAME = productCollectionName;
  public static COLLECTION = products;

  public get id(){
    return this._attrs._id;
  }

  public get name(){
    return this._attrs.name;
  }
  
  public get price(){
    return this._attrs.price;
  }
}
~~~~

After this you can call Product.FindCursor().fetch() to get a typed list of your products, or Product.fetchOne() for a single product, just like you would use find and findOne on a (mini)mongo collection. You can save an object like so:

~~~~
var prod = new Product( { name: 'shoe', price: 50} );
newProduct.validate();
if(newProduct.isValid()){
  newProduct.save();
} else {
  console.log('validation errors:', newProduct.errors);
}
~~~~      
      
~~~~
npm package: @gdn/react-card
Description: Guidion - Geluk leidt tot succes en niet andersom
Author: Jille Borg
Latest version: 0.2.53

# Guidion React Card Component

## Install

`$ npm install @gdn/react-card --save`

## Usage

`import Card from '@gdn/react-card';`

## Dependencies

Material Icons https://material.io/icons/

## Card properties 

```javascript
export interface CardProps {
	content: CardDetails;
}

export interface CardDetails {
	cardImage?: any;
	title: string;
	link: CardLink;
	text: string;
	footerIcon?: string;
	gatsbyLink?: boolean;
}

export interface CardLink {
	type: string;
	url: string;
	color: string;
	target?: string;
}
```

## Example implementation

[https://github.com/GuidionDev/library/tree/master/src/examples/react-example](https://github.com/GuidionDev/library/tree/master/src/examples/react-example)
npm package: @gdn/react-content-block
Description: Guidion - Geluk leidt tot succes en niet andersom
Author: Jille Borg
Latest version: 0.1.92

# Guidion React ContentBlock Component

## Install

`$ npm install @gdn/react-content-block --save`

## Usage

`import Card from '@gdn/react-content-block';`

## Dependencies

Material Icons https://material.io/icons/

## Card properties 

```javascript
export interface ContentProps {
	title?: string;
	text?: string;
	classes?: string;
	columns?: boolean;
	button?: ContentLink;
}

export interface ContentLink {
	url: string;
	text: string;
	gatsbyLink?: boolean;
}
```

## Example implementation

[https://github.com/GuidionDev/library/tree/master/src/examples/react-example](https://github.com/GuidionDev/library/tree/master/src/examples/react-example)
npm package: @gdn/react-dropdown
Description: Guidion - Geluk leidt tot succes en niet andersom
Author: Jille Borg
Latest version: 0.1.4

# Guidion React Dropdown Component

## Install

`$ npm install @gdn/react-dropdown --save`

## Usage

`import { DropdownList, DropdownLisItem } from '@gdn/react-dropdown';`

## Note

These are only styled components. Opening and closing of the dropdown still needs te be done in the parent component.
npm package: @gdn/react-grid
Description: Guidion - Geluk leidt tot succes en niet andersom
Author: Jille Borg
Latest version: 0.2.7

# Guidion React Grid

## Install

`$ npm install @gdn/react-grid --save`

## Usage

`import { Row, Column } from '@gdn/react-grid';`

## Example implementation

[https://github.com/GuidionDev/library/tree/master/src/examples/react-example](https://github.com/GuidionDev/library/tree/master/src/examples/react-example)
npm package: @gdn/react-highlight
Description: Guidion - Geluk leidt tot succes en niet andersom
Author: Jille Borg
Latest version: 0.1.9

# Guidion React Highlight Component

## Install

`$ npm install @gdn/react-highlight --save`

## Usage

`import Markdown from '@gdn/react-highlight';`


## Icon properties 

```javascript
interface HighlightProps {
	value: any;
}
```
npm package: @gdn/react-icon
Description: Guidion - Geluk leidt tot succes en niet andersom
Author: Jille Borg
Latest version: 0.1.6

# Guidion React Icon Component

## Install

`$ npm install @gdn/react-icon --save`

## Usage

`import Markdown from '@gdn/react-icon';`


## Icon properties 

```javascript
interface IconProps {
	value: any;
}
```
npm package: @gdn/react-markdown
Description: Guidion - Geluk leidt tot succes en niet andersom
Author: Jille Borg
Latest version: 0.1.71

# Guidion React Markdown Component

## Install

`$ npm install @gdn/react-markdown --save`

## Usage

`import Markdown from '@gdn/react-markdown';`


## Card properties 

```javascript
interface MarkdownProps {
	text: any;
}
```
npm package: @gdn/react-navbar
Description: Guidion - Geluk leidt tot succes en niet andersom
Author: Jille Borg
Latest version: 0.2.98

# Guidion React Navbar Component

## Install

`$ npm install @gdn/react-navbar --save`

## Usage

`import Navigation from '@gdn/react-navbar';`

## Card properties 

```javascript
export interface NavigationProps {
	language: string;
	navigationList: any;
	orientation: string;
	logo?: string;
	gatsbyLink?: boolean;
	search?: SearchProps;
}

export interface NavigationItem {
	value: string;
	link?: string;
	dropdown?: NavigationItem[];
}

export interface SearchProps {
	routePath: string;
	redirectPath: string;
	placeHolder: string;
}
```

## Example implementation

[https://github.com/GuidionDev/library/tree/master/src/examples/react-example](https://github.com/GuidionDev/library/tree/master/src/examples/react-example)
npm package: @gdn/react-search
Description: Guidion - Geluk leidt tot succes en niet andersom
Author: Jille Borg
Latest version: 0.2.16

# Guidion React Search Component

## Install

`$ npm install @gdn/react-search --save`

## Usage

`import { Search } from '@gdn/react-search';`

## Card properties 

```javascript
export interface SearchProps {
	searchHandler?: any;
	submitOnEnter: boolean;
	query?: string;
	placeHolder: string;
}
```
npm package: @gdn/semantic-release-native
Description: plugin for semantic release that automatically updates the android and ios versions
Author: Guidion
Latest version: 1.4.7

# semantic-release-native

A semantic release plugin to update your android and ios app version using the semver version from semantic release.

## Usage

Simply `npm install @gdn/semantic-release-native --save-dev` and add the plugin to your prepare step in semantic release config like so:

```json
"prepare": [
  "@gdn/semantic-release-native"
]
```
## Advanced

For android by default semantic-release-native will use `./android` for android folder and use `app/build.gradle` under that path. If your android path is different pass `androidPath` parameter into semantic release configuration

For ios it takes the '/ios/' folder and attempts to update all subdirectories with plist files to the new version. If your plist files are not below a `./ios` folder you can pass an alternative folder to `iosPath` in the semantic release configuration.

## Fastlane

If you want to generate release notes for your fastlane, pass isFastlane boolean as following, and locales that you want it to generate under.

```json
"prepare": [
  {
    "path": "@gdn/semantic-release-native",
    "isFastlane": true,
    "fastlaneReleaseNoteLanguages": ["en-US", "nl-NL"]
  }
]
```
npm package: @gdnsl/cli-utils
Description: gdnsl plugin for common utilities
Author: Abhishek Lohani
Latest version: 0.0.55

# @gdnsl/cli-utils

[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
[![Version](https://img.shields.io/npm/v/@gdnsl/cli-utils.svg)](https://npmjs.org/package/@gdnsl/cli-utils)
[![Downloads/week](https://img.shields.io/npm/dw/@gdnsl/cli-utils.svg)](https://npmjs.org/package/@gdnsl/cli-utils)
[![License](https://img.shields.io/npm/l/@gdnsl/cli-utils.svg)](https://github.com/packages/cli-utils/blob/master/package.json)

<!-- toc -->

- [Usage](#usage)
- [Commands](#commands)
<!-- tocstop -->

# Usage

<!-- usage -->

```sh-session
$ npm install -g @gdnsl/cli-utils
$ oclif-example COMMAND
running command...
$ oclif-example (-v|--version|version)
@gdnsl/cli-utils/0.0.0 linux-x64 node-v14.16.0
$ oclif-example --help [COMMAND]
USAGE
  $ oclif-example COMMAND
...
```

<!-- usagestop -->

# Commands

<!-- commands -->

- [`oclif-example hello [FILE]`](#oclif-example-hello-file)

## `oclif-example hello [FILE]`

describe the command here

```
USAGE
  $ oclif-example hello [FILE]

OPTIONS
  -f, --force
  -h, --help       show CLI help
  -n, --name=name  name to print

EXAMPLE
  $ oclif-example hello
  hello world from ./src/hello.ts!
```

_See code: [src/commands/hello.ts](https://github.com/packages/cli-utils/blob/v0.0.0/src/commands/hello.ts)_

<!-- commandsstop -->
npm package: @gdnsl/plugin-autocomplete
Description: autocomplete plugin for gdnsl
Author: Abhishek Lohani
Latest version: 0.0.55

@oclif/plugin-autocomplete
==========================

autocomplete plugin for oclif (bash & zsh)

[![Version](https://img.shields.io/npm/v/@oclif/plugin-autocomplete.svg)](https://npmjs.org/package/@oclif/plugin-autocomplete)
[![CircleCI](https://circleci.com/gh/oclif/plugin-autocomplete/tree/main.svg?style=shield)](https://circleci.com/gh/oclif/plugin-autocomplete/tree/main)
[![Appveyor CI](https://ci.appveyor.com/api/projects/status/github/oclif/plugin-autocomplete?branch=main&svg=true)](https://ci.appveyor.com/project/oclif/plugin-autocomplete/branch/main)
[![Downloads/week](https://img.shields.io/npm/dw/@oclif/plugin-autocomplete.svg)](https://npmjs.org/package/@oclif/plugin-autocomplete)
[![License](https://img.shields.io/npm/l/@oclif/plugin-autocomplete.svg)](https://github.com/oclif/plugin-autocomplete/blob/main/package.json)

<!-- toc -->
* [Usage](#usage)
* [Commands](#commands)
<!-- tocstop -->
# Usage
See https://oclif.io/docs/plugins.html
# Commands
<!-- commands -->
* [`@gdnsl/plugin-autocomplete autocomplete [SHELL]`](#gdnslplugin-autocomplete-autocomplete-shell)

## `@gdnsl/plugin-autocomplete autocomplete [SHELL]`

Display autocomplete installation instructions.

```
USAGE
  $ @gdnsl/plugin-autocomplete autocomplete [SHELL] [-r]

ARGUMENTS
  SHELL  shell type

FLAGS
  -r, --refresh-cache  Refresh cache (ignores displaying instructions)

DESCRIPTION
  Display autocomplete installation instructions.

EXAMPLES
  $ @gdnsl/plugin-autocomplete autocomplete

  $ @gdnsl/plugin-autocomplete autocomplete bash

  $ @gdnsl/plugin-autocomplete autocomplete zsh

  $ @gdnsl/plugin-autocomplete autocomplete --refresh-cache
```

_See code: [dist/commands/autocomplete/index.ts](https://github.com/Macrometacorp/gdnsl/blob/v0.0.55/dist/commands/autocomplete/index.ts)_
<!-- commandsstop -->
npm package: @gdo-bzh/box
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/box)
Author: gdo
Latest version: 1.0.0-rc.10

![version](https://img.shields.io/npm/v/@gdo-bzh/box)

# box

[![NPM](https://img.shields.io/npm/v/box.svg)](https://www.npmjs.com/package/box) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

<description>

## Install

```bash
yarn add @gdo-bzh/box react @gdo-bzh/system @xstyled/styled-components styled-components
```

## Usage

```tsx
import React from 'react'

const Example = () => <Box width={50} height={50} backgroundColor="secondary" />
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/button
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/button)
Author: gdo
Latest version: 1.0.0-rc.9

![version](https://img.shields.io/npm/v/@gdo-bzh/button)

# button

[![NPM](https://img.shields.io/npm/v/box.svg)](https://www.npmjs.com/package/button) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

<description>

## Install

```bash
yarn add react @gdo-bzh/system @gdo-bzh/box @xstyled/system @xstyled/styled-components reakit polished styled-components
```

## Usage

```tsx
import React from 'react'
import { Button } from '@gdo-bzh/button'
import { Icon } from '@gdo-bzh/icon'
import { FaGetPocket } from 'react-icons/fa'

const ButtonExample = () => (
  <Button variant="contained" color="primary">
    simple button
  </Button>
)
const FabExample = () => (
  <Fab color="secondary" size="tiny">
    <Icon Component={FaGetPocket} />
  </Fab>
)
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/core
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/core)
Author: gdo
Latest version: 1.0.2

![version](https://img.shields.io/npm/v/@gdo-bzh/core)

# core

[![NPM](https://img.shields.io/npm/v/core.svg)](https://www.npmjs.com/package/core) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

the core package provides all the library in one single package

## Install

```bash
yarn add @gdo-bzh/core react @xstyled/styled-components @xstyled/system reakit styled-components polished lodash use-deep-compare-effect react-icons styled-components
# or
npm i @gdo-bzh/core react @xstyled/styled-components @xstyled/system reakit styled-components polished lodash use-deep-compare-effect react-icons styled-components -S
```

## Usage

```tsx
import React from 'react'
import { system, theme, box, ... } from '@gdo-bzh/core'
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/error-boundary
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/error-boundary)
Author: gdo
Latest version: 1.0.0-rc.3

![version](https://img.shields.io/npm/v/@gdo-bzh/error-boundary)

# error-boundary

[![NPM](https://img.shields.io/npm/v/error-boundary.svg)](https://www.npmjs.com/package/error-boundary) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

React component that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

[more info here](https://reactjs.org/docs/error-boundaries.html)

## Install

```bash
yarn add @gdo-bzh/error-boundary react
```

## Usage

```tsx
import React from 'react'

const Example = () => (
  <ErrorBoundary Fallback={({error, onRetry}) => (
    <div>
      <pre>{error.message}</pre>
      <button type="button" onClick={onRetry}>retry</button>
    </div>)}>
    <div>somme content ...</div>
  </ErrorBoundary>
)
```

## Types

```tsx
/**
 * Fallback component Props
 */
export type FallbackProps = {
  /**
   * Error object
   */
  error: Error;
  /**
   * retry callback
   */
  onRetry: () => void;
}

type Props = {
  /**
   * Fallback component
   */
  Fallback: React.ComponentType<FallbackProps>
  /**
   * logError callback to log error to the server for instance
   */
  logError?: (error: Error, errorInfo: React.ErrorInfo) => void
}
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/fetch
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/fetch)
Author: gdo
Latest version: 1.0.0-rc.5

![version](https://img.shields.io/npm/v/@gdo-bzh/fetch)

# Fetch

[![NPM](https://img.shields.io/npm/v/Fetch.svg)](https://www.npmjs.com/package/Fetch) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

The Fetch component abstracts away the mechanics of handling what to render in the context of a fetch request. The 3 states PENDING, SUCCESS and FAILURE are implemented.

## Install

```bash
yarn add @gdo-bzh/Fetch @gdo-bzh/use-fetch react
```

## Usage

```tsx
import React from 'react'

type Quote = {
  id: number
  starWarsQuote: string
  faction: number
}

export const Example: React.FC<Props> = () => (
  <Fetch<Quote>
    request="http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote"
    RenderPending={()=><div>...</div>)}
    RenderSuccess={({ data }) => <div>{data.starWarsQuote}</div>}
    RenderFailure={({ message }) => <div>{message}</div>}
  />
)
```

## Types

```tsx
/**
 * T describe the type of the data
 */
type Props<T> = {
  /**
   * the request object ([more info here](https://developer.mozilla.org/en-US/docs/Web/API/Request))
   */
  request: RequestInfo
  /**
   * the component to render when the operation is pending
   */
  RenderPending: React.ComponentType
  /**
   * the component to render when the operation has completed successfullly
   */
  RenderSuccess: React.ComponentType<{ data: T }>
  /**
   * the component to render when the operation has failed to complete
   */
  RenderFailure: React.ComponentType<{ message: string }>
}
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/icon
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/icon)
Author: gdo
Latest version: 1.0.0-rc.7

![version](https://img.shields.io/npm/v/@gdo-bzh/icon)

# icon

[![NPM](https://img.shields.io/npm/v/box.svg)](https://www.npmjs.com/package/icon) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

<description>

## Install

```bash
yarn add react @gdo-bzh/box @xstyled/system @xstyled/styled-components styled-components
# or
npm i react @gdo-bzh/box @xstyled/system @xstyled/styled-components styled-components -S
```

## Usage

```tsx
import React from 'react'
import { Icon } from '@gdo-bzh/icon'
import {AiFillAlert} from 'react-icons/ai

const Example = () => <Icon Component={AiFillAlert} size="tiny" color="purple" background="gray" />
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/linear-progress
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/linear-progress)
Author: gdo
Latest version: 1.0.0-rc.8

![version](https://img.shields.io/npm/v/@gdo-bzh/linear-progress)

# linear-progress

[![NPM](https://img.shields.io/npm/v/box.svg)](https://www.npmjs.com/package/linear-progress) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

<description>

## Install

```bash
yarn add @gdo-bzh/box react polished @xstyled/system @xstyled/styled-components styled-components
# or
npm i @gdo-bzh/box react polished @xstyled/system @xstyled/styled-components styled-components -S
```

## Usage

```tsx
import React from 'react'
import { LinearProgress } from '@gdo-bzh/linear-progress'

const DeterminateExample = () => <LinearProgress percent={50} />
const IndeterminateExample = () => <LinearProgress variant="indeterminate" />
const QueryExample = () => <LinearProgress variant="query" />
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/spinner
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/spinner)
Author: gdo
Latest version: 1.0.0-rc.3

![version](https://img.shields.io/npm/v/@gdo-bzh/spinner)

# spinner

[![NPM](https://img.shields.io/npm/v/spinner.svg)](https://www.npmjs.com/package/spinner) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

A spinner component is used to indicate the loading state of a component.

the core package contains the following components:

- FourDots
- CircleDots

## Install

```bash
yarn add @gdo-bzh/spinner react
```

## Usage

```tsx
import React from 'react'
import * as Spinner from '@gdo-bzh/spinner'

const Example = () => (
  <Spinner.CircleDots size="70px" scaleDirection={Spinner.ScaleDirection.both} />
)
```

## Types

```tsx
type Props = React.SVGAttributes<SVGElement> & {
  size?: Props['width']
} & Pick<DotProps, 'fillColor' | 'radius'>

type DotProps = {
  fillColor?: string
  radius?: number
  animateBegin: string
}
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/stack
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/stack)
Author: gdo
Latest version: 1.0.0-rc.5

![version](https://img.shields.io/npm/v/@gdo-bzh/stack)

# stack

[![NPM](https://img.shields.io/npm/v/stack.svg)](https://www.npmjs.com/package/stack) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

Stack a group of elements together on a single row or column

## Install

```bash
yarn add @gdo-bzh/stack @gdo-bzh/theme @xstyled/styled-components react reakit styled-components
# or
npm i @gdo-bzh/stack @gdo-bzh/theme @xstyled/styled-components react reakit styled-components -S
```

## Usage

```tsx
import React from 'react'

const Example = () => {
  const items = ['one', 'two', 'three']
  return (
    <Stack spacing="sm">
      {items.map(label => (
        <Box
          display="flex"
          alignItems="center"
          justifyContent="center"
          backgroundColor="tomato"
          color="white"
          p={5}
          width={50}
        >
          {label}
        </Box>
      ))}
    </Stack>
  )
}
```

## Types

```tsx
import { Group } from 'reakit/Group'
import { StyledComponentProps, DefaultTheme } from '@xstyled/styled-components'

type Props = StyledComponentProps<typeof Group, DefaultTheme, any, never> & {
  /**
   * sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed)
   */
  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
  /**
   * spacing between each element
   */
  spacing?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'
  /**
   * controls alignment of all items on the cross axis
   */
  align?: 'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'initial' | 'inherit'
  /**
   * controls alignment of all items on the main axis
   */
  justify?:
    | 'center'
    | 'flex-start'
    | 'flex-end'
    | 'space-between'
    | 'space-around'
    | 'initial'
    | 'inherit'
}
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/suspense-image
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/suspense-image)
Author: gdo
Latest version: 1.0.0-rc.3

![version](https://img.shields.io/npm/v/@gdo-bzh/suspense-image)

# suspense-image

[![NPM](https://img.shields.io/npm/v/suspense-image.svg)](https://www.npmjs.com/package/suspense-image) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

the package contains:
- useImageResource hook that handles image pre-loading and a basic pre-caching method (no invalidation cache is implemented)
- SuspenseImage component based on the useImageResource hook

## Install

```bash
yarn add @gdo-bzh/suspense-image react
```

## Usage

```tsx
import React from 'react';
import {CircleDots} from '@gdo-bzh/spinner';
import {SuspenseImage} from '@gdo-bzh/suspense-image';

const Example = () => (
  <ErrorBoundary Fallback={ErrorFallback}>
    <Suspense fallback={<CircleDots size="30px" />}>
      <SuspenseImage src='https://s3.amazonaws.com/uifaces/faces/twitter/plbabin/128.jpg' alt="avatar" />
    </Suspense>
  </ErrorBoundary>
)
```

## Types

```tsx
type UseImageResource = {
  (src: string): [Resource<string>]
}

type SuspenseImage = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> & {src:string};
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/suspense-utils
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/suspense-utils)
Author: gdo
Latest version: 1.0.0-rc.5

![version](https://img.shields.io/npm/v/@gdo-bzh/suspense-utils)

# suspense-utils

[![NPM](https://img.shields.io/npm/v/suspense-utils.svg)](https://www.npmjs.com/package/suspense-utils) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

the package contains: createResource(): a method to create a resource. A resource is anything we could fetch and cache.

## Install

```bash
yarn add @gdo-bzh/suspense-utils react
```

## Usage

```tsx
import React from 'react'
import styled from '@xstyled/styled-components'
import { createResource, Resource } from '@gdo-bzh/suspense-utils'
import { ErrorBoundary } from '@gdo-bzh/error-boundary'
import { CircleDots } from '@gdo-bzh/spinner'

type Post = {
  userId: number
  id: number
  title: string
  body: string
}

let resource: Resource<Post[]>

const fetchPosts = () =>
  fetch(`https://jsonplaceholder.typicode.com/posts`).then(response => response.json())

const Layout = styled.div`
  position: relative;
  display: flex;
  justify-content: center;
`

const PostsList = styled.ul`
  list-style: none;
`

const Post: React.FC<Post> = ({ title, body }) => (
  <li>
    <h2>{title}</h2>
    <div>{body}</div>
  </li>
)

const Posts: React.FC = () => {
  if (!resource) {
    resource = createResource<Post[]>(fetchPosts)
  }

  return (
    <PostsList>
      {resource
        .read()
        .slice(0, 10)
        .map(post => (
          <Post {...post} />
        ))}
    </PostsList>
  )
}

export const Example: React.FC = () => {
  return (
    <Layout>
      <ErrorBoundary Fallback={({ error }) => <div>{error.message}</div>}>
        <Suspense fallback={<CircleDots size="30px" />}>
          <Posts />
        </Suspense>
      </ErrorBoundary>
    </Layout>
  )
}
```

## Types

```tsx
type Resource<T> = {
  read: () => T
}

type CreateResource<T> = (
  asyncFunc: (extraData?: Data) => Promise<T>,
  extraData?: Data
) => Resource<T>
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/switch
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/switch)
Author: gdo
Latest version: 1.0.0-rc.9

![version](https://img.shields.io/npm/v/@gdo-bzh/switch)

# switch

[![NPM](https://img.shields.io/npm/v/switch.svg)](https://www.npmjs.com/package/switch) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

Switches toggle the state of a single item on or off.

[more info here](https://material.io/components/selection-controls#switches)

## Install

```bash
yarn add react reakit @gdo-bzh/switch @gdo-bzh/system @xstyled/styled-components styled-components
# or
npm install react reakit @gdo-bzh/switch @gdo-bzh/system @xstyled/styled-components styled-components -S
```

## Usage

```tsx
import React from 'react'
import { Checkbox } from 'reakit/Checkbox'

const Example = () => {
  const [checked, toggle] = React.useReducer(value => !value, true)

  return <Switch id="mySwitcher" checked={checked} onChange={toggle} />
}
```

## Types

```tsx
type Options = StyledComponentProps<typeof S.Checkbox, DefaultTheme, any, never>

export type Props = Options & {
  /**
   * functional color
   */
  variantColor?: FunctionalColor
  /**
   * A processing status is an animation on the thumb of the switch.
   * Because a switch shows the actual status of something, sometimes there is a delay in its change of state.
   * In such cases, a processing status animation can be used.
   */
  processing?: boolean
}
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/system
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/system)
Author: gdo
Latest version: 1.0.0-rc.6

![version](https://img.shields.io/npm/v/@gdo-bzh/system)

# system

[![NPM](https://img.shields.io/npm/v/box.svg)](https://www.npmjs.com/package/system) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

<description>

## Install

```bash
yarn add react @xstyled/system @xstyled/styled-components
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/text
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/text)
Author: gdo
Latest version: 1.0.0-rc.4

![version](https://img.shields.io/npm/v/@gdo-bzh/text)

# text

[![NPM](https://img.shields.io/npm/v/text.svg)](https://www.npmjs.com/package/text) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

Text is the component used to render text and paragraphs. It renders a paragraph by default.

## Install

```bash
yarn add @gdo-bzh/text react styled-components @xstyled/styled-components @gdo-bzh/box @gdo-bzh/theme @gdo-bzh/system
```

## Usage

```tsx
import React from 'react'

const Example = () => <Text size="md">medium</Text>
```

## Types

```tsx
type BoxProps = React.ComponentProps<typeof Box>

type IntrinsicHTMLSpanProps = React.DetailedHTMLProps<
  React.HTMLAttributes<HTMLElement>,
  HTMLElement
>

type Props = IntrinsicHTMLSpanProps &
  BoxProps & {
    children: React.ReactText
    /**
     * @default medium
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'
    /**
     * @default false
     */
    truncated?: boolean
  }
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)
npm package: @gdo-bzh/textarea-autosize
Description: ![version](https://img.shields.io/npm/v/@gdo-bzh/textarea-autosize)
Author: gdo
Latest version: 1.0.0-rc.4

![version](https://img.shields.io/npm/v/@gdo-bzh/textarea-autosize)

# textarea-autosize

[![NPM](https://img.shields.io/npm/v/textarea-autosize.svg)](https://www.npmjs.com/package/textarea-autosize) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

A textarea component which automatically adjust its height on keyboard and window resize events

## Install

```bash
yarn add @gdo-bzh/textarea-autosize react
```

## Usage

```tsx
import React from 'react'

const Example: React.FC = () =>  (<TextareaAutosize autofocus autoselect placeholder="type text" />)
```

## Types

```tsx
type Props = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'rows'> & State

type State = {
  /**
   * true to autoselect text content at initialize
   */
  autoselect?: boolean;
  /**
   * the value of an <textarea> element
   */
  value?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['value'];
  /**
   * Minimum number of rows to display. Default value is 1
   */
  minRows?: number;
  /**
   * Maximum number of rows to display.
   */
  maxRows?: number;
}
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)