lupine.components 1.1.21 → 1.1.23

package/src/components/progress.tsx

@@ -2,7 +2,7 @@ import { CssProps, RefProps } from 'lupine.web';
 import { HtmlVar } from './html-var';
 
 export type ProgressHookProps = {
-  onProgress?: (percentage: number, chunkNumber: number, totalChunks: number) => void;
+  onProgress?: (percentage: number, chunkNumber?: number, totalChunks?: number) => void;
   onShow?: (show: boolean, title?: string) => void;
 };
 export type ProgressProps = {
@@ -53,13 +53,13 @@ export const Progress = (props: ProgressProps) => {
     },
   };
 
-  props.hook.onProgress = (percentage: number, chunkNumber: number, totalChunks: number) => {
+  props.hook.onProgress = (percentage: number, chunkNumber?: number, totalChunks?: number) => {
     // console.log(`Upload progress: ${percentage}% (chunk ${chunkNumber} of ${totalChunks})`);
     percentage = Math.round(percentage * 100);
     const bar1 = document.querySelector('.progress-bar1') as HTMLElement;
     const bar2 = document.querySelector('.progress-bar2') as HTMLElement;
     bar1.style.width = `${percentage}%`;
-    bar2.style.width = `${1 - percentage}%`;
+    bar2.style.width = `${100 - percentage}%`;
     dom.value = `${percentage}%`;
   };
   props.hook.onShow = (show: boolean, title?: string) => {

package/src/components/radio-label-demo.tsx

@@ -0,0 +1,41 @@
+import { DemoStory } from '../demo/demo-types';
+import { RadioLabelComponent } from './radio-label-component';
+
+export const radioLabelDemo: DemoStory<any> = {
+  id: 'radio-label-demo',
+  text: 'Radio Label Demo',
+  args: {
+    label: 'Option A',
+    name: 'demo-radio-group',
+    checked: true,
+    disabled: false,
+  },
+  argTypes: {
+    label: { control: 'text', description: 'Label text' },
+    name: { control: 'text', description: 'Radio group name' },
+    checked: { control: 'boolean', description: 'Is checked?' },
+    disabled: { control: 'boolean', description: 'Is disabled?' },
+  },
+  render: (args) => {
+    return (
+      <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        <RadioLabelComponent {...args} />
+        <RadioLabelComponent label='Option B' name={args.name} disabled={args.disabled} />
+      </div>
+    );
+  },
+  code: `import { RadioLabelComponent } from 'lupine.components/components/radio-label-component';
+
+<RadioLabelComponent 
+  label="Option A" 
+  name="demo-radio-group" 
+  checked={true} 
+  disabled={false} 
+/>
+<RadioLabelComponent 
+  label="Option B" 
+  name="demo-radio-group" 
+  disabled={false} 
+/>
+`,
+};

package/src/components/redirect-demo.tsx

@@ -0,0 +1,36 @@
+import { DemoStory } from '../demo/demo-types';
+import { Redirect, RedirectProps } from './redirect';
+
+export const redirectDemo: DemoStory<RedirectProps> = {
+  id: 'redirect-demo',
+  text: 'Redirect Demo',
+  args: {
+    title: 'Redirecting you soon...' + new Date().toISOString(),
+    url: '#test-redirect',
+    delaySeconds: 3,
+  },
+  argTypes: {
+    title: { control: 'text', description: 'Text shown while waiting' },
+    url: { control: 'text', description: 'URL to redirect to' },
+    delaySeconds: { control: 'number', description: 'Delay before redirecting' },
+  },
+  render: (args) => {
+    return (
+      <div style={{ padding: '20px', border: '1px solid #ccc', backgroundColor: '#f9f9f9' }}>
+        <p style={{ color: '#666', marginBottom: '16px' }}>
+          This component automatically changes the `window.location.href` after the specified delay. In this demo, the
+          iframe will redirect itself to `{args.url}` after {args.delaySeconds} seconds.
+        </p>
+        <Redirect {...args} />
+      </div>
+    );
+  },
+  code: `import { Redirect } from 'lupine.components/components/redirect';
+
+<Redirect 
+  title="Redirecting you soon..." 
+  url="https://example.com" 
+  delaySeconds={3} 
+/>
+`,
+};

package/src/components/resizable-splitter-demo.tsx

@@ -0,0 +1,76 @@
+import { DemoStory } from '../demo/demo-types';
+import { ResizableSplitter } from './resizable-splitter';
+
+export const resizableSplitterDemo: DemoStory<any> = {
+  id: 'resizable-splitter-demo',
+  text: 'Resizable Splitter Demo',
+  args: {
+    isVertical: true,
+  },
+  argTypes: {
+    isVertical: { control: 'boolean', description: 'If true, splits left/right. If false, splits top/bottom' },
+  },
+  render: (args) => {
+    // The splitter hook targets a selector, so we create a unique container.
+    const containerId = 'splitter-demo-box';
+
+    // The logic expects to re-mount the splitter or reload the page for structural updates normally,
+    // but we can hack it together for the demo by destroying and recreating the DOM.
+    // For simplicity, we just use a fixed layout that reacts to the boolean toggle.
+
+    if (args.isVertical) {
+      return (
+        <div style={{ display: 'flex', width: '600px', height: '400px', border: '1px solid #999', padding: '20px' }}>
+          <div
+            id={containerId}
+            style={{
+              width: '200px',
+              height: '100%',
+              backgroundColor: '#eee',
+              position: 'relative',
+            }}
+          >
+            <div style={{ padding: '10px' }}>Left Panel (Drag right edge)</div>
+            {ResizableSplitter.getSplitter(`#${containerId}`, true, true)}
+          </div>
+          <div style={{ flex: 1, backgroundColor: '#ddd', padding: '10px' }}>Right Panel (Flex 1)</div>
+        </div>
+      );
+    } else {
+      return (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            width: '600px',
+            height: '400px',
+            border: '1px solid #999',
+            padding: '20px',
+          }}
+        >
+          <div
+            id={containerId}
+            style={{
+              height: '150px',
+              width: '100%',
+              backgroundColor: '#eee',
+              position: 'relative',
+            }}
+          >
+            <div style={{ padding: '10px' }}>Top Panel (Drag bottom edge)</div>
+            {ResizableSplitter.getSplitter(`#${containerId}`, false, false)}
+          </div>
+          <div style={{ flex: 1, backgroundColor: '#ddd', padding: '10px' }}>Bottom Panel (Flex 1)</div>
+        </div>
+      );
+    }
+  },
+  code: `import { ResizableSplitter } from 'lupine.components/components/resizable-splitter';
+
+{/* Left/Right Splitter (isVertical=true means the divider line is vertical) */}
+<div id="splitter-demo-box" style={{ width: '200px', height: '100%', position: 'relative' }}>
+  <div style={{ padding: '10px' }}>Left Panel (Drag right edge)</div>
+  {ResizableSplitter.getSplitter('#splitter-demo-box', true, true)}
+</div>
+`,
+};

package/src/components/resizable-splitter.tsx

@@ -63,7 +63,7 @@ export class ResizableSplitter {
         backgroundColor: '#ccc',
       },
     };
-    bindGlobalStyle('resizable-splitter', css);
+    bindGlobalStyle('resizable-splitter', css, false, true);
 
     window.addEventListener('mousemove', ResizableSplitter.onMousemove.bind(ResizableSplitter), false);
     document.documentElement.addEventListener('mouseup', ResizableSplitter.onMouseup.bind(ResizableSplitter), false);
@@ -105,14 +105,14 @@ export class ResizableSplitter {
   }
 
   static getSplitter(selector: string, isVertical: boolean, isRightOrTop: boolean) {
+    if (!this.initialized) {
+      this.initialized = true;
+      this.init();
+    }
+
     const className = this.getSplitterClassName(isVertical, isRightOrTop);
 
     const onMousedown = (event: any) => {
-      if (!this.initialized) {
-        this.initialized = true;
-        this.init();
-      }
-
       ResizableSplitter.hostNode = document.querySelector(selector)!;
       if (!ResizableSplitter.hostNode) {
         console.error(`Can't find element: ${selector}`);

package/src/components/select-angle-demo.tsx

@@ -0,0 +1,32 @@
+import { DemoStory } from '../demo/demo-types';
+import { SelectAngleComponent, SelectAngleComponentProps } from './select-angle-component';
+
+export const selectAngleDemo: DemoStory<SelectAngleComponentProps> = {
+  id: 'select-angle-demo',
+  text: 'Select Angle Demo',
+  args: {
+    size: '100px',
+    angle: 45,
+    onChange: () => {},
+  },
+  argTypes: {
+    size: { control: 'text', description: 'Size of the dial container' },
+    angle: { control: 'number', description: 'Initial angle (0-360)' },
+  },
+  render: (args) => {
+    return (
+      <div style={{ padding: '20px' }}>
+        <p style={{ color: '#666', marginBottom: '16px' }}>Drag the needle or click the edge dots to set the angle.</p>
+        <SelectAngleComponent {...args} onChange={(val) => console.log('Angle changed:', val)} />
+      </div>
+    );
+  },
+  code: `import { SelectAngleComponent } from 'lupine.components/components/select-angle-component';
+
+<SelectAngleComponent 
+  size="100px" 
+  angle={45} 
+  onChange={(val) => console.log('Angle changed:', val)} 
+/>
+`,
+};

package/src/components/select-with-title-demo.tsx

@@ -0,0 +1,53 @@
+import { DemoStory } from '../demo/demo-types';
+import { SelectWithTitle, SelectOptionProps } from './select-with-title';
+
+export const selectWithTitleDemo: DemoStory<any> = {
+  id: 'select-with-title-demo',
+  text: 'Select With Title Demo',
+  args: {
+    title: 'Choose a fruit',
+    size: 1,
+    width: '200px',
+  },
+  argTypes: {
+    title: { control: 'text', description: 'Title text shown above' },
+    size: { control: 'number', description: 'HTML select size attribute' },
+    width: { control: 'text', description: 'Width of the select' },
+  },
+  render: (args) => {
+    const options: SelectOptionProps[] = [
+      { option: 'Apple', value: 'apple' },
+      { option: 'Banana', value: 'banana', selected: true },
+      { option: 'Cherry', value: 'cherry' },
+    ];
+    return (
+      <div style={{ padding: '20px' }}>
+        {SelectWithTitle(
+          args.title,
+          options,
+          (val) => console.log('Selected:', val),
+          args.size,
+          'input-base',
+          args.width
+        )}
+      </div>
+    );
+  },
+  code: `import { SelectWithTitle, SelectOptionProps } from 'lupine.components/components/select-with-title';
+
+const options: SelectOptionProps[] = [
+  { option: 'Apple', value: 'apple' },
+  { option: 'Banana', value: 'banana', selected: true },
+  { option: 'Cherry', value: 'cherry' },
+];
+
+{SelectWithTitle(
+  'Choose a fruit', // title
+  options,          // options array
+  (val) => console.log('Selected:', val), // onChange
+  1,                // size
+  'input-base',     // className
+  '200px'           // width
+)}
+`,
+};

package/src/components/spinner-demo.tsx

@@ -0,0 +1,52 @@
+import { DemoStory } from '../demo/demo-types';
+import { Spinner01, Spinner02, Spinner03, SpinnerSize } from './spinner';
+
+export const spinnerDemo: DemoStory<any> = {
+  id: 'spinner-demo',
+  text: 'Spinner Demo',
+  args: {
+    size: SpinnerSize.Medium,
+    color: '#0a74c9',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: Object.values(SpinnerSize),
+      description: 'Size of the spinner',
+    },
+    color: {
+      control: 'text',
+      description: 'Color of the spinner (Hex, RGB, or var)',
+    },
+  },
+  render: (args) => {
+    return (
+      <div style={{ display: 'flex', gap: '40px', alignItems: 'center', padding: '20px' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}>
+          <Spinner01 size={args.size} color={args.color} />
+          <span>Spinner01</span>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}>
+          <Spinner02 size={args.size} color={args.color} />
+          <span>Spinner02</span>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}>
+          {/* Spinner03 expects an RGB tuple string without the rgb() wrapper */}
+          <Spinner03 size={args.size} colorRGB='10 116 201' />
+          <span>Spinner03</span>
+        </div>
+      </div>
+    );
+  },
+  code: `import { Spinner01, Spinner02, Spinner03, SpinnerSize } from 'lupine.components/components/spinner';
+
+{/* Spinner01 */}
+<Spinner01 size={SpinnerSize.Medium} color="#0a74c9" />
+
+{/* Spinner02 */}
+<Spinner02 size={SpinnerSize.Medium} color="#0a74c9" />
+
+{/* Spinner03 expects an RGB tuple string without the rgb() wrapper */}
+<Spinner03 size={SpinnerSize.Medium} colorRGB="10 116 201" />
+`,
+};

package/src/components/stars-component-demo.tsx

@@ -0,0 +1,36 @@
+import { DemoStory } from '../demo/demo-types';
+import { StarsComponent, StarsComponentProps } from './stars-component';
+
+export const starsDemo: DemoStory<StarsComponentProps> = {
+  id: 'stars-demo',
+  text: 'Stars Component Demo',
+  args: {
+    maxLength: 5,
+    value: 3,
+    fontSize: '30px',
+    fullIcon: <div class='ifc-icon full'>★</div>,
+    outlineIcon: <div class='ifc-icon outline'>☆</div>,
+  },
+  argTypes: {
+    maxLength: { control: 'number', description: 'Total number of stars' },
+    value: { control: 'number', description: 'Current rating value' },
+    fontSize: { control: 'text', description: 'Size of the stars (e.g., 20px, 2rem)' },
+  },
+  render: (args: StarsComponentProps) => {
+    return (
+      <div style={{ padding: '20px' }}>
+        <StarsComponent {...args} />
+      </div>
+    );
+  },
+  code: `import { StarsComponent } from 'lupine.components/components/stars-component';
+
+<StarsComponent 
+  maxLength={5} 
+  value={3} 
+  fontSize="30px" 
+  fullIcon={<div class="ifc-icon full">★</div>} 
+  outlineIcon={<div class="ifc-icon outline">☆</div>} 
+/>
+`,
+};

package/src/components/stars-component.tsx

@@ -1,5 +1,8 @@
-import { bindGlobalStyle, CssProps, RefProps } from 'lupine.components';
+import { bindGlobalStyle, CssProps, RefProps, VNode } from 'lupine.components';
 
+/*
+ma-cards-heart and ma-cards-heart-outline are font icons
+*/
 export type StarsHookComponentProps = {
   setValue: (value: number) => void;
   getValue: () => number;
@@ -10,6 +13,8 @@ export type StarsComponentProps = {
   onChange?: (value: number) => void;
   hook?: StarsHookComponentProps;
   fontSize?: string;
+  fullIcon?: VNode<any>; // should contain full classname
+  outlineIcon?: VNode<any>; // should contain outline classname
 };
 export const StarsComponent = (props: StarsComponentProps) => {
   const css: CssProps = {
@@ -46,6 +51,9 @@ export const StarsComponent = (props: StarsComponentProps) => {
     };
     props.hook.getValue = () => props.value;
   }
+
+  const fullIcon = props.fullIcon || <i class='ifc-icon ma-cards-heart full'></i>;
+  const outlineIcon = props.outlineIcon || <i class='ifc-icon ma-cards-heart-outline outline'></i>;
   const ref: RefProps = {};
   return (
     <div style={{ fontSize: props.fontSize || '20px' }} ref={ref} class='stars-box'>
@@ -57,8 +65,8 @@ export const StarsComponent = (props: StarsComponentProps) => {
             props.onChange?.(index + 1);
           }}
         >
-          <i class='ifc-icon ma-cards-heart full'></i>
-          <i class='ifc-icon ma-cards-heart-outline outline'></i>
+          {fullIcon}
+          {outlineIcon}
         </label>
       ))}
     </div>

package/src/components/switch-option-demo.tsx

@@ -0,0 +1,36 @@
+import { DemoStory } from '../demo/demo-types';
+import { SwitchOptionComponent, SwitchOptionComponentProps } from './switch-option-component';
+
+export const switchOptionDemo: DemoStory<SwitchOptionComponentProps> = {
+  id: 'switch-option-demo',
+  text: 'Switch Option Demo',
+  args: {
+    option1: 'Day',
+    option2: 'Night',
+    defaultOption: 'Day',
+    fontSize: '14px',
+  },
+  argTypes: {
+    option1: { control: 'text', description: 'First option text' },
+    option2: { control: 'text', description: 'Second option text' },
+    defaultOption: { control: 'text', description: 'Initial selected option' },
+    fontSize: { control: 'text', description: 'Font size' },
+  },
+  render: (args) => {
+    return (
+      <div style={{ padding: '20px' }}>
+        <SwitchOptionComponent {...args} onChange={(val) => console.log('Switched to:', val)} />
+      </div>
+    );
+  },
+  code: `import { SwitchOptionComponent } from 'lupine.components/components/switch-option-component';
+
+<SwitchOptionComponent 
+  option1="Day" 
+  option2="Night" 
+  defaultOption="Day" 
+  fontSize="14px" 
+  onChange={(val) => console.log('Switched to:', val)} 
+/>
+`,
+};

package/src/components/tabs-demo.tsx

@@ -0,0 +1,42 @@
+import { DemoStory } from '../demo/demo-types';
+import { Tabs } from './tabs';
+
+export const tabsDemo: DemoStory<any> = {
+  id: 'tabs-demo',
+  text: 'Tabs Demo',
+  args: {
+    defaultIndex: 0,
+    pagePadding: '16px',
+  },
+  argTypes: {
+    defaultIndex: { control: 'number', description: 'Index of the active tab on load' },
+    pagePadding: { control: 'text', description: 'Padding inside each tab page' },
+  },
+  render: (args) => {
+    return (
+      <div style={{ height: '300px', width: '500px', border: '1px solid #ccc' }}>
+        <Tabs
+          defaultIndex={args.defaultIndex}
+          pagePadding={args.pagePadding}
+          pages={[
+            { title: 'Tab 1', page: <div>Content for Tab 1</div> },
+            { title: 'Tab 2', page: <div>Content for Tab 2</div> },
+            { title: 'Tab 3', page: <div style={{ color: 'red' }}>Content for Tab 3</div> },
+          ]}
+        />
+      </div>
+    );
+  },
+  code: `import { Tabs } from 'lupine.components/components/tabs';
+
+<Tabs 
+  defaultIndex={0} 
+  pagePadding="16px" 
+  pages={[
+    { title: 'Tab 1', page: <div>Content for Tab 1</div> },
+    { title: 'Tab 2', page: <div>Content for Tab 2</div> },
+    { title: 'Tab 3', page: <div style={{ color: 'red' }}>Content for Tab 3</div> },
+  ]} 
+/>
+`,
+};

package/src/components/text-glow-demo.tsx

@@ -0,0 +1,46 @@
+import { DemoStory } from '../demo/demo-types';
+import { TextGlow, TextGlowProps } from './text-glow';
+
+export const textGlowDemo: DemoStory<TextGlowProps> = {
+  id: 'text-glow-demo',
+  text: 'Text Glow Demo',
+  args: {
+    text: 'NEON GLOW',
+    color: '#ffffff',
+    fontSize: '40px',
+    padding: '30px',
+    fontWeight: 'bold',
+  },
+  argTypes: {
+    text: { control: 'text', description: 'The text to animate' },
+    color: { control: 'text', description: 'Color of the base text' },
+    fontSize: { control: 'text', description: 'Font size' },
+    padding: { control: 'text', description: 'Padding around text' },
+    fontWeight: { control: 'text', description: 'Font weight' },
+  },
+  render: (args) => {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '200px',
+          backgroundColor: '#111',
+        }}
+      >
+        <TextGlow {...args} />
+      </div>
+    );
+  },
+  code: `import { TextGlow } from 'lupine.components/components/text-glow';
+
+<TextGlow 
+  text="NEON GLOW" 
+  color="#ffffff" 
+  fontSize="40px" 
+  padding="30px" 
+  fontWeight="bold" 
+/>
+`,
+};

package/src/components/text-scale-demo.tsx

@@ -0,0 +1,41 @@
+import { DemoStory } from '../demo/demo-types';
+import { TextScale, TextScaleProps } from './text-scale';
+
+export const textScaleDemo: DemoStory<TextScaleProps> = {
+  id: 'text-scale-demo',
+  text: 'Text Scale Demo',
+  args: {
+    text: 'Scaling Text!!!',
+    color: '#22b8ff',
+    backgroundColor: '#a1ffe8',
+    fontSize: '35px',
+    padding: '15px 30px',
+    fontWeight: 'bold',
+  },
+  argTypes: {
+    text: { control: 'text', description: 'The text to animate' },
+    color: { control: 'text', description: 'Color of the text' },
+    backgroundColor: { control: 'text', description: 'Background color behind text' },
+    fontSize: { control: 'text', description: 'Font size' },
+    padding: { control: 'text', description: 'Padding around background' },
+    fontWeight: { control: 'text', description: 'Font weight' },
+  },
+  render: (args) => {
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '200px' }}>
+        <TextScale {...args} />
+      </div>
+    );
+  },
+  code: `import { TextScale } from 'lupine.components/components/text-scale';
+
+<TextScale 
+  text="Scaling Text!!!" 
+  color="#22b8ff" 
+  backgroundColor="#a1ffe8" 
+  fontSize="35px" 
+  padding="15px 30px" 
+  fontWeight="bold" 
+/>
+`,
+};

package/src/components/text-wave-demo.tsx

@@ -0,0 +1,46 @@
+import { DemoStory } from '../demo/demo-types';
+import { TextWave, TextLoadingProps } from './text-wave';
+
+export const textWaveDemo: DemoStory<TextLoadingProps> = {
+  id: 'text-wave-demo',
+  text: 'Text Wave Demo',
+  args: {
+    text: 'Loading...',
+    color: '#22b8ff',
+    fontSize: '30px',
+    padding: '20px',
+    fontWeight: 'bold',
+  },
+  argTypes: {
+    text: { control: 'text', description: 'The text to animate' },
+    color: { control: 'text', description: 'Color of the text' },
+    fontSize: { control: 'text', description: 'Font size' },
+    padding: { control: 'text', description: 'Padding around text' },
+    fontWeight: { control: 'text', description: 'Font weight' },
+  },
+  render: (args) => {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '200px',
+          backgroundColor: '#f0f0f0',
+        }}
+      >
+        <TextWave {...args} />
+      </div>
+    );
+  },
+  code: `import { TextWave } from 'lupine.components/components/text-wave';
+
+<TextWave 
+  text="Loading..." 
+  color="#22b8ff" 
+  fontSize="30px" 
+  padding="20px" 
+  fontWeight="bold" 
+/>
+`,
+};