Modern Web Components library built with Lit.
npm install @paradox-labs/componentsbash
npm install @paradox-ui/components
`
Usage
$3
`typescript
import { Button } from '@paradox-ui/components';
import '@paradox-ui/components/tokens.css';
`
$3
`html
Click me
`
$3
> 📘 Pełny przewodnik Angular → - szczegółowa dokumentacja z przykładami
> 🚀 Quick Start → - szybki start z przykładem projektu
Angular ma pełne wsparcie dla Web Components. Oto jak zintegrować bibliotekę z Angularem:
#### 1. Instalacja
`bash
npm install @paradox-ui/components
`
#### 2. Konfiguracja (Angular 15+)
W pliku app.config.ts lub main.ts dodaj schemat CUSTOM_ELEMENTS_SCHEMA:
`typescript
// app.config.ts (standalone components)
import { ApplicationConfig, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
export const appConfig: ApplicationConfig = {
providers: [
// ...twoje providery
],
// Dodaj to dla komponentów standalone
};
// Jeśli używasz standalone components, dodaj schema w komponencie:
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
// ...
})
`
LUB w pliku app.module.ts (moduły NgModule):
`typescript
// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA], // Dodaj to
bootstrap: [AppComponent]
})
export class AppModule { }
`
#### 3. Import komponentów
W main.ts lub w komponencie, gdzie chcesz użyć Web Components:
`typescript
// main.ts
import '@paradox-ui/components';
import '@paradox-ui/components/tokens.css';
// ...reszta kodu bootstrapującego
`
#### 4. Użycie w szablonach
`html
Click me
(click)="handleClick()">
Secondary Button
`
#### 5. Obsługa eventów i properties w Angular
`typescript
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template:
})
export class AppComponent {
buttonVariant = 'primary';
buttonText = 'Click me';
handleClick() {
console.log('Button clicked!');
}
}
`
#### 6. Style globalne
Zaimportuj style w styles.css lub styles.scss:
`css
/ styles.css /
@import '@paradox-ui/components/tokens.css';
`
LUB w angular.json:
`json
{
"projects": {
"your-app": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.css",
"node_modules/@paradox-ui/components/dist/styles/tokens.css"
]
}
}
}
}
}
}
`
#### 7. TypeScript typings (opcjonalne)
Aby uzyskać autouzupełnianie w TypeScript, możesz stworzyć plik deklaracji:
`typescript
// src/types/web-components.d.ts
declare namespace JSX {
interface IntrinsicElements {
'ds-button': any;
'ds-header': any;
'ds-page': any;
}
}
`
$3
`tsx
// React
import '@paradox-ui/components';
import '@paradox-ui/components/tokens.css';
function App() {
return Click me ;
}
`
$3
`vue
Click me
`
Components
- Button - Customizable button component with multiple variants
- Header - Application header component
- Page - Page layout component
Development
For contributing and development setup, see the repository.
---
Using Changesets - Changelog Workflow
> 📘 Pełny przewodnik po changelogach → - szczegółowa dokumentacja z przykładami
> 🤖 Auto-generowanie z commitów → - automatyczne changesets z historii git (NOWE!)
Ten projekt używa automatycznej kategoryzacji changelogów i wspiera dwa workflows:
$3
Używaj prefiksów conventional commits w opisach zmian:
- feat: - Nowe funkcje (✨ Features)
- fix: - Naprawione błędy (🐛 Bug Fixes)
- docs: - Dokumentacja (📝 Documentation)
- perf: - Wydajność (⚡ Performance)
- refactor: - Refaktoryzacja (♻️ Refactor)
- test: - Testy (✅ Tests)
- chore: - Utrzymanie (🔧 Chore)
$3
`bash
Commituj z conventional commits
git commit -m "feat: dodano komponent Modal"
git commit -m "fix: naprawiono problem z focusem"
Automatycznie wygeneruj changesets
npm run changeset:from-commits
`
$3
Opcja A: Ręcznie (interaktywnie)
`bash
npm run changeset
`
This will prompt you to:
- Select the type of change (major/minor/patch)
- Describe the changes with appropriate prefix
Opcja B: Automatycznie z commitów 🚀
`bash
Commituj z conventional commits
git commit -m "feat: dodano nowy wariant danger dla Button"
git commit -m "fix: naprawiono styling focus w Input"
Generuj changesets automatycznie
npm run changeset:from-commits
`
Example changeset file (.changeset/cool-changes-happen.md):
`markdown
---
"@paradox-ui/components": minor
---
feat: Dodano nowy wariant danger dla komponentu Button
`
Example bugfix changeset:
`markdown
---
"@paradox-ui/components": patch
---
fix: Naprawiono styling stanu focus w komponencie Input
`
$3
To bump version and update CHANGELOG:
`bash
npm run version
`
This will:
- Update package.json version
- Update CHANGELOG.md with all changesets automatically categorized
- Delete processed changeset files
$3
`markdown
@paradox-ui/components
0.2.0
$3
- [✨ Features] Dodano nowy wariant danger dla komponentu Button
- [✨ Features] Card component obsługuje teraz właściwość hoverable
$3
- [🐛 Bug Fixes] Naprawiono styling stanu focus w komponencie Input
- [🐛 Bug Fixes] Poprawiono kontrast stanu disabled dla Button
- [📝 Documentation] Zaktualizowano dokumentację integracji z Angular
0.1.0
$3
- [✨ Features] Pierwsze wydanie z komponentami Button, Card, i Input
`
Running the Project
`bash
Install dependencies
npm install
Start Storybook
npm run storybook
Build components
npm run build
Create a changeset
npm run changeset
Update version and changelog
npm run version
`
Using the Design System
$3
`bash
npm install my-design-system
`
Import tokens globally (once in your app):
`javascript
// In your main.js or index.html
import 'my-design-system/tokens.css';
`
Use components:
`javascript
import 'my-design-system';
// In your HTML
Click me
Content
``