chordia-ui 0.1.0 → 0.1.1
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 +21 -19
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
#
|
|
1
|
+
# chordia-ui
|
|
2
2
|
|
|
3
|
-
Chordia Design System — UI components, design tokens, and Tailwind CSS preset for the Chordia conversation intelligence platform.
|
|
3
|
+
Chordia Design System — UI components, design tokens, and Tailwind CSS preset for the Chordia conversation intelligence platform. Published to npm as **`chordia-ui`**.
|
|
4
4
|
|
|
5
5
|
## Philosophy
|
|
6
6
|
|
|
@@ -12,28 +12,30 @@ Chordia Design System — UI components, design tokens, and Tailwind CSS preset
|
|
|
12
12
|
## Installation
|
|
13
13
|
|
|
14
14
|
```bash
|
|
15
|
-
|
|
16
|
-
npm link @chordia/ui
|
|
15
|
+
npm install chordia-ui
|
|
17
16
|
```
|
|
18
17
|
|
|
19
18
|
### Peer Dependencies
|
|
20
19
|
|
|
20
|
+
Make sure your app has these installed (they are peer deps of `chordia-ui`):
|
|
21
|
+
|
|
21
22
|
```bash
|
|
22
|
-
npm install react react-dom lucide-react
|
|
23
|
+
npm install react react-dom lucide-react recharts
|
|
23
24
|
```
|
|
24
25
|
|
|
25
26
|
## Usage
|
|
26
27
|
|
|
27
|
-
### 1. Import the Tailwind Preset
|
|
28
|
+
### 1. Import the Tailwind Preset (optional)
|
|
28
29
|
|
|
29
30
|
In your `tailwind.config.js`:
|
|
30
31
|
|
|
31
32
|
```js
|
|
32
33
|
module.exports = {
|
|
33
|
-
presets: [require('
|
|
34
|
+
presets: [require('chordia-ui/tailwind-preset')],
|
|
34
35
|
content: [
|
|
35
36
|
'./src/**/*.{js,jsx,ts,tsx}',
|
|
36
|
-
|
|
37
|
+
// If you want Tailwind to see chordia-ui classNames:
|
|
38
|
+
'./node_modules/chordia-ui/dist/**/*.{js,jsx}',
|
|
37
39
|
],
|
|
38
40
|
// your overrides...
|
|
39
41
|
};
|
|
@@ -44,31 +46,31 @@ module.exports = {
|
|
|
44
46
|
In your global CSS (e.g. `globals.css`):
|
|
45
47
|
|
|
46
48
|
```css
|
|
47
|
-
@import '
|
|
49
|
+
@import 'chordia-ui/tokens';
|
|
48
50
|
```
|
|
49
51
|
|
|
50
52
|
Or import individual token files:
|
|
51
53
|
|
|
52
54
|
```css
|
|
53
|
-
@import '
|
|
54
|
-
@import '
|
|
55
|
-
@import '
|
|
55
|
+
@import 'chordia-ui/tokens/colors.css';
|
|
56
|
+
@import 'chordia-ui/tokens/typography.css';
|
|
57
|
+
@import 'chordia-ui/tokens/spacing.css';
|
|
56
58
|
```
|
|
57
59
|
|
|
58
60
|
### 3. Use Components
|
|
59
61
|
|
|
60
62
|
```jsx
|
|
61
|
-
import { SignalCard, ScoreDriverCard, DeviationIndicator } from '
|
|
63
|
+
import { Card, SmallButton, SignalCard, ScoreDriverCard, DeviationIndicator } from 'chordia-ui';
|
|
62
64
|
```
|
|
63
65
|
|
|
64
66
|
## Component Categories
|
|
65
67
|
|
|
66
68
|
| Category | Components |
|
|
67
69
|
|---|---|
|
|
68
|
-
| **Primitives** |
|
|
69
|
-
| **Data** | DataTable, DataTableFilters, SummaryStatsPanel
|
|
70
|
-
| **Compass** | SignalCard, ObservationCard, SmallObservationCard, ScoreDriverCard, ScoreDriverCardVariant, ConditionCard, ModelScoreCard, SummarySection, ExpandPatternComparison |
|
|
71
|
-
| **Media** | TranscriptCard, Timeline |
|
|
70
|
+
| **Primitives** | Card, DetailCard, SmallButton, Tag, Badge, SectionLabel, Checkbox, TextInput, TextArea, Select, FormLabel, InlineConfirm, Tabs, Tooltip, DeviationIndicator, ColorPalette |
|
|
71
|
+
| **Data** | DataTable, DataTableFilters, SummaryStatsPanel |
|
|
72
|
+
| **Interaction Details / Compass** | SignalCard, ObservationCard, SmallObservationCard, ScoreDriverCard, ScoreDriverCardVariant, ConditionCard, ModelScoreCard, SummarySection, ExpandPatternComparison |
|
|
73
|
+
| **Media** | TranscriptCard, Timeline, ConversationTurn, InteractionSummaryCard |
|
|
72
74
|
| **Chat** | ChatInterface, ChatMessage, ChatHistoryPanel, MessageThread |
|
|
73
75
|
| **Navigation** | Sidebar, NavigationBar |
|
|
74
76
|
| **Layout** | FirstCallScreen, OnboardingChecklist, DemoProjectBanner, IntegrationCard |
|
|
@@ -77,13 +79,13 @@ import { SignalCard, ScoreDriverCard, DeviationIndicator } from '@chordia/ui';
|
|
|
77
79
|
## Utilities
|
|
78
80
|
|
|
79
81
|
```js
|
|
80
|
-
import { cn } from '
|
|
82
|
+
import { cn } from 'chordia-ui/utils';
|
|
81
83
|
// Tailwind class merging utility (clsx + tailwind-merge)
|
|
82
84
|
```
|
|
83
85
|
|
|
84
86
|
## Development
|
|
85
87
|
|
|
86
|
-
This package
|
|
88
|
+
This package now ships a built library in `dist/`. Consuming apps import from the npm package (`chordia-ui`) and do **not** need special transpile configuration in most bundlers. Tailwind-specific configuration is only needed if you want Tailwind to scan chordia-ui’s class names.
|
|
87
89
|
|
|
88
90
|
## Docs
|
|
89
91
|
|