n-topic-search

A Typeahead component used to enhance the search experience for users. The typeahead serves as an autocomplete component designed to speed-up the search process. The application is built with TypeScript and Preact.

Overview

The Typeahead component is designed to work explicitly with o-header and its markup. The o-header and n-topic-search projects are integrated through dotcom-page-kit (https://github.com/Financial-Times/dotcom-page-kit) -> dotcom-ui-layout (https://github.com/Financial-Times/dotcom-page-kit/tree/main/packages/dotcom-ui-layout) -> dotcom-ui-header (https://github.com/Financial-Times/dotcom-page-kit/tree/main/packages/dotcom-ui-header). You’ll need to use the latest versions of the dotcom-page-kit and o-header packages when running the demo app, before starting development on new features, or performing bug fixes.

How to start

npm i
npm run build
npm start

The local demo application uses hot-reload. It restarts the server and rebuilds automatically. Go to http://localhost:9009/ to see your changes. Make sure the hot-reload has completed its tasks before checking your updates.

The entry point for the Typeahead application is src/index.tsx.

The entry point for the client-side demo application, initialisation logic and examples of how to use the Typeahead component is inside demo/client/main.tsx.

Bundling and npm publishing

This project uses Rollup for bundling the application. It's done through a custom toolkit plugin. npm publishing is automatically configured and handled through various toolkit plugins.

How to release a new version

1. Create a PR with your changes and get it approved.
2. Merge your PR to main.
3. Go to https://github.com/Financial-Times/n-topic-search/releases and draft a new release. When drafting a release, start the name with the version number so it’s easier to track.
4. After the release is published, you can go to Circle-CI to ensure it was successfully published to the npm registry.