docs: add editable table text

src/components/inline_editable_renderer/index.ts

@@ -0,0 +1 @@
+export * from './inline_editable_renderer.js';

src/components/inline_editable_renderer/inline_editable_renderer.tsx

@@ -0,0 +1,76 @@
+import { Colors } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import type { ReactNode } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+
+export interface InlineRendererEditableProps<T extends HTMLElement> {
+  ref: (node: T | null) => void;
+  toggle: () => void;
+}
+
+export interface InlineEditableProps<T extends HTMLElement> {
+  renderEditable: (props: InlineRendererEditableProps<T>) => ReactNode;
+  children: ReactNode;
+}
+
+export const InlineEditableInput = styled.input`
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 0 1px 1px ${Colors.GRAY1};
+  position: absolute;
+  inset: 0;
+`;
+
+const Container = styled.div`
+  min-width: 100%;
+  width: 100%;
+  min-height: 21px;
+
+  :focus,
+  :hover {
+    box-shadow: 0 0 1px 1px ${Colors.GRAY1};
+  }
+`;
+
+/**
+ * The `InlineEditable` component allows for inline editing of its content.
+ * It renders an editable input field when focused or clicked
+ * and toggles back to the original content when the input loses focus.
+ */
+export function InlineEditable<T extends HTMLElement>(
+  props: InlineEditableProps<T>,
+) {
+  const { children, renderEditable } = props;
+  const [isInputRendered, setIsInputRendered] = useState(false);
+
+  const toggle = useCallback(() => {
+    return setIsInputRendered((old) => !old);
+  }, []);
+
+  const renderEditableProps = useMemo<InlineRendererEditableProps<T>>(() => {
+    return {
+      isRendered: isInputRendered,
+      ref: (node) => {
+        if (!node) return;
+        node.focus();
+      },
+      toggle,
+    };
+  }, [isInputRendered, toggle]);
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <div style={{ visibility: isInputRendered ? 'visible' : 'hidden' }}>
+        {renderEditable(renderEditableProps)}
+      </div>
+
+      <Container
+        tabIndex={isInputRendered ? -1 : 0}
+        onFocus={() => setIsInputRendered(true)}
+        onClick={toggle}
+      >
+        {children}
+      </Container>
+    </div>
+  );
+}

stories/components/editable.stories.tsx

@@ -0,0 +1,199 @@
+import { Button } from '@blueprintjs/core';
+import type { StoryObj } from '@storybook/react';
+import { useCallback, useMemo, useState } from 'react';
+
+import { createTableColumnHelper, Table } from '../../src/components/index.js';
+import {
+  InlineEditable as InlineEditableComponent,
+  InlineEditableInput,
+} from '../../src/components/inline_editable_renderer/index.js';
+
+export default {
+  title: 'Components / InlineEditableComponent',
+};
+
+interface TableData {
+  id: number;
+  label: string;
+  field: string;
+  format: string;
+  visible: boolean;
+}
+
+const helper = createTableColumnHelper<TableData>();
+
+const data: TableData[] = [
+  { label: 'Name', field: 'info.name', format: '', visible: true },
+  {
+    label: 'Number of scans',
+    field: 'info.numberOfScans',
+    format: '0',
+    visible: true,
+  },
+  {
+    label: 'Pulse sequence',
+    field: 'info.pulseSequence',
+    format: '',
+    visible: true,
+  },
+  {
+    label: 'Frequency',
+    field: 'meta..DIGITSERRE',
+    format: '0',
+    visible: false,
+  },
+].map((item, index) => ({ id: index, ...item }));
+
+export function InsideTable() {
+  const [state, setState] = useState(data);
+
+  const deleteIndex = useCallback((index: number) => {
+    return setState((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+
+  const changeValue = useCallback(
+    (rowIndex: number, key: string, value: string) => {
+      setState((prev) => {
+        const element = prev.at(rowIndex);
+
+        if (!element) {
+          return prev;
+        }
+
+        return prev.map((item, index) => {
+          if (index === rowIndex) {
+            return { ...element, [key]: value };
+          }
+
+          return item;
+        });
+      });
+    },
+    [],
+  );
+
+  const columns = useMemo(() => {
+    return [
+      helper.accessor('id', { header: '#' }),
+      helper.accessor('label', {
+        header: 'Label',
+        cell: ({ getValue, row: { index } }) => (
+          <InlineEditableComponent
+            renderEditable={({ ref, toggle }) => (
+              <InlineEditableInput
+                ref={ref}
+                defaultValue={getValue()}
+                onBlur={(event) => {
+                  toggle();
+                  changeValue(index, 'label', event.currentTarget.value);
+                }}
+              />
+            )}
+          >
+            {getValue()}
+          </InlineEditableComponent>
+        ),
+      }),
+      helper.accessor('field', {
+        header: 'Field',
+        cell: ({ getValue, row: { index } }) => (
+          <InlineEditableComponent
+            renderEditable={({ ref, toggle }) => (
+              <InlineEditableInput
+                ref={ref}
+                defaultValue={getValue()}
+                onBlur={(event) => {
+                  toggle();
+                  changeValue(index, 'field', event.currentTarget.value);
+                }}
+              />
+            )}
+          >
+            {getValue()}
+          </InlineEditableComponent>
+        ),
+      }),
+      helper.accessor('format', {
+        header: 'Format',
+        cell: ({ getValue, row: { index } }) => (
+          <InlineEditableComponent
+            renderEditable={({ ref, toggle }) => (
+              <InlineEditableInput
+                ref={ref}
+                defaultValue={getValue()}
+                onBlur={(event) => {
+                  toggle();
+                  changeValue(index, 'format', event.currentTarget.value);
+                }}
+              />
+            )}
+          >
+            {getValue()}
+          </InlineEditableComponent>
+        ),
+      }),
+      helper.accessor('visible', { header: 'Visible' }),
+      helper.display({
+        header: ' ',
+        cell: ({ row: { index } }) => {
+          return (
+            <Button
+              type="button"
+              icon="trash"
+              tabIndex={-1}
+              onClick={() => deleteIndex(index)}
+            />
+          );
+        },
+      }),
+    ];
+  }, [changeValue, deleteIndex]);
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 5,
+      }}
+    >
+      <div>
+        <Table<TableData>
+          data={state}
+          columns={columns}
+          estimatedRowHeight={() => 50}
+        />
+      </div>
+
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+    </div>
+  );
+}
+
+export const InlineEditable = {
+  render: () => {
+    const [state, setState] = useState('Hello, World!');
+
+    return (
+      <div style={{ width: 100 }}>
+        <span>State: {state}</span>
+        <InlineEditableComponent
+          renderEditable={({ ref, toggle }) => (
+            <InlineEditableInput
+              ref={ref}
+              defaultValue={state}
+              onBlur={(event) => {
+                toggle();
+
+                setState(event.currentTarget.value);
+              }}
+            />
+          )}
+        >
+          {state}
+        </InlineEditableComponent>
+      </div>
+    );
+  },
+} satisfies StoryObj;