@health-samurai/react-components 0.0.0-alpha.1

package/dist/src/tokens.css

@@ -0,0 +1,179 @@
+@theme {
+	--radius: 6px;
+
+	--color-neutral-50: #f9f9f9;
+	--color-neutral-100: #f5f5f6;
+	--color-neutral-200: #ebecee;
+	--color-neutral-300: #ccced3;
+	--color-neutral-400: #98a1ae;
+	--color-neutral-500: #717684;
+	--color-neutral-600: #4a5565;
+	--color-neutral-700: #364153;
+	--color-neutral-800: #1e2938;
+	--color-neutral-900: #1d2331;
+	--color-neutral-950: #030712;
+
+	--color-brand-50: #fef7f6;
+	--color-brand-100: #fdedea;
+	--color-brand-200: #f9cac3;
+	--color-brand-300: #f4a499;
+	--color-brand-400: #ef7767;
+	--color-brand-500: #ea4a35;
+	--color-brand-600: #d72710;
+	--color-brand-700: #c31a03;
+	--color-brand-800: #78190c;
+	--color-brand-900: #4a0f08;
+	--color-brand-950: #2e0a05;
+
+	--color-grey-50: #fafafa;
+	--color-grey-100: #f5f5f5;
+	--color-grey-200: #e5e5e5;
+	--color-grey-300: #d4d4d4;
+	--color-grey-400: #a4a4a4;
+	--color-grey-500: #767676;
+	--color-grey-600: #575757;
+	--color-grey-700: #434343;
+	--color-grey-800: #292929;
+	--color-grey-900: #1a1a1a;
+	--color-grey-950: #0a0a0a;
+
+	--color-red-50: #fef9f9;
+	--color-red-100: #fff6f5;
+	--color-red-200: #fdedea;
+	--color-red-300: #f4a499;
+	--color-red-400: #ea4a35;
+	--color-red-500: #d7270f;
+	--color-red-600: #d7270f;
+	--color-red-700: #c31b03;
+	--color-red-800: #a72d22;
+	--color-red-900: #7a0d00;
+	--color-red-950: #410801;
+
+	--color-blue-50: #f9fbfe;
+	--color-blue-100: #f4f8fc;
+	--color-blue-200: #e9f2fc;
+	--color-blue-300: #d0e2f8;
+	--color-blue-400: #a7c9f3;
+	--color-blue-500: #2378e1;
+	--color-blue-600: #045ac3;
+	--color-blue-700: #014391;
+	--color-blue-800: #053775;
+	--color-blue-900: #052040;
+	--color-blue-950: #05101e;
+
+	--color-green-50: #fbfdf8;
+	--color-green-100: #f8fbf3;
+	--color-green-200: #f1f8e6;
+	--color-green-300: #e3efcb;
+	--color-green-400: #c9e19b;
+	--color-green-500: #78b506;
+	--color-green-600: #558300;
+	--color-green-700: #334e02;
+	--color-green-800: #1d2b03;
+	--color-green-900: #090d04;
+	--color-green-950: #090d04;
+
+	--color-yellow-50: #fffdf2;
+	--color-yellow-100: #fffbe5;
+	--color-yellow-200: #fff9d9;
+	--color-yellow-300: #fff4bf;
+	--color-yellow-400: #ffea80;
+	--color-yellow-500: #ffd400;
+	--color-yellow-600: #dfa400;
+	--color-yellow-700: #855600;
+	--color-yellow-800: #562a00;
+	--color-yellow-900: #341900;
+	--color-yellow-950: #200900;
+
+	--font-size-xs: 12px;
+	--font-size-sm: 14px;
+	--font-size-base: 16px;
+	--font-size-lg: 18px;
+	--font-size-xl: 20px;
+	--font-size-2xl: 24px;
+	--font-size-3xl: 30px;
+	--font-size-4xl: 36px;
+	--font-size-5xl: 48px;
+	--font-size-6xl: 60px;
+	--font-size-7xl: 72px;
+	--font-size-8xl: 96px;
+	--font-size-9xl: 128px;
+
+	--font-family-sans: Inter;
+	--font-family-mono: JetBrains Mono;
+
+	--font-style-italic: italic;
+	--font-style-not-italic: normal;
+
+	--font-weight-thin: 100;
+	--font-weight-extralight: 200;
+	--font-weight-light: 300;
+	--font-weight-normal: 400;
+	--font-weight-medium: 500;
+	--font-weight-semibold: 600;
+	--font-weight-bold: 700;
+	--font-weight-extrabold: 800;
+	--font-weight-black: 900;
+
+	--font-tracking-tighter: -0.8;
+	--font-tracking-tight: -0.4;
+	--font-tracking-normal: 0px;
+	--font-tracking-wide: 0.4;
+	--font-tracking-wider: 0.8;
+	--font-tracking-widest: 1.6;
+
+	--font-leading-3: 12px;
+	--font-leading-4: 16px;
+	--font-leading-5: 20px;
+	--font-leading-6: 24px;
+	--font-leading-7: 28px;
+	--font-leading-8: 32px;
+	--font-leading-9: 36px;
+	--font-leading-10: 40px;
+
+	--spacing-x1: 8px;
+	--spacing-x1point5: 12px;
+	--spacing-x2: 16px;
+	--spacing-x4: 32px;
+	--spacing-x6: 48px;
+	--spacing-x8: 64px;
+	--spacing-quarter: 2px;
+	--spacing-half: 4px;
+	--spacing-x12: 96px;
+	--spacing-x3: 24px;
+	--corner-corner-max: 999px;
+	--corner-corner-s: 4px;
+	--corner-corner-m: 6px;
+	--corner-corner-l: 8px;
+	--corner-corner-xs: 2px;
+	--color-elements-readable: var(--color-neutral-900);
+	--color-cta: var(--color-brand-600);
+	--color-critical-default: var(--color-red-600);
+	--color-elements-disabled: var(--color-neutral-300);
+	--color-elements-assistive: var(--color-neutral-500);
+	--color-surface-0: var(--color-neutral-50);
+	--color-border-default: var(--color-neutral-200);
+	--color-surface-selected: var(--color-neutral-200);
+	--color-cta-hover: var(--color-brand-700);
+	--color-critical-hover: var(--color-red-700);
+	--color-surface-1: var(--color-neutral-100);
+	--color-border-XS-critical: var(--color-red-50);
+	--color-border-XS-critical-hover: var(--color-red-100);
+	--color-elements-green: var(--color-green-600);
+	--color-elements-yellow: var(--color-yellow-500);
+	--color-border-XS-regular: var(--color-blue-300);
+	--color-border-XS-regular-hover: var(--color-blue-400);
+	--color-separator: var(--color-neutral-200);
+	--color-surface-info: var(--color-blue-50);
+	--color-surface-warning: var(--color-yellow-50);
+	--color-surface-alert: var(--color-red-50);
+	--color-elements-warning: var(--color-yellow-700);
+	--color-code-red: var(--color-red-600);
+	--color-code-blue: var(--color-blue-500);
+	--color-elements-readable-inv: var(--color-neutral-50);
+	--color-logo-readable: var(--color-neutral-800);
+	--color-elements-links: var(--color-brand-600);
+	--color-elements-info: var(--color-brand-600);
+	--color-elements-alert: var(--color-red-600);
+	--color-illustrations-solid: var(--color-brand-600);
+}

package/dist/src/typography.css

@@ -0,0 +1,98 @@
+body {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+	font-feature-settings:
+		"kern" 1,
+		"liga" 1;
+}
+
+.typo-body {
+	font-size: var(--font-size-sm);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-5);
+}
+
+.typo-code {
+	font-size: var(--font-size-sm);
+	font-family: var(--font-family-mono);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-5);
+}
+
+.typo-label {
+	font-size: var(--font-size-sm);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--font-leading-5);
+}
+
+.typo-page-header {
+	font-size: var(--font-size-xl);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--font-leading-7);
+	letter-spacing: var(--font-tracking-tight);
+}
+
+.typo-button-label-xs {
+	font-size: var(--font-size-sm);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-4);
+}
+
+.h1 {
+	font-size: var(--font-size-4xl);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-extrabold);
+	line-height: var(--font-leading-none);
+	letter-spacing: var(--font-tracking-tight);
+}
+
+@media (min-width: 1024px) {
+	.h1 {
+		font-size: var(--font-size-5xl);
+	}
+}
+
+.h2 {
+	font-size: var(--font-size-3xl);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-semibold);
+	line-height: var(--font-leading-none);
+	letter-spacing: var(--font-tracking-tight);
+}
+
+.h3 {
+	font-size: var(--font-size-2xl);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-semibold);
+	line-height: var(--font-leading-none);
+	letter-spacing: var(--font-tracking-tight);
+}
+
+.h4 {
+	font-size: var(--font-size-xl);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-semibold);
+	line-height: var(--font-leading-none);
+	letter-spacing: var(--font-tracking-tight);
+}
+
+.h5 {
+	font-size: var(--font-size-lg);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-semibold);
+	line-height: var(--font-leading-none);
+	letter-spacing: var(--font-tracking-tight);
+}
+
+.h6 {
+	font-size: var(--font-size-base);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-semibold);
+	line-height: var(--font-leading-none);
+	letter-spacing: var(--font-tracking-tight);
+}

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@health-samurai/react-components",
+  "version": "0.0.0-alpha.1",
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./bundle.css": "./dist/bundle.css",
+    "./css": "./dist/src/index.css",
+    "./deps.css": "./dist/src/deps.css",
+    "./full.css": "./dist/src/full.css"
+  },
+  "imports": {
+    "#shadcn/*": "./src/shadcn/*"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/language": "^6.11.3",
+    "@codemirror/lint": "^6.8.5",
+    "@codemirror/search": "^6.5.11",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.1",
+    "@hookform/resolvers": "^5.2.1",
+    "@lezer/highlight": "^1.2.1",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.539.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.1.0",
+    "react-day-picker": "^9.8.1",
+    "react-dom": "^19.1.0",
+    "react-hook-form": "^7.62.0",
+    "react-resizable-panels": "^3.0.4",
+    "recharts": "2.15.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1",
+    "vaul": "^1.1.2",
+    "zod": "^4.0.17"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.1.3",
+    "@storybook/addon-docs": "^9.1.1",
+    "@storybook/react-vite": "^9.1.1",
+    "@tailwindcss/cli": "^4.1.11",
+    "@tailwindcss/vite": "^4.1.11",
+    "@types/node": "^24.2.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react-swc": "^3.10.2",
+    "copyfiles": "^2.4.1",
+    "storybook": "^9.1.1",
+    "tailwindcss": "^4.1.11",
+    "tsx": "^4.20.4",
+    "tw-animate-css": "^1.3.6",
+    "typescript": "~5.8.3",
+    "vite": "^7.0.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rm -rf dist && mkdir -p dist && copyfiles -e '**/*.ts' -e '**/*.tsx' 'src/**' dist && tsc -b --force && tailwindcss --cwd ./src -i ./full.css -o ../dist/bundle.css && echo success",
+    "build:watch": "tsx scripts/watch.node.ts",
+    "build-storybook": "storybook build",
+    "format": "biome format",
+    "format:check": "biome format",
+    "format:fix": "biome format --write",
+    "lint": "biome check",
+    "lint:check": "biome check",
+    "lint:fix": "biome check --write",
+    "storybook": "storybook dev -p 6006",
+    "tsc:check": "tsc -b --noEmit"
+  }
+}

package/src/components/code-editor/index.tsx

@@ -0,0 +1,143 @@
+import {
+	autocompletion,
+	closeBrackets,
+	closeBracketsKeymap,
+	completionKeymap,
+} from "@codemirror/autocomplete";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { json, jsonParseLinter } from "@codemirror/lang-json";
+import {
+	bracketMatching,
+	foldGutter,
+	foldKeymap,
+	HighlightStyle,
+	indentOnInput,
+	syntaxHighlighting,
+} from "@codemirror/language";
+import { linter, lintGutter, lintKeymap } from "@codemirror/lint";
+import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+import { EditorState } from "@codemirror/state";
+import {
+	crosshairCursor,
+	drawSelection,
+	dropCursor,
+	EditorView,
+	highlightActiveLine,
+	highlightActiveLineGutter,
+	highlightSpecialChars,
+	keymap,
+	lineNumbers,
+	rectangularSelection,
+} from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+import * as React from "react";
+
+const baseTheme = EditorView.baseTheme({
+	"&": {
+		backgroundColor: "var(--color-bg-primary)",
+		height: "100%",
+		width: "100%",
+		fontSize: "14px",
+		paddingTop: "8px",
+		paddingBottom: "8px",
+	},
+	".cm-scroller": {
+		overflow: "auto",
+	},
+	".cm-content": {
+		fontFamily: "var(--font-family-mono)",
+		padding: "0",
+	},
+	"&.cm-focused": {
+		outline: "none",
+	},
+	".cm-gutter": {
+		fontFamily: "var(--font-family-mono)",
+	},
+	".cm-gutters": {
+		backgroundColor: "var(--color-bg-primary)",
+		border: "none",
+	},
+	".cm-lineNumbers": {
+		paddingLeft: "16px",
+	},
+	".cm-activeLineGutter": {
+		backgroundColor: "var(--color-bg-primary)",
+		color: "var(--color-text-primary)",
+	},
+	".cm-activeLine": {
+		backgroundColor: "rgba(255, 255, 255, 0)",
+	},
+});
+
+const customHighlightStyle = HighlightStyle.define([
+	{ tag: tags.propertyName, color: "#EA4A35" },
+	{ tag: tags.string, color: "#405CBF" },
+	{ tag: tags.number, color: "#00A984" },
+	{ tag: tags.bool, color: "#569cd6" },
+	{ tag: tags.null, color: "#569cd6" },
+]);
+
+export function CodeEditor({
+	defaultValue,
+	onChange,
+}: {
+	defaultValue?: string;
+	onChange?: (value: string) => void;
+}) {
+	const editorRef = React.useRef(null);
+
+	React.useEffect(() => {
+		if (!editorRef.current) {
+			return;
+		}
+
+		const view = new EditorView({
+			parent: editorRef.current,
+			state: EditorState.create({
+				doc: defaultValue ?? "",
+				extensions: [
+					lineNumbers(),
+					foldGutter(),
+					highlightSpecialChars(),
+					history(),
+					drawSelection(),
+					dropCursor(),
+					EditorState.allowMultipleSelections.of(true),
+					indentOnInput(),
+					json(),
+					syntaxHighlighting(customHighlightStyle),
+					bracketMatching(),
+					closeBrackets(),
+					autocompletion(),
+					rectangularSelection(),
+					crosshairCursor(),
+					highlightActiveLine(),
+					highlightActiveLineGutter(),
+					highlightSelectionMatches(),
+					baseTheme,
+					keymap.of([
+						...closeBracketsKeymap,
+						...defaultKeymap,
+						...searchKeymap,
+						...historyKeymap,
+						...foldKeymap,
+						...completionKeymap,
+						...lintKeymap,
+					]),
+					linter(jsonParseLinter(), { delay: 300 }),
+					lintGutter(),
+					EditorView.updateListener.of((update) => {
+						if (update.docChanged && onChange) {
+							onChange(update.view.state.doc.toString());
+						}
+					}),
+				],
+			}),
+		});
+
+		return () => view.destroy();
+	}, [defaultValue, onChange]);
+
+	return <div className="h-full w-full" ref={editorRef} />;
+}

package/src/components/code-editor.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CodeEditor } from "./code-editor";
+
+const meta: Meta<typeof CodeEditor> = {
+	title: "Component/Editor",
+	component: CodeEditor,
+	parameters: {
+		layout: "centered",
+	},
+	tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeEditor>;
+
+export const Default: Story = {
+	args: {
+		defaultValue: JSON.stringify(
+			{
+				resourceType: "Patient",
+				meta: { versionId: 10 },
+				gender: "male",
+				name: [{ family: "Doe", given: ["John"] }],
+			},
+			null,
+			2,
+		),
+	},
+	render: () => (
+		<div className="h-[500px] w-[500px]">
+			<CodeEditor />
+		</div>
+	),
+};

package/src/components/copy-icon.tsx

@@ -0,0 +1,30 @@
+import { Check, Copy } from "lucide-react";
+import * as React from "react";
+
+interface CopyIconProps {
+	text: string;
+}
+
+function CopyIcon({ text }: CopyIconProps) {
+	const [isActive, setIsActive] = React.useState(false);
+
+	async function handleClick() {
+		try {
+			await navigator.clipboard.writeText(text);
+			setIsActive(true);
+			setTimeout(() => {
+				setIsActive(false);
+			}, 1000);
+		} catch (error) {
+			console.error("Failed to copy to clipboard:", error);
+		}
+	}
+
+	return (
+		<button type="button" onClick={handleClick} style={{ cursor: "pointer" }}>
+			{isActive ? <Check /> : <Copy />}
+		</button>
+	);
+}
+
+export { CopyIcon };

package/src/components/request-line-editor.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
+import { action } from "storybook/actions";
+import {
+	RequestLineEditor,
+	type RequestLineEditorProps,
+} from "./request-line-editor";
+
+const meta: Meta<typeof RequestLineEditor> = {
+	title: "Component/Request line editor",
+	component: RequestLineEditor,
+	parameters: {
+		layout: "centered",
+	},
+	tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof RequestLineEditor>;
+
+function RequestLineEditorWrapper({
+	selectedMethod,
+	methods,
+	inputValue,
+}: RequestLineEditorProps) {
+	const [currentSelectedMethod, setMethod] = React.useState(selectedMethod);
+	const [currentInputValue, setInputValue] = React.useState(inputValue);
+	const actionSetMethod = (method: string) => {
+		action("setMethod")(method);
+		setMethod(method);
+	};
+	const actionSetInputValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+		action("setMethod")(event);
+		setInputValue(event.target.value);
+	};
+	return (
+		<RequestLineEditor
+			methods={methods}
+			selectedMethod={currentSelectedMethod}
+			setMethod={actionSetMethod}
+			inputValue={currentInputValue}
+			onInputChange={actionSetInputValue}
+		/>
+	);
+}
+
+export const GET: Story = {
+	args: {
+		selectedMethod: "GET",
+		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
+		inputValue: "/fhir/Patient",
+	},
+	render: (args) => <RequestLineEditorWrapper {...args} />,
+};
+
+export const POST: Story = {
+	args: {
+		selectedMethod: "POST",
+		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
+		inputValue: "/fhir/Patient",
+	},
+	render: (args) => <RequestLineEditorWrapper {...args} />,
+};
+
+export const PUT: Story = {
+	args: {
+		selectedMethod: "PUT",
+		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
+		inputValue: "/fhir/Patient",
+	},
+	render: (args) => <RequestLineEditorWrapper {...args} />,
+};
+
+export const PATCH: Story = {
+	args: {
+		selectedMethod: "PATCH",
+		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
+		inputValue: "/fhir/Patient",
+	},
+	render: (args) => <RequestLineEditorWrapper {...args} />,
+};
+
+export const DELETE: Story = {
+	args: {
+		selectedMethod: "DELETE",
+		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
+		inputValue: "/fhir/Patient",
+	},
+	render: (args) => <RequestLineEditorWrapper {...args} />,
+};