unkn0wn/nova-design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: updating readme to give accurate informations

Browse Source
This commit is contained in:
unkn0wn
2026-06-04 12:13:30 +00:00
parent b3ec60db5d
commit ee8be2e20b
1 changed files with 100 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+100 -106
View File
@@ -1,165 +1,159 @@
# Nova Design System (NDS) # Nova Design System (NDS)
Nova Design System (NDS) is a lightweight, responsive, and secure UI library built with **Svelte**. Nova Design System (NDS) is a lightweight, responsive UI component library built with **Astro**. It is developed primarily for internal and personal projects, and is publicly available for reference and contributions.
It is developed primarily for internal and personal projects and is available publicly for reference, testing, and contributions.
--- ---
## Table of Contents ## Table of Contents
1. [Overview](#overview) 1. [Overview](#overview)
2. [Project Status](#project-status) 2. [Project Status](#project-status)
3. [Core Principles](#core-principles) 3. [Core Principles](#core-principles)
4. [Available Components](#available-components) 4. [Available Components](#available-components)
5. [Installation](#installation) 5. [Design Tokens](#design-tokens)
6. [Usage](#usage) 6. [Installation](#installation)
7. [Theming and Variables](#theming-and-variables) 7. [Usage](#usage)
8. [Contributing](#contributing) 8. [Development](#development)
9. [Development and Documentation](#development-and-documentation) 9. [License](#license)
10. [License](#license)
--- ---
## Overview ## Overview
NDS aims to provide a robust set of reusable UI components that are easy to integrate while maintaining consistency, responsiveness, and a strong focus on safety and maintainability.
NDS provides a focused set of reusable Astro components with centralized design tokens, light/dark theming, and a strong focus on consistency and maintainability. The component documentation and showcase are also built with Astro.
## Project Status ## Project Status
**Current Phase: ALPHA**
The library is still under active development. Component APIs, styling structure, and internal architecture may change before the Beta release. > **ALPHA** — The library is under active development. Component APIs, token naming, and internal architecture may change before a stable release.
## Core Principles ## Core Principles
- **Responsive Architecture:** Components are built with a mobile-first mindset and are expected to behave correctly across modern screen sizes.
- **Security-Centric:** Unsafe patterns are avoided, especially anything that could introduce injection or untrusted rendering issues. - **Responsive Architecture:** Components are built mobile-first and work correctly across modern screen sizes.
- **Native Theming:** Styling is based on centralized design tokens and supports Light and Dark themes. - **Security-Centric:** Unsafe patterns (injection, untrusted rendering) are avoided by design.
- **Type Safety:** The library is written in TypeScript for stronger reliability and a better developer experience. - **Native Theming:** All styling relies on centralized design tokens and supports Light and Dark modes.
- **Consistency First:** Shared tokens, naming conventions, and reusable patterns take priority over one-off styling. - **Type Safety:** Written in TypeScript for stronger reliability and a better developer experience.
- **Consistency First:** Shared tokens, naming conventions, and reusable patterns take priority over one-off styles.
## Available Components ## Available Components
### Actions These are the components currently implemented in `src/components/`:
- `Button`
- `Toggle`
### Navigation | Component | Category |
- `Navbar` |---|---|
- `Sidebar` | `Button` | Actions |
- `Tabs` | `Toggle` | Actions |
- `Breadcrumb` | `Tabs` / `Tab` / `TabItem` / `TabContent` | Navigation |
- `Paginate` | `Link` | Layout |
- `Stepper` | `ListItem` | Data Display |
| `Notifications` | Feedback |
| `Icons` | Utility |
### Form > Many components listed in earlier versions of this README (Navbar, Sidebar, Card, Modal, etc.) are planned but not yet implemented.
- `Checkbox`
- `Radio`
- `Select`
- `SelectOption`
- `Search`
- `Input`
- `File Upload`
- `Date Picker`
- `Slider`
- `Numeric Stepper`
### Data Display ## Design Tokens
- `Badge`
- `Avatar`
- `Card`
- `Table`
- `Row`
- `Cell`
- `List Item`
### Overlay All styling is controlled via CSS custom properties prefixed with `--nds-`, defined in `src/styles/tokens/`:
- `Modal`
- `Dropdown`
- `Tooltip`
### Feedback | File | Contents |
- `Notification` *(error / warning / info / success)* |---|---|
- `Loading Bar` | `_colors.scss` | Color palette and semantic colors (`success`, `warning`, `error`, `info`) |
| `_spacing.scss` | Base spacing scale, border radius, and border width |
| `_typography.scss` | Font families, sizes, and weights |
### Layout **Rules:**
- `Divider` - Never hardcode colors, spacing, or radii in component styles when a token exists.
- `Link` - Never override tokens locally in component scope unless explicitly supported.
- All global token changes must go through the core styling system.
## Installation ## Installation
Install the package with npm:
```bash ```bash
npm install @unkn0wn-pkgs/nds npm install @unkn0wndo3s/nova-design-system
``` ```
No extra Vite de-optimization configuration is required. No extra Vite de-optimization configuration is required.
## Usage ## Usage
### Basic Component Example
```svelte
<script lang="ts">
import { Notification } from '@unkn0wn-pkgs/nds';
</script>
<Notification type="warning"> Import components directly from the package:
```astro
---
import { Button } from '@unkn0wndo3s/nova-design-system';
---
<Button>Click me</Button>
```
```astro
---
import { Notifications } from '@unkn0wndo3s/nova-design-system';
---
<Notifications type="warning">
This is a warning message. This is a warning message.
</Notification> </Notifications>
``` ```
### Another Example ## Development
```svelte
<script lang="ts">
import { Button } from '@unkn0wn-pkgs/nds';
</script>
<Button>
Click me
</Button>
```
## Theming and Variables
NDS relies on a centralized Design Token system.
All styling is controlled through CSS custom properties prefixed with `--nds-`.
### Rules
- Do not hardcode colors, spacing, or radii directly inside component styles when a design token exists.
- Do not override tokens locally in isolated component scopes unless the system explicitly supports it.
- Keep all global token changes inside the core styling system to preserve consistency.
## Contributing
Contributions are welcome.
If you want to report a bug, suggest a feature, or submit a Pull Request, follow the repository contribution rules and templates.
Please read the contribution guide before opening a PR.
### Icon Contribution Policy
By contributing a custom icon to NDS, you agree that the icon may be used inside the design system according to the repository license and contribution policy.
## Development and Documentation
Documentation is managed with **Storybook**.
### Clone the repository ### Clone the repository
```bash ```bash
git clone https://github.com/unkn0wndo3s/Design-System.git git clone https://git.novaprojects.dev/unkn0wn/nova-design-system.git
``` ```
### Install dependencies ### Install dependencies
```bash ```bash
npm install npm install
``` ```
### Launch Storybook ### Start the dev server
```bash ```bash
npm run storybook npm run dev
``` ```
### Useful scripts ### Useful scripts
```bash ```bash
npm run check npm run build # Build the project
npm run lint npm run check # Type checking
npm run format npm run lint # Lint the codebase
npm run build npm run format # Format code
npm run build-storybook
``` ```
### Project Structure
```
src/
├── components/ # Astro components
│ ├── Button/
│ ├── Icons/
│ ├── Link/
│ ├── ListItem/
│ ├── Notifications/
│ ├── Tabs/
│ ├── Toggle/
│ └── index.ts
├── layouts/ # Astro layouts
├── pages/ # Documentation pages
├── styles/
│ ├── tokens/
│ │ ├── _colors.scss
│ │ ├── _spacing.scss
│ │ └── _typography.scss
│ └── index.scss
└── index.ts
```
## Contributing
Contributions are welcome. To report a bug, suggest a feature, or open a Pull Request, follow the repository contribution rules and templates.
**Icon Contribution Policy:** By contributing a custom icon to NDS, you agree that it may be used within the design system under the repository license and contribution policy.
## License ## License
This project is **not distributed under a standard open-source license**.
Usage, redistribution, commercial use, and derivative work rules are defined in `LICENSE.md`. This project is **not distributed under a standard open-source license**. Usage, redistribution, commercial use, and derivative work rules are defined in `LICENSE.md`. Read that file carefully before using the library in a product or service.
Read that file carefully before using the library in a product or service.