@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/image/image.component.ts

@@ -0,0 +1,136 @@
+import { html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import styles from "./image.style.js";
+import { ImageFit } from "./image.types.js";
+
+@customElement('nr-image')
+export class NrImageElement extends NuralyUIBaseMixin(LitElement) {
+  static override styles = styles;
+
+  @property({ type: String })
+  src!: string;
+
+  @property({ type: String })
+  fallback?: string;
+
+  @property({ type: String })
+  width = 'auto';
+
+  @property({ type: String })
+  height = 'auto';
+
+  @property({ type: String })
+  alt = '';
+
+  @property({ type: Boolean })
+  previewable = false;
+
+  @property({ type: String })
+  fit?: ImageFit;
+
+  @property({ type: Boolean, reflect: true })
+  block = false;
+
+  @state()
+  private currentSrc = '';
+
+  @state()
+  private showPreview = false;
+
+  @state()
+  private hasError = false;
+
+  private readonly defaultFallback = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg==';
+
+  override willUpdate(changedProperties: PropertyValues): void {
+    if (changedProperties.has('src')) {
+      this.currentSrc = this.src;
+      this.hasError = false;
+    }
+  }
+
+  private handleError() {
+    this.hasError = true;
+    this.dispatchEvent(new CustomEvent('nr-image-error', {
+      bubbles: true,
+      composed: true,
+      detail: { error: `Error loading image: ${this.currentSrc}`, src: this.currentSrc }
+    }));
+    if (this.fallback && this.currentSrc !== this.fallback && this.currentSrc !== this.defaultFallback) {
+      this.currentSrc = this.fallback;
+    } else if (this.currentSrc !== this.defaultFallback) {
+      this.currentSrc = this.defaultFallback;
+    }
+  }
+
+  private handleLoad() {
+    this.hasError = false;
+    this.dispatchEvent(new CustomEvent('nr-image-load', {
+      bubbles: true,
+      composed: true,
+      detail: { src: this.currentSrc }
+    }));
+  }
+
+  private showPreviewModal() {
+    if (this.previewable && !this.hasError) {
+      this.showPreview = true;
+      this.dispatchEvent(new CustomEvent('nr-image-preview-open', {
+        bubbles: true,
+        composed: true,
+        detail: { src: this.currentSrc }
+      }));
+    }
+  }
+
+  private closePreviewModal() {
+    this.showPreview = false;
+    this.dispatchEvent(new CustomEvent('nr-image-preview-close', {
+      bubbles: true,
+      composed: true,
+      detail: { src: this.currentSrc }
+    }));
+  }
+
+  override render() {
+    const containerClasses = {
+      'image-container': true,
+      'image--previewable': this.previewable,
+      'image--error': this.hasError
+    };
+    const imageStyles: Record<string, string> = {
+      width: typeof this.width === 'number' ? `${this.width}px` : this.width,
+      height: typeof this.height === 'number' ? `${this.height}px` : this.height,
+    };
+    if (this.fit) {
+      imageStyles['object-fit'] = this.fit;
+    }
+    return html`
+      <div class=${classMap(containerClasses)}>
+        <img
+          src=${this.currentSrc}
+          alt=${this.alt}
+          style=${styleMap(imageStyles)}
+          @error=${this.handleError}
+          @load=${this.handleLoad}
+          @click=${this.showPreviewModal}
+        />
+        ${this.showPreview ? html`
+          <div class="preview-modal" @click=${this.closePreviewModal}>
+            <button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
+            <img src="${this.currentSrc}" alt="${this.alt}" />
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nr-image': NrImageElement;
+  }
+}

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

@@ -0,0 +1,236 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './image.component.js';
+
+const meta: Meta = {
+  title: 'Nuraly/Media/Image',
+  component: 'nr-image',
+  tags: ['autodocs'],
+  argTypes: {
+    src: {
+      control: 'text',
+      description: 'Image source URL',
+    },
+    fallback: {
+      control: 'text',
+      description: 'Fallback image URL when loading fails',
+    },
+    width: {
+      control: 'text',
+      description: 'Image width (auto, px, %, etc.)',
+    },
+    height: {
+      control: 'text',
+      description: 'Image height (auto, px, %, etc.)',
+    },
+    alt: {
+      control: 'text',
+      description: 'Alternative text for the image',
+    },
+    previewable: {
+      control: 'boolean',
+      description: 'Whether the image is previewable (clickable to show fullscreen)',
+    },
+    fit: {
+      control: 'select',
+      options: ['none', 'fill', 'contain', 'cover', 'scale-down'],
+      description: 'Object-fit CSS property value',
+    },
+    block: {
+      control: 'boolean',
+      description: 'Display as block element',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800',
+    alt: 'Mountain landscape',
+    width: 'auto',
+    height: 'auto',
+  },
+  render: (args) => html`
+    <nr-image
+      src=${args.src}
+      alt=${args.alt}
+      width=${args.width}
+      height=${args.height}
+      ?previewable=${args.previewable}
+      ?block=${args.block}
+      fit=${args.fit || 'none'}
+    ></nr-image>
+  `,
+};
+
+export const WithPreview: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800',
+    alt: 'Mountain landscape - Click to preview',
+    previewable: true,
+    width: '400px',
+    height: '300px',
+  },
+  render: (args) => html`
+    <nr-image
+      src=${args.src}
+      alt=${args.alt}
+      width=${args.width}
+      height=${args.height}
+      ?previewable=${args.previewable}
+    ></nr-image>
+  `,
+};
+
+export const WithFallback: Story = {
+  args: {
+    src: 'https://invalid-url.example.com/image.jpg',
+    fallback: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',
+    alt: 'Image with fallback',
+    width: '400px',
+    height: '300px',
+  },
+  render: (args) => html`
+    <nr-image
+      src=${args.src}
+      fallback=${args.fallback}
+      alt=${args.alt}
+      width=${args.width}
+      height=${args.height}
+    ></nr-image>
+  `,
+};
+
+export const ObjectFitCover: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800',
+    alt: 'Cover fit',
+    width: '400px',
+    height: '300px',
+    fit: 'cover',
+  },
+  render: (args) => html`
+    <nr-image
+      src=${args.src}
+      alt=${args.alt}
+      width=${args.width}
+      height=${args.height}
+      fit=${args.fit}
+    ></nr-image>
+  `,
+};
+
+export const ObjectFitContain: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800',
+    alt: 'Contain fit',
+    width: '400px',
+    height: '300px',
+    fit: 'contain',
+  },
+  render: (args) => html`
+    <div style="background: #f0f0f0; padding: 20px;">
+      <nr-image
+        src=${args.src}
+        alt=${args.alt}
+        width=${args.width}
+        height=${args.height}
+        fit=${args.fit}
+      ></nr-image>
+    </div>
+  `,
+};
+
+export const BlockDisplay: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800',
+    alt: 'Block display image',
+    block: true,
+    width: '100%',
+    height: 'auto',
+  },
+  render: (args) => html`
+    <nr-image
+      src=${args.src}
+      alt=${args.alt}
+      width=${args.width}
+      height=${args.height}
+      ?block=${args.block}
+    ></nr-image>
+  `,
+};
+
+export const MultipleImages: Story = {
+  render: () => html`
+    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
+      <nr-image
+        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400"
+        alt="Mountain 1"
+        width="100%"
+        height="200px"
+        fit="cover"
+        previewable
+      ></nr-image>
+      <nr-image
+        src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=400"
+        alt="Mountain 2"
+        width="100%"
+        height="200px"
+        fit="cover"
+        previewable
+      ></nr-image>
+      <nr-image
+        src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=400"
+        alt="Mountain 3"
+        width="100%"
+        height="200px"
+        fit="cover"
+        previewable
+      ></nr-image>
+    </div>
+  `,
+};
+
+export const WithEventHandlers: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800',
+    alt: 'Image with events',
+    width: '400px',
+    height: '300px',
+  },
+  render: (args) => html`
+    <div>
+      <nr-image
+        src=${args.src}
+        alt=${args.alt}
+        width=${args.width}
+        height=${args.height}
+        @nr-image-load=${(e: CustomEvent) => console.log('Image loaded:', e.detail)}
+        @nr-image-error=${(e: CustomEvent) => console.log('Image error:', e.detail)}
+      ></nr-image>
+      <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-url-that-will-fail.example.com/image.jpg',
+    alt: 'This image will fail to load',
+    width: '400px',
+    height: '300px',
+  },
+  render: (args) => html`
+    <nr-image
+      src=${args.src}
+      alt=${args.alt}
+      width=${args.width}
+      height=${args.height}
+    ></nr-image>
+  `,
+};

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

@@ -0,0 +1,83 @@
+import { css } from "lit";
+
+export  default css`
+img{
+    border-top-left-radius:var(--nuraly-image-border-top-left-radius,var(--nuraly-image-local-border-top-left-radius)) ;
+    border-top-right-radius: var(--nuraly-image-border-top-right-radius,var(--nuraly-image-local-border-top-right-radius));
+    border-bottom-left-radius: var(--nuraly-image-border-bottom-left-radius,var(--nuraly-image-local-border-bottom-left-radius));
+    border-bottom-right-radius: var(--nuraly-image-border-bottom-right-radius,var(--nuraly-image-local-border-bottom-right-radius));
+}
+.image-container {
+    position: relative;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+  }
+
+  .preview-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+    animation: fadeIn 0.3s ease;
+  }
+
+  .preview-modal img {
+    max-width: 90%;
+    max-height: 90%;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    animation: zoomIn 0.3s ease;
+  }
+
+  .preview-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 40px;
+    height: 40px;
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    border-radius: 50%;
+    color: white;
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.3s;
+  }
+
+  .preview-close:hover {
+    background: rgba(255, 255, 255, 0.4);
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes zoomIn {
+    from {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+`

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

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Image fit modes
+ */
+export const enum ImageFit {
+  /** Default behavior, no scaling */
+  None = 'none',
+  /** The content is sized to fill the element's box */
+  Fill = 'fill',
+  /** The content is sized to maintain its aspect ratio while fitting within the element's box */
+  Contain = 'contain',
+  /** The content is sized to maintain its aspect ratio while filling the element's entire box */
+  Cover = 'cover',
+  /** The content is sized as if none or contain were specified */
+  ScaleDown = 'scale-down',
+}
+
+/**
+ * Image placeholder type
+ */
+export const enum ImagePlaceholder {
+  /** Default placeholder icon */
+  Default = 'default',
+  /** Custom placeholder */
+  Custom = 'custom',
+}
+
+/**
+ * Image configuration interface
+ */
+export interface ImageConfig {
+  /** Image source URL */
+  src: string;
+  
+  /** Fallback image URL when loading fails */
+  fallback?: string;
+  
+  /** Image width */
+  width?: string | number;
+  
+  /** Image height */
+  height?: string | number;
+  
+  /** Alternative text for the image */
+  alt?: string;
+  
+  /** Whether the image is previewable (clickable to show fullscreen) */
+  previewable?: boolean;
+  
+  /** Object-fit CSS property value */
+  fit?: ImageFit;
+  
+  /** Whether to show a placeholder while loading */
+  placeholder?: boolean | string;
+  
+  /** Custom CSS class */
+  customClass?: string;
+  
+  /** Callback when image loads successfully */
+  onLoad?: () => void;
+  
+  /** Callback when image fails to load */
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Image event detail
+ */
+export interface ImageEventDetail {
+  /** Original event */
+  originalEvent?: Event;
+  
+  /** Error message if applicable */
+  error?: string;
+  
+  /** Image source */
+  src?: string;
+}

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

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

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

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