Initial: npm package setup (#98)

akello-io · Nov 9, 2023 · f4360b8 · f4360b8
1 parent 34566c5
commit f4360b8
Show file tree

Hide file tree

Showing 107 changed files with 167,565 additions and 51,313 deletions.
diff --git a/packages/apps/akello-app/package-lock.json b/packages/apps/akello-app/package-lock.json
diff --git a/packages/apps/akello-app/package.json b/packages/apps/akello-app/package.json
@@ -2,9 +2,12 @@
   "name": "akello-app",
   "version": "0.1.0",
   "private": true,
+  "devDependencies": {
+    "tailwindcss": "^3.3.5"
+  },
   "dependencies": {
-    "@akello/core": "file:../../core",
-    "@akello/react": "file:../../react",
+    "@akello/react": "^0.0.7",
+    "@akello/react-insights": "^0.0.1",
     "@aws-amplify/ui-react": "^5.3.1",
     "@heroicons/react": "^2.0.18",
     "@reduxjs/toolkit": "^1.9.7",
@@ -27,6 +30,7 @@
     "react-scripts": "5.0.1",
     "theme-change": "^2.5.0",
     "typescript": "^4.9.5",
+    "typescript-npm-package-template": "file:../../react-test-2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -53,7 +57,7 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {
-    "tailwindcss": "^3.3.5"
+  "overrides": {
+    "react-refresh": "0.11.0"
   }
 }
diff --git a/packages/apps/akello-app/src/pages/DashboardPage.tsx b/packages/apps/akello-app/src/pages/DashboardPage.tsx
@@ -1,22 +1,51 @@
 import PageContainer from "../containers/PageContainer";
-import {Auth} from "aws-amplify";
+import {DashboardComponent, Metric} from '@akello/react-insights';
+import {TestComponent} from 'typescript-npm-package-template';
 
 const DashboardPage = () => {
 
     return (
         <>
             <PageContainer>
-                Dashboard Page
-
-                <button className={"btn btn-primary btn-xl"} onClick={() => {
-                    Auth.signOut()
-                        .then(() => {
-                            window.location.reload();
-                        })
-                        .catch(err => {
-                            debugger;
-                        });
-                }}>sign out</button>
+                <TestComponent />
+                <div className={"p-4 grid grid-cols-1 sm:grid-cols-2 gap-4"}>
+                    <DashboardComponent title={"Treatment Performance"}>
+                        <div className={"bg-base-100 p-12 w-full pb-6 flex flex-row space-x-12"}>
+                            <Metric value={'3'} description={'Avg. Weeks in treatment'}/>
+                            <Metric value={'3'} description={'Median Weeks in treatment'}/>
+                            <Metric value={'3'} description={'Max Weeks in treatment'}/>
+                        </div>
+                    </DashboardComponent>
+
+                    <DashboardComponent title={"PHQ-9/GAD7-9 Screening Avg"}>
+                        <div className={"bg-base-100 p-12 w-full pb-6 flex flex-row space-x-12"}>
+                            <Metric value={'0/0'} description={'Initial'}/>
+                            <Metric value={'0/0'} description={'Current'}/>
+                            <Metric value={'-1/-1'} description={'Weekly Change'}/>
+                        </div>
+                    </DashboardComponent>
+
+
+                    <DashboardComponent title={"Payer Distribution"}>
+                        <div className={"bg-base-100 p-12 w-full pb-6 flex flex-row space-x-12"}>
+                            <Metric value={'3'} description={'Avg. Weeks in treatment'}/>
+                            <Metric value={'3'} description={'Median Weeks in treatment'}/>
+                            <Metric value={'3'} description={'Max Weeks in treatment'}/>
+                        </div>
+                    </DashboardComponent>
+
+                    <DashboardComponent title={"Patient Status Distribution"}>
+                        <div className={"bg-base-100 p-12 w-full pb-6 flex flex-row space-x-12"}>
+                            <Metric value={'3'} description={'Avg. Weeks in treatment'}/>
+                            <Metric value={'3'} description={'Median Weeks in treatment'}/>
+                            <Metric value={'3'} description={'Max Weeks in treatment'}/>
+                        </div>
+                    </DashboardComponent>
+                </div>
+
+
+
+
             </PageContainer>
         </>
     )

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -114,19 +114,19 @@ Within the root of your project, create the following file structure:
 ├── src
 │   ├── components
 |   │   ├── Button
-|   |   │   ├── Button.tsx
+|   |   │   ├── Registry.tsx
 |   |   │   └── index.ts
 |   │   └── index.ts
 │   └── index.ts
 ├── package.json
 └── package-lock.json
 ```
 
-Make sure to double check your structure.  You should have three `index.ts` files, and a `Button.tsx` file inside of a `Button` directory.  If you have a preferred way of structuring React components within a project you are of course welcome to do it however you like, but this is the structure we will follow for this tutorial.  
+Make sure to double check your structure.  You should have three `index.ts` files, and a `Registry.tsx` file inside of a `Button` directory.  If you have a preferred way of structuring React components within a project you are of course welcome to do it however you like, but this is the structure we will follow for this tutorial.  
 
-Begin by creating `Button.tsx`:
+Begin by creating `Registry.tsx`:
 
-`src/components/Button/Button.tsx`
+`src/components/Button/Registry.tsx`
 ```tsx
 import React from "react";
 
@@ -220,7 +220,7 @@ The values marked _added_ are new values that we need for our project.  We'll br
 * "allowSyntheticDefaultImports": true -- Assumes default exports if none are created manually
 * "emitDeclarationOnly": true -- Don't generate JS (rollup will do that) only export type declarations
 
-One you add those values to your TS configuration file you should see the errors in `Button.tsx` and other files immediately disappear.
+One you add those values to your TS configuration file you should see the errors in `Registry.tsx` and other files immediately disappear.
 
 ## Adding Rollup
 
@@ -340,7 +340,7 @@ With these configurations in place you are now ready to run rollup for the first
 ├── src
 │   ├── components
 |   │   ├── Button
-|   |   │   ├── Button.tsx
+|   |   │   ├── Registry.tsx
 |   |   │   └── index.ts
 |   │   └── index.ts
 │   └── index.ts
@@ -536,9 +536,9 @@ button {
 
 This will turn our regular _Hello world!_ button into a REALLY BIG button.  
 
-Next we will indicate that these styles are meant to be applied on our button component.  We'll be using special syntax that isn't native to Javascript, but thanks to rollup and the appropriate plugins, we are able to use it.  Update our `Button.tsx` file with the following:
+Next we will indicate that these styles are meant to be applied on our button component.  We'll be using special syntax that isn't native to Javascript, but thanks to rollup and the appropriate plugins, we are able to use it.  Update our `Registry.tsx` file with the following:
 
-`src/components/Button/Button.tsx`
+`src/components/Button/Registry.tsx`
 ```tsx
 import React from "react";
 import "./Button.css";