@medplum/react 0.9.7

package/README.md

@@ -0,0 +1,91 @@
+# Medplum React Component Library
+
+The Medplum React Component Library provides many helpful components to quickly build your healthcare web app.
+
+The Medplum SDK can be used with any compliant FHIR server. However, some advanced features are only available when paired with a Medplum server.
+
+Check out a live demo: [https://docs.medplum.com/storybook/index.html](https://docs.medplum.com/storybook/index.html)
+
+## Key Features
+
+- SmartText - Detect clinical concepts, tag with SNOMED and ICD codes
+- Chat - FHIR-based chat with real time push events
+- Data Table - For a FHIR search, show the results as a live table
+- SSE for server side push
+- Evaluation of [FhirPath](https://hl7.org/fhirpath/N1/index.html)
+- No external dependencies
+
+## Installation
+
+Add as a dependency:
+
+```
+npm install @medplum/react
+```
+
+Note the following peer dependencies:
+- [@medplum/core](https://www.npmjs.com/package/@medplum/core)
+- [react](https://www.npmjs.com/package/react)
+- [react-dom](https://www.npmjs.com/package/react-dom)
+- [react-router-dom](https://www.npmjs.com/package/react-router-dom)
+
+## Basic Usage
+
+```tsx
+import { MedplumClient } from '@medplum/core';
+import { MedplumProvider } from '@medplum/react';
+
+const medplum = new MedplumClient();
+
+export function App() {
+  return (
+    <MedplumProvider medplum={medplum}>
+      <MyPage1 />
+      <MyPage2 />
+      <Etc />
+    </MedplumProvider>
+  );
+}
+```
+
+For more details on how to setup `MedplumClient`, refer to the docs for [`medplum`](https://www.npmjs.com/package/medplum).
+
+## Sign In
+
+```tsx
+export function SignInPage() {
+  const auth = useMedplumContext();
+  return (
+    <Document>
+      {auth.user ? (
+        <div>
+          <pre>User: {JSON.stringify(auth.user)}</pre>
+          <Button onClick={() => auth.medplum.signOut().then(() => alert('Signed out!'))}>Sign out</Button>
+        </div>
+      ) : (
+        <SignInForm onSuccess={() => alert('Signed in!')} />
+      )}
+    </Document>
+  );
+}
+```
+
+## Chat
+
+```tsx
+export function ChatPage() {
+  return (
+    <Document>
+      <ChatControl criteria="Communication?encounter=123" {...args} />
+    </Document>
+  );
+}
+```
+
+## About Medplum
+
+Medplum is a healthcare platform that helps you quickly develop high-quality compliant applications. Medplum includes a FHIR server, React component library, and developer app.
+
+## License
+
+Apache 2.0. Copyright &copy; Medplum 2022

package/dist/cjs/defaulttheme.css

@@ -0,0 +1,245 @@
+:root {
+  --medplum-background: #f8f9fa;
+  --medplum-surface: #ffffff;
+  --medplum-foreground: #424242;
+  --medplum-navbar: #5b2876;
+  --medplum-navbar-textbox: #7a4696;
+  --medplum-navbar-icon: #5b2876;
+  --medplum-navbar-placeholder: #ddc4eb;
+  --medplum-navbar-hover: #5d5d85;
+  --medplum-shadow: rgba(0, 0, 0, 0.1);
+  /* font sizes */
+  --medplum-font-small: 12px;
+  --medplum-font-normal: 13px;
+  --medplum-font-big: 18px;
+  /* gray */
+  --medplum-gray-50: #fafafa;
+  --medplum-gray-100: #f5f5f5;
+  --medplum-gray-200: #eeeeee;
+  --medplum-gray-300: #e0e0e0;
+  --medplum-gray-400: #bdbdbd;
+  --medplum-gray-500: #9e9e9e;
+  --medplum-gray-600: #757575;
+  --medplum-gray-700: #616161;
+  --medplum-gray-800: #424242;
+  --medplum-gray-900: #212121;
+  /* red */
+  --medplum-red-50: #ffebee;
+  --medplum-red-100: #ffcdd2;
+  --medplum-red-200: #ef9a9a;
+  --medplum-red-300: #e57373;
+  --medplum-red-400: #ef5350;
+  --medplum-red-500: #f44336;
+  --medplum-red-600: #e53935;
+  --medplum-red-700: #d32f2f;
+  --medplum-red-800: #c62828;
+  --medplum-red-900: #b71c1c;
+  /* purple */
+  --medplum-purple-50: #ede7f6;
+  --medplum-purple-100: #d1c4e9;
+  --medplum-purple-200: #b39ddb;
+  --medplum-purple-300: #9575cd;
+  --medplum-purple-400: #7e57c2;
+  --medplum-purple-500: #673ab7;
+  --medplum-purple-600: #5e35b1;
+  --medplum-purple-700: #512da8;
+  --medplum-purple-800: #4527a0;
+  --medplum-purple-900: #311b92;
+  /* blue */
+  --medplum-blue-50: #e3f2fd;
+  --medplum-blue-100: #bbdefb;
+  --medplum-blue-200: #90caf9;
+  --medplum-blue-300: #64b5f6;
+  --medplum-blue-400: #42a5f5;
+  --medplum-blue-500: #2196f3;
+  --medplum-blue-600: #1e88e5;
+  --medplum-blue-700: #1976d2;
+  --medplum-blue-800: #1565c0;
+  --medplum-blue-900: #0d47a1;
+  /* green */
+  --medplum-green-50: #e8f5e9;
+  --medplum-green-100: #c8e6c9;
+  --medplum-green-200: #a5d6a7;
+  --medplum-green-300: #81c784;
+  --medplum-green-400: #66bb6a;
+  --medplum-green-500: #4caf50;
+  --medplum-green-600: #43a047;
+  --medplum-green-700: #388e3c;
+  --medplum-green-800: #2e7d32;
+  --medplum-green-900: #1b5e20;
+  /* yellow */
+  --medplum-yellow-50: #fffde7;
+  --medplum-yellow-100: #fff9c4;
+  --medplum-yellow-200: #fff59d;
+  --medplum-yellow-300: #fff176;
+  --medplum-yellow-400: #ffee58;
+  --medplum-yellow-500: #ffeb3b;
+  --medplum-yellow-600: #fdd835;
+  --medplum-yellow-700: #fbc02d;
+  --medplum-yellow-800: #f9a825;
+  --medplum-yellow-900: #f57f17;
+  /* orange */
+  --medplum-orange-50: #fff3e0;
+  --medplum-orange-100: #ffe0b2;
+  --medplum-orange-200: #ffcc80;
+  --medplum-orange-300: #ffb74d;
+  --medplum-orange-400: #ffa726;
+  --medplum-orange-500: #ff9800;
+  --medplum-orange-600: #fb8c00;
+  --medplum-orange-700: #f57c00;
+  --medplum-orange-800: #ef6c00;
+  --medplum-orange-900: #e65100;
+}
+
+@media (prefers-color-scheme: dark2) {
+  :root {
+    --medplum-background: #222;
+    --medplum-surface: #000;
+    --medplum-foreground: #eee;
+    --medplum-navbar: #5b2876;
+    --medplum-navbar-textbox: #7a4696;
+    --medplum-navbar-icon: #5b2876;
+    --medplum-navbar-placeholder: #ddc4eb;
+    --medplum-navbar-hover: #5d5d85;
+    --medplum-shadow: rgba(0, 0, 0, 0.2);
+    /* gray */
+    --medplum-gray-900: #fafafa;
+    --medplum-gray-800: #f5f5f5;
+    --medplum-gray-700: #eeeeee;
+    --medplum-gray-600: #e0e0e0;
+    --medplum-gray-500: #bdbdbd;
+    --medplum-gray-400: #9e9e9e;
+    --medplum-gray-300: #757575;
+    --medplum-gray-200: #616161;
+    --medplum-gray-100: #424242;
+    --medplum-gray-50: #212121;
+    /* red */
+    --medplum-red-900: #ffebee;
+    --medplum-red-800: #ffcdd2;
+    --medplum-red-700: #ef9a9a;
+    --medplum-red-600: #e57373;
+    --medplum-red-500: #ef5350;
+    --medplum-red-400: #f44336;
+    --medplum-red-300: #e53935;
+    --medplum-red-200: #d32f2f;
+    --medplum-red-100: #c62828;
+    --medplum-red-50: #b71c1c;
+    /* purple */
+    --medplum-purple-900: #ede7f6;
+    --medplum-purple-800: #d1c4e9;
+    --medplum-purple-700: #b39ddb;
+    --medplum-purple-600: #9575cd;
+    --medplum-purple-500: #7e57c2;
+    --medplum-purple-400: #673ab7;
+    --medplum-purple-300: #5e35b1;
+    --medplum-purple-200: #512da8;
+    --medplum-purple-100: #4527a0;
+    --medplum-purple-50: #311b92;
+    /* blue */
+    --medplum-blue-50: #e3f2fd;
+    --medplum-blue-100: #bbdefb;
+    --medplum-blue-200: #90caf9;
+    --medplum-blue-300: #64b5f6;
+    --medplum-blue-400: #42a5f5;
+    --medplum-blue-500: #2196f3;
+    --medplum-blue-600: #1e88e5;
+    --medplum-blue-700: #1976d2;
+    --medplum-blue-800: #1565c0;
+    --medplum-blue-900: #0d47a1;
+    /* green */
+    --medplum-green-900: #e8f5e9;
+    --medplum-green-800: #c8e6c9;
+    --medplum-green-700: #a5d6a7;
+    --medplum-green-600: #81c784;
+    --medplum-green-500: #66bb6a;
+    --medplum-green-400: #4caf50;
+    --medplum-green-300: #43a047;
+    --medplum-green-200: #388e3c;
+    --medplum-green-100: #2e7d32;
+    --medplum-green-50: #1b5e20;
+    /* yellow */
+    --medplum-yellow-900: #fffde7;
+    --medplum-yellow-800: #fff9c4;
+    --medplum-yellow-700: #fff59d;
+    --medplum-yellow-600: #fff176;
+    --medplum-yellow-500: #ffee58;
+    --medplum-yellow-400: #ffeb3b;
+    --medplum-yellow-300: #fdd835;
+    --medplum-yellow-200: #fbc02d;
+    --medplum-yellow-100: #f9a825;
+    --medplum-yellow-50: #f57f17;
+    /* orange */
+    --medplum-orange-900: #fff3e0;
+    --medplum-orange-800: #ffe0b2;
+    --medplum-orange-700: #ffcc80;
+    --medplum-orange-600: #ffb74d;
+    --medplum-orange-500: #ffa726;
+    --medplum-orange-400: #ff9800;
+    --medplum-orange-300: #fb8c00;
+    --medplum-orange-200: #f57c00;
+    --medplum-orange-100: #ef6c00;
+    --medplum-orange-50: #e65100;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  position: relative;
+}
+
+body {
+  min-height: 100%;
+  margin: 0 0 40px 0;
+  font-size: var(--medplum-font-normal);
+  font-style: normal;
+  color: var(--medplum-foreground);
+  background: var(--medplum-background);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+}
+
+button,
+input[type='date'],
+input[type='datetime-local'],
+input[type='email'],
+input[type='number'],
+input[type='password'],
+input[type='tel'],
+input[type='text'],
+input[type='time'],
+input[type='url'],
+select {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+}
+
+code,
+pre,
+textarea {
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+}
+
+a {
+  color: var(--medplum-blue-700);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+  transition: background-color 100ms linear, color 100ms linear, border 100ms linear;
+}
+
+a:focus {
+  outline: 0.1px solid var(--medplum-blue-500);
+}