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 Biome
• 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.

Linting

$ pnpm lint

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

$ pnpm configure-hooks

Ignore code

If you want to ignore a lint rule for a specific line of the code, you can add a suppression comment above the line that emits the lint diagnostic:

// biome-ignore <rule>: <optional-explanation>

For example:

// biome-ignore lint/suspicious/noNamespace:
namespace foo {}

For useExhaustiveDependencies (equivalent of react-hooks/exhaustive-deps), you can even specify which dependencies are ignored, on multiple lines:

// biome-ignore lint/correctness/useExhaustiveDependencies(fn):
// biome-ignore lint/correctness/useExhaustiveDependencies(value):
useEffect(fn, [fn, value]);

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.