more docs

packages/compass-components/src/components/index-keys-badge.stories.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import { IndexKeysBadge, IndexBadge } from './index-keys-badge';
+
+const meta: Meta<typeof IndexKeysBadge> = {
+  title: 'Components/IndexKeysBadge',
+  component: IndexKeysBadge,
+  argTypes: {
+    keys: {
+      description: 'Array of key objects with field and value properties',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof IndexKeysBadge>;
+
+export const Default: Story = {
+  args: {
+    keys: [
+      { field: 'name', value: 1 },
+      { field: 'age', value: -1 },
+      { field: 'email', value: 1 },
+    ],
+  },
+};
+
+export const SingleKey: Story = {
+  args: {
+    keys: [{ field: 'name', value: 1 }],
+  },
+};
+
+export const WithNestedFields: Story = {
+  args: {
+    keys: [
+      { field: 'profile.name', value: 1 },
+      { field: 'profile.address.city', value: -1 },
+      { field: 'metadata.tags', value: 1 },
+    ],
+  },
+};
+
+export const WithLongFieldNames: Story = {
+  args: {
+    keys: [
+      { field: 'reallyLongFieldNameThatMightOverflow', value: 1 },
+      { field: 'anotherVeryLongFieldNameForTesting', value: -1 },
+      { field: 'third.nested.long.field.name', value: 1 },
+    ],
+  },
+};
+
+// Showing the individual IndexBadge component
+export const SingleIndexBadge: StoryObj<typeof IndexBadge> = {
+  render: () => (
+    <div style={{ padding: '20px' }}>
+      <h3>Individual Index Badges</h3>
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+        <IndexBadge field="name" value={1} />
+        <IndexBadge field="age" value={-1} />
+        <IndexBadge field="email" value={1} />
+      </div>
+    </div>
+  ),
+};

packages/compass-components/src/components/placeholder.stories.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Placeholder } from './placeholder';
+import { css } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
+import { palette } from '@leafygreen-ui/palette';
+
+const meta = {
+  title: 'Components/Placeholder',
+  component: Placeholder,
+  parameters: {
+    controls: { expanded: true },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    minChar: {
+      control: { type: 'number', min: 1, max: 50 },
+      description: 'Minimum number of characters for random width generation',
+    },
+    maxChar: {
+      control: { type: 'number', min: 1, max: 50 },
+      description: 'Maximum number of characters for random width generation',
+    },
+    width: {
+      control: 'text',
+      description:
+        'Explicit width of the placeholder (overrides minChar/maxChar)',
+    },
+    height: {
+      control: 'text',
+      description: 'Height of the placeholder',
+    },
+    gradientStart: {
+      control: 'color',
+      description: 'Start color of the gradient animation',
+    },
+    gradientEnd: {
+      control: 'color',
+      description: 'End color of the gradient animation',
+    },
+    darkMode: {
+      control: 'boolean',
+      description: 'Whether to use dark mode styles',
+    },
+  },
+} satisfies Meta<typeof Placeholder>;
+
+export default meta;
+type Story = StoryObj<typeof Placeholder>;
+
+const containerStyles = css({
+  padding: spacing[400],
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacing[300],
+});
+
+const rowStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacing[200],
+});
+
+/**
+ * Basic placeholder examples with default settings.
+ */
+export const Basic: Story = {
+  render: () => {
+    return (
+      <div className={containerStyles}>
+        <h3>Default Placeholders</h3>
+        <div className={rowStyles}>
+          <Placeholder />
+          <Placeholder />
+          <Placeholder />
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Placeholders with different explicit sizes.
+ */
+export const DifferentSizes: Story = {
+  render: () => {
+    return (
+      <div className={containerStyles}>
+        <h3>Different Sizes</h3>
+        <div className={rowStyles}>
+          <Placeholder width="10ch" height={spacing[200]} />
+          <Placeholder width="20ch" height={spacing[300]} />
+          <Placeholder width="30ch" height={spacing[400]} />
+          <Placeholder width="40ch" height={spacing[500]} />
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Placeholders with different min/max character ranges to generate random widths.
+ */
+export const CharacterRanges: Story = {
+  render: () => {
+    return (
+      <div className={containerStyles}>
+        <h3>Min/Max Character Ranges</h3>
+        <div className={rowStyles}>
+          <Placeholder minChar={3} maxChar={6} />
+          <Placeholder minChar={10} maxChar={15} />
+          <Placeholder minChar={20} maxChar={30} />
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Placeholders with custom gradient colors.
+ */
+export const CustomGradients: Story = {
+  render: () => {
+    return (
+      <div className={containerStyles}>
+        <h3>Custom Gradients</h3>
+        <div className={rowStyles}>
+          <Placeholder
+            gradientStart={palette.blue.light2}
+            gradientEnd={palette.blue.light1}
+          />
+          <Placeholder
+            gradientStart={palette.green.light2}
+            gradientEnd={palette.green.light1}
+          />
+          <Placeholder
+            gradientStart={palette.purple.light2}
+            gradientEnd={palette.purple.light1}
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Placeholders in dark mode.
+ */
+export const DarkMode: Story = {
+  render: () => {
+    return (
+      <div
+        className={containerStyles}
+        style={{ backgroundColor: palette.black, color: palette.white }}
+      >
+        <h3>Dark Mode</h3>
+        <div className={rowStyles}>
+          <Placeholder darkMode={true} />
+          <Placeholder darkMode={true} width="30ch" />
+          <Placeholder
+            darkMode={true}
+            gradientStart={palette.blue.dark2}
+            gradientEnd={palette.blue.dark1}
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Interactive placeholder example with configurable properties.
+ */
+export const Interactive: Story = {
+  args: {
+    minChar: 5,
+    maxChar: 15,
+    height: spacing[400],
+    darkMode: false,
+  },
+  render: (args) => (
+    <div className={containerStyles}>
+      <h3>Interactive Placeholder</h3>
+      <Placeholder {...args} />
+    </div>
+  ),
+};

packages/compass-components/src/components/resizeable-sidebar.stories.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import ResizableSidebar, { defaultSidebarWidth } from './resizeable-sidebar';
+
+const meta: Meta<typeof ResizableSidebar> = {
+  title: 'Components/ResizableSidebar',
+  component: ResizableSidebar,
+  argTypes: {
+    initialWidth: {
+      control: { type: 'number' },
+      description: 'Initial width of the sidebar',
+      defaultValue: defaultSidebarWidth,
+    },
+    minWidth: {
+      control: { type: 'number' },
+      description: 'Minimum width of the sidebar',
+      defaultValue: 210,
+    },
+    useNewTheme: {
+      control: { type: 'boolean' },
+      description: 'Whether to use the new theme styles',
+      defaultValue: false,
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ResizableSidebar>;
+
+// Demo component with text content for visualization
+const SidebarContent = ({ title }: { title: string }) => (
+  <div style={{ padding: '20px' }}>
+    <h3>{title}</h3>
+    <p>
+      This is a resizable sidebar component. Try dragging the right edge to
+      resize.
+    </p>
+    <ul>
+      <li>Menu Item 1</li>
+      <li>Menu Item 2</li>
+      <li>Menu Item 3</li>
+      <li>Menu Item 4</li>
+    </ul>
+  </div>
+);
+
+export const Default: Story = {
+  render: (args) => (
+    <div style={{ height: '400px', display: 'flex', border: '1px solid #ccc' }}>
+      <ResizableSidebar {...args}>
+        <SidebarContent title="Default Sidebar" />
+      </ResizableSidebar>
+      <div style={{ flex: 1, padding: '20px' }}>
+        <h2>Main Content Area</h2>
+        <p>
+          This is the main content area that will resize as the sidebar is
+          resized.
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+export const WithNewTheme: Story = {
+  render: (args) => (
+    <div style={{ height: '400px', display: 'flex', border: '1px solid #ccc' }}>
+      <ResizableSidebar {...args} useNewTheme={true}>
+        <SidebarContent title="New Theme Sidebar" />
+      </ResizableSidebar>
+      <div style={{ flex: 1, padding: '20px' }}>
+        <h2>Main Content Area</h2>
+        <p>This sidebar uses the new theme option.</p>
+      </div>
+    </div>
+  ),
+};
+
+export const CustomWidth: Story = {
+  render: (args) => (
+    <div style={{ height: '400px', display: 'flex', border: '1px solid #ccc' }}>
+      <ResizableSidebar {...args} initialWidth={400} minWidth={250}>
+        <SidebarContent title="Custom Width Sidebar" />
+      </ResizableSidebar>
+      <div style={{ flex: 1, padding: '20px' }}>
+        <h2>Main Content Area</h2>
+        <p>
+          This sidebar has a custom initial width of 400px and a minimum width
+          of 250px.
+        </p>
+      </div>
+    </div>
+  ),
+};