open-index/open-npm huggingface dataset:
npm package: @kantega/voog
Description: Stream network visualiser
Latest version: 0.1.1

![voog](https://cdn.rawgit.com/kantega/voog/gh-pages/assets/img/logo_header.svg)

Voog is a stream network visualiser written in elm.  
Documentation and examples are available on our [GitHub page](https://kantega.github.io/voog).

## Getting started
Create a div element and bind Voog to the element by its id.

```html
<html>
  <body>
      <div id="main"></div>
  </body>
</html>
```

### With npm
`npm install --save @kantega/voog`
```javascript
import {Voog} from "@kantega/voog";
const voog = Voog.init('main');
voog.send({ .. });
```

### Pure browser
```html
<script src="voog.js"></script>
<script>
  const voog = Voog.init('main');
  voog.send({ .. });
</script>
```
npm package: @kantist/json-api-nestjs
Description: JsonAPI Plugin for NestJs
Author: Kant Yazılım A.Ş.
Latest version: 0.1.0


<p align="center">
  <a href="http://nestjs.com"><img src="https://nestjs.com/img/logo_text.svg" alt="Nest Logo" width="320" /></a>
</p>

<p align="center">
  A <a href="https://github.com/nestjs/nest">Nest</a> module that provides <a href="https://jsonapi.org/">JSONAPI</a> integration.
</p>
<p>
   Tools to implement JSON API, such as, end point, query params, body params, validation and transformation response using TypeORM entities.
</p>

## Description

<p>
This is the plugin that works upon TypeOrm library as a main database abstraction layer tool. Module automaticly generates API according to JSON API specificaton from the database structure (TypeORM entities). It support such features as requests validation based on database fields types, request filtering, endpoints exdending, data relations control and much more. Our module significantly reduces the development time of REST services by removing the need to negotiate the mechanism of client-server interaction and implementing automatic API generation without the need to write any code.
</p>

## Installation

```bash
npm install --save json-api-nestjs
```

## Reference Example

[example](https://github.com/ringcentral/nestjs-json-api/tree/master/apps/example) is an example project that demonstrates the usage of this module.
npm package: @kantist/rilke-cli
Description: A Schematic for Rilke Architect
Author: Kant Yazılım A.Ş.
Latest version: 1.2.7
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<p align="center"><a href="https://rilke.ist" target="_blank" rel="noopener noreferrer"><img width="320" src="https://rilke.ist/assets/logo/logo-stroked.png" alt="Rilke logo"></a></p>
<p align="center">
	<a href="https://npmcharts.com/compare/@kantist/rilke-cli?minimal=true"><img src="https://img.shields.io/npm/dm/@kantist/rilke-cli.svg?sanitize=true" alt="Downloads"></a>
	<a href="https://www.npmjs.com/package/@kantist/rilke-cli"><img src="https://img.shields.io/npm/v/@kantist/rilke-cli.svg?sanitize=true" alt="Version"></a>
	<a href="https://www.npmjs.com/package/@kantist/rilke-cli"><img src="https://img.shields.io/npm/l/@kantist/rilke-cli.svg?sanitize=true" alt="License"></a>
	<br>
	<img src="https://github.com/kantist/rilke-cli/actions/workflows/npm-publish.yml/badge.svg" alt="status">
</p>
<h1 align="center">Rilke CLI - Developed schematic for Rilke Architecture.</h1>
<p align="center">
	<br>
	<i>Rilke. An Advanced Architecture. Developed for complex and modular projects.
	<br> using Angular Framework.</i>
	<br>
</p>
<p align="center">
	<a href="https://rilke.ist/cli/">Getting Started</a>
	·
	<a href="https://github.com/kantist/rilke-cli/issues">Submit an Issue</a>
	<br>
	<br>
</p>

<hr>

## Documentation

Get started with Rilke, learn the fundamentals and explore advanced topics on our documentation website.

-   [Getting Started][quickstart]
-   [Architecture][architecture]

## Development Setup

### Prerequisites

-   Install [Node.js] which includes [Node Package Manager][npm]

### Setting Up a Project

Install the Rilke CLI globally:

```
npm install -g @kantist/rilke-cli
```

Create workspace:

```
rilke new [PROJECT NAME]
```

Run the application:

```
cd [PROJECT NAME]
rilke serve
```

## Ecosystem

| Project    | Status                          | Description                       |
| ---------- | ------------------------------- | --------------------------------- |
| [rilke-ui] | [![rilke-ui]][rilke-ui-package] | Modern UI Kit for Rilke Architect |

[rilke-ui]: https://github.com/kantist/rilke-ui
[rilke-ui-package]: https://npmjs.com/package/@kantist/rilke-ui
[quickstart]: https://rilke.ist/cli/
[architecture]: https://rilke.ist/architecture/
[node.js]: https://nodejs.org/
[npm]: https://www.npmjs.com/get-npm
[angular]: https://angular.io/cli
npm package: @kantist/rilke-ui
Description: Rilke UI Library
Latest version: 1.0.39
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<p align="center"><a href="https://rilke.ist" target="_blank" rel="noopener noreferrer"><img width="320" src="https://rilke.ist/assets/logo/logo-stroked.png" alt="Rilke logo"></a></p>
<p align="center">
	<a href="https://npmcharts.com/compare/@kantist/rilke-ui?minimal=true"><img src="https://img.shields.io/npm/dm/@kantist/rilke-ui.svg?sanitize=true" alt="Downloads"></a>
	<a href="[rilke-ui-package]"><img src="https://img.shields.io/npm/v/@kantist/rilke-ui.svg?sanitize=true" alt="Version"></a>
	<a href="[rilke-ui-package]"><img src="https://img.shields.io/npm/l/@kantist/rilke-ui.svg?sanitize=true" alt="License"></a>
	<br>
	<img src="https://github.com/kantist/rilke-ui/actions/workflows/publish.yml/badge.svg" alt="status">
</p>
<h1 align="center">Rilke UI - Advanced customizable UI components for Rilke Architecture.</h1>
<p align="center">
	<br>
	<i>Rilke. An Advanced Architecture. Developed for complex and modular projects.
	<br> using Angular Framework.</i>
	<br>
</p>
<p align="center">
	<a href="https://rilke.ist/ui/">Getting Started</a>
	·
	<a href="https://github.com/kantist/rilke-ui/issues">Submit an Issue</a>
	<br>
	<br>
</p>

<hr>

## Documentation

Get started with Rilke, learn the fundamentals and explore advanced topics on our documentation website.

-   [Getting Started][quickstart]
-   [Typography][typography]
-   [Color Palettes][color_palettes]
-   [Theme Generator][theme_generator]

## Development Setup

### Prerequisites

-   Install [Node.js] which includes [Node Package Manager][npm]

### Setting Up a Project

Install the Rilke UI to Rilke or Angular Application:

```
rilke add @kantist/rilke-ui
```

[rilke-ui]: https://github.com/kantist/rilke-ui
[rilke-ui-package]: https://npmjs.com/package/@kantist/rilke-ui
[quickstart]: https://rilke.ist/ui/
[typography]: https://rilke.ist/ui/typography/
[color_palettes]: https://rilke.ist/ui/color-palette/
[theme_generator]: https://rilke.ist/ui/theme-generator/
[node.js]: https://nodejs.org/
[npm]: https://www.npmjs.com/get-npm
[angular]: https://angular.io/cli
npm package: @kantorcodes/notion-types
Description: TypeScript types for core Notion data structures.
Author: Travis Fischer
Latest version: 6.16.1-2

<p align="center">
  <img alt="React Notion X" src="https://raw.githubusercontent.com/NotionX/react-notion-x/master/media/notion-ts.png" width="689">
</p>

# notion-types

> TypeScript types for core Notion data structures.

[![NPM](https://img.shields.io/npm/v/notion-types.svg)](https://www.npmjs.com/package/notion-types) [![Build Status](https://github.com/NotionX/react-notion-x/actions/workflows/test.yml/badge.svg)](https://github.com/NotionX/react-notion-x/actions/workflows/test.yml) [![Prettier Code Formatting](https://img.shields.io/badge/code_style-prettier-brightgreen.svg)](https://prettier.io)

## Install

```bash
npm install notion-types
```

This package only exports types and is compatible with both Node.js and browsers.

## Usage

```ts
import * as notion from '@kantorcodes/notion-types'
```

## Docs

See the [full docs](https://github.com/NotionX/react-notion-x).

## License

MIT © [Travis Fischer](https://transitivebullsh.it)

Support my OSS work by <a href="https://twitter.com/transitive_bs">following me on twitter <img src="https://storage.googleapis.com/saasify-assets/twitter-logo.svg" alt="twitter" height="24px" align="center"></a>
npm package: @kantorcodes/notion-utils
Description: Useful utilities for working with Notion data. Isomorphic.
Author: Travis Fischer
Latest version: 6.16.1-2

<p align="center">
  <img alt="React Notion X" src="https://raw.githubusercontent.com/NotionX/react-notion-x/master/media/notion-ts.png" width="689">
</p>

# notion-utils

> Useful utilities for working with Notion data. Isomorphic.

[![NPM](https://img.shields.io/npm/v/notion-utils.svg)](https://www.npmjs.com/package/notion-utils) [![Build Status](https://github.com/NotionX/react-notion-x/actions/workflows/test.yml/badge.svg)](https://github.com/NotionX/react-notion-x/actions/workflows/test.yml) [![Prettier Code Formatting](https://img.shields.io/badge/code_style-prettier-brightgreen.svg)](https://prettier.io)

## Install

```bash
npm install notion-utils
```

This package is compatible with both Node.js and client-side web usage.

## Usage

```ts
import { parsePageId } from '@kantorcodes/notion-utils'

parsePageId(
  'https://www.notion.so/Notion-Tests-067dd719a912471ea9a3ac10710e7fdf'
)
// '067dd719-a912-471e-a9a3-ac10710e7fdf'

parsePageId('About-d9ae0c6e7cad49a78e21d240cf2e3d04')
// 'd9ae0c6e-7cad-49a7-8e21-d240cf2e3d04'

parsePageId('About-d9ae0c6e7cad49a78e21d240cf2e3d04', { uuid: false })
// 'd9ae0c6e7cad49a78e21d240cf2e3d04'
```

## Docs

See the [full docs](https://github.com/NotionX/react-notion-x).

## License

MIT © [Travis Fischer](https://transitivebullsh.it)

Support my OSS work by <a href="https://twitter.com/transitive_bs">following me on twitter <img src="https://storage.googleapis.com/saasify-assets/twitter-logo.svg" alt="twitter" height="24px" align="center"></a>
npm package: @kantorcodes/react-notion-x
Description: Fast and accurate React renderer for Notion.
Author: Travis Fischer
Latest version: 6.16.1-3

<p align="center">
  <img alt="React Notion X" src="https://raw.githubusercontent.com/NotionX/react-notion-x/master/media/notion-ts.png" width="689">
</p>

# React Notion X

> Fast and accurate React renderer for Notion.

[![NPM](https://img.shields.io/npm/v/react-notion-x.svg)](https://www.npmjs.com/package/react-notion-x) [![Build Status](https://github.com/NotionX/react-notion-x/actions/workflows/test.yml/badge.svg)](https://github.com/NotionX/react-notion-x/actions/workflows/test.yml) [![Prettier Code Formatting](https://img.shields.io/badge/code_style-prettier-brightgreen.svg)](https://prettier.io)

## Docs

See the [full docs](https://github.com/NotionX/react-notion-x).

## License

MIT © [Travis Fischer](https://transitivebullsh.it)

Support my OSS work by <a href="https://twitter.com/transitive_bs">following me on twitter <img src="https://storage.googleapis.com/saasify-assets/twitter-logo.svg" alt="twitter" height="24px" align="center"></a>
npm package: @kanutan93/core
Description: Teradata UI Platform built on Angular Material
Author: Teradata UX
Latest version: 2.0.0-beta.3

# core

Core Teradata UI Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material.

The core will have custom components that enforce standards and best practices through built-in design patterns.


## Installation

This component can be installed as npm package.

```bash
npm i -save @kanutan93/core
```


## Setup

Import the modules from `@kanutan93/core` as needed in your NgModule:

```typescript
import { CovalentLayoutModule } from '@kanutan93/core/layout';
import { CovalentStepsModule  } from '@kanutan93/core/steps';
/* and many more */
@NgModule({
  imports: [
    CovalentLayoutModule,
    CovalentStepsModule,
    ...
  ],
  ...
})
export class MyModule {}
```


## Styles, Icons and Theming

See [theming](https://teradata.github.io/covalent/#/docs/theme) in the covalent docs for more info

Core Teradata UI Platform comes with a base CSS file `@kanutan93/core/common/platform.css` (includes icons).
npm package: @kanvas/andromeda-cli
Description: ***Andromeda** is a command line tools to create mobile skeleton project based en Kanvas ecosystem  to supply the folder structure, APIs, design system, setting, packages and others stuff need it to work on standard’s Kanvas.*
Latest version: 0.0.5

# Andromeda CLI

***Andromeda** is a command line tools to create mobile skeleton project based en Kanvas ecosystem  to supply the folder structure, APIs, design system, setting, packages and others stuff need it to work on standard’s Kanvas.*

## Content
*This repository contains tools and helpers for React Native init that integrate with others third party to acomplish with Andromeda CLI.*


 ## Creating a new Andromeda project.


*Example running cli command in terminal:*
```
npx @kanvas/andromeda-cli <project_name>
```
```
- ios
- android
- src
  - components
    - atoms
    - molecules
    - organisms
    - templates
  - domain
    - shared
  - theme
  - locales
- app.json
- index.js
- package.json 
- react-native.config.js 
```

## Packages and structures and tools integrate on this CLI:
- Structures
  - [Domain-driven design](https://dev.to/stevescruz/domain-driven-design-ddd-file-structure-4pja)
  - [Atomic Design and ReactJS](https://danilowoz.com/blog/atomic-design-with-react) 
- Tools
  - [React-native init wtih ts template](https://reactnative.dev/docs/typescript)
- Packages
  - React Navigation 6.0.1
  - Formik 2.2.9
  - Color 4.0.1
  - Styled Components 5.3.0
  - RN Gesture Handler 3.5.0
  - RN Localized Text 1.0.4
  - RN Vector Icons 8.1.0
  - RN IphoneX Helper 1.3.1
  - RN Event Listener 1.0.7
  - @kanvas/client-js 0.0.5
  - @kanvas/andromeda 0.0.4
  - @react-native-community/hooks 2.8.0
npm package: @kanvas/client-js
Description: A Javascript client for Kanvas API.
Author: Rogelio Morey
Latest version: 0.13.2

# Kanvas JS Client

A Javascript client for Kanvas API.

- Documentation: https://kanvas.dev/docs/intro

## Usage

```sh
npm install @kanvas/client-js
```

```js
import KanvasClient from '@kanvas/client-js'

// Create a single client for interacting with your Kanvas API
const kanvas = KanvasClient({
  appKey: '<your app key>',
  baseUrl: '<your Kanvas api endpoint>',
});
```

## Sponsors
<br>

[![MCTEKK](https://mctekk.com/img/white-logo.png)](https://mctekk.com)

---

[Become a Sponsor](https://github.com/sponsors/kyanvasu)
npm package: @kanvas/phoenix
Description: Kanvas Phoenix is a powerful library of pre-built components and features designed to simplify and expedite the development. These components are based on the Atomic Design concept that uses tailwind and seamlessly integrate with Kanvas Niche. Kanvas Phoe
Author: Rogelio Morey
Latest version: 1.0.68

# Kanvas Phoenix


## Description

Kanvas Phoenix is a powerful library of pre-built components and features designed to simplify and expedite the development. These components are based on the Atomic Design concept that uses tailwind and seamlessly integrate with Kanvas Niche. Kanvas Phoenix streamlines the creation of attractive and functional user interfaces, allowing frontend developers to focus on business logic rather than reinventing the wheel in each project.

## Key Features

-   **Reusable Components:** Kanvas Phoenix offers a wide range of ready-to-use components such as navigation bars, tables, charts, forms,inputs and more, following best design and usability practices.
    
-   **Integration with Kanvas Niche:** Kanvas Phoenix components are designed to work seamlessly with Kanvas Niche, ensuring a consistent development experience.
    
-   **Atomic Design:** The library follows the Atomic Design approach, allowing easy composition and customization of UI elements.
    
-   **Enhanced Productivity:** By using Kanvas Phoenix, developers can significantly speed up the development of dashboard administrators, saving time and resources.
    
-   **Easy Customization:** While components are highly customizable, they also include sensible default settings. [see tailwind default config](), making them easy to use in projects without extensive customization.
    

## Installation

To start using Kanvas Phoenix in your project, follow these simple steps:

1.  Ensure you have installed [Kanvas Core JS](https://github.com/bakaphp/kanvas-core-js#kanvas-core-js)
    
2.  Install Kanvas Phoenix using npm or yarn:
    
   ```bash
    npm install @kanvas/phoenix
    # or
    yarn add @kanvas/phoenix
   ```
3.  Import the necessary components into your project and start using them.
    

```javascript

import { Atoms, Molecules, Organism } from '@kanvas/phoenix';
```

// Start building your dashboard!` 

## Basic Usage

Kanvas Phoenix integrates seamlessly into your project. Here's a quick example of how to use a button component:

```jsx

import { Atoms} from '@kanvas/phoenix';

function MyPage() {
  return (
    <div>
      <Atoms.Button.Solid onClick={doSomething}>Do something </Atoms.Button.Solid>
    </div>
  );
} 
```

## How to Run the Project

For detailed instructions on how to run this project, please refer to the [Running the Project Guide](USAGE.md).



## Detailed Documentation

For more in-depth information on using Kanvas Phoenix components and features, please refer to our documentation at [TBD]().


----------
npm package: @kanvas/phoenix-cli
Description: Bootstrapping React proyects.
Author: Bryan Astacio, Rogelio Morey
Latest version: 0.3.2

# @kanvas/phoenix-cli

```Phoenix CLI``` is a command line tool create the bootstraped all the minimum dependencies needed on a *React* project basically a web skeleton project inside the Kanvas ecosystem that brings:

- Directory Structure base on Atomic Design and Domain Driven Design.
- Testing using Jest and Cypress (Future).
- Custom Packages base on the new current needs.

All this small points base on the need of *bootstrapping the applications faster*.

## Creating a new project
To create a new project using @kanvas/phoenix-cli is by running the following command

```bash
  npx @kanvas/phoenix-cli@latest <project_name>
```
Then select the type of project (next, react-vite)

After running it the project will generate the following directory structure

**Next.JS example**
```
- public
- e2e
- test
- src
  - components
    - atoms
    - molecules
    - organisms
    - templates
  - models
    - api - api and data calls
    - interactions - interactions like hooks and services that are going to be used
    - state - located state properties
    - types - located all interfaces, enums and states
  - locales
    - en.ts
    - es.ts
    - index.tsx
  - pages
    - api
    - exmaple
      - index.tsx
    - _app.tsx
    - index.tsx
- cypress.json
- jest.config.js
- tailwind.config.js
- postcss.config.js
- package.json
- yarn.lock
```

**React-Vite example**
```
- public
- e2e
- test
- src
  - components
    - atoms
    - molecules
    - organisms
    - templates
  - models
    - api - api and data calls
    - interactions - interactions like hooks and services that are going to be used
    - state - located state properties
    - types - located all interfaces, enums and states
  - pages
    - exmaple
      - about.tsx
      - welcome.tsx 
      - index.tsx
    - index.tsx
- index.html
- vite.config.ts
- tailwind.config.js
- postcss.config.js
- cypress.json
- jest.config.js
- package.json
- yarn.lock
```

## References

- Structures
  - <a href="https://dev.to/microtica/the-concept-of-domain-driven-design-explained-1ccn#:~:text=Domain%2Ddriven%20design%20is%20a,to%20the%20key%20business%20principles.">Domain-driven Design</a>
  - <a href="https://bradfrost.com/blog/post/atomic-web-design/">Atomic Desing</a>
- Tools
  - <a href="https://nextjs.org/">NextJS</a>
  - <a href="https://vitejs.dev/">Vite</a>
  - <a href="https://tailwindcss.com/">Tailwindcss</a>
  - <a href="https://formik.org/">Formik</a>
  - <a href="https://reach.tech/router/">@react/router</a>
  - <a href="https://jestjs.io/">Jest</a>
  - <a href="https://testing-library.com/docs/react-testing-library/intro/">React Testing Library</a>