@flamingo-stack/openframe-frontend-core 0.0.691-snapshot.20261001154617 → 0.0.691

package/src/stories/RemoteSessionAccessRequest.stories.tsx

@@ -1,71 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import type React from 'react';
-import { fn } from 'storybook/test';
-
-import {
-  RemoteAccessRequestCard,
-  RemoteSessionScope,
-  type RemoteSessionParty,
-} from '../components/features/remote-session';
-
-/**
- * The end user's consent dialog for a remote access request, shown by the
- * desktop chat in a 600 px always-on-top window. The host owns the request,
- * the delivery ack and the decision call; the card only renders and reports
- * the click.
- */
-
-const party: RemoteSessionParty = {
-  organizationName: 'TechFlow Solutions',
-  organizationSiteUrl: 'https://www.techflow.com',
-  technicianName: 'Mike Rodriguez',
-};
-
-function WindowDecorator(Story: React.ComponentType) {
-  return (
-    <RemoteSessionScope className="w-[600px]">
-      <Story />
-    </RemoteSessionScope>
-  );
-}
-
-const meta = {
-  title: 'Remote Session/Client/Access Request',
-  component: RemoteAccessRequestCard,
-  tags: ['autodocs'],
-  decorators: [WindowDecorator],
-  args: { party, onDecide: fn(), onOpenSite: fn() },
-} satisfies Meta<typeof RemoteAccessRequestCard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** A recorded session: the recording notice above the consent line. */
-export const Recorded: Story = {
-  args: { showRecordingNotice: true },
-};
-
-/** Not recorded: no notice. */
-export const NotRecorded: Story = {
-  args: { showRecordingNotice: false },
-};
-
-/** No site and no logo: the OpenFrame mark, no website button. */
-export const WithoutSite: Story = {
-  args: { party: { organizationName: 'TechFlow Solutions' } },
-};
-
-/** A non-https site is shown but never offered as a link. */
-export const PlainHttpSite: Story = {
-  args: { party: { ...party, organizationSiteUrl: 'http://techflow.local' } },
-};
-
-/** Allow Access sent: both buttons lock, the chosen one spins. */
-export const Allowing: Story = {
-  args: { showRecordingNotice: true, deciding: 'APPROVED' },
-};
-
-/** The decision could not be sent: the error replaces the closing line. */
-export const DecisionFailed: Story = {
-  args: { showRecordingNotice: true, error: 'Could not reach the server. Try again.' },
-};

package/src/stories/RemoteSessionBlock.stories.tsx

@@ -1,164 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import type React from 'react';
-import { useState } from 'react';
-import { fn } from 'storybook/test';
-
-import {
-  RemoteSessionBlockFrame,
-  RemoteSessionChatPanel,
-  RemoteSessionMinimizedChip,
-  RemoteSessionScope,
-  RemoteSessionSummary,
-  type RemoteSessionChatMessage,
-  type RemoteSessionParty,
-} from '../components/features/remote-session';
-
-/**
- * The session block the end user sees while a technician is connected: the
- * summary, the chat with the technician, and the minimized chip. In the
- * desktop chat it lives in its own 440 px window the user can drag around.
- */
-
-const organization: RemoteSessionParty = { organizationName: 'TechFlow Solutions' };
-const technician: RemoteSessionParty = { ...organization, technicianName: 'Mike Rodriguez' };
-
-const minutesAgo = (minutes: number) => new Date(Date.now() - minutes * 60_000);
-
-const messages: RemoteSessionChatMessage[] = [
-  { id: 'm1', author: 'system', text: 'Mike Rodriguez joined the session', at: minutesAgo(6) },
-  { id: 'm2', author: 'technician', text: 'Hi! I can see your screen now.', at: minutesAgo(5) },
-  { id: 'm3', author: 'user', text: 'Great, the printer is the one on the left.', at: minutesAgo(4) },
-  { id: 'm4', author: 'technician', text: 'Got it - reinstalling the driver now.', at: minutesAgo(2) },
-];
-
-function WindowDecorator(Story: React.ComponentType) {
-  return (
-    <RemoteSessionScope>
-      <Story />
-    </RemoteSessionScope>
-  );
-}
-
-const meta = {
-  title: 'Remote Session/Client/Session Block',
-  component: RemoteSessionSummary,
-  tags: ['autodocs'],
-  decorators: [WindowDecorator],
-  args: {
-    party: technician,
-    elapsed: '5:23',
-    showRecordingTag: true,
-    onOpenChat: fn(),
-    onEndSession: fn(),
-  },
-  render: args => (
-    <RemoteSessionBlockFrame onHide={fn()}>
-      <RemoteSessionSummary {...args} dragHandlers={{ onPointerDown: fn() }} />
-    </RemoteSessionBlockFrame>
-  ),
-} satisfies Meta<typeof RemoteSessionSummary>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** A named technician: avatar and "<name> connected". */
-export const Technician: Story = {};
-
-/** No technician name on the session: the organization's logo and "IT support team is connected". */
-export const Organization: Story = {
-  args: { party: organization },
-};
-
-/** Not recorded: no SESSION RECORDING tag. */
-export const NotRecorded: Story = {
-  args: { showRecordingTag: false },
-};
-
-/** A long name truncates before the dragger in the corner. */
-export const LongName: Story = {
-  args: { party: { ...technician, technicianName: 'Maximilian Alexander Rodriguez-Fernandez' } },
-};
-
-/** The chat with the technician, opened from the block. */
-export const Chat: Story = {
-  render: args => {
-    const [draft, setDraft] = useState('');
-    return (
-      <RemoteSessionBlockFrame expanded onHide={fn()}>
-        <RemoteSessionChatPanel
-          party={args.party}
-          elapsed={args.elapsed}
-          showRecordingTag={args.showRecordingTag}
-          messages={messages}
-          draft={draft}
-          onDraftChange={setDraft}
-          onSend={fn()}
-          onCloseChat={fn()}
-          onEndSession={args.onEndSession}
-          dragHandlers={{ onPointerDown: fn() }}
-        />
-      </RemoteSessionBlockFrame>
-    );
-  },
-};
-
-/** The chat while it is still connecting: the composer is disabled. */
-export const ChatConnecting: Story = {
-  render: args => (
-    <RemoteSessionBlockFrame expanded onHide={fn()}>
-      <RemoteSessionChatPanel
-        party={args.party}
-        elapsed={args.elapsed}
-        messages={[]}
-        ready={false}
-        draft=""
-        onDraftChange={fn()}
-        onSend={fn()}
-        onCloseChat={fn()}
-        onEndSession={args.onEndSession}
-      />
-    </RemoteSessionBlockFrame>
-  ),
-};
-
-/** "Hide this Block": the technician's avatar and a chevron to bring the block back. */
-export const MinimizedTechnician: Story = {
-  render: args => <RemoteSessionMinimizedChip party={args.party} onExpand={fn()} />,
-};
-
-/** The minimized chip of the organization variant. */
-export const MinimizedOrganization: Story = {
-  render: () => <RemoteSessionMinimizedChip party={organization} onExpand={fn()} />,
-};
-
-/** The whole block, switching between summary, chat and the chip like the desktop window does. */
-export const Interactive: Story = {
-  render: args => {
-    const [panel, setPanel] = useState<'summary' | 'chat'>('summary');
-    const [minimized, setMinimized] = useState(false);
-    const [draft, setDraft] = useState('');
-    const [thread, setThread] = useState(messages);
-    if (minimized) return <RemoteSessionMinimizedChip party={args.party} onExpand={() => setMinimized(false)} />;
-    return (
-      <RemoteSessionBlockFrame expanded={panel === 'chat'} onHide={() => setMinimized(true)}>
-        {panel === 'summary' ? (
-          <RemoteSessionSummary {...args} onOpenChat={() => setPanel('chat')} />
-        ) : (
-          <RemoteSessionChatPanel
-            party={args.party}
-            elapsed={args.elapsed}
-            showRecordingTag={args.showRecordingTag}
-            messages={thread}
-            draft={draft}
-            onDraftChange={setDraft}
-            onSend={text =>
-              setThread(current => [...current, { id: `m${current.length + 1}`, author: 'user', text, at: new Date() }])
-            }
-            onCloseChat={() => setPanel('summary')}
-            onEndSession={args.onEndSession}
-          />
-        )}
-      </RemoteSessionBlockFrame>
-    );
-  },
-};

package/src/stories/RemoteSessionDialog.stories.tsx

@@ -1,49 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import type React from 'react';
-import { fn } from 'storybook/test';
-
-import { RemoteSessionDialog, RemoteSessionScope } from '../components/features/remote-session';
-
-/** The session's terminal dialogs, each shown by the desktop chat in its own 600 px window. */
-
-function WindowDecorator(Story: React.ComponentType) {
-  return (
-    <RemoteSessionScope className="w-[600px]">
-      <Story />
-    </RemoteSessionScope>
-  );
-}
-
-const meta = {
-  title: 'Remote Session/Client/Dialogs',
-  component: RemoteSessionDialog,
-  tags: ['autodocs'],
-  decorators: [WindowDecorator],
-  args: {
-    variant: 'end-confirm',
-    organizationName: 'TechFlow Solutions',
-    onEndSession: fn(),
-    onClose: fn(),
-  },
-} satisfies Meta<typeof RemoteSessionDialog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** End Session from the block or the pill asks first. */
-export const EndConfirm: Story = {};
-
-/** The end call is in flight. */
-export const Ending: Story = {
-  args: { ending: true },
-};
-
-/** The technician (or the user) ended the session. */
-export const SessionEnded: Story = {
-  args: { variant: 'session-ended' },
-};
-
-/** The relay dropped: the session is over, there is no rejoin. */
-export const ConnectionLost: Story = {
-  args: { variant: 'connection-lost' },
-};

package/src/stories/RemoteSessionIndicator.stories.tsx

@@ -1,44 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { fn } from 'storybook/test';
-
-import { RemoteSessionBorder, RemoteSessionPill, RemoteSessionScope } from '../components/features/remote-session';
-
-/**
- * The always-visible "your screen is being controlled" indicator: the yellow
- * border around every screen and the End Session pill hanging from its top
- * edge. The desktop chat draws each in its own click-through window.
- */
-
-const meta = {
-  title: 'Remote Session/Client/Screen Indicator',
-  component: RemoteSessionPill,
-  tags: ['autodocs'],
-  args: { onEndSession: fn() },
-  decorators: [
-    Story => (
-      <RemoteSessionScope>
-        <Story />
-      </RemoteSessionScope>
-    ),
-  ],
-} satisfies Meta<typeof RemoteSessionPill>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** The pill on its own. */
-export const Pill: Story = {};
-
-/** Border and pill together, on a screen-sized stand-in. */
-export const Screen: Story = {
-  render: args => (
-    <div className="relative h-[360px] w-[640px] bg-ods-bg">
-      <div className="absolute inset-0">
-        <RemoteSessionBorder />
-      </div>
-      <div className="absolute inset-x-0 top-0 flex justify-center">
-        <RemoteSessionPill {...args} />
-      </div>
-    </div>
-  ),
-};