@lunit/oui 2.4.19 → 3.0.0

package/docs/COMPONENTS.md

@@ -0,0 +1,121 @@
+# @lunit/oui — Component Catalog
+
+A scannable index of components for AI/developers. Each entry: **what it is · key props · example**.
+The exact props are defined by each component's `*.types.ts` (source of truth). When you add a new component, add a line here too.
+
+## Install & Setup
+
+```bash
+npm i --save @lunit/oui
+```
+
+Wrap your app root with `ThemeProvider` to inject the OUI theme so every component renders correctly.
+
+```tsx
+import { ThemeProvider, CssBaseline } from '@mui/material';
+import { theme } from '@lunit/oui';
+
+<ThemeProvider theme={theme}>
+  <CssBaseline />
+  <App />
+</ThemeProvider>
+```
+
+## Import paths
+
+```ts
+import { Button, Dialog, TextField } from '@lunit/oui'; // components
+import { ArrowDoubleDown } from '@lunit/oui/icons';      // icons
+import { theme, palette, typography, spacing } from '@lunit/oui'; // theme & tokens
+```
+
+❌ Do not import Button/TextField etc. directly from `@mui/material`. ✅ Prefer the equivalent `@lunit/oui` component.
+
+---
+
+## Components
+
+### Input / Form
+
+| Component | Purpose | Key props |
+|---|---|---|
+| **Button** | Trigger actions. Supports label/icon buttons and loading | `variant: 'contained' \| 'ghost' \| 'outlined'`, `color: 'primary' \| 'secondary' \| 'error'`, `size: 'small' \| 'medium' \| 'large'`, `label`, `icon`, `loading` |
+| **TextField** / **BaseTextField** | Text input | extends MUI TextField |
+| **Checkbox** | Checkbox | — |
+| **Radio** | Radio button | — |
+| **Toggle** | on/off switch | — |
+| **Dropdown** | Selection dropdown | — |
+| **DatePicker** | Date selection (based on `@mui/x-date-pickers`) | — |
+| **FileDnDZone** | File drag-and-drop area | — |
+| **UploadManager** | Upload progress/management UI | — |
+
+### Display / Layout
+
+| Component | Purpose | Key props |
+|---|---|---|
+| **Card** | Content card container | `size: 'small' \| 'large'` |
+| **Divider** | Separator line | `orientation: 'horizontal' \| 'vertical'` |
+| **List** | List | `size: 'small' \| 'medium' \| 'large'` |
+| **DataTable** | Data table (based on `@mui/x-data-grid`) | — |
+| **EllipsisTypography** | Text with ellipsis (...) truncation | — |
+| **ProductLabel** | Product label badge | — |
+| **NoMatchContainer** | Empty state (e.g. no search results) | — |
+
+### Feedback / Overlay
+
+| Component | Purpose | Key props |
+|---|---|---|
+| **Alert** | Inline notification (info/success/error/warning) | — |
+| **Dialog** | Modal dialog | — |
+| **Tooltip** | Tooltip | `size: 'small' \| 'large'`, `placement` |
+| **Progress** | Progress indicator (Circular/Linear) | `CircularProgress`: `size`, `circleColor` |
+| **LoadingIndicator** | Loading spinner | — |
+| **Chip** | Chip/tag | `preset` (ChipsPreset) |
+
+### Navigation / Structure
+
+| Component | Purpose | Key props |
+|---|---|---|
+| **Menu** | Menu | `size: 'small' \| 'medium'` |
+| **Pagination** | Pagination | `size: number` |
+| **Stepper** | Step progress indicator | — |
+| **TabbedPanel** | Tab panel | `size: 'small' \| 'medium'`, `variant: 'normal' \| 'toggle'` |
+
+### Utility
+
+| Component | Purpose |
+|---|---|
+| **ResizeObserver** | Size-change detection wrapper |
+
+---
+
+## Presentations (domain-specific components)
+
+Exported together from `@lunit/oui`. Composite components for the oncology analysis domain.
+
+`Accordion`, `AnalysisBar`, `FreeText`, `Histogram`, `HorizonDivider`, `ModelType`, `Preview`, `Score`, `Statistic`, `Threshold`, `ToggleControl`, `ToggleControlGroup`
+
+---
+
+## Usage examples
+
+```tsx
+import { Button, Dialog } from '@lunit/oui';
+
+// basic button
+<Button variant="contained" color="primary" size="medium" label="Save" onClick={save} />
+
+// loading state
+<Button variant="contained" loading label="Processing" />
+
+// icon button
+import { Close } from '@lunit/oui/icons';
+<Button icon={<Close />} onClick={close} />
+```
+
+### Do / Don't
+
+- ✅ Use only the union values defined above for variant/size/color.
+- ✅ Use `theme.palette.*` / `theme.spacing()` tokens for color and spacing (→ [TOKENS.md](TOKENS.md)).
+- ❌ Do not use the equivalent `@mui/material` component directly.
+- ❌ Do not hardcode magic values like `#fff` or `16px` in `sx`.

package/docs/TOKENS.md

@@ -0,0 +1,60 @@
+# @lunit/oui — Design Tokens
+
+Always use tokens for color, spacing, and typography. Never hardcode magic values (`#3BC9DB`, `16px`).
+The source of truth is `src/foundations/` (palette.ts / spacing.ts / typography.ts).
+
+```ts
+import { palette, spacing, typography, theme } from '@lunit/oui';
+// Inside a component's styled, access via the theme arg: (theme) => ({ color: theme.palette.lunitTeal[40] })
+```
+
+## Usage rules
+
+| Kind | ❌ Don't | ✅ Do |
+|---|---|---|
+| Color | `color: '#3BC9DB'` | `color: theme.palette.lunitTeal[30]` |
+| Spacing | `padding: '16px'` | `padding: theme.spacing(4)` |
+| Typography | `fontSize: 14, fontWeight: 600` | `<Typography variant="body_sb1">` |
+
+## Color (palette)
+
+Form: `theme.palette.<group>[<key>]`. The key is a brightness scale (lower = brighter).
+
+| Group | Key scale | Purpose |
+|---|---|---|
+| `brand` | `primary`, `secondary` | Brand colors (`#3BC9DB`, `#96EDFF`) |
+| `lunitTeal` | 5–90 | Main teal palette (primary actions) |
+| `neutralGrey` | 0–100 | Grayscale (0 = white, 100 = black). Backgrounds, text, borders |
+| `red` | 5–50 | Error/danger |
+| `blue` | 5–75 | Info |
+| `green` | 10–50 | Success |
+| `yellow` / `orange` | 5–20 | Caution/warning |
+| `magenta` / `purple` | — | Secondary accents |
+| `text` | `primary`, `secondary`, `disabled` | Text colors |
+| `alert` | `InfoBG`, `SuccessBG`, `ErrorBG`, `WarningBG` | Alert backgrounds |
+
+### Domain (histology) colors
+
+Color groups exclusive to tumor analysis — do not use them for general UI.
+`pdl1Tps`, `pdl1Cps`, `io`, `tumorPurity`, `her2`, `erpr`, `analysisStatus`
+
+## Spacing
+
+base unit = **4px**. `theme.spacing(n)` = `n * 4px`.
+
+```
+spacing(1)=4px  spacing(2)=8px  spacing(3)=12px  spacing(4)=16px  spacing(6)=24px
+```
+
+## Typography (variants)
+
+Use via `<Typography variant="...">`, or `theme.typography.<variant>` in styled. Custom variants:
+
+- **Heading**: `h7`, `h8`, `h9`, `h10`, `subtitle3`
+- **Body (weight suffix)**: `b`=bold, `sb`=semibold, `m`=medium, none=regular, `l`=light
+  - `body_b1~2`, `body_sb1~5`, `body_m1~2`, `body1~8`
+  - `small_body_b1~5`, `small_body_sb1`, `small_body_m1~7`, `small_body1~5`, `small_body_l1~2`
+- **Other**: `button1`, `button2`, `overline`, `caption`
+
+> If you need a new token, define it in `src/foundations/` first. When you extend palette/typography,
+> also update the `declare module '@mui/material/styles'` type augmentation in `theme.ts`.

package/llms.txt

@@ -0,0 +1,58 @@
+# @lunit/oui
+
+> React UI component library for Lunit Scope applications. Built on MUI v9.
+> When building UI in an app that uses this package, do not use MUI directly —
+> use the OUI components and design tokens below.
+
+## Setup
+
+Wrap your app root with the OUI theme:
+
+```tsx
+import { ThemeProvider, CssBaseline } from '@mui/material';
+import { theme } from '@lunit/oui';
+
+<ThemeProvider theme={theme}>
+  <CssBaseline />
+  <App />
+</ThemeProvider>
+```
+
+## Import rules
+
+- Components: `import { Button, Dialog, TextField } from '@lunit/oui'`
+- Icons: `import { ArrowDoubleDown } from '@lunit/oui/icons'`
+- Tokens/theme: `import { theme, palette, spacing, typography } from '@lunit/oui'`
+
+## Core rules (must follow)
+
+- ❌ Do not import equivalent components (Button/TextField/Dialog, etc.) directly from `@mui/material`.
+  ✅ Use the `@lunit/oui` component for the same functionality.
+- ❌ Do not hardcode magic values like `#fff` or `16px` in `sx`/styles.
+  ✅ Use tokens: color `theme.palette.lunitTeal[40]`, spacing `theme.spacing(n)` (base 4px), typography `<Typography variant="body_b1">`.
+- For variant/size/color, use only the union values each component allows (e.g. Button `variant: contained|ghost|outlined`).
+
+## Common components
+
+- Button: `variant` contained|ghost|outlined, `color` primary|secondary|error, `size` small|medium|large, `label`, `icon`, `loading`
+- TextField, Checkbox, Radio, Toggle, Dropdown, DatePicker — input/form
+- Card(`size` small|large), List, Divider, DataTable, EllipsisTypography — display/layout
+- Alert, Dialog, Tooltip, Progress, LoadingIndicator, Chip — feedback/overlay
+- Menu, Pagination, Stepper, TabbedPanel — navigation
+
+## Examples
+
+```tsx
+import { Button } from '@lunit/oui';
+import { Close } from '@lunit/oui/icons';
+
+<Button variant="contained" color="primary" size="medium" label="Save" onClick={save} />
+<Button variant="contained" loading label="Processing" />
+<Button icon={<Close />} onClick={close} />
+```
+
+## See also
+
+- Full component catalog: docs/COMPONENTS.md
+- Design tokens (color/spacing/typography): docs/TOKENS.md
+- Interactive docs: Storybook (`npm run storybook`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "2.4.19",
+  "version": "3.0.0",
   "validate-branch-name": {
     "pattern": "^(main|develop)|(feature|fix|release|hotfix|qe)/.+$",
     "errorMsg": "The branch name is not correct. Please check the pattern. (ex. feature/add-something)"
@@ -8,25 +8,24 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.2",
-    "@mui/lab": "^5.0.0-alpha.158",
-    "@mui/material": "^5.15.2",
-    "@mui/system": "^5.15.2",
-    "@mui/x-data-grid": "^6.18.6",
-    "@mui/x-date-pickers": "^6.18.6",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/lab": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "@mui/system": "^9.0.0",
+    "@mui/x-date-pickers": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@date-io/date-fns": "^2.17.0",
+    "@date-io/date-fns": "^3.2.1",
     "@lunit/design-system-icons": "2.1.0",
     "@lunit/design-system-logo": "1.1.1",
     "@uppy/core": "^3.12.0",
     "clsx": "^2.0.0",
-    "date-fns": "2.30.0",
+    "date-fns": "^3.6.0",
     "lodash": "^4.17.21",
     "tinycolor2": "^1.6.0",
-    "uuid": "^11.1.0",
+    "uuid": "^14.0.0",
     "victory": "^37.3.6",
     "web-vitals": "^2.1.4"
   },
@@ -122,12 +121,12 @@
     "@emotion/styled": "11.11.0",
     "@lottiefiles/react-lottie-player": "^3.5.3",
     "@lunit/eslint-config": "^2.0.0",
-    "@mui/icons-material": "5.15.2",
-    "@mui/lab": "5.0.0-alpha.158",
-    "@mui/material": "5.15.2",
-    "@mui/system": "5.15.2",
-    "@mui/x-data-grid": "6.18.6",
-    "@mui/x-date-pickers": "6.18.6",
+    "@mui/icons-material": "9.1.0",
+    "@mui/lab": "9.0.0-beta.3",
+    "@mui/material": "9.1.0",
+    "@mui/system": "9.1.0",
+    "@mui/x-data-grid-pro": "9.4.0",
+    "@mui/x-date-pickers": "9.4.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@storybook/addon-actions": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
@@ -157,12 +156,12 @@
     "babel-loader": "^8.2.3",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",
-    "bfj": "^7.0.2",
+    "bfj": "^9.1.3",
     "browserslist": "^4.18.1",
     "camelcase": "^6.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
+    "css-minimizer-webpack-plugin": "^8.0.0",
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
     "eslint": "^8.3.0",
@@ -176,7 +175,7 @@
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.4.3",
+    "jest": "^30.3.0",
     "jest-resolve": "^27.4.2",
     "jest-watch-typeahead": "^1.0.0",
     "lint-staged": "^15.2.0",
@@ -211,7 +210,7 @@
     "webpack-dev-server": "^5.2.3",
     "webpack-manifest-plugin": "^4.0.2",
     "webpack-node-externals": "^3.0.0",
-    "workbox-webpack-plugin": "^6.4.1"
+    "workbox-webpack-plugin": "^7.4.0"
   },
   "description": "Lunit Oncology UI components",
   "main": "dist/index.js",
@@ -220,7 +219,9 @@
   "sideEffects": false,
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "llms.txt",
+    "docs"
   ],
   "exports": {
     ".": {
@@ -267,6 +268,14 @@
   "overrides": {
     "nanoid": "^5.0.9",
     "postcss": "^8.4.31",
-    "esbuild": "^0.27.1"
+    "esbuild": "^0.28.1",
+    "react-is": "^18.3.1",
+    "tar": ">=7.5.11",
+    "sockjs": {
+      "uuid": ">=11.1.1"
+    },
+    "@storybook/addon-actions": {
+      "uuid": ">=11.1.1"
+    }
   }
 }

package/dist/components/DataTable/DataTable.d.ts

@@ -1,3 +0,0 @@
-import { DataGridProps } from '@mui/x-data-grid';
-declare function DataTable({ rows, columns, ...otherProps }: DataGridProps): import("react/jsx-runtime").JSX.Element;
-export default DataTable;