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.