lupine.components 1.1.41 → 1.1.43

package/src/component-pool/charts/radar-chart.tsx

@@ -105,8 +105,20 @@ export const RadarChart = (props: RadarChartProps) => {
 
       const pointsStr = coordinates.map((c) => `${c.x},${c.y}`).join(' ');
 
+      const seriesGroupElements: any[] = [];
+
       // Fill area
-      dataElements.push(<polygon points={pointsStr} fill={color} fillOpacity='0.3' stroke={color} strokeWidth='2' />);
+      seriesGroupElements.push(
+        <polygon 
+          class="radar-polygon"
+          points={pointsStr} 
+          fill={color} 
+          fillOpacity='0.15' 
+          stroke={color} 
+          strokeWidth='2' 
+          style={{ transition: 'fill-opacity 0.2s ease' }}
+        />
+      );
 
       // Points and Tooltips
       coordinates.forEach((c) => {
@@ -132,9 +144,9 @@ export const RadarChart = (props: RadarChartProps) => {
           e.target.setAttribute('r', '4');
         };
 
-        dataElements.push(
+        seriesGroupElements.push(
           <circle
-            class='chart-element'
+            class='chart-element radar-point'
             cx={c.x}
             cy={c.y}
             r='4'
@@ -147,6 +159,26 @@ export const RadarChart = (props: RadarChartProps) => {
           />
         );
       });
+
+      const handleGroupMouseEnter = (e: any) => {
+        const polygon = e.currentTarget.querySelector('.radar-polygon');
+        if (polygon) polygon.setAttribute('fill-opacity', '0.6');
+      };
+
+      const handleGroupMouseLeave = (e: any) => {
+        const polygon = e.currentTarget.querySelector('.radar-polygon');
+        if (polygon) polygon.setAttribute('fill-opacity', '0.15');
+      };
+
+      dataElements.push(
+        <g 
+          class="radar-series" 
+          onMouseEnter={handleGroupMouseEnter} 
+          onMouseLeave={handleGroupMouseLeave}
+        >
+          {seriesGroupElements}
+        </g>
+      );
     });
 
     return dataElements;
@@ -156,13 +188,16 @@ export const RadarChart = (props: RadarChartProps) => {
     globalCssId,
   };
 
-  const styleStr = `width: ${props.width || '100%'}; height: ${props.height || '100%'};`;
+  const ratio = props.aspectRatio ?? 16 / 9;
+  const paddingTop = `${(1 / ratio) * 100}%`;
+
+  const styleStr = `width: ${props.width || '100%'};`;
 
   return (
     <div ref={ref} class='&-container' style={styleStr}>
       {props.title && <div class='chart-title'>{props.title}</div>}
 
-      <div style={{ flex: 1, position: 'relative', display: 'flex', justifyContent: 'center', minHeight: 0 }}>
+      <div style={{ flex: 1, position: 'relative', display: 'flex', justifyContent: 'center', minHeight: 0, paddingTop }}>
         <svg
           class='chart-svg'
           style={{

package/src/component-pool/charts/scatter-chart-demo.tsx

@@ -16,13 +16,11 @@ export const scatterChartDemo: DemoStory<any> = {
   args: {
     title: 'Value Correlation',
     width: '100%',
-    height: '350px',
     showLegend: true,
   },
   argTypes: {
     title: { control: 'text' },
     width: { control: 'text' },
-    height: { control: 'text' },
     showLegend: { control: 'boolean' },
   },
   render: (args: any) => {
@@ -68,7 +66,6 @@ export const scatterChartDemo: DemoStory<any> = {
               data={correlationData}
               title={args.title}
               width={args.width}
-              height={args.height}
               showLegend={args.showLegend}
             />
           </div>

package/src/component-pool/charts/scatter-chart.tsx

@@ -211,13 +211,16 @@ export const ScatterChart = (props: ScatterChartProps) => {
     },
   };
 
-  const styleStr = `width: ${props.width || '100%'}; height: ${props.height || '100%'};`;
+  const ratio = props.aspectRatio ?? 16 / 9;
+  const paddingTop = `${(1 / ratio) * 100}%`;
+
+  const styleStr = `width: ${props.width || '100%'};`;
 
   return (
     <div ref={ref} class='&-container' style={styleStr}>
       {props.title && <div class='chart-title'>{props.title}</div>}
 
-      <div style={{ flex: 1, position: 'relative', minHeight: 0 }}>{chartVar.node}</div>
+      <div style={{ flex: 1, position: 'relative', minHeight: 0, paddingTop }}>{chartVar.node}</div>
 
       {showLegend && (
         <div class='chart-legend'>

package/src/component-pool/index.ts

@@ -5,6 +5,7 @@ export * from './breadcrumbs';
 export * from './card';
 export * from './carousel';
 export * from './cascader';
+export * from './charts';
 export * from './copy-button';
 export * from './date-picker';
 export * from './floating-icon-menu';

package/src/component-pool/svg-graph/index.ts

@@ -0,0 +1 @@
+export * from './svg-graph';

package/src/component-pool/svg-graph/svg-graph-demo.tsx

@@ -0,0 +1,59 @@
+import { RefProps } from 'lupine.web';
+import { SvgGraph } from './svg-graph';
+import { DemoStory } from '../../demo/demo-types';
+
+const SvgGraphDemo = () => {
+  const ref: RefProps = {
+    onLoad: async (el) => {
+      const graph = new SvgGraph(el as HTMLElement);
+
+      // Draw a line
+      graph.drawLine('red', '2px', 50, 50, 250, 50, 'line1');
+
+      // Draw a rect
+      graph.draw('rect', '#e0f7fa', '#00acc1', '2px', 50, 100, 100, 50, 'rect1');
+
+      // Draw an ellipse
+      graph.draw('ellipse', '#fce4ec', '#d81b60', '2px', 200, 100, 100, 50, 'ellipse1');
+
+      // Draw a rounded rect
+      graph.draw('roundrect', '#e8f5e9', '#43a047', '2px', 50, 200, 150, 60, 'roundrect1');
+
+      // Test resize after 1s
+      setTimeout(() => {
+        graph.resize('line1', 50, 50, 300, 100);
+      }, 1000);
+    },
+  };
+
+  return (
+    <div style={{ padding: '16px' }}>
+      <h3>SvgGraph Component Demo</h3>
+      <p>This demonstrates the imperative SVG Graph API modernized from legacy JGraph.</p>
+
+      <div
+        ref={ref}
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '400px',
+          border: '1px solid #ccc',
+          marginTop: '16px',
+          backgroundColor: '#fafafa',
+        }}
+      >
+        {/* SVG will be injected here */}
+      </div>
+    </div>
+  );
+};
+
+export const svgGraphDemo: DemoStory<any> = {
+  id: 'svg-graph-demo',
+  text: 'Svg Graph',
+  args: {},
+  render: (args: any) => {
+    return <SvgGraphDemo />;
+  },
+  code: 'import { SvgGraph } from "lupine.components/src/component-pool/svg-graph";\n// Check source code for usage.',
+};

package/src/component-pool/svg-graph/svg-graph.ts

@@ -0,0 +1,166 @@
+/**
+ * Modernized SVG Graph Library
+ * Replaces the legacy JGraph library.
+ */
+
+export class SvgGraph {
+  public svgRoot: SVGSVGElement;
+  private elements: Map<string, SVGElement> = new Map();
+
+  constructor(container: HTMLElement | string) {
+    let el: HTMLElement | null = null;
+    if (typeof container === 'string') {
+      el = document.getElementById(container);
+    } else {
+      el = container;
+    }
+
+    if (!el) {
+      throw new Error('SvgGraph: container not found');
+    }
+
+    el.style.userSelect = 'none';
+
+    this.svgRoot = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    this.svgRoot.style.width = '100%';
+    this.svgRoot.style.height = '100%';
+    this.svgRoot.style.position = 'absolute';
+    this.svgRoot.style.left = '0';
+    this.svgRoot.style.top = '0';
+    this.svgRoot.style.pointerEvents = 'none'; // usually good for overlays
+
+    el.appendChild(this.svgRoot);
+  }
+
+  draw(
+    shape: 'rect' | 'ellipse' | 'roundrect' | 'line',
+    fillColor: string,
+    lineColor: string,
+    lineWidth: string,
+    left: number,
+    top: number,
+    width: number,
+    height: number,
+    id?: string
+  ): SVGElement {
+    const svgNamespace = 'http://www.w3.org/2000/svg';
+    let svg: SVGElement;
+
+    if (shape === 'rect') {
+      svg = document.createElementNS(svgNamespace, 'rect');
+      svg.setAttributeNS(null, 'x', left + 'px');
+      svg.setAttributeNS(null, 'y', top + 'px');
+      svg.setAttributeNS(null, 'width', width + 'px');
+      svg.setAttributeNS(null, 'height', height + 'px');
+    } else if (shape === 'ellipse') {
+      svg = document.createElementNS(svgNamespace, 'ellipse');
+      svg.setAttributeNS(null, 'cx', left + width / 2 + 'px');
+      svg.setAttributeNS(null, 'cy', top + height / 2 + 'px');
+      svg.setAttributeNS(null, 'rx', width / 2 + 'px');
+      svg.setAttributeNS(null, 'ry', height / 2 + 'px');
+    } else if (shape === 'roundrect') {
+      svg = document.createElementNS(svgNamespace, 'rect');
+      svg.setAttributeNS(null, 'x', left + 'px');
+      svg.setAttributeNS(null, 'y', top + 'px');
+      svg.setAttributeNS(null, 'rx', '20px');
+      svg.setAttributeNS(null, 'ry', '20px');
+      svg.setAttributeNS(null, 'width', width + 'px');
+      svg.setAttributeNS(null, 'height', height + 'px');
+    } else if (shape === 'line') {
+      svg = document.createElementNS(svgNamespace, 'line');
+      svg.setAttributeNS(null, 'x1', left + 'px');
+      svg.setAttributeNS(null, 'y1', top + 'px');
+      svg.setAttributeNS(null, 'x2', width + 'px');
+      svg.setAttributeNS(null, 'y2', height + 'px');
+    } else {
+      throw new Error(`Unsupported shape: ${shape}`);
+    }
+
+    svg.style.position = 'absolute';
+    svg.setAttributeNS(null, 'fill', fillColor || 'none');
+    svg.setAttributeNS(null, 'stroke', lineColor || 'none');
+    svg.setAttributeNS(null, 'stroke-width', lineWidth || '1px');
+    svg.style.pointerEvents = 'auto'; // allow interaction with shape
+
+    if (id) {
+      svg.id = id;
+      this.elements.set(id, svg);
+    }
+    this.svgRoot.appendChild(svg);
+    return svg;
+  }
+
+  drawLine(
+    lineColor: string,
+    lineWidth: string,
+    left: number,
+    top: number,
+    width: number,
+    height: number,
+    id?: string
+  ): SVGElement {
+    return this.draw('line', '', lineColor, lineWidth, left, top, width, height, id);
+  }
+
+  resize(idOrObj: string | SVGElement, left: number, top: number, width: number, height: number): SVGElement | void {
+    const svg =
+      typeof idOrObj === 'string' ? this.elements.get(idOrObj) || (document.getElementById(idOrObj) as any) : idOrObj;
+    if (!svg) return;
+
+    if (svg.tagName === 'rect') {
+      svg.setAttributeNS(null, 'x', left + 'px');
+      svg.setAttributeNS(null, 'y', top + 'px');
+      svg.setAttributeNS(null, 'width', width + 'px');
+      svg.setAttributeNS(null, 'height', height + 'px');
+    } else if (svg.tagName === 'ellipse') {
+      svg.setAttributeNS(null, 'cx', left + width / 2 + 'px');
+      svg.setAttributeNS(null, 'cy', top + height / 2 + 'px');
+      svg.setAttributeNS(null, 'rx', width / 2 + 'px');
+      svg.setAttributeNS(null, 'ry', height / 2 + 'px');
+    } else if (svg.tagName === 'line') {
+      svg.setAttributeNS(null, 'x1', left + 'px');
+      svg.setAttributeNS(null, 'y1', top + 'px');
+      svg.setAttributeNS(null, 'x2', width + 'px');
+      svg.setAttributeNS(null, 'y2', height + 'px');
+    }
+    return svg;
+  }
+
+  remove(idOrObj: string | SVGElement): void {
+    const svg = typeof idOrObj === 'string' ? this.elements.get(idOrObj) || document.getElementById(idOrObj) : idOrObj;
+    if (svg && svg.parentNode) {
+      svg.parentNode.removeChild(svg);
+      if (typeof idOrObj === 'string') this.elements.delete(idOrObj);
+    }
+  }
+
+  setAttribute(shape: SVGElement, cmd: string, value: string): void {
+    if (shape != null) {
+      if (cmd === 'fillcolor') {
+        shape.setAttributeNS(null, 'fill', value || 'none');
+      } else if (cmd === 'linecolor') {
+        shape.setAttributeNS(null, 'stroke', value || 'none');
+      } else if (cmd === 'linewidth') {
+        shape.setAttributeNS(null, 'stroke-width', parseInt(value) + 'px');
+      }
+    }
+  }
+
+  getAttribute(shape: SVGElement, cmd: string): string {
+    let result = '';
+    if (shape != null) {
+      if (cmd === 'fillcolor') {
+        result = shape.getAttributeNS(null, 'fill') || '';
+        if (result === 'none') result = '';
+      } else if (cmd === 'linecolor') {
+        result = shape.getAttributeNS(null, 'stroke') || '';
+        if (result === 'none') result = '';
+      } else if (cmd === 'linewidth') {
+        result = shape.getAttributeNS(null, 'stroke') || '';
+        if (result === 'none') result = '';
+        else result = shape.getAttributeNS(null, 'stroke-width') || '';
+      }
+    }
+    return result;
+  }
+}

package/src/component-pool/youtube-player/youtube-player-demo.tsx

@@ -5,13 +5,13 @@ export const youtubePlayerDemo: DemoStory<YouTubePlayerProps> = {
   id: 'youtubePlayerDemo',
   text: 'YouTube Player',
   args: {
-    videoId: 'dQw4w9WgXcQ',
+    srcOrVideoId: 'dQw4w9WgXcQ',
     width: '100%',
     height: '400px',
     autoplay: false,
   },
   argTypes: {
-    videoId: { control: 'text', description: 'YouTube Video ID' },
+    srcOrVideoId: { control: 'text', description: 'YouTube Video ID' },
     width: { control: 'text' },
     height: { control: 'text' },
     autoplay: { control: 'boolean' },
@@ -39,8 +39,8 @@ export const youtubePlayerDemo: DemoStory<YouTubePlayerProps> = {
         <section>
           <div class='section-title'>Custom Size</div>
           <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
-            <YouTubePlayer videoId='jNQXAC9IVRw' width='300px' height='200px' />
-            <YouTubePlayer videoId='M7lc1UVf-VE' width='400px' height='250px' />
+            <YouTubePlayer srcOrVideoId='jNQXAC9IVRw' width='300px' height='200px' />
+            <YouTubePlayer srcOrVideoId='M7lc1UVf-VE' width='400px' height='250px' />
           </div>
         </section>
       </div>

package/src/component-pool/youtube-player/youtube-player.tsx

@@ -3,38 +3,114 @@ import { CssProps } from 'lupine.web';
 export type YouTubePlayerProps = {
   class?: string;
   style?: CssProps;
-  videoId: string;
+  srcOrVideoId: string;
   width?: string | number;
   height?: string | number;
   autoplay?: boolean;
   allowFullScreen?: boolean;
+  controls?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  rel?: boolean;
+  modestbranding?: boolean;
 };
 
+function parseYouTubeUrl(urlOrId: string) {
+  if (!urlOrId) return { videoId: '' };
+  if (/^[a-zA-Z0-9_-]{11}$/.test(urlOrId)) return { videoId: urlOrId };
+  
+  let videoId = '';
+  let list = '';
+  let start = '';
+
+  try {
+    const urlObj = new URL(urlOrId);
+    if (urlObj.hostname.includes('youtube.com')) {
+      if (urlObj.pathname === '/watch') {
+        videoId = urlObj.searchParams.get('v') || '';
+      } else if (urlObj.pathname.startsWith('/embed/')) {
+        videoId = urlObj.pathname.split('/')[2] || '';
+      } else if (urlObj.pathname.startsWith('/v/')) {
+        videoId = urlObj.pathname.split('/')[2] || '';
+      }
+      list = urlObj.searchParams.get('list') || '';
+      start = urlObj.searchParams.get('t') || urlObj.searchParams.get('start') || '';
+    } else if (urlObj.hostname.includes('youtu.be')) {
+      videoId = urlObj.pathname.slice(1);
+      list = urlObj.searchParams.get('list') || '';
+      start = urlObj.searchParams.get('t') || urlObj.searchParams.get('start') || '';
+    }
+  } catch (e) {
+    const match = urlOrId.match(/(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([\w-]{11})/);
+    if (match) videoId = match[1];
+  }
+  
+  if (start && isNaN(Number(start))) {
+    const timeMatch = start.match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?/);
+    if (timeMatch && timeMatch[0]) {
+      let seconds = 0;
+      if (timeMatch[1]) seconds += parseInt(timeMatch[1]) * 3600;
+      if (timeMatch[2]) seconds += parseInt(timeMatch[2]) * 60;
+      if (timeMatch[3]) seconds += parseInt(timeMatch[3]);
+      if (seconds > 0) start = seconds.toString();
+    }
+  }
+
+  return { videoId, list, start };
+}
+
 export const YouTubePlayer = (props: YouTubePlayerProps) => {
   const {
-    videoId,
+    srcOrVideoId,
     width = '100%',
     height = '100%',
     autoplay = false,
     allowFullScreen = true,
+    controls = true,
+    loop = false,
+    muted = false,
+    rel = false,
+    modestbranding = true,
     style,
     class: className,
   } = props;
 
-  const src = `https://www.youtube.com/embed/${videoId}?autoplay=${autoplay ? 1 : 0}`;
+  const { videoId, list, start } = parseYouTubeUrl(srcOrVideoId);
+  
+  if (typeof document === 'undefined') {
+    return <div class={className} css={{ position: 'relative', width, height, ...style }}></div>;
+  }
+
+  let src = '';
+  if (videoId || list) {
+    src = `https://www.youtube.com/embed/${videoId}?autoplay=${autoplay ? 1 : 0}`;
+    if (!controls) src += '&controls=0';
+    if (loop) src += `&loop=1&playlist=${videoId}`; // YouTube requires playlist=VIDEO_ID for loop to work
+    if (muted) src += '&mute=1';
+    if (!rel) src += '&rel=0';
+    if (modestbranding) src += '&modestbranding=1';
+    if (list) src += `&list=${list}`;
+    if (start) src += `&start=${start}`;
+  }
 
   return (
-    <div class={className} css={{ position: 'relative', width, height, ...style }}>
-      <iframe
-        width='100%'
-        height='100%'
-        src={src}
-        title='YouTube video player'
-        frameBorder='0'
-        allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
-        allowFullScreen={allowFullScreen}
-        style={{ border: 'none', display: 'block' }}
-      ></iframe>
+    <div class={className} css={{ position: 'relative', width, height, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', ...style }}>
+      {src ? (
+        <iframe
+          width='100%'
+          height='100%'
+          src={src}
+          title='YouTube video player'
+          frameBorder='0'
+          allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+          allowFullScreen={allowFullScreen}
+          style={{ border: 'none', display: 'block', aspectRatio: '16 / 9', height: 'auto', maxHeight: '100%' }}
+        ></iframe>
+      ) : (
+        <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f0f0f0', color: '#999', border: '1px solid #ddd' }}>
+          Invalid YouTube URL
+        </div>
+      )}
     </div>
   );
 };

package/src/components/action-sheet-demo.tsx

@@ -10,6 +10,7 @@ import {
 import { ActionSheetTimePicker } from './action-sheet-time';
 import { ActionSheetDatePicker } from './action-sheet-date';
 import { ActionSheetColorPicker } from './action-sheet-color';
+import { ActionSheetThemePicker } from './action-sheet-theme';
 import { Button, ButtonSize } from './button';
 
 export const actionSheetDemo: DemoStory<any> = {
@@ -180,6 +181,17 @@ export const actionSheetDemo: DemoStory<any> = {
             if (result) console.log('Color selected:', result);
           }}
         />
+        <Button
+          text='Show Theme Picker'
+          size={ButtonSize.Medium}
+          onClick={async () => {
+            const result = await ActionSheetThemePicker({
+              title: 'Pick a theme variable',
+              value: 'var(--primary-color)',
+            });
+            if (result) console.log('Theme variable selected:', result);
+          }}
+        />
       </div>
     );
   },