@tcn/ui 0.0.4 → 0.2.0

package/src/overlay/frame/frame_stories.module.css

@@ -0,0 +1,14 @@
+.sb-frame-header {
+  background: var(--accent-color);
+  color: white;
+  font-weight: bold;
+  border: 2px solid black;
+  padding: var(--padding-medium);
+  border-radius: var(--shape-radius-medium);
+}
+
+.sb-frame-container {
+  background: #f7e9fe;
+  padding: var(--padding-medium);
+  border-radius: var(--shape-radius-large);
+}

package/src/overlay/index.ts

@@ -3,3 +3,4 @@ export * from './context_menu/context_menu.js';
 export * from './menu/menu.js';
 export * from './tooltip/tooltip.js';
 export * from './popper/popper.js';
+export { Frame, type FrameOwnProps, type FrameProps } from './frame/frame.js';

package/src/stacks/box/box.tsx

@@ -45,8 +45,14 @@ export interface BoxProps extends HTMLAttributes<HTMLElement> {
   enableResizeOnRight?: boolean;
   horizontalHandleProps?: HandleProps;
   verticalHandleProps?: HandleProps;
-  onWidthResize?: (width: number) => void;
-  onHeightResize?: (width: number) => void;
+  onWidthResize?: (
+    width: number
+    // origin: 'left' | 'right'
+  ) => void;
+  onHeightResize?: (
+    height: number
+    // origin: 'top' | 'bottom'
+  ) => void;
   onWidthResizeEnd?: (width: number) => void;
   onHeightResizeEnd?: (width: number) => void;
 }

package/src/surfaces/card/card.tsx

@@ -1,23 +1,17 @@
 import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import { clsx } from 'clsx';
 import React from 'react';
-import styles from './card.module.css';
 
 export interface CardProps extends Omit<VStackProps, 'as' | 'children'> {
   children?: React.ReactNode;
 }
 
-export const Card = React.forwardRef<HTMLElement, CardProps>(function VPanel(
+export const Card = React.forwardRef<HTMLElement, CardProps>(function Card(
   { children, className, ...props }: CardProps,
   ref
 ) {
   return (
-    <VStack
-      ref={ref}
-      as="section"
-      className={clsx(className, styles.card, 'card')}
-      {...props}
-    >
+    <VStack ref={ref} as="section" className={clsx(className, 'tcn-card')} {...props}>
       {children}
     </VStack>
   );

package/src/surfaces/index.ts

@@ -1,14 +1,14 @@
 export * from './alert/alert.js';
 export * from './card/card.js';
 export * from './confirm/confirm.js';
-export * from './modal/modal.js';
 export * from './page/h_page.js';
 export * from './page/v_page.js';
 export * from './panel/h_panel.js';
 export * from './panel/v_panel.js';
 export * from './popover/popover.js';
-export * from './window/window.js';
 export * from './drawers/drawer_bottom/drawer_bottom.js';
 export * from './drawers/drawer_top/drawer_top.js';
 export * from './drawers/drawer_start/drawer_start.js';
 export * from './drawers/drawer_end/drawer_end.js';
+export { Window, type WindowProps } from './window/window.js';
+export { Modal, type ModalProps } from './modal/modal.js';

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

@@ -1,11 +1,9 @@
 import { useState } from 'react';
 import { Button, SlimButton } from '../../../actions/index.js';
 import { Footer, Header, VBody } from '../../../layouts/index.js';
-import { Portal } from '../../../overlay/index.js';
 import { ZStack } from '../../../stacks/z_stack.js';
 import { BodyText, Title } from '../../../typography/index.js';
 import { Modal } from '../modal.js';
-import { ClickAwayListener } from '../../../utils/index.js';
 import { Spacer } from '../../../stacks/index.js';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 
@@ -21,34 +19,28 @@ export const ModalStory = () => {
   function toggle() {
     setIsOpen(!isOpen);
   }
+
   return (
     <ZStack height="100%" width="100%" minHeight="600px">
       <button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</button>
-      {isOpen && (
-        <Portal>
-          <ZStack width="100%" height="100%" className="tcn-veil">
-            <ClickAwayListener onClickAway={toggle}>
-              <Modal width="400px" height="500px">
-                <Header>
-                  <Title>Modal Title</Title>
-                  <Spacer />
-                  <SlimButton hierarchy="tertiary" onClick={toggle}>
-                    <CrossIcon />
-                  </SlimButton>
-                </Header>
-                <VBody>
-                  <BodyText>This is a modal</BodyText>
-                </VBody>
-                <Footer>
-                  <Spacer />
-                  <Button hierarchy="secondary">Cancel</Button>
-                  <Button hierarchy="primary">Save</Button>
-                </Footer>
-              </Modal>
-            </ClickAwayListener>
-          </ZStack>
-        </Portal>
-      )}
+
+      <Modal isOpen={isOpen} width="400px" height="500px">
+        <Header>
+          <Title>Modal Title</Title>
+          <Spacer />
+          <SlimButton hierarchy="tertiary" size="md" onClick={toggle}>
+            <CrossIcon />
+          </SlimButton>
+        </Header>
+        <VBody>
+          <BodyText>This is a modal</BodyText>
+        </VBody>
+        <Footer>
+          <Spacer />
+          <Button hierarchy="secondary">Cancel</Button>
+          <Button hierarchy="primary">Save</Button>
+        </Footer>
+      </Modal>
     </ZStack>
   );
 };

package/src/surfaces/modal/modal.tsx

@@ -2,21 +2,24 @@ import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import { clsx } from 'clsx';
 import React from 'react';
 import styles from './modal.module.css';
+import { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';
 
-export type ModalProps = Omit<VStackProps<HTMLDialogElement>, 'as'>;
+export type ModalProps = FrameOwnProps & Omit<VStackProps<HTMLDialogElement>, 'as'>;
 
 export const Modal = React.forwardRef<HTMLDialogElement, ModalProps>(function Modal(
-  { children, className, ...props }: ModalProps,
+  { children, className, isOpen, draggable = false, veil = true, ...props }: ModalProps,
   ref
 ) {
   return (
-    <VStack
-      ref={ref}
-      className={clsx(styles['modal'], 'tcn-modal', className)}
-      as="dialog"
-      {...props}
-    >
-      {children}
-    </VStack>
+    <Frame isOpen={isOpen} draggable={draggable} veil={veil}>
+      <VStack
+        ref={ref}
+        className={clsx(styles['modal'], 'tcn-modal', className)}
+        as="dialog"
+        {...props}
+      >
+        {children}
+      </VStack>
+    </Frame>
   );
 });

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

@@ -11,6 +11,7 @@ import { Title } from '../../../typography/title/title.js';
 import { VPanel } from '../v_panel.js';
 // Styles
 import styles from './panel_stories.module.css';
+import { SlimButton } from '../../../actions/index.js';
 
 export default {
   title: 'Surfaces/Panel',
@@ -25,29 +26,29 @@ export const Default = () => {
         <Header>
           <Title>Panel Primary Header</Title>
           <Spacer />
-          <Button hierarchy="tertiary">
+          <SlimButton hierarchy="tertiary">
             <GridOneIcon />
-          </Button>
+          </SlimButton>
           <Divider length="md" vertical />
-          <Button hierarchy="tertiary">
+          <SlimButton hierarchy="tertiary">
             <CrossIcon />
-          </Button>
+          </SlimButton>
         </Header>
         <UtilityBar>
           <Title>Utility Bar</Title>
           <Spacer />
-          <Button hierarchy="tertiary">
+          <SlimButton hierarchy="tertiary">
             <BugIcon />
-          </Button>
-          <Button hierarchy="tertiary">
+          </SlimButton>
+          <SlimButton hierarchy="tertiary">
             <BugIcon />
-          </Button>
-          <Button hierarchy="tertiary">
+          </SlimButton>
+          <SlimButton size="md" hierarchy="tertiary">
             <BugIcon />
-          </Button>
-          <Button hierarchy="tertiary">
+          </SlimButton>
+          <SlimButton hierarchy="tertiary">
             <BugIcon />
-          </Button>
+          </SlimButton>
         </UtilityBar>
 
         <VBody>

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

@@ -1,4 +1,12 @@
+import { useState } from 'react';
 import { Window } from './window.js';
+import { Footer, Header, VBody } from '../../layouts/index.js';
+import { BodyText, Title } from '../../typography/index.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { Button, SlimButton } from '../../actions/index.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import { DragHandle } from '../../utils/dnd/handle.js';
 
 export default {
   title: 'Surfaces/Window',
@@ -6,10 +14,35 @@ export default {
   tags: ['autodocs'],
 };
 
-export const ModalStory = () => {
+export const WindowStory = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  function toggle() {
+    setIsOpen(!isOpen);
+  }
+
   return (
-    <Window>
-      <>window</>
-    </Window>
+    <ZStack height="100%" width="100%" minHeight="600px">
+      <button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</button>
+      <Window isOpen={isOpen} width="400px" height="500px">
+        <DragHandle>
+          <Header>
+            <Title>Window Title</Title>
+            <Spacer />
+            <SlimButton hierarchy="tertiary" size="md" onClick={toggle}>
+              <CrossIcon />
+            </SlimButton>
+          </Header>
+        </DragHandle>
+        <VBody>
+          <BodyText>This is a window</BodyText>
+        </VBody>
+        <Footer>
+          <Spacer />
+          <Button hierarchy="secondary">Cancel</Button>
+          <Button hierarchy="primary">Save</Button>
+        </Footer>
+      </Window>
+    </ZStack>
   );
 };

package/src/surfaces/window/window.tsx

@@ -2,16 +2,24 @@ import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import { clsx } from 'clsx';
 import React from 'react';
 import styles from './window.module.css';
+import { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';
 
-export type WindowProps = Omit<VStackProps, 'as'>;
+export type WindowProps = FrameOwnProps & Omit<VStackProps<HTMLDialogElement>, 'as'>;
 
-export const Window = React.forwardRef<HTMLDivElement, WindowProps>(function Window(
-  { children, className, ...props }: WindowProps,
+export const Window = React.forwardRef<HTMLDialogElement, WindowProps>(function Window(
+  { children, className, isOpen, draggable = true, veil = false, ...props }: WindowProps,
   ref
 ) {
   return (
-    <VStack ref={ref} className={clsx(styles.window, className, 'window')} {...props}>
-      {children}
-    </VStack>
+    <Frame isOpen={isOpen} draggable={draggable} veil={veil}>
+      <VStack
+        ref={ref}
+        className={clsx(styles['window'], 'tcn-window', className)}
+        as="dialog"
+        {...props}
+      >
+        {children}
+      </VStack>
+    </Frame>
   );
 });

package/src/themes/themes/ergo/__stories__/components/material_picker/sb_inverted_materials.module.css

@@ -0,0 +1,34 @@
+.light-primary-inverted {
+  --action: var(--primary);
+  --on-action: var(--white);
+  --material: var(--white);
+  --on-material: var(--navy);
+}
+
+.light-secondary-inverted {
+  --action: var(--tan);
+  --on-action: var(--navy);
+  --material: var(--white);
+  --on-material: var(--navy);
+}
+
+.dark-primary-inverted {
+  --action: var(--slate);
+  --on-action: var(--white);
+  --material: var(--white);
+  --on-material: var(--navy);
+}
+
+.dark-secondary-inverted {
+  --action: var(--navy);
+  --on-action: var(--white);
+  --material: var(--white);
+  --on-material: var(--navy);
+}
+
+.surface-custom-inverted {
+  --action: var(--custom-material);
+  --on-action: var(--custom-on-material);
+  --material: var(--navy);
+  --on-material: var(--white);
+}

package/src/themes/themes/ergo/__stories__/components/material_picker/sb_material_picker.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { Header } from '../../../../../../layouts/index.js';
+import { Button } from '../../../../../../actions/button/button/button.js';
+import { theme } from '../../../../../theme_variables.js';
+
+// Styles
+import styles from './sb_inverted_materials.module.css';
+
+export const SB_MaterialPicker: React.FC<{
+  handleSurfaceClick: (surface: string) => () => void;
+}> = ({ handleSurfaceClick }) => {
+  return (
+    <Header gap={theme.gap.md} height="48px">
+      <Button
+        hierarchy="primary"
+        className={clsx(styles['light-primary-inverted'])}
+        onClick={handleSurfaceClick('light-primary')}
+      >
+        Light
+      </Button>
+      <Button
+        onClick={handleSurfaceClick('light-secondary')}
+        hierarchy="primary"
+        className={clsx(styles['light-secondary-inverted'])}
+      >
+        Light Variant
+      </Button>
+      <Button
+        onClick={handleSurfaceClick('dark-primary')}
+        hierarchy="primary"
+        className={clsx(styles['dark-primary-inverted'])}
+      >
+        Dark
+      </Button>
+      <Button
+        onClick={handleSurfaceClick('dark-secondary')}
+        hierarchy="primary"
+        className={clsx(styles['dark-secondary-inverted'])}
+      >
+        Dark Variant
+      </Button>
+      <Button
+        onClick={handleSurfaceClick('surface-custom')}
+        hierarchy="primary"
+        className={clsx(styles['surface-custom-inverted'])}
+      >
+        Custom
+      </Button>
+    </Header>
+  );
+};

package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_card.module.css

@@ -0,0 +1,5 @@
+.box {
+  height: 100px;
+  width: 100%;
+  background-color: rgba(120, 180, 255, 0.18);
+}

package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_tone_card.tsx

@@ -0,0 +1,40 @@
+import { Header, VBody } from '../../../../../../layouts/index.js';
+import { Card } from '../../../../../../surfaces/index.js';
+import { SlimButton } from '../../../../../../actions/button/slim_button/slim_button.js';
+import { Spacer } from '../../../../../../stacks/spacer.js';
+import { Box } from '../../../../../../stacks/index.js';
+import { InfoIcon } from '@tcn/icons/info_icon.js';
+import { AlertCircleIcon } from '@tcn/icons/alert_circle_icon.js';
+import { CheckCircleIcon } from '@tcn/icons/check_circle_icon.js';
+import { theme } from '../../../../../theme_variables.js';
+
+// Styles
+import styles from './sb_card.module.css';
+import type { SB_ToneListItem } from './types.js';
+
+export const SB_ToneCard: React.FC<{
+  item: SB_ToneListItem | null;
+}> = ({ item }) => {
+  return (
+    <Card data-tone={item?.tone || 'neutral'}>
+      <Header>
+        {item?.name ?? 'Neutral'}
+        <Spacer />
+        <SlimButton size="sm" hierarchy="tertiary">
+          <InfoIcon />
+        </SlimButton>
+        <SlimButton size="sm" hierarchy="secondary">
+          <AlertCircleIcon />
+        </SlimButton>
+        <SlimButton size="sm" hierarchy="primary">
+          <CheckCircleIcon />
+        </SlimButton>
+      </Header>
+      <VBody gap={theme.gap.md}>
+        <Box className={styles.box} />
+        <Box className={styles.box} />
+        <Box className={styles.box} />
+      </VBody>
+    </Card>
+  );
+};

package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_tone_picker.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { BodyText } from '../../../../../../typography/body_text/body_text.js';
+import { Item, List, SectionHeader } from '../../../../../../layouts/index.js';
+import { HStack } from '../../../../../../stacks/h_stack.js';
+import type { SB_ToneListItem } from './types.js';
+import { SB_ToneCard } from './sb_tone_card.js';
+import { theme } from '../../../../../theme_variables.js';
+import { VStack } from '../../../../../../stacks/v_stack.js';
+
+const items: SB_ToneListItem[] = [
+  {
+    id: 'positive',
+    name: 'Positive',
+    tone: 'positive',
+  },
+  {
+    id: 'notice',
+    name: 'Notice',
+    tone: 'notice',
+  },
+  {
+    id: 'neutral',
+    name: 'Neutral',
+    tone: 'neutral',
+  },
+  {
+    id: 'warning',
+    name: 'Warning',
+    tone: 'warning',
+  },
+  {
+    id: 'danger',
+    name: 'Danger',
+    tone: 'danger',
+  },
+];
+
+export const SB_TonePicker = () => {
+  const [selectedItem, setSelectedItem] = useState<SB_ToneListItem | null>(null);
+
+  const handleItemClick = (item: SB_ToneListItem) => () => {
+    setSelectedItem(item);
+  };
+
+  return (
+    <HStack
+      gap={theme.gap.md}
+      growWeight={1}
+      paddingTop={theme.padding.md}
+      paddingBottom={theme.padding.md}
+    >
+      <VStack
+        height="100%"
+        width="auto"
+        gap={theme.gap.md}
+        hAlign="start"
+        minWidth="300px"
+      >
+        <SectionHeader>Tone Picker (WIP)</SectionHeader>
+        <List
+          padding={theme.padding.md}
+          maxWidth="200px"
+          growWeight={1}
+          height="100%"
+          overflowY="auto"
+        >
+          {items.map(item => (
+            <Item
+              key={item.id}
+              onClick={handleItemClick(item)}
+              selected={selectedItem?.id === item.id}
+            >
+              <BodyText>{item.name}</BodyText>
+            </Item>
+          ))}
+        </List>
+      </VStack>
+      <VStack height="100%">
+        <SB_ToneCard item={selectedItem || null} />
+      </VStack>
+    </HStack>
+  );
+};

package/src/themes/themes/ergo/__stories__/components/tone_picker/types.ts

@@ -0,0 +1,7 @@
+export type SB_WipTone = 'positive' | 'notice' | 'neutral' | 'warning' | 'danger';
+
+export interface SB_ToneListItem {
+  id: string;
+  name: string;
+  tone: SB_WipTone;
+}