lupine.components 1.1.21 → 1.1.22

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

@@ -0,0 +1,68 @@
+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>
+      );
+    }
+  },
+};

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,24 @@
+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>
+    );
+  },
+};

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

@@ -0,0 +1,36 @@
+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>
+    );
+  },
+};

package/src/components/spinner-demo.tsx

@@ -0,0 +1,41 @@
+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>
+    );
+  },
+};

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

@@ -0,0 +1,26 @@
+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>
+    );
+  },
+};

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,26 @@
+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>
+    );
+  },
+};

package/src/components/tabs-demo.tsx

@@ -0,0 +1,30 @@
+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>
+    );
+  },
+};

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

@@ -0,0 +1,36 @@
+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>
+    );
+  },
+};

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

@@ -0,0 +1,30 @@
+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>
+    );
+  },
+};

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

@@ -0,0 +1,36 @@
+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>
+    );
+  },
+};

package/src/components/toggle-button-demo.tsx

@@ -0,0 +1,32 @@
+import { DemoStory } from '../demo/demo-types';
+import { ToggleButton } from './toggle-base';
+
+export const toggleButtonDemo: DemoStory<any> = {
+  id: 'toggle-button-demo',
+  text: 'Toggle Button Demo',
+  args: {
+    onText: 'Turn Off',
+    offText: 'Turn On',
+    disabled: false,
+    checked: false,
+  },
+  argTypes: {
+    onText: { control: 'text', description: 'Text shown when ON' },
+    offText: { control: 'text', description: 'Text shown when OFF' },
+    disabled: { control: 'boolean', description: 'Disabled state' },
+    checked: { control: 'boolean', description: 'Initial state' },
+  },
+  render: (args) => {
+    return (
+      <div style={{ padding: '20px' }}>
+        <ToggleButton
+          onText={args.onText}
+          offText={args.offText}
+          disabled={args.disabled}
+          checked={args.checked}
+          onClick={(val) => console.log('Toggled:', val)}
+        />
+      </div>
+    );
+  },
+};

package/src/components/toggle-play-button-demo.tsx

@@ -0,0 +1,44 @@
+import { DemoStory } from '../demo/demo-types';
+import { TogglePlayButton, TogglePlayButtonSize } from './toggle-base';
+
+export const togglePlayButtonDemo: DemoStory<any> = {
+  id: 'toggle-play-button-demo',
+  text: 'Toggle Play Button Demo',
+  args: {
+    size: 'Medium',
+    disabled: false,
+    checked: false,
+    textColor: '#ffffff',
+    backgroundColor: '#3b29cc',
+    noWave: false,
+  },
+  argTypes: {
+    size: { control: 'select', options: ['Small', 'Medium', 'Large'], description: 'Size preset' },
+    disabled: { control: 'boolean', description: 'Disabled state' },
+    checked: { control: 'boolean', description: 'Is playing?' },
+    textColor: { control: 'text', description: 'Color of the play icon' },
+    backgroundColor: { control: 'text', description: 'Background color of the button' },
+    noWave: { control: 'boolean', description: 'Disable the background wave animation' },
+  },
+  render: (args) => {
+    // Map string enum back to object
+    const sizeMap: any = {
+      Small: TogglePlayButtonSize.Small,
+      Medium: TogglePlayButtonSize.Medium,
+      Large: TogglePlayButtonSize.Large,
+    };
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '200px' }}>
+        <TogglePlayButton
+          size={sizeMap[args.size]}
+          disabled={args.disabled}
+          checked={args.checked}
+          textColor={args.textColor}
+          backgroundColor={args.backgroundColor}
+          noWave={args.noWave}
+          onClick={(val) => console.log('Playing:', val)}
+        />
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,33 @@
+import { DemoStory } from '../demo/demo-types';
+import { ToggleSwitch, ToggleSwitchProps, ToggleSwitchSize } from './toggle-switch';
+
+export const toggleSwitchDemo: DemoStory<ToggleSwitchProps> = {
+  id: 'toggle-switch-demo',
+  text: 'Toggle Switch Demo',
+  args: {
+    size: ToggleSwitchSize.Medium,
+    disabled: false,
+    checked: false,
+    text: { on: 'ON', off: 'OFF' },
+    textWidth: '30px',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: Object.values(ToggleSwitchSize),
+      description: 'The size of the switch',
+    },
+    disabled: { control: 'boolean', description: 'Whether the switch is disabled' },
+    checked: { control: 'boolean', description: 'Whether the switch is turned on' },
+    textWidth: { control: 'text', description: 'Fixed width for the text to prevent jumping' },
+  },
+  render: (args: ToggleSwitchProps) => {
+    // Note: We don't expose 'text' as a simple control because our current demo system
+    // handles primitives. But the user can see how it works with the default args.
+    return (
+      <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+        <ToggleSwitch {...args} />
+      </div>
+    );
+  },
+};

package/src/demo/demo-about.tsx

@@ -0,0 +1,12 @@
+import { CssProps } from 'lupine.components';
+
+export const DemoAboutPage = () => {
+  const css: CssProps = {};
+
+  return (
+    <div css={css} class='demo-about-top'>
+      <div class='row-box'>This is a demo page for testing components.</div>
+      <div class='row-box'></div>
+    </div>
+  );
+};

package/src/demo/demo-container.tsx

@@ -0,0 +1,57 @@
+import { CssProps, RefProps, VNode } from 'lupine.components';
+
+export type DemoContainerProps = {
+  demoUrl: string;
+  onIframeLoad?: (iframeWindow: Window) => void;
+  controlBox: VNode<any>;
+};
+export const DemoContainer = (props: DemoContainerProps) => {
+  const css: CssProps = {
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    '.&-iframe-box': {
+      flex: 1,
+      minHeight: '200px', // Ensure it has some height
+    },
+    '.&-iframe': {
+      width: '100%',
+      height: '100%',
+      // backgroundColor: 'white', // Default background for preview
+      border: 'dotted 1px red',
+    },
+    '.&-control-box': {
+      // Allow it to grow if needed, or scroll
+      minHeight: '50px',
+      maxHeight: '50%',
+      overflowY: 'auto',
+      borderTop: '1px solid var(--border-color, #ccc)',
+      padding: 'var(--space-m, 8px)',
+    },
+  };
+
+  const findIframe = () => {
+    const iframe = ref.$('&-iframe') as HTMLIFrameElement;
+    return iframe;
+  };
+
+  const onLoad = () => {
+    if (props.onIframeLoad) {
+      const iframe = findIframe();
+      if (iframe.contentWindow) {
+        props.onIframeLoad(iframe.contentWindow);
+      }
+    }
+  };
+
+  const ref: RefProps = {};
+  return (
+    <div css={css} ref={ref} class='demo-container-top'>
+      <div class='&-iframe-box'>
+        <iframe class='&-iframe' src={props.demoUrl} frameBorder='0' onLoad={onLoad}></iframe>
+      </div>
+      <div class='&-control-box'>{props.controlBox}</div>
+    </div>
+  );
+};

package/src/demo/demo-css.tsx

@@ -0,0 +1,3 @@
+import { CssProps } from 'lupine.components';
+
+export const demoCss: CssProps = {};