Stacks and InlineCode

apps/yaak-client/components/core/Alert.tsx

@@ -1,6 +1,6 @@
+import { HStack, VStack } from '@yaakapp-internal/ui';
 import type { ReactNode } from 'react';
 import { Button } from './Button';
-import { HStack, VStack } from './Stacks';
 
 export interface AlertProps {
   onHide: () => void;

apps/yaak-client/components/core/Checkbox.tsx

@@ -1,8 +1,7 @@
+import { HStack, Icon } from '@yaakapp-internal/ui';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
-import { Icon } from '@yaakapp-internal/ui';
 import { IconTooltip } from './IconTooltip';
-import { HStack } from './Stacks';
 
 export interface CheckboxProps {
   checked: boolean | 'indeterminate';

apps/yaak-client/components/core/Confirm.tsx

@@ -1,10 +1,10 @@
 import type { Color } from '@yaakapp-internal/plugins';
+import { HStack } from '@yaakapp-internal/ui';
 import type { FormEvent } from 'react';
 import { useState } from 'react';
 import { CopyIconButton } from '../CopyIconButton';
 import { Button } from './Button';
 import { PlainInput } from './PlainInput';
-import { HStack } from './Stacks';
 
 export interface ConfirmProps {
   onHide: () => void;

apps/yaak-client/components/core/Dialog.tsx

@@ -1,11 +1,10 @@
+import type { DialogSize } from '@yaakapp-internal/plugins';
+import { Heading, Overlay } from '@yaakapp-internal/ui';
 import classNames from 'classnames';
 import * as m from 'motion/react-m';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
-import { Overlay } from '@yaakapp-internal/ui';
-import { Heading } from './Heading';
 import { IconButton } from './IconButton';
-import type { DialogSize } from '@yaakapp-internal/plugins';
 
 export interface DialogProps {
   children: ReactNode;

apps/yaak-client/components/core/DismissibleBanner.tsx

@@ -1,10 +1,9 @@
 import type { Color } from '@yaakapp-internal/plugins';
+import type { BannerProps } from '@yaakapp-internal/ui';
+import { Banner, HStack } from '@yaakapp-internal/ui';
 import classNames from 'classnames';
 import { useKeyValue } from '../../hooks/useKeyValue';
-import type { BannerProps } from '@yaakapp-internal/ui';
-import { Banner } from '@yaakapp-internal/ui';
 import { Button } from './Button';
-import { HStack } from './Stacks';
 
 export function DismissibleBanner({
   children,

apps/yaak-client/components/core/Dropdown.tsx

@@ -1,3 +1,4 @@
+import { HStack, Icon, type IconProps, LoadingIcon, Overlay, VStack } from '@yaakapp-internal/ui';
 import classNames from 'classnames';
 import { atom } from 'jotai';
 import * as m from 'motion/react-m';
@@ -32,12 +33,9 @@ import { generateId } from '../../lib/generateId';
 import { getNodeText } from '../../lib/getNodeText';
 import { jotaiStore } from '../../lib/jotai';
 import { ErrorBoundary } from '../ErrorBoundary';
-import { Overlay } from '@yaakapp-internal/ui';
 import { Button } from './Button';
 import { Hotkey } from './Hotkey';
-import { Icon, LoadingIcon, type IconProps } from '@yaakapp-internal/ui';
 import { Separator } from './Separator';
-import { HStack, VStack } from './Stacks';
 
 export type DropdownItemSeparator = {
   type: 'separator';

apps/yaak-client/components/core/Editor/Editor.tsx

@@ -11,6 +11,7 @@ import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
 import type { EditorKeymap } from '@yaakapp-internal/models';
 import { settingsAtom } from '@yaakapp-internal/models';
 import type { EditorLanguage, TemplateFunction } from '@yaakapp-internal/plugins';
+import { HStack } from '@yaakapp-internal/ui';
 import classNames from 'classnames';
 import type { GraphQLSchema } from 'graphql';
 import { useAtomValue } from 'jotai';
@@ -38,7 +39,6 @@ import { jotaiStore } from '../../../lib/jotai';
 import { withEncryptionEnabled } from '../../../lib/setupOrConfigureEncryption';
 import { TemplateFunctionDialog } from '../../TemplateFunctionDialog';
 import { IconButton } from '../IconButton';
-import { HStack } from '../Stacks';
 import './Editor.css';
 import {
   baseExtensions,

apps/yaak-client/components/core/EventViewer.tsx

@@ -1,4 +1,6 @@
 import type { Virtualizer } from '@tanstack/react-virtual';
+import { Banner, HStack, SplitLayout } from '@yaakapp-internal/ui';
+import classNames from 'classnames';
 import { format } from 'date-fns';
 import type { ReactNode } from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
@@ -6,11 +8,8 @@ import { useEventViewerKeyboard } from '../../hooks/useEventViewerKeyboard';
 import { CopyIconButton } from '../CopyIconButton';
 import { AutoScroller } from './AutoScroller';
 import { Button } from './Button';
-import { Separator } from './Separator';
-import { Banner, SplitLayout } from '@yaakapp-internal/ui';
-import { HStack } from './Stacks';
 import { IconButton } from './IconButton';
-import classNames from 'classnames';
+import { Separator } from './Separator';
 
 interface EventViewerProps<T> {
   /** Array of events to display */
@@ -188,7 +187,11 @@ export function EventViewer<T>({
                     <Separator />
                   </div>
                   <div className="mx-2 overflow-y-auto">
-                    {renderDetail({ event: activeEvent, index: activeIndex ?? 0, onClose: handleClose })}
+                    {renderDetail({
+                      event: activeEvent,
+                      index: activeIndex ?? 0,
+                      onClose: handleClose,
+                    })}
                   </div>
                 </div>
               )
@@ -248,8 +251,21 @@ export function EventDetailHeader({
         {formattedTime && (
           <span className="text-text-subtlest font-mono text-editor ml-2">{formattedTime}</span>
         )}
-        <div className={classNames(copyText != null || formattedTime || (actions ?? []).length > 0 && "border-l border-l-surface-highlight ml-2 pl-3")}>
-        <IconButton color="custom" className="text-text-subtle -mr-3" size="xs" icon="x" title="Close event panel" onClick={onClose} />
+        <div
+          className={classNames(
+            copyText != null ||
+              formattedTime ||
+              ((actions ?? []).length > 0 && 'border-l border-l-surface-highlight ml-2 pl-3'),
+          )}
+        >
+          <IconButton
+            color="custom"
+            className="text-text-subtle -mr-3"
+            size="xs"
+            icon="x"
+            title="Close event panel"
+            onClick={onClose}
+          />
         </div>
       </HStack>
     </div>

apps/yaak-client/components/core/Heading.tsx

@@ -1,22 +0,0 @@
-import classNames from 'classnames';
-import type { HTMLAttributes } from 'react';
-
-interface Props extends HTMLAttributes<HTMLHeadingElement> {
-  level?: 1 | 2 | 3;
-}
-
-export function Heading({ className, level = 1, ...props }: Props) {
-  const Component = level === 1 ? 'h1' : level === 2 ? 'h2' : 'h3';
-  return (
-    <Component
-      className={classNames(
-        className,
-        'font-semibold text-text',
-        level === 1 && 'text-2xl',
-        level === 2 && 'text-xl',
-        level === 3 && 'text-lg',
-      )}
-      {...props}
-    />
-  );
-}

apps/yaak-client/components/core/Hotkey.tsx

@@ -1,7 +1,7 @@
+import { HStack } from '@yaakapp-internal/ui';
 import classNames from 'classnames';
 import type { HotkeyAction } from '../../hooks/useHotKey';
 import { useFormattedHotkey } from '../../hooks/useHotKey';
-import { HStack } from './Stacks';
 
 interface Props {
   action: HotkeyAction | null;

apps/yaak-client/components/core/Input.tsx

@@ -1,5 +1,6 @@
 import type { EditorView } from '@codemirror/view';
 import type { Color } from '@yaakapp-internal/plugins';
+import { HStack, Icon, type IconProps } from '@yaakapp-internal/ui';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -22,11 +23,9 @@ import type { DropdownItem } from './Dropdown';
 import { Dropdown } from './Dropdown';
 import type { EditorProps } from './Editor/Editor';
 import { Editor } from './Editor/LazyEditor';
-import { Icon, type IconProps } from '@yaakapp-internal/ui';
 import { IconButton } from './IconButton';
 import { IconTooltip } from './IconTooltip';
 import { Label } from './Label';
-import { HStack } from './Stacks';
 
 export type InputProps = Pick<
   EditorProps,

apps/yaak-client/components/core/PlainInput.tsx

@@ -1,3 +1,4 @@
+import { HStack } from '@yaakapp-internal/ui';
 import classNames from 'classnames';
 import type { FocusEvent, HTMLAttributes, ReactNode } from 'react';
 import {
@@ -14,7 +15,6 @@ import { generateId } from '../../lib/generateId';
 import { IconButton } from './IconButton';
 import type { InputProps } from './Input';
 import { Label } from './Label';
-import { HStack } from './Stacks';
 
 export type PlainInputProps = Omit<
   InputProps,

apps/yaak-client/components/core/Prompt.tsx

@@ -1,10 +1,10 @@
 import type { FormInput, JsonPrimitive } from '@yaakapp-internal/plugins';
+import { HStack } from '@yaakapp-internal/ui';
 import type { FormEvent } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { generateId } from '../../lib/generateId';
 import { DynamicForm } from '../DynamicForm';
 import { Button } from './Button';
-import { HStack } from './Stacks';
 
 export interface PromptProps {
   inputs: FormInput[];

apps/yaak-client/components/core/SegmentedControl.tsx

@@ -1,12 +1,12 @@
+import type { IconProps } from '@yaakapp-internal/ui';
+import { HStack } from '@yaakapp-internal/ui';
 import classNames from 'classnames';
 import { type ReactNode, useRef } from 'react';
 import { useStateWithDeps } from '../../hooks/useStateWithDeps';
 import { generateId } from '../../lib/generateId';
 import { Button } from './Button';
-import type { IconProps } from '@yaakapp-internal/ui';
 import { IconButton, type IconButtonProps } from './IconButton';
 import { Label } from './Label';
-import { HStack } from './Stacks';
 
 interface Props<T extends string> {
   options: { value: T; label: string; icon?: IconProps['icon'] }[];

apps/yaak-client/components/core/Select.tsx

@@ -1,4 +1,5 @@
 import { type } from '@tauri-apps/plugin-os';
+import { HStack } from '@yaakapp-internal/ui';
 import classNames from 'classnames';
 import type { CSSProperties, ReactNode } from 'react';
 import { useState } from 'react';
@@ -7,7 +8,6 @@ import { Button } from './Button';
 import { Label } from './Label';
 import type { RadioDropdownItem } from './RadioDropdown';
 import { RadioDropdown } from './RadioDropdown';
-import { HStack } from './Stacks';
 
 export interface SelectProps<T extends string> {
   name: string;

apps/yaak-client/components/core/Stacks.tsx

@@ -1,93 +0,0 @@
-import classNames from 'classnames';
-import type { ComponentType, ForwardedRef, HTMLAttributes, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-const gapClasses = {
-  0: 'gap-0',
-  0.5: 'gap-0.5',
-  1: 'gap-1',
-  1.5: 'gap-1.5',
-  2: 'gap-2',
-  3: 'gap-3',
-  4: 'gap-4',
-  5: 'gap-5',
-  6: 'gap-6',
-};
-
-interface HStackProps extends BaseStackProps {
-  children?: ReactNode;
-}
-
-export const HStack = forwardRef(function HStack(
-  { className, space, children, alignItems = 'center', ...props }: HStackProps,
-  // biome-ignore lint/suspicious/noExplicitAny: none
-  ref: ForwardedRef<any>,
-) {
-  return (
-    <BaseStack
-      ref={ref}
-      className={classNames(className, 'flex-row', space != null && gapClasses[space])}
-      alignItems={alignItems}
-      {...props}
-    >
-      {children}
-    </BaseStack>
-  );
-});
-
-export type VStackProps = BaseStackProps & {
-  children: ReactNode;
-};
-
-export const VStack = forwardRef(function VStack(
-  { className, space, children, ...props }: VStackProps,
-  // biome-ignore lint/suspicious/noExplicitAny: none
-  ref: ForwardedRef<any>,
-) {
-  return (
-    <BaseStack
-      ref={ref}
-      className={classNames(className, 'flex-col', space != null && gapClasses[space])}
-      {...props}
-    >
-      {children}
-    </BaseStack>
-  );
-});
-
-type BaseStackProps = HTMLAttributes<HTMLElement> & {
-  as?: ComponentType | 'ul' | 'label' | 'form' | 'p';
-  space?: keyof typeof gapClasses;
-  alignItems?: 'start' | 'center' | 'stretch' | 'end';
-  justifyContent?: 'start' | 'center' | 'end' | 'between';
-  wrap?: boolean;
-};
-
-const BaseStack = forwardRef(function BaseStack(
-  { className, alignItems, justifyContent, wrap, children, as, ...props }: BaseStackProps,
-  // biome-ignore lint/suspicious/noExplicitAny: none
-  ref: ForwardedRef<any>,
-) {
-  const Component = as ?? 'div';
-  return (
-    <Component
-      ref={ref}
-      className={classNames(
-        className,
-        'flex',
-        wrap && 'flex-wrap',
-        alignItems === 'center' && 'items-center',
-        alignItems === 'start' && 'items-start',
-        alignItems === 'stretch' && 'items-stretch',
-        alignItems === 'end' && 'items-end',
-        justifyContent === 'start' && 'justify-start',
-        justifyContent === 'center' && 'justify-center',
-        justifyContent === 'end' && 'justify-end',
-        justifyContent === 'between' && 'justify-between',
-      )}
-      {...props}
-    >
-      {children}
-    </Component>
-  );
-});

apps/yaak-client/components/core/Toast.tsx

@@ -1,12 +1,10 @@
 import type { ShowToastRequest } from '@yaakapp-internal/plugins';
+import { Icon, type IconProps, VStack } from '@yaakapp-internal/ui';
 import classNames from 'classnames';
 import * as m from 'motion/react-m';
 import type { ReactNode } from 'react';
-
 import { useKey } from 'react-use';
-import { Icon, type IconProps } from '@yaakapp-internal/ui';
 import { IconButton } from './IconButton';
-import { VStack } from './Stacks';
 
 export interface ToastProps {
   children: ReactNode;