open-index/open-npm huggingface dataset:
npm package: @katachanneloffical/kata-snippets
Description: A simple component generator for projects
Author: Kata Channel
Latest version: 1.0.19

npm link
generate-component

Đăng ký tài khoản NPM → npm login
Cấu hình package.json (đặt tên, version, dependencies)
Publish package lên NPM → npm publish --access public
Cài đặt và sử dụng package → npm install -g package-name
Cập nhật package (nếu cần) → Tăng version + npm publish

git add .
git commit -m "update"
git push
npm publish

npx katacreate --type nestjs --name myApp --outputDir ./myDir
node index.js--type angular --name test --outputDir ./test
npm package: @katajere/recap
Description: Vendor Year in Review Experience - Recap your business metrics for 2025
Author: Huxxle Team
Latest version: 2.1.7

# Huxxle Recap 25’ — Animated Story Experience

This project is the foundation for the **Huxxle Recap 25’** experience — an animated, story-driven annual recap inspired by platforms like Spotify Wrapped, Instagram Stories, and WhatsApp Status.

The goal is to generate a cinematic, mobile-first highlight reel for Huxxle businesses, using smooth transitions, animated text, kinetic backgrounds, and playful Nigerian-centric copy.

---

## 🎬 Project Overview

This React application sets up:
- A mobile-sized story container (390×844)
- Multi-step story navigation with animated progress bars
- Slide-to-slide transitions using **Framer Motion**
- Foundation components for:
  - Animated text reveals  
  - Drifting decorative frames  
  - Background gradients  
  - Metric-focused recap slides

The UI and animation patterns closely follow the Figma design direction for Huxxle Recap 25’.

---

## 🛠️ Tech Stack

- **React**
- **Vite** (or CRA, depending on your setup)
- **Framer Motion** — animations & transitions
- **CSS** for layout, gradient system, and component styling

---

## 📦 Installation

### Option 1: Use as an NPM package (WebApp/Backend)

```bash
npm install @katajere/recap
```

Basic usage:

```tsx
import { RecapApp, mockRecapData } from '@katajere/recap';
import '@katajere/recap/styles';

export function RecapPage() {
  return <RecapApp recapData={mockRecapData} />;
}
```

### Option 2: Run standalone (full app shell)

```bash
git clone https://github.com/Katajere/Recap.git
cd Recap
npm install
npm run dev       # Vite dev server at http://localhost:3000

# Production builds
npm run build     # builds library (dist/) + standalone (build/)
npm run preview   # preview production build
```
npm package: @katalonne/billboard-top-100
Description: Get latest Billboard chart list. For browser and node.
Author: Catalin Besleaga
Latest version: 1.0.1

<h1 align="center">Billboard Top 100</h1>

[![Build Status](https://travis-ci.org/katalonne/billboard-top-100.svg?branch=master)](https://travis-ci.org/katalonne/billboard-top-100)
[![codebeat badge](https://codebeat.co/badges/299f68a9-8267-4f8d-a3e8-9abc5910f582)](https://codebeat.co/projects/github-com-katalonne-billboard-top-100-master)
[![GitHub open issues](https://img.shields.io/github/issues/katalonne/billboard-top-100.svg)](https://github.com/katalonne/billboard-top-100/issues?q=is%3Aopen+is%3Aissue)
[![npm version](https://img.shields.io/npm/v/billboard-top-100.svg)](https://www.npmjs.com/package/@katalonne/billboard-top-100)
[![MIT License](https://img.shields.io/github/license/katalonne/billboard-top-100.svg)](https://github.com/katalonne/billboard-top-100/blob/master/LICENSE)

Promise and Callback based module API for getting Billboard chart list
For browser and node.js

## Installation
```bash
yarn add @katalonne/billboard-top-100

npm install --save @katalonne/billboard-top-100
```
## Usage

```javascript
import getChart from 'billboard-top-100';

// or

const getChart = require('billboard-top-100')

// With Promise
getChart('hot-100').then(chart => {
  console.log(chart)
}).catch(e => {
  console.error(e)
})

// or 

// With a callback
getChart('hot-100', (err, chart) => {
  if (err !== null) {
    console.error(err)
  }

  console.log(chart)
})

```
<a name="getChart"></a>

#### getChart([chartName], [week], [callback])

| Param       | Type                  | Default      | Description                                          |
|-------------|-----------------------|--------------|------------------------------------------------------|
| [chartName] | <code>string</code>   | 'hot-100'    | Billboard chart name. ('hot-100' or 'billboard-200') |
| [week]      | <code>string</code>   | current week | chart week. YYYY-MM-DD (Example: '2019-06-01')       |
| [callback]  | <code>Function</code> |              | <code>(err, chart) => { ... }</code>                 |

All parameters are optional, therefore you can pass just the callback.

## License

MIT © [katalonne](https://github.com/katalonne)
npm package: @katalonne/vue-remixicon
Description: remixicon component for vue
Author: Catalin Besleaga
Latest version: 1.0.3

<h1 align="center">Vue Remixicon</h1>

[![Build Status](https://travis-ci.org/katalonne/vue-remixicon.svg?branch=master)](https://travis-ci.org/katalonne/vue-remixicon)
[![codebeat badge](https://codebeat.co/badges/299f68a9-8267-4f8d-a3e8-9abc5910f582)](https://codebeat.co/projects/github-com-katalonne-vue-remixicon-master)
[![GitHub open issues](https://img.shields.io/github/issues/katalonne/vue-remixicon.svg)](https://github.com/katalonne/vue-remixicon/issues?q=is%3Aopen+is%3Aissue)
[![npm version](https://img.shields.io/npm/v/vue-remixicon.svg)](https://www.npmjs.com/package/@katalonne/vue-remixicon)
[![MIT License](https://img.shields.io/github/license/katalonne/vue-remixicon.svg)](https://github.com/katalonne/vue-remixicon/blob/master/LICENSE)

Design icons sourced from the [remixicon](https://github.com/Remix-Design/RemixIcon/) project.

## Demo
[Vue remixicon](https://katalonne.github.io/vue-remixicon/)

## Installation
```bash
yarn add @katalonne/vue-remixicon

npm install --save @katalonne/vue-remixicon
```

## Usage

```javascript
import vueRemixicon from '@katalonne/vue-remixicon';

export default {
  components: {
    vueRemixicon
  }
}
```

```html
<vue-remixicon name='bank' size='sm' type='line' color="#fff"/>
```

## Props

| Property     | Type                       | Default |
|--------------|----------------------------|---------|
| name         | String                     |         |
| color        | String                     | #000    |
| type         | String ('fill' or 'line')  |         |
| size         | String                     | fw      |
| container    | String                     | div     |
| class-name   | String                     |         |
| styles       | Object                     | {}      |

## License

MIT © [katalonne](https://github.com/katalonne)
npm package: @katalyst-interactive/turbo-modal
Description: Stimulus controllers for TurboModal Gem
Author: Katalyst Interactive, Pty Ltd
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# TurboModal
Turbo Frame driven modal 

## Usage

Turbo modal provides helpers to add a basic scrim and modal target frame. These should be placed inside the body:
```html
 <body>
    <%= scrim_tag %>
    <%= modal_tag %>
 </body>
```

### Import turbo_modal styles
```css
/* application.scss */

@import "~@katalyst-interactive/turbo-modal";
```

### Import turbo_modal stimulus controllers
```js
/* application.js */
import TurboModal from "@katalyst-interactive/turbo-modal"
application.load(TurboModal)
```

### Show a modal

To get a modal displaying you will need 2 things:
1. A `modal_link` (or programmatic trigger)
2. Some `modal_content`

`modal_link`'s are similar to a `link_to` in rails but it will point the path of the link to target the modal turbo frame.
The resulting path will need to wrap some content in a `modal_content` helper tag.

eg: 
```html
<!-- app/views/homepage/index.html.erb -->
<%= modal_link "click to open modal", modal_path("example") %>
```

```html
<!-- app/views/modals/show.html.erb -->
<%= modal_content do %>
 <div>
     <h1>Modal title</h1>
 </div>
<% end %>
```

## Installation
Run these commands:
```bash
$ bundle add 'turbo_modal'
$ rails turbo_modal:install
```

`rails turbo_modal:install` will add the `turbo_modal` npm packages required. It also sets up stimulus and turbo packages.

## License
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
npm package: @katan.gg/cli
Description: Console UI built using Jetpack Compose to Katan projects.
Latest version: 0.0.1

# Katan CLI

Console UI built using Jetpack Compose to Katan projects.

## Disclaimer
Previously a [Katan](https://github.com/KatanPanel/Katan) module, it has been ported to be cross-platform and be a
single project used within the Katan context whether inside or outside a Docker container via a Virtual Terminal, Linux service and Windows service.

## License
```
MIT License

Copyright (c) 2020-present Katan

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```
npm package: @katana-hq/port-sdk
Description: Port SDK for interacting with Port Finance
Author: Port Finance
Latest version: 0.1.0

# 🔧 Port Finance SDK

[![npm](https://img.shields.io/npm/v/@port.finance/port-sdk.svg)](https://www.npmjs.com/package/@port.finance/port-sdk)

An SDK to interact with Port Finance on-chain program.

## Installation

```
yarn add @port.finance/port-sdk
```
npm package: @katana-project/zip
Description: Random access ZIP manipulation library based on unzipit.
Author: katana-project
Latest version: 0.7.1

# zip

Random access ZIP manipulation library based on unzipit.

## "Random access"?

That means you can read files from a ZIP without loading the entire ZIP into memory first.

It will scan the ZIP to get the entries, which will be pretty fast, and then you call `entry.blob()`/`entry.text()`/`entry.bytes()` to read and decompress the contents of a specific entry.
I recommend using the `.blob()` method, as it will just slice off the contents and return them without copying if they're not compressed.

## Usage

```ts
import { readBlob } from "@katana-project/zip";

const file: Blob = ...; // some ZIP file

const zip = await readBlob(file);
for (const entry of zip.entries) {
    if (entry.isDirectory) {
        continue;
    }

    console.log(entry.name);
    console.log(await entry.text());
}
```

Check the [index.ts](./src/index.ts) and [decompress.ts](./src/decompress.ts) files for the full API, it's pretty self-explanatory.

## Motivation

I needed a tiny library to read ZIPs without loading them into memory entirely, unzipit worked fine, but
I had to read ZIPs that were tampered with to make them unreadable by most readers, so I "forked" it to be able to read those ZIPs.

I also rewrote it in TypeScript for better type checking and removed the need for an extra library for decompression, pretty neat.

## Licensing

This project is licensed under the MIT License, just like unzipit and yauzl.