Swan Lake

Swan's component kit

Getting started

First, install pnpm.

Clone

$ git clone [email protected]:swan-io/lake.git

Install

$ pnpm install

Editor

We recommend the following setup for an optimal developer experience:

• VS Code
• VS Code ESLint
• VS Code Prettier

By default, the VS Code TypeScript extension only checks the types in open files. If you want your IDE to check types in the whole project, check typescript.tsserver.experimental.enableProjectDiagnostics in your VS Code preferences.

For better performance (and confort!), it's recommended to set:

• eslint.run to "onSave".

Linting

$ pnpm lint

You can also configure lint-staged as a pre-commit hook by running the following command :

$ pnpm configure-hooks

Generate Fluent icons

Add the name of the desired icon in scripts/fluent-icons/icons.json using the format icon-name-{filled|regular}, and run the following command:

$ pnpm icons

And you'll be able to use your icon using the <Icon /> component using the name you specified!

Testing

$ pnpm test

We generally collocate test files next to their implementation, in a __tests__ directory, with the tested file name suffixed with .test:

> utils
  > __tests__
    > myFile.test.tsx
  > myFile.tsx

We use Vitest and React Testing Library.

Releasing

1. Run pnpm release, select next version increment.
2. Copy the PR url, make it approved and merge it.
3. A Github release will automatically be created by the CI.