Website components
This repository contains various dynamic components used on the Toggl Hire website. They are implemented as self-contained Svelte components, which are then exposed to the outside world through the thwc global variable. The components make API requests, and they have their own styles, but they are flexible enough to be resized and positioned within the website as needed.
Svelte?
This version of website components was originally a go loco week project, but it was fully finished, and the resulting bundle using Svelte is smaller than bundling React. Svelte also has a built-in support for useful things like transitions and tweening, so almost no external libraries are needed. It is different from React or Vue, so check out the docs if you are not familiar with it.
Usage
Include the library on the website:
<script src="https://unpkg.com/@togglhire/website-components/dist/thwc.js"></script>Then initialise each component as needed.
Feedback stats
const container = document.getElementById('stats');
thwc.feedbackStats(container);Feedback comments
const container = document.getElementById('comments');
thwc.feedbackComments(container);Development
Requirements
- Node.js, version 12 should work
- Yarn
Storybook
You can start Storybook preview with yarn start.
Testing
You can run the tests with yarn test. Each component should have tests that check all functionality. If needed, API requests should be mocked using msw.
Compiling
You can compile the library into a single file with yarn build. The output will be in the dist directory.
Publishing
Publish a new version to npm using yarn publish. It will ask for a new version name, please follow Semantic Versioning. Publishing will compile the bundle automatically.