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.

• Pagination

• Table spinner
• Page spinner
• Date picker
• Select box

Install Punch UI with npm npm install punch-ui

Read the Getting started page for information on components and examples.

Within the download you'll find the following directories and files

|---dist
|   |---index.d.ts
|   |---punch-ui.js
|---README.md
|---package.json
|---LICENSE

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.

1. Install 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

Visit examples repository to see all available use cases.

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

In test folder you can find tests setted up with jest. Run in terminal from root folder npm run test

You can check component in action by implementing new component usage inside project with examples
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

npm run build - Packs bundles with webpack
npm run test - Runs tests
npm run lint - Analyzes code style using eslint rules