feat: add inline-edit package

.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} onSave={setEditValue}>
+      <span>{editValue}</span>
+    </InlineEdit>
+  );
+}

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.4.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} onSave={() => undefined}>
+        <span>{editValue}</span>
+      </InlineEdit>
+    );
+    cy.getByTestId('inline-edit').should('be.visible');
+  });
+
+  it('is accessible', () => {
+    const editValue = 'test';
+    cy.mount(
+      <InlineEdit defaultValue={editValue} onSave={() => undefined}>
+        <span>{editValue}</span>
+      </InlineEdit>
+    );
+    cy.checkA11y();
+    cy.getByRole('button').click();
+    cy.checkA11y();
+  });
+});

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

@@ -0,0 +1,24 @@
+import type { InlineEditProps } from '../src';
+
+import { useState } from 'react';
+import { it, expect, describe } from 'vitest';
+
+import { render, screen } from '../../../test/utils';
+import { InlineEdit } from '../src';
+
+const InlineEditComponent = ({ ...props }: Partial<InlineEditProps>) => {
+  const [editValue, setEditValue] = useState('test');
+
+  return (
+    <InlineEdit defaultValue={editValue} {...props} onSave={setEditValue}>
+      <span>{editValue}</span>
+    </InlineEdit>
+  );
+};
+
+describe('InlineEdit', () => {
+  it('renders', () => {
+    render(<InlineEditComponent />);
+    expect(screen.getByTestId('inline-edit')).toBeInTheDocument();
+  });
+});

packages/inline-edit/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@launchpad-ui/inline-edit",
+  "version": "0.0.1",
+  "status": "alpha",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "An element used to display and allow inline editing of a form element value.",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./style.css": "./dist/style.css"
+  },
+  "source": "src/index.ts",
+  "scripts": {
+    "build": "vite build -c ../../vite.config.ts && tsc --project tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "lint": "eslint '**/*.{ts,tsx,js}' && stylelint '**/*.css' --ignore-path ../../.stylelintignore",
+    "test": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@react-aria/button": "3.8.0",
+    "@react-aria/focus": "3.13.0",
+    "@react-aria/utils": "3.18.0",
+    "@launchpad-ui/tokens": "workspace:~",
+    "@launchpad-ui/vars": "workspace:~",
+    "classix": "2.1.17"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}

packages/inline-edit/src/InlineEdit.tsx

@@ -0,0 +1,137 @@
+import type { InlineVariants } from './styles/InlineEdit.css';
+import type { TextAreaProps, TextFieldProps } from '@launchpad-ui/form';
+import type {
+  ComponentProps,
+  Dispatch,
+  KeyboardEventHandler,
+  ReactElement,
+  SetStateAction,
+} from 'react';
+
+import { ButtonGroup, IconButton } from '@launchpad-ui/button';
+import { TextField } from '@launchpad-ui/form';
+import { Icon } from '@launchpad-ui/icons';
+import { useButton } from '@react-aria/button';
+import { focusSafely } from '@react-aria/focus';
+import { mergeProps, useUpdateEffect } from '@react-aria/utils';
+import { cx } from 'classix';
+import { cloneElement, useRef, useState } from 'react';
+
+import { container, cancelButton, inline, readButton } from './styles/InlineEdit.css';
+
+type InlineEditProps = ComponentProps<'div'> &
+  InlineVariants &
+  Pick<ComponentProps<'input'>, 'defaultValue'> & {
+    'data-test-id'?: string;
+    onSave: Dispatch<SetStateAction<string>>;
+    hideEdit?: boolean;
+    input?: ReactElement<TextFieldProps | TextAreaProps>;
+  };
+
+const InlineEdit = ({
+  'data-test-id': testId = 'inline-edit',
+  layout = 'horizontal',
+  children,
+  defaultValue,
+  onSave,
+  hideEdit = false,
+  input = <TextField />,
+  'aria-label': ariaLabel,
+}: InlineEditProps) => {
+  const [isEditing, setEditing] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const editRef = useRef<HTMLButtonElement>(null);
+
+  useUpdateEffect(() => {
+    isEditing
+      ? inputRef.current && focusSafely(inputRef.current)
+      : editRef.current && focusSafely(editRef.current);
+  }, [isEditing]);
+
+  const handleEdit = () => {
+    setEditing(true);
+  };
+
+  const handleCancel = () => {
+    setEditing(false);
+  };
+
+  const handleSave = () => {
+    onSave(inputRef.current?.value || '');
+    setEditing(false);
+  };
+
+  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      handleSave();
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      handleCancel();
+    }
+  };
+
+  const { buttonProps } = useButton(
+    {
+      'aria-label': 'edit',
+      elementType: 'div',
+      onPress: handleEdit,
+    },
+    editRef
+  );
+
+  const renderReadContent = hideEdit ? (
+    <span ref={editRef} {...buttonProps} className={readButton}>
+      {children}
+    </span>
+  ) : (
+    <>
+      {children}
+      <IconButton
+        ref={editRef}
+        icon={<Icon name="edit" />}
+        aria-label="edit"
+        size="small"
+        onClick={handleEdit}
+      />
+    </>
+  );
+
+  const renderInput = cloneElement(
+    input,
+    mergeProps(input.props, {
+      ref: inputRef,
+      defaultValue,
+      onKeyDown: handleKeyDown,
+      'aria-label': ariaLabel,
+    })
+  );
+
+  return isEditing ? (
+    <div className={cx(container, inline({ layout }))} data-test-id={testId}>
+      {renderInput}
+      <ButtonGroup spacing="compact">
+        <IconButton
+          kind="primary"
+          icon={<Icon name="check" />}
+          aria-label="save"
+          onClick={handleSave}
+        />
+        <IconButton
+          kind="default"
+          icon={<Icon name="close" />}
+          aria-label="cancel"
+          className={cancelButton}
+          onClick={handleCancel}
+        />
+      </ButtonGroup>
+    </div>
+  ) : (
+    <div className={cx(!hideEdit && container)} data-test-id={testId}>
+      {renderReadContent}
+    </div>
+  );
+};
+
+export { InlineEdit };
+export type { InlineEditProps };

packages/inline-edit/src/index.ts

@@ -0,0 +1,2 @@
+export type { InlineEditProps } from './InlineEdit';
+export { InlineEdit } from './InlineEdit';

packages/inline-edit/src/styles/InlineEdit.css.ts

@@ -0,0 +1,50 @@
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+
+import { vars } from '@launchpad-ui/vars';
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+const container = style({
+  display: 'flex',
+  gap: vars.spacing[300],
+  alignItems: 'center',
+});
+
+const inline = recipe({
+  variants: {
+    layout: {
+      vertical: { flexDirection: 'column', alignItems: 'flex-start' },
+      horizontal: { flexDirection: 'row' },
+    },
+  },
+});
+
+const cancelButton = style({
+  selectors: {
+    '.Button--icon&': {
+      height: '3rem',
+      width: '3rem',
+    },
+  },
+});
+
+const readButton = style({
+  display: 'inline-block',
+  padding: `${vars.spacing[200]} ${vars.spacing[300]}`,
+  borderRadius: vars.border.radius.regular,
+  ':hover': {
+    background: vars.color.bg.interactive.tertiary.hover,
+    cursor: 'pointer',
+  },
+  ':focus-visible': {
+    borderRadius: vars.border.radius.medium,
+    boxShadow: `0 0 0 2px ${vars.color.bg.ui.primary}, 0 0 0 4px ${vars.color.shadow.interactive.focus}`,
+    outline: 0,
+    zIndex: 2,
+  },
+});
+
+type InlineVariants = RecipeVariants<typeof inline>;
+
+export { container, cancelButton, inline, readButton };
+export type { InlineVariants };