thenativeweb-ux provides UI components for the native web applications.
| Category | Status |
|---|---|
| Version |  |
| Dependencies |  |
| Dev dependencies |  |
| Build |  |
| License |  |
$ npm install thenativeweb-ux react react-dom nextFor application developers there is a styleguide 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:
$ npm run start-styleguideThen point your browser to http://localhost:6060/.
The integration tests include a Next.js sample application that shows how components can be used from within a Next.js project. To run the sample application use the following command:
$ npm run start-sample-applicationTo optimize .jpg, .png, and .svg images of a website, use the following command:
$ npx ux optimize-images --source <path> --destination <path>This command recursively copies all images from the source directory to the destination directory and optimizes them using a reasonable preset.
To verify whether a website contains broken links, use the following command:
$ npx ux verify-links <url>If you want to ignore some urls, provide the --ignore flag and set a regular expression that describes the urls to ignore:
$ npx ux verify-links --ignore <regex> <url>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:
$ npx ux verify-links --sitemap <path> <url>This project uses 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.
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:
$ npm run start-sample-applicationThen point your browser to the failing test page and verify if it renders correctly.
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:
$ DEBUG=true npx roboter test --type integrationThis makes most sense if you also limit tests that should be run using mocha's only option.
To run quality assurance for this module use roboter:
$ npx roboterWhen 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:
$ npx roboter analyse-bundleThis task will build the styleguide with all of its pages, run an analysis of the generated bundles, and open the results in the browser.