Tweets recipe

typescript/packages/common-ui/src/components/common-hstack.ts

@@ -1,38 +1,38 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
-import { view } from '../hyperscript/render.js';
+import { view } from "../hyperscript/render.js";
 import { baseStyles } from "./style.js";
 
-export const hstack = view('common-hstack', {});
+export const hstack = view("common-hstack", {});
 
 @customElement("common-hstack")
 export class CommonHstackElement extends LitElement {
   static override styles = [
     baseStyles,
     css`
-    :host {
-      display: block;
-    }
+      :host {
+        display: block;
+      }
 
-    .stack {
-      display: flex;
-      flex-direction: row;
-    }
+      .hstack {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
 
-    :host([gap="md"]) .stack {
-      gap: var(--gap);
-    }
+      :host([gap="md"]) .hstack {
+        gap: var(--gap);
+      }
 
-    :host([pad="md"]) .stack {
-      padding: var(--gap);
-    }
-    `
+      :host([pad="md"]) .hstack {
+        padding: var(--gap);
+      }
+    `,
   ];
 
   override render() {
-    return html`
-    <div class="stack">
+    return html` <div class="hstack">
       <slot></slot>
     </div>`;
   }
-}
+}

typescript/packages/common-ui/src/components/common-vstack.ts

@@ -1,49 +1,51 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
 import { baseStyles } from "./style.js";
-import { view } from '../hyperscript/render.js';
+import { view } from "../hyperscript/render.js";
 import { eventProps } from "../hyperscript/schema-helpers.js";
 
-export const vstack = view('common-vstack', {
+export const vstack = view("common-vstack", {
   ...eventProps(),
-  gap: { type: 'string' },
-  pad: { type: 'string' }
+  gap: { type: "string" },
+  pad: { type: "string" },
 });
 
 @customElement("common-vstack")
 export class CommonVstackElement extends LitElement {
   static override styles = [
     baseStyles,
     css`
-    :host {
-      display: block;
-    }
-
-    .stack {
-      display: flex;
-      flex-direction: column;
-      gap: var(--pad);
-
-    }
-
-    :host([gap="none"]) .stack {
-      gap: 0;
-    }
-
-    :host([gap="sm"]) .stack {
-      gap: var(--pad-sm);
-    }
-
-    :host([pad="md"]) .stack {
-      padding: var(--pad);
-    }
-    `
+      :host {
+        display: block;
+      }
+
+      .stack {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pad);
+      }
+
+      :host([gap="none"]) .stack {
+        gap: 0;
+      }
+
+      :host([gap="sm"]) .stack {
+        gap: var(--pad-sm);
+      }
+
+      :host([gap="md"]) .stack {
+        gap: var(--pad);
+      }
+
+      :host([pad="md"]) .stack {
+        padding: var(--pad);
+      }
+    `,
   ];
 
   override render() {
-    return html`
-    <div class="stack">
+    return html` <div class="stack">
       <slot></slot>
     </div>`;
   }
-}
+}

typescript/packages/common-ui/src/components/shoelace/index.ts

@@ -1,5 +1,6 @@
 export * from "./components.js";
 import theme from "./theme/light.styles.js";
+import { registerIconLibrary } from "@shoelace-style/shoelace";
 
 /**
  * Adopt the styles for shoelace components.
@@ -11,3 +12,22 @@ export const adoptShoelaceStyles = (
 ) => {
   host.adoptedStyleSheets = [theme.styleSheet];
 };
+
+export const registerShoelaceIcons = () => {
+  registerIconLibrary("material", {
+    resolver: (name) => {
+      const match = name.match(/^(.*?)(_(round|sharp))?$/);
+      return `https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.5/svg/${match[1]}/${match[3] || "outline"}.svg`;
+    },
+    mutator: (svg) => svg.setAttribute("fill", "currentColor"),
+  });
+};
+
+export const setupShoelace = ({
+  host = window.document,
+}: {
+  host?: Document | ShadowRoot;
+} = {}) => {
+  registerShoelaceIcons();
+  adoptShoelaceStyles(host);
+};