lupine.components 1.1.21 → 1.1.23

package/package.json

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

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

@@ -0,0 +1,105 @@
+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>
+    );
+  },
+  code: `import { ActionSheet, ActionSheetSelect, ActionSheetMessage, ActionSheetInput } from 'lupine.components/components/action-sheet';
+
+// Simple Action Sheet
+ActionSheet.show({
+  title: 'Select an Action',
+  children: <div style={{ padding: '20px' }}>Custom Content Here</div>,
+  confirmButtonText: 'Confirm Option',
+  cancelButtonText: 'Cancel Action',
+  handleConfirmClicked: (close) => close('confirm'),
+});
+
+// Action Sheet Select
+ActionSheetSelect.show({
+  title: 'Select an Action',
+  options: ['Option A', 'Option B', 'Option C'],
+  handleClicked: (index, close) => close('select'),
+});
+`,
+};

package/src/components/button-demo.tsx

@@ -0,0 +1,33 @@
+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} />;
+  },
+  code: `import { Button, ButtonSize } from 'lupine.components/components/button';
+
+// Basic Usage
+<Button 
+  text="Click Me" 
+  size={ButtonSize.Medium} 
+  onClick={() => console.log('Clicked!')} 
+/>
+`,
+};

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

@@ -0,0 +1,32 @@
+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} />;
+  },
+  code: `import { ButtonPushAnimation, ButtonPushAnimationSize } from 'lupine.components/components/button-push-animation';
+
+<ButtonPushAnimation 
+  text="Push Me" 
+  size={ButtonPushAnimationSize.Medium} 
+  onClick={() => console.log('Pushed!')} 
+/>
+`,
+};

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,33 @@
+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>
+    );
+  },
+  code: `import { EditableLabel } from 'lupine.components/components/editable-label';
+
+<EditableLabel 
+  text="Double click to edit me!" 
+  mandtory={false} 
+  save={(val) => console.log('Saved:', val)} 
+/>
+`,
+};

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

@@ -0,0 +1,42 @@
+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>
+    );
+  },
+  code: `import { InputWithTitle } from 'lupine.components/components/input-with-title';
+
+{InputWithTitle(
+  'Enter your name', // title
+  'John Doe',        // defaultValue
+  (val) => console.log('onChange:', val),
+  (val) => console.log('onInput:', val),
+  'input-base',      // className
+  '250px'            // width
+)}
+`,
+};

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

@@ -0,0 +1,107 @@
+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>
+    );
+  },
+  code: `import { MessageBox, MessageBoxButtonProps } from 'lupine.components/components/message-box';
+
+// Quick Alert
+MessageBox.show({
+  title: 'System Alert',
+  buttonType: MessageBoxButtonProps.Ok,
+  children: <div style={{ padding: '20px' }}>Operation completed successfully!</div>,
+  handleClicked: (index, close) => {
+    close();
+  }
+});
+
+// Confirmation Dialog
+MessageBox.show({
+  title: 'Confirm Action',
+  buttonType: MessageBoxButtonProps.OkCancel,
+  children: <div style={{ padding: '20px' }}>Are you sure you want to proceed?</div>,
+  handleClicked: (index, close) => {
+    if (index === 0) {
+      console.log('User clicked OK');
+    } else {
+      console.log('User clicked Cancel');
+    }
+    close();
+  }
+});
+`,
+};

package/src/components/modal-demo.tsx

@@ -0,0 +1,56 @@
+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>
+    );
+  },
+  code: `import { ModalWindow } from 'lupine.components/components/modal';
+
+ModalWindow.show({
+  title: 'Example Modal',
+  children: <div style={{ padding: '20px' }}>This is the modal content!</div>,
+  buttons: ['Cancel', 'Confirm'],
+  handleClicked: (ind, close) => {
+    console.log('Clicked button:', ind);
+    close();
+  },
+});
+`,
+};

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

@@ -0,0 +1,60 @@
+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>
+    );
+  },
+  code: `import { NotificationMessage, NotificationColor } from 'lupine.components/components/notice-message';
+
+// Show Info
+NotificationMessage.sendMessage('Action completed successfully!', NotificationColor.Info);
+
+// Show Success (permanent)
+NotificationMessage.sendMessage('Action completed successfully!', NotificationColor.Success, true);
+`,
+};

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

@@ -0,0 +1,68 @@
+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>
+    );
+  },
+  code: `import { PopupMenuWithButton, PopupMenuWithLabel, PopupMenuWithIcon } from 'lupine.components/components/popup-menu';
+
+const list = ['Edit Profile', 'Settings', '', 'Log Out'];
+
+{/* With Button */}
+<PopupMenuWithButton
+  label="Actions"
+  list={list}
+  defaultValue="Select..."
+  align="right"
+  handleSelected={(val: string) => console.log('Selected:', val)}
+/>
+
+{/* With Icon */}
+<PopupMenuWithIcon
+  list={list}
+  icon={<span style={{ fontSize: '24px' }}>⚙️</span>}
+/>
+`,
+};

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,63 @@
+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>
+    );
+  },
+  code: `import { Progress, ProgressHookProps } from 'lupine.components/components/progress';
+
+const progressHook: ProgressHookProps = {};
+
+// 1. Render the component somewhere in your app (usually near the root)
+<Progress hook={progressHook} />
+
+// 2. Control it via the hook
+progressHook.onShow!(true, 'Uploading...'); // Show progress
+progressHook.onProgress!(0.5);              // Set to 50%
+progressHook.onShow!(false);                // Hide
+`,
+};