lupine.components 1.1.21 → 1.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.21",
+  "version": "1.1.22",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

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

@@ -0,0 +1,87 @@
+import { DemoStory } from '../demo/demo-types';
+import {
+  ActionSheet,
+  ActionSheetSelect,
+  ActionSheetMessage,
+  ActionSheetInput,
+  ActionSheetSelectOptionsProps,
+} from './action-sheet';
+import { Button, ButtonSize } from './button';
+
+export const actionSheetDemo: DemoStory<any> = {
+  id: 'action-sheet-demo',
+  text: 'Action Sheet Demo',
+  args: {
+    title: 'Select an Action',
+    confirmButtonText: 'Confirm Option',
+    cancelButtonText: 'Cancel Action',
+  },
+  argTypes: {
+    title: { control: 'text', description: 'Title of the action sheet' },
+    confirmButtonText: { control: 'text', description: 'Confirm button text' },
+    cancelButtonText: { control: 'text', description: 'Cancel button text' },
+  },
+  render: (args) => {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', padding: '20px' }}>
+        <Button
+          text='Show Simple Action Sheet'
+          size={ButtonSize.Medium}
+          onClick={() => {
+            ActionSheet.show({
+              title: args.title,
+              children: <div style={{ padding: '20px' }}>Custom Content Here</div>,
+              confirmButtonText: args.confirmButtonText,
+              cancelButtonText: args.cancelButtonText,
+              handleConfirmClicked: (close) => close('confirm'),
+            });
+          }}
+        />
+        <Button
+          text='Show Action Sheet Select'
+          size={ButtonSize.Medium}
+          onClick={() => {
+            ActionSheetSelect.show({
+              title: args.title,
+              options: ['Option A', 'Option B', 'Option C'],
+              confirmButtonText: args.confirmButtonText,
+              cancelButtonText: args.cancelButtonText,
+              handleClicked: (index, close) => {
+                console.log('Selected index:', index);
+                close('select');
+              },
+            });
+          }}
+        />
+        <Button
+          text='Show Action Sheet Message'
+          size={ButtonSize.Medium}
+          onClick={() => {
+            ActionSheetMessage.show({
+              title: args.title,
+              message: 'This is a detailed message shown inside the action sheet.',
+              confirmButtonText: args.confirmButtonText,
+              cancelButtonText: args.cancelButtonText,
+            });
+          }}
+        />
+        <Button
+          text='Show Action Sheet Input'
+          size={ButtonSize.Medium}
+          onClick={() => {
+            ActionSheetInput.show({
+              title: args.title,
+              defaultValue: 'Default text',
+              confirmButtonText: args.confirmButtonText,
+              cancelButtonText: args.cancelButtonText,
+              handleConfirmValue: (val, close) => {
+                console.log('Input value:', val);
+                close('confirm');
+              },
+            });
+          }}
+        />
+      </div>
+    );
+  },
+};

package/src/components/button-demo.tsx

@@ -0,0 +1,24 @@
+import { DemoStory } from '../demo/demo-types';
+import { Button, ButtonProps, ButtonSize } from './button';
+
+export const buttonDemo: DemoStory<ButtonProps> = {
+  id: 'button-demo',
+  text: 'Button Demo',
+  args: {
+    text: 'Click Me',
+    size: ButtonSize.Medium,
+    disabled: false,
+  },
+  argTypes: {
+    text: { control: 'text', description: 'The text displayed inside the button' },
+    size: {
+      control: 'select',
+      options: Object.values(ButtonSize),
+      description: 'The size of the button',
+    },
+    disabled: { control: 'boolean', description: 'Whether the button is disabled' },
+  },
+  render: (args: ButtonProps) => {
+    return <Button {...args} />;
+  },
+};

package/src/components/button-push-animation-demo.tsx

@@ -0,0 +1,24 @@
+import { DemoStory } from '../demo/demo-types';
+import { ButtonPushAnimation, ButtonPushAnimationProps, ButtonPushAnimationSize } from './button-push-animation';
+
+export const buttonPushAnimationDemo: DemoStory<ButtonPushAnimationProps> = {
+  id: 'button-push-animation-demo',
+  text: 'Button Push Animation Demo',
+  args: {
+    text: 'Push Me',
+    size: ButtonPushAnimationSize.Medium,
+    disabled: false,
+  },
+  argTypes: {
+    text: { control: 'text', description: 'The text displayed inside the button' },
+    size: {
+      control: 'select',
+      options: Object.values(ButtonPushAnimationSize),
+      description: 'The size of the button',
+    },
+    disabled: { control: 'boolean', description: 'Whether the button is disabled' },
+  },
+  render: (args: ButtonPushAnimationProps) => {
+    return <ButtonPushAnimation {...args} />;
+  },
+};

package/src/components/button-push-animation.tsx

@@ -86,6 +86,10 @@ export const ButtonPushAnimation = (props: ButtonPushAnimationProps) => {
       textShadow: 'rgba(0, 0, 0, 0.1) 0 0 0.1em',
       userSelect: 'none',
     },
+    '&:disabled .button-inner span': {
+      backgroundImage: 'linear-gradient(135deg, rgba(150, 150, 150, 1), rgba(200, 200, 200, 1))',
+      opacity: 0.7,
+    },
     '&.button-ss': {
       borderRadius: '2px',
     },
@@ -114,17 +118,17 @@ export const ButtonPushAnimation = (props: ButtonPushAnimationProps) => {
       padding: '0.5rem 1.5rem',
       fontSize: '2rem',
     },
-    '&:active .button-outer': {
+    '&:active:not(:disabled) .button-outer': {
       boxShadow: '0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5), 0 0 0 0 rgba(5, 5, 5, 0.25)',
     },
-    '&:active .button-inner': {
+    '&:active:not(:disabled) .button-inner': {
       boxShadow:
         '0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75), -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5), 0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5), 0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15), 0 0 0 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25)',
     },
-    '&:hover .button-inner': {
+    '&:hover:not(:disabled) .button-inner': {
       transform: 'scale(0.99)',
     },
-    '&:hover .button-inner span': {
+    '&:hover:not(:disabled) .button-inner span': {
       transform: 'scale(0.975)',
     },
     ...props.css,

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

@@ -0,0 +1,25 @@
+import { DemoStory } from '../demo/demo-types';
+import { EditableLabel, EditableLabelProps } from './editable-label';
+
+export const editableLabelDemo: DemoStory<EditableLabelProps> = {
+  id: 'editable-label-demo',
+  text: 'Editable Label Demo',
+  args: {
+    text: 'Double click to edit me!',
+    mandtory: false,
+  },
+  argTypes: {
+    text: { control: 'text', description: 'Initial text content' },
+    mandtory: { control: 'boolean', description: 'If true, value cannot be left empty' },
+  },
+  render: (args: EditableLabelProps) => {
+    return (
+      <div style={{ padding: '20px', width: '300px' }}>
+        <p style={{ color: '#666', fontSize: '13px', marginBottom: '10px' }}>
+          Instructions: Double-click the text below to switch to edit mode. Press Enter to save, or Escape to cancel.
+        </p>
+        <EditableLabel {...args} save={(val) => console.log('Saved:', val)} />
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,31 @@
+import { DemoStory } from '../demo/demo-types';
+import { InputWithTitle } from './input-with-title';
+
+export const inputWithTitleDemo: DemoStory<any> = {
+  id: 'input-with-title-demo',
+  text: 'Input With Title Demo',
+  args: {
+    title: 'Enter your name',
+    defaultValue: 'John Doe',
+    width: '250px',
+  },
+  argTypes: {
+    title: { control: 'text', description: 'Title text shown above input' },
+    defaultValue: { control: 'text', description: 'Initial default value' },
+    width: { control: 'text', description: 'Width of the input container' },
+  },
+  render: (args) => {
+    return (
+      <div style={{ padding: '20px' }}>
+        {InputWithTitle(
+          args.title,
+          args.defaultValue,
+          (val) => console.log('Input onChange:', val),
+          (val) => console.log('Input onInput:', val),
+          'input-base',
+          args.width
+        )}
+      </div>
+    );
+  },
+};

package/src/components/message-box-demo.tsx

@@ -0,0 +1,80 @@
+import { NotificationColor, NotificationMessage } from 'lupine.components';
+import { DemoStory } from '../demo/demo-types';
+import { MessageBox, MessageBoxButtonProps } from './message-box';
+import { Button, ButtonSize } from './button';
+
+export const messageBoxDemo: DemoStory<any> = {
+  id: 'message-box-demo',
+  text: 'MessageBox Demo',
+  args: {
+    title: 'System Alert',
+    contentMinWidth: '300px',
+  },
+  argTypes: {
+    title: { control: 'text', description: 'Title of the MessageBox' },
+    contentMinWidth: { control: 'text', description: 'Minimum width of MessageBox' },
+  },
+  render: (args) => {
+    return (
+      <div style={{ padding: '20px' }}>
+        <p style={{ color: '#666', marginBottom: '20px' }}>Test different button configurations for MessageBox.</p>
+
+        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+          <Button
+            text='Yes / No Dialog'
+            size={ButtonSize.Medium}
+            onClick={() => {
+              MessageBox.show({
+                title: args.title,
+                buttonType: MessageBoxButtonProps.YesNo,
+                contentMinWidth: args.contentMinWidth,
+                children: <div style={{ padding: '20px' }}>Are you sure you want to proceed?</div>,
+                handleClicked: (index, close) => {
+                  const result = index === 0 ? 'Yes' : 'No';
+                  NotificationMessage.sendMessage('You clicked: ' + result, NotificationColor.Info);
+                  close();
+                },
+              });
+            }}
+          />
+
+          <Button
+            text='Ok / Cancel Dialog'
+            size={ButtonSize.Medium}
+            onClick={() => {
+              MessageBox.show({
+                title: args.title,
+                buttonType: MessageBoxButtonProps.OkCancel,
+                contentMinWidth: args.contentMinWidth,
+                children: <div style={{ padding: '20px' }}>Please confirm this action.</div>,
+                handleClicked: (index, close) => {
+                  const result = index === 0 ? 'OK' : 'Cancel';
+                  const level = index === 0 ? NotificationColor.Success : NotificationColor.Warning;
+                  NotificationMessage.sendMessage('You clicked: ' + result, level);
+                  close();
+                },
+              });
+            }}
+          />
+
+          <Button
+            text='Ok Only'
+            size={ButtonSize.Medium}
+            onClick={() => {
+              MessageBox.show({
+                title: args.title,
+                buttonType: MessageBoxButtonProps.Ok,
+                contentMinWidth: args.contentMinWidth,
+                children: <div style={{ padding: '20px' }}>Operation completed successfully!</div>,
+                handleClicked: (index, close) => {
+                  NotificationMessage.sendMessage('Dialog dismissed', NotificationColor.Success);
+                  close();
+                },
+              });
+            }}
+          />
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/modal-demo.tsx

@@ -0,0 +1,44 @@
+import { DemoStory } from '../demo/demo-types';
+import { ModalWindow } from './modal';
+import { Button, ButtonSize } from './button';
+
+export const modalDemo: DemoStory<any> = {
+  id: 'modal-demo',
+  text: 'Modal Window Demo',
+  args: {
+    title: 'Example Modal',
+    noMoving: true,
+    noModal: false,
+    contentMinWidth: '300px',
+  },
+  argTypes: {
+    title: { control: 'text', description: 'Title of the modal' },
+    noMoving: { control: 'boolean', description: 'Disable dragging?' },
+    noModal: { control: 'boolean', description: "If true, it won't block background interaction" },
+    contentMinWidth: { control: 'text', description: 'Minimum width of modal' },
+  },
+  render: (args) => {
+    return (
+      <div style={{ padding: '20px' }}>
+        <Button
+          text='Open Modal'
+          size={ButtonSize.Medium}
+          onClick={() => {
+            ModalWindow.show({
+              title: args.title,
+              children: <div style={{ padding: '20px' }}>This is the modal content!</div>,
+              noMoving: args.noMoving,
+              noModal: args.noModal,
+              contentMinWidth: args.contentMinWidth,
+              buttons: ['Cancel', 'Confirm'],
+              handleClicked: (ind, close) => {
+                console.log('Clicked button:', ind);
+                close();
+              },
+            });
+          }}
+        />
+      </div>
+    );
+  },
+};

package/src/components/notice-message-demo.tsx

@@ -0,0 +1,52 @@
+import { DemoStory } from '../demo/demo-types';
+import { NotificationMessage, NotificationColor } from './notice-message';
+import { Button, ButtonSize } from './button';
+
+export const noticeMessageDemo: DemoStory<any> = {
+  id: 'notice-message-demo',
+  text: 'Notice Message Demo',
+  args: {
+    message: 'Action completed successfully!',
+    permanent: false,
+    showTime: 3000,
+  },
+  argTypes: {
+    message: { control: 'text', description: 'Message content' },
+    permanent: { control: 'boolean', description: 'If true, stays until manually closed' },
+    showTime: { control: 'number', description: 'Time in ms to show (if not permanent)' },
+  },
+  render: (args) => {
+    return (
+      <div style={{ padding: '20px', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        <Button
+          text='Show Info'
+          size={ButtonSize.Medium}
+          onClick={() =>
+            NotificationMessage.sendMessage(args.message, NotificationColor.Info, args.permanent, args.showTime)
+          }
+        />
+        <Button
+          text='Show Success'
+          size={ButtonSize.Medium}
+          onClick={() =>
+            NotificationMessage.sendMessage(args.message, NotificationColor.Success, args.permanent, args.showTime)
+          }
+        />
+        <Button
+          text='Show Warning'
+          size={ButtonSize.Medium}
+          onClick={() =>
+            NotificationMessage.sendMessage(args.message, NotificationColor.Warning, args.permanent, args.showTime)
+          }
+        />
+        <Button
+          text='Show Error'
+          size={ButtonSize.Medium}
+          onClick={() =>
+            NotificationMessage.sendMessage(args.message, NotificationColor.Error, args.permanent, args.showTime)
+          }
+        />
+      </div>
+    );
+  },
+};

package/src/components/popup-menu-demo.tsx

@@ -0,0 +1,49 @@
+import { DemoStory } from '../demo/demo-types';
+import { PopupMenuWithButton, PopupMenuWithLabel, PopupMenuWithIcon } from './popup-menu';
+
+export const popupMenuDemo: DemoStory<any> = {
+  id: 'popup-menu-demo',
+  text: 'Popup Menu Demo',
+  args: {
+    label: 'Actions',
+    defaultValue: 'Select...',
+    align: 'right',
+  },
+  argTypes: {
+    label: { control: 'text', description: 'Label for button/text triggers' },
+    defaultValue: { control: 'text', description: 'Default selected text' },
+    align: { control: 'select', options: ['left', 'right'], description: 'Menu drop alignment' },
+  },
+  render: (args) => {
+    const list = ['Edit Profile', 'Settings', '', 'Log Out'];
+    return (
+      <div style={{ padding: '20px', display: 'flex', gap: '40px', alignItems: 'flex-start' }}>
+        <div>
+          <h3>With Button</h3>
+          <PopupMenuWithButton
+            label={args.label}
+            list={list}
+            defaultValue={args.defaultValue}
+            align={args.align}
+            handleSelected={(val: string) => console.log('Selected:', val)}
+          />
+        </div>
+
+        <div>
+          <h3>With Label</h3>
+          <PopupMenuWithLabel label={args.label} list={list} defaultValue={args.defaultValue} align={args.align} />
+        </div>
+
+        <div>
+          <h3>With Icon</h3>
+          <PopupMenuWithIcon
+            list={list}
+            defaultValue={args.defaultValue}
+            align={args.align}
+            icon={<span style={{ fontSize: '24px' }}>⚙️</span>}
+          />
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/popup-menu.tsx

@@ -186,7 +186,7 @@ export const PopupMenu = ({
         padding: '5px 0px',
         overflow: 'auto',
         'line-height': '1.2em',
-        'min-width': minWidth || 'auto',
+        'min-width': minWidth || 'max-content',
         'max-width': maxWidth || '200px',
         'max-height': maxHeight || '300px',
         'box-shadow': 'var(--cover-box-shadow)', //'#0000004c 0px 19px 38px, #00000038 0px 15px 12px',

package/src/components/progress-demo.tsx

@@ -0,0 +1,51 @@
+import { RefProps } from 'lupine.web';
+import { DemoStory } from '../demo/demo-types';
+import { Progress, ProgressHookProps } from './progress';
+
+// Note: Progress uses a singleton-like hook approach internally,
+// so we create a dummy hook object to interact with it.
+const progressHook: ProgressHookProps = {};
+
+export const progressDemo: DemoStory<any> = {
+  id: 'progress-demo',
+  text: 'Progress Demo',
+  args: {
+    simulate: false,
+  },
+  argTypes: {
+    simulate: {
+      control: 'boolean',
+      description: 'Check this to simulate a 3-second progress upload',
+    },
+  },
+  render: (args) => {
+    const ref: RefProps = {
+      onLoad: async () => {
+        // If the simulate toggle is flipped, run a fake progression
+        if (args.simulate && progressHook.onShow) {
+          progressHook.onShow(true, 'Simulating Upload...');
+          let p = 0;
+          const interval = setInterval(() => {
+            p += 3;
+            if (p > 100) {
+              clearInterval(interval);
+              progressHook.onShow!(false);
+            } else {
+              progressHook.onProgress!(p / 100);
+            }
+          }, 100);
+        } else if (!args.simulate && progressHook.onShow) {
+          progressHook.onShow(false);
+        }
+      },
+    };
+    return (
+      <div ref={ref} style={{ padding: '20px' }}>
+        <p style={{ color: '#666' }}>
+          Toggle the 'simulate' control to see the fixed progress bar at the bottom of the screen.
+        </p>
+        <Progress hook={progressHook} />
+      </div>
+    );
+  },
+};

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

package/src/components/redirect-demo.tsx

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