Include widgets in README, setup storybook

2026-04-15 04:12:32 +02:00
parent 8b1f22d573
commit 299036eced
12 changed files with 4079 additions and 1 deletions
@@ -0,0 +1,38 @@
+import { html } from 'lit';
+
+import '../js/ai-assist-bar.js';
+
+const meta = {
+  title: 'Widgets/AI Assist Bar',
+  tags: ['autodocs'],
+  argTypes: {
+    mode: {
+      control: 'radio',
+      options: ['project', 'frontpage'],
+    },
+  },
+  args: {
+    mode: 'project',
+  },
+  render: ({ mode }) => html`
+    <div class="story-stack">
+      <p class="story-heading">Interactive Preview</p>
+      <p class="story-note">
+        Use the controls panel to switch the widget context. The component itself is live,
+        so you can type into it, change the fake model, and submit to watch its loading and
+        reveal states.
+      </p>
+      <ai-assist-bar mode=${mode}></ai-assist-bar>
+    </div>
+  `,
+};
+
+export default meta;
+
+export const Default = {};
+
+export const Frontpage = {
+  args: {
+    mode: 'frontpage',
+  },
+};
@@ -0,0 +1,40 @@
+import { html } from 'lit';
+
+import '../js/ai-assist-clippy.js';
+
+const meta = {
+  title: 'Widgets/AI Assist Clippy',
+  tags: ['autodocs'],
+  argTypes: {
+    mode: {
+      control: 'radio',
+      options: ['commenter', 'uploader'],
+    },
+  },
+  args: {
+    mode: 'commenter',
+  },
+  render: ({ mode }) => html`
+    <div class="story-stack">
+      <p class="story-heading">Interactive Preview</p>
+      <p class="story-note">
+        Click the orb to trigger the speech bubble immediately, or wait a few seconds for it
+        to pop on its own. Change the mode in controls to swap between commenter and uploader
+        suggestion sets.
+      </p>
+      <div class="story-clippy-row">
+        <ai-assist-clippy mode=${mode}></ai-assist-clippy>
+      </div>
+    </div>
+  `,
+};
+
+export default meta;
+
+export const Default = {};
+
+export const Uploader = {
+  args: {
+    mode: 'uploader',
+  },
+};
@@ -0,0 +1,62 @@
+:root {
+  color-scheme: dark;
+  --panel-bg-color: #161d27;
+  --input-bg-color: #0d131c;
+  --input-color: #e8ecf3;
+  --body-color: #c6d0de;
+  --border-color: #314154;
+  --link-color: #f59e0b;
+}
+
+body {
+  margin: 0;
+  font-family: Georgia, 'Times New Roman', serif;
+  background:
+    radial-gradient(circle at top, rgba(245, 158, 11, 0.08), transparent 30%),
+    linear-gradient(180deg, #081018 0%, #0f1720 100%);
+  color: var(--body-color);
+}
+
+.story-shell {
+  min-width: min(92vw, 960px);
+  padding: 32px;
+}
+
+.story-surface {
+  padding: 28px;
+  border-radius: 28px;
+  border: 1px solid rgba(245, 158, 11, 0.16);
+  background:
+    linear-gradient(180deg, rgba(245, 158, 11, 0.06), transparent 28%),
+    rgba(12, 18, 27, 0.92);
+  box-shadow:
+    0 24px 80px rgba(0, 0, 0, 0.35),
+    inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.story-stack {
+  display: grid;
+  gap: 20px;
+}
+
+.story-heading {
+  margin: 0;
+  font-size: 12px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: #f2c572;
+}
+
+.story-note {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  max-width: 68ch;
+  color: rgba(232, 236, 243, 0.76);
+}
+
+.story-clippy-row {
+  display: flex;
+  align-items: flex-end;
+  min-height: 220px;
+}