open-index/open-npm huggingface dataset:
npm package: @krsbx/design-token
Description: Convert Figma Design Tokens to useable css.
Author: krsbx
Latest version: 1.0.0

# Design Token Transformer

Convert Figma Design Tokens to useable css.

## Requirements

1. Node >= 16.0.0
2. Figma Design Token generated with [tokensbrucke](https://www.figma.com/community/plugin/1254538877056388290/tokensbrucke)

## Installation

```bash
npm install @krsbx/design-token
```

## Usage

```bash
npx dt-transformer -s JSON_FILE_PATH -w OUTPUT_FILE_PATH
```

## Recommended Usage

1. Install [dt-transformer] for the specific project

2. Add `dt-transformer` script to your package.json

```json
"script": {
  "generate-css": "dt-transformer -s JSON_FILE_PATH -w OUTPUT_FILE_PATH"
}
```

> Change `-s JSON_FILE_PATH` to your JSON file path
> Change `-w OUTPUT_FILE_PATH` to your output file path

3. Add `generate-css` script to your `prepare` scripts.

```json
"script": {
  "generate-css": "dt-transformer -s JSON_FILE_PATH -w OUTPUT_FILE_PATH",
  "prepare": "husky install && npm run generate-css"
}
```
npm package: @krsbx/prisma-fqp
Description: Filter Query Parser for Prisma ORM
Author: krsbx
Latest version: 0.2.8

# Prisma Filter Query Parser

Filter Query Parser for Prisma ORM

Using [filter-query-parser](https://github.com/VJD7/filter-query-parser/) as the base

# How To Use

1. Create a new Middleware that can be use for all routes e.g. `parserMw`

> This examples is an examples for a Backend that use [Express.js](https://www.npmjs.com/package/express)

- Javascript

```js
// Files :  parser.js

const prismaFQP = require('@krsbx/prisma-fqp');

exports.queryParserMw = (req, res, next) => {
  req.filterQueryParams = req.query.filters ? prismaFQP(req.query.filters) : {};
  delete req.query.filters;
  return next();
};
```

- Typescript

```ts
// Files :  parser.js

import prismaFQP from '@krsbx/prisma-fqp';

export const queryParserMw = (req, res, next) => {
  req.filterQueryParams = req.query.filters
    ? prismaFQP(req.query.filters as string)
    : {};
  delete req.query.filters;
  return next();
};
```

> Use [express-asyncmw](https://www.npmjs.com/package/express-asyncmw) to return a response error automatically on every Errors in your backend

2. Use FQP Results in baseRepository/abstract class BaseRepository

- Javascript

```js
// Files : baseRepository.js

exports.findAll = (
  conditions = {},
  filterQueryParams = {},
  options = {},
  include = {}
) => {
  /* {...} */

  const where = { ...conditions, ...filterQueryParams, ...otherOptions };

  /* {...} */
};
```

- Typescript

```ts
// Files : baseRepository.ts

async findAll<T extends typeof this.model>(conditions: Where, filterQueryParams: AnyRecord = {}, options: AnyRecord = {}, include: Include = {} as Include) {
  /* {...} */

    const where = { ...conditions, ...filterQueryParams, ...otherOptions };

    /* {...} */
  }
```

> This `baseRepository.ts` is using baseRepository that [prisma-repo](https://www.npmjs.com/package/prisma-repo) generate

# Keep In Mind

If you use a filter that split with `.` e.g. `user.email` and combine it with `OR` - `user.username`, it will use `OR` in the top level filter, so `prisma` will read it like this

```ts

where: {
  OR: {
    user: {     // In here it read as user that
      email: {  // email is ... `AND` username is ...
        equals: 'user@user.com'
      },
      username: {
        equals: 'user',
      },
    }
  }
}

```

Anyone who want to contribute to fix this issue are always welcome

# Case Sensitive filters

The `caseSensitive` is only available on certain databse provider. Read more about it in [Case-insensitive filtering](https://www.prisma.io/docs/concepts/components/prisma-client/filtering-and-sorting#case-insensitive-filtering).

# Options

```ts
caseSensitive: boolean;
```

> !!! We deprecate this features in v0.2.5+ !!!
> Determine whether use a caseSensitive filters or not. Default is `false` which use the default value from Prisma. But, if it true it will use `insensitive` mode on filtering the results.
npm package: @krsbx/prisma-repo
Description: Alternative of prisma-repo made by @krsbx
Author: krsbx
Latest version: 0.2.7

<h1 align="center">
  Prisma Repo
</h1>

<p align="center">
  Prisma Generator to quickly setup a Repository Pattern in Express, Prisma, and TypeScript projects.
</p>

<p align="center">
  Get started with `Prisma Repo` by running <code>npm i @krsbx/prisma-repo</code>
</p>

<div align="center">

[![PRs-Welcome][contribute-image]][contribute-url] [![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][npm-url]

</div>

[downloads-image]: https://img.shields.io/npm/dm/@krsbx/prisma-repo?color=364fc7&logoColor=364fc7
[npm-url]: https://www.npmjs.com/package/@krsbx/prisma-repo
[npm-image]: https://img.shields.io/npm/v/@krsbx/prisma-repo?color=0b7285&logoColor=0b7285
[contribute-url]: https://github.com/krsbx/@krsbx/prisma-repo/blob/main/CONTRIBUTING.md
[contribute-image]: https://img.shields.io/badge/PRs-welcome-blue.svg

## Table of contents

- <a href="#about">What is Prisma Repo?</a>
- <a href="#getting-started">Getting Started</a>
- <a href="#config">Config Docs</a>
- <a href="#contributors">Contributors</a>

<h2 id="about">What is Prisma Repo?</h2>

"_Prisma Repo_" is a Repository Pattern Generator for your Prisma TypeScript Backend. By using Prisma Repo, you can free your mind from how to setup a Repository Pattern in Prisma without a headache.

**Keep in mind** that the generated file is can be edited. You can freely modified the generated model repository file and the base repository file as you like. Just **keep in mind** the prisma-repo will be overwritten every time you run a prisma migration.

<h2 id="getting-started">Getting Started</h2>

1. To get started with `prisma-repo`, run any of the following commands:

### npm

```bash
npm i -D prisma-repo@latest
```

2. Add Prisma Generator as your generator in your `schema.prisma`

```bash
# Top level after prisma-client generator

generator repo {
  provider = "prisma-repo"
  output   = "../src/repository"
  query    = true
  warn     = true
  info     = true
  error    = true
}

# Rest of your model and stuff...

```

<h2 id="config">Config Docs</h2>
The following options can be use to configure the behavior of the <code>prisma-repo</code> :

| Option/Flag | Description                                                    |
| :---------: | :------------------------------------------------------------- |
|  `output`   | Determine the destination of generated files to be outputted   |
|    query    | Determine whether to use the `query` options in prisma logging |
|   `warn`    | Determine whether to use the `warn` options in prisma logging  |
|   `info`    | Determine whether to use the `info` options in prisma logging  |
|   `error`   | Determine whether to use the `error` options in prisma logging |

<h2 id="contributors">Contributors</h2>

We 💖 contributors! Feel free to contribute to this project but **please read the [Contributing Guidelines](CONTRIBUTING.md) before opening an issue or PR** so you understand the branching strategy and local development environment.
npm package: @krsbx/sequelize-fqp
Description: Filter Query Parser for Sequelize ORM
Author: krsbx
Latest version: 0.1.4

# Sequelize Filter Query Parser

Filter Query Parser for Sequelize ORM

Using [filter-query-parser](https://github.com/VJD7/filter-query-parser/) as the base

# How To Use

1. Create a new Middleware that can be use for all routes e.g. `parserMw`

- Javascript

```js
// Files :  parser.js

const sequelizeFQP = require('sequelize-filter-query-parser');

exports.queryParserMw = (req, res, next) => {
  req.filterQueryParams = req.query.filters
    ? sequelizeFQP(req.query.filters)
    : {};
  next();
};
```

- Typescript

```ts
// Files :  parser.js

import sequelizeFQP from 'sequelize-filter-query-parser';

export const queryParserMw = (req, res, next) => {
  req.filterQueryParams = req.query.filters
    ? sequelizeFQP(req.query.filters)
    : {};
  next();
};
```

2. Use FQP Results in baseRepository

- Javascript

```js
// Files : baseRepository.js

exports.findAll =
  (model) =>
  (conditions, filterQueryParams = {}, options = {}) => {
    /* {...} */

    const rules = [{ ...filterQueryParams }];

    /* {...} */

    const where = { ...conditions };

    if (where[Op.and]) {
      where[Op.and] = [...where[Op.and], ...rules];
    } else {
      where[Op.and] = rules;
    }

    /* {...} */
  };
```

- Typescript

```ts
// Files : baseRepository.ts

export const findAll =
  (model) =>
  (conditions, filterQueryParams = {}, options = {}) => {
    /* {...} */

    const rules = [{ ...filterQueryParams }];

    /* {...} */

    const where = { ...conditions };

    if (where[Op.and]) {
      where[Op.and] = [...where[Op.and], ...rules];
    } else {
      where[Op.and] = rules;
    }

    /* {...} */
  };
```
npm package: @krsnadjava25/lowdb-google-cloud-storage-adapter
Description: This let you to create and use a lowDB source located on Google cloud storage
Author: Saleeh K
Latest version: 0.1.5

# lowdb-google-cloud-storage-adapter
This let you to create and use a lowDB source located on Google cloud storage

## Installation

`npm i --save lowdb-google-cloud-storage-adapter`

## Usage

``` javascript
const GcloudAdapter = require('lowdb-google-cloud-storage-adapter');
const low = require('lowdb');

const adapter = new GcloudAdapter('db.json', {
  projectId:"Project Id",
  keyFilename:"Key file path",
  bucketName:"Bucket name",
});

const db = low(adapter);

```
npm package: @krthr/vue-dataflow-editor
Description: Vue 2 dataflow graph editor
Latest version: 1.2.8

# vue-dataflow-editor

![](https://raw.githubusercontent.com/krthr/vue-dataflow-editor/master/docs/.vuepress/public/img.PNG)
> Based on [vue-blocks](https://github.com/ghostiam/vue-blocks). A [@ghostiam](https://github.com/ghostiam)'s project.

## npm

```
npm i @krthr/vue-dataflow-editor
```

Import the lib on `app.js`

```js
// app.js or main.js, or the main file
// where you create the vue app
import Vue from "vue";
// other imports

import "@krthr/vue-dataflow-editor";
import "@krthr/vue-dataflow-editor/dist/vue-dataflow-editor.css";

const app = new Vue({
  /* ... */
});
```

```html
<template>
  <vue-blocks-container
    class="container"
    :blocks-content="[]"
    :scene.sync="{}"
  />
</template>
```

## browser

```html
<body>
  <div id="app">
    <vue-blocks-container
      ref="container"
      :blocks-content="[]"
      :scene.sync="{}"
      class="container"
    />
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/@krthr/vue-dataflow-editor@latest/dist/vue-dataflow-editor.umd.min.js"></script>
  <script>
    new Vue({
      el: "#app",

      // ...
    });
  </script>
</body>
```