@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/document/document.stories.ts

@@ -0,0 +1,266 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './document.component.js';
+
+const meta: Meta = {
+  title: 'Nuraly/Media/Document',
+  component: 'nr-document',
+  tags: ['autodocs'],
+  argTypes: {
+    src: {
+      control: 'text',
+      description: 'Document source URL',
+    },
+    type: {
+      control: 'select',
+      options: ['pdf', 'image', 'other'],
+      description: 'Document type',
+    },
+    width: {
+      control: 'text',
+      description: 'Document width',
+    },
+    height: {
+      control: 'text',
+      description: 'Document height',
+    },
+    previewable: {
+      control: 'boolean',
+      description: 'Whether document is previewable (fullscreen)',
+    },
+    block: {
+      control: 'boolean',
+      description: 'Display as block element',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  args: {
+    src: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    type: 'pdf',
+    width: 'auto',
+    height: '500px',
+  },
+  render: (args) => html`
+    <nr-document
+      src=${args.src}
+      type=${args.type || 'pdf'}
+      width=${args.width}
+      height=${args.height}
+      ?previewable=${args.previewable}
+      ?block=${args.block}
+    ></nr-document>
+  `,
+};
+
+export const PDFDocument: Story = {
+  args: {
+    src: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    type: 'pdf',
+    width: '800px',
+    height: '600px',
+  },
+  render: (args) => html`
+    <nr-document
+      src=${args.src}
+      type=${args.type}
+      width=${args.width}
+      height=${args.height}
+    ></nr-document>
+  `,
+};
+
+export const WithFullscreenPreview: Story = {
+  args: {
+    src: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    type: 'pdf',
+    width: '800px',
+    height: '600px',
+    previewable: true,
+  },
+  render: (args) => html`
+    <nr-document
+      src=${args.src}
+      type=${args.type}
+      width=${args.width}
+      height=${args.height}
+      ?previewable=${args.previewable}
+    ></nr-document>
+  `,
+};
+
+export const BlockDisplay: Story = {
+  args: {
+    src: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    type: 'pdf',
+    block: true,
+    width: '100%',
+    height: '600px',
+  },
+  render: (args) => html`
+    <nr-document
+      src=${args.src}
+      type=${args.type}
+      width=${args.width}
+      height=${args.height}
+      ?block=${args.block}
+    ></nr-document>
+  `,
+};
+
+export const CustomDimensions: Story = {
+  render: () => html`
+    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+      <div>
+        <h3 style="margin: 0 0 8px 0;">Small (400x300)</h3>
+        <nr-document
+          src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
+          type="pdf"
+          width="400px"
+          height="300px"
+        ></nr-document>
+      </div>
+      <div>
+        <h3 style="margin: 0 0 8px 0;">Large (600x450)</h3>
+        <nr-document
+          src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
+          type="pdf"
+          width="600px"
+          height="450px"
+        ></nr-document>
+      </div>
+    </div>
+  `,
+};
+
+export const WithEventHandlers: Story = {
+  args: {
+    src: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    type: 'pdf',
+    width: '800px',
+    height: '600px',
+  },
+  render: (args) => html`
+    <div>
+      <nr-document
+        src=${args.src}
+        type=${args.type}
+        width=${args.width}
+        height=${args.height}
+        @nr-document-load=${(e: CustomEvent) => console.log('Document loaded:', e.detail)}
+        @nr-document-error=${(e: CustomEvent) => console.log('Document error:', e.detail)}
+        @nr-document-preview-open=${(e: CustomEvent) => console.log('Preview opened:', e.detail)}
+        @nr-document-preview-close=${(e: CustomEvent) => console.log('Preview closed:', e.detail)}
+      ></nr-document>
+      <p style="margin-top: 16px; color: #666; font-size: 14px;">
+        Check the console for event logs
+      </p>
+    </div>
+  `,
+};
+
+export const ErrorState: Story = {
+  args: {
+    src: 'https://invalid-document-url.example.com/document.pdf',
+    type: 'pdf',
+    width: '800px',
+    height: '600px',
+  },
+  render: (args) => html`
+    <nr-document
+      src=${args.src}
+      type=${args.type}
+      width=${args.width}
+      height=${args.height}
+    ></nr-document>
+  `,
+};
+
+export const EmbeddedGoogleDoc: Story = {
+  args: {
+    src: 'https://docs.google.com/document/d/e/2PACX-1vQGfk-VHhJQhZ5VZJ8EqP-T6YU5pZZ5aJ5aJ5aJ5aJ5aJ5aJ5aJ5aJ5aJ5aJ5aJ5aJ5aJ5aJ5aJ5aJ5aJ5aJ5aJ5aJ5aJ/pub?embedded=true',
+    type: 'other',
+    width: '100%',
+    height: '600px',
+  },
+  render: (args) => html`
+    <nr-document
+      src=${args.src}
+      type=${args.type}
+      width=${args.width}
+      height=${args.height}
+      block
+    ></nr-document>
+  `,
+};
+
+export const ResponsiveLayout: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <nr-document
+        src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
+        type="pdf"
+        width="100%"
+        height="400px"
+        block
+      ></nr-document>
+      <p style="color: #666; font-size: 14px; margin: 0;">
+        This document viewer adapts to its container width
+      </p>
+    </div>
+  `,
+};
+
+export const MultipleDocuments: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px;">
+      <div>
+        <h3 style="margin: 0 0 8px 0;">Document 1</h3>
+        <nr-document
+          src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
+          type="pdf"
+          width="100%"
+          height="400px"
+          block
+          previewable
+        ></nr-document>
+      </div>
+      <div>
+        <h3 style="margin: 0 0 8px 0;">Document 2</h3>
+        <nr-document
+          src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
+          type="pdf"
+          width="100%"
+          height="400px"
+          block
+          previewable
+        ></nr-document>
+      </div>
+    </div>
+  `,
+};
+
+export const InCard: Story = {
+  render: () => html`
+    <div style="max-width: 800px; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; background: white;">
+      <h2 style="margin: 0 0 16px 0;">Project Documentation</h2>
+      <nr-document
+        src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
+        type="pdf"
+        width="100%"
+        height="500px"
+        block
+        previewable
+      ></nr-document>
+      <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e0e0e0;">
+        <button style="padding: 8px 16px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer;">
+          Download PDF
+        </button>
+      </div>
+    </div>
+  `,
+};

package/components/ui/nuraly-ui/src/components/document/document.style.ts

@@ -0,0 +1,210 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: block;
+  }
+
+  .document-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background-color: #f5f5f5;
+  }
+
+  .document-iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    flex: 1;
+  }
+
+  .error-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 2rem;
+    text-align: center;
+  }
+
+  .error-icon {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 1rem;
+  }
+
+  .preview-button {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 8px 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    z-index: 10;
+  }
+
+  .preview-button:hover {
+    background-color: #fff;
+  }
+  
+  .pdf-container {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: #f5f5f5;
+    position: relative;
+  }
+  
+  .toolbar {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    background-color: #f0f0f0;
+    border-bottom: 1px solid #ddd;
+    gap: 8px;
+  }
+  
+  .toolbar button {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 4px 8px;
+    cursor: pointer;
+    font-size: 14px;
+  }
+  
+  .toolbar button:hover {
+    background-color: #e6e6e6;
+  }
+  
+  .toolbar button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  .toolbar span {
+    margin: 0 4px;
+    font-size: 14px;
+  }
+  
+  .canvas-container {
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    background-color: #e0e0e0;
+    padding: 16px;
+    min-height: 200px;
+  }
+  
+  canvas {
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    background-color: white;
+  }
+  
+  .preview-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .preview-modal iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+  
+  .preview-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 90%;
+    height: 90%;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  
+  .preview-toolbar {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+    background-color: #f0f0f0;
+    border-bottom: 1px solid #ddd;
+    gap: 12px;
+  }
+  
+  .preview-toolbar button {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 6px 12px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+  
+  .preview-toolbar span {
+    margin: 0 6px;
+    font-size: 16px;
+  }
+  
+  .preview-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    font-size: 24px;
+    cursor: pointer;
+    z-index: 1010;
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .preview-close:hover {
+    background-color: #fff;
+    color: #000;
+  }
+
+  .preview-header {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1010;
+    padding: 10px;
+  }
+  
+  .preview-modal canvas {
+    max-width: 100%;
+    max-height: calc(100% - 60px); /* Account for toolbar height */
+    object-fit: contain;
+    margin: auto;
+    display: block;
+    flex: 1;
+  }
+`;

package/components/ui/nuraly-ui/src/components/document/document.types.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Document viewer type
+ */
+export const enum DocumentType {
+  /** PDF document */
+  PDF = 'pdf',
+  /** Image document */
+  Image = 'image',
+  /** Other/unknown type */
+  Other = 'other',
+}
+
+/**
+ * Document fit mode
+ */
+export const enum DocumentFit {
+  /** Fit to width */
+  Width = 'width',
+  /** Fit to height */
+  Height = 'height',
+  /** Fit to page */
+  Page = 'page',
+  /** Auto fit */
+  Auto = 'auto',
+}
+
+/**
+ * Document configuration interface
+ */
+export interface DocumentConfig {
+  /** Document source URL */
+  src: string;
+  
+  /** Document type */
+  type?: DocumentType;
+  
+  /** Fallback document URL or image */
+  fallback?: string;
+  
+  /** Document width */
+  width?: string | number;
+  
+  /** Document height */
+  height?: string | number;
+  
+  /** Whether document is previewable (fullscreen) */
+  previewable?: boolean;
+  
+  /** Fit mode for document display */
+  fit?: DocumentFit;
+  
+  /** Custom CSS class */
+  customClass?: string;
+  
+  /** Callback when document loads */
+  onLoad?: () => void;
+  
+  /** Callback when document fails to load */
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Document event detail
+ */
+export interface DocumentEventDetail {
+  /** Original event */
+  originalEvent?: Event;
+  
+  /** Error message if applicable */
+  error?: string;
+  
+  /** Document source */
+  src?: string;
+  
+  /** Document type */
+  type?: DocumentType;
+}

package/components/ui/nuraly-ui/src/components/document/index.ts

@@ -0,0 +1,2 @@
+export * from './document.component.js';
+export * from './document.types.js';

package/components/ui/nuraly-ui/src/components/document/react.ts

@@ -0,0 +1,15 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrDocumentElement } from './document.component.js';
+
+export const NrDocument = createComponent({
+  tagName: 'nr-document',
+  elementClass: NrDocumentElement,
+  react: React,
+  events: {
+    onLoad: 'nr-document-load',
+    onError: 'nr-document-error',
+    onPreviewOpen: 'nr-document-preview-open',
+    onPreviewClose: 'nr-document-preview-close',
+  },
+});

package/components/ui/nuraly-ui/src/components/dropdown/controllers/base.controller.ts

@@ -0,0 +1,85 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { DropdownBaseController, DropdownHost, ErrorHandler } from '../interfaces/index.js';
+
+/**
+ * Abstract base controller class that implements common functionality
+ * for all dropdown component controllers
+ */
+export abstract class BaseDropdownController implements DropdownBaseController, ReactiveController, ErrorHandler {
+  protected _host: DropdownHost & ReactiveControllerHost;
+
+  constructor(host: DropdownHost & ReactiveControllerHost) {
+    this._host = host;
+    this._host.addController(this);
+  }
+
+  /**
+   * Get the host element
+   */
+  get host(): DropdownHost {
+    return this._host;
+  }
+
+  /**
+   * Reactive controller lifecycle - called when host connects
+   */
+  hostConnected(): void {
+    // Override in subclasses if needed
+  }
+
+  /**
+   * Reactive controller lifecycle - called when host disconnects
+   */
+  hostDisconnected(): void {
+    // Override in subclasses if needed
+  }
+
+  /**
+   * Reactive controller lifecycle - called when host updates
+   */
+  hostUpdate(): void {
+    // Override in subclasses if needed
+  }
+
+  /**
+   * Reactive controller lifecycle - called after host updates
+   */
+  hostUpdated(): void {
+    // Override in subclasses if needed
+  }
+
+  /**
+   * Request host to update
+   */
+  protected requestUpdate(): void {
+    this._host.requestUpdate();
+  }
+
+  /**
+   * Dispatch a custom event from the host
+   */
+  protected dispatchEvent(event: CustomEvent): boolean {
+    return (this._host as unknown as EventTarget).dispatchEvent(event);
+  }
+
+  /**
+   * Handle errors in a consistent way
+   */
+  handleError(error: Error, context: string): void {
+    console.error(`Dropdown Controller Error in ${context}:`, error);
+  }
+
+  /**
+   * Find elements in the host's shadow DOM
+   */
+  protected findElement(selector: string): HTMLElement | null {
+    return this._host.shadowRoot?.querySelector(selector) as HTMLElement | null;
+  }
+
+  /**
+   * Find multiple elements in the host's shadow DOM
+   */
+  protected findElements(selector: string): NodeListOf<HTMLElement> {
+    return this._host.shadowRoot?.querySelectorAll(selector) as NodeListOf<HTMLElement>;
+  }
+}