@medplum/react 0.10.2 → 1.0.0

package/dist/esm/stories/DescriptionList.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Basic: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medplum/react",
-  "version": "0.10.2",
+  "version": "1.0.0",
   "description": "Medplum React Component Library",
   "author": "Medplum <hello@medplum.com>",
   "license": "Apache-2.0",
@@ -14,41 +14,42 @@
     "clean": "rimraf dist storybook-static",
     "dev": "start-storybook -p 6006",
     "build": "npm run clean && npm run rollup",
-    "rollup": "rollup --config rollup.config.js",
+    "rollup": "rollup --config rollup.config.mjs",
     "test": "jest",
     "storybook": "build-storybook"
   },
   "devDependencies": {
     "@emotion/react": "11.10.4",
-    "@mantine/core": "5.5.0",
-    "@mantine/hooks": "5.5.0",
-    "@medplum/core": "0.10.2",
-    "@medplum/definitions": "0.10.2",
-    "@medplum/fhirtypes": "0.10.2",
-    "@medplum/mock": "0.10.2",
-    "@tabler/icons": "1.101.0",
+    "@mantine/core": "5.5.5",
+    "@mantine/hooks": "5.5.5",
+    "@mantine/notifications": "5.5.5",
+    "@medplum/core": "1.0.0",
+    "@medplum/definitions": "1.0.0",
+    "@medplum/fhirtypes": "1.0.0",
+    "@medplum/mock": "1.0.0",
+    "@tabler/icons": "1.104.0",
     "@storybook/addon-actions": "6.5.12",
     "@storybook/addon-essentials": "6.5.12",
     "@storybook/addon-links": "6.5.12",
     "@storybook/builder-webpack5": "6.5.12",
     "@storybook/manager-webpack5": "6.5.12",
     "@storybook/react": "6.5.12",
-    "@testing-library/dom": "8.18.1",
+    "@testing-library/dom": "8.19.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
-    "@types/jest": "29.1.1",
-    "@types/node": "18.7.23",
+    "@types/jest": "29.1.2",
+    "@types/node": "18.11.0",
     "@types/react": "18.0.21",
     "@types/react-dom": "18.0.6",
     "@types/react-router-dom": "5.3.3",
     "dotenv-webpack": "8.0.1",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.1.2",
-    "jest-each": "29.1.2",
+    "jest": "29.2.0",
+    "jest-each": "29.2.0",
     "html-webpack-plugin": "5.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "6.4.1",
+    "react-router-dom": "6.4.2",
     "rimraf": "3.0.2",
     "typescript": "4.8.4"
   },
@@ -56,26 +57,36 @@
     "@emotion/react": "^11.10.4",
     "@mantine/core": "^5.4.0",
     "@mantine/hooks": "^5.4.0",
-    "@medplum/core": "0.10.2",
+    "@mantine/notifications": "^5.4.0",
+    "@medplum/core": "1.0.0",
     "@tabler/icons": "^1.100.0",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
     "react-router-dom": "^6.2.2"
   },
+  "peerDependenciesMeta": {
+    "@emotion/react": {
+      "optional": true
+    },
+    "@mantine/core": {
+      "optional": true
+    },
+    "@mantine/hooks": {
+      "optional": true
+    },
+    "@mantine/notifications": {
+      "optional": true
+    },
+    "@tabler/icons": {
+      "optional": true
+    }
+  },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
     ".": {
       "require": "./dist/cjs/index.js",
       "import": "./dist/esm/index.js"
-    },
-    "./defaulttheme.css": {
-      "require": "./dist/cjs/defaulttheme.css",
-      "import": "./dist/esm/defaulttheme.css"
-    },
-    "./styles.css": {
-      "require": "./dist/cjs/styles.css",
-      "import": "./dist/esm/styles.css"
     }
   },
   "types": "dist/esm/index.d.ts",

package/rollup.config.mjs

@@ -0,0 +1,111 @@
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import typescript from '@rollup/plugin-typescript';
+import dotenv from 'dotenv';
+import { mkdirSync, writeFileSync } from 'fs';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import { terser } from 'rollup-plugin-terser';
+
+dotenv.config();
+
+const extensions = ['.ts', '.tsx'];
+
+const globals = {
+  '@mantine/core': 'mantine.core',
+  '@mantine/hooks': 'mantine.hooks',
+  '@mantine/notifications': 'mantine.notifications',
+  '@mantine/react': 'mantine.react',
+  '@medplum/core': 'medplum.core',
+  '@medplum/mock': 'medplum.mock',
+  '@tabler/icons': 'tabler.icons',
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'react-router-dom': 'ReactRouterDOM',
+};
+
+const sourcemapPathTransform = (path) => path.replaceAll('\\', '/').replaceAll('../../../src', '../../src');
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: 'dist/cjs/index.js',
+        format: 'umd',
+        name: 'medplum.react',
+        sourcemap: true,
+        sourcemapPathTransform,
+        globals,
+      },
+      {
+        file: 'dist/cjs/index.min.js',
+        format: 'umd',
+        name: 'medplum.react',
+        plugins: [terser()],
+        sourcemap: true,
+        sourcemapPathTransform,
+        globals,
+      },
+    ],
+    plugins: [
+      replace({
+        preventAssignment: true,
+        values: {
+          'process.env.NODE_ENV': '"production"',
+          'process.env.GOOGLE_AUTH_ORIGINS': `"${process.env.GOOGLE_AUTH_ORIGINS}"`,
+          'process.env.GOOGLE_CLIENT_ID': `"${process.env.GOOGLE_CLIENT_ID}"`,
+        },
+      }),
+      peerDepsExternal(),
+      resolve({ extensions }),
+      typescript({ tsconfig: 'tsconfig.cjs.json', resolveJsonModule: true }),
+      {
+        buildEnd: () => {
+          mkdirSync('./dist/cjs', { recursive: true });
+          writeFileSync('./dist/cjs/package.json', '{"type": "commonjs"}');
+        },
+      },
+    ],
+    external: Object.keys(globals),
+  },
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        dir: 'dist/esm',
+        format: 'esm',
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+        sourcemap: true,
+        sourcemapPathTransform,
+      },
+      {
+        file: 'dist/esm/index.min.js',
+        format: 'esm',
+        plugins: [terser()],
+        sourcemap: true,
+        sourcemapPathTransform,
+      },
+    ],
+    plugins: [
+      replace({
+        preventAssignment: true,
+        values: {
+          'process.env.NODE_ENV': '"production"',
+          'process.env.GOOGLE_AUTH_ORIGINS': `"${process.env.GOOGLE_AUTH_ORIGINS}"`,
+          'process.env.GOOGLE_CLIENT_ID': `"${process.env.GOOGLE_CLIENT_ID}"`,
+        },
+      }),
+      peerDepsExternal(),
+      resolve({ extensions }),
+      typescript({ tsconfig: 'tsconfig.esm.json', resolveJsonModule: true }),
+      {
+        buildEnd: () => {
+          mkdirSync('./dist/esm', { recursive: true });
+          writeFileSync('./dist/esm/package.json', '{"type": "module"}');
+        },
+      },
+    ],
+    external: Object.keys(globals),
+  },
+];

package/dist/cjs/defaulttheme.css

@@ -1,192 +0,0 @@
-:root {
-  --medplum-background: #f8f9fa;
-  --medplum-surface: #ffffff;
-  --medplum-foreground: #424242;
-  --medplum-navbar: #5b2876;
-  --medplum-navbar-textbox: rgba(255, 255, 255, 0.2);
-  --medplum-navbar-placeholder: rgba(255, 255, 255, 0.6);
-  --medplum-shadow: rgba(0, 0, 0, 0.1);
-  --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: rgba(255, 255, 255, 0.2);
-    --medplum-navbar-placeholder: rgba(255, 255, 255, 0.6);
-    --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;
-  }
-}
-
-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);
-}