@scattered-light/loomiere-mojave 0.24.1 → 0.41.0

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

@@ -0,0 +1,38 @@
+# FileDropZone
+
+The Base UI FileDropZone styled by the theme. A dashed, quiet box with one line of text and its buttons. It fills when a file is dragged over it. Colors are the fill and border roles, so a brand restyles it without a component token.
+
+Use `Loomiere.FileDropZone` (`import { FileDropZone } from '@base-ui/react/file-drop-zone'` 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/file-drop-zone
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `FileDropZone` | `data-over`; `data-disabled` |
+| `FileDropZoneText` |   |
+| `FileDropZoneActions` |   |
+
+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 FileDropZone stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: function Render() {
+    const [name, setName] = React.useState('');
+    return (
+      <FileDropZone onFiles={(files) => setName(files[0]?.name ?? '')} accept=".pdf,.csv">
+        {name ? `Chosen: ${name}` : 'Drop the statement here, or choose a file.'}
+      </FileDropZone>
+    );
+  },
+};
+
+/** More buttons sit beside Choose file. */
+```
+
+The preview also shows `WithActions`, `Disabled`.

package/dist/exports/design-system/components/FileDropZone/preview.html

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Components" height=360 subtitle="Default / WithActions / Disabled" -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
+  #root { display: grid; gap: var(--sl-space-5, 20px); }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(()=>{var x=Object.create;var m=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var p=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),R=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},Z=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of F(t))!b.call(e,r)&&r!==o&&m(e,r,{get:()=>t[r],enumerable:!(n=E(t,r))||n.enumerable});return e};var f=(e,t,o)=>(o=e!=null?x(S(e)):{},Z(t||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e));var u=p((O,y)=>{y.exports=window.React});var h=p(($,D)=>{D.exports=window.Loomiere});var d={};R(d,{Default:()=>j,Disabled:()=>N,WithActions:()=>L,default:()=>l});var g=f(u(),1),a=f(h(),1);var c=window.React;function i(e,t,o){let{children:n,...r}=t||{};return o!==void 0&&(r.key=o),n===void 0?c.createElement(e,r):Array.isArray(n)?c.createElement(e,r,...n):c.createElement(e,r,n)}var C=c.Fragment;var A={title:"Components/Lib/FileDropZone",component:a.FileDropZone,parameters:{layout:"padded"},tags:["autodocs","ds:lib"],args:{onFiles:()=>{}}},l=A,j={render:function(){let[t,o]=g.useState("");return i(a.FileDropZone,{onFiles:n=>o(n[0]?.name??""),accept:".pdf,.csv",children:t?`Chosen: ${t}`:"Drop the statement here, or choose a file."})}},L={render:()=>i(a.FileDropZone,{onFiles:()=>{},actions:i(a.Button,{emphasis:"standard",children:"Link from Document Library"}),children:"Drop the statement here, or choose a file."})},N={args:{disabled:!0,children:"Saving\u2026"}};var s=window.React,w=l||{},k=["Default","WithActions","Disabled"];function v({id:e}){let t=d[e],o={...w.args||{},...t.args||{}};return(t.render||(r=>s.createElement(w.component,r)))(o,{args:o,id:e,name:e})}var B=k.map(e=>s.createElement("section",{key:e,className:"ds-story"},s.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),s.createElement("div",{className:"ds-story-body"},s.createElement(v,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(s.createElement(s.Fragment,null,B));})();
+
+</script>
+</body>
+</html>

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

@@ -0,0 +1,53 @@
+# 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. look="statement" (data-look) puts the lines on a statement's terms: the Table's statement rows with caps 11px headers, 6px cell padding, no frame and rows tall enough for their controls. The footer rows move under the Add button into .LineItemGridSummary: a box on the base surface with a 1px border and the sheet's heavy rule on top, label left and figure right, a toned row in its status color, and the grand total over a dark rule with a double rule under its figure.
+
+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`; `data-look`: `statement` |
+| `LineItemGridScroll` |   |
+| `LineItemGridTable` | `data-look`: `statement` |
+| `Input` |   |
+| `FieldRoot` |   |
+| `ComboboxRoot` |   |
+| `MoneyField` |   |
+| `SelectTrigger` |   |
+| `LineItemGridNumberCol` |   |
+| `LineItemGridRemoveCol` |   |
+| `LineItemGridNumber` |   |
+| `LineItemGridRemove` |   |
+| `LineItemGridAdd` |   |
+| `LineItemGridAddHint` |   |
+| `Table` |   |
+| `LineItemGridSummary` |   |
+
+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`, `RuledTotals`, `Statement`.