Overview

This is a library of web components that can be used to provide a consistent, properly branded user experience while increasing efficiency in the development of web sites/applications for the GN Advanced Science team.

Installation

When using your own bundling setup:

npm install @gn-as/web-components

If you are creating an Server-Side Rendering (SSR) compatible site with Vite, install the package as a "development" dependency to avoid compilation errors ([component name] is outside of Vite serving allow list errors)

npm install -D @gn-as/web-components

Usage

In a SvelteKit application

<script>
  import { Button } from '@gn-as/web-components';
</script>

<Button />

Development notes

Follow the standard "fork, develop, submit merge request" process.

Keep the following in mind:

1. Follow the Conventional Commits specification for commit messages. Merge Requests with commits not following this convention must rebase and amend the commit history. Use Husky to verify commit message format to help encourage/verify this format.
2. Base Merge Requests on the main branch. Use the main branch for development, release & next for generating releases. Releases are automatically generated via the CI/CD pipeline
3. Use Prettier and ESLint to ensure consistency. Use Prettier and ESLint to help keep the style of code in alignment across the project. If your editor supports these tools, they should inherit the preferred styles and the formatting of files you have changed should be automatically updated on both saving and committing. These tools can be manually invoked vi npm run scripts. See npm run.
4. Write components in TypeScript with JSDoc. There isn't a great source of information on how to document Svelte components with JSDoc. For the time being, please reference the Button.svelte component.

Releasing

The release process is:

1. Make changes and commit following the Conventional Commits specification.
2. Create a new merge request with the main as the "Source" branch and release being "Target" branch.
3. Wait for the CI pipeline to succeed.
4. Merge.

This publishes a new tagged release and NPM package automatically via the CI pipeline.