133 lines
2.5 KiB
Markdown
133 lines
2.5 KiB
Markdown
# nychthemeron
|
|
|
|
A CSS-reactive Vue component library built on PrimeVue (Unstyled), shipped with the nychthemeron theme as a default.
|
|
|
|
## About
|
|
|
|
nychthemeron provides a curated set of Vue 3 components powered by PrimeVue's unstyled components and the nychthemeron theme system. This approach gives you complete control over component styling while maintaining a consistent, polished design language out of the box.
|
|
|
|
### Features
|
|
|
|
- **CSS-Reactive**: Components respond to CSS changes without requiring JavaScript updates
|
|
- **PrimeVue Powered**: Built on the robust, accessible PrimeVue unstyled component library
|
|
- **Theme Included**: Ships with the nychthemeron theme, ready to use immediately
|
|
- **TypeScript**: Full type support for Vue 3 and TypeScript projects
|
|
- **Customizable**: Override or extend the default theme to match your design system
|
|
|
|
## Quick Start
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
npm install @nychthemeron/library primevue vue@^3.5.0
|
|
```
|
|
|
|
### Basic Usage
|
|
|
|
Import the library components and styles:
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
import { NychButton } from '@nychthemeron/library'
|
|
</script>
|
|
|
|
<template>
|
|
<NychButton label="Click me" />
|
|
</template>
|
|
|
|
<style>
|
|
@import '@nychthemeron/library/style';
|
|
@import '@nychthemeron/library/theme';
|
|
</style>
|
|
```
|
|
|
|
## Components
|
|
|
|
- **NychButton** - Customizable button component
|
|
|
|
More components coming soon.
|
|
|
|
## Customization
|
|
|
|
### Using the Default Theme
|
|
|
|
The nychthemeron theme is included by default:
|
|
|
|
```css
|
|
@import '@nychthemeron/library/theme';
|
|
```
|
|
|
|
### Custom Styling
|
|
|
|
Override or extend component styles by importing only the base styles and providing your own CSS:
|
|
|
|
```css
|
|
@import '@nychthemeron/library/style';
|
|
|
|
/* Your custom theme */
|
|
:root {
|
|
--primary-color: #your-color;
|
|
/* More CSS variables */
|
|
}
|
|
```
|
|
|
|
## Project Structure
|
|
|
|
This is a monorepo containing:
|
|
|
|
- **`packages/library`** - The component library package
|
|
- **`packages/playground`** - Development environment and examples
|
|
|
|
## Development
|
|
|
|
### Setup
|
|
|
|
```bash
|
|
bun install
|
|
```
|
|
|
|
### Development Server
|
|
|
|
Start the playground to develop and test components:
|
|
|
|
```bash
|
|
bun dev
|
|
```
|
|
|
|
### Build
|
|
|
|
Build the library for production:
|
|
|
|
```bash
|
|
bun build
|
|
```
|
|
|
|
### Testing
|
|
|
|
Run unit tests:
|
|
|
|
```bash
|
|
bun test
|
|
```
|
|
|
|
### Linting and Formatting
|
|
|
|
```bash
|
|
bun lint # Check and fix linting issues
|
|
bun format # Format code with Prettier
|
|
bun type-check # Run TypeScript type checking
|
|
```
|
|
|
|
## Requirements
|
|
|
|
- **Node.js**: >=20.19.0 or >=22.12.0
|
|
- **Vue**: ^3.5.0
|
|
- **PrimeVue**: ^4.5.0
|
|
|
|
## Browser Support
|
|
|
|
Supports all modern browsers with CSS Grid and CSS Variables support.
|
|
|
|
## License
|
|
|
|
MIT
|