@scattered-light/loomiere-mojave 0.24.0 → 0.25.0

package/dist/exports/design-system/components/LineItemGrid/README.md

@@ -0,0 +1,50 @@
+# LineItemGrid
+
+The Base UI LineItemGrid styled by the theme. Editable lines (a journal entry, an invoice) on the Table styles. Cells hold controls, so their padding drops to the table's block padding and the controls fill the cell. The line-number column is narrow and in the tertiary color; the remove column is as narrow as its button. Footer rows stick to the bottom of the scroll box (maxHeight caps it): the table clips instead of hiding its overflow, because overflow: hidden would make the table the scroll container and the footer would never stick. A footer row's data-tone colors its figures with the status text colors (the -dark steps, which pass as text on the tray). The words in the cell carry the state; color only adds.
+
+Use `Loomiere.LineItemGrid` (`import { LineItemGrid } from '@base-ui/react/line-item-grid'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+
+Base UI docs: https://base-ui.com/react/components/line-item-grid
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `LineItemGrid` | `data-read-only` |
+| `LineItemGridScroll` |   |
+| `LineItemGridTable` |   |
+| `Input` |   |
+| `FieldRoot` |   |
+| `ComboboxRoot` |   |
+| `MoneyField` |   |
+| `SelectTrigger` |   |
+| `LineItemGridNumberCol` |   |
+| `LineItemGridRemoveCol` |   |
+| `LineItemGridNumber` |   |
+| `LineItemGridRemove` |   |
+| `LineItemGridAdd` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the LineItemGrid stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  args: { label: '', columns: [], rows: [], getRowId: () => '', renderCell: () => null },
+  render: () => <Editor />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText(/out of balance/)).toBeTruthy();
+    await userEvent.click(canvas.getByRole('button', { name: 'Add line' }));
+    await expect(canvas.getByRole('textbox', { name: 'Account, line 3' })).toHaveFocus();
+    await userEvent.click(canvas.getByRole('button', { name: 'Remove line 3' }));
+    await expect(canvas.queryByRole('textbox', { name: 'Account, line 3' })).toBeNull();
+  },
+};
+
+/** A posted entry: text in the cells, no add or remove. */
+```
+
+The preview also shows `ReadOnly`.