Skip to content

Commit 133a9d6

Browse files
Panthevmandreyorst
Panthevm
authored and
andreyorst
committed
Add Storybook introduction page and vitest integration
- Add Introduction.mdx as the Storybook home page with README content - Configure vitest with @storybook/addon-vitest for story testing - Add addon-a11y, addon-mcp addons to Storybook - Update install command to use @Alpha tag - Fix radix-ui import in tree.tsx - Update vite plugin from react-swc to react
1 parent 855dee3 commit 133a9d6

9 files changed

Lines changed: 1324 additions & 614 deletions

File tree

‎packages/react-components/.storybook/main.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1+
import { fileURLToPath } from "node:url";
2+
import { dirname } from "node:path";
13
import type { StorybookConfig } from "@storybook/react-vite";
24

35
const config: StorybookConfig = {
4-
stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
5-
addons: ["@storybook/addon-docs"],
6-
framework: "@storybook/react-vite",
6+
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
7+
addons: [getAbsolutePath("@storybook/addon-docs"), getAbsolutePath("@storybook/addon-a11y"), getAbsolutePath("@storybook/addon-vitest"), getAbsolutePath("@storybook/addon-mcp")],
8+
framework: getAbsolutePath("@storybook/react-vite"),
79
typescript: {
810
reactDocgen: "react-docgen-typescript",
911
},
1012
};
1113
export default config;
14+
15+
function getAbsolutePath(value: string): any {
16+
return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
17+
}

‎packages/react-components/.storybook/preview.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const preview: Preview = {
1111
},
1212
options: {
1313
storySort: {
14-
order: [],
14+
order: ["Introduction", "*"],
1515
method: "alphabetical",
1616
},
1717
},

‎packages/react-components/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Dark mode support and a design token system are included.
2020
## How to use
2121

2222
```bash
23-
pnpm add @health-samurai/react-components
23+
pnpm add @health-samurai/react-components@alpha
2424
```
2525

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

‎packages/react-components/package.json‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,6 @@
8585
"input-otp": "^1.4.2",
8686
"lucide-react": "^0.577.0",
8787
"next-themes": "^0.4.6",
88-
"radix-ui": "^1.4.3",
8988
"react": "^19.2.4",
9089
"react-day-picker": "^9.14.0",
9190
"react-dom": "^19.2.4",
@@ -101,25 +100,32 @@
101100
"@health-samurai/aidbox-client": "workspace:*",
102101
"@health-samurai/aidbox-fhirpath-lsp": "workspace:*",
103102
"@lezer/generator": "^1.8.0",
104-
"@storybook/addon-docs": "^10.2.17",
105-
"@storybook/react-vite": "^10.2.17",
103+
"@storybook/addon-a11y": "^10.3.5",
104+
"@storybook/addon-docs": "^10.3.5",
105+
"@storybook/addon-mcp": "^0.5.0",
106+
"@storybook/addon-vitest": "^10.3.5",
107+
"@storybook/react-vite": "^10.3.5",
106108
"@swc/cli": "^0.8.0",
107109
"@swc/core": "^1.15.18",
108110
"@tailwindcss/cli": "^4.2.1",
109111
"@tailwindcss/vite": "^4.2.1",
110112
"@types/node": "^25.4.0",
111113
"@types/react": "^19.2.14",
112114
"@types/react-dom": "^19.2.3",
113-
"@vitejs/plugin-react-swc": "^4.2.3",
115+
"@vitejs/plugin-react": "^6.0.1",
116+
"@vitest/browser": "^4.1.3",
117+
"@vitest/browser-playwright": "^4.1.3",
118+
"@vitest/coverage-v8": "^4.1.3",
114119
"chokidar": "^5.0.0",
115-
"storybook": "^10.2.17",
120+
"playwright": "^1.59.1",
121+
"storybook": "^10.3.5",
116122
"tailwindcss": "^4.2.1",
117123
"tsc-alias": "^1.8.16",
118124
"tsx": "^4.21.0",
119125
"tw-animate-css": "^1.4.0",
120126
"typescript": "~5.9.3",
121127
"vite": "^7.3.1",
122-
"vitest": "^4.1.0"
128+
"vitest": "^4.1.3"
123129
},
124130
"publishConfig": {
125131
"access": "public"

‎packages/react-components/src/Introduction.mdx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Meta } from "@storybook/addon-docs/blocks";
2+
3+
<Meta title="Introduction" />
4+
5+
<div style={{ textAlign: "center", marginBottom: "2rem" }}>
6+
<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">
7+
<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" />
8+
<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" />
9+
</svg>
10+
11+
<h1>@health-samurai/react-components</h1>
12+
13+
<p>
14+
A React component library for healthcare UIs.<br />
15+
Looks good out of the box, flexible enough for real-world applications.
16+
</p>
17+
18+
<p>
19+
<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>
20+
</p>
21+
</div>
22+
23+
Built on React 19, Radix UI, and Tailwind CSS 4.
24+
Dark mode support and a design token system are included.
25+
26+
## How to use
27+
28+
```bash
29+
pnpm add @health-samurai/react-components@alpha
30+
```
31+
32+
Requires `react` and `react-dom` 19+.
33+
34+
Import the styles — without this, components will render unstyled:
35+
36+
```typescript
37+
import "@health-samurai/react-components/full.css";
38+
```
39+
40+
Add the fonts to the `<head>` of the page:
41+
42+
```html
43+
<link
44+
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"
45+
rel="stylesheet"
46+
/>
47+
```
48+

‎packages/react-components/src/shadcn/components/ui/tree.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { ItemInstance } from "@headless-tree/core";
22
import { ChevronDownIcon } from "lucide-react";
3-
import { Slot } from "radix-ui";
3+
import { Slot } from "@radix-ui/react-slot";
44
import * as React from "react";
55

66
import { cn } from "#shadcn/lib/utils";

‎packages/react-components/vite.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import tailwindcss from "@tailwindcss/vite";
2-
import react from "@vitejs/plugin-react-swc";
2+
import react from "@vitejs/plugin-react";
33
import { defineConfig } from "vite";
44

55
export default defineConfig({

‎packages/react-components/vitest.config.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import path from "node:path";
2+
import { fileURLToPath } from "node:url";
3+
4+
import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
5+
import { playwright } from "@vitest/browser-playwright";
6+
import { defineConfig } from "vitest/config";
7+
8+
const dirname = path.dirname(fileURLToPath(import.meta.url));
9+
10+
export default defineConfig({
11+
test: {
12+
projects: [
13+
{
14+
extends: true,
15+
plugins: [
16+
storybookTest({ configDir: path.join(dirname, ".storybook") }),
17+
],
18+
test: {
19+
name: "storybook",
20+
browser: {
21+
enabled: true,
22+
headless: true,
23+
provider: playwright({}),
24+
instances: [{ browser: "chromium" }],
25+
},
26+
},
27+
},
28+
],
29+
},
30+
});

0 commit comments

Comments
 (0)