@tcn/ui 0.12.4 → 0.12.5

package/src/surfaces/modal/__stories__/modal.stories.tsx

@@ -3,7 +3,7 @@ import { Button } from '../../../actions/index.js';
 import { Footer, Header, UtilityBar, VBody } from '../../../layouts/index.js';
 import { ZStack } from '../../../stacks/z_stack.js';
 import { BodyText, Title } from '../../../typography/index.js';
-import { Modal } from '../modal.js';
+import { Modal, type ModalProps } from '../modal.js';
 import { Spacer } from '../../../stacks/index.js';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import { BugIcon } from '@tcn/icons/bug_icon.js';
@@ -12,9 +12,61 @@ export default {
   title: 'Surfaces/Modal',
   component: Modal,
   tags: ['autodocs'],
+  argTypes: {
+    draggable: {
+      control: 'boolean',
+    },
+    veil: {
+      control: 'boolean',
+    },
+    resizable: {
+      control: 'boolean',
+    },
+    width: {
+      control: 'text',
+    },
+    height: {
+      control: 'text',
+    },
+    minWidth: {
+      control: 'text',
+    },
+    minHeight: {
+      control: 'text',
+    },
+    maxWidth: {
+      control: 'text',
+    },
+    maxHeight: {
+      control: 'text',
+    },
+  },
 };
 
-export const ModalStory = () => {
+type ModalStoryProps = Pick<
+  ModalProps,
+  | 'resizable'
+  | 'draggable'
+  | 'veil'
+  | 'width'
+  | 'height'
+  | 'minWidth'
+  | 'minHeight'
+  | 'maxWidth'
+  | 'maxHeight'
+>;
+
+export const Baseline = ({
+  resizable,
+  draggable,
+  veil,
+  width = '400px',
+  height = '500px',
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+}: ModalStoryProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   function toggle() {
@@ -27,7 +79,20 @@ export const ModalStory = () => {
         {isOpen ? 'Close' : 'Open'}
       </Button>
 
-      <Modal isOpen={isOpen} width="400px" height="500px">
+      <Modal
+        isOpen={isOpen}
+        width={width}
+        height={height}
+        draggable={draggable}
+        veil={veil}
+        resizable={resizable}
+        minWidth={minWidth}
+        minHeight={minHeight}
+        maxWidth={maxWidth}
+        maxHeight={maxHeight}
+      >
+        {/* Add a drag handle around the areas of the modal you want to be draggable (usually the header) */}
+        {/* <DragHandle> */}
         <Header>
           <Title>Modal Title</Title>
           <Spacer />
@@ -41,6 +106,8 @@ export const ModalStory = () => {
             <CrossIcon />
           </Button>
         </Header>
+        {/* </DragHandle> */}
+
         <UtilityBar>
           <Title>Utility Bar</Title>
           <Spacer />

package/src/surfaces/modal/modal.tsx

@@ -9,15 +9,24 @@ import styles from './modal.module.css';
 export type ModalProps = FrameProps;
 
 export const Modal = React.forwardRef<HTMLElement, ModalProps>(function Modal(
-  { children, className, isOpen, draggable = false, veil = true, ...props }: ModalProps,
+  {
+    children,
+    className,
+    isOpen,
+    veil = true,
+    resizable = false,
+    draggable = false,
+    ...props
+  }: ModalProps,
   ref
 ) {
   return (
     <Frame
       ref={ref}
       isOpen={isOpen}
-      draggable={draggable}
       veil={veil}
+      draggable={draggable}
+      resizable={resizable}
       className={clsx(styles['modal'], 'tcn-surface', 'tcn-modal', className)}
       {...props}
     >

package/src/surfaces/window/window.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Window } from './window.js';
+import { Window, type WindowProps } from './window.js';
 import { Footer, Header, UtilityBar, VBody } from '../../layouts/index.js';
 import { BodyText, Title } from '../../typography/index.js';
 import { Spacer } from '../../stacks/spacer.js';
@@ -13,9 +13,61 @@ export default {
   title: 'Surfaces/Window',
   component: Window,
   tags: ['autodocs'],
+  argTypes: {
+    draggable: {
+      control: 'boolean',
+    },
+    veil: {
+      control: 'boolean',
+    },
+    resizable: {
+      control: 'boolean',
+    },
+    width: {
+      control: 'text',
+    },
+    height: {
+      control: 'text',
+    },
+    minWidth: {
+      control: 'text',
+    },
+    minHeight: {
+      control: 'text',
+    },
+    maxWidth: {
+      control: 'text',
+    },
+    maxHeight: {
+      control: 'text',
+    },
+  },
 };
 
-export const WindowStory = () => {
+type WindowStoryProps = Pick<
+  WindowProps,
+  | 'resizable'
+  | 'draggable'
+  | 'veil'
+  | 'width'
+  | 'height'
+  | 'minWidth'
+  | 'minHeight'
+  | 'maxWidth'
+  | 'maxHeight'
+>;
+
+export const Baseline = ({
+  resizable,
+  draggable,
+  veil,
+  width = '400px',
+  height = '400px',
+  minWidth = 'min-content',
+  minHeight = '30%',
+  maxWidth = 500,
+  maxHeight = '500px',
+}: WindowStoryProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   function toggle() {
@@ -27,13 +79,17 @@ export const WindowStory = () => {
       <Button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</Button>
       <Window
         isOpen={isOpen}
-        width="400px"
-        height="500px"
-        minWidth="min-content"
-        minHeight="300px"
-        maxWidth="600px"
-        maxHeight="600px"
+        draggable={draggable}
+        veil={veil}
+        resizable={resizable}
+        width={width}
+        height={height}
+        minWidth={minWidth}
+        minHeight={minHeight}
+        maxWidth={maxWidth}
+        maxHeight={maxHeight}
       >
+        {/* Place the drag handle around the areas of the window you want to be draggable (usually the header) */}
         <DragHandle>
           <Header>
             <Title>Window Title</Title>

package/src/surfaces/window/window.tsx

@@ -13,27 +13,24 @@ export const Window = React.forwardRef<HTMLElement, WindowProps>(function Window
     children,
     className,
     isOpen,
-    draggable = true,
-    resizable = true,
     veil = false,
-    width,
-    height,
+    draggable = true,
+    resizable = false,
     ...props
   }: WindowProps,
   ref
 ) {
   return (
     <Frame
+      ref={ref}
       isOpen={isOpen}
-      draggable={draggable}
       veil={veil}
+      draggable={draggable}
+      resizable={resizable}
       className={clsx(styles['window'], 'tcn-surface', 'tcn-window', className)}
-      width={width}
-      height={height}
-      ref={ref}
       {...props}
     >
-      <Scaffold width="100%" height="100%" className={'tcn-window-scaffold'}>
+      <Scaffold className={'tcn-window-scaffold'} width="100%" height="100%">
         {children}
       </Scaffold>
     </Frame>