@joanroucoux/cairn-ui 0.8.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/README.md +67 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.8.1
|
|
4
|
+
|
|
5
|
+
### Added
|
|
6
|
+
|
|
7
|
+
- The npm page now carries a README: what the package is, how to install it, the stylesheets and the `@source`
|
|
8
|
+
line to add, the `fonts.css` setup and the per-folder imports.
|
|
9
|
+
- The Storybook is published at https://joanroucoux.github.io/cairn-ui/ on every push to `main`.
|
|
10
|
+
- A GitHub Release is created for every `vX.Y.Z` tag, with the matching section of this changelog as its notes.
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Stories and specs use fictional data. No component or style changes.
|
|
15
|
+
|
|
3
16
|
## 0.8.0
|
|
4
17
|
|
|
5
18
|
### Breaking
|
package/README.md
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# @joanroucoux/cairn-ui
|
|
2
|
+
|
|
3
|
+
A monochrome, accessible Angular design system, built for [Cairn](https://github.com/JoanRoucoux/cairn).
|
|
4
|
+
|
|
5
|
+
Browse every component, live, in the [Storybook](https://joanroucoux.github.io/cairn-ui/).
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @joanroucoux/cairn-ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Peer dependencies: `@angular/common` and `@angular/core`, version 22. The styles use Tailwind CSS 4, which the consuming
|
|
14
|
+
application provides.
|
|
15
|
+
|
|
16
|
+
## Setup
|
|
17
|
+
|
|
18
|
+
Import three stylesheets, in order, and register the package as a Tailwind source (templates in `node_modules` are
|
|
19
|
+
not scanned by default):
|
|
20
|
+
|
|
21
|
+
```css
|
|
22
|
+
@import 'tailwindcss';
|
|
23
|
+
@import '@joanroucoux/cairn-ui/styles/tokens.css';
|
|
24
|
+
@import '@joanroucoux/cairn-ui/styles/theme.css';
|
|
25
|
+
@import '@joanroucoux/cairn-ui/styles/motion.css';
|
|
26
|
+
@source '../node_modules/@joanroucoux/cairn-ui';
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
`fonts.css` self-hosts Rubik and must not be imported through the Tailwind entry above: its `@font-face` rules use
|
|
30
|
+
`url(./fonts/...)` paths relative to the file, and Tailwind's CSS-first pipeline does not rebase them. Add it to the
|
|
31
|
+
`styles` array of `angular.json` instead:
|
|
32
|
+
|
|
33
|
+
```json
|
|
34
|
+
"styles": ["src/styles.css", "node_modules/@joanroucoux/cairn-ui/styles/fonts.css"]
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
An application that does not use Tailwind can import `@joanroucoux/cairn-ui/styles/tokens.css` alone: it is a pure
|
|
38
|
+
token sheet.
|
|
39
|
+
|
|
40
|
+
## Usage
|
|
41
|
+
|
|
42
|
+
The package root exports nothing. Each component folder is its own entry point, so your bundler only ships what you
|
|
43
|
+
import:
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
import { Component } from '@angular/core';
|
|
47
|
+
|
|
48
|
+
import { UiBadge } from '@joanroucoux/cairn-ui/badge';
|
|
49
|
+
import { UiButton } from '@joanroucoux/cairn-ui/button';
|
|
50
|
+
|
|
51
|
+
@Component({
|
|
52
|
+
selector: 'app-example',
|
|
53
|
+
imports: [UiButton, UiBadge],
|
|
54
|
+
template: `
|
|
55
|
+
<ui-badge>Synced</ui-badge>
|
|
56
|
+
<button ui-button>Save</button>
|
|
57
|
+
`,
|
|
58
|
+
})
|
|
59
|
+
export class Example {}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## More
|
|
63
|
+
|
|
64
|
+
- [Repository README](https://github.com/JoanRoucoux/cairn-ui#readme): the component list, design principles and development guide
|
|
65
|
+
- [Changelog](https://github.com/JoanRoucoux/cairn-ui/blob/main/projects/ui/CHANGELOG.md)
|
|
66
|
+
|
|
67
|
+
MIT licensed.
|