@kingsimba/nc-ui 0.1.22 → 0.1.24

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 (8) hide show
  1. package/README.md +54 -53
  2. package/dist/index.cjs +7 -7
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.ts +3 -1
  5. package/dist/index.js +586 -589
  6. package/dist/index.js.map +1 -1
  7. package/dist/style.css +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -29,18 +29,20 @@ pnpm add @kingsimba/nc-ui
29
29
  ## Quick Start
30
30
 
31
31
  ```tsx
32
- import { Button, ActivityIndicator } from '@kingsimba/nc-ui'
33
- import '@kingsimba/nc-ui/styles.css'
32
+ import { Button, ActivityIndicator } from "@kingsimba/nc-ui";
33
+ import "@kingsimba/nc-ui/styles.css";
34
34
 
35
35
  function App() {
36
36
  return (
37
37
  <div>
38
38
  <Button variant="primary">Click me</Button>
39
- <Button variant="danger" size="small">Delete</Button>
39
+ <Button variant="danger" size="small">
40
+ Delete
41
+ </Button>
40
42
  <Button loading>Saving...</Button>
41
43
  <ActivityIndicator size="large" />
42
44
  </div>
43
- )
45
+ );
44
46
  }
45
47
  ```
46
48
 
@@ -49,7 +51,7 @@ function App() {
49
51
  Icons are imported from a separate entry point to keep the main bundle size small:
50
52
 
51
53
  ```tsx
52
- import { CloseIcon, EditIcon, TrashIcon } from '@kingsimba/nc-ui/icons'
54
+ import { CloseIcon, EditIcon, TrashIcon } from "@kingsimba/nc-ui/icons";
53
55
 
54
56
  function MyComponent() {
55
57
  return (
@@ -58,7 +60,7 @@ function MyComponent() {
58
60
  <EditIcon size={20} color="#3b82f6" />
59
61
  <TrashIcon size={18} />
60
62
  </div>
61
- )
63
+ );
62
64
  }
63
65
  ```
64
66
 
@@ -68,33 +70,33 @@ function MyComponent() {
68
70
 
69
71
  nc-ui provides 23+ ready-to-use components. Click any component to see it in the interactive demo:
70
72
 
71
- | Component | Description |
72
- |-----------|-------------|
73
- | [ActivityIndicator](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=activity) | Loading spinner with size variants and overlay mode |
74
- | [Alert](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=alert) | Status banners with simple content, optional dismissal, and legacy code/text support |
75
- | [AppDialog](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=app-dialog) | Render any registered app inside a dialog overlay |
76
- | [Battery](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=battery) | Visual battery level indicator |
77
- | [Button](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=buttons) | Primary action button with variants, sizes, and loading states |
78
- | [ButtonGroup](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=button-group) | Segmented control for switching between predefined options |
79
- | [Checkbox](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=checkbox) | Toggle selection with indeterminate state support |
80
- | [CommonButtons](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=buttons-icon) | Pre-configured buttons (Close, Edit, Refresh, Trash) |
81
- | [ComboBox](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=combobox) | Searchable dropdown with autocomplete |
82
- | [ContextMenu](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=context-menu) | Right-click menu with customizable items |
83
- | [CsvTextArea](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=csv-textarea) | Tab-separated text editor with per-column color highlighting |
84
- | [Dialog](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=dialog) | Modal dialogs with header, footer, and action buttons |
85
- | [Hyperlink](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=hyperlink) | Styled anchor/link component |
86
- | [Icons](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=icons) | 50+ SVG icons (separate import path) |
87
- | [Input](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=input) | Text input with validation states and prefix/suffix support |
88
- | [ListGroup](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=list-group) | Grouped content sections built from `ListGroupItem` children |
89
- | [MonthRangePicker](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=month-range) | Month range selector with validation (YY-M(M) or YYYY-M(M) format) |
90
- | [MultiSelect](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=multi-select) | Multi-selection dropdown with tag display |
91
- | [NavStack](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=nav-stack) | Stack-based navigation for mobile-style settings UIs |
92
- | [Notification](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=notification) | Toast-style notifications with auto-dismiss and stacking |
93
- | [NumberInput](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=number-input) | Numeric input with increment/decrement controls |
94
- | [Slider](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=slider) | Range slider with value display |
95
- | [Tabs](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=tabs) | Tabbed navigation component |
96
- | [Toggle](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=toggle) | Switch/toggle with on/off states |
97
- | [YamlTextArea](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=yaml-textarea) | YAML editor with syntax highlighting and validation |
73
+ | Component | Description |
74
+ | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
75
+ | [ActivityIndicator](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=activity) | Loading spinner with size variants and overlay mode |
76
+ | [Alert](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=alert) | Status banners with simple content, optional dismissal, and legacy code/text support |
77
+ | [AppDialog](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=app-dialog) | Render any registered app inside a dialog overlay |
78
+ | [Battery](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=battery) | Visual battery level indicator |
79
+ | [Button](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=buttons) | Primary action button with variants, sizes, and loading states |
80
+ | [ButtonGroup](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=button-group) | Segmented control for switching between predefined options |
81
+ | [Checkbox](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=checkbox) | Toggle selection with indeterminate state support |
82
+ | [CommonButtons](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=buttons-icon) | Pre-configured buttons (Close, Edit, Refresh, Trash) |
83
+ | [ComboBox](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=combobox) | Searchable dropdown with autocomplete |
84
+ | [ContextMenu](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=context-menu) | Right-click menu with customizable items |
85
+ | [CsvTextArea](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=csv-textarea) | Tab-separated text editor with per-column color highlighting |
86
+ | [Dialog](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=dialog) | Modal dialogs with header, footer, and action buttons |
87
+ | [Hyperlink](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=hyperlink) | Styled anchor/link component |
88
+ | [Icons](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=icons) | 50+ SVG icons (separate import path) |
89
+ | [Input](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=input) | Text input with validation states and prefix/suffix support |
90
+ | [ListGroup](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=list-group) | Grouped content sections built from `ListGroupItem` children |
91
+ | [MonthRangePicker](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=month-range) | Month range selector with validation (YY-M(M) or YYYY-M(M) format) |
92
+ | [MultiSelect](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=multi-select) | Multi-selection dropdown with tag display |
93
+ | [NavStack](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=nav-stack) | Stack-based navigation for mobile-style settings UIs |
94
+ | [Notification](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=notification) | Toast-style notifications with auto-dismiss and stacking |
95
+ | [NumberInput](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=number-input) | Numeric input with increment/decrement controls |
96
+ | [Slider](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=slider) | Range slider with value display |
97
+ | [Tabs](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=tabs) | Tabbed navigation component |
98
+ | [Toggle](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=toggle) | Switch/toggle with on/off states |
99
+ | [YamlTextArea](https://kingsimba.github.io/nc-ui/?app=ui-components&tab=yaml-textarea) | YAML editor with syntax highlighting and validation |
98
100
 
99
101
  ## App Framework
100
102
 
@@ -111,37 +113,37 @@ nc-ui includes a complete framework for building panel-based applications that r
111
113
  ### Quick Example
112
114
 
113
115
  ```tsx
114
- import React from 'react'
115
- import { appRegistry, runningAppsStore, useApp } from '@kingsimba/nc-ui'
116
- import { MyAppIcon } from './MyAppIcon'
116
+ import React from "react";
117
+ import { appRegistry, runningAppsStore, useApp } from "@kingsimba/nc-ui";
118
+ import { MyAppIcon } from "./MyAppIcon";
117
119
 
118
120
  // 1. Create your app component
119
121
  function MyApp() {
120
- const { setTitle, close } = useApp()
121
-
122
+ const { setTitle, close } = useApp();
123
+
122
124
  return (
123
125
  <div>
124
126
  <h1>My App</h1>
125
127
  <button onClick={close}>Close</button>
126
128
  </div>
127
- )
129
+ );
128
130
  }
129
131
 
130
132
  // 2. Register the app (with lazy loading)
131
- const LazyMyApp = React.lazy(() =>
132
- import('./MyApp').then(m => ({ default: m.MyApp }))
133
- )
133
+ const LazyMyApp = React.lazy(() =>
134
+ import("./MyApp").then((m) => ({ default: m.MyApp })),
135
+ );
134
136
 
135
137
  appRegistry.register({
136
- id: 'my-app',
137
- titleKey: 'apps.myApp.name',
138
+ id: "my-app",
139
+ titleKey: "apps.myApp.name",
138
140
  icon: MyAppIcon,
139
141
  component: LazyMyApp,
140
142
  width: 400,
141
- })
143
+ });
142
144
 
143
145
  // 3. Launch the app
144
- await runningAppsStore.launchApp('my-app')
146
+ await runningAppsStore.launchApp("my-app");
145
147
  ```
146
148
 
147
149
  ### App-Specific i18n
@@ -149,20 +151,20 @@ await runningAppsStore.launchApp('my-app')
149
151
  Each app can have isolated translations that won't conflict with other apps:
150
152
 
151
153
  ```tsx
152
- import { createAppI18nFactory } from '@kingsimba/nc-ui'
153
- import { I18nextProvider } from 'react-i18next'
154
+ import { createAppI18nFactory } from "@kingsimba/nc-ui";
155
+ import { I18nextProvider } from "react-i18next";
154
156
 
155
157
  const myAppI18n = createAppI18nFactory({
156
- en: { title: 'My App', save: 'Save' },
157
- zh: { title: '我的应用', save: '保存' },
158
- })
158
+ en: { title: "My App", save: "Save" },
159
+ zh: { title: "我的应用", save: "保存" },
160
+ });
159
161
 
160
162
  export function MyApp() {
161
163
  return (
162
164
  <I18nextProvider i18n={myAppI18n}>
163
165
  <MyAppContent />
164
166
  </I18nextProvider>
165
- )
167
+ );
166
168
  }
167
169
  ```
168
170
 
@@ -228,4 +230,3 @@ All CSS classes and variables use `nc-` prefix to avoid conflicts:
228
230
  - Variables: `--nc-primary`, `--nc-button-bg`, etc.
229
231
  - Classes: `.nc-button`, `.nc-activity-indicator`, etc.
230
232
  - Modifiers: `.nc-primary`, `.nc-small`, `.nc-loading`, etc.
231
-