Added router to template

holochain-open-dev · Jun 12, 2024 · 86bc1c2 · 86bc1c2
1 parent 64c849b
commit 86bc1c2
Show file tree

Hide file tree

Showing 17 changed files with 232 additions and 75 deletions.
diff --git a/flake.lock b/flake.lock
diff --git a/...ebab_case coordinator_zome_manifest.name}}/elements/{{kebab_case collection_name}}.ts.hbs b/...ebab_case coordinator_zome_manifest.name}}/elements/{{kebab_case collection_name}}.ts.hbs
@@ -4,13 +4,14 @@ import { AgentPubKey, EntryHash, ActionHash, Record } from '@holochain/client';
 import { SignalWatcher } from '@holochain-open-dev/signals';
 import { consume } from '@lit/context';
 import { localized, msg } from '@lit/localize';
-import { hashProperty, sharedStyles, wrapPathInSvg } from '@holochain-open-dev/elements';
+import { hashProperty, wrapPathInSvg } from '@holochain-open-dev/elements';
 import { mdiInformationOutline } from '@mdi/js';
 
 import '@holochain-open-dev/elements/dist/elements/display-error.js';
 import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
 import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 
+import { appStyles } from '../../../app-styles.js';
 import './{{kebab_case referenceable.name}}-summary.js';
 import { {{pascal_case coordinator_zome_manifest.name}}Store } from '../{{kebab_case coordinator_zome_manifest.name}}-store.js';
 import { {{camel_case coordinator_zome_manifest.name}}StoreContext } from '../context.js';
@@ -82,5 +83,5 @@ export class {{pascal_case collection_name}} extends SignalWatcher(LitElement) {
     }
   }
 
-  static styles = [sharedStyles];
+  static styles = appStyles;
 }
diff --git a/...se coordinator_zome_manifest.name}}/elements/create-{{kebab_case entry_type.name}}.ts.hbs b/...se coordinator_zome_manifest.name}}/elements/create-{{kebab_case entry_type.name}}.ts.hbs
@@ -4,7 +4,7 @@ import { state, property, query, customElement } from 'lit/decorators.js';
 import { ActionHash, Record, DnaHash, AgentPubKey, EntryHash } from '@holochain/client';
 import { EntryRecord } from '@holochain-open-dev/utils';
 import { SignalWatcher } from '@holochain-open-dev/signals';
-import { hashProperty, notifyError, hashState, sharedStyles, onSubmit, wrapPathInSvg } from '@holochain-open-dev/elements';
+import { hashProperty, notifyError, hashState, onSubmit, wrapPathInSvg } from '@holochain-open-dev/elements';
 import { consume } from '@lit/context';
 import { localized, msg } from '@lit/localize';
 import { mdiAlertCircleOutline, mdiDelete } from "@mdi/js";
@@ -25,6 +25,7 @@ import '@shoelace-style/shoelace/dist/components/button/button.js';
   {{/each}}
 {{/uniq_lines}}
 
+import { appStyles } from '../../../app-styles.js';
 import { {{pascal_case coordinator_zome_manifest.name}}Store } from '../{{kebab_case coordinator_zome_manifest.name}}-store.js';
 import { {{camel_case coordinator_zome_manifest.name}}StoreContext } from '../context.js';
 import { {{pascal_case entry_type.name}}{{#each entry_type.fields}}{{#if (eq field_type.type "Enum")}}, {{field_type.label}}{{/if}}{{/each}} } from '../types.js';
@@ -171,5 +172,5 @@ export class Create{{pascal_case entry_type.name}} extends SignalWatcher(LitElem
       </sl-card>`;
   }
 
-  static styles = [sharedStyles];
+  static styles = appStyles;
 }
diff --git a/... (plural ..¡entry_type.name)}}-for-{{kebab_case linked_from.name}}.ts{{¡if}}{{¡each}}.hbs b/... (plural ..¡entry_type.name)}}-for-{{kebab_case linked_from.name}}.ts{{¡if}}{{¡each}}.hbs
@@ -3,7 +3,7 @@ import { state, customElement, property } from 'lit/decorators.js';
 import { Record, EntryHash, ActionHash, AgentPubKey } from '@holochain/client';
 import { AsyncComputed, SignalWatcher } from '@holochain-open-dev/signals';
 import { EntryRecord, slice} from '@holochain-open-dev/utils';
-import { hashProperty, sharedStyles, wrapPathInSvg } from '@holochain-open-dev/elements';
+import { hashProperty, wrapPathInSvg } from '@holochain-open-dev/elements';
 import { consume } from '@lit/context';
 import { localized, msg } from '@lit/localize';
 import { mdiInformationOutline } from '@mdi/js';
@@ -16,6 +16,7 @@ import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 import '@holochain-open-dev/profiles/dist/elements/agent-avatar.js';
 {{/if}}
 
+import { appStyles } from '../../../app-styles.js';
 import { {{pascal_case ../coordinator_zome_manifest.name}}Store } from '../{{kebab_case ../coordinator_zome_manifest.name}}-store.js';
 import { {{camel_case ../coordinator_zome_manifest.name}}StoreContext } from '../context.js';
 import { {{pascal_case ../entry_type.name}}{{#each entry_type.fields}}{{#if (eq field_type.type "Enum")}}, {{field_type.label}}{{/if}}{{/each}} } from '../types.js';
@@ -104,5 +105,5 @@ export class {{pascal_case (plural ../entry_type.name)}}For{{pascal_case linked_
   {{/if}}
   }
 
-  static styles = [sharedStyles];
+  static styles = appStyles;
 }
diff --git a/...fest.name}}/elements/{{#if crud.update}}edit-{{kebab_case entry_type.name}}.ts{{¡if}}.hbs b/...fest.name}}/elements/{{#if crud.update}}edit-{{kebab_case entry_type.name}}.ts{{¡if}}.hbs
@@ -3,7 +3,7 @@ import { repeat } from "lit/directives/repeat.js";
 import { state, customElement, property } from 'lit/decorators.js';
 import { ActionHash, Record, EntryHash, AgentPubKey } from '@holochain/client';
 import { EntryRecord } from '@holochain-open-dev/utils';
-import { hashState, notifyError, sharedStyles, hashProperty, wrapPathInSvg, onSubmit } from '@holochain-open-dev/elements';
+import { hashState, notifyError, hashProperty, wrapPathInSvg, onSubmit } from '@holochain-open-dev/elements';
 import { SignalWatcher, toPromise } from '@holochain-open-dev/signals';
 import { consume } from '@lit/context';
 import { localized, msg } from '@lit/localize';
@@ -24,6 +24,7 @@ import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
   {{/each}}
 {{/uniq_lines}}
 
+import { appStyles } from '../../../app-styles.js';
 import { {{pascal_case coordinator_zome_manifest.name}}Store } from '../{{kebab_case coordinator_zome_manifest.name}}-store.js';
 import { {{camel_case coordinator_zome_manifest.name}}StoreContext } from '../context.js';
 import { {{pascal_case entry_type.name}}{{#each entry_type.fields}}{{#if (eq field_type.type "Enum")}}, {{field_type.label}}{{/if}}{{/each}} } from '../types.js';
@@ -187,5 +188,5 @@ export class Edit{{pascal_case entry_type.name}} extends SignalWatcher(LitElemen
     }
   }
 
-  static styles = [sharedStyles];
+  static styles = appStyles;
 }
diff --git a/...se coordinator_zome_manifest.name}}/elements/{{kebab_case entry_type.name}}-detail.ts.hbs b/...se coordinator_zome_manifest.name}}/elements/{{kebab_case entry_type.name}}-detail.ts.hbs
@@ -3,7 +3,7 @@ import { state, property, customElement } from 'lit/decorators.js';
 import { EntryHash, Record, ActionHash } from '@holochain/client';
 import { EntryRecord } from '@holochain-open-dev/utils';
 import { SignalWatcher } from '@holochain-open-dev/signals';
-import { sharedStyles, hashProperty, wrapPathInSvg, notifyError } from '@holochain-open-dev/elements';
+import { hashProperty, wrapPathInSvg, notifyError } from '@holochain-open-dev/elements';
 import { consume } from '@lit/context';
 import { localized, msg } from '@lit/localize';
 import { mdiAlertCircleOutline, mdiPencil, mdiDelete } from '@mdi/js';
@@ -24,6 +24,7 @@ import '@shoelace-style/shoelace/dist/components/button/button.js';
   {{/each}}
 {{/uniq_lines}}
 
+import { appStyles } from '../../../app-styles.js';
 {{#if crud.update}}
 import './edit-{{kebab_case entry_type.name}}.js';
 {{/if}}
@@ -144,5 +145,5 @@ export class {{pascal_case entry_type.name}}Detail extends SignalWatcher(LitElem
     }
   }
 
-  static styles = [sharedStyles];
+  static styles = appStyles;
 }
diff --git a/...e coordinator_zome_manifest.name}}/elements/{{kebab_case entry_type.name}}-summary.ts.hbs b/...e coordinator_zome_manifest.name}}/elements/{{kebab_case entry_type.name}}-summary.ts.hbs
@@ -3,7 +3,7 @@ import { state, property, customElement } from 'lit/decorators.js';
 import { EntryHash, Record, ActionHash } from '@holochain/client';
 import { EntryRecord } from '@holochain-open-dev/utils';
 import { SignalWatcher } from '@holochain-open-dev/signals';
-import { hashProperty, sharedStyles } from '@holochain-open-dev/elements';
+import { hashProperty } from '@holochain-open-dev/elements';
 import { consume } from '@lit/context';
 
 import { localized, msg } from '@lit/localize';
@@ -20,6 +20,7 @@ import '@holochain-open-dev/elements/dist/elements/display-error.js';
   {{/each}}
 {{/uniq_lines}}
 
+import { appStyles } from '../../../app-styles.js';
 import { {{pascal_case coordinator_zome_manifest.name}}Store } from '../{{kebab_case coordinator_zome_manifest.name}}-store.js';
 import { {{camel_case coordinator_zome_manifest.name}}StoreContext } from '../context.js';
 import { {{pascal_case entry_type.name}}{{#each entry_type.fields}}{{#if (eq field_type.type "Enum")}}, {{field_type.label}}{{/if}}{{/each}} } from '../types.js';
@@ -97,5 +98,5 @@ export class {{pascal_case entry_type.name}}Summary extends SignalWatcher(LitEle
   }
 
 
-  static styles = [sharedStyles];
+  static styles = appStyles;
 }
diff --git a/...(plural from_referenceable.name)}}-for-{{kebab_case to_referenceable.name}}.ts{{¡if}}.hbs b/...(plural from_referenceable.name)}}-for-{{kebab_case to_referenceable.name}}.ts{{¡if}}.hbs
@@ -3,14 +3,15 @@ import { state, property, customElement } from 'lit/decorators.js';
 import { AgentPubKey, EntryHash, ActionHash, Record } from '@holochain/client';
 import { consume } from '@lit/context';
 import { SignalWatcher } from '@holochain-open-dev/signals';
-import { hashProperty, sharedStyles, wrapPathInSvg } from '@holochain-open-dev/elements';
+import { hashProperty, wrapPathInSvg } from '@holochain-open-dev/elements';
 import { localized, msg } from '@lit/localize';
 import { mdiInformationOutline } from '@mdi/js';
 
 import '@holochain-open-dev/elements/dist/elements/display-error.js';
 import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
 import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 
+import { appStyles } from '../../../app-styles.js';
 {{#if (not (eq from_referenceable.hash_type "AgentPubKey") )}}
 import './{{kebab_case from_referenceable.name}}-summary.js';
 {{else}}
@@ -90,5 +91,5 @@ export class {{pascal_case (plural from_referenceable.name)}}For{{pascal_case to
     }
   }
 
-  static styles = [sharedStyles];
+  static styles = appStyles;
 }
diff --git a/...(plural to_referenceable.name)}}-for-{{kebab_case from_referenceable.name}}.ts{{¡if}}.hbs b/...(plural to_referenceable.name)}}-for-{{kebab_case from_referenceable.name}}.ts{{¡if}}.hbs
@@ -2,7 +2,7 @@ import { LitElement, html } from 'lit';
 import { state, property, customElement } from 'lit/decorators.js';
 import { AgentPubKey, EntryHash, ActionHash, Record } from '@holochain/client';
 import { consume } from '@lit/context';
-import { hashProperty, sharedStyles, wrapPathInSvg } from '@holochain-open-dev/elements';
+import { hashProperty, wrapPathInSvg } from '@holochain-open-dev/elements';
 import { SignalWatcher } from '@holochain-open-dev/signals';
 import { localized, msg } from '@lit/localize';
 import { mdiInformationOutline } from '@mdi/js';
@@ -17,6 +17,7 @@ import './{{kebab_case to_referenceable.name}}-summary.js';
 import '@holochain-open-dev/profiles/dist/elements/agent-avatar.js';
 {{/if}}
 
+import { appStyles } from '../../../app-styles.js';
 import { {{pascal_case coordinator_zome_manifest.name}}Store } from '../{{kebab_case coordinator_zome_manifest.name}}-store.js';
 import { {{camel_case coordinator_zome_manifest.name}}StoreContext } from '../context.js';
 
@@ -91,5 +92,5 @@ export class {{pascal_case (plural to_referenceable.name)}}For{{pascal_case from
     }
   }
 
-  static styles = [sharedStyles];
+  static styles = appStyles;
 }
diff --git a/templates/app/web-app/ui/index.html.hbs b/templates/app/web-app/ui/index.html.hbs
@@ -47,6 +47,7 @@
     <holochain-app></holochain-app>
 
     <script type="module">
+      import "urlpattern-polyfill";
       import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
       import "./src/holochain-app.ts";
 

diff --git a/templates/app/web-app/ui/package.json.hbs b/templates/app/web-app/ui/package.json.hbs
@@ -11,16 +11,17 @@
     "localize:build": "lit-localize build"
   },
   "dependencies": {
-    "@holochain/client": "^0.17.0-dev.12",
-    "@holochain-open-dev/elements": "^0.300.0-dev.1",
-    "@holochain-open-dev/signals": "^0.300.0-dev.5",
-    "@holochain-open-dev/utils": "^0.300.0-dev.2",
+    "@holochain/client": "^0.17.0-rc",
+    "@holochain-open-dev/elements": "^0.300.0-rc.3",
+    "@holochain-open-dev/signals": "^0.300.0-rc",
+    "@holochain-open-dev/utils": "^0.300.0-rc",
     "@lit/context": "^1.0.0",
     "@lit/localize": "^0.12.0",
     "@mdi/js": "^7.2.0",
     "@msgpack/msgpack": "^2.8.0",
     "@shoelace-style/shoelace": "^2.11.0",
-    "lit": "^3.0.0"
+    "lit": "^3.0.0",
+    "urlpattern-polyfill": "^10.0.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.4",

diff --git a/templates/app/web-app/ui/src/app-styles.ts.hbs b/templates/app/web-app/ui/src/app-styles.ts.hbs
@@ -0,0 +1,12 @@
+import { css } from 'lit';
+
+export const appStyles = [
+    css`
+      .top-bar {
+        align-items: center;
+        background-color: var(--sl-color-primary-500);
+        padding: 16px;
+      }
+	`,
+	sharedStyles
+];
diff --git a/templates/app/web-app/ui/src/context.ts.hbs b/templates/app/web-app/ui/src/context.ts.hbs
@@ -0,0 +1,5 @@
+import { Router } from "@holochain-open-dev/elements";
+import { createContext } from "@lit/context";
+
+export const rootRouterContext = createContext<Router>("router");
+