open-index/open-npm huggingface dataset:
npm package: @pentablock-libs/pentaswap-uikit
Description: Set of UI components for PentaSwap projects
Latest version: 1.0.0

#  PentaSwap UIkit

[![Version](https://img.shields.io/npm/v/@pentablock-libs/pentaswap-uikit)](https://www.npmjs.com/package/@pentablock-libs/pentaswap-uikit) [![Size](https://img.shields.io/bundlephobia/min/@pentablock-libs/pentaswap-uikit)](https://www.npmjs.com/package/@pentablock-libs/pentaswap-uikit)

PentaSwap UIkit is a set of React components and hooks used to build pages on PentaSwap's apps.

It also contains a theme file for dark and light mode.

## Install

`yarn add @pentablock-libs/pentaswap-uikit`

## npm

https://www.npmjs.com/package/@pentablock-libs/pentaswap-uikit

## Setup

### Theme

Before using PentaSwap UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@pentablock-libs/pentaswap-uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@pentablock-libs/pentaswap-uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://pentablock.github.io/pentaswap-uikit/)
npm package: @pentacle/lottecss
Description: out of the box design and styling for your semantic markup
Latest version: 1.0.22

# lottecss

![Homepage](https://img.shields.io/badge/website-lottecss.com-blue)

- out of the box design and styling for your app  
- no need to apply classes  
- use with your semantic HTML/JSX markup  
- consistent styling for your elements  
- minimal (familiar) utility classes so you don't need Tailwind

**Live demo & docs:** [https://lottecss.com](https://lottecss.com)

---

## Installation

```bash
yarn add @pentacle/lottecss
# or
npm install @pentacle/lottecss
```

## Development & Publishing

### Update and Publish Workflow

1. **Make your changes** to the CSS files in `src/css/`

2. **Build the distribution file:**
   ```bash
   yarn build
   # or
   npm run build
   ```

3. **Update the version** in package.json:
   ```bash
   npm version patch  # for bug fixes (1.0.13 → 1.0.14)
   npm version minor  # for new features (1.0.13 → 1.1.0)
   npm version major  # for breaking changes (1.0.13 → 2.0.0)
   ```

4. **Commit and push changes:**
   ```bash
   git add .
   git commit -m "1.0.14"  # use the new version number
   git push origin main
   ```

5. **Publish to npm:**
   ```bash
   npm publish
   # or if using yarn
   yarn npm publish
npm package: @pentagonjs/core
Description: ⚡️ Easy and Fast Document Generator
Latest version: 1.0.8

# Pentagon.js

⚡️ Easy and Fast Document Generator

## Getting Start

```bash
# clone repo
git clone https://github.com/ten-humans/pentagon-quick-start.git

cd pentagon-quick-start

yarn # or npm install

yarn start # or npm run start
```

## License

[MIT](LICENSE)
npm package: @pentamania/phina
Description: phina.js is a game library in javascript
Author: phi
Latest version: 1.2.0

# phina.js

![image](logo.png)

Fork of phina.js by pentamania.

## Official

https://phinajs.com

## Usage

### Install

```bash
npm i phina.js@npm:@pentamania/phina
```

### Example

```js
import {
  phina,
  GameApp,
  DisplayScene,
  TriangleShape,
} from "../../../build/phina.esm.js";

/**
 * MainScene
 */
window.MainScene = class extends DisplayScene {
  constructor(options) {
    super(options);
    const gx = this.gridX;
    const gy = this.gridY;

    this.player = new TriangleShape()
      .setScale(2)
      .setPosition(gx.center(), gy.center())
      .addChildTo(this);
  }

  update(app) {
    const p = app.pointer;
    const kb = app.keyboard;
    if (p.getPointingStart()) {
      this.player.setPosition(p.x, p.y);
    }
    if (kb.getKeyDown("z")) {
      this.exit({
        score: 2000,
      });
    }
  }
};

/* Main */
phina.main(() => {
  var app = new GameApp();
  app.enableStats();
  app.run();
});
```

## Develop

### clone

```
$git clone https://github.com/pentamania/phina.js.git
```

### Setup

`yarn install` or `npm install`

### Build: production

`yarn build` or `npm run build`

### Build and watch

`yarn dev` or `npm run dev`

## LICENSE

MIT
npm package: @pentamania/phina-es
Description: Experimental fork of phina.js supporting ES2015+ features including ES Modules
Author: phi
Latest version: 0.0.4

# @pentamania/phina-es

![image](logo.png)

Experimental fork of [phina.js](http://phinajs.com) supporting ES2015+ features including ES modules.

## Usage

JP: https://github.com/pentamania/phina.js/releases/tag/esm-alpha.1

## LICENSE

MIT
npm package: @pentamania/phina-logger
Description: Provides logging utils for phina.js
Author: pentamania
Latest version: 0.1.0

phina-logger
===

ログを簡単に描画するためのphina.jsプラグイン

## Install

```npm install @pentamania/phina-logger```

```js
import {LogLabelArea} from 'phina-logger.js';
```

or

```html
<script src="path/to/phina.js"></script>
<script src="path/to/phina-logger.js"></script>
```

### CDN
via jsdelivr

https://cdn.jsdelivr.net/npm/@pentamania/phina-logger@0.1.0/dist/phina-logger.min.js


## Example

**[Sample](https://pentamania.github.io/phina-logger/)**

```js
phina.main(function () {
  var app = phina.game.GameApp({
    startLabel: 'main',
    backgroundColor: "skyblue",
  });

  app.run();
});

phina.define('MainScene', {
  superClass: phina.display.DisplayScene,

  init: function (options) {
    this.superInit(options);

    this.logLabelArea = phina.display.LogLabelArea({
      maxLog: 18,
      height: this.height * 0.8
    })
      .setPosition(20, 20)
      .addChildTo(this)
      ;
  },

  update: function (app) {
    var p = app.pointer;
    if (p.getPointing()) {
      this.logLabelArea.add(
        {px: p.x.toFixed(2), py: p.y.toFixed(2)}
      );
    }
  },

});
```
npm package: @pentamania/phixi
Description: Bridge library to use pixi.js like phina.js
Author: pentamania
Latest version: 0.1.0

# phixi.js

Bridge library to use pixi.js like phina.js

# Install

## npm

### v6.9+ (minimum required)

peerDependencies should be maually installed

`npm i phixi@npm:@pentamania/phixi pixi.js phina.js@npm:@pentamania/phina`

### v7.x

peerDependencies are automatically installed

`npm i phixi@npm:@pentamania/phixi`

## yarn

peerDependencies should be maually added

`yarn add phixi@npm:@pentamania/phixi pixi.js phina.js@npm:@pentamania/phina`

# Features

## pixi.js extension

```js
const app = new PIXI.Application();
const sprite = PIXI.Sprite.from("./assets/player.png");

// pixi.js only
sprite.position.set(128, 128);
sprite.anchor.set(0.5, 0.5);
app.stage.addChild(sprite);
// When removing
app.stage.removeChild(sprite);

// With phixi
sprite
  .setPosition((128, 128)
  .setOrigin(0.5, 0.5)
  .addChildTo(app.stage)
;
// When removing
sprite.remove();
```

## Using phina.js features

```js
const sprite = PIXI.Sprite.from('./assets/player.png');

// phina.js Tweener feature
sprite.tweener
  .clear()
  .to({ x: 256 })
  .call(() => console.log('end'));
```

## phina-like app cycle

```js
// TODO
```

# License

MIT

# Other features

- Typescript typing supported