open-index/open-npm huggingface dataset:
npm package: @namgold/ks-sdk-classic
Description: 🛠 An SDK for building applications on top of Dynamic AMM.
Latest version: 0.2.2

# Dynamic AMM SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
![Travis (.org)](https://img.shields.io/travis/dynamic-amm/dmm-sdk)
[![npm version](https://img.shields.io/npm/v/@dynamic-amm/sdk/latest.svg)](https://www.npmjs.com/package/@dynamic-amm/sdk/v/latest)
[![install size](https://img.shields.io/bundlephobia/minzip/@dynamic-amm/sdk/latest.svg)](https://bundlephobia.com/result?p=@dynamic-amm/sdk@latest)

In-depth documentation on this SDK is available at [https://docs.dmm.exchange/](https://docs.dmm.exchange/).

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/dynamic-amm/dmm-sdk.git
```

Move into the dmm-sdk working directory

```sh
cd dmm-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @namhong2001/binary-search
Description: very simple number based binary search
Author: namhong2001
Latest version: 1.0.1

# very simple binary search

## type definition

```typescript
/**
 * @param low inclusive, must be true on predicate function
 * @param high exclusive,
 * @param predicate predicate function
 */
declare const bsearch: (
  low: number,
  high: number,
  predicate: (mid: number) => boolean
) => number;
```

## Install

```shell
npm install @namhong2001/binary-search
```

## example

```typescript
bsearch(0, 10, (mid) => mid < 5); // 4
bsearch(0, 10, (mid) => mid < 50); // 9, because high(10) is exclusive
bsearch(0, 10, (mid) => mid < -50); // 0, return low(0) even if low is falsy on predicate
```

## LICENSE

MIT
npm package: @namhong2001/react-textfit
Description: React component to fit headlines and paragraphs into any element
Author: namhong2001
Latest version: 2.0.0

# @namhong2001/react-textfit

## v1

### Diff from malte-wessel/react-textfit

- make run possible on react v18

### Install

```shell
npm install @namhong2001/react-textfit@1
```

#### Types

```bash
npm install @types/namhong2001__react-textfit@npm:@types/react-textfit --D
```

## v2

Originate from **_malte-wessel/react-textfit_** but fully rewritten with function component and hooks by typescript

### Install

```shell
npm install @namhong2001/react-textfit
```

#### Types

Included

### Supported props

- `mode` (single|multi) force singleline or multiline. default `multi`
- `min` (Number) minimum font size. default `0`
- `max` (Number) maximum font size. default `300`

### example

```typescript
<Textfit>
  {myText}
</Textfit>

<Textfit mode="single">
  {myText}
</Textfit>

<Textfit mode="single" min={10} max={50}>
  {myText}
</Textfit>
```

## LICENSE

MIT
npm package: @nami-ui/button
Description: A button component.
Author: Bios Sun
Latest version: 0.0.6

---
id: button
title: Button
subtitle: 按钮
---

提供最基本的点击交互功能。

```jsx reactView
import { Button } from '@nami-ui/button'

export default () => (
  <Button onClick={() => alert('Hello, World!')}>
    Hello
  </Button>
)
```

## 状态

每个按钮都有 4 个状态：`hover`、`active`、`focus` 和 `disabled`。通常这些状态都是根据用户行为自动切换，但你也可以让按钮强制处于某个状态：

```jsx reactView
import { Button } from '@nami-ui/button'
import { HStack } from '@nami-ui/stack'

export default () => (
  <HStack spacing>
    <Button hover>Hover</Button>
    <Button active>Active</Button>
    <Button focus>Focus</Button>
    <Button disabled>Disabled</Button>
  </HStack>
)
```
npm package: @nami-ui/checkbox
Description: a checkbox component.
Author: Bios Sun
Latest version: 0.0.5

---
id: checkbox
title: CheckBox
subtitle: 复选框
---

传统「CheckBox」风格的切换选择组件；

```jsx reactView
import { CheckBox } from '@nami-ui/checkbox'

export default () => {
  const [checked, setChecked] = useState(false)

  return (
    <CheckBox
      label="Check Box"
      checked={checked}
      onChange={setChecked}
    />
  )
}
```

## 禁用

通过设置 `disabled` 属性，可以设置复选框为禁用状态：

```jsx reactView
import { CheckBox } from '@nami-ui/checkbox'

export default () => (
  <div>
    <CheckBox label="Check Box" disabled />
    <CheckBox label="Check Box" disabled defaultChecked />
  </div>
)
```

## 只读

而通过设置 `readOnly` 属性，则可以设置其为只读状态：

```jsx reactView
import { CheckBox } from '@nami-ui/checkbox'

export default () => (
  <div>
    <CheckBox label="Check Box" readOnly />
    <CheckBox label="Check Box" readOnly defaultChecked />
  </div>
)
```

## 分组

通常，复选框组件都是成组出现，以供用户在多个可选项中挑选一些选项。而通过额外提供的 CheckBox.Group 组件，可以非常方便地实现分组功能：

```jsx reactView
import { CheckBox } from '@nami-ui/checkbox'

export default () => {
  const [checkedValues, setCheckedValues] = useState([
    'ts',
    'as',
  ])

  return (
    <CheckBox.Group
      value={checkedValues}
      onChange={setCheckedValues}
    >
      <CheckBox value="js" label="JavaScript (js)" />
      <CheckBox value="ts" label="TypeScript (ts)" />
      <CheckBox value="cs" label="CoffeeScript (cs)" />
      <CheckBox value="as" label="ActionScript (as)" />
    </CheckBox.Group>
  )
}
```
npm package: @nami-ui/divider
Description: A divider component.
Author: Bios Sun
Latest version: 0.0.6

---
id: divider
title: Divider
subtitle: 分隔线
---

用于在两个元素之间插入一条分隔线。

```jsx reactView
import { Divider } from '@nami-ui/divider'

export default () => (
  <>
    Hello <Divider /> World
  </>
)
```

## 方向

通常建议在 Stack 布局组件中使用 Divider，当其被放置在布局组件中时，它将会自动根据布局方向调整自己的样式（水平/垂直）：

```jsx reactView
import { HStack } from '@nami-ui/stack'
import { Divider } from '@nami-ui/divider'

export default () => (
  <HStack>
    <div>Item</div>
    <div>Item</div>
    <Divider />
    <div>Item</div>
  </HStack>
)
```

```jsx reactView
import { VStack } from '@nami-ui/stack'
import { Divider } from '@nami-ui/divider'

export default () => (
  <VStack>
    <div>Item</div>
    <div>Item</div>
    <Divider />
    <div>Item</div>
  </VStack>
)
```

当然，你也可以不将其放在布局组件中，此时你可以通过设置 `direction` 属性来控制它的方向：

```jsx reactView
import { Divider } from '@nami-ui/divider'

export default () => (
  <>
    Hello <Divider direction="vertical" /> World
  </>
)
```

但正如上例中所示，因为它是一个块级元素组件，其兄弟元素位于其上下方而不是左右，所以仅是将其改为垂直分隔线并没有任何意义，你同时还需要使用 flex、grid 或其它布局方式来控制分隔线及其兄弟元素的位置。

## 长度

当作为水平分隔线时，其长度为 `100%`，而作为垂直分隔线时，则变为 `1em + 2px`，如果这个长度不是你需要的，那么可以通过 CSS 变量来更改它：

```scss
.my-divider {
  --nami-divider--length: 20px;
}
```

注意，当在 Stack 组件中，且其 align 置为默认值 `stretch` 时，受些影响，分隔符的长度将与容器交叉轴的长度相同，此时单独将其 align 置为其它值即可：

```jsx  reactView
import { HStack } from '@nami-ui/stack'
import { Divider } from '@nami-ui/divider'

export default () => (
  <HStack spacing>
    <div>Item</div>
    <div>Item</div>
    <Divider $align="center" />
    <div>Item</div>
  </HStack>
)
```

## 颜色

你可以通过设置 CSS 变量来改变分隔线的颜色：

```scss
.my-divider {
  --nami-divider--background: #f5222d;
}
```
npm package: @nami-ui/icon
Description: a icon component.
Author: Bios Sun
Latest version: 0.0.4

---
id: icon
title: Icon
subtitle: 图标
---

Icon 组件提供一组 SVG 格式的图标。

```jsx reactView
import { Check } from '@nami-ui/icon'

export default () => <Check />
```

所有图标如下所示：

```jsx reactView
import {
  Up,
  Down,
  Left,
  Right,
  Check,
  Add,
  Remove,
  CircleFilled,
  GitHub,
} from '@nami-ui/icon'

export default () => {
  return (
    <IconBoxList
      icons={{
        Up,
        Down,
        Left,
        Right,
        Check,
        Add,
        Remove,
        CircleFilled,
        GitHub,
      }}
    />
  )
}
```

## "SVG Icon" vs "Icon Font"

Icon 组件之所以选择提供 SVG 格式的图标，而非 "Icon Font"，
是因为我们认为「图标应当是一种图形，而非文字」。_（有关详细的区别，请参阅[这篇文章](https://css-tricks.com/icon-fonts-vs-svg/)）_

当然，"Icon Font" 也是有很多优点的，比如 "Icon Font" 的图标颜色默认即为文本颜色；为了在 SVG 图标中实现这一优点，我们为图标设置了 `fill: currentColor;` 样式，以使图标颜色与其父元素的文本颜色的保持一致。
npm package: @nami-ui/listbox
Description: a listbox component.
Author: Bios Sun
Latest version: 0.0.1

---
id: listbox
title: ListBox
subtitle: 选择列表
---

用于从一组数据中选择一条或多条数据。

```jsx reactView
import { ListBox } from '@nami-ui/listbox'

export default () => {
  const [value, setValue] = useState('js')

  return (
    <ListBox value={value} onChange={setValue}>
      <ListBox.Item value="js" label="JavaScript (js)" />
      <ListBox.Item value="ts" label="TypeScript (ts)" />
      <ListBox.Item value="cs" label="CoffeeScript (cs)" />
      <ListBox.Item value="as" label="ActionScript (as)" />
    </ListBox>
  )
}
```

## 多选

通过设置 `multiple` 属性，可以开启多选，此时 `value` 需要改为数组类型。

```jsx reactView
import { ListBox } from '@nami-ui/listbox'

export default () => {
  const [values, setValues] = useState(['js', 'cs'])

  return (
    <ListBox value={values} onChange={setValues} multiple>
      <ListBox.Item value="js" label="JavaScript (js)" />
      <ListBox.Item value="ts" label="TypeScript (ts)" />
      <ListBox.Item value="cs" label="CoffeeScript (cs)" />
      <ListBox.Item value="as" label="ActionScript (as)" />
    </ListBox>
  )
}
```

## 显示单/复选框

通过设置 `check` 属性，可以在每个选项前显示一个单/复选框（根据是否多选自动切换）。

单选框：

```jsx reactView
import { ListBox } from '@nami-ui/listbox'

export default () => {
  const [value, setValue] = useState('js')

  return (
    <ListBox value={value} onChange={setValue} check>
      <ListBox.Item value="js" label="JavaScript (js)" />
      <ListBox.Item value="ts" label="TypeScript (ts)" />
      <ListBox.Item value="cs" label="CoffeeScript (cs)" />
      <ListBox.Item value="as" label="ActionScript (as)" />
    </ListBox>
  )
}
```

复选框：

```jsx reactView
import { ListBox } from '@nami-ui/listbox'

export default () => {
  const [values, setValues] = useState(['js', 'cs'])

  return (
    <ListBox
      value={values}
      onChange={setValues}
      multiple
      check
    >
      <ListBox.Item value="js" label="JavaScript (js)" />
      <ListBox.Item value="ts" label="TypeScript (ts)" />
      <ListBox.Item value="cs" label="CoffeeScript (cs)" />
      <ListBox.Item value="as" label="ActionScript (as)" />
    </ListBox>
  )
}
```

也许你会感觉这样会与 CheckBox.Group 和 Radio.Group 重复了；没错，你的感觉是对的。我只是觉得应当这样，但至于用哪个，那就是你的事情了。
npm package: @nami-ui/radio
Description: a radio component.
Author: Bios Sun
Latest version: 0.0.5

---
id: radio
title: Radio
subtitle: 单选框
---

传统风格的单选框组件；

```jsx reactView
import { Radio } from '@nami-ui/radio'

export default () => {
  const [value, setValue] = useState('js')

  return (
    <>
      <Radio
        label="JavaScript"
        checked={value === 'js'}
        onChange={() => setValue('js')}
      />
      <Radio
        label="TypeScript"
        checked={value === 'ts'}
        onChange={() => setValue('ts')}
      />
    </>
  )
}
```

## 禁用

通过设置 `disabled` 属性，可以设置单选框为禁用状态：

```jsx reactView
import { Radio } from '@nami-ui/radio'

export default () => (
  <div>
    <Radio label="JavaScript" disabled />
    <Radio label="TypeScript" disabled defaultChecked />
  </div>
)
```

## 只读

而通过设置 `readOnly` 属性，则可以设置其为只读状态：

```jsx reactView
import { Radio } from '@nami-ui/radio'

export default () => (
  <div>
    <Radio label="JavaScript" readOnly />
    <Radio label="TypeScript" readOnly defaultChecked />
  </div>
)
```

## 分组

单选框往往都是成组出现的，而自行实现单选框组的选择逻辑需要写大量模式代码（就像上面示例中的代码），而通过 Radio.Group 组件则可以非常方便地实现分组功能：

```jsx reactView
import { Radio } from '@nami-ui/radio'

export default () => {
  const [checkedValue, setCheckedValue] = useState('js')

  return (
    <Radio.Group
      value={checkedValue}
      onChange={setCheckedValue}
    >
      <Radio value="js" label="JavaScript (js)" />
      <Radio value="ts" label="TypeScript (ts)" />
      <Radio value="cs" label="CoffeeScript (cs)" />
      <Radio value="as" label="ActionScript (as)" />
    </Radio.Group>
  )
}
```
npm package: @nami-ui/space
Description: A space component.
Author: Bios Sun
Latest version: 0.0.6

---
id: space
title: Space
subtitle: 空隔符
---

用于在两个元素之间插入一段空白间隔。

```jsx reactView
import { Space } from '@nami-ui/space'

export default () => (
  <>
    <Box>Hello</Box>
    <Space />
    <Box>World</Box>
  </>
)
```

## 方向

通常，我们建议在 Stack 这种布局组件中使用这个 Space 组件，因为当其被放置在布局组件中时，它会自动根据布局方向调整自己的样式（水平/垂直）：

```jsx reactView
import { HStack } from '@nami-ui/stack'
import { Space } from '@nami-ui/space'

export default () => (
  <HStack>
    <Box>Item</Box>
    <Box>Item</Box>
    <Space />
    <Box>Item</Box>
  </HStack>
)
```

```jsx reactView
import { VStack } from '@nami-ui/stack'
import { Space } from '@nami-ui/space'

export default () => (
  <VStack>
    <Box>Item</Box>
    <Box>Item</Box>
    <Space />
    <Box>Item</Box>
  </VStack>
)
```

当然，你也可以不将其放在布局组件中，此时你可以通过设置 `direction` 属性来控制它的方向：

```jsx reactView
import { Space } from '@nami-ui/space'

export default () => (
  <div style={{ display: 'flex' }}>
    <Box>Hello</Box>
    <Space direction="vertical" />
    <Box>World</Box>
  </div>
)
```

但正如上例中所示，因为它是一个块级元素组件，其兄弟元素位于其上下方而不是左右，所以仅是将其改为垂直空隔符并没有任何意义，你同时还需要使用 flex、grid 或其它布局方式来控制空隔符及其兄弟元素的位置。

## 尺寸

该组件丧心病狂地提供了 9 个空隔符的尺寸：

```jsx reactView
import { Space } from '@nami-ui/space'

export default () => (
  <>
    <Box small transparent>
      micor 1px
    </Box>
    <Space
      size="micor"
      style={{ background: 'var(--ifm-color-emphasis-600)' }}
    />

    <Box small transparent>
      mini 2px
    </Box>
    <Space
      size="mini"
      style={{ background: 'var(--ifm-color-emphasis-600)' }}
    />

    <Box small transparent>
      tiny 4px
    </Box>
    <Space
      size="tiny"
      style={{ background: 'var(--ifm-color-emphasis-600)' }}
    />

    <Box small transparent>
      small 8px
    </Box>
    <Space
      size="small"
      style={{ background: 'var(--ifm-color-emphasis-600)' }}
    />

    <Box small transparent>
      middle 12px (default)
    </Box>
    <Space
      size="middle"
      style={{ background: 'var(--ifm-color-emphasis-600)' }}
    />

    <Box small transparent>
      large 16px
    </Box>
    <Space
      size="large"
      style={{ background: 'var(--ifm-color-emphasis-600)' }}
    />

    <Box small transparent>
      big 24px
    </Box>
    <Space
      size="big"
      style={{ background: 'var(--ifm-color-emphasis-600)' }}
    />

    <Box small transparent>
      huge 36px
    </Box>
    <Space
      size="huge"
      style={{ background: 'var(--ifm-color-emphasis-600)' }}
    />

    <Box small transparent>
      massive 60px
    </Box>
    <Space
      size="massive"
      style={{ background: 'var(--ifm-color-emphasis-600)' }}
    />
  </>
)
```

当然，如果上面这些都不是你想要的，那么可以通过设置 `--nami-space--size` 变量来自定义需要的尺寸：

```scss
.my-divider {
  --nami-space--size: 20px;
}
```
npm package: @nami-ui/styles
Description: nami-ui styles.
Author: Bios Sun
Latest version: 0.0.6

---
id: styles
title: Styles
subtitle: 样式
---

一组使用 SCSS 编写的基础样式工具库。

## 安装

```bash
yarn add @nami-ui/styles
```

## 使用

在你的 SASS 文件中，按如下方式引入它：

```scss
@use '@nami-ui/styles/index' as nami;
```

其中会提供一组 SASS 变量、函数及混入类。

### 混入

### general-variables()

打印主题风格无关的 CSS 变量（通常都是一些尺寸相关的变量）：

```scss
:root {
  @include nami.general-variables();
}
```

### light-variables()

打印 light 主题相关的 CSS 变量（配色变量）：

```scss
:root {
  @include nami.light-variables();
}
```

### dark-variables()

打印 dark 主题相关的 CSS 变量（配色变量）：

```scss
:root {
  @include nami.dark-variables();
}
```

### variables()

打印 general 及 light 两组 CSS 变量：

```scss
:root {
  @include nami.variables();
  // 等同于：
  // @include nami.general-variables();
  // @include nami.light-variables();
}
```

## 暗黑模式

Nami UI 通过 CSS 变量支持主题风格的切换，默认提供 light 及 dark 两种，除此之外你也可以自行定制其它的。

而对于暗黑模式，因为其实现方式有好几种，且各有优缺点，因此 Nami UI 无法直接提供对暗黑模式的支持，这需要你自己实现，并须在其中使用我们所提供的用于导出 CSS 变量的混入类。

比如通过 `prefers-color-scheme` 媒体查询来实现暗黑模式：

```scss
@use '@nami-ui/styles/index' as nami;

:root {
  @include nami.variables();
}

@media (prefers-color-scheme: dark) {
  :root {
    @include nami.light-variables();
  }
}
```
npm package: @nami-ui/textbox
Description: a input component.
Author: Bios Sun
Latest version: 0.0.7

---
id: textbox
title: TextBox
subtitle: 文本框
---

用于输入一些简短的文本内容；

```jsx reactView
import { TextBox } from '@nami-ui/textbox'

export default () => {
  const [value, setValue] = useState('')

  return (
    <TextBox
      value={value}
      onChange={setValue}
      placeholder="Please enter some text ..."
    />
  )
}
```

## 占位符

通过设置 `placeholder` 属性，可以在文本框中值为空时显示一段占位文本（仅支持字符串）：

```jsx reactView
import { TextBox } from '@nami-ui/textbox'

export default () => <TextBox placeholder="请输入一些文本" />
```

## 禁用

通过设置 `disabled` 属性，可以设置文本框为禁用状态：

```jsx reactView
import { TextBox } from '@nami-ui/textbox'

export default () => (
  <TextBox disabled defaultValue="disabled" />
)
```
npm package: @namics-projects/mic-react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 1.0.279

# react-scripts fork

This is a fork of react scripts.

See [https://git.intern.migros.net/agentur-namics/ch.migros.impuls.meincoach.react](https://git.intern.migros.net/agentur-namics/ch.migros.impuls.meincoach.react) for more infos about this npm module is used and updated.

## Changelog

### 1.0.170
- Update to CRA v1.0.17

### 1.0.130
- Update to CRA v1.0.13

### 1.0.103
- Support React 16

### 1.0.102
- Add jQuery as external to Webpack configs (dev, prod)

### 1.0.101
- Switch to new Versioning scheme

### 2.0.3
- Update CRA to v.1.0.10

### 2.0.2
- Deploy to Migros NPM

### 2.0.1
- Change npm name

### 2.0.0
- Update this this readme
- Publish to Migros npm registry
    - Add publishConfig to package.json
    - Add .npmrc for auth on Migros NPM

### 1.0.0
- Update README's
- Fork react-scripts and rename them
- Add babel-plugin-flow-react-proptypes

---

This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).<br>
Please refer to its documentation:

* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
npm package: @namics/blueprint
Description: Create blueprints and use them in you project to create components, packages ...
Author: Simon Mollweide
Latest version: 0.1.2

# Blueprint [![npm](https://img.shields.io/npm/v/@namics/blueprint.svg)](https://www.npmjs.com/package/@namics/blueprint)

> Create blueprints and use them in you project to create components, packages ...

## Install

`npm i -D @namics/blueprint`


## Usage

**.blueprintrc.js**

```js
module.exports = {
  'react-app': {
    title: 'Create a new react app',
    src: './demo/test-package/example-app.zip',
  },
};
```

```ts
interface IBlueprintrc {
  [key: string]: {
    title: string;
    src: string;
    overrideDestination?: () => string,
    additionalQuestions?: (answers: { inquirer.Answers }) => Promise<inquirer.Questions>,
    collectResult?: (answers: inquirer.Answers) => inquirer.Answers,
    getCustomReplacements?: (answers: inquirer.Answers) => string[][],
  }
}
```

[example](./demo/.blueprintrc.js)

## API

```js
import blueprint from '@namics/blueprint';

blueprint('react-app', {
  srcFilePath: path.resolve(process.cwd(), 'blueprints', 'example-app.zip'),
  targetPath: path.resolve(process.cwd(), 'packages'),
  oldName: 'example-app',
  newName: 'awesome-app',
  customReplacements: [['BEM-placeholder', 'a']],
});
```

- `srcFilePath`: path to zip file
- `targetPath`: path in which the new app/component/* should be created
- `oldName`: old name is usually the filename
- `newName`: the name of the app/component/*
- `customReplacements`: define custom replacements forEach file data replacement

## CLI

```
$ blueprint --value awesome-app --blueprint react-app --config .blueprintrc.js --destination packages
```

### Options

`-i`, `--interactive`
Use interactive command line user interface

`-b`, `--blueprint`
The blueprint which should be used

`-v`, `--value`
Name of the app/component/* which should be created

`-d`, `--destination`
Destination path

`-c`, `--config`
Path to config js file


## License
[MIT License](./LICENSE)
npm package: @namics/commitlint-conventional-changelog
Description: Shareable commitlint config enforcing conventional commits
Author: Merkle Inc.
Latest version: 1.2.4
Deprecated: Package no longer maintained. Use https://www.npmjs.com/package/@merkle-open/commitlint-conventional-changelog instead.

# @namics/commitlint-conventional-changelog [![npm version](https://img.shields.io/npm/v/@namics/commitlint-conventional-changelog.svg)](https://www.npmjs.org/package/@namics/commitlint-conventional-changelog)

> Shareable `commitlint` config enforcing [convention commits](https://conventionalcommits.org/).

## Usage

`npm install --save-dev husky @commitlint/cli @namics/commitlint-conventional-changelog`

**package.json**

```json
  ...
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
	},
	...
  },
  "commitlint": {
    "extends": [
      "@namics/commitlint-conventional-changelog"
    ]
  },
  ...
```

## License

[MIT License](./LICENSE)
npm package: @namics/cz-conventional-changelog
Description: Commitizen adapter following the conventional-changelog format.
Author: Merkle Inc.
Latest version: 3.0.1
Deprecated: Package no longer maintained. Use https://www.npmjs.com/package/@merkle-open/cz-conventional-changelog instead.

# Shared commitizen conventional changelog config [![npm version](https://img.shields.io/npm/v/@namics/cz-conventional-changelog.svg)](https://www.npmjs.org/package/@namics/cz-conventional-changelog)

> reusable commitizen conventional changelog config

## Usage

`npm install --save-dev commitizen @namics/cz-conventional-changelog`

**package.json**

```json
  ...
  "scripts": {
    "cz": "git-cz",
    ...
  },
  "config": {
    "commitizen": {
      "path": "@namics/cz-conventional-changelog"
    }
  },
  ...
```

Part of the [commitizen](https://github.com/commitizen/cz-cli) family. Prompts for [conventional changelog](https://github.com/conventional-changelog/conventional-changelog) standard.

## License

[MIT License](./LICENSE)
npm package: @namics/nitro-component-catalog
Description: Express app to view all components
Author: Jan Nicklas
Latest version: 0.0.15

# Nitro Component Catalog Plugin

[![npm version](https://badge.fury.io/js/%40namics%2Fnitro-component-catalog.svg)](https://badge.fury.io/js/%40namics%2Fnitro-component-catalog)
[![Build Status](https://travis-ci.org/namics/nitro-component-catalog.svg?branch=master)](https://travis-ci.org/namics/nitro-component-catalog)
[![Coverage Status](https://coveralls.io/repos/github/namics/nitro-component-catalog/badge.svg?branch=master)](https://coveralls.io/github/namics/nnitro-component-catalog?branch=master)

This plugin allows you to navigate and preview all your components.

## Example preview

![Component view](https://raw.githubusercontent.com/namics/nitro-component-catalog/master/preview.png)

## Installation

```bash
npm i --save-dev nitro-component-catalog
```

## Integration into nitro

Place the following configuration file to your `projects/routes/pattern-catalog.js`

**component-catalog.js**
```js
var nitroPatternNavigation = require('@namics/nitro-component-catalog');
var path = require('path');
// Frontify demos
module.exports = function(app) {

  app.use('/', nitroComponentCatalog({
    // The location of your component source files
    root: path.resolve(__dirname, '../../components'),

    // The component preview view - 'preview' resolves to  views/component.hbs
    componentView: 'component',

    // The example view - 'example' resolves to views/example.hbs
    exampleView: 'example',

    // The example code view - 'code' resolves to views/code.hbs
    exampleCodeView: 'code',

    // The example partial - '_partials/example' resolves to views/_partials/example.hbs
    examplePartial: '_partials/example',

    // The navigation view - 'navigation' resolves to views/navigation.hbs
    navigationView: 'navigation',

    // Optional - additional view data
    viewData: app.locals,    

    // Optional - page title prefix
    pageTitle: 'Pattern library',

    // Optional if you are using webpack you might pass the compiler instance
    // This will NOT handle your webpack compilation but only visualise the dependencies
    webpackApp: webpack(webpackConfig),

    // Optional - if your project needs specific resolver settings you can pass
    // a custom resolver instance
    nitroComponentResolver: new NitroComponentResolver(/* ... */),

    // Optional - if your project needs additional validations on the pattern.json
    // you can pass a custom validator instance
    nitroComponentValidator: new NitroComponentValidator(/* ... */),
  }));

};
```
npm package: @namics/nitro-component-handlebars
Description: A handlebars helper to render a nitro component
Author: Jan Nicklas
Latest version: 0.0.8

# Nitro Component Handlebars Helper

[![npm version](https://badge.fury.io/js/%40namics%2Fnitro-component-handlebars.svg)](https://badge.fury.io/js/%40namics%2Fnitro-component-handlebars)
[![Build Status](https://travis-ci.org/namics/nitro-component-handlebars.svg?branch=master)](https://travis-ci.org/namics/nitro-component-handlebars)
[![Coverage Status](https://coveralls.io/repos/github/namics/nitro-component-handlebars/badge.svg?branch=master)](https://coveralls.io/github/namics/nitro-component-handlebars?branch=master)
[![Codestyle](https://img.shields.io/badge/codestyle-namics-green.svg)](https://github.com/namics/eslint-config-namics)

This helper allows to render a nitro component using handlebars

## Installation

```bash
npm i --save-dev @namics/nitro-component-handlebars
```

## Usage

```js
const componentHandlebarsHelper = require('@namics/nitro-component-handlebars');
module.exports = componentHandlebarsHelper({
    rootDirectory: '/path/to/nitro/root'
})
```

## Template usage

### Default

The following code will render `components/atoms/button/button.hbs`:

```
{{component "components/atoms/button"}}
```

### Child elements

The following code will set the value of `{{children}}` to `'Click me'`:

```
{{#component "components/atoms/button"}}
    Click me
{{/component}}
```

### Attributes

The following code will set the value of `{{size}}` to `'xl'`:

```
{{component "components/atoms/button" size="xl"}}
```

### Array attributes

The following code will set the value of `{{sizes}}` to `['xl', 'l']`:

```
{{component "components/atoms/button" sizes="['xl', 'l']"}}
```

### Data files

The following code will set the template variables to the content of
`components/atoms/button/_data/demo.json`:


```
{{component "components/atoms/button" data-file="demo.json"}}
```

### Rendering foreign modules

The following code will render a component from another node_module
e.g. `node_modules/base-pattern/components/atoms/button/button.json`

```
{{component "~base-pattern/components/atoms/button"}}
```


# Contribution

You're free to contribute to this project by submitting [issues](https://github.com/namics/nitro-component-handlebars/issues) and/or [pull requests](https://github.com/namics/nitro-component-handlebars/pulls). This project is test-driven, so keep in mind that every change and new feature should be covered by tests.
This project uses the [![Codestyle](https://img.shields.io/badge/codestyle-namics-green.svg)](https://github.com/namics/eslint-config-namics).

# License

This project is licensed under [MIT](https://github.com/namics/nitro-component-handlebars/blob/master/LICENSE).
npm package: @namics/nitro-component-resolver
Description: A helper to resolve and parse the nitro pattern structure and meta files
Author: Jan Nicklas
Latest version: 0.0.8

# Nitro Component Resolver
[![npm version](https://badge.fury.io/js/%40namics%2Fnitro-component-resolver.svg)](https://badge.fury.io/js/%40namics%2Fnitro-component-resolver)
[![Build Status](https://travis-ci.org/namics/nitro-component-resolver.svg?branch=master)](https://travis-ci.org/namics/nitro-component-resolver)
[![Coverage Status](https://coveralls.io/repos/github/namics/nitro-component-resolver/badge.svg?branch=master)](https://coveralls.io/github/namics/nitro-component-resolver?branch=master)
[![Codestyle](https://img.shields.io/badge/codestyle-namics-green.svg)](https://github.com/namics/eslint-config-namics)

The nitro component resolver looks up all `pattern.json` (can be changed) files in the given nitro components directory
and provides fast and easy access to the files and their content during development and production.

## Installation

```bash
npm i --save-dev @namics/nitro-component-resolver
```

## Usage

```js
const ComponentResolver = require('@namics/nitro-component-resolver');
const resolver = new ComponentResolver({
    rootDirectory: '/example/path/components',
    // Invalidate cache on file changes (can be set to false for production mode)
    // Default: true
    watch: true,
    // Main template (please adjust if you use another template language)
    // Default: '*/*/*.hbs'
    mainTemplate: '*/*/*.hbs',
    // Meta json which contains the component details
    // used by getComponents()
    // Default: '*/*/pattern.json'
    patternExpression: '*/*/pattern.json',
    // Wether to cache the examples
    // Default and recommend value: true
    cacheExamples: true,
});

resolver.getComponentTypes()
    .then(function(componentTypes) {
        // Returns all existing nitro component types e.g. 'atoms', 'molecules'
        console.log(componentTypes);
    });

resolver.getComponents()
    .then(function(components) {
        // Returns all nitro components and their package.json content
        console.log(components);
    });

resolver.getComponents('atoms')
    .then(function(components) {
        // Returns the nitro components of type 'atoms' and their package.json content
        console.log(components);
    });

resolver.getComponentExamples('a/path/to/atoms/button')
    .then(function(examples) {
        console.log(examples);
    });

resolver.getComponentReadme('a/path/to/atoms/button')
    .then(function(readme) {
        console.log(readme);
    });
```

## Performance

The component resolver relies on [chokidar](https://github.com/paulmillr/chokidar).

Chokidar shares its internal file watcher so that only one io-watcher per file/folder is used even if multiple
chokidar instances exist.

## Caching

All resolved and parsed components are cached using the [hot-file-cache](https://github.com/jantimon/hot-file-cache/) module:

[![Concept flow uml](https://raw.githubusercontent.com/jantimon/hot-file-cache/master/flow.png)](https://github.com/jantimon/hot-file-cache/blob/master/flow.puml)
npm package: @namics/nitro-component-validator
Description: A helper to validate a nitro component
Author: Jan Nicklas
Latest version: 0.0.5

# Nitro Component Validator

[![npm version](https://badge.fury.io/js/%40namics%2Fnitro-component-validator.svg)](https://badge.fury.io/js/%40namics%2Fnitro-component-validator)
[![Build Status](https://travis-ci.org/namics/nitro-component-validator.svg?branch=master)](https://travis-ci.org/namics/nitro-component-validator)
[![Coverage Status](https://coveralls.io/repos/github/namics/nitro-component-validator/badge.svg?branch=master)](https://coveralls.io/github/namics/nitro-component-validator?branch=master)
[![Codestyle](https://img.shields.io/badge/codestyle-namics-green.svg)](https://github.com/namics/eslint-config-namics)

This helper verifies that the pattern.json file of a component is valid

## Installation

```bash
npm i --save-dev @namics/nitro-component-validator
```

## Usage

```js
const ComponentValidator = require('@namics/nitro-component-validator');
var validator = new PatternValidator();
try {
    validator.validateComponent({
      metaFile: 'components/atoms/button/pattern.json',
      data: {
        'name': 'button',
        'stability': 'alpha',
        'type': 'atom'
      }
    });
} catch(e) {
    console.log(e);
}
```
npm package: @namics/nitro-frontify-deployer
Description: A helper to deploy all nitro components to frontify
Author: Jan Nicklas
Latest version: 0.0.17

# Nitro Frontify Deployer

[![npm version](https://badge.fury.io/js/%40namics%2Fnitro-frontify-deployer.svg)](https://badge.fury.io/js/%40namics%2Fnitro-frontify-deployer)
[![Build Status](https://travis-ci.org/namics/nitro-frontify-deployer.svg?branch=master)](https://travis-ci.org/namics/nitro-frontify-deployer)
[![Build status](https://ci.appveyor.com/api/projects/status/6ka1xay4sf3tsjwn/branch/master?svg=true)](https://ci.appveyor.com/project/ernscht/nitro-frontify-deployer/branch/master)
[![Coverage Status](https://coveralls.io/repos/github/namics/nitro-frontify-deployer/badge.svg?branch=master)](https://coveralls.io/github/namics/nitro-frontify-deployer?branch=master)
[![Codestyle](https://img.shields.io/badge/codestyle-namics-green.svg)](https://github.com/namics/eslint-config-namics)

This build tool generates all necessary artifacts to deploy the entire nitro project into frontify

## Installation

```bash
npm i --save-dev @namics/nitro-frontify-deployer
```

## Usage

```js
const NitroFrontifyDeployer = new require('@namics/nitro-frontify-deployer');
const deployer = new NitroFrontifyDeployer({
    rootDirectory: '/path/to/your/components',
    // This mapping is used to resolve the component type from the folder name
    // e.g. component/atoms/button.js -> type: atom
    mapping: {
        'atoms': 'atom',
        'molecules': 'molecules',
        'helpers': 'atom'
    },
    // The example template compiler
    compiler: (template) => require('handlebars').compile(template),
    // Destination directory
    targetDir: '/path/to/your/dist/',
    // Frontify Options
    frontifyOptions: {
        access_token: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        project: 12345,
        baseUrl: 'https://app.frontify.com/',
    }
});
// Validate, Build, Sync:
deployer.deploy();
```

## Security

You can also pass the frontify access_token by setting a `FRONTIFY_ACCESS_TOKEN` process variable instead of writting it into your code.
npm package: @namics/nitro-webpack-compiler
Description: This plugin integrates webpack into nitro
Author: Jan Nicklas
Latest version: 0.0.5

# Nitro Webpack Compiler

[![npm version](https://badge.fury.io/js/%40namics%2Fnitro-webpack-compiler.svg)](https://badge.fury.io/js/%40namics%2Fnitro-webpack-compiler)
[![Build Status](https://travis-ci.org/namics/nitro-webpack-compiler.svg?branch=master)](https://travis-ci.org/namics/nitro-webpack-compiler)
[![Coverage Status](https://coveralls.io/repos/github/namics/nitro-webpack-compiler/badge.svg?branch=master)](https://coveralls.io/github/namics/nitro-webpack-compiler?branch=master)
[![Codestyle](https://img.shields.io/badge/codestyle-namics-green.svg)](https://github.com/namics/eslint-config-namics)

This plugin integrates webpack into nitro

## Features

+ Webpack Config Validation
+ Pick up configs from the project folder
+ Setting the context
+ CSS Source Maps
+ Hot Module Replacement
npm package: @namics/prettier-config
Description: Shared prettier config
Author: Merkle Inc.
Latest version: 3.0.1
Deprecated: Package no longer maintained. Use https://www.npmjs.com/package/@merkle-open/prettier-config instead.

# Shared prettier config [![npm](https://img.shields.io/npm/v/@namics/prettier-config.svg)](https://www.npmjs.com/package/@namics/prettier-config)

> reusable prettier config

## Usage

`npm install --save-dev prettier @namics/prettier-config`

**.prettierrc.js**

```js
module.exports = require('@namics/prettier-config');
```

**.prettierignore**

```
# Node
**/node_modules
**/package.json
**/package-lock.json

# Generated
**/bower.json
**/lerna.json

# Build
**/build
**/dist
**/public
**/coverage
**/storybook-static

# Nitro
**/project/blueprints
**/.yo-rc.json
```

**package.json**

```json
  ...
  "scripts": {
    "prettier": "prettier --write \"**/*.*(gql|graphql|js|jsx|json|md|mdx|ts|tsx|yml|yaml)\"",
    ...
  },
  ...
```

## We recommend to use prettier together with lint-staged and husky

`npm install --save-dev husky lint-staged`

**package.json**

```json
  ...
  "lint-staged": {
    "*.{gql,graphql,js,jsx,json,md,mdx,ts,tsx,yml,yaml}": [
      "prettier --write"
    ]
  },
  "scripts": {
    "prettier": "prettier --write \"**/*.*(gql|graphql|js|jsx|json|md|mdx|ts|tsx|yml|yaml)\"",
    ...
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  ...
```

## License

[MIT License](./LICENSE)
npm package: @namics/remlog-browser-client
Description: The browser clients helps you creating remote logs inside any browser (supports IE7+, Chrome, Firefox and Safari) by creating an image tag and appending it to the body of your website. It is recommended to add the package to your build or use a CDN like u
Author: Jan Biasi
Latest version: 0.2.5
Deprecated: this tool is no longer being developed

# @namics/remlog-browser-client

The browser clients helps you creating remote logs inside any browser (supports IE7+, Chrome, Firefox and Safari) by creating an image tag and appending it to the body of your website. It is recommended to add the package to your build or use a CDN like unkpg.

```html
<script src="./node_modules/@namics/remlog-browser-client/dist/browser-client.js"></script>
<script src="https://unpkg.com/@namics/remlog-browser-client/dist/browser-client.js"></script>
```

### Using the web

```js
var BrowserClient = window.remlog.BrowserClient;
```

```js
// IMPORTANT: this API is not final yet!

var logger = remlog.BrowserClient({
	host: 'my-computer-ip',
	port: 9312
});

logger.send('something went wrong!', {
	file: 'myfile.js',
	line: 731
});
```

### Using the module

```js
import { BrowserClient } from '@namics/remlog-browser-client';

const remoteLog = new BrowserClient({
	host: 'http://remlog-webserver.com',
	port: 8689,
	secure: false
});

remoteLog.send('Some logging message', /* optional: */ {
	level: 1,
	line: 982
	file: 'someFile.js'
});
```

> Review the [Changelog](/packages/browser-client/CHANGELOG.md)
npm package: @namics/remlog-cli
Description: There is a CLI package which helps you setting up your local log-server within a few seconds. It has also built-in support for testing traces.
Author: Jan Biasi
Latest version: 0.2.2
Deprecated: this tool is no longer being developed

# @namics/remlog-cli

There is a CLI package which helps you setting up your local log-server within a few seconds. It has also built-in support for testing traces.

###### Contents

```js
const { start, request } = require('@namics/remlog-cli');
```

## CLI

###### Getting help

If you need more information about a command you can simply call the following:

```bash
remlog <command> --help
```

### server

For the ease of usage it's also possible to run the server from the CLI within a few seconds. It accepts a port option (`-p` or `--port`) and a transport option (`-t` or `--transport`) which are required. To check all available transports or get more information how they work please refer to the [transports package](https://github.com/janbiasi/remlog/tree/develop/packages/transports).

###### All Options

* `-p` / `--port` Set the listening port of the server
* `-s` / `--secure` Enable SSL on the server, requires `-k`, `-e` [, `-r`]
* `-t` / `--transport` Set the selected transport variant
* `-c` / `--cors` A comma separated list of whitelisted CORS hosts, default: `*`
* `-k` / `--ssl-key` Set the path to the SSL key, only works if `--secure` is enabled
* `-e` / `--ssl-cert` Set the path to the SSL certificate, only works if `--secure` is enabled
* `-r` / `--ssl-passphrase` Optional: Enter passphrase for SSL certificate

#### Example

```bash
yarn global add @namics/remlog-cli # install the CLI
remlog server -p 9312 -t @namics/remlog-transports/FileSystem # run server
```

### trace

Trace implements a simple HTTP request tracing log data on the server (for testing etc.)

```bash
remlog trace {"shortMessage": "Hellow there!", "level": 5 } --host 127.0.0.1 --port 9012 --secure
```

### ping

Sends a ping message to the server and insert a trace log - just for testing connection purposes.

### help

Will display a list of all commands and options

```bash
remlog help
```

> Review the [Changelog](/packages/cli/CHANGELOG.md)
npm package: @namics/remlog-debug
Description: This package is used for debugging inside the remlog module.
Author: Jan Biasi
Latest version: 0.2.2
Deprecated: this tool is no longer being developed

# @namics/remlog-debug

This package is used for debugging inside the remlog module.

### Usage

###### Supported methods

* error (red)
* warn (yellow)
* info (cyan)
* success (green)
* log (white)

```js
const { Logger } = require("@namics/remlog-debug");

// Accepts a single argument which defines the module
// or context of the logger. If you're using e.g. the
// FileSystem transports, the logger context will be
// "Transport(FileSystem)"
const logger = new Logger("MyModule");

// Will output a yellow message
// $~ [MyModule] hey you!
logger.warn("hey you!");
```

> Review the [Changelog](/packages/debug/CHANGELOG.md)
npm package: @namics/remlog-scheme
Description: ###### Contents
Author: Jan Biasi
Latest version: 0.2.2
Deprecated: this tool is no longer being developed

# @namics/remlog-scheme

###### Contents

```js
const { fields, Scheme, isSchemeIdValid, isCustomField } = require("@namics/remlog-scheme");
```

### Scheme

##### Class interface

```js
type SchemeValidationType {
	key: string,
	error: Error | null
};

interface IScheme {
	get(): Object;
	validate(): Array<SchemeValidationType>;
	clean(): void;
	serialize(): string;
	toString(): string;
}
```

##### Internal use

```js
const { Scheme } = require("@namics/remlog-scheme");

const examplePayload = {
    shortMessage: "Some message",
    fullMessage: "An extended message for the log",
    level: 5,
    file: "example.js",
    line: 172,
    timestamp: "2018-01-18T15:16:15.244Z"
};

const validCustomPayload = Object.assign({}, examplePayload, {
    $custom: "some data ..." // custom fields are prefixed by dollar
});

const invalidPayload = Object.assign({}, examplePayload, {
    id: "8an204asdf1" // it is not allowed to set the ID manually
});

const validScheme = new Scheme(examplePayload);
validScheme.validate(); // returns []

const validCustomScheme = new Scheme(validCustomPayload);
validCustomScheme.validate(); // returns []

const invalidScheme = new Scheme(invalidPayload);
invalidScheme.validate(); // returns [{key: 'id', error: Error('The key id is a computed field and cannot be set manually.')}]

validScheme.get(); // will return the full scheme including timestamp, id etc.
```

> Review the [Changelog](/packages/scheme/CHANGELOG.md)
npm package: @namics/remlog-server
Description: ###### Contents
Author: Jan Biasi
Latest version: 0.3.2
Deprecated: this tool is no longer being developed

# @namics/remlog-server

###### Contents

```js
const { Server } = require('@namics/remlog-server');
```

The server package is the main core for the remote logging process and provides you the API needed to trace logs immediately.
There are a few endpoints you should know first:

* `/` will give you an overview about all the logs happend in the current process
* `/info` will show you the package name and version of the server instance
* `/trace` is a HTTP POST route and will take the JSON body as trace payload
* `/tracer.jpg` is a HTTP GET API and is implement by the [`@namics/remlog-browser-client`](/packages/browser-client) package to provide a cross-browser method to log messages
* `/logs.json` will return an array of JSON objects representing all your logs
* `/logs/<log-id>.json` will show you a single log entry in JSON format

### Examples

```js
new require('@namics/remlog-server')
	.Server({
		port: 8123,
		transport: `@namics/remlog-transports/Console`, // default
		cors: ['*'] // default
	})
	.start();
```

```js
new require('@namics/remlog-server')
	.Server({
		port: 9001,
		transport: `@namics/remlog-transports/FileSystem`,
		cors: ['my-domain.com', 'remote.namics.com'],
		// enables SSL on the server
		ssl: {
			key: './ssl/my-domain/key.pem',
			cert: './ssl/my-domain/cert.pem',
			passphrase: 'k12Sh1$£1e3^7VcaR#t'
		}
	})
	.start();
```

### Sending a trace to the Server via AJAX

> This uses the HTTP POST JSON API from the server exposed under the `/trace` route.

```js
import axios from 'axios';
import { LOGLEVEL, getTraceUrl } from '@namics/remlog-utils';

const serverConfig = {
	host: '127.0.0.1',
	port: '<your-server-port>'
};

axios.post(getTraceUrl(serverConfig), {
	shortMessage: 'Hey you!',
	fullMessage: 'Blablabla',
	level: LOGLEVEL.INFO
});
```

> Review the [Changelog](/packages/server/CHANGELOG.md)
npm package: @namics/remlog-transports
Description: Transports are the way where your logs will be stored, for example temporary in the console, in a logfile or on a database etc. There are currently 2 transports supported:
Author: Jan Biasi
Latest version: 0.3.2
Deprecated: this tool is no longer being developed

# @namics/remlog-transports

Transports are the way where your logs will be stored, for example temporary in the console, in a logfile or on a database etc. There are currently 2 transports supported:

###### Contents

```js
const { FileSystem, Console, MongoDB } = require('@namics/remlog-transports');
```

* Console (`@namics/remlog-transports/Console`)
* FileSystem (`@namics/remlog-transports/FileSystem`)

You can simply add the transports to your server by the constructor or CLI argument:

```js
new require('@namics/remlog-server').Server({
    transport: `@namics/remlog-transports/FileSystem`,
});
```

```bash
remlog server -t @namics/remlog-transports/Console
```

### Creating a new transport

```js
const { Transport } = require('@namics/remlog-transports');
const connection = require('mysql').createConnection({
    host: 'localhost',
    user: 'me',
    password: 'secret',
    database: 'my_db',
});

class CustomTransport extends Transport {
    /**
     * This method will be responsible for the trace of logs
     *
     * @param {Object} payload          The log payload
     * @param {Function} resolve        Will resolve the trace and save it to the internal file
     */
    trace(payload, resolve) {
        connection.connect();
        connection.query('INSERT INTO LOGS ...');
        connection.end();

        resolve();
    }
}
```

> Review the [Changelog](/packages/transports/CHANGELOG.md)
npm package: @namics/remlog-utils
Description: ### Contents
Author: Jan Biasi
Latest version: 0.2.2
Deprecated: this tool is no longer being developed

# @namics/remlog-utils

### Contents

```js
const {
    URLS,
    LOGLEVEL,
    encodePayloadForUrl,
    getTracerImageUrl,
    getTraceUrl,
    getLogLevelName
} = require("@namics/remlog-utils");
```

#### Signatures

```js
encodePayloadForUrl(payload: Object): string
```

```js
getTracerImageUrl(config: { host: string, port: number }, payload: Object): string
```

```js
getTraceUrl(config: { host: string, port: number }, payload: Object): string
```

```js
getLogLevelName(logLevel: number): string
```

### URLs

* DASHBOARD (`/`)
* LOGS (`/logs.json`)
* LOG (`/logs/:id.json`)
* TRACER_IMAGE (`/tracer.jpg`)
* TRACE (`/trace`)

### Loglevels

The loglevels are inspired by [Apache's log4j](https://logging.apache.org/log4j/2.x/manual/customloglevels.html) logging services.

* ALL (`0`)
* TRACE (`1`)
* DEBUG (`2`)
* INFO (`3`)
* WARN (`4`)
* ERROR (`5`)
* FATAL (`6`)
* OFF (`7`)

> Review the [Changelog](/packages/utils/CHANGELOG.md)