@cocoar/ui-components 0.1.0-beta.70
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/README.md +56 -0
- package/fesm2022/cocoar-ui-components.mjs +4743 -0
- package/fesm2022/cocoar-ui-components.mjs.map +1 -0
- package/package.json +48 -0
- package/types/cocoar-ui-components.d.ts +1902 -0
package/README.md
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
# @cocoar/ui-components
|
|
2
|
+
|
|
3
|
+
Angular component library for the Cocoar Design System.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @cocoar/ui-components @cocoar/ui-tokens
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Import Components
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
import { CoarCardComponent, CoarButtonComponent } from '@cocoar/ui-components';
|
|
17
|
+
|
|
18
|
+
@Component({
|
|
19
|
+
imports: [CoarCardComponent, CoarButtonComponent],
|
|
20
|
+
// ...
|
|
21
|
+
})
|
|
22
|
+
export class MyComponent {}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Import Global Styles
|
|
26
|
+
|
|
27
|
+
Import design tokens (CSS variables) once in your global stylesheet:
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
@import '@cocoar/ui-tokens/css/all.css';
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Layout & Spacing
|
|
34
|
+
|
|
35
|
+
This library provides **pure, layout-agnostic components**. Components do not include margin or spacing - that's the responsibility of the consuming application.
|
|
36
|
+
|
|
37
|
+
For layout and spacing, use whatever your application prefers (plain CSS, utility classes, etc.).
|
|
38
|
+
|
|
39
|
+
The Cocoar showcase app uses Tailwind with a `tw:` prefix (e.g. `tw:flex`, `tw:gap-6`):
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<div class="tw:flex tw:flex-col tw:gap-6">
|
|
43
|
+
<coar-card>First card</coar-card>
|
|
44
|
+
<coar-card>Second card</coar-card>
|
|
45
|
+
<coar-code-block [code]="code">Code block</coar-code-block>
|
|
46
|
+
</div>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
This approach:
|
|
50
|
+
- Keeps library components pure and reusable
|
|
51
|
+
- Gives consuming apps full control over layout
|
|
52
|
+
- Avoids conflicts with different layout requirements
|
|
53
|
+
|
|
54
|
+
## Running unit tests
|
|
55
|
+
|
|
56
|
+
Run `nx test ui-components` to execute the unit tests.
|