Skip to content

Commit

Permalink
feat: Search results component (#98)
Browse files Browse the repository at this point in the history
This commit adds a searchalicious-results component that displays the search results

* you must provide an element with attribute `slot="result"` that contains a template to display a single search result
* a `before-search` slot is also available to display something before first search launch
* as well as a `no-results` slot to display something when no results are found
  • Loading branch information
alexgarel authored Apr 24, 2024
1 parent e6730ba commit ae949ea
Show file tree
Hide file tree
Showing 16 changed files with 676 additions and 1,155 deletions.
4 changes: 4 additions & 0 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,10 @@ lint_front:
@echo "🔎 Running linters for frontend code..."
${DOCKER_COMPOSE} run --rm search_nodejs npm run format

tsc_watch:
@echo "🔎 Running front-end tsc in watch mode..."
${DOCKER_COMPOSE} run --rm search_nodejs npm run build:watch

#-------#
# Tests #
#-------#
Expand Down
35 changes: 34 additions & 1 deletion frontend/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,38 @@

The search-a-licious web frontend supplies web components. These are built using lit and typescript.

## Widgets

This part of the project was bootstrap using [lit-element-starter-ts](https://github.com/lit/lit-element-starter-ts/).
The project is currently composed of several widgets

* searchalicious-bar is at the core, it represent the search bar, but also handle the search logic (see searchalicious-ctl.ts)
* searchalicious-button is a simple button to launch the search
* searchalicious-results is the component that displays the search results
* you must provide an element with attribute `slot="result"` that contains a template to display a single search result
* a `before-search` slot is also available to display something before first search launch
* as well as a `no-results` slot to display something when no results are found


## Tools

Thanks to Makefile in root folder,

* `make check_front` run all checks in front
* `make lint_front` lint js code

While coding, you might want to run: `make tsc_watch` to have your code compile every time you save a `.ts` file.

## Tests

`make test_front` run js tests.

Note that we use:
* [Open Web Component testing framework](https://open-wc.org/docs/testing/testing-package/),
which in turn use:
* [Mocha](https://mochajs.org/) as the test runner
* which run tests using [playwright](https://playwright.dev/)
* and [Chai](https://www.chaijs.com/) for assertions

## Credits

This part of the project was bootstrap using [lit-element-starter-ts](https://github.com/lit/lit-element-starter-ts/).
109 changes: 107 additions & 2 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit ae949ea

Please sign in to comment.