https://github.com/thenativeweb/thenativeweb-ux
thenativeweb-ux provides UI components for the native web applications.
https://github.com/thenativeweb/thenativeweb-ux
Last synced: about 1 year ago
JSON representation
thenativeweb-ux provides UI components for the native web applications.
- Host: GitHub
- URL: https://github.com/thenativeweb/thenativeweb-ux
- Owner: thenativeweb
- License: lgpl-3.0
- Created: 2017-11-06T10:28:12.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2024-03-27T22:45:40.000Z (about 2 years ago)
- Last Synced: 2024-09-27T23:43:02.548Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://ux.thenativeweb.io/
- Size: 7.79 MB
- Stars: 8
- Watchers: 5
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE-GPL.txt
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# thenativeweb-ux
thenativeweb-ux provides UI components for the native web applications.
## Status
| Category | Status |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Version | [](https://www.npmjs.com/package/thenativeweb-ux) |
| Dependencies |  |
| Dev dependencies |  |
| Build |  |
| License |  |
## Installation
```shell
$ npm install thenativeweb-ux react react-dom next
```
## Viewing the documentation
For application developers there is a [styleguide](https://ux.thenativeweb.io/) that serves as the documentation of this module. It contains a quick start, and showcases all the available components.
You can also run the styleguide on your local machine. For that, clone this repository, install its dependencies, and run the following command:
```shell
$ npm run start-styleguide
```
Then point your browser to `http://localhost:6060/`.
## Viewing the Next.js sample application
The integration tests include a [Next.js sample application](test/shared/sampleApplication) that shows how components can be used from within a Next.js project. To run the sample application use the following command:
```shell
$ npm run start-sample-application
```
## Optimizing images
To optimize `.jpg`, `.png`, and `.svg` images of a website, use the following command:
```shell
$ npx ux optimize-images --source --destination
```
This command recursively copies all images from the source directory to the destination directory and optimizes them using a reasonable preset.
## Verifying links
To verify whether a website contains broken links, use the following command:
```shell
$ npx ux verify-links
```
If you want to ignore some urls, provide the `--ignore` flag and set a regular expression that describes the urls to ignore:
```shell
$ npx ux verify-links --ignore
```
Sometimes, you may want to specify a sitemap file. For this, add the `--sitemap` flag and provide the path to the sitemap file you want to use:
```shell
$ npx ux verify-links --sitemap
```
## Debugging integration tests
This project uses [puppeteer](https://github.com/GoogleChrome/puppeteer) to verify that components render correctly inside a browser. By default these tests are run in headless mode. As debugging integration tests in headless mode can be painful there are two options to debug integration tests visually.
### Viewing failing test pages in a browser
First, to debug a failing integration test, you can have a look at the failing test page in a browser without running the tests. For that run the sample application using the following command:
```shell
$ npm run start-sample-application
```
Then point your browser to the failing test page and verify if it renders correctly.
### Running tests with a UI and in slow motion
Second, verifying that all the puppeteer commands are executed succesfully, it is much easier to do when puppeteer is not running in headless mode. To disable headless mode, set the environment variable `DEBUG` to `true`. This will start puppeteer in non-headless mode and slow down each operation:
```shell
$ DEBUG=true npx roboter test --type integration
```
This makes most sense if you also limit tests that should be run using mocha's `only` option.
## Running quality assurance
To run quality assurance for this module use [roboter](https://www.npmjs.com/package/roboter):
```shell
$ npx roboter
```
## Analysing the bundle size
When you add new dependencies, make sure to analyse the effects on the bundle size. To generate a bundle analysis for both the client and the server run:
```shell
$ npx roboter analyse-bundle
```
This task will build the styleguide with all of its pages, run an analysis of the generated bundles, and open the results in the browser.