Skip to content

Add Storybook introduction page and vitest integration #104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Panthevm merged 5 commits into from
Jul 17, 2026
Merged

Add Storybook introduction page and vitest integration #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
133a9d6
Add Storybook introduction page and vitest integration
Panthevm Apr 8, 2026
15a4c92
lint:fix
andreyorst Jul 17, 2026
671f145
build fix
andreyorst Jul 17, 2026
1d19108
fix: update Vite to 8.1.5
Panthevm Jul 17, 2026
c003088
fix: resolve dependency audit vulnerabilities
Panthevm Jul 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 32 additions & 25 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,35 @@
{
"name": "aidbox-ts-sdk",
"scripts": {
"hooks": "cp .hooks/* .git/hooks/"
},
"private": true,
"workspaces": [
"packages/*"
],
"packageManager": "pnpm@10.21.0",
"pnpm": {
"overrides": {
"fast-xml-parser": ">=5.5.6",
"fast-xml-builder": ">=1.1.7",
"yaml": ">=2.8.3",
"picomatch": ">=4.0.4",
"file-type": ">=21.3.2",
"brace-expansion": ">=2.0.3 <3",
"defu": ">=6.1.5",
"vite": ">=7.3.2"
"name": "aidbox-ts-sdk",
"scripts": {
"hooks": "cp .hooks/* .git/hooks/"
},
"private": true,
"workspaces": [
"packages/*"
],
"packageManager": "pnpm@10.21.0",
"pnpm": {
"overrides": {
"fast-xml-parser": "^5.10.1",
"fast-xml-builder": ">=1.1.7",
"yaml": ">=2.8.3",
"picomatch": ">=4.0.4",
"file-type": ">=21.3.2",
"brace-expansion": ">=2.0.3 <3",
"defu": ">=6.1.5",
"vite": "^8.1.5",
"esbuild@>=0.27.3 <0.28.1": "0.28.1",
"markdown-it@<=14.1.1": "14.3.0",
"piscina@<=4.9.2": "4.9.3",
"linkify-it@<=5.0.0": "5.0.2",
"@xhmikosr/decompress@<10.2.1": "10.2.1",
"ws@>=8.0.0 <8.21.0": "8.21.1",
"@babel/core@<=7.29.0": "7.29.7"
}
},
"devDependencies": {
"@biomejs/biome": "2.4.6",
"@swc/cli": "^0.8.0",
"@swc/core": "^1.15.18"
}
},
"devDependencies": {
"@biomejs/biome": "2.4.6",
"@swc/cli": "^0.8.0",
"@swc/core": "^1.15.18"
}
}
2 changes: 1 addition & 1 deletion packages/aidbox-fhirpath-lsp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"tsdown": "^0.21.2",
"tsx": "^4.21.0",
"typescript": "~5.9.3",
"vite": "^7.3.1",
"vite": "^8.1.5",
"vitest": "^4.1.0",
"vscode-languageserver-types": "^3.17.5"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/create-react-app/template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@
"@tanstack/router-plugin": "^1.166.0",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^4.0.0",
"@vitejs/plugin-react": "^6.0.3",
"tailwindcss": "^4.0.0",
"tw-animate-css": "^1.0.0",
"tsx": "^4.0.0",
"typescript": "^5.8.0",
"vite": "^7.0.0"
"vite": "^8.1.5"
}
}
17 changes: 14 additions & 3 deletions packages/react-components/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,22 @@
import { dirname } from "node:path";
import { fileURLToPath } from "node:url";
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: ["@storybook/addon-docs"],
framework: "@storybook/react-vite",
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
getAbsolutePath("@storybook/addon-docs"),
getAbsolutePath("@storybook/addon-a11y"),
getAbsolutePath("@storybook/addon-vitest"),
getAbsolutePath("@storybook/addon-mcp"),
],
framework: getAbsolutePath("@storybook/react-vite"),
typescript: {
reactDocgen: "react-docgen-typescript",
},
};
export default config;

function getAbsolutePath(value: string): any {
return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
}
2 changes: 1 addition & 1 deletion packages/react-components/.storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const preview: Preview = {
},
options: {
storySort: {
order: [],
order: ["Introduction", "*"],
method: "alphabetical",
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Dark mode support and a design token system are included.
## How to use

```bash
pnpm add @health-samurai/react-components
pnpm add @health-samurai/react-components@alpha
```

Requires `react` and `react-dom` 19+.
Expand Down
20 changes: 13 additions & 7 deletions packages/react-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@
"input-otp": "^1.4.2",
"lucide-react": "^0.577.0",
"next-themes": "^0.4.6",
"radix-ui": "^1.4.3",
"react": "^19.2.4",
"react-day-picker": "^9.14.0",
"react-dom": "^19.2.4",
Expand All @@ -101,25 +100,32 @@
"@health-samurai/aidbox-client": "workspace:*",
"@health-samurai/aidbox-fhirpath-lsp": "workspace:*",
"@lezer/generator": "^1.8.0",
"@storybook/addon-docs": "^10.2.17",
"@storybook/react-vite": "^10.2.17",
"@storybook/addon-a11y": "^10.3.5",
"@storybook/addon-docs": "^10.3.5",
"@storybook/addon-mcp": "^0.5.0",
"@storybook/addon-vitest": "^10.3.5",
"@storybook/react-vite": "^10.3.5",
"@swc/cli": "^0.8.0",
"@swc/core": "^1.15.18",
"@tailwindcss/cli": "^4.2.1",
"@tailwindcss/vite": "^4.2.1",
"@types/node": "^25.4.0",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react-swc": "^4.2.3",
"@vitejs/plugin-react": "^6.0.1",
"@vitest/browser": "^4.1.3",
"@vitest/browser-playwright": "^4.1.3",
"@vitest/coverage-v8": "^4.1.3",
"chokidar": "^5.0.0",
"storybook": "^10.2.17",
"playwright": "^1.59.1",
"storybook": "^10.3.5",
"tailwindcss": "^4.2.1",
"tsc-alias": "^1.8.16",
"tsx": "^4.21.0",
"tw-animate-css": "^1.4.0",
"typescript": "~5.9.3",
"vite": "^7.3.1",
"vitest": "^4.1.0"
"vite": "^8.1.5",
"vitest": "^4.1.3"
},
"publishConfig": {
"access": "public"
Expand Down
48 changes: 48 additions & 0 deletions packages/react-components/src/Introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { Meta } from "@storybook/addon-docs/blocks";

<Meta title="Introduction" />

<div style={{ textAlign: "center", marginBottom: "2rem" }}>
<svg style={{ display: "inline-block" }} width="64" height="64" viewBox="0 0 47.05512 46.999998" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="m 23.5335,45.9319 c 12.4066,0 22.4641,-10.0431 22.4641,-22.4318 0,-12.3888 -10.0575,-22.43186 -22.4641,-22.43186 -12.4066,0 -22.46416,10.04306 -22.46416,22.43186 0,12.3887 10.05756,22.4318 22.46416,22.4318 z" fill="#ea4a35" />
<path d="m 13.5364,24.3115 c -0.1041,-0.3241 -0.2081,-0.4321 -0.5203,-0.4321 -0.9226,-0.01 -1.8437,-0.0822 -2.7573,-0.216 0.1018,0.585 0.2408,1.1624 0.4162,1.7283 0.6763,2.5926 2.3411,4.213 4.8383,5.2392 1.2487,0.4861 5.8269,1.0262 6.139,1.0262 -1.3006,-0.6481 -2.6533,-1.2963 -3.9539,-2.1064 -2.0005,-1.1058 -3.4971,-2.9898 -4.162,-5.2392 z m 6.0557,-3.4028 c -0.6243,-0.27 -1.1965,-0.4861 -1.8209,-0.7561 -1.7688,-0.7562 -1.7168,-0.5402 -3.2255,-1.6204 -0.3807,1.0927 -0.5915,2.2413 -0.6243,3.4028 -0.023,2.2182 0.9597,4.3186 2.6533,5.6712 1.8209,1.5664 3.3816,2.2145 5.5667,2.9707 0.3121,0.108 0.5202,0.216 0.9885,0.3781 0,-0.8642 0.104,-4.9691 -0.2081,-6.2654 -0.3642,-1.7824 -1.5608,-3.0247 -3.3297,-3.7809 z m 7.2836,-0.7669 c -1.0769,-4.6073 -3.3296,-6.838 -3.3296,-6.838 0,0 -2.284,2.3118 -3.3401,6.838 1.6985,0.618 2.9642,2.1101 3.3401,3.9374 0.489,-3.0624 3.3296,-3.9374 3.3296,-3.9374 z m 6.654,4.1697 c -0.6649,2.2494 -2.1615,4.1334 -4.162,5.2392 -1.3006,0.8101 -2.6533,1.4583 -3.9539,2.1064 0.3121,0 4.8904,-0.5401 6.139,-1.0262 2.4972,-1.0262 4.162,-2.6466 4.8383,-5.2392 0.1754,-0.5659 0.3144,-1.1433 0.4162,-1.7283 -0.9136,0.1338 -1.8347,0.206 -2.7573,0.216 -0.3122,0 -0.4162,0.108 -0.5203,0.4321 z m -6.0349,-3.4028 c -1.7689,0.7562 -2.9655,1.9985 -3.3296,3.7809 -0.3122,1.2963 -0.2081,5.4012 -0.2081,6.2654 0.4682,-0.1621 0.6763,-0.2701 0.9884,-0.3781 2.1851,-0.7562 3.7459,-1.4043 5.5668,-2.9707 1.6936,-1.3526 2.6762,-3.453 2.6533,-5.6712 -0.0329,-1.1615 -0.2436,-2.3101 -0.6244,-3.4028 -1.5087,1.0802 -1.4567,0.8642 -3.2255,1.6204 -0.6243,0.27 -1.1966,0.4861 -1.8209,0.7561 z" fill="#ffffff" />
</svg>

<h1>@health-samurai/react-components</h1>

<p>
A React component library for healthcare UIs.<br />
Looks good out of the box, flexible enough for real-world applications.
</p>

<p>
<a href="https://www.npmjs.com/package/@health-samurai/react-components"><img style={{ display: "inline-block" }} src="https://img.shields.io/npm/v/@health-samurai/react-components/alpha" alt="npm" /></a>
</p>
</div>

Built on React 19, Radix UI, and Tailwind CSS 4.
Dark mode support and a design token system are included.

## How to use

```bash
pnpm add @health-samurai/react-components@alpha
```

Requires `react` and `react-dom` 19+.

Import the styles — without this, components will render unstyled:

```typescript
import "@health-samurai/react-components/full.css";
```

Add the fonts to the `<head>` of the page:

```html
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
rel="stylesheet"
/>
```

6 changes: 3 additions & 3 deletions packages/react-components/src/shadcn/components/ui/tree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { ItemInstance } from "@headless-tree/core";
import { Slot } from "@radix-ui/react-slot";
import { ChevronDownIcon } from "lucide-react";
import { Slot } from "radix-ui";
import * as React from "react";

import { cn } from "#shadcn/lib/utils";
Expand Down Expand Up @@ -93,7 +93,7 @@ function TreeItem<T = any>({
"--tree-padding": `${item.getItemMeta().level * indent}px`,
} as React.CSSProperties;

const Comp = asChild ? Slot.Root : "span";
const Comp = asChild ? Slot : "span";

return (
<TreeContext.Provider value={{ indent, currentItem: item }}>
Expand Down Expand Up @@ -133,7 +133,7 @@ function TreeItem<T = any>({
{...Object.fromEntries(
Object.entries(otherProps).filter(([key]) => key !== "onDragStart"),
)}
onDragStart={(e) => {
onDragStart={(e: React.DragEvent<HTMLElement>) => {
if ((e.target as HTMLElement).dataset.slot === "drag-handle") {
item.getProps().onDragStart?.(e);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react-swc";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
Expand Down
30 changes: 30 additions & 0 deletions packages/react-components/vitest.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import path from "node:path";
import { fileURLToPath } from "node:url";

import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
import { playwright } from "@vitest/browser-playwright";
import { defineConfig } from "vitest/config";

const dirname = path.dirname(fileURLToPath(import.meta.url));

export default defineConfig({
test: {
projects: [
{
extends: true,
plugins: [
storybookTest({ configDir: path.join(dirname, ".storybook") }),
],
test: {
name: "storybook",
browser: {
enabled: true,
headless: true,
provider: playwright({}),
instances: [{ browser: "chromium" }],
},
},
},
],
},
});
Loading
Loading