@adarsh.nishad/activityual-ui 0.1.0 → 0.2.0

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.
Files changed (2) hide show
  1. package/README.md +128 -23
  2. package/package.json +4 -1
package/README.md CHANGED
@@ -1,53 +1,150 @@
1
- # Activityual UI Component Library (`@adarsh.nishad/activityual-ui`)
1
+ # @adarsh.nishad/activityual-ui
2
2
 
3
- A reusable, accessible web component library built with **Lit** for the **Activityual** cloud-native personal habit tracker.
3
+ A modern, accessible, high-performance Web Component library for the **Activityual** personal habit rhythm and quantified-self application, built with [Lit](https://lit.dev/).
4
4
 
5
5
  ---
6
6
 
7
- ## Components
7
+ ## 🎨 Design System
8
8
 
9
- | Component | Custom Element Tag | Description |
10
- | :--- | :--- | :--- |
11
- | **Button** | `<activityual-button>` | Interactive button (`primary`, `secondary`, `amber`, `charcoal`, `ghost`, `danger`) with loading states |
12
- | **Card** | `<activityual-card>` | Obsidian glass container card with subtle borders and glow |
13
- | **Activity Card** | `<activityual-activity-card>` | Core habit/activity card with streak badges, actions, and progress |
14
- | **Stat Card** | `<activityual-stat-card>` | Metrics and KPI display card with sparkline and delta indicators |
15
- | **Progress Ring** | `<activityual-progress-ring>` | Circular SVG progress ring with animated stroke and target values |
16
- | **Streak Badge** | `<activityual-streak-badge>` | Visual flame streak badge displaying active day streaks |
17
- | **Status Pill** | `<activityual-status-pill>` | Activity status indicators (`active`, `paused`, `archived`, `completed`) |
18
- | **Chart Panel** | `<activityual-chart-panel>` | Analytics and visualization container panel with filters |
19
- | **Recommendation Banner**| `<activityual-recommendation-banner>` | AI-driven habit suggestion and nudge banner |
20
- | **Empty State** | `<activityual-empty-state>` | Placeholder presentation for empty lists and initial states |
21
- | **Confirm Dialog** | `<activityual-confirm-dialog>` | Modal confirmation dialog with backdrop blur |
22
- | **Form Field** | `<activityual-form-field>` | Styled input / select / textarea wrapper with validation |
9
+ `activityual-ui` is crafted based on the **Vaulto Obsidian** design system:
10
+ - **Primary Color:** Vaulto Signature Orange (`#FF4305` / `#E93B00`) with ambient neon glow
11
+ - **Secondary / Success Color:** Financial Positive Emerald (`#25D366` / `rgba(37, 211, 102, 0.12)`)
12
+ - **Negative / Missed Color:** Crimson Red (`#FF3434` / `rgba(255, 52, 52, 0.12)`)
13
+ - **Pending / Neutral Color:** Amber (`#F59E0B`) & Slate (`#A5A5A5`)
14
+ - **Backgrounds & Surfaces:** Tiered charcoal foundation (`#080808`, `#1B1B1B`, `#202020`, `#272727`)
15
+ - **Glassmorphism & Depth:** Translucent cards with 20px–28px backdrop blur and low-chrome ambient borders
16
+ - **Typography:** Sans-serif interface (`Inter`, `'SF Pro Display'`) & telemetry numbers (`'JetBrains Mono'`)
23
17
 
24
18
  ---
25
19
 
26
- ## Installation & Consumption
20
+ ## 📦 Components
21
+
22
+ | Component | Description | Docs |
23
+ | :--- | :--- | :--- |
24
+ | **`activityual-button`** | Interactive pill button (`primary`, `secondary`, `amber`, `charcoal`, `ghost`, `danger`) with loading spinner | [Docs](docs/button.md) |
25
+ | **`activityual-card`** | Obsidian glass container card (`default`, `amber`, `inset`, `shell`) with customizable padding | [Docs](docs/card.md) |
26
+ | **`activityual-activity-card`** | Core habit ritual card with category glyph, streak badge, 5-day consistency trail, and interactive action buttons | [Docs](docs/activity-card.md) |
27
+ | **`activityual-stat-card`** | Metrics and KPI display card with delta pill indicators and monospace values | [Docs](docs/stat-card.md) |
28
+ | **`activityual-progress-ring`** | Circular SVG progress ring with animated stroke and automatic emerald completion state | [Docs](docs/progress-ring.md) |
29
+ | **`activityual-streak-badge`** | Visual flame streak badge displaying active day counts with optional glow highlight | [Docs](docs/streak-badge.md) |
30
+ | **`activityual-status-pill`** | Activity occurrence status indicators (`done`, `missed`, `pending`) in `sm` and `md` sizes | [Docs](docs/status-pill.md) |
31
+ | **`activityual-chart-panel`** | Weekly consistency and rhythm bar chart panel mapped against 80% target baseline | [Docs](docs/chart-panel.md) |
32
+ | **`activityual-recommendation-banner`** | AI Coach habit optimization banner displaying suggested execution windows & reasons | [Docs](docs/recommendation-banner.md) |
33
+ | **`activityual-empty-state`** | Dashed-border presentation placeholder for empty habit lists and categories | [Docs](docs/empty-state.md) |
34
+ | **`activityual-confirm-dialog`** | Accessible confirmation modal dialog with 28px backdrop blur and danger mode | [Docs](docs/confirm-dialog.md) |
35
+ | **`activityual-form-field`** | Styled form input wrapper with floating label, validation error feedback, and required star | [Docs](docs/form-field.md) |
36
+
37
+ ---
27
38
 
28
- ### In SvelteKit / Web Applications
39
+ ## 🚀 Getting Started
29
40
 
30
- Install the package:
41
+ ### Installation
31
42
 
32
43
  ```bash
33
44
  npm install @adarsh.nishad/activityual-ui
34
45
  ```
35
46
 
36
- Register all custom elements in your root layout (`src/routes/+layout.svelte`):
47
+ ### Start Dev Server (with Playground Demo)
48
+
49
+ Run the local interactive design system playground:
50
+
51
+ ```bash
52
+ # Directly from packages/activityual-ui:
53
+ npm start
54
+
55
+ # Or from repository root:
56
+ npm run start:ui
57
+ ```
58
+
59
+ ### Build for Production
60
+
61
+ Compile all TypeScript elements and type definitions into `dist/`:
62
+
63
+ ```bash
64
+ # Directly in package:
65
+ npm run build
66
+
67
+ # Or from repository root:
68
+ npm run build:ui
69
+ ```
70
+
71
+ ---
72
+
73
+ ## 💻 Usage
74
+
75
+ ### 1. In HTML / Vanilla JavaScript
76
+
77
+ ```html
78
+ <script type="module" src="https://unpkg.com/@adarsh.nishad/activityual-ui"></script>
79
+
80
+ <!-- Activity Card with Streak Badge & Status -->
81
+ <activityual-activity-card
82
+ activity-id="act-1"
83
+ title="Morning Sunlight & Hydration"
84
+ category="Health"
85
+ frequency="Daily • 07:30 AM"
86
+ streak="14"
87
+ status="done"
88
+ notes="Drink 500ml water and get 15 min direct sunlight"
89
+ ></activityual-activity-card>
90
+
91
+ <!-- Circular Progress Ring -->
92
+ <activityual-progress-ring percentage="85" label="Weekly Flow" size="130"></activityual-progress-ring>
93
+ ```
94
+
95
+ ### 2. In SvelteKit / Web Applications (`apps/web`)
96
+
97
+ In `src/routes/+layout.svelte` or your application entry point:
37
98
 
38
99
  ```typescript
39
100
  import '@adarsh.nishad/activityual-ui';
40
101
  ```
41
102
 
42
- Or import design tokens directly:
103
+ Then use the custom elements directly in any `.svelte` file:
104
+
105
+ ```svelte
106
+ <activityual-stat-card
107
+ title="Completion Rhythm"
108
+ value="88.4%"
109
+ subtitle="vs 82.0% baseline"
110
+ delta="+6.4%"
111
+ delta-type="positive"
112
+ ></activityual-stat-card>
113
+
114
+ <activityual-button
115
+ variant="primary"
116
+ size="md"
117
+ onclick={() => console.log('Action triggered')}
118
+ >
119
+ Record Completion
120
+ </activityual-button>
121
+ ```
122
+
123
+ ### 3. Individual Subpath Imports (Tree-Shaking)
124
+
125
+ Import individual custom elements without loading the entire bundle:
126
+
127
+ ```typescript
128
+ import '@adarsh.nishad/activityual-ui/button';
129
+ import '@adarsh.nishad/activityual-ui/activity-card';
130
+ import '@adarsh.nishad/activityual-ui/progress-ring';
131
+ import '@adarsh.nishad/activityual-ui/stat-card';
132
+ ```
133
+
134
+ ### 4. Design Tokens Direct Access
135
+
136
+ Import the typed Vaulto Obsidian token dictionary directly in JavaScript / TypeScript:
43
137
 
44
138
  ```typescript
45
139
  import { tokens } from '@adarsh.nishad/activityual-ui';
140
+
141
+ console.log(tokens.colors.primary); // #FF4305
142
+ console.log(tokens.colors.canvasBase); // #080808
46
143
  ```
47
144
 
48
145
  ---
49
146
 
50
- ## Building & Publishing to npm
147
+ ## 📦 Building & Publishing to npm
51
148
 
52
149
  Follow these steps whenever you make changes to `packages/activityual-ui` and want to publish a new release:
53
150
 
@@ -104,3 +201,11 @@ npm run publish:ui
104
201
  cd packages/activityual-ui
105
202
  npm publish --access public
106
203
  ```
204
+
205
+ ---
206
+
207
+ ## 🛠️ Development
208
+
209
+ - **Tag Convention:** All custom elements must use the `activityual-` tag prefix (e.g. `activityual-button`, `activityual-activity-card`).
210
+ - **Design Tokens:** Keep design tokens synced with `src/tokens.ts` and `src/tokens.json`.
211
+ - **Type Checking:** Run `npm run check` before committing changes.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adarsh.nishad/activityual-ui",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -26,6 +26,9 @@
26
26
  "clean": "rm -rf dist",
27
27
  "check": "tsc --noEmit",
28
28
  "build": "tsc",
29
+ "start": "vite --open",
30
+ "dev": "vite",
31
+ "preview": "vite preview",
29
32
  "prepublishOnly": "npm run build"
30
33
  },
31
34
  "dependencies": {