feat: add inline-edit package

.changeset/chatty-tables-attend.md

@@ -0,0 +1,16 @@
+---
+'@launchpad-ui/inline-edit': minor
+'@launchpad-ui/core': patch
+---
+
+Add `inline-edit` package to display and allow inline editing of a form elements:
+
+- Use props `defaultValue` and `onConfirm` to handle state management of the value to edit
+- Have children act as the "read" view of the component
+- Hide edit icon button and wrap children with a React Aria button when `hideEdit` is true
+- Implement focus management to ensure focus is directed correctly when toggling between read and edit mode
+- Use `renderInput` prop to allow passing a custom `TextField` or `TextArea` component
+- Add handlers for edit, cancel, and confirm actions
+- Use prop `isEditing` to allow full control over the read and edit modes
+- Add `@vanilla-extract/css` as a peer dependency for prop `layout` variant types
+- Use `useFocusWithin` to cancel edit on blur

.storybook/styles.css

@@ -27,6 +27,7 @@ h1,
 h2,
 h3 {
   color: var(--lp-color-text-ui-primary-base);
+  margin: 0;
 }
 
 @font-face {

apps/remix/app/data.server.ts

@@ -18,6 +18,7 @@ export async function getComponents() {
     { to: 'components/icon', name: 'Icon' },
     { to: 'components/icon-button', name: 'IconButton' },
     { to: 'components/inline', name: 'Inline' },
+    { to: 'components/inline-edit', name: 'InlineEdit' },
     { to: 'components/markdown', name: 'Markdown' },
     { to: 'components/menu', name: 'Menu' },
     { to: 'components/modal', name: 'Modal' },

apps/remix/app/routes/components.inline-edit.tsx

@@ -0,0 +1,11 @@
+import { InlineEdit } from '@launchpad-ui/core';
+import { useState } from 'react';
+
+export default function Index() {
+  const [editValue, setEditValue] = useState('edit me');
+  return (
+    <InlineEdit defaultValue={editValue} onConfirm={setEditValue}>
+      <span>{editValue}</span>
+    </InlineEdit>
+  );
+}

cypress.config.ts

@@ -19,9 +19,5 @@ export default defineConfig({
   },
   video: false,
   screenshotOnRunFailure: false,
-  env: {
-    codeCoverage: {
-      exclude: ['cypress/**/*.*', 'packages/icons/src/!(Icon.tsx|StatusIcon.tsx|FlairIcon.tsx)'],
-    },
-  },
+  retries: 1,
 });

package.json

@@ -72,6 +72,7 @@
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
     "@vanilla-extract/css": "^1.12.0",
+    "@vanilla-extract/recipes": "^0.5.0",
     "@vanilla-extract/vite-plugin": "^3.8.2",
     "@vitejs/plugin-react-swc": "^3.3.1",
     "@vitest/coverage-v8": "^0.33.0",

packages/core/package.json

@@ -51,6 +51,7 @@
     "@launchpad-ui/focus-trap": "workspace:~",
     "@launchpad-ui/form": "workspace:~",
     "@launchpad-ui/inline": "workspace:~",
+    "@launchpad-ui/inline-edit": "workspace:~",
     "@launchpad-ui/markdown": "workspace:~",
     "@launchpad-ui/menu": "workspace:~",
     "@launchpad-ui/modal": "workspace:~",

packages/core/src/index.ts

@@ -105,6 +105,7 @@ export type { StackProps } from '@launchpad-ui/stack';
 export type { Space } from '@launchpad-ui/types';
 export type { InlineProps } from '@launchpad-ui/inline';
 export type { ColumnProps, ColumnsProps } from '@launchpad-ui/columns';
+export type { InlineEditProps } from '@launchpad-ui/inline-edit';
 // plop end type exports
 
 // plop start module exports
@@ -194,4 +195,5 @@ export { Tooltip, TooltipBase } from '@launchpad-ui/tooltip';
 export { Stack } from '@launchpad-ui/stack';
 export { Inline } from '@launchpad-ui/inline';
 export { Column, Columns } from '@launchpad-ui/columns';
+export { InlineEdit } from '@launchpad-ui/inline-edit';
 // plop end module exports

packages/inline-edit/README.md

@@ -0,0 +1,14 @@
+# @launchpad-ui/inline-edit
+
+> An element used to display and allow inline editing of a form element value.
+
+[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/inline-edit?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/inline-edit)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/inline-edit?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/inline-edit)
+
+## Installation
+
+```sh
+$ yarn add @launchpad-ui/inline-edit
+# or
+$ npm install @launchpad-ui/inline-edit
+```

packages/inline-edit/__tests__/InlineEdit.cy.tsx

@@ -0,0 +1,25 @@
+import { InlineEdit } from '../src';
+
+describe('InlineEdit', () => {
+  it('renders', () => {
+    const editValue = 'test';
+    cy.mount(
+      <InlineEdit defaultValue={editValue} onConfirm={() => undefined}>
+        <span>{editValue}</span>
+      </InlineEdit>
+    );
+    cy.getByTestId('inline-edit').should('be.visible');
+  });
+
+  it('is accessible', () => {
+    const editValue = 'test';
+    cy.mount(
+      <InlineEdit defaultValue={editValue} onConfirm={() => undefined} aria-label="edit value">
+        <span>{editValue}</span>
+      </InlineEdit>
+    );
+    cy.checkA11y();
+    cy.getByTestId('icon-button').click();
+    cy.checkA11y();
+  });
+});

packages/inline-edit/__tests__/InlineEdit.spec.tsx

@@ -0,0 +1,240 @@
+import type { InlineEditProps } from '../src';
+
+import { TextArea } from '@launchpad-ui/form';
+import { useState } from 'react';
+import { it, expect, describe, vi } from 'vitest';
+
+import { render, screen, waitFor, userEvent } from '../../../test/utils';
+import { InlineEdit } from '../src';
+
+const InlineEditComponent = ({ ...props }: Partial<InlineEditProps>) => {
+  const [editValue, setEditValue] = useState('');
+
+  return (
+    <InlineEdit defaultValue={editValue} onConfirm={setEditValue} {...props}>
+      <span>{editValue}</span>
+    </InlineEdit>
+  );
+};
+
+describe('InlineEdit', () => {
+  it('renders', () => {
+    render(<InlineEditComponent />);
+    expect(screen.getByTestId('inline-edit')).toBeVisible();
+  });
+
+  it('renders an input in edit mode', async () => {
+    render(<InlineEditComponent />);
+
+    await waitFor(() => {
+      screen.getByLabelText('edit').click();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('text-field')).toBeVisible();
+    });
+  });
+
+  it('renders a button wrapper in edit mode when hideEdit is passed', async () => {
+    render(<InlineEditComponent hideEdit />);
+    expect(screen.getByRole('button')).toBeVisible();
+  });
+
+  it('renders a custom input', async () => {
+    render(<InlineEditComponent renderInput={<TextArea />} />);
+
+    await waitFor(() => {
+      screen.getByLabelText('edit').click();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('text-area')).toBeVisible();
+    });
+  });
+
+  it('enters edit mode when button wrapper is clicked', async () => {
+    render(<InlineEditComponent hideEdit />);
+
+    await waitFor(() => {
+      screen.getByRole('button').click();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('text-field')).toBeVisible();
+    });
+  });
+
+  it('returns to read mode when cancel is clicked', async () => {
+    render(<InlineEditComponent />);
+
+    await waitFor(() => {
+      screen.getByLabelText('edit').click();
+    });
+
+    await waitFor(() => {
+      screen.getByLabelText('cancel').click();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('edit')).toBeVisible();
+    });
+  });
+
+  it('returns to read mode when the escape key is pressed', async () => {
+    const user = userEvent.setup();
+    render(<InlineEditComponent />);
+
+    await user.tab();
+    await user.keyboard('{Enter}');
+
+    await waitFor(async () => {
+      expect(screen.getByTestId('text-field')).toHaveFocus();
+      await user.keyboard('{Escape}');
+    });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('edit')).toBeVisible();
+    });
+  });
+
+  it('confirms the value and returns to read mode when the enter key is pressed', async () => {
+    const user = userEvent.setup();
+    render(<InlineEditComponent />);
+
+    await user.tab();
+    await user.keyboard('{Enter}');
+
+    await waitFor(async () => {
+      expect(screen.getByTestId('text-field')).toHaveFocus();
+      await user.keyboard('test');
+      await user.keyboard('{Enter}');
+    });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('edit')).toBeVisible();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('test')).toBeVisible();
+    });
+  });
+
+  it('confirms the value and returns to read mode when confirm is clicked', async () => {
+    const user = userEvent.setup();
+    render(<InlineEditComponent />);
+
+    await user.tab();
+    await user.keyboard('{Enter}');
+
+    await waitFor(async () => {
+      expect(screen.getByTestId('text-field')).toHaveFocus();
+      await user.keyboard('test');
+      screen.getByLabelText('confirm').click();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('edit')).toBeVisible();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('test')).toBeVisible();
+    });
+  });
+
+  it('delegates focus with keyboard nav', async () => {
+    const user = userEvent.setup();
+    render(<InlineEditComponent />);
+    await user.tab();
+    await user.keyboard('{Enter}');
+
+    await waitFor(async () => {
+      expect(screen.getByTestId('text-field')).toHaveFocus();
+      await user.tab();
+      await user.keyboard('{Enter}');
+    });
+
+    await waitFor(async () => {
+      expect(screen.getByLabelText('edit')).toHaveFocus();
+    });
+  });
+
+  it('calls handlers for edit, cancel, and confirm', async () => {
+    const editSpy = vi.fn();
+    const cancelSpy = vi.fn();
+    const confirmSpy = vi.fn();
+
+    render(<InlineEditComponent onCancel={cancelSpy} onEdit={editSpy} onConfirm={confirmSpy} />);
+
+    await waitFor(async () => {
+      screen.getByLabelText('edit').click();
+    });
+
+    expect(editSpy).toHaveBeenCalledTimes(1);
+
+    await waitFor(async () => {
+      screen.getByLabelText('cancel').click();
+    });
+
+    expect(cancelSpy).toHaveBeenCalledTimes(1);
+
+    await waitFor(() => {
+      screen.getByLabelText('edit').click();
+    });
+
+    await waitFor(() => {
+      screen.getByLabelText('confirm').click();
+    });
+
+    expect(confirmSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('allows control over the read and edit modes', async () => {
+    const { rerender } = render(<InlineEditComponent isEditing />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('text-field')).toBeVisible();
+    });
+
+    rerender(<InlineEditComponent isEditing={false} />);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('edit')).toBeVisible();
+    });
+  });
+
+  it('cancels when input is blurred', async () => {
+    const user = userEvent.setup();
+    render(<InlineEditComponent />);
+
+    await user.tab();
+    await user.keyboard('{Enter}');
+
+    await waitFor(async () => {
+      expect(screen.getByTestId('text-field')).toHaveFocus();
+      await user.tab({ shift: true });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('edit')).toBeVisible();
+    });
+  });
+
+  it('cancels when cancel button is blurred', async () => {
+    const user = userEvent.setup();
+    render(<InlineEditComponent />);
+
+    await user.tab();
+    await user.keyboard('{Enter}');
+
+    await waitFor(async () => {
+      expect(screen.getByTestId('text-field')).toHaveFocus();
+      await user.tab();
+      await user.tab();
+      await user.tab();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('edit')).toBeVisible();
+    });
+  });
+});