diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 5a7550c..cccee19 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -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 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index f3d9b74..8a12ee6 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -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: | @@ -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: diff --git a/README.md b/README.md index 345e6ae..b774320 100644 --- a/README.md +++ b/README.md @@ -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 + diff --git a/package.json b/package.json index c70e23f..6b220ac 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "access": "public" }, "files": [ - "dist" + "dist", + "README.md" ] }