@tcn/ui 0.0.2 → 0.0.4

package/src/stacks/v_stack.stories.tsx

@@ -1,23 +1,95 @@
+import { Meta } from '@storybook/react-vite';
 import { Circle } from './story_components/circle.js';
 import { StyleBox } from './story_components/style_box.js';
-import { VStack } from './v_stack.js';
+import { VStack as VStackComponent, type VStackProps } from './v_stack.js';
 import { Rect } from './story_components/rect.js';
 import { PicturePlaceholder } from './story_components/picture_placeholder.js';
 
-export default {
-  title: 'VStack',
+const meta: Meta<VStackProps> = {
+  title: 'Stacks/VStack',
+  component: VStackComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A vertical stack component that can be used to arrange elements vertically.',
+      },
+    },
+  },
+  args: {
+    width: '150px',
+    vAlign: 'center',
+    gap: '25px',
+  },
+  argTypes: {
+    as: { table: { disable: true } },
+    children: { table: { disable: true } },
+    zIndex: { table: { disable: true } },
+    className: { table: { disable: true } },
+    inline: { table: { disable: true } },
+    style: { table: { disable: true } },
+    overflowX: {
+      options: [undefined, 'hidden', 'visible'],
+      control: { type: 'select' },
+    },
+    overflowY: {
+      options: [undefined, 'auto', 'scroll', 'hidden', 'visible'],
+      control: { type: 'select' },
+    },
+    vAlign: {
+      options: ['start', 'center', 'end'],
+      control: { type: 'radio' },
+    },
+    hAlign: {
+      options: ['start', 'center', 'end'],
+      control: { type: 'radio' },
+    },
+    width: {
+      control: { type: 'text' },
+    },
+    minWidth: {
+      control: { type: 'text' },
+    },
+    maxWidth: {
+      control: { type: 'text' },
+    },
+    height: {
+      control: { type: 'text' },
+    },
+    minHeight: {
+      control: { type: 'text' },
+    },
+    maxHeight: {
+      control: { type: 'text' },
+    },
+    allowFlow: {
+      control: { type: 'boolean' },
+    },
+    gap: {
+      control: { type: 'text' },
+    },
+    growWeight: {
+      control: { type: 'number' },
+    },
+    shrinkWeight: {
+      control: { type: 'number' },
+    },
+  },
 };
 
-export function Basic({ transform }: { transform?: string }) {
+export default meta;
+
+export function VStack(props: VStackProps) {
   return (
     <StyleBox
       borderLeft="1px dashed #ccc"
-      width="150px"
+      width="auto"
       height="auto"
       borderRight="1px dashed #ccc"
-      transform={transform}
+      backgroundColor="white"
     >
-      <VStack vAlign="center" gap="25px">
+      <VStackComponent {...props}>
         <Rect width="150px" height="150px" color="#acdef0">
           Content
         </Rect>
@@ -25,16 +97,25 @@ export function Basic({ transform }: { transform?: string }) {
           Content
         </Circle>
         <PicturePlaceholder size="150px" />
-      </VStack>
+      </VStackComponent>
     </StyleBox>
   );
 }
 
+VStack.storyName = 'VStack';
+
 export function Padding() {
   return (
-    <VStack width="auto" style={{ border: '1px dashed #ccc' }} padding="30px">
+    <StyleBox
+      borderLeft="1px dashed #ccc"
+      width="auto"
+      height="auto"
+      borderRight="1px dashed #ccc"
+      backgroundColor="white"
+      padding="30px"
+    >
       <Circle></Circle>
       <Circle></Circle>
-    </VStack>
+    </StyleBox>
   );
 }

package/src/stacks/v_stack.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { HTMLAttributes } from 'react';
 import { removeUndefinedProperties } from './utils/remove_undefined_properties.js';
 import { CommonProps } from './types/common.js';
@@ -100,7 +100,7 @@ export const VStack = React.forwardRef(function VStack<
   return (
     <As
       ref={ref}
-      className={classNames(styles['v-stack'], className, 'v-stack', 'stack')}
+      className={clsx(styles['v-stack'], className, 'v-stack', 'stack')}
       style={finalStyles}
       data-inline={Boolean(inline)}
       data-allow-flow={Boolean(allowFlow)}

package/src/stacks/z_stack.stories.tsx

@@ -4,8 +4,16 @@ import { StyleBox } from './story_components/style_box.js';
 import { ZStack } from './z_stack.js';
 
 export default {
-  title: 'ZStack',
+  title: 'Stacks/ZStack',
   component: ZStack,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A stack component that can be used to arrange elements in a z-axis.',
+      },
+    },
+  },
 };
 
 function forEachNumber(startIndex: number, endIndex: number) {

package/src/stacks/z_stack.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { HTMLAttributes } from 'react';
 import { removeUndefinedProperties } from './utils/remove_undefined_properties.js';
 import { CommonProps } from './types/common.js';
@@ -90,7 +90,7 @@ export const ZStack = React.forwardRef(function ZStack<T extends HTMLElement>(
         ...removeUndefinedProperties(defaultStyles),
         ...style,
       }}
-      className={classNames(styles['z-stack'], className, 'z-stack', 'stack')}
+      className={clsx(styles['z-stack'], className, 'z-stack', 'stack')}
       data-inline={Boolean(inline)}
       data-v-alignment={vAlign}
       data-h-alignment={hAlign}

package/src/surfaces/alert/alert.stories.tsx

@@ -1,14 +1,14 @@
 import { ZStack } from '../../stacks/z_stack.js';
 import React, { useState } from 'react';
-import { Alert } from './alert.js';
+import { Alert as AlertComponent } from './alert.js';
 import { Button } from '../../actions/index.js';
 import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';
 
 export default {
-  title: 'Alert',
+  title: 'Surfaces/Alert',
 };
 
-export function Baseline() {
+export function Alert() {
   const [showAlert, setShowAlert] = useState(false);
 
   function open() {
@@ -21,7 +21,7 @@ export function Baseline() {
   return (
     <ZStack>
       <Button onClick={open}>Open Alert</Button>
-      <Alert
+      <AlertComponent
         title="STOP"
         graphic={<AlertTriangleIcon color="#ff6565" width="80px" height="80px" />}
         description="This is where you should say something helpful to the user."

package/src/surfaces/alert/alert.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import { Button } from '../../actions/index.js';
 import { Confirm, ConfirmProps } from '../confirm/confirm.js';
@@ -18,7 +18,7 @@ export const Alert = React.forwardRef(function Alert(
   return (
     <Confirm
       ref={ref}
-      className={classNames(className, 'alert')}
+      className={clsx(className, 'alert')}
       {...props}
       actions={
         <Button onClick={onAccept} hierarchy="primary" width="100%">

package/src/surfaces/card/card.tsx

@@ -1,5 +1,5 @@
 import { VStack, type VStackProps } from '../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './card.module.css';
 
@@ -15,7 +15,7 @@ export const Card = React.forwardRef<HTMLElement, CardProps>(function VPanel(
     <VStack
       ref={ref}
       as="section"
-      className={classNames(className, styles.card, 'card')}
+      className={clsx(className, styles.card, 'card')}
       {...props}
     >
       {children}

package/src/surfaces/confirm/confirm.stories.tsx

@@ -1,14 +1,14 @@
 import { ZStack } from '../../stacks/z_stack.js';
 import React, { useState } from 'react';
 import { Button } from '../../actions/index.js';
-import { Confirm } from './confirm.js';
+import { Confirm as ConfirmComponent } from './confirm.js';
 import { BulbIcon } from '@tcn/icons/bulb_icon.js';
 
 export default {
-  title: 'Confirm',
+  title: 'Surfaces/Confirm',
 };
 
-export function Baseline() {
+export function Confirm() {
   const [showAlert, setShowAlert] = useState(false);
 
   function open() {
@@ -22,7 +22,7 @@ export function Baseline() {
   return (
     <ZStack>
       <Button onClick={open}>Show Tip</Button>
-      <Confirm
+      <ConfirmComponent
         title="Tip"
         description="This is where you should say something helpful to the user."
         graphic={<BulbIcon color="#e48139" width="100px" height="100px" />}

package/src/surfaces/confirm/confirm.tsx

@@ -1,5 +1,5 @@
 import React, { useLayoutEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Spacer } from '../../stacks/spacer.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { ZStack } from '../../stacks/z_stack.js';
@@ -62,7 +62,7 @@ export const Confirm = React.forwardRef(function Confirm(
             <Box onClick={shakeConfirm} {...veilProps} height="100%"></Box>
             <div
               ref={ref}
-              className={classNames(styles.confirm, className, 'confirm')}
+              className={clsx(styles.confirm, className, 'confirm')}
               data-shake={shake}
               {...props}
             >
@@ -75,10 +75,7 @@ export const Confirm = React.forwardRef(function Confirm(
                   {description}
                 </BodyText>
                 <Spacer height="16px" />
-                <Box
-                  className={classNames(styles.actions, 'confirm-actions')}
-                  height="auto"
-                >
+                <Box className={clsx(styles.actions, 'confirm-actions')} height="auto">
                   {actions}
                 </Box>
               </VStack>

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

@@ -4,7 +4,7 @@ import { DrawerTop } from '../drawer_top/drawer_top';
 import { DrawerBottom } from '../drawer_bottom/drawer_bottom';
 
 export default {
-  title: 'Drawers / Drawers',
+  title: 'Surfaces/Drawers',
   component: DrawerStart,
   tags: ['autodocs'],
 };

package/src/surfaces/drawers/drawer_bottom/drawer_bottom.tsx

@@ -1,5 +1,5 @@
 import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './drawer_bottom.module.css';
 
@@ -13,7 +13,7 @@ export const DrawerBottom = React.forwardRef<HTMLElement, DrawerBottomProps>(
       <VStack
         ref={ref}
         as="section"
-        className={classNames(styles.drawerBottom, className, 'drawer-bottom')}
+        className={clsx(styles.drawerBottom, className, 'drawer-bottom')}
         {...props}
       >
         {children}

package/src/surfaces/drawers/drawer_end/drawer_end.tsx

@@ -1,5 +1,5 @@
 import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './drawer_end.module.css';
 
@@ -15,7 +15,7 @@ export const DrawerEnd = React.forwardRef<HTMLElement, DrawerEndProps>(function
     <VStack
       ref={ref}
       as="section"
-      className={classNames(styles.drawerEnd, className, 'drawerEnd')}
+      className={clsx(styles.drawerEnd, className, 'drawerEnd')}
       {...props}
     >
       {children}

package/src/surfaces/drawers/drawer_start/drawer_start.tsx

@@ -1,5 +1,5 @@
 import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './drawer_start.module.css';
 
@@ -13,7 +13,7 @@ export const DrawerStart = React.forwardRef<HTMLElement, DrawerStartProps>(
       <VStack
         ref={ref}
         as="section"
-        className={classNames(styles.drawerStart, className, 'drawerStart')}
+        className={clsx(styles.drawerStart, className, 'drawerStart')}
         {...props}
       >
         {children}

package/src/surfaces/drawers/drawer_top/drawer_top.tsx

@@ -1,5 +1,5 @@
 import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './drawer_top.module.css';
 
@@ -15,7 +15,7 @@ export const DrawerTop = React.forwardRef<HTMLElement, DrawerTopProps>(function
     <VStack
       ref={ref}
       as="section"
-      className={classNames(styles.drawerTop, className, 'drawerTop')}
+      className={clsx(styles.drawerTop, className, 'drawerTop')}
       {...props}
     >
       {children}

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

@@ -0,0 +1,54 @@
+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';
+
+export default {
+  title: 'Surfaces/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+};
+
+export const ModalStory = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  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>
+      )}
+    </ZStack>
+  );
+};

package/src/surfaces/modal/modal.module.css

@@ -1,3 +1,4 @@
 .modal {
-  background-color: var(--background-color-primary);
+  width: 100%;
+  height: 100%;
 }

package/src/surfaces/modal/modal.tsx

@@ -1,18 +1,21 @@
 import { VStack, type VStackProps } from '../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './modal.module.css';
 
-export interface ModalProps extends Omit<VStackProps, 'as' | 'children'> {
-  children?: React.ReactNode;
-}
+export type ModalProps = Omit<VStackProps<HTMLDialogElement>, 'as'>;
 
-export const Modal = React.forwardRef<HTMLElement, ModalProps>(function VPanel(
+export const Modal = React.forwardRef<HTMLDialogElement, ModalProps>(function Modal(
   { children, className, ...props }: ModalProps,
   ref
 ) {
   return (
-    <VStack ref={ref} className={classNames(className, styles.Modal, 'modal')} {...props}>
+    <VStack
+      ref={ref}
+      className={clsx(styles['modal'], 'tcn-modal', className)}
+      as="dialog"
+      {...props}
+    >
       {children}
     </VStack>
   );

package/src/surfaces/page/h_page.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './page.module.css';
 import { HStack, type HStackProps } from '../../stacks/h_stack.js';
@@ -13,7 +13,7 @@ export const HPage = React.forwardRef<HTMLElement, HPageProps>(function HPage(
     <HStack
       ref={ref}
       as="main"
-      className={classNames(styles.page, className, 'page')}
+      className={clsx(styles.page, className, 'page')}
       vAlign="start"
       {...props}
     >

package/src/surfaces/page/v_page.tsx

@@ -1,5 +1,5 @@
 import { VStack, type VStackProps } from '../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './page.module.css';
 
@@ -13,7 +13,7 @@ export const VPage = React.forwardRef<HTMLElement, VPageProps>(function VPage(
     <VStack
       ref={ref}
       as="main"
-      className={classNames(styles.page, className, 'page')}
+      className={clsx(styles.page, className, 'page')}
       {...props}
     >
       {children}

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

@@ -0,0 +1,68 @@
+import { BugIcon } from '@tcn/icons/bug_icon.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { GridOneIcon } from '@tcn/icons/grid_one_icon.js';
+import { Button } from '../../../actions/button/button/button.js';
+import { Footer } from '../../../layouts/footer/footer.js';
+import { Header } from '../../../layouts/header/header.js';
+import { Divider, VBody } from '../../../layouts/index.js';
+import { UtilityBar } from '../../../layouts/utility_bar/utility_bar.js';
+import { Box, Spacer } from '../../../stacks/index.js';
+import { Title } from '../../../typography/title/title.js';
+import { VPanel } from '../v_panel.js';
+// Styles
+import styles from './panel_stories.module.css';
+
+export default {
+  title: 'Surfaces/Panel',
+  component: VPanel,
+  tags: ['autodocs'],
+};
+
+export const Default = () => {
+  return (
+    <div className={styles['stories-container']}>
+      <VPanel maxHeight="600px">
+        <Header>
+          <Title>Panel Primary Header</Title>
+          <Spacer />
+          <Button hierarchy="tertiary">
+            <GridOneIcon />
+          </Button>
+          <Divider length="md" vertical />
+          <Button hierarchy="tertiary">
+            <CrossIcon />
+          </Button>
+        </Header>
+        <UtilityBar>
+          <Title>Utility Bar</Title>
+          <Spacer />
+          <Button hierarchy="tertiary">
+            <BugIcon />
+          </Button>
+          <Button hierarchy="tertiary">
+            <BugIcon />
+          </Button>
+          <Button hierarchy="tertiary">
+            <BugIcon />
+          </Button>
+          <Button hierarchy="tertiary">
+            <BugIcon />
+          </Button>
+        </UtilityBar>
+
+        <VBody>
+          <Box className={styles['content-box']} />
+          <Box className={styles['content-box']} />
+          <Box className={styles['content-box']} />
+          <Box className={styles['content-box']} />
+        </VBody>
+        <Footer>
+          <Title>Footer</Title>
+          <Spacer />
+          <Button hierarchy="secondary">Secondary</Button>
+          <Button hierarchy="primary">Primary</Button>
+        </Footer>
+      </VPanel>
+    </div>
+  );
+};

package/src/surfaces/panel/__stories__/panel_stories.module.css

@@ -0,0 +1,13 @@
+.content-box {
+  background: rgba(0, 128, 0, 0.5);
+  min-height: 200px;
+  width: 100%;
+}
+
+.stories-container {
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  background-color: #ccc;
+  overflow: auto;
+}

package/src/surfaces/panel/h_panel.tsx

@@ -1,9 +1,10 @@
-import { Box, type BoxProps } from '../../stacks/box/box.js';
-import { Alignment } from '../../stacks/types/alignment.js';
-import classNames from 'classnames';
 import React from 'react';
-import styles from './panel.module.css';
+import { clsx } from 'clsx';
+import { Box, type BoxProps } from '../../stacks/box/box.js';
 import { HStack } from '../../stacks/h_stack.js';
+import type { Alignment } from '../../stacks/types/alignment.js';
+// Styles
+import styles from './panel.module.css';
 
 export interface HPanelProps extends Omit<BoxProps, 'as'> {
   vAlign?: Alignment;
@@ -37,7 +38,7 @@ export const HPanel = React.forwardRef<HTMLElement, HPanelProps>(function HPanel
       maxHeight={maxHeight}
       data-h-alignment={hAlign}
       data-v-alignment={vAlign}
-      className={classNames(className, styles['panel'], 'panel')}
+      className={clsx(styles['panel'], className, 'panel', 'tcn-panel', 'tcn-h-panel')}
       {...props}
     >
       <HStack
@@ -49,7 +50,12 @@ export const HPanel = React.forwardRef<HTMLElement, HPanelProps>(function HPanel
         hAlign={hAlign}
         vAlign={vAlign}
         ref={ref}
-        className={classNames(styles['panel-stack'], className, 'panel-stack')}
+        className={clsx(
+          styles['panel-stack'],
+          className,
+          'panel-stack',
+          'tcn-panel-stack'
+        )}
         zIndex={0}
       >
         {children}

package/src/surfaces/panel/panel.module.css

@@ -1,14 +1,9 @@
-.panel {
-  background-color: #ffffff;
-  border-radius: 4px;
-}
-
 .panel-stack {
   width: 100%;
   height: 100%;
   overflow: auto;
 }
 
-.page-stack > :global(.stack) {
+/* .page-stack > :global(.stack) {
   gap: var(--gap);
-}
+} */