@solo-io-public/ui-components 0.0.0

package/src/components/MonacoEditor/MonacoEditorWithSettings.tsx

@@ -0,0 +1,376 @@
+import type { SerializedStyles } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Editor, type OnMount } from '@monaco-editor/react';
+import { Dropdown, Tooltip, type MenuProps } from 'antd';
+import { Copy, Settings } from 'lucide-react';
+import type * as monacoEditor from 'monaco-editor';
+import { initVimMode, type VimMode, VimMode as VimModeClass } from 'monaco-vim';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import { useEditorSettings } from './EditorSettingsContext';
+import { useSoloMode, type SoloMode } from '../../providers/SoloModeContext';
+
+// region Styles
+
+// The component reads its palette from CSS custom properties so consumers can
+// theme it, but ships dark-theme fallbacks so it looks right with no theming.
+const EditorContainer = styled.div<{ height: string; mode: SoloMode; styleOverrides?: SerializedStyles }>`
+  /* Include the 1px border in the 100% width/height so the container never spills
+     past a tight parent (e.g. an antd Drawer body), which would show scrollbars. */
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  height: ${props => props.height};
+  display: flex;
+  flex-direction: column;
+  background: transparent;
+  border-radius: 6px;
+  overflow: hidden;
+  /* Light gets a clearer border + a soft card shadow so the editor reads as an
+     elevated surface on a white page; dark keeps a subtle themed frame. */
+  ${props =>
+    props.mode === 'light'
+      ? `
+        border: 1px solid #cdd1d8;
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(16, 24, 40, 0.06);
+      `
+      : `border: 1px solid var(--color-border-base, #3f3f46);`}
+  ${props => props.styleOverrides}
+`;
+
+const EditorWrapper = styled.div`
+  flex: 1;
+  position: relative;
+  min-height: 0;
+  background: transparent;
+`;
+
+// Top-right control bar holding the (read-only) copy button and the settings gear.
+// Shifts left by `offsetRight` so it clears the editor's vertical scrollbar.
+const ControlsBar = styled.div<{ offsetRight: number }>`
+  position: absolute;
+  top: 8px;
+  right: ${props => props.offsetRight}px;
+  z-index: 10;
+  display: flex;
+  gap: 6px;
+  transition: right 0.15s ease;
+`;
+
+const IconActionButton = styled.button`
+  background: var(--color-bg-elevated, #1e1e22);
+  border: 1px solid var(--color-border-base, #3f3f46);
+  border-radius: 3px;
+  padding: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.08s ease;
+
+  &:hover {
+    background: var(--color-bg-hover, #282035);
+    border-color: var(--color-primary, #8134e2);
+  }
+
+  /* Active is a clearly distinct step from hover (deeper fill + press shift). */
+  &:active {
+    background: var(--color-bg-active, #352b48);
+    border-color: var(--color-primary, #8134e2);
+    transform: translateY(1px);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary, #8134e2);
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+    color: var(--color-text-primary, #fafafa);
+  }
+`;
+
+const VimStatusBar = styled.div`
+  padding: 4px 8px;
+  background: var(--color-bg-elevated, #1e1e22);
+  border-top: 1px solid var(--color-border-base, #3f3f46);
+  font-family: monospace;
+  font-size: 12px;
+  min-height: 24px;
+`;
+
+// region Component
+
+export interface MonacoEditorWithSettingsProps {
+  value: string;
+  onChange?: (value: string | undefined) => void;
+  language: string;
+  height?: string;
+  /** Defaults to the active `SoloContextProvider` mode when omitted. */
+  theme?: 'light' | 'dark';
+  options?: monacoEditor.editor.IStandaloneEditorConstructionOptions;
+  onMount?: OnMount;
+  readOnly?: boolean;
+  downloadFileName?: string;
+  onSave?: () => void;
+  onQuit?: () => void;
+  /** Emotion styles appended to the outer container. */
+  styleOverrides?: SerializedStyles;
+}
+
+export function MonacoEditorWithSettings({
+  value,
+  onChange,
+  language,
+  height = '100%',
+  theme,
+  options = {},
+  onMount,
+  readOnly = false,
+  downloadFileName,
+  onSave,
+  onQuit,
+  styleOverrides,
+}: MonacoEditorWithSettingsProps) {
+  const { vimEnabled, toggleVimMode, wordWrapEnabled, toggleWordWrap } = useEditorSettings();
+  // Vim is suppressed in read-only mode, regardless of the user's saved setting.
+  const vimActive = vimEnabled && !readOnly;
+  // Fall back to the provider's light/dark mode when no explicit theme is given.
+  const soloMode = useSoloMode();
+  const resolvedTheme = theme ?? soloMode;
+  const editorRef = useRef<monacoEditor.editor.IStandaloneCodeEditor | null>(null);
+  const vimModeRef = useRef<VimMode | null>(null);
+  const statusNodeRef = useRef<HTMLDivElement | null>(null);
+  const onSaveRef = useRef(onSave);
+  const onQuitRef = useRef(onQuit);
+  const disposablesRef = useRef<monacoEditor.IDisposable[]>([]);
+  // Width of the vertical scrollbar when it's visible; the controls shift left by this.
+  const [scrollbarWidth, setScrollbarWidth] = useState(0);
+
+  // Keep onSave and onQuit refs up to date
+  useEffect(() => {
+    onSaveRef.current = onSave;
+  }, [onSave]);
+
+  useEffect(() => {
+    onQuitRef.current = onQuit;
+  }, [onQuit]);
+
+  // Enable/disable vim mode for this editor instance
+  useEffect(() => {
+    if (!editorRef.current) return;
+
+    if (vimActive) {
+      // Enable vim mode
+      if (!vimModeRef.current && statusNodeRef.current) {
+        vimModeRef.current = initVimMode(editorRef.current, statusNodeRef.current);
+
+        // Set up vim save and quit commands using VimMode.Vim
+        setTimeout(() => {
+          try {
+            const Vim = (VimModeClass as any).Vim;
+            if (Vim && Vim.defineEx) {
+              if (onSaveRef.current) {
+                Vim.defineEx('write', 'w', () => {
+                  onSaveRef.current?.();
+                });
+              }
+              if (onQuitRef.current) {
+                Vim.defineEx('quit', 'q', () => {
+                  onQuitRef.current?.();
+                });
+              }
+              if (onSaveRef.current && onQuitRef.current) {
+                Vim.defineEx('wq', 'wq', () => {
+                  onSaveRef.current?.();
+                  onQuitRef.current?.();
+                });
+              }
+            }
+          } catch (e) {
+            console.error('Failed to setup vim commands:', e);
+          }
+        }, 100);
+      }
+    } else {
+      // Disable vim mode
+      if (vimModeRef.current) {
+        vimModeRef.current.dispose();
+        vimModeRef.current = null;
+      }
+    }
+  }, [vimActive]);
+
+  const handleEditorMount: OnMount = useCallback(
+    (editor, monaco) => {
+      editorRef.current = editor;
+
+      // Track the vertical scrollbar so the top-right controls can clear it.
+      const syncScrollbar = () => {
+        const layout = editor.getLayoutInfo();
+        const hasVerticalScrollbar = editor.getScrollHeight() > layout.height;
+        setScrollbarWidth(hasVerticalScrollbar ? layout.verticalScrollbarWidth : 0);
+      };
+      syncScrollbar();
+      disposablesRef.current.push(
+        editor.onDidContentSizeChange(syncScrollbar),
+        editor.onDidLayoutChange(syncScrollbar)
+      );
+
+      // Add keyboard shortcut for save (Cmd+S / Ctrl+S)
+      if (onSaveRef.current) {
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+          onSaveRef.current?.();
+        });
+      }
+
+      // Initialize vim mode if enabled (never in read-only mode)
+      if (vimActive && statusNodeRef.current && !vimModeRef.current) {
+        vimModeRef.current = initVimMode(editor, statusNodeRef.current);
+
+        // Set up vim save and quit commands using VimMode.Vim
+        setTimeout(() => {
+          try {
+            const Vim = (VimModeClass as any).Vim;
+            if (Vim && Vim.defineEx) {
+              if (onSaveRef.current) {
+                Vim.defineEx('write', 'w', () => {
+                  onSaveRef.current?.();
+                });
+              }
+              if (onQuitRef.current) {
+                Vim.defineEx('quit', 'q', () => {
+                  onQuitRef.current?.();
+                });
+              }
+              if (onSaveRef.current && onQuitRef.current) {
+                Vim.defineEx('wq', 'wq', () => {
+                  onSaveRef.current?.();
+                  onQuitRef.current?.();
+                });
+              }
+            }
+          } catch (e) {
+            console.error('Failed to setup vim commands:', e);
+          }
+        }, 100);
+      }
+
+      // Call custom onMount if provided
+      if (onMount) {
+        onMount(editor, monaco);
+      }
+    },
+    [onMount, vimActive]
+  );
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      vimModeRef.current?.dispose();
+      disposablesRef.current.forEach(d => d.dispose());
+    };
+  }, []);
+
+  const handleCopy = useCallback(async () => {
+    // Read the live editor content, not the (possibly stale) `value` prop.
+    const text = editorRef.current?.getValue() ?? value;
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success('Copied to clipboard');
+    } catch {
+      toast.error('Failed to copy to clipboard');
+    }
+  }, [value]);
+
+  const handleDownload = useCallback(() => {
+    const text = editorRef.current?.getValue() ?? value;
+    try {
+      const blob = new Blob([text], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+
+      // Determine file extension from language
+      let extension = 'txt';
+      if (language === 'json') extension = 'json';
+      else if (language === 'yaml' || language === 'yml') extension = 'yaml';
+      else if (language === 'javascript' || language === 'typescript')
+        extension = language === 'typescript' ? 'ts' : 'js';
+      else if (language === 'html') extension = 'html';
+      else if (language === 'css') extension = 'css';
+
+      a.download = downloadFileName || `content.${extension}`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      toast.success('Downloaded successfully');
+    } catch {
+      toast.error('Failed to download file');
+    }
+  }, [value, language, downloadFileName]);
+
+  const menuItems: MenuProps['items'] = [
+    // Copy lives in its own always-visible button (left of the gear), not the menu.
+    {
+      key: 'download',
+      label: 'Download',
+      onClick: handleDownload,
+    },
+    {
+      type: 'divider',
+    },
+    // Vim mode is meaningless when read-only, so omit the toggle there.
+    !readOnly && {
+      key: 'vim',
+      label: vimEnabled ? 'Disable Vim Mode' : 'Enable Vim Mode',
+      onClick: toggleVimMode,
+    },
+    {
+      key: 'wordwrap',
+      label: wordWrapEnabled ? 'Disable Word Wrap' : 'Enable Word Wrap',
+      onClick: toggleWordWrap,
+    },
+  ].filter(Boolean) as MenuProps['items'];
+
+  return (
+    <EditorContainer height={height} mode={resolvedTheme} styleOverrides={styleOverrides}>
+      <EditorWrapper>
+        <ControlsBar offsetRight={8 + scrollbarWidth}>
+          <Tooltip title='Copy to clipboard'>
+            <IconActionButton type='button' aria-label='Copy to clipboard' onClick={handleCopy}>
+              <Copy />
+            </IconActionButton>
+          </Tooltip>
+          <Dropdown menu={{ items: menuItems }} placement='bottomRight' trigger={['click']}>
+            <Tooltip title='More options'>
+              <IconActionButton type='button' aria-label='Editor settings'>
+                <Settings />
+              </IconActionButton>
+            </Tooltip>
+          </Dropdown>
+        </ControlsBar>
+        <Editor
+          height='100%'
+          language={language}
+          value={value}
+          onChange={onChange}
+          theme={resolvedTheme === 'dark' ? 'vs-dark' : 'vs'}
+          onMount={handleEditorMount}
+          options={{
+            // Keep Monaco fitted to its container as it resizes (e.g. a drawer
+            // opening) so it never ends up shorter than its box.
+            automaticLayout: true,
+            ...options,
+            readOnly,
+            wordWrap: wordWrapEnabled ? 'on' : 'off',
+          }}
+        />
+      </EditorWrapper>
+      {vimActive && <VimStatusBar ref={statusNodeRef as any} className='monaco-vim-status' />}
+    </EditorContainer>
+  );
+}

package/src/components/MonacoEditor/index.ts

@@ -0,0 +1,9 @@
+export {
+  MonacoEditorWithSettings,
+  type MonacoEditorWithSettingsProps
+} from './MonacoEditorWithSettings';
+export {
+  EditorSettingsProvider,
+  useEditorSettings,
+  type EditorSettings
+} from './EditorSettingsContext';

package/src/components/Text/Text.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Text } from './Text';
+
+const meta: Meta<typeof Text> = {
+  title: 'Common / Text',
+  component: Text,
+  args: {
+    children: 'The quick brown fox jumps over the lazy dog',
+    size: '16px'
+  }
+};
+export default meta;
+
+type Story = StoryObj<typeof Text>;
+
+// Default color follows the theme, so it flips with the light/dark toolbar.
+export const Default: Story = {};
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {['12px', '14px', '16px', '20px', '24px', '30px'].map(s => (
+        <Text key={s} size={s}>
+          {s} — The quick brown fox
+        </Text>
+      ))}
+    </div>
+  )
+};
+
+export const Weights: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {[300, 400, 500, 600, 700].map(w => (
+        <Text key={w} weight={w} size='18px'>
+          {w} — The quick brown fox
+        </Text>
+      ))}
+    </div>
+  )
+};
+
+export const Colors: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <Text size='18px'>Default — follows the theme&apos;s text color</Text>
+      <Text size='18px' color='var(--color-text-secondary, #a1a1aa)'>
+        Secondary — themed via CSS variable
+      </Text>
+      <Text size='18px' color='var(--color-primary, #6844ff)'>
+        Primary accent
+      </Text>
+    </div>
+  )
+};
+
+export const Truncate: Story = {
+  render: () => (
+    <Text truncate maxWidth='260px' size='16px'>
+      This is a very long single line of text that should be truncated with an ellipsis.
+    </Text>
+  )
+};

package/src/components/Text/Text.tsx

@@ -0,0 +1,65 @@
+import styled from '@emotion/styled';
+import type { CSSProperties } from 'react';
+import { cssProp, dontForwardProps } from '../../_internal/utils';
+import { Spacer, type SpacerProps } from '../Layout/Spacer';
+
+// region Helpers
+
+const truncated = `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+// region Component
+
+/**
+ * Typography primitive built on `Spacer` (so margin/padding/sizing props work
+ * too). Defaults to the theme's `--color-text-primary`, so text color follows
+ * the active light/dark mode unless `color` is set explicitly.
+ */
+export type TextProps = SpacerProps & {
+  size?: CSSProperties['fontSize'];
+  weight?: CSSProperties['fontWeight'];
+  lineHeight?: CSSProperties['lineHeight'];
+  color?: CSSProperties['color'];
+  textAlign?: CSSProperties['textAlign'];
+  whiteSpace?: CSSProperties['whiteSpace'];
+  truncate?: boolean;
+  wordBreak?: CSSProperties['wordBreak'];
+  textTransform?: CSSProperties['textTransform'];
+  fontStyle?: CSSProperties['fontStyle'];
+  inline?: boolean;
+};
+
+export const Text = styled(
+  Spacer,
+  dontForwardProps(
+    'size',
+    'weight',
+    'lineHeight',
+    'color',
+    'textAlign',
+    'whiteSpace',
+    'truncate',
+    'wordBreak',
+    'textTransform',
+    'fontStyle',
+    'inline'
+  )
+)<TextProps>(
+  ({ size, weight, lineHeight, color, textAlign, whiteSpace, truncate, wordBreak, textTransform, fontStyle, inline, display }) => `
+    font-family: var(--solo-font-family, inherit);
+    color: ${color ?? 'var(--color-text-primary, #fafafa)'};
+    ${cssProp('font-size', size)}
+    ${cssProp('font-weight', weight)}
+    ${cssProp('line-height', lineHeight)}
+    ${cssProp('text-align', textAlign)}
+    ${cssProp('white-space', whiteSpace)}
+    ${cssProp('word-break', wordBreak)}
+    ${cssProp('text-transform', textTransform)}
+    ${cssProp('font-style', fontStyle)}
+    ${cssProp('display', display ?? (inline ? 'inline' : 'block'))}
+    ${truncate ? truncated : ''}
+  `
+);

package/src/components/Text/index.ts

@@ -0,0 +1 @@
+export { Text, type TextProps } from './Text';

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from "./components/Alert";
+export * from "./components/Button";
+export * from "./components/CloseButton";
+export * from "./components/Layout";
+export * from "./components/MonacoEditor";
+export * from "./components/Text";
+export * from "./providers";