# punch-ui

> UI Components for KnockoutJS

Latest version **1.1.3** (published 2021-06-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install punch-ui
pnpm add punch-ui
yarn add punch-ui
bun add punch-ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2021-06-18 |
| First published | 2021-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Mariya Tutynina |
| Maintainers | mtutynina |

## Links

- npm: https://www.npmjs.com/package/punch-ui
- Repository: https://github.com/mtutynina/punch-ui
- Homepage: https://github.com/mtutynina/punch-ui#readme
- Issues: https://github.com/mtutynina/punch-ui/issues
- npm.io page: https://npm.io/package/punch-ui

## Dependencies (1)

- [knockout](https://npm.io/package/knockout.md) ^3.5.1

## Recent versions

- 1.1.3 (latest) — 2021-06-18
- 1.1.2 — 2021-05-18
- 1.1.1 — 2021-05-12
- 1.1.0 — 2021-05-10
- 1.0.9 — 2021-05-10
- 1.0.8 — 2021-05-07
- 1.0.6 — 2021-05-07
- 1.0.5 — 2021-04-21
- 1.0.4 — 2021-04-21
- 1.0.3 — 2021-04-21
- 1.0.2 — 2021-04-21
- 1.0.1 — 2021-04-21
- 1.0.0 — 2021-04-20

## README

Punch UI [![npm][npm-image]][npm-url] [![Build Status][build-image]][build-url]
===========================

[npm-image]: https://img.shields.io/npm/v/punch-ui?style=flat-square
[npm-url]: https://www.npmjs.com/package/punch-ui
[build-image]: https://travis-ci.com/mtutynina/punch-ui.svg?branch=main
[build-url]: https://travis-ci.com/mtutynina/punch-ui

**Punch** UI is collection of UI components based on **KnockoutJS** and **Bootstrap 5**. Components can be used as part of your Knockout SPA application or as part of Razor Pages to improve your UI.

## Components list
- [Pagination](https://mtutynina.github.io/punch-ui/components/pagination.html)

### In the pipeline
- Table spinner
- Page spinner
- Date picker
- Select box

## Quick start
Install Punch UI with npm `npm install punch-ui`

Read the [Getting started page](https://mtutynina.github.io/punch-ui/#getting-started) for information on components and examples.

## What's included
Within the download you'll find the following directories and files
```
|---dist
|   |---index.d.ts
|   |---punch-ui.js
|---README.md
|---package.json
|---LICENSE
```
## Documentation
Punch UI documentation, included in this repo in the docs directory, is built with Jekyll and publicly hosted on GitHub Pages at https://mtutynina.github.io/punch-ui/. The docs may also be run locally.
### Running documentation locally
1. [Install Jekyll](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/testing-your-github-pages-site-locally-with-jekyll)
2. Open terminal in `docs` folder
3. Run `bundle install`
4. Run your site locally `bundle exec jekyll serve`
5. To preview site, in your web browser, navigate to http://localhost:4000

## Examples
Visit [examples repository](https://github.com/mtutynina/PunchUIExamples) to see all available use cases.

## Project structure and source code
### Components
The source code of each component is located in a separate component folder in the `src` directory. Component folder consist of following files:
1. `component-name.ts` - Component's specific logic.
2. `component-name.html` - Component's html template.
3. `component-name.css` - Component's specific styles (Not required).
4. `index.ts` - Register new knockout component here.  

Example:
```
|---src
|   |---pagination
|      |---index.ts
|      |---pagination.html
|      |---pagination.ts
```
### Tests
#### Jest
In test folder you can find tests setted up with jest. Run in terminal from root folder `npm run test`
#### Example Project
You can check component in action by implementing new component usage inside [project with examples](https://github.com/mtutynina/PunchUIExamples)  
To check local changes that are not in npm use `npm link`:  
```
cd punch-ui
npm link
npm run build
cd ../PunchUIExamples/PunchUIExamples
npm link punch-ui
npm run build
```
### Scripts
`npm run build` - Packs bundles with webpack  
`npm run test` - Runs tests  
`npm run lint` - Analyzes code style using eslint rules

---
_Source: https://npm.io/package/punch-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._