https://github.com/redlink-gmbh/amsui
Search UI elements that already include best practices . The UI is based on Angular Material.
https://github.com/redlink-gmbh/amsui
angular angular-components frontend-searching material material-design material-ui search search-ui ui
Last synced: about 1 year ago
JSON representation
Search UI elements that already include best practices . The UI is based on Angular Material.
- Host: GitHub
- URL: https://github.com/redlink-gmbh/amsui
- Owner: redlink-gmbh
- License: mit
- Created: 2021-03-24T08:40:54.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-07T10:10:11.000Z (over 4 years ago)
- Last Synced: 2024-04-24T01:20:32.183Z (about 2 years ago)
- Topics: angular, angular-components, frontend-searching, material, material-design, material-ui, search, search-ui, ui
- Language: TypeScript
- Homepage:
- Size: 2.28 MB
- Stars: 6
- Watchers: 11
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Getting started
The Angular Material Search UI, in short AMSUI, is build to deliver search UI components that already include all the best practices.
These are needed to guarantee a great search experience for your users.
As the name already stated, the library is an extensions for the Angular Material library.
## Development instructions
The library can be used in the development process in three different scenarios:
1. Maintaining, releasing, developing the library itself
2. Using the library's search service, UI components and the Backend Adapter Service for a MVP-like search application/page.
3. Using some of the UI components standalone from the library.
## Library development setup
We use nvm (NodeJS version manager) to be sure that our project works everytime someone else tries to start/edit the AMSUI library.
If you are not familiar with nvm, you can find it [here](https://github.com/nvm-sh/nvm).
You should use the specified version of NodeJS in the [NVM config file](.nvmrc).
Just execute the command `nvm use` and you are good to go, or you could set up an automatic switch like it is done [here](https://medium.com/@kinduff/automatic-version-switch-for-nvm-ff9e00ae67f3).
First, you need to install the npm dependencies.
```
npm install
```
Then, you can build and watch the library with the following command:
```
npm run dev:amsui
```
The next command copies translations and styles once into the dist folder.
If you change a translation or something inside the global style of library, you need to manually run it again.
```
npm run copy:all
```
At last, the demo project can be started like this:
```
npm start
```
**Important notes:**
- Add prettier formatter on save in intellij products for a better developer experience.
- To be able to run the demo project with data, you need a Solr index and write a transformer service for the response docs.
## [Documentation](https://dev.redlink.io/amsui)
The documentation is written within Storybook and it can be found [here](https://dev.redlink.io/amsui).
## [npm library](https://www.npmjs.com/package/@redlink/amsui)
THe library is published to npm and can be used through installing it via npm.
## Demos
- [Standalone demo usage of library's components](https://dev.redlink.io/amsui-standalone-demo/) -- [source code](https://github.com/redlink-gmbh/amsui-standalone-demo)
- [Demo with a public API](https://dev.redlink.io/amsui-public-api-demo/) -- [source code](https://github.com/redlink-gmbh/amsui-public-api-demo)