Skip to content

Commit

Permalink
chore: update readme
Browse files Browse the repository at this point in the history
Signed-off-by: Asitha de Silva <asithade@gmail.com>
  • Loading branch information
asithade committed Nov 12, 2024
1 parent d037e80 commit 38fb85b
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 5 deletions.
3 changes: 3 additions & 0 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,5 +21,8 @@ jobs:
- name: Install dependencies
run: npm ci

- name: Audit dependencies (signatures)
run: npm audit signatures

- name: Build
run: npm run build
6 changes: 3 additions & 3 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ jobs:
- name: Install dependencies
run: npm ci

- name: Audit dependencies (signatures)
run: npm audit signatures

- name: Extract version from tag
id: get_version
run: |
Expand All @@ -30,9 +33,6 @@ jobs:
run: |
npm version ${{ steps.get_version.outputs.VERSION }} --no-git-tag-version --allow-same-version
- name: Build
run: npm run build

- name: Publish to NPM
run: npm publish
env:
Expand Down
110 changes: 109 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,109 @@
Test
# LFX UI Core

A package that contains core functionality for LFX UI products. It includes design tokens and PrimeTek theme configuration that is shared across LFX UI products.

## Overview

### Design Tokens
This package contains design tokens and PrimeTek theme configuration that is shared across LFX UI products.

The generated tokens are organized into three layers:
- **Primitive Tokens**: Base-level design values (colors, spacing, typography, etc.)
- **Semantic Tokens**: Purpose-driven tokens that reference primitive tokens
- **Component Tokens**: Component-specific tokens that reference semantic tokens

## Installation

```bash
npm install @linuxfoundation/lfx-ui-core
```

## Usage

After installing the package, you can import and use the tokens in your application:

```typescript
import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
import { definePreset } from 'primeng/themes';
import { Aura } from 'primeng/themes/aura';
import { lfxPreset } from '@linuxfoundation/lfx-ui-core';

const customPreset = definePreset(Aura, {
primitive: lfxPreset.primitive,
});

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
constructor(private config: PrimeNGConfig) {
this.config.theme.set({
preset: customPreset,
options: {
prefix: 'p',
darkModeSelector: '.dark-mode',
},
});
}
}
```

The tokens are strongly typed, providing autocomplete support and type safety in your IDE.

## Contributing

### Prerequisites

- Node.js 20.x
- npm

### Development Setup

1. Clone the repository:
```bash
git clone https://github.com/linuxfoundation/lfx-ui
cd lfx-ui-core
```

2. Install dependencies:
```bash
npm ci
```

3. Build the tokens:
```bash
npm run build
```

### Making Changes

1. The source tokens are defined in `src/design/tokens/tokens.json`
2. Modify the tokens file according to your needs, or update it in Figma using Tokens Studio
3. Run the build script to generate updated token files:
```bash
npm run build
```

### Release Process

1. Create a new version tag following semver conventions:
```bash
git tag v1.0.0
git push origin v1.0.0
```

2. The GitHub Action will automatically:
- Build the package
- Update the version
- Publish to npm

### Guidelines

- Follow semantic versioning for releases
- Update documentation when adding new token categories
- Add comments to explain complex token relationships
- Test tokens in a real application before releasing

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"access": "public"
},
"files": [
"dist"
"dist",
"README.md"
]
}

0 comments on commit 38fb85b

Please sign in to comment.