Compare commits
21 Commits
5bcf5b20a0
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 94acacbd6c | |||
| 6811dda340 | |||
| bd0e5b0191 | |||
| 23a4175bc6 | |||
| 30a3b32d13 | |||
| 0405565fd1 | |||
| 352ec260fa | |||
| 53b3ee4301 | |||
| 88d56bbd38 | |||
| a40c1d1a7e | |||
| 237abcbd63 | |||
| 4777b1c68e | |||
| 4adc9b9eb6 | |||
| acc9bcb98b | |||
| 33131a8275 | |||
| 131d8376d4 | |||
| 71effe979a | |||
| 06a1695be4 | |||
| 734a593834 | |||
| a2ae6ce8a2 | |||
| 078b1d6e85 |
@@ -0,0 +1,37 @@
|
||||
name: Deploy Documentation
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
check-and-deploy:
|
||||
runs-on: host
|
||||
|
||||
steps:
|
||||
- name: Install Node.js requirements for Actions
|
||||
run: |
|
||||
if ! command -v node &> /dev/null; then
|
||||
apk add --no-cache nodejs npm
|
||||
fi
|
||||
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 2
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci --legacy-peer-deps
|
||||
|
||||
- name: Build documentation
|
||||
run: npm run build
|
||||
|
||||
- name: Deploy to Apache volume
|
||||
run: |
|
||||
find /var/www/design-system -mindepth 1 -delete
|
||||
|
||||
cp -r dist/. /var/www/design-system/
|
||||
|
||||
chmod -R 755 /var/www/design-system/
|
||||
+8
-32
@@ -1,42 +1,18 @@
|
||||
# Attribution
|
||||
|
||||
This file lists all third-party icons used within Nova Design System (NDS) that are not proprietary to the project, as referenced in `LICENSE.md` (section 4.1).
|
||||
This file lists all third-party assets used within Nova Design System (NDS) that are not proprietary to the project, as referenced in `LICENSE.md` (section 4.1).
|
||||
|
||||
All third-party icons used in NDS currently originate from **[Iconify](https://iconify.design/)**, specifically from the **[Lucide](https://lucide.dev/)** icon set (Iconify prefix: `lucide`, license: ISC — no attribution required, commercial use allowed).
|
||||
## Icons
|
||||
|
||||
Any icon **not listed in this file** is an icon created specifically for NDS and falls under section 4.2 of `LICENSE.md` instead.
|
||||
As of version `1.00.3`, NDS no longer ships a custom set of per-icon SVG wrapper components. All icons rendered inside NDS components (e.g. `Select`, `Avatar`, `Notification`, `numericStepper`, `Modal`) are sourced directly from the **[Lucide](https://lucide.dev/)** icon set via the **[`@lucide/astro`](https://www.npmjs.com/package/@lucide/astro)** package (license: **ISC** — no attribution required, commercial use allowed).
|
||||
|
||||
## Icon List
|
||||
This means there is no longer a per-component mapping to maintain here: any icon visible in NDS is a Lucide icon, used directly through `@lucide/astro`. The previous standalone `Icons` component family (`Arrow2Icon`, `BinIcon`, `BurgerIcon`, `SortIcon`, `UploadIcon`, etc.) has been removed from the package.
|
||||
|
||||
| Icon (used in NDS) | Source | Icon Set / Link |
|
||||
|---|---|---|
|
||||
| `Arrow2Icon` (Chevron) | Iconify | Lucide — [chevron-down](https://icon-sets.iconify.design/lucide/chevron-down/) |
|
||||
| `BinIcon` | Iconify | Lucide — [trash-2](https://icon-sets.iconify.design/lucide/trash-2/) |
|
||||
| `BurgerIcon` | Iconify | Lucide — [menu](https://icon-sets.iconify.design/lucide/menu/) |
|
||||
| `CalendarIcon` | Iconify | Lucide — [calendar](https://icon-sets.iconify.design/lucide/calendar/) |
|
||||
| `CheckIcon` | Iconify | Lucide — [check](https://icon-sets.iconify.design/lucide/check/) |
|
||||
| `CloseIcon` | Iconify | Lucide — [x](https://icon-sets.iconify.design/lucide/x/) |
|
||||
| `CodeIcon` | Iconify | Lucide — [code](https://icon-sets.iconify.design/lucide/code/) |
|
||||
| `CubeIcon` | Iconify | Lucide — [box](https://icon-sets.iconify.design/lucide/box/) |
|
||||
| `DownloadIcon` | Iconify | Lucide — [download](https://icon-sets.iconify.design/lucide/download/) |
|
||||
| `FilterIcon` | Iconify | Lucide — [filter](https://icon-sets.iconify.design/lucide/filter/) |
|
||||
| `HelpIcon` | Iconify | Lucide — [circle-help](https://icon-sets.iconify.design/lucide/circle-help/) |
|
||||
| `HomeIcon` | Iconify | Lucide — [house](https://icon-sets.iconify.design/lucide/house/) |
|
||||
| `LinkIcon` | Iconify | Lucide — [link](https://icon-sets.iconify.design/lucide/link/) |
|
||||
| `MinusIcon` | Iconify | Lucide — [minus](https://icon-sets.iconify.design/lucide/minus/) |
|
||||
| `MoreIcon` | Iconify | Lucide — [ellipsis](https://icon-sets.iconify.design/lucide/ellipsis/) |
|
||||
| `OverviewIcon` | Iconify | Lucide — [layout-dashboard](https://icon-sets.iconify.design/lucide/layout-dashboard/) |
|
||||
| `PlusIcon` | Iconify | Lucide — [plus](https://icon-sets.iconify.design/lucide/plus/) |
|
||||
| `ProfileIcon` | Iconify | Lucide — [user](https://icon-sets.iconify.design/lucide/user/) |
|
||||
| `SearchIcon` | Iconify | Lucide — [search](https://icon-sets.iconify.design/lucide/search/) |
|
||||
| `SettingsIcon` | Iconify | Lucide — [settings](https://icon-sets.iconify.design/lucide/settings/) |
|
||||
| `ShareIcon` | Iconify | Lucide — [share-2](https://icon-sets.iconify.design/lucide/share-2/) |
|
||||
| `ShieldIcon` | Iconify | Lucide — [shield](https://icon-sets.iconify.design/lucide/shield/) |
|
||||
| `SortIcon` | Iconify | Lucide — [arrow-up-down](https://icon-sets.iconify.design/lucide/arrow-up-down/) |
|
||||
| `StatsIcon` | Iconify | Lucide — [bar-chart-3](https://icon-sets.iconify.design/lucide/bar-chart-3/) |
|
||||
| `UploadIcon` | Iconify | Lucide — [upload](https://icon-sets.iconify.design/lucide/upload/) |
|
||||
## Custom Assets
|
||||
|
||||
Any icon or asset **not covered above** is created specifically for NDS and falls under section 4.2 of `LICENSE.md` instead. At the time of writing, there are no remaining custom (non-Lucide) icons in the project.
|
||||
|
||||
## Notes
|
||||
|
||||
- The Lucide icon set is released under the ISC license, which permits commercial use without requiring attribution. This file is maintained anyway for transparency and traceability.
|
||||
- This file must be kept up to date whenever a new third-party icon is added to NDS.
|
||||
- This file must be kept up to date whenever a new third-party icon set or asset is added to NDS.
|
||||
@@ -6,15 +6,15 @@ Nova Design System (NDS) is a lightweight, responsive UI component library built
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Overview](#overview)
|
||||
2. [Project Status](#project-status)
|
||||
3. [Core Principles](#core-principles)
|
||||
4. [Available Components](#available-components)
|
||||
5. [Design Tokens](#design-tokens)
|
||||
6. [Installation](#installation)
|
||||
7. [Usage](#usage)
|
||||
8. [Development](#development)
|
||||
9. [License](#license)
|
||||
1. [Overview](#user-content-overview)
|
||||
2. [Project Status](#user-content-project-status)
|
||||
3. [Core Principles](#user-content-core-principles)
|
||||
4. [Available Components](#user-content-available-components)
|
||||
5. [Design Tokens](#user-content-design-tokens)
|
||||
6. [Installation](#user-content-installation)
|
||||
7. [Usage](#user-content-usage)
|
||||
8. [Development](#user-content-development)
|
||||
9. [License](#user-content-license)
|
||||
|
||||
---
|
||||
|
||||
@@ -23,8 +23,7 @@ Nova Design System (NDS) is a lightweight, responsive UI component library built
|
||||
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
|
||||
|
||||
> **ALPHA** — The library is under active development. Current version: `0.05.0`. Component APIs, token naming, and internal architecture may change before a stable release.
|
||||
> **ALPHA** — The library is under active development. Current version: `1.2.1`. Component APIs, token naming, and internal architecture may change before a stable release.
|
||||
|
||||
## Core Principles
|
||||
|
||||
@@ -36,35 +35,46 @@ NDS provides a focused set of reusable Astro components with centralized design
|
||||
|
||||
## Available Components
|
||||
|
||||
These are the components currently implemented in `src/components/`:
|
||||
These are the components currently exported from the package (`src/components/index.ts`):
|
||||
|
||||
| Component | Category |
|
||||
|---|---|
|
||||
| `Button` | Actions |
|
||||
| `Toggle` | Actions |
|
||||
| `NumericStepper` | Actions |
|
||||
| `Select` / `SelectOption` | Actions |
|
||||
| `Avatar` | Data Display |
|
||||
| `Tab` / `TabItem` / `TabContent` | Navigation |
|
||||
| `Link` | Navigation |
|
||||
| `ListItem` / `ListItemTitle` / `ListItemSubtitle` | Data Display |
|
||||
| `Notification` | Feedback |
|
||||
| `LoadingBar` | Feedback |
|
||||
| `Icons` — `Arrow2Icon`, `BinIcon`, `BurgerIcon`, `CalendarIcon`, `CheckIcon`, `CloseIcon`, `CodeIcon`, `CubeIcon`, `DownloadIcon`, `FilterIcon`, `HelpIcon`, `HomeIcon`, `LinkIcon`, `MinusIcon`, `MoreIcon`, `OverviewIcon`, `PlusIcon`, `ProfileIcon`, `SearchIcon`, `SettingsIcon`, `ShareIcon`, `ShieldIcon`, `SortIcon`, `StatsIcon`, `UploadIcon` | Utility |
|
||||
| Component | Category |
|
||||
| -------------------------------------------------- | ------------ |
|
||||
| `Button` | Actions |
|
||||
| `Toggle` | Actions |
|
||||
| `NumericStepper` | Actions |
|
||||
| `Select` / `SelectOption` | Actions |
|
||||
| `TextField` | Forms |
|
||||
| `Checkbox` | Forms |
|
||||
| `Radio` | Forms |
|
||||
| `Tab` / `TabItem` / `TabContent` | Navigation |
|
||||
| `Link` | Navigation |
|
||||
| `Breadcrumb` / `BreadcrumbItem` | Navigation |
|
||||
| `Pagination` / `PaginationNumber` | Navigation |
|
||||
| `Navbar` | Navigation |
|
||||
| `Sidebar` / `SidebarItem` | Navigation |
|
||||
| `Avatar` | Data Display |
|
||||
| `Badge` | Data Display |
|
||||
| `Card` | Data Display |
|
||||
| `ListItem` / `ListItemTitle` / `ListItemSubtitle` | Data Display |
|
||||
| `Notification` | Feedback |
|
||||
| `LoadingBar` | Feedback |
|
||||
| `Tooltip` | Feedback |
|
||||
| `Modal` | Overlay |
|
||||
|
||||
> Components such as Navbar, Sidebar, Card, and Modal are planned but not yet implemented.
|
||||
> Icons are no longer shipped as standalone NDS components. As of `1.00.3`, all icons used internally (e.g. in `Select`, `Avatar`, `Notification`, `numericStepper`) come directly from the **[`@lucide/astro`](https://www.npmjs.com/package/@lucide/astro)** package. See `ATTRIBUTION.md` for details.
|
||||
|
||||
## Design Tokens
|
||||
|
||||
All styling is controlled via CSS custom properties prefixed with `--nds-`, defined in `src/styles/tokens/`:
|
||||
|
||||
| File | Contents |
|
||||
|---|---|
|
||||
| `_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 |
|
||||
| File | Contents |
|
||||
| ------------------ | ------------------------------------------------------------------------- |
|
||||
| `_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 |
|
||||
|
||||
**Rules:**
|
||||
|
||||
- Never hardcode colors, spacing, or radii in component styles when a token exists.
|
||||
- Never override tokens locally in component scope unless explicitly supported.
|
||||
- All global token changes must go through the core styling system.
|
||||
@@ -101,6 +111,27 @@ import { Notification } from '@unkn0wndo3s/nova-design-system';
|
||||
</Notification>
|
||||
```
|
||||
|
||||
```astro
|
||||
---
|
||||
import { Modal } from '@unkn0wndo3s/nova-design-system';
|
||||
---
|
||||
|
||||
<Modal>
|
||||
This is a modal dialog.
|
||||
</Modal>
|
||||
```
|
||||
|
||||
```astro
|
||||
---
|
||||
import { Breadcrumb, BreadcrumbItem } from '@unkn0wndo3s/nova-design-system';
|
||||
---
|
||||
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem href="/">Home</BreadcrumbItem>
|
||||
<BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
### Clone the repository
|
||||
@@ -130,23 +161,33 @@ npm run preview # Preview the production build
|
||||
|
||||
### Project Structure
|
||||
|
||||
```
|
||||
```text
|
||||
src/
|
||||
├── components/ # Astro components
|
||||
├── components/ # Astro components
|
||||
│ ├── Avatar/
|
||||
│ ├── Badge/
|
||||
│ ├── Breadcrumb/
|
||||
│ ├── Button/
|
||||
│ ├── Icons/
|
||||
│ ├── Card/
|
||||
│ ├── Checkbox/
|
||||
│ ├── Link/
|
||||
│ ├── ListItem/
|
||||
│ ├── LoadingBar/
|
||||
│ ├── Modal/
|
||||
│ ├── Navbar/
|
||||
│ ├── Notifications/
|
||||
│ ├── Select/
|
||||
│ ├── Tabs/
|
||||
│ ├── Toggle/
|
||||
│ ├── numericStepper/
|
||||
│ └── index.ts # Auto-generated barrel — do not edit manually
|
||||
├── layouts/ # Astro layouts
|
||||
├── pages/ # Documentation pages
|
||||
│ ├── pagination/
|
||||
│ ├── Radio/
|
||||
│ ├── Select/
|
||||
│ ├── Sidebar/
|
||||
│ ├── Tabs/
|
||||
│ ├── textField/
|
||||
│ ├── Toggle/
|
||||
│ ├── Tooltip/
|
||||
│ └── index.ts
|
||||
├── layouts/ # Astro layouts
|
||||
├── pages/ # Documentation pages
|
||||
├── styles/
|
||||
│ ├── tokens/
|
||||
│ │ ├── _colors.scss
|
||||
@@ -160,7 +201,7 @@ src/
|
||||
|
||||
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.
|
||||
NDS no longer maintains a custom set of icon components — icons are sourced from the **[Lucide](https://lucide.dev/)** icon set via `@lucide/astro`. If a needed icon isn't in Lucide, open an issue to discuss it before adding any new icon dependency.
|
||||
|
||||
## License
|
||||
|
||||
|
||||
+26
-4
@@ -1,9 +1,26 @@
|
||||
{
|
||||
"name": "@unkn0wndo3s/nova-design-system",
|
||||
"type": "module",
|
||||
"version": "1.01.0",
|
||||
"main": "./src/index.ts",
|
||||
"version": "1.2.1",
|
||||
"description": "Nova Design System — Astro component library",
|
||||
"license": "LICENSE.md",
|
||||
"author": "Unkn0wn",
|
||||
"main": "./src/index.ts",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.novaprojects.dev/unkn0wn/nova-design-system.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://git.novaprojects.dev/unkn0wn/nova-design-system/issues"
|
||||
},
|
||||
"homepage": "https://git.novaprojects.dev/unkn0wn/nova-design-system#readme",
|
||||
"keywords": [
|
||||
"astro",
|
||||
"astro-components",
|
||||
"design-system",
|
||||
"ui-library",
|
||||
"nova"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=22.12.0"
|
||||
},
|
||||
@@ -12,7 +29,9 @@
|
||||
"./styles": "./src/styles/index.scss"
|
||||
},
|
||||
"files": [
|
||||
"src"
|
||||
"src",
|
||||
"LICENSE.md",
|
||||
"README.md"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
@@ -21,10 +40,13 @@
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@lucide/astro": "^1.21.0",
|
||||
"@lucide/astro": "^1.21.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"astro": "^7.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"astro": "^7.0.0",
|
||||
"sass": "^1.99.0"
|
||||
}
|
||||
}
|
||||
@@ -20,9 +20,7 @@ const hasFooter = Astro.slots.has("footer");
|
||||
>
|
||||
<div class="modal__head">
|
||||
<span class="modal__title">{title}</span>
|
||||
<button class="modal__close" data-modal-close aria-label="Close">
|
||||
<XIcon size={18} />
|
||||
</button>
|
||||
<XIcon data-modal-close class="modal__close" size={18} aria-label="Close"/>
|
||||
</div>
|
||||
<div class="modal__body"><slot /></div>
|
||||
{
|
||||
|
||||
@@ -82,13 +82,13 @@ const spacingScale = [
|
||||
const radiusScale = ["xs", "sm", "md", "lg", "xl", "2xl", "full"];
|
||||
---
|
||||
|
||||
<Layout title="Nova Design System — Gallery">
|
||||
<Layout title="Nova Design System v1.2.1">
|
||||
<div class="g-page">
|
||||
<header class="g-topbar">
|
||||
<div class="g-brand">
|
||||
<span class="g-mark"></span>
|
||||
<span class="g-name">Nova Design System</span>
|
||||
<Badge type="primary" variant="soft">v0.06</Badge>
|
||||
<Badge type="primary" variant="soft">v1.2.1</Badge>
|
||||
</div>
|
||||
<Button type="secondary" size="sm" id="theme-btn">Toggle theme</Button>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user