@solo-io-public/ui-components 0.0.0

package/src/components/Layout/FlexLayout.tsx

@@ -0,0 +1,101 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import type { CSSProperties } from 'react';
+import { cssProp, dontForwardProps } from '../../_internal/utils';
+import { Spacer, type SpacerProps } from './Spacer';
+
+// region Component
+
+export type FlexLayoutProps = SpacerProps & {
+  horizontal?: boolean;
+  vertical?: boolean;
+  gap?: CSSProperties['gap'] | number;
+  display?: CSSProperties['display'];
+  flexWrap?: CSSProperties['flexWrap'];
+  justifyContent?: CSSProperties['justifyContent'];
+  alignItems?: CSSProperties['alignItems'];
+  alignContent?: CSSProperties['alignContent'];
+  flexDirection?: CSSProperties['flexDirection'];
+  overflow?: CSSProperties['overflow'];
+  column?: boolean;
+  row?: boolean;
+  nowrap?: boolean;
+  expandChildren?: boolean;
+};
+
+/**
+ * Quick horizontal, vertical, or centered (horizontal & vertical) flex layout.
+ * A numeric `gap` is treated as a 0.25em scale step (e.g. `gap={3}` → `0.75em`).
+ */
+export const FlexLayout = styled(
+  Spacer,
+  dontForwardProps(
+    'horizontal',
+    'vertical',
+    'gap',
+    'display',
+    'flexWrap',
+    'justifyContent',
+    'alignItems',
+    'alignContent',
+    'flexDirection',
+    'overflow',
+    'column',
+    'row',
+    'nowrap',
+    'expandChildren'
+  )
+)<FlexLayoutProps>(({
+  horizontal,
+  vertical,
+  gap,
+  display,
+  flexWrap,
+  nowrap,
+  justifyContent,
+  alignItems,
+  alignContent,
+  flexDirection,
+  column,
+  row,
+  maxWidth,
+  minWidth,
+  maxHeight,
+  expandChildren,
+  overflow
+}) => {
+  if (typeof gap === 'number') gap = gap * 0.25 + 'em';
+  return css`
+    display: flex;
+    ${cssProp('justify-content', justifyContent ? justifyContent : horizontal ? 'center' : undefined)}
+    ${cssProp('align-items', alignItems ? alignItems : vertical ? 'center' : undefined)}
+    ${cssProp('align-content', alignContent ? alignContent : vertical ? 'center' : undefined)}
+    ${cssProp('flex-direction', flexDirection ? flexDirection : column ? 'column' : row ? 'row' : undefined)}
+    ${cssProp('gap', gap)}
+    ${cssProp('display', display)}
+    ${cssProp('flex-wrap', flexWrap ? flexWrap : nowrap ? 'nowrap' : 'wrap')}
+    ${cssProp('overflow', overflow)}
+    max-width: ${maxWidth ?? '100%'};
+    ${minWidth
+      ? css`
+          min-width: ${minWidth};
+        `
+      : ''}
+    max-height: ${maxHeight ?? '100%'};
+    ${expandChildren &&
+    css`
+      > * {
+        flex-grow: 1;
+        width: auto;
+      }
+    `}
+  `;
+});
+
+/** Adds a `flex-grow: 1` filler into a flex layout. */
+export const FlexLayoutSpacer = styled.div<{ flexBasis?: CSSProperties['flexBasis'] }>(
+  ({ flexBasis }) => css`
+    flex-grow: 1;
+    ${cssProp('flex-basis', flexBasis)}
+  `
+);

package/src/components/Layout/Spacer.tsx

@@ -0,0 +1,131 @@
+import type { SerializedStyles } from '@emotion/react';
+import styled from '@emotion/styled';
+import type { ComponentProps, CSSProperties } from 'react';
+import { cssProp, dontForwardProps } from '../../_internal/utils';
+
+// region Helpers
+
+type SizeType = number | string;
+
+// region Component
+
+/**
+ * Margin/padding/sizing primitive. Use a string for exact values
+ * (e.g. `mx='5px'`). Directional props (`mr`, `mb`, …) override the axis
+ * shorthands (`mx`, `my`).
+ */
+export type SpacerProps = {
+  mx?: string;
+  my?: string;
+  mr?: string;
+  ml?: string;
+  mt?: string;
+  mb?: string;
+  margin?: string;
+  px?: string;
+  py?: string;
+  pr?: string;
+  pl?: string;
+  pt?: string;
+  pb?: string;
+  padding?: string;
+  display?: CSSProperties['display'];
+  position?: CSSProperties['position'];
+  minHeight?: SizeType;
+  minWidth?: CSSProperties['minWidth'];
+  height?: SizeType;
+  width?: SizeType;
+  maxHeight?: CSSProperties['maxHeight'];
+  maxWidth?: CSSProperties['maxWidth'];
+  flexGrow?: CSSProperties['flexGrow'];
+  flexBasis?: CSSProperties['flexBasis'];
+  flexShrink?: CSSProperties['flexShrink'];
+  overflowY?: CSSProperties['overflowY'];
+  overflowX?: CSSProperties['overflowX'];
+  textOverflow?: CSSProperties['textOverflow'];
+  overflow?: CSSProperties['overflow'];
+  zIndex?: CSSProperties['zIndex'];
+  stylingOverrides?: SerializedStyles;
+  fadeIn?: boolean;
+} & ComponentProps<'div'>;
+
+export const Spacer = styled(
+  'div',
+  dontForwardProps(
+    'mx',
+    'my',
+    'mr',
+    'ml',
+    'mt',
+    'mb',
+    'margin',
+    'px',
+    'py',
+    'pr',
+    'pl',
+    'pt',
+    'pb',
+    'padding',
+    'display',
+    'position',
+    'minHeight',
+    'minWidth',
+    'height',
+    'width',
+    'maxHeight',
+    'maxWidth',
+    'flexGrow',
+    'flexBasis',
+    'flexShrink',
+    'overflowY',
+    'overflowX',
+    'textOverflow',
+    'overflow',
+    'zIndex',
+    'stylingOverrides',
+    'fadeIn'
+  )
+)<SpacerProps>(props => {
+  const { mx, my, mr, ml, mt, mb, margin, px, py, pl, pr, pt, pb, padding } = props;
+  const marginRight = mr ?? mx;
+  const marginLeft = ml ?? mx;
+  const marginTop = mt ?? my;
+  const marginBottom = mb ?? my;
+  const paddingRight = pr ?? px;
+  const paddingLeft = pl ?? px;
+  const paddingTop = pt ?? py;
+  const paddingBottom = pb ?? py;
+  return `
+  ${cssProp('display', props.display)}
+  ${cssProp('position', props.position)}
+  ${cssProp('margin', margin)}
+  ${cssProp('margin-right', marginRight)}
+  ${cssProp('margin-left', marginLeft)}
+  ${cssProp('margin-top', marginTop)}
+  ${cssProp('margin-bottom', marginBottom)}
+  ${cssProp('padding', padding)}
+  ${cssProp('padding-right', paddingRight)}
+  ${cssProp('padding-left', paddingLeft)}
+  ${cssProp('padding-top', paddingTop)}
+  ${cssProp('padding-bottom', paddingBottom)}
+  ${cssProp('min-height', props.minHeight)}
+  ${cssProp('min-width', props.minWidth)}
+  ${cssProp('height', props.height)}
+  ${cssProp('width', props.width)}
+  ${cssProp('max-height', props.maxHeight)}
+  ${cssProp('max-width', props.maxWidth)}
+  ${cssProp('flex-grow', props.flexGrow)}
+  ${cssProp('flex-shrink', props.flexShrink)}
+  ${cssProp('flex-basis', props.flexBasis)}
+  ${cssProp('overflow-y', props.overflowY)}
+  ${cssProp('overflow-x', props.overflowX)}
+  ${cssProp('overflow', props.overflow)}
+  ${cssProp('text-overflow', props.textOverflow)}
+  ${cssProp('z-index', props.zIndex)}
+
+  animation: ${props.fadeIn ? `fadeIn 200ms cubic-bezier(0.22, 1, 0.36, 1) forwards` : 'none'};
+  ${props.fadeIn ? `@media (prefers-reduced-motion: reduce) { animation: none; opacity: 1; }` : ''}
+
+  ${props.stylingOverrides?.styles ? props.stylingOverrides.styles : ''}
+`;
+});

package/src/components/Layout/index.ts

@@ -0,0 +1,2 @@
+export { Spacer, type SpacerProps } from './Spacer';
+export { FlexLayout, FlexLayoutSpacer, type FlexLayoutProps } from './FlexLayout';

package/src/components/MonacoEditor/EditorSettingsContext.test.tsx

@@ -0,0 +1,55 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { EditorSettingsProvider, useEditorSettings } from './EditorSettingsContext';
+
+// Exercises the context only — Monaco itself can't render under happy-dom.
+const Probe = () => {
+  const { vimEnabled, toggleVimMode, wordWrapEnabled, toggleWordWrap } = useEditorSettings();
+  return (
+    <div>
+      <span data-testid='vim'>{String(vimEnabled)}</span>
+      <span data-testid='wrap'>{String(wordWrapEnabled)}</span>
+      <button onClick={toggleVimMode}>toggle vim</button>
+      <button onClick={toggleWordWrap}>toggle wrap</button>
+    </div>
+  );
+};
+
+const renderProbe = () =>
+  render(
+    <EditorSettingsProvider>
+      <Probe />
+    </EditorSettingsProvider>
+  );
+
+describe('EditorSettingsContext', () => {
+  beforeEach(() => localStorage.clear());
+
+  it('defaults both settings to disabled', () => {
+    renderProbe();
+    expect(screen.getByTestId('vim')).toHaveTextContent('false');
+    expect(screen.getByTestId('wrap')).toHaveTextContent('false');
+  });
+
+  it('toggles vim mode and persists it to localStorage', async () => {
+    const user = userEvent.setup();
+    renderProbe();
+    await user.click(screen.getByRole('button', { name: 'toggle vim' }));
+    expect(screen.getByTestId('vim')).toHaveTextContent('true');
+    expect(localStorage.getItem('monaco-editor-vim-mode')).toBe('true');
+  });
+
+  it('hydrates initial state from localStorage', () => {
+    localStorage.setItem('monaco-editor-word-wrap', 'true');
+    renderProbe();
+    expect(screen.getByTestId('wrap')).toHaveTextContent('true');
+  });
+
+  it('throws when the hook is used outside the provider', () => {
+    // Suppress the expected React error log for the thrown render.
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => render(<Probe />)).toThrow(/within EditorSettingsProvider/);
+    spy.mockRestore();
+  });
+});

package/src/components/MonacoEditor/EditorSettingsContext.tsx

@@ -0,0 +1,63 @@
+import { createContext, useContext, useState, type ReactNode } from 'react';
+
+// region Helpers
+
+const VIM_MODE_STORAGE_KEY = 'monaco-editor-vim-mode';
+const WORD_WRAP_STORAGE_KEY = 'monaco-editor-word-wrap';
+
+export interface EditorSettings {
+  vimEnabled: boolean;
+  toggleVimMode: () => void;
+  wordWrapEnabled: boolean;
+  toggleWordWrap: () => void;
+}
+
+const EditorSettingsContext = createContext<EditorSettings | undefined>(undefined);
+
+// region Component
+
+/**
+ * Provides per-user editor preferences (vim mode, word wrap), persisted to
+ * `localStorage`. Wrap any tree that renders `<MonacoEditorWithSettings />`.
+ */
+export function EditorSettingsProvider({ children }: { children: ReactNode }) {
+  const [vimEnabled, setVimEnabled] = useState(() => {
+    const saved = localStorage.getItem(VIM_MODE_STORAGE_KEY);
+    return saved === 'true';
+  });
+
+  const [wordWrapEnabled, setWordWrapEnabled] = useState(() => {
+    const saved = localStorage.getItem(WORD_WRAP_STORAGE_KEY);
+    return saved === 'true';
+  });
+
+  const toggleVimMode = () => {
+    setVimEnabled(prev => {
+      const newValue = !prev;
+      localStorage.setItem(VIM_MODE_STORAGE_KEY, String(newValue));
+      return newValue;
+    });
+  };
+
+  const toggleWordWrap = () => {
+    setWordWrapEnabled(prev => {
+      const newValue = !prev;
+      localStorage.setItem(WORD_WRAP_STORAGE_KEY, String(newValue));
+      return newValue;
+    });
+  };
+
+  return (
+    <EditorSettingsContext.Provider value={{ vimEnabled, toggleVimMode, wordWrapEnabled, toggleWordWrap }}>
+      {children}
+    </EditorSettingsContext.Provider>
+  );
+}
+
+export function useEditorSettings() {
+  const context = useContext(EditorSettingsContext);
+  if (context === undefined) {
+    throw new Error('useEditorSettings must be used within EditorSettingsProvider');
+  }
+  return context;
+}

package/src/components/MonacoEditor/MonacoEditor.stories.tsx

@@ -0,0 +1,197 @@
+import { css } from "@emotion/react";
+import type { Decorator, Meta, StoryObj } from "@storybook/react";
+import { Drawer } from "antd";
+import { useState } from "react";
+import { Button } from "../Button";
+import { CloseButton } from "../CloseButton";
+import { MonacoEditorWithSettings } from "./MonacoEditorWithSettings";
+
+const meta: Meta<typeof MonacoEditorWithSettings> = {
+  title: "Common / MonacoEditor",
+  component: MonacoEditorWithSettings,
+  args: {
+    language: "json",
+    height: "100%",
+  },
+  argTypes: {
+    language: {
+      control: "select",
+      options: ["json", "yaml", "javascript", "typescript", "html", "css"],
+    },
+    readOnly: { control: "boolean" },
+  },
+};
+
+// Sizes the inline editor stories; the Drawer story renders just its button.
+const editorBox: Decorator = (Story) => (
+  <div style={{ height: 360 }}>
+    <Story />
+  </div>
+);
+export default meta;
+
+type Story = StoryObj<typeof MonacoEditorWithSettings>;
+
+export const Json: Story = {
+  name: "JSON",
+  decorators: [editorBox],
+  args: {
+    language: "json",
+    value: `{
+  "name": "@solo-io-public/ui-components",
+  "private": false,
+  "keep": "the button"
+}`,
+  },
+};
+
+export const Yaml: Story = {
+  name: "YAML",
+  decorators: [editorBox],
+  args: {
+    language: "yaml",
+    value: `name: example
+items:
+  - one
+  - two
+nested:
+  enabled: true`,
+  },
+};
+
+export const ReadOnly: Story = {
+  decorators: [editorBox],
+  args: {
+    language: "typescript",
+    readOnly: true,
+    value: `export const add = (a: number, b: number): number => a + b;`,
+  },
+};
+
+const K8S_YAML = `apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: payments-api
+  namespace: payments
+  labels:
+    app.kubernetes.io/name: payments-api
+    app.kubernetes.io/instance: payments-api
+    app.kubernetes.io/version: "1.8.3"
+    app.kubernetes.io/component: api
+    app.kubernetes.io/part-of: payments-platform
+    app.kubernetes.io/managed-by: helm
+  annotations:
+    kubernetes.io/change-cause: "Deploy v1.8.3"
+    prometheus.io/scrape: "true"
+    prometheus.io/port: "9090"
+spec:
+  replicas: 3
+  revisionHistoryLimit: 5
+  strategy:
+    type: RollingUpdate
+    rollingUpdate:
+      maxSurge: 1
+      maxUnavailable: 0
+  selector:
+    matchLabels:
+      app.kubernetes.io/name: payments-api
+  template:
+    metadata:
+      labels:
+        app.kubernetes.io/name: payments-api
+        app.kubernetes.io/instance: payments-api
+    spec:
+      serviceAccountName: payments-api
+      securityContext:
+        runAsNonRoot: true
+        runAsUser: 10001
+        fsGroup: 10001
+      containers:
+        - name: api
+          image: registry.example.com/payments/payments-api:1.8.3
+          imagePullPolicy: IfNotPresent
+          ports:
+            - name: http
+              containerPort: 8080
+            - name: metrics
+              containerPort: 9090
+          env:
+            - name: LOG_LEVEL
+              value: info
+            - name: DATABASE_URL
+              valueFrom:
+                secretKeyRef:
+                  name: payments-db
+                  key: url
+            - name: REDIS_HOST
+              value: redis.payments.svc.cluster.local
+          resources:
+            requests:
+              cpu: 250m
+              memory: 256Mi
+            limits:
+              cpu: "1"
+              memory: 512Mi
+          readinessProbe:
+            httpGet:
+              path: /healthz/ready
+              port: http
+            initialDelaySeconds: 5
+            periodSeconds: 10
+          livenessProbe:
+            httpGet:
+              path: /healthz/live
+              port: http
+            initialDelaySeconds: 15
+            periodSeconds: 20
+          volumeMounts:
+            - name: config
+              mountPath: /etc/payments
+              readOnly: true
+      volumes:
+        - name: config
+          configMap:
+            name: payments-api-config
+`;
+
+// Demonstrates the common "view a resource" pattern: a button opens a Drawer
+// with the editor in read-only mode. The manifest is long enough to scroll,
+// which also shows the controls shifting clear of the vertical scrollbar.
+const ViewYamlDrawer = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button color="dark-purple" onClick={() => setOpen(true)}>
+        View YAML
+      </Button>
+      <Drawer
+        title="payments-api.deployment.yaml"
+        placement="right"
+        width={680}
+        open={open}
+        onClose={() => setOpen(false)}
+        closable={false}
+        extra={<CloseButton aria-label="Close" onClick={() => setOpen(false)} />}
+        styles={{ body: { padding: 0 } }}
+      >
+        <MonacoEditorWithSettings
+          value={K8S_YAML}
+          language="yaml"
+          readOnly
+          height="100%"
+          // Full-bleed in the drawer: drop the rounded corners + side/top border
+          // so it sits flush under the drawer title (the drawer supplies the frame).
+          styleOverrides={css`
+            border-radius: 0;
+            border-width: 0 0 1px 0;
+          `}
+        />
+      </Drawer>
+    </>
+  );
+};
+
+export const ViewInDrawer: Story = {
+  name: "View YAML in Drawer",
+  render: () => <ViewYamlDrawer />,
+};