Deploy Storybook to GitHub Pages

assets/ActionButton.stories-CxzE4J1F.js

@@ -0,0 +1,20 @@
+import{w as r,j as n}from"./util-C8bl_Tlr.js";import"./stateDeferredHook-CJyclKMp.js";import{r as e}from"./index-CDs2tPxN.js";import{A as o}from"./ActionButton-GkUtpqKQ.js";import"./index-7F8eXZrO.js";const A={title:"Components / ActionButton",component:o,args:{}},a=()=>{const t=e.useCallback(async()=>{await r(1e3)},[]);return n.jsxs(n.Fragment,{children:[n.jsx(o,{icon:"ic_add",name:"Add new row",inProgressName:"Adding...",onClick:t}),n.jsx("br",{}),n.jsx(o,{icon:"ic_add","aria-label":"Add new row",onClick:t,level:"primary"}),n.jsx("br",{}),n.jsx(o,{icon:"ic_add","aria-label":"Add new row",onClick:t,level:"primary",className:"ActionButton-tight"}),n.jsx("br",{}),n.jsx(o,{icon:"ic_arrow_forward_right",name:"Continue",onClick:t,iconPosition:"right",level:"secondary",className:"ActionButton-fill",style:{maxWidth:160}}),n.jsx("br",{}),n.jsx(o,{icon:"ic_arrow_forward_right",name:"Disabled",onClick:t,iconPosition:"right",level:"secondary",className:"ActionButton-fill",style:{maxWidth:160},disabled:!0})]})},i=a.bind({});i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`() => {
+  const performAction = useCallback(async () => {
+    await wait(1000);
+  }, []);
+  return <>
+      <ActionButton icon={"ic_add"} name={"Add new row"} inProgressName={"Adding..."} onClick={performAction} />
+      <br />
+      <ActionButton icon={"ic_add"} aria-label={"Add new row"} onClick={performAction} level={"primary"} />
+      <br />
+      <ActionButton icon={"ic_add"} aria-label={"Add new row"} onClick={performAction} level={"primary"} className={"ActionButton-tight"} />
+      <br />
+      <ActionButton icon={"ic_arrow_forward_right"} name={"Continue"} onClick={performAction} iconPosition={"right"} level={"secondary"} className={"ActionButton-fill"} style={{
+      maxWidth: 160
+    }} />
+      <br />
+      <ActionButton icon={"ic_arrow_forward_right"} name={"Disabled"} onClick={performAction} iconPosition={"right"} level={"secondary"} className={"ActionButton-fill"} style={{
+      maxWidth: 160
+    }} disabled={true} />
+    </>;
+}`,...i.parameters?.docs?.source}}};const u=["ActionButtonSimple"];export{i as ActionButtonSimple,u as __namedExportsOrder,A as default};

assets/GridDragRow.stories-hyDJX_xI.js

@@ -0,0 +1,70 @@
+import{j as r}from"./util-C8bl_Tlr.js";/* empty css                  */import{G as m,a as g}from"./GridUpdatingContextProvider-L40cfLZA.js";import"./stateDeferredHook-CJyclKMp.js";import{r as d}from"./index-CDs2tPxN.js";import{G as i,a as u}from"./GridWrapper-BNo9FMwc.js";import{G as l}from"./Grid-MDS9peNP.js";import"./index-7F8eXZrO.js";import"./ActionButton-GkUtpqKQ.js";import{w as h}from"./storybookTestUtil-B-yy9e-S.js";import"./v4-CQkTLCs1.js";import"./index-5cqeCcJX.js";import"./index-CVRyq5ci.js";const I={title:"Components / Grids",component:l,args:{quickFilter:!0,quickFilterValue:"",quickFilterPlaceholder:"Quick filter...",selectable:!1,rowSelection:"single"},parameters:{docs:{source:{type:"code"}}},decorators:[a=>r.jsx("div",{style:{maxWidth:1024,height:400,display:"flex",flexDirection:"column"},children:r.jsx(m,{children:r.jsx(g,{children:r.jsx(a,{})})})})]},f=a=>{const p=d.useMemo(()=>[i({field:"id",headerName:"Id",lockVisible:!0}),i({field:"position",headerName:"Position",cellRendererParams:{warning:({value:e})=>e==="Tester"&&"Testers are testing",info:({value:e})=>e==="Developer"&&"Developers are awesome"}}),i({field:"age",headerName:"Age"}),i({field:"height",headerName:"Height"}),i({field:"desc",headerName:"Description",flex:1})],[]),[n,c]=d.useState([{id:1e3,position:"Tester",age:30,height:`6'4"`,desc:"Tests application",dd:"1"},{id:1001,position:"Developer",age:12,height:`5'3"`,desc:"Develops application",dd:"2"},{id:1002,position:"Manager",age:65,height:`5'9"`,desc:"Manages",dd:"3"},{id:1003,position:"BA",age:42,height:`5'7"`,desc:"BAs",dd:"4"}]);return r.jsx(u,{maxHeight:300,children:r.jsx(l,{"data-testid":"readonly",...a,selectable:!0,rowSelection:"multiple",animateRows:!0,columnDefs:p,defaultColDef:{sortable:!1},rowData:n,onRowDragEnd:async(e,s,w)=>{c(n.map(o=>o.id===e.id?s:o.id===s.id?e:o))},rowDragText:({rowNode:e})=>`${e?.data.id} - ${e?.data.position}`})})},t=f.bind({});t.play=h;t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`(props: GridProps) => {
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(() => [GridCell({
+    field: "id",
+    headerName: "Id",
+    lockVisible: true
+  }), GridCell<ITestRow, ITestRow["position"]>({
+    field: "position",
+    headerName: "Position",
+    cellRendererParams: {
+      warning: ({
+        value
+      }) => value === "Tester" && "Testers are testing",
+      info: ({
+        value
+      }) => value === "Developer" && "Developers are awesome"
+    }
+  }), GridCell({
+    field: "age",
+    headerName: "Age"
+  }), GridCell({
+    field: "height",
+    headerName: "Height"
+  }), GridCell({
+    field: "desc",
+    headerName: "Description",
+    flex: 1
+  })], []);
+  const [rowData, setRowData] = useState([{
+    id: 1000,
+    position: "Tester",
+    age: 30,
+    height: \`6'4"\`,
+    desc: "Tests application",
+    dd: "1"
+  }, {
+    id: 1001,
+    position: "Developer",
+    age: 12,
+    height: \`5'3"\`,
+    desc: "Develops application",
+    dd: "2"
+  }, {
+    id: 1002,
+    position: "Manager",
+    age: 65,
+    height: \`5'9"\`,
+    desc: "Manages",
+    dd: "3"
+  }, {
+    id: 1003,
+    position: "BA",
+    age: 42,
+    height: \`5'7"\`,
+    desc: "BAs",
+    dd: "4"
+  }]);
+  return <GridWrapper maxHeight={300}>
+      <Grid data-testid={"readonly"} {...props} selectable={true} rowSelection="multiple" animateRows={true} columnDefs={columnDefs} defaultColDef={{
+      sortable: false
+    }} rowData={rowData} onRowDragEnd={async (movedRow, targetRow, _targetIndex) => {
+      setRowData(rowData.map(r => {
+        if (r.id === movedRow.id) return targetRow;
+        if (r.id === targetRow.id) return movedRow;
+        return r;
+      }));
+    }} rowDragText={({
+      rowNode
+    }) => \`\${rowNode?.data.id} - \${rowNode?.data.position}\`} />
+    </GridWrapper>;
+}`,...t.parameters?.docs?.source}}};const k=["DragRowSingleSelection"];export{t as DragRowSingleSelection,k as __namedExportsOrder,I as default};

assets/GridFilterButtons.stories-CddK6m7g.js

@@ -0,0 +1,68 @@
+import{j as e}from"./util-C8bl_Tlr.js";/* empty css                  */import{G as d,a as p}from"./GridUpdatingContextProvider-L40cfLZA.js";import"./stateDeferredHook-CJyclKMp.js";import{r as n}from"./index-CDs2tPxN.js";import{G as o,a as c,b as u,c as m,d as g}from"./GridWrapper-BNo9FMwc.js";import{G as s}from"./Grid-MDS9peNP.js";import"./index-7F8eXZrO.js";import"./ActionButton-GkUtpqKQ.js";import{w as f}from"./storybookTestUtil-B-yy9e-S.js";import"./v4-CQkTLCs1.js";import"./index-5cqeCcJX.js";import"./index-CVRyq5ci.js";const P={title:"Components / Grids",component:s,decorators:[r=>e.jsx("div",{style:{width:1024,height:400,display:"flex"},children:e.jsx(d,{children:e.jsx(p,{children:e.jsx(r,{})})})})]},h=r=>{const a=n.useMemo(()=>[o({field:"id",headerName:"Id"}),o({field:"position",headerName:"Position"}),o({field:"desc",headerName:"Description",flex:1})],[]),[l]=n.useState([{id:1e3,position:"Tester",age:30,desc:"Integration tester - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lectus neque. Nunc congue magna ut lorem pretium, vitae congue lorem malesuada. Etiam eget eleifend sapien, sed egestas felis. Aliquam ac augue sapien."},{id:1001,position:"Developer",age:12,desc:"Frontend developer"},{id:1002,position:"Manager",age:65,desc:"Technical Manager"},{id:1003,position:"Tester",age:30,desc:"E2E tester"},{id:1004,position:"Developer",age:12,desc:"Fullstack Developer"},{id:1005,position:"Developer",age:12,desc:"Backend Developer"},{id:1006,position:"Architect",age:30,desc:"Architect"}]);return e.jsxs(c,{children:[e.jsxs(u,{children:[e.jsx(m,{quickFilterPlaceholder:"Custom placeholder..."}),e.jsx(g,{luiButtonProps:{style:{whiteSpace:"nowrap"}},options:[{label:"All"},{label:"Developers",filter:t=>t.position==="Developer"},{label:"Testers",filter:t=>t.position==="Tester"}]})]}),e.jsx(s,{...r,columnDefs:a,rowData:l,sizeColumns:"auto-skip-headers"})]})},i=h.bind({});i.play=f;i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`(props: GridProps) => {
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(() => [GridCell({
+    field: "id",
+    headerName: "Id"
+  }), GridCell({
+    field: "position",
+    headerName: "Position"
+  }), GridCell({
+    field: "desc",
+    headerName: "Description",
+    flex: 1
+  })], []);
+  const [rowData] = useState([{
+    id: 1000,
+    position: "Tester",
+    age: 30,
+    desc: "Integration tester - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lectus neque. Nunc congue magna ut lorem pretium, vitae congue lorem malesuada. Etiam eget eleifend sapien, sed egestas felis. Aliquam ac augue sapien."
+  }, {
+    id: 1001,
+    position: "Developer",
+    age: 12,
+    desc: "Frontend developer"
+  }, {
+    id: 1002,
+    position: "Manager",
+    age: 65,
+    desc: "Technical Manager"
+  }, {
+    id: 1003,
+    position: "Tester",
+    age: 30,
+    desc: "E2E tester"
+  }, {
+    id: 1004,
+    position: "Developer",
+    age: 12,
+    desc: "Fullstack Developer"
+  }, {
+    id: 1005,
+    position: "Developer",
+    age: 12,
+    desc: "Backend Developer"
+  }, {
+    id: 1006,
+    position: "Architect",
+    age: 30,
+    desc: "Architect"
+  }]);
+  return <GridWrapper>
+      <GridFilters>
+        <GridFilterQuick quickFilterPlaceholder={"Custom placeholder..."} />
+        <GridFilterButtons<ITestRow> luiButtonProps={{
+        style: {
+          whiteSpace: "nowrap"
+        }
+      }} options={[{
+        label: "All"
+      }, {
+        label: "Developers",
+        filter: row => row.position === "Developer"
+      }, {
+        label: "Testers",
+        filter: row => row.position === "Tester"
+      }]} />
+      </GridFilters>
+      <Grid {...props} columnDefs={columnDefs} rowData={rowData} sizeColumns={"auto-skip-headers"} />
+    </GridWrapper>;
+}`,...i.parameters?.docs?.source}}};const A=["_FilterButtonsExample"];export{i as _FilterButtonsExample,A as __namedExportsOrder,P as default};

assets/GridFormDropDown.stories-BFE1dBSw.js

@@ -0,0 +1,72 @@
+import{j as n}from"./util-C8bl_Tlr.js";/* empty css              */import{a as d}from"./GridUpdatingContextProvider-L40cfLZA.js";import"./stateDeferredHook-CJyclKMp.js";import{k as i,m as p,i as e}from"./GridWrapper-BNo9FMwc.js";import{r as u}from"./index-CDs2tPxN.js";import"./Grid-MDS9peNP.js";import"./index-7F8eXZrO.js";import"./ActionButton-GkUtpqKQ.js";import"./v4-CQkTLCs1.js";const O={title:"GridForm / Static Tests",component:i,args:{}},m=s=>{const r=[["No options",{options:[]}],["Custom no options",{options:[],noOptionsMessage:"Custom no options"}],["Enabled and disabled",{options:[{label:"Enabled",value:1},{label:"Disabled",value:0,disabled:!0}]}],["Headers",{options:[e("Header 1"),{label:"Option 1",value:1},e("Header 2"),{label:"Option 2",value:2}]}],["Filter",{filtered:"local",options:[e("Header 1"),{label:"Option 1",value:1},e("Header 2"),{label:"Option 2",value:2}]}],["Filter custom placeholder",{filtered:"local",filterPlaceholder:"Custom placeholder",filterHelpText:"Filter help text",options:[e("Header 1"),{label:"Option 1",value:1}]}],["Filter help text and default filter text",{filtered:"local",filterHelpText:"Filter help text",filterDefaultValue:"filter",options:[e("Header 1"),{label:"Filter match",value:1},e("ERROR! this header should not be visible"),{label:"ERROR! this option should not be visible",value:2}]}]],a=r.map(()=>u.useRef(null));return n.jsx("div",{className:"react-menu-inline-test",children:n.jsx(d,{children:r.map((o,l)=>n.jsxs("div",{children:[n.jsx("h6",{ref:a[l],children:o[0]}),n.jsx(p.Provider,{value:{anchorRef:a[l],data:{value:o[2]},value:o[2],field:"value"},children:n.jsx(i,{...s,...o[1]})})]},`${l}`))})})},t=m.bind({});t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`(props: GridFormDropDownProps<any>) => {
+  const configs: [string, GridFormDropDownProps<GridBaseRow>, string?][] = [["No options", {
+    options: []
+  }], ["Custom no options", {
+    options: [],
+    noOptionsMessage: "Custom no options"
+  }], ["Enabled and disabled", {
+    options: [{
+      label: "Enabled",
+      value: 1
+    }, {
+      label: "Disabled",
+      value: 0,
+      disabled: true
+    }]
+  }], ["Headers", {
+    options: [MenuHeaderItem("Header 1"), {
+      label: "Option 1",
+      value: 1
+    }, MenuHeaderItem("Header 2"), {
+      label: "Option 2",
+      value: 2
+    }]
+  }], ["Filter", {
+    filtered: "local",
+    options: [MenuHeaderItem("Header 1"), {
+      label: "Option 1",
+      value: 1
+    }, MenuHeaderItem("Header 2"), {
+      label: "Option 2",
+      value: 2
+    }]
+  }], ["Filter custom placeholder", {
+    filtered: "local",
+    filterPlaceholder: "Custom placeholder",
+    filterHelpText: "Filter help text",
+    options: [MenuHeaderItem("Header 1"), {
+      label: "Option 1",
+      value: 1
+    }]
+  }], ["Filter help text and default filter text", {
+    filtered: "local",
+    filterHelpText: "Filter help text",
+    filterDefaultValue: "filter",
+    options: [MenuHeaderItem("Header 1"), {
+      label: "Filter match",
+      value: 1
+    }, MenuHeaderItem("ERROR! this header should not be visible"), {
+      label: "ERROR! this option should not be visible",
+      value: 2
+    }]
+  }]];
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const anchorRefs = configs.map(() => useRef<HTMLHeadingElement>(null));
+  return <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        {configs.map((config, index) => <div key={\`\${index}\`}>
+            <h6 ref={anchorRefs[index]}>{config[0]}</h6>
+            <GridPopoverContext.Provider value={(({
+          anchorRef: anchorRefs[index],
+          data: {
+            value: config[2]
+          },
+          value: config[2],
+          field: "value"
+        } as any) as GridPopoverContextType<any>)}>
+              <GridFormDropDown {...props} {...config[1]} />
+            </GridPopoverContext.Provider>
+          </div>)}
+      </GridContextProvider>
+    </div>;
+}`,...t.parameters?.docs?.source}}};const G=["GridFormDropDown_"];export{t as GridFormDropDown_,G as __namedExportsOrder,O as default};