@namostack/cli 0.0.1 → 0.1.0-rc.2

package/templates/vanilla/src/main.ts

@@ -0,0 +1,158 @@
+import {
+  BridgeError,
+  connect,
+  type PluginTheme,
+  type StoredDocument,
+} from '@namostack/plugin-sdk';
+import './style.css';
+
+// seedui's fonts, as in the namostack app.
+import '@fontsource-variable/inter';
+import '@fontsource-variable/source-serif-4';
+
+interface Clicks {
+  count: number;
+}
+
+// Plugins only run inside the namostack app: anywhere else, this throws.
+const namostack = await connect();
+const { context, data, ui, user } = namostack;
+
+function element<T extends HTMLElement = HTMLElement>(id: string): T {
+  return document.getElementById(id) as T;
+}
+
+/** Shows a failed SDK call; a missing permission says how to add it. */
+function showError(target: HTMLElement, error: unknown, permission: string) {
+  target.hidden = false;
+  target.textContent =
+    error instanceof BridgeError && error.code === 'permission_denied'
+      ? `Add "${permission}" to the permissions in namostack.plugin.json.`
+      : error instanceof BridgeError
+        ? error.message
+        : String(error);
+}
+
+/** Follows the app's light or dark mode; style against `[data-mode="dark"]`. */
+function applyTheme({ mode }: PluginTheme) {
+  document.documentElement.dataset.mode = mode;
+  document.documentElement.style.colorScheme = mode;
+}
+
+applyTheme(context.theme);
+namostack.onThemeChange(applyTheme);
+
+// textContent, not innerHTML: these are the developer's and user's own text.
+element('name').textContent = context.name;
+document.querySelector('main')!.hidden = false;
+
+user
+  .getProfile()
+  .then(({ displayName }) => {
+    element('greeting').textContent =
+      `Hi ${displayName}, this is your new plugin.`;
+  })
+  .catch((error: unknown) =>
+    showError(element('greeting-error'), error, 'user:profile:read'),
+  );
+
+// A counter saved for the current user: it survives reloads and devices.
+const count = element('count');
+const increment = element<HTMLButtonElement>('increment');
+const reset = element<HTMLButtonElement>('reset');
+const countError = element('count-error');
+let clicks: StoredDocument<Clicks> | null = null;
+
+function render() {
+  count.textContent = String(clicks?.count ?? 0);
+  reset.disabled = !clicks;
+}
+
+/** Like seedui's `isLoading`: keeps the button's size and swaps its label for a spinner. */
+function setLoading(button: HTMLButtonElement, loading: boolean) {
+  if (loading) {
+    const { width, height } = button.getBoundingClientRect();
+
+    button.dataset.label = button.textContent ?? '';
+    button.style.width = `${width}px`;
+    button.style.height = `${height}px`;
+    button.replaceChildren(
+      Object.assign(document.createElement('div'), { className: 'spinner' }),
+    );
+  } else {
+    button.textContent = button.dataset.label ?? '';
+    button.style.width = '';
+    button.style.height = '';
+  }
+
+  button.ariaBusy = String(loading);
+}
+
+async function run(
+  button: HTMLButtonElement,
+  change: () => Promise<StoredDocument<Clicks> | null>,
+) {
+  const other = button === increment ? reset : increment;
+
+  setLoading(button, true);
+  other.disabled = true;
+  countError.hidden = true;
+
+  try {
+    clicks = await change();
+  } catch (error) {
+    showError(countError, error, 'storage');
+  } finally {
+    setLoading(button, false);
+    increment.disabled = false;
+    render();
+  }
+}
+
+increment.addEventListener('click', () => {
+  if (increment.ariaBusy === 'true') {
+    return;
+  }
+
+  void run(increment, () =>
+    clicks
+      ? data.update<Clicks>('clicks', clicks.id, { count: clicks.count + 1 })
+      : data.insert<Clicks>('clicks', { count: 1 }),
+  );
+});
+
+reset.addEventListener('click', () => {
+  if (reset.ariaBusy === 'true') {
+    return;
+  }
+
+  void run(reset, async () => {
+    if (clicks) {
+      await data.delete('clicks', clicks.id);
+    }
+
+    return null;
+  });
+});
+
+data
+  .find<Clicks>('clicks', { limit: 1 })
+  .then(({ items }) => {
+    clicks = items[0] ?? null;
+  })
+  .catch((error: unknown) => showError(countError, error, 'storage'))
+  .finally(() => {
+    increment.disabled = false;
+    render();
+  });
+
+// Shows a toast in the app, outside the plugin's frame.
+element('notify').addEventListener('click', async () => {
+  element('notify-error').hidden = true;
+
+  try {
+    await ui.notify({ message: 'Hello from your plugin!', tone: 'success' });
+  } catch (error) {
+    showError(element('notify-error'), error, 'ui:notify');
+  }
+});

package/templates/vanilla/src/style.css

@@ -0,0 +1,330 @@
+/* seedui's tokens (seedui.dev), so the plugin looks like the app and the react template. */
+:root {
+  --text: #000;
+  --text-muted: #5a6480;
+  --surface: #fff;
+  --border: #eceef3;
+  --code: #eceef3;
+  --primary: #6344e5;
+  --primary-hover: #7b61ff;
+  --primary-active: #3f2c99;
+  --neutral: #d8dce5;
+  --neutral-hover: #eceef3;
+  --neutral-active: #8b93a5;
+  --transparent-hover: #eceef3;
+  --transparent-active: #b5bbc9;
+  --disabled: #eceef3;
+  --disabled-text: #d8dce5;
+  --disabled-transparent-text: #d8dce5;
+  --tag: #eceef3;
+  --tag-text: #5a6480;
+  --error: #d42b2b;
+  --focus-gap: #fff;
+  --shadow: 0 2px 8px rgb(0 0 0 / 10%), 0 1px 3px rgb(0 0 0 / 6%);
+}
+
+:root[data-mode='dark'] {
+  --text: #fff;
+  --text-muted: #959fbc;
+  --surface: #1b1f25;
+  --border: #2e333c;
+  --code: #2e333c;
+  --primary: #7b61ff;
+  --primary-hover: #42357a;
+  --primary-active: #332b60;
+  --neutral: #3c414d;
+  --neutral-hover: #4f5565;
+  --neutral-active: #252930;
+  --transparent-hover: #252930;
+  --transparent-active: #252930;
+  --disabled: #2e333c;
+  --disabled-text: #3c414d;
+  --disabled-transparent-text: #2e333c;
+  --tag: #2e333c;
+  --tag-text: #798199;
+  --error: #e86060;
+  --focus-gap: #1b1f25;
+  --shadow: 0 2px 8px rgb(0 0 0 / 30%), 0 1px 3px rgb(0 0 0 / 25%);
+}
+
+body {
+  margin: 0;
+  color: var(--text);
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/* Text: seedui's h3, h5, h2, p and caption. */
+h1,
+h2,
+p {
+  margin: 0;
+}
+
+.h3,
+.h2 {
+  font-family: 'Source Serif 4 Variable', serif;
+  font-weight: 600;
+}
+
+.h3 {
+  font-size: 36px;
+  line-height: 44px;
+  letter-spacing: -0.01em;
+}
+
+.h2 {
+  font-size: 44px;
+  line-height: 54px;
+  letter-spacing: -0.02em;
+}
+
+.h5,
+.p,
+.caption,
+.button {
+  font-family: 'Inter Variable';
+}
+
+.h5 {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+.p {
+  font-size: 14px;
+  line-height: 23px;
+}
+
+.caption {
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.01em;
+}
+
+.muted {
+  color: var(--text-muted);
+}
+
+.error {
+  color: var(--error);
+}
+
+code {
+  padding: 1px 6px;
+  border-radius: 2px;
+  background: var(--code);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875em;
+}
+
+a {
+  color: var(--primary);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Layout */
+.page {
+  max-width: 560px;
+  margin: 0 auto;
+  padding: 40px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.icon {
+  width: 56px;
+  height: 56px;
+  flex-shrink: 0;
+}
+
+/* seedui's outlined Card, padding 20. */
+.card {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+}
+
+.card-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* seedui's small neutral Tag. */
+.tag {
+  display: flex;
+  align-items: center;
+  padding: 7px 8px;
+  border-radius: 9999px;
+  background: var(--tag);
+  color: var(--tag-text);
+  font-family: 'Inter Variable';
+  font-size: 12px;
+  line-height: 12px;
+  letter-spacing: 0.01em;
+}
+
+/* seedui's md Button: filled primary, filled neutral, transparent neutral. */
+.button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 8px;
+  background: var(--primary);
+  color: #fff;
+  font-size: 14px;
+  line-height: 23px;
+}
+
+.button:hover {
+  background: var(--primary-hover);
+  cursor: pointer;
+}
+
+.button:active {
+  background: var(--primary-active);
+  transform: scale(0.95);
+}
+
+.button:focus {
+  outline: none;
+}
+
+.button:focus-visible {
+  box-shadow:
+    0 0 0 1px var(--focus-gap),
+    0 0 0 3px var(--primary);
+}
+
+.button-neutral {
+  background: var(--neutral);
+  color: var(--text);
+}
+
+.button-neutral:hover {
+  background: var(--neutral-hover);
+}
+
+.button-neutral:active {
+  background: var(--neutral-active);
+}
+
+.button-transparent {
+  background: transparent;
+  color: var(--text);
+}
+
+.button-transparent:hover {
+  background: var(--transparent-hover);
+}
+
+.button-transparent:active {
+  background: var(--transparent-active);
+}
+
+.button:disabled {
+  background: var(--disabled);
+  color: var(--disabled-text);
+  cursor: default;
+  transform: none;
+}
+
+.button-transparent:disabled {
+  background: transparent;
+  color: var(--disabled-transparent-text);
+}
+
+/* While loading, a button keeps its size and shows seedui's spinner. */
+.button[aria-busy='true'] {
+  cursor: default;
+  transform: none;
+}
+
+.spinner {
+  width: 16px;
+  padding: 3px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--primary);
+  --mask:
+    conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+  mask: var(--mask);
+  mask-composite: subtract;
+  animation: spin 1s infinite linear;
+}
+
+.button:not(.button-neutral, .button-transparent) .spinner {
+  background: #fff;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+/* seedui's breakpoints: tablet below 960px, mobile below 600px. */
+@media only screen and (max-width: 960px) {
+  .h3 {
+    font-size: 30px;
+    line-height: 38px;
+  }
+
+  .h2 {
+    font-size: 36px;
+    line-height: 44px;
+  }
+
+  .h5 {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .h3 {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .h2 {
+    font-size: 26px;
+    line-height: 34px;
+  }
+}
+
+@media (max-width: 599.98px) {
+  .page {
+    padding: 24px 16px;
+  }
+}

package/templates/vanilla/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "types": ["vite/client"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/vanilla/vite.config.ts

@@ -0,0 +1,6 @@
+import { namostackPlugin } from '@namostack/plugin-sdk/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [namostackPlugin()],
+});