- TypeScript 83.7%
- CSS 9.8%
- MDX 3.8%
- JavaScript 2.7%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
| .github/workflows | ||
| .husky | ||
| .storybook | ||
| scripts | ||
| src | ||
| .editorconfig | ||
| .gitignore | ||
| .nvmrc | ||
| .prettierignore | ||
| .release-please-manifest.json | ||
| AGENTS.md | ||
| CHANGELOG.md | ||
| CODE_OF_CONDUCT.md | ||
| commitlint.config.cjs | ||
| CONTRIBUTING.md | ||
| custom-elements-manifest.config.js | ||
| eslint.config.mjs | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.cjs | ||
| README.md | ||
| release-please-config.json | ||
| stat_zh.png | ||
| stylelint.config.mjs | ||
| tsconfig.build.json | ||
| tsconfig.json | ||
| tsdown.config.ts | ||
| web-test-runner.config.mjs | ||
🦁 leu
A UI component library based on the design system of the canton of zurich.
⚠️ Active development
This library hasn't had a major release yet. Therefore, all minor releases may include breaking changes. Check the changelog for details on the changes made. If you plan to use this library in production, please get in touch with us.
Prerequisites
Node.js >= v24
Installation
npm i @statistikzh/leu
Usage
The storybook contains a in depth guide to install the library and a comprehensive overview of all components and their usage.
In order for the components to work, you need to load the theme styles and the
font definitions globally. The theme file is part of the package
(dist/theme.css). The fonts on the other hand have to be licensed and are
therefore not included in this package.
If you have an environment that resolves bare module imports, you can use the library like this:
<link rel="stylesheet" href="@statistikzh/leu/theme.css" />
<script type="module">
import "@statistikzh/leu/leu-input.js"
</script>
<leu-input label="Repository" type="text" value="@statistikzh/leu"></leu-input>
CDN
Browsers can't resolve bare module imports without import maps. But we can use a CDN to resolve the imports for us. This is useful if you're just using plain HTML and JavaScript without any build or transformation steps. This is also applicable in an environment like Observable.
<link
rel="stylesheet"
href="https://esm.sh/@statistikzh/leu@0.22.0/dist/theme.css"
/>
<script type="module">
import "https://esm.sh/@statistikzh/leu@0.22.0/leu-input.js"
</script>
<leu-input label="Repository" type="text" value="@statistikzh/leu"></leu-input>
Linting and formatting
To scan the project for linting and formatting errors, run
npm run lint
To automatically fix linting and formatting errors, run
npm run format
Testing with Web Test Runner
To execute a single test run:
npm run test
To run the tests in interactive watch mode run:
npm run test:watch
Demoing with Storybook
To run a local instance of Storybook for your component, run
npm run storybook
To build a production version of Storybook, run
npm run storybook:build
Contributors
Thanks to the following people who have contributed to this project
Contact
Dan Büschlen
dan.bueschlen@statistik.ji.zh.ch
License
This project uses the following license:
Guidelines for contributing
We welcome contributions. Please see our CONTRIBUTING.md file for detailed guidelines of how to contribute.
Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.