Skip to content

Commit ef60849

Browse files
biomathcodebiomathcode
committed
added: dental notion support,
1 parent b8f35e0 commit ef60849

13 files changed

Lines changed: 506 additions & 899 deletions

‎.storybook/main.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const config: StorybookConfig = {
66
"@storybook/addon-essentials",
77
"@storybook/addon-interactions",
88
"@storybook/addon-webpack5-compiler-swc",
9+
'@storybook/addon-themes',
910
],
1011
framework: {
1112
name: "@storybook/react-webpack5",

‎.storybook/preview.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,16 @@
11
import type { Preview } from "@storybook/react";
2+
import { withThemeByClassName } from '@storybook/addon-themes';
3+
4+
5+
export const decorators = [
6+
withThemeByClassName({
7+
themes: {
8+
light: 'light-theme',
9+
dark: 'dark-theme',
10+
},
11+
defaultTheme: 'light',
12+
}),
13+
];
214

315
const preview: Preview = {
416
parameters: {

‎README.md‎

Lines changed: 154 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,183 @@
11

22

3-
# `react-odontogram`
3+
# 🦷 `react-odontogram`
44

5-
[![npm version](https://img.shields.io/npm/v/react-odontogram?color=blue&label=npm)](https://www.npmjs.com/package/react-odontogram)
6-
[![npm downloads](https://img.shields.io/npm/dm/react-odontogram?color=green&label=downloads)](https://www.npmjs.com/package/react-odontogram)
5+
[![npm version](https://img.shields.io/npm/v/react-odontogram?color=blue\&label=npm)](https://www.npmjs.com/package/react-odontogram)
6+
[![npm downloads](https://img.shields.io/npm/dm/react-odontogram?color=green\&label=downloads)](https://www.npmjs.com/package/react-odontogram)
77
[![Storybook](https://img.shields.io/badge/Storybook-Demo-orange)](https://biomathcode.github.io/react-odontogram)
88

9+
A modern, interactive **React Odontogram** component for dental chart visualization and data collection.
10+
Built with SVG and React hooks — fully customizable, accessible, and designed for clinical or academic applications.
911

1012
---
11-
## Demo
1213

13-
Check out the live Storybook demo:
14-
[https://biomathcode.github.io/react-odontogram](https://biomathcode.github.io/react-odontogram)
14+
## 🧩 Demo
1515

16+
👉 **Live Preview:** [https://biomathcode.github.io/react-odontogram](https://biomathcode.github.io/react-odontogram)
1617

1718
---
1819

19-
## Installation
20+
## 📦 Installation
2021

2122
```bash
2223
# Using npm
23-
npm install react-odontogram
24+
npm install react-odontogram
2425

2526
# Using pnpm
26-
pnpm add react-odontogram
27+
pnpm add react-odontogram
2728

2829
# Using yarn
29-
yarn add react-odontogram
30+
yarn add react-odontogram
3031
```
3132

3233
> Make sure you have `react` and `react-dom` installed as peer dependencies.
3334
35+
---
36+
37+
## 🚀 Quick Start
38+
39+
```tsx
40+
import { Odontogram } from "react-odontogram";
41+
42+
export default function App() {
43+
const handleChange = (selectedTeeth) => {
44+
console.log(selectedTeeth);
45+
/*
46+
Example output:
47+
[
48+
{
49+
"id": "teeth-21",
50+
"notations": {
51+
"fdi": "21",
52+
"universal": "9",
53+
"palmer": "1UL"
54+
},
55+
"type": "Central Incisor"
56+
},
57+
{
58+
"id": "teeth-12",
59+
"notations": {
60+
"fdi": "12",
61+
"universal": "7",
62+
"palmer": "2UR"
63+
},
64+
"type": "Lateral Incisor"
65+
}
66+
]
67+
*/
68+
};
69+
70+
return <Odontogram onChange={handleChange} />;
71+
}
72+
```
73+
74+
---
75+
76+
## 🧠 onChange Return Type
77+
78+
The `onChange` callback returns an **array of selected teeth objects**:
79+
80+
```ts
81+
type ToothSelection = {
82+
id: string;
83+
notations: {
84+
fdi: string;
85+
universal: string;
86+
palmer: string;
87+
};
88+
type: string;
89+
};
90+
```
3491

92+
Example JSON output:
93+
94+
```json
95+
[
96+
{
97+
"id": "teeth-21",
98+
"notations": {
99+
"fdi": "21",
100+
"universal": "9",
101+
"palmer": "1UL"
102+
},
103+
"type": "Central Incisor"
104+
},
105+
{
106+
"id": "teeth-12",
107+
"notations": {
108+
"fdi": "12",
109+
"universal": "7",
110+
"palmer": "2UR"
111+
},
112+
"type": "Lateral Incisor"
113+
}
114+
]
115+
```
116+
117+
---
118+
119+
## ⚙️ Props
120+
121+
| Prop | Type | Default | Description |
122+
| ----------------- | ------------------------------------------- | ------- | ------------------------------------------------------- |
123+
| `onChange` | `(selectedTeeth: ToothSelection[]) => void` | — | Triggered whenever the user selects or deselects teeth. |
124+
| `initialSelected` | `string[]` | `[]` | Array of tooth IDs to preselect. |
125+
| `readOnly` | `boolean` | `false` | Makes the odontogram non-interactive (view-only). |
126+
| `className` | `string` | — | Optional class for custom styling. |
127+
128+
---
129+
130+
## 🦷 Tooth Data Model
131+
132+
Each tooth is internally defined in a structured format:
133+
134+
```ts
135+
{
136+
id: "teeth-21",
137+
name: "21",
138+
type: "Central Incisor",
139+
notations: {
140+
fdi: "21",
141+
universal: "9",
142+
palmer: "1UL"
143+
},
144+
outlinePath: "...",
145+
shadowPath: "...",
146+
lineHighlightPath: "..."
147+
}
148+
```
35149

150+
This makes it easy to extend or customize if you fork the library.
151+
152+
---
153+
154+
## 🧪 Development
155+
156+
Run locally:
157+
158+
```bash
159+
git clone https://github.com/biomathcode/react-odontogram.git
160+
cd react-odontogram
161+
pnpm install
162+
pnpm dev
163+
```
164+
165+
To preview Storybook:
166+
167+
```bash
168+
pnpm storybook
169+
```
170+
171+
---
172+
173+
## 🪶 License
174+
175+
MIT © [biomathcode](https://github.com/biomathcode)
176+
177+
---
36178

179+
## 💬 Feedback
37180

181+
If this library helps your dental project, please ⭐ the repo or open issues/PRs for enhancements!
38182

39183

‎debug-storybook.log‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
[22:00:33.459] [INFO] Storybook Upgrade - v10.0.0
2+
[22:00:33.472] [INFO] detect-projects-spinner-start: Detecting projects...
3+
[22:00:33.474] [DEBUG] Finding Storybook projects...
4+
[22:00:33.723] [DEBUG] Found 1 Storybook projects
5+
[22:00:33.725] [INFO] detect-projects-spinner: Detecting projects: 1 projects
6+
[22:00:33.725] [DEBUG] Getting Storybook data...
7+
[22:00:33.725] [DEBUG] Getting Storybook info...
8+
[22:00:33.730] [DEBUG] Loading main config...
9+
[22:00:34.167] [DEBUG] Getting stories paths...
10+
[22:00:34.187] [DEBUG] Getting package manager...
11+
[22:00:34.879] [DEBUG] Getting Storybook version...
12+
[22:00:34.880] [DEBUG] /.storybook - Validating before version... 8.6.8
13+
[22:00:34.880] [DEBUG] /.storybook - Validating upgrade compatibility...
14+
[22:00:34.880] [DEBUG] /.storybook - Fetching NPM version information...
15+
[22:00:34.880] [DEBUG] Getting CLI versions from NPM for storybook...
16+
[22:00:34.883] [DEBUG] Getting CLI versions from NPM for storybook@next...
17+
[22:00:39.352] [DEBUG] /.storybook - Evaluating blockers...
18+
[22:00:39.362] [DEBUG] Getting installed version for @storybook/experimental-addon-test...
19+
[22:00:39.773] [INFO] detect-projects-spinner-stop: 1 project detected
20+
[22:00:39.773] [DEBUG] Found 1 valid projects and 0 error projects
21+
[22:00:39.773] [INFO] Upgrading from 8.6.8 to 10.0.0
22+
[22:00:39.782] [ERROR] Blockers detected
23+
24+
Storybook has found potential blockers that need to be resolved before upgrading:
25+
26+
Major Version Gap Detected
27+
28+
Your Storybook version (v8.6.8) is more than one major version behind the target release (v10.0.0). Please upgrade one major version at a time.
29+
30+
You can upgrade to version 9 by running:
31+
npx storybook@9 upgrade
32+
33+
Affected projects: /.storybook
34+
35+
More information: https://storybook.js.org/docs/9/migration-guide?ref=upgrade
36+
37+
---
38+
39+
After addressing this, you can try running the upgrade command again. You can also rerun the upgrade command with the --force flag to skip the blocker check and to proceed with the upgrade.
40+
[22:00:39.792] [INFO] Attention: Storybook now collects completely anonymous telemetry regarding usage. This information is used to shape Storybook's roadmap and prioritize features.
41+
[22:00:39.799] [INFO] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
42+
[22:00:39.807] [INFO] https://storybook.js.org/telemetry
43+
[22:00:39.812] [INFO]

‎lefthook.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ pre-commit:
22
parallel: true
33
commands:
44
lint:
5-
run: git add -u
5+
run: git add -u
66
typecheck:
77
run: pnpm tsc
88
build:

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
"@storybook/addon-essentials": "8.6.8",
6868
"@storybook/addon-interactions": "8.6.8",
6969
"@storybook/addon-links": "8.6.8",
70+
"@storybook/addon-themes": "^8.6.8",
7071
"@storybook/addon-webpack5-compiler-swc": "3.0.0",
7172
"@storybook/blocks": "8.6.8",
7273
"@storybook/react": "8.6.8",

‎pnpm-lock.yaml‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)