@vtspecian/ui-core-design-system 0.2.0 โ 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -39
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,8 +1,36 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @vtspecian/ui-core-design-system
|
|
2
2
|
|
|
3
|
-
A high-performance, accessible, and scalable UI Design System built for modern web applications.
|
|
3
|
+
A high-performance, accessible, and scalable UI Design System built for modern web applications.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/@vtspecian/ui-core-design-system)
|
|
6
|
+
[](https://ui-core-design-system.vercel.app/)
|
|
7
|
+
|
|
8
|
+
## ๐ Quick Links
|
|
9
|
+
* **NPM Registry**: [@vtspecian/ui-core-design-system](https://www.npmjs.com/package/@vtspecian/ui-core-design-system)
|
|
10
|
+
* **Live Documentation**: [Storybook on Vercel](https://ui-core-design-system.vercel.app/)
|
|
11
|
+
|
|
12
|
+
## โจ Core Feature: Zero-Config
|
|
13
|
+
This library is designed for a **plug-and-play experience**. Leveraging custom build pipelines, **you do not need to import CSS files** in your project's root. Styles are automatically injected into the DOM upon component usage.
|
|
14
|
+
|
|
15
|
+
## ๐ **Installation**
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @vtspecian/ui-core-design-system
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## ๐ป **Usage**
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { Button } from '@vtspecian/ui-core-design-system';
|
|
25
|
+
|
|
26
|
+
export const App = () => (
|
|
27
|
+
<Button variant="primary" size="md">
|
|
28
|
+
Interactive Button
|
|
29
|
+
</Button>
|
|
30
|
+
);
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## ๐ **Tech Stack**
|
|
6
34
|
|
|
7
35
|
* **React 19**: Leveraging the newest concurrent rendering features and hooks.
|
|
8
36
|
* **Tailwind CSS 4**: Utilizing the latest CSS-engine for optimized, utility-first styling.
|
|
@@ -11,18 +39,6 @@ A high-performance, accessible, and scalable UI Design System built for modern w
|
|
|
11
39
|
* **Storybook 8**: Comprehensive documentation and isolated development environment.
|
|
12
40
|
* **Vitest & React Testing Library**: Modern testing suite for reliable unit and interaction testing.
|
|
13
41
|
|
|
14
|
-
## ๐ **Project Architecture**
|
|
15
|
-
|
|
16
|
-
The project follows a modular structure designed for maintainability and clear separation of concerns:
|
|
17
|
-
|
|
18
|
-
```text
|
|
19
|
-
src/
|
|
20
|
-
โโโ components/ # Atomic UI components with logic and variants
|
|
21
|
-
โโโ styles/ # Global styles and Tailwind v4 theme definitions
|
|
22
|
-
โโโ test/ # Test setup and global configuration
|
|
23
|
-
โโโ index.ts # Library public API (Entry point)
|
|
24
|
-
```
|
|
25
|
-
|
|
26
42
|
## ๐งช **Quality Assurance (QA)**
|
|
27
43
|
|
|
28
44
|
As an **Architect-led project**, code reliability is a priority. Every component is tested for interaction logic and visual states.
|
|
@@ -39,27 +55,3 @@ To explore the component library in isolation via **Storybook**:
|
|
|
39
55
|
npm run storybook
|
|
40
56
|
```
|
|
41
57
|
|
|
42
|
-
## ๐ **Development Workflow**
|
|
43
|
-
|
|
44
|
-
1. **Building for Production**: Generates an optimized bundle in the **dist/** directory, including type definitions.
|
|
45
|
-
```bash
|
|
46
|
-
npm run build
|
|
47
|
-
```
|
|
48
|
-
2. **Linting**: Static analysis to ensure code consistency.
|
|
49
|
-
```bash
|
|
50
|
-
npm run lint
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
## ๐ **Component Principles**
|
|
54
|
-
|
|
55
|
-
* **Accessibility First**: Every component is designed with **ARIA compliance** and keyboard navigation in mind.
|
|
56
|
-
* **Performance**: Zero-runtime overhead by leveraging **Tailwind CSS 4** and optimized build steps.
|
|
57
|
-
* **Extensibility**: Components use the **composition pattern**, allowing consumers to extend functionality via props and className merging.
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
--------
|
|
61
|
-
TODO:
|
|
62
|
-
|
|
63
|
-
- CI/CD publish in npm and update storybook in vercel;
|
|
64
|
-
- Update Readme.md;
|
|
65
|
-
- Add: Input, Card, Typography and Badge
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vtspecian/ui-core-design-system",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "A scalable UI Design System built with React, Tailwind CSS and TypeScript.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -68,4 +68,4 @@
|
|
|
68
68
|
"react": "^18.0.0 || ^19.0.0",
|
|
69
69
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
70
70
|
}
|
|
71
|
-
}
|
|
71
|
+
}
|