odontogram 0.1.1 → 0.1.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/package.json +4 -2
- package/readme.md +140 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "odontogram",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "A lightweight, interactive web component odontogram built with Lit.",
|
|
5
5
|
"main": "./dist/index.mjs",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -42,7 +42,8 @@
|
|
|
42
42
|
"build:vite": "tsc && vite build",
|
|
43
43
|
"preview": "vite preview",
|
|
44
44
|
"storybook": "storybook dev -p 6006",
|
|
45
|
-
"build-storybook": "storybook build"
|
|
45
|
+
"build-storybook": "storybook build",
|
|
46
|
+
"deploy-storybook": "gh-pages -d storybook-static"
|
|
46
47
|
},
|
|
47
48
|
"dependencies": {
|
|
48
49
|
"lit": "^3.3.1"
|
|
@@ -55,6 +56,7 @@
|
|
|
55
56
|
"@storybook/web-components-vite": "^10.2.13",
|
|
56
57
|
"@vitest/browser-playwright": "^4.0.18",
|
|
57
58
|
"@vitest/coverage-v8": "^4.0.18",
|
|
59
|
+
"gh-pages": "^6.3.0",
|
|
58
60
|
"playwright": "^1.58.2",
|
|
59
61
|
"storybook": "^10.2.13",
|
|
60
62
|
"tsdown": "0.21.0-beta.2",
|
package/readme.md
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
# 🦷 Og-odontogram
|
|
2
|
+
|
|
3
|
+
A lightweight, interactive, and highly customizable **Web Component Ogdontogram** built with [Lit](https://lit.dev/). Perfect for dental software, patient records, and educational tools.
|
|
4
|
+
|
|
5
|
+
## ✨ Features
|
|
6
|
+
|
|
7
|
+
* **Zero Framework Dependency**: Works with React, Vue, Angular, or plain HTML.
|
|
8
|
+
* **Multi-Mode Support**: Toggle between `adult` (32 teeth), `baby` (20 primary teeth), and `old` (geriatric) layouts.
|
|
9
|
+
* **Interactive Regions**: Supports 5 surfaces per tooth: Vestibular, Distal, Palatine, Mesial, and Occlusal.
|
|
10
|
+
* **JSON Powered**: Export and rehydrate the entire chart state via a simple JSON object.
|
|
11
|
+
* **CSS Theming**: Customize selection colors using CSS variables.
|
|
12
|
+
* **Open-WC Compliant**: Shipped as unoptimized ESM for maximum bundler compatibility.
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## 📦 Installation
|
|
17
|
+
|
|
18
|
+
Install via NPM:
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install odontogram
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## 🚀 Quick Start
|
|
28
|
+
|
|
29
|
+
### Plain HTML / Vanilla JS
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<script type="module">
|
|
33
|
+
import 'odontogram';
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<og-odontogram id="my-chart" mode="adult"></og-odontogram>
|
|
37
|
+
|
|
38
|
+
<script>
|
|
39
|
+
const chart = document.getElementById('my-chart');
|
|
40
|
+
|
|
41
|
+
// Listen for changes
|
|
42
|
+
chart.addEventListener('oodontogram-change', (e) => {
|
|
43
|
+
console.log('New State:', e.detail.data);
|
|
44
|
+
});
|
|
45
|
+
</script>
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### React / Next.js
|
|
50
|
+
|
|
51
|
+
```jsx
|
|
52
|
+
import 'oodontogram';
|
|
53
|
+
|
|
54
|
+
function App() {
|
|
55
|
+
return (
|
|
56
|
+
<og-odontogram
|
|
57
|
+
mode="baby"
|
|
58
|
+
onoodontogram-change={(e) => console.log(e.detail.data)}
|
|
59
|
+
/>
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## 🛠 API & Configuration
|
|
68
|
+
|
|
69
|
+
### Properties
|
|
70
|
+
|
|
71
|
+
| Property | Type | Default | Description |
|
|
72
|
+
| ----------- | -------- | --------- | ---------------------------------------- |
|
|
73
|
+
| `mode` | `string` | `'adult'` | Patient type: `adult`, `baby`, or `old`. |
|
|
74
|
+
| `chartData` | `object` | `{}` | Initial state to pre-fill the chart. |
|
|
75
|
+
|
|
76
|
+
### Custom Events
|
|
77
|
+
|
|
78
|
+
| Event | Detail | Description |
|
|
79
|
+
| -------------------- | --------------------------- | ------------------------------------------ |
|
|
80
|
+
| `oodontogram-change` | `{ data: {}, mode: string}` | Fired whenever a tooth surface is toggled. |
|
|
81
|
+
|
|
82
|
+
### CSS Variables
|
|
83
|
+
|
|
84
|
+
Customize the look of the selected regions:
|
|
85
|
+
|
|
86
|
+
```css
|
|
87
|
+
og-odontogram {
|
|
88
|
+
--click-color: #ff6961; /* The color of selected surfaces */
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## 📊 Data Structure
|
|
96
|
+
|
|
97
|
+
The component exports a clean JSON structure representing the "history" or "state" of the teeth.
|
|
98
|
+
|
|
99
|
+
```json
|
|
100
|
+
{
|
|
101
|
+
"16": {
|
|
102
|
+
"vestibular": true,
|
|
103
|
+
"distal": false,
|
|
104
|
+
"palatine": false,
|
|
105
|
+
"mesial": true,
|
|
106
|
+
"occlusal": true
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
## 🎨 Storybook (Development & Demo)
|
|
115
|
+
|
|
116
|
+
We use Storybook to showcase all modes and test interactivity. You can see the "Adult", "Pediatric", and "Senior" layouts in isolation.
|
|
117
|
+
|
|
118
|
+
To run Storybook locally:
|
|
119
|
+
|
|
120
|
+
1. Clone the repo.
|
|
121
|
+
2. `npm install`
|
|
122
|
+
3. `npm run storybook`
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
## 🏗 Developing
|
|
127
|
+
|
|
128
|
+
If you want to contribute or build from source:
|
|
129
|
+
|
|
130
|
+
* **Build for Production**: `npm run build` (uses `tsdown` to generate `.mjs` and `.d.mts`).
|
|
131
|
+
* **Test**: `npm run test` (uses Vitest + Playwright for browser testing).
|
|
132
|
+
* **Lint**: `npm run lint`.
|
|
133
|
+
|
|
134
|
+
## 📄 License
|
|
135
|
+
|
|
136
|
+
MIT © [Biomathcode](https://github.com/biomathcode)
|
|
137
|
+
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
**Would you like me to help you set up a GitHub Action to automatically publish this to NPM whenever you create a new release?**
|