@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/iconpicker/icon-picker.stories.ts

@@ -0,0 +1,255 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { html } from 'lit';
+import './icon-picker.component.js';
+
+export default {
+  title: 'Forms/Icon Picker',
+  component: 'nr-icon-picker',
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'Selected icon name',
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Component size',
+    },
+    placement: {
+      control: 'select',
+      options: ['auto', 'top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end'],
+      description: 'Dropdown placement',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the component',
+    },
+    showSearch: {
+      control: 'boolean',
+      description: 'Show search input',
+    },
+    showClear: {
+      control: 'boolean',
+      description: 'Show clear button',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text',
+    },
+  },
+};
+
+/**
+ * Default icon picker
+ */
+export const Default = {
+  render: () => html`
+    <nr-icon-picker
+      @nr-icon-picker-change=${(e: CustomEvent) => {
+        console.log('Icon changed:', e.detail);
+      }}
+    ></nr-icon-picker>
+  `,
+};
+
+/**
+ * Icon picker with initial value
+ */
+export const WithValue = {
+  render: () => html`
+    <nr-icon-picker value="heart"></nr-icon-picker>
+  `,
+};
+
+/**
+ * Icon picker sizes
+ */
+export const Sizes = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 16px; align-items: flex-start;">
+      <div>
+        <label style="display: block; margin-bottom: 8px; font-weight: 500;">Small</label>
+        <nr-icon-picker size="small" value="star"></nr-icon-picker>
+      </div>
+      <div>
+        <label style="display: block; margin-bottom: 8px; font-weight: 500;">Medium (Default)</label>
+        <nr-icon-picker size="medium" value="heart"></nr-icon-picker>
+      </div>
+      <div>
+        <label style="display: block; margin-bottom: 8px; font-weight: 500;">Large</label>
+        <nr-icon-picker size="large" value="home"></nr-icon-picker>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Different placements
+ */
+export const Placements = {
+  render: () => html`
+    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 100px;">
+      <nr-icon-picker placement="top" value="arrow-up" placeholder="Top"></nr-icon-picker>
+      <nr-icon-picker placement="top-start" value="arrow-up" placeholder="Top Start"></nr-icon-picker>
+      <nr-icon-picker placement="top-end" value="arrow-up" placeholder="Top End"></nr-icon-picker>
+      <nr-icon-picker placement="bottom" value="arrow-down" placeholder="Bottom"></nr-icon-picker>
+      <nr-icon-picker placement="bottom-start" value="arrow-down" placeholder="Bottom Start"></nr-icon-picker>
+      <nr-icon-picker placement="bottom-end" value="arrow-down" placeholder="Bottom End"></nr-icon-picker>
+    </div>
+  `,
+};
+
+/**
+ * Disabled state
+ */
+export const Disabled = {
+  render: () => html`
+    <nr-icon-picker value="lock" disabled></nr-icon-picker>
+  `,
+};
+
+/**
+ * Without search
+ */
+export const WithoutSearch = {
+  render: () => html`
+    <nr-icon-picker .showSearch=${false} value="search"></nr-icon-picker>
+  `,
+};
+
+/**
+ * Without clear button
+ */
+export const WithoutClear = {
+  render: () => html`
+    <nr-icon-picker .showClear=${false} value="times"></nr-icon-picker>
+  `,
+};
+
+/**
+ * Custom placeholder
+ */
+export const CustomPlaceholder = {
+  render: () => html`
+    <nr-icon-picker placeholder="Choose an icon..."></nr-icon-picker>
+  `,
+};
+
+/**
+ * Custom styling
+ */
+export const CustomStyling = {
+  render: () => html`
+    <nr-icon-picker
+      value="palette"
+      style="
+        --icon-picker-dropdown-width: 400px;
+        --icon-picker-icon-size: 32px;
+        --icon-picker-selected-bg: #ff6b6b;
+        --icon-picker-selected-border: #ff6b6b;
+      "
+    ></nr-icon-picker>
+  `,
+};
+
+/**
+ * With event listeners
+ */
+export const WithEvents = {
+  render: () => html`
+    <div>
+      <nr-icon-picker
+        @nr-icon-picker-change=${(e: CustomEvent) => {
+          const output = document.getElementById('event-output');
+          if (output) {
+            output.textContent = `Changed to: ${e.detail.value}`;
+          }
+        }}
+        @nr-icon-picker-open=${() => {
+          const output = document.getElementById('event-output-2');
+          if (output) {
+            output.textContent = 'Dropdown opened';
+          }
+        }}
+        @nr-icon-picker-close=${() => {
+          const output = document.getElementById('event-output-2');
+          if (output) {
+            output.textContent = 'Dropdown closed';
+          }
+        }}
+        @nr-icon-picker-search=${(e: CustomEvent) => {
+          const output = document.getElementById('event-output-3');
+          if (output) {
+            output.textContent = `Searching: "${e.detail.query}"`;
+          }
+        }}
+      ></nr-icon-picker>
+      
+      <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 4px; font-family: monospace;">
+        <div id="event-output">No selection yet</div>
+        <div id="event-output-2">Dropdown state: closed</div>
+        <div id="event-output-3">No search query</div>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Form integration
+ */
+export const FormIntegration = {
+  render: () => html`
+    <form
+      @submit=${(e: Event) => {
+        e.preventDefault();
+        const formData = new FormData(e.target as HTMLFormElement);
+        const picker = (e.target as HTMLFormElement).querySelector('nr-icon-picker');
+        alert(`Selected icon: ${picker?.value || 'None'}`);
+      }}
+      style="display: flex; flex-direction: column; gap: 16px; max-width: 300px;"
+    >
+      <div>
+        <label style="display: block; margin-bottom: 8px; font-weight: 500;">
+          Select an icon
+        </label>
+        <nr-icon-picker name="icon" value="star"></nr-icon-picker>
+      </div>
+      
+      <button type="submit" style="padding: 8px 16px; cursor: pointer;">
+        Submit
+      </button>
+    </form>
+  `,
+};
+
+/**
+ * Interactive playground
+ */
+export const Playground = {
+  args: {
+    value: 'heart',
+    size: 'medium',
+    placement: 'auto',
+    disabled: false,
+    showSearch: true,
+    showClear: true,
+    placeholder: 'Select icon',
+  },
+  render: (args: any) => html`
+    <nr-icon-picker
+      .value=${args.value}
+      .size=${args.size}
+      .placement=${args.placement}
+      .disabled=${args.disabled}
+      .showSearch=${args.showSearch}
+      .showClear=${args.showClear}
+      .placeholder=${args.placeholder}
+    ></nr-icon-picker>
+  `,
+};

package/components/ui/nuraly-ui/src/components/iconpicker/icon-picker.style.ts

@@ -0,0 +1,217 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { css } from 'lit';
+
+export default css`
+  :host {
+    /* Sizing */
+    --icon-picker-trigger-width: 100%;
+    --icon-picker-trigger-height: auto;
+    --icon-picker-dropdown-width: 320px;
+    --icon-picker-dropdown-max-height: 380px;
+    --icon-picker-grid-gap: 4px;
+    --icon-picker-icon-size: 24px;
+    --icon-picker-icon-padding: 8px;
+    
+    /* Colors - Light mode */
+    --icon-picker-background: var(--nuraly-background-primary, #ffffff);
+    --icon-picker-border: var(--nuraly-border-color, #d0d0d0);
+    --icon-picker-text: var(--nuraly-text-primary, #000000);
+    --icon-picker-hover-bg: var(--nuraly-background-hover, #f5f5f5);
+    --icon-picker-selected-bg: var(--nuraly-primary-light, #e6f7ff);
+    --icon-picker-selected-border: var(--nuraly-primary-color, #1890ff);
+    --icon-picker-placeholder-color: var(--nuraly-text-secondary, #999999);
+    
+    display: inline-block;
+    width: var(--icon-picker-trigger-width);
+    position: relative;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --icon-picker-background: var(--nuraly-background-primary, #1f1f1f);
+      --icon-picker-border: var(--nuraly-border-color, #404040);
+      --icon-picker-text: var(--nuraly-text-primary, #ffffff);
+      --icon-picker-hover-bg: var(--nuraly-background-hover, #2a2a2a);
+      --icon-picker-selected-bg: var(--nuraly-primary-dark, #003a8c);
+      --icon-picker-selected-border: var(--nuraly-primary-color, #40a9ff);
+    }
+  }
+
+  /* Trigger container */
+  .trigger-container {
+    width: 100%;
+  }
+
+  .trigger-button {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 12px;
+    cursor: pointer;
+  }
+
+  /* Icon preview in trigger */
+  .icon-preview {
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .icon-name {
+    font-size: 0.875rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--icon-picker-text);
+  }
+
+  .placeholder {
+    font-size: 0.875rem;
+    color: var(--icon-picker-placeholder-color);
+  }
+
+  /* Dropdown content */
+  .dropdown-content {
+    width: var(--icon-picker-dropdown-width);
+    max-height: var(--icon-picker-dropdown-max-height);
+    background: var(--icon-picker-background);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* Search container */
+  .search-container {
+    padding: 12px;
+    background: var(--icon-picker-background);
+    border-bottom: 1px solid var(--icon-picker-border);
+    flex-shrink: 0;
+    z-index: 10;
+  }
+
+  /* Icons grid container */
+  .icons-grid-container {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: 8px;
+    background: var(--icon-picker-background);
+  }
+
+  /* Icon grid using lit-virtualizer */
+  .icons-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--icon-picker-grid-gap), 1fr));
+    gap: var(--icon-picker-grid-gap);
+  }
+
+  /* Individual icon item */
+  .icon-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--icon-picker-icon-padding);
+    cursor: pointer;
+    border-radius: 4px;
+    border: 2px solid transparent;
+    transition: all 0.2s ease;
+    min-width: var(--icon-picker-icon-size);
+    min-height: var(--icon-picker-icon-size);
+  }
+
+  .icon-item:hover {
+    background-color: var(--icon-picker-hover-bg);
+  }
+
+  .icon-item.selected {
+    background-color: var(--icon-picker-selected-bg);
+    border-color: var(--icon-picker-selected-border);
+  }
+
+  .icon-item:focus {
+    outline: 2px solid var(--icon-picker-selected-border);
+    outline-offset: 2px;
+  }
+
+  .icon-item nr-icon {
+    font-size: var(--icon-picker-icon-size);
+    color: var(--icon-picker-text);
+  }
+
+  /* Empty state */
+  .empty-state {
+    padding: 40px 20px;
+    text-align: center;
+    color: var(--icon-picker-placeholder-color);
+  }
+
+  .empty-state nr-icon {
+    font-size: 48px;
+    margin-bottom: 12px;
+    opacity: 0.5;
+  }
+
+  .empty-message {
+    font-size: 0.875rem;
+  }
+
+  /* Loading state */
+  .loading-state {
+    padding: 40px 20px;
+    text-align: center;
+    color: var(--icon-picker-placeholder-color);
+  }
+
+  /* Disabled state */
+  :host([disabled]) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  /* Size variants */
+  :host([size="small"]) {
+    --icon-picker-icon-size: 20px;
+    --icon-picker-icon-padding: 6px;
+    --icon-picker-dropdown-width: 280px;
+  }
+
+  :host([size="large"]) {
+    --icon-picker-icon-size: 28px;
+    --icon-picker-icon-padding: 10px;
+    --icon-picker-dropdown-width: 360px;
+  }
+
+  /* Accessibility */
+  @media (prefers-reduced-motion: reduce) {
+    .icon-item {
+      transition: none;
+    }
+  }
+
+  /* Scrollbar styling */
+  .icons-grid-container::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .icons-grid-container::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .icons-grid-container::-webkit-scrollbar-thumb {
+    background: var(--icon-picker-border);
+    border-radius: 4px;
+  }
+
+  .icons-grid-container::-webkit-scrollbar-thumb:hover {
+    background: var(--icon-picker-text);
+    opacity: 0.5;
+  }
+`;

package/components/ui/nuraly-ui/src/components/iconpicker/icon-picker.types.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+export const enum IconPickerSize {
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large'
+}
+
+export const enum IconPickerPlacement {
+  Auto = 'auto',
+  Top = 'top',
+  Bottom = 'bottom',
+  TopStart = 'top-start',
+  TopEnd = 'top-end',
+  BottomStart = 'bottom-start',
+  BottomEnd = 'bottom-end',
+  Left = 'left',
+  Right = 'right'
+}
+
+export const enum IconPickerTrigger {
+  Click = 'click',
+  Hover = 'hover',
+  Manual = 'manual'
+}
+
+export const enum IconType {
+  Solid = 'solid',
+  Regular = 'regular',
+  Brands = 'brands'
+}
+
+export interface IconPickerIcon {
+  name: string;
+  type: IconType;
+  keywords?: string[];
+  category?: string;
+  iconName?: string;
+}
+
+export interface IconPickerSearchOptions {
+  caseSensitive?: boolean;
+  matchMode?: 'contains' | 'startsWith' | 'exact';
+  categories?: string[];
+}
+
+export interface IconPickerChangeEvent {
+  value: string;
+  icon: IconPickerIcon | null;
+}
+
+export const EMPTY_STRING = '';

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

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+export { NrIconPickerElement } from './icon-picker.component.js';
+export * from './icon-picker.types.js';
+export * from './icon-picker.constant.js';

package/components/ui/nuraly-ui/src/components/iconpicker/interfaces/icon-picker.interface.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { IconPickerIcon } from '../icon-picker.types.js';
+
+export interface IconPickerHost {
+  value: string;
+  selectedIcon: IconPickerIcon | null;
+  handleIconSelect(icon: IconPickerIcon): void;
+  requestUpdate(): void;
+}

package/components/ui/nuraly-ui/src/components/iconpicker/interfaces/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+export { IconPickerHost } from './icon-picker.interface.js';

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

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { NrIconPickerElement } from './icon-picker.component.js';
+
+export const NrIconPicker = createComponent({
+  tagName: 'nr-icon-picker',
+  elementClass: NrIconPickerElement,
+  react: React,
+  events: {
+    onChange: 'nr-icon-picker-change',
+    onOpen: 'nr-icon-picker-open',
+    onClose: 'nr-icon-picker-close',
+    onSearch: 'nr-icon-picker-search',
+    onClear: 'nr-icon-picker-clear',
+  },
+});

package/components/ui/nuraly-ui/src/components/iconpicker/utils/icon-filter.utils.ts

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { IconPickerIcon, IconPickerSearchOptions } from '../icon-picker.types.js';
+
+export class IconFilterUtils {
+  /**
+   * Filter icons by search query
+   */
+  static filterByName(
+    query: string,
+    icons: IconPickerIcon[],
+    options: IconPickerSearchOptions = {}
+  ): IconPickerIcon[] {
+    if (!query || query.trim() === '') {
+      return icons;
+    }
+
+    const searchTerm = options.caseSensitive ? query : query.toLowerCase();
+    const matchMode = options.matchMode || 'contains';
+
+    return icons.filter(icon => {
+      const iconName = options.caseSensitive ? icon.name : icon.name.toLowerCase();
+
+      switch (matchMode) {
+        case 'exact':
+          return iconName === searchTerm;
+        case 'startsWith':
+          return iconName.startsWith(searchTerm);
+        case 'contains':
+        default:
+          return iconName.includes(searchTerm);
+      }
+    });
+  }
+
+  /**
+   * Filter icons by category
+   */
+  static filterByCategory(category: string, icons: IconPickerIcon[]): IconPickerIcon[] {
+    if (!category || category === 'all') {
+      return icons;
+    }
+
+    return icons.filter(icon => icon.category === category);
+  }
+
+  /**
+   * Rank search results by relevance
+   */
+  static rankResults(query: string, icons: IconPickerIcon[]): IconPickerIcon[] {
+    if (!query || query.trim() === '') {
+      return icons;
+    }
+
+    const searchTerm = query.toLowerCase();
+
+    return icons
+      .map(icon => ({
+        icon,
+        score: this.calculateRelevanceScore(searchTerm, icon)
+      }))
+      .sort((a, b) => b.score - a.score)
+      .map(item => item.icon);
+  }
+
+  /**
+   * Calculate relevance score for ranking
+   */
+  private static calculateRelevanceScore(query: string, icon: IconPickerIcon): number {
+    const iconName = icon.name.toLowerCase();
+    let score = 0;
+
+    // Exact match gets highest score
+    if (iconName === query) {
+      score += 100;
+    }
+    // Starts with query gets high score
+    else if (iconName.startsWith(query)) {
+      score += 50;
+    }
+    // Contains query gets medium score
+    else if (iconName.includes(query)) {
+      score += 25;
+    }
+
+    // Keyword matches
+    if (icon.keywords) {
+      icon.keywords.forEach(keyword => {
+        const keywordLower = keyword.toLowerCase();
+        if (keywordLower === query) {
+          score += 30;
+        } else if (keywordLower.includes(query)) {
+          score += 10;
+        }
+      });
+    }
+
+    // Penalize longer names (shorter names are often more relevant)
+    score -= iconName.length * 0.1;
+
+    return score;
+  }
+
+  /**
+   * Combined filter and rank
+   */
+  static searchAndRank(
+    query: string,
+    icons: IconPickerIcon[],
+    options: IconPickerSearchOptions = {}
+  ): IconPickerIcon[] {
+    const filtered = this.filterByName(query, icons, options);
+    return this.rankResults(query, filtered);
+  }
+}