@@ -1,2 +1,165 @@
|
||||
# nova-design-system
|
||||
# Nova Design System (NDS)
|
||||
|
||||
Nova Design System (NDS) is a lightweight, responsive, and secure UI library built with **Svelte**.
|
||||
It is developed primarily for internal and personal projects and is available publicly for reference, testing, and contributions.
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
1. [Overview](#overview)
|
||||
2. [Project Status](#project-status)
|
||||
3. [Core Principles](#core-principles)
|
||||
4. [Available Components](#available-components)
|
||||
5. [Installation](#installation)
|
||||
6. [Usage](#usage)
|
||||
7. [Theming and Variables](#theming-and-variables)
|
||||
8. [Contributing](#contributing)
|
||||
9. [Development and Documentation](#development-and-documentation)
|
||||
10. [License](#license)
|
||||
|
||||
---
|
||||
|
||||
## 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.
|
||||
|
||||
## 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.
|
||||
|
||||
## 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.
|
||||
- **Native Theming:** Styling is based on centralized design tokens and supports Light and Dark themes.
|
||||
- **Type Safety:** The library is 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 styling.
|
||||
|
||||
## Available Components
|
||||
|
||||
### Actions
|
||||
- `Button`
|
||||
- `Toggle`
|
||||
|
||||
### Navigation
|
||||
- `Navbar`
|
||||
- `Sidebar`
|
||||
- `Tabs`
|
||||
- `Breadcrumb`
|
||||
- `Paginate`
|
||||
- `Stepper`
|
||||
|
||||
### Form
|
||||
- `Checkbox`
|
||||
- `Radio`
|
||||
- `Select`
|
||||
- `SelectOption`
|
||||
- `Search`
|
||||
- `Input`
|
||||
- `File Upload`
|
||||
- `Date Picker`
|
||||
- `Slider`
|
||||
- `Numeric Stepper`
|
||||
|
||||
### Data Display
|
||||
- `Badge`
|
||||
- `Avatar`
|
||||
- `Card`
|
||||
- `Table`
|
||||
- `Row`
|
||||
- `Cell`
|
||||
- `List Item`
|
||||
|
||||
### Overlay
|
||||
- `Modal`
|
||||
- `Dropdown`
|
||||
- `Tooltip`
|
||||
|
||||
### Feedback
|
||||
- `Notification` *(error / warning / info / success)*
|
||||
- `Loading Bar`
|
||||
|
||||
### Layout
|
||||
- `Divider`
|
||||
- `Link`
|
||||
|
||||
## Installation
|
||||
Install the package with npm:
|
||||
|
||||
```bash
|
||||
npm install @unkn0wn-pkgs/nds
|
||||
```
|
||||
|
||||
No extra Vite de-optimization configuration is required.
|
||||
|
||||
## Usage
|
||||
### Basic Component Example
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { Notification } from '@unkn0wn-pkgs/nds';
|
||||
</script>
|
||||
|
||||
<Notification type="warning">
|
||||
This is a warning message.
|
||||
</Notification>
|
||||
```
|
||||
|
||||
### Another Example
|
||||
```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
|
||||
```bash
|
||||
git clone https://github.com/unkn0wndo3s/Design-System.git
|
||||
```
|
||||
|
||||
### Install dependencies
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### Launch Storybook
|
||||
```bash
|
||||
npm run storybook
|
||||
```
|
||||
|
||||
### Useful scripts
|
||||
```bash
|
||||
npm run check
|
||||
npm run lint
|
||||
npm run format
|
||||
npm run build
|
||||
npm run build-storybook
|
||||
```
|
||||
|
||||
## 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`.
|
||||
Read that file carefully before using the library in a product or service.
|
||||
Reference in New Issue
Block a user