Deploy Storybook to GitHub Pages

assets/ActionButton.stories-CYsEjeyI.js

@@ -0,0 +1,20 @@
+import{j as o}from"./index-_eCCCJMN.js";import"./stateDeferredHook-9sbfsEJK.js";import{r}from"./index-ne9I_3bB.js";import{A as n}from"./ActionButton-CwNE6oAT.js";import{w as e}from"./util-DX3mDqFH.js";import"./index-JPfhvaY4.js";const p={title:"Components / ActionButton",component:n,args:{}},a=()=>{const t=r.useCallback(async()=>{await e(1e3)},[]);return o.jsxs(o.Fragment,{children:[o.jsx(n,{icon:"ic_add",name:"Add new row",inProgressName:"Adding...",onClick:t}),o.jsx("br",{}),o.jsx(n,{icon:"ic_add","aria-label":"Add new row",onClick:t,level:"primary"}),o.jsx("br",{}),o.jsx(n,{icon:"ic_add","aria-label":"Add new row",onClick:t,level:"primary",className:"ActionButton-tight"}),o.jsx("br",{}),o.jsx(n,{icon:"ic_arrow_forward_right",name:"Continue",onClick:t,iconPosition:"right",level:"secondary",className:"ActionButton-fill",style:{maxWidth:160}}),o.jsx("br",{}),o.jsx(n,{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,p as default};

assets/GridDragRow.stories-B5rOKonB.js

@@ -0,0 +1,70 @@
+import{j as r}from"./index-_eCCCJMN.js";/* empty css                  */import{G as m,a as g}from"./GridUpdatingContextProvider-DK2uKtWm.js";import"./stateDeferredHook-9sbfsEJK.js";import{r as d}from"./index-ne9I_3bB.js";import{G as l}from"./Grid-BnijaEma.js";import{G as i,a as u}from"./GridWrapper-DVhisWkQ.js";import"./util-DX3mDqFH.js";import"./ActionButton-CwNE6oAT.js";import{w as h}from"./storybookTestUtil-B6V3sqEj.js";import"./index-JPfhvaY4.js";import"./index-DJy14G1K.js";const y={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:(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={(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 I=["DragRowSingleSelection"];export{t as DragRowSingleSelection,I as __namedExportsOrder,y as default};

assets/GridFilterButtons.stories-CP7ACcCk.js

@@ -0,0 +1,68 @@
+import{j as e}from"./index-_eCCCJMN.js";/* empty css                  */import{G as d,a as p}from"./GridUpdatingContextProvider-DK2uKtWm.js";import"./stateDeferredHook-9sbfsEJK.js";import{r as n}from"./index-ne9I_3bB.js";import{G as s}from"./Grid-BnijaEma.js";import{G as o,a as c,b as u,c as m,d as g}from"./GridWrapper-DVhisWkQ.js";import"./util-DX3mDqFH.js";import"./ActionButton-CwNE6oAT.js";import{w as f}from"./storybookTestUtil-B6V3sqEj.js";import"./index-JPfhvaY4.js";import"./index-DJy14G1K.js";const B={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 P=["_FilterButtonsExample"];export{i as _FilterButtonsExample,P as __namedExportsOrder,B as default};

assets/GridFormDropDown.stories-D5wuA3qp.js

@@ -0,0 +1,72 @@
+import{j as n}from"./index-_eCCCJMN.js";/* empty css              */import{a as d}from"./GridUpdatingContextProvider-DK2uKtWm.js";import"./stateDeferredHook-9sbfsEJK.js";import{m as i,k as e,p}from"./GridWrapper-DVhisWkQ.js";import{r as u}from"./index-ne9I_3bB.js";import"./Grid-BnijaEma.js";import"./util-DX3mDqFH.js";import"./ActionButton-CwNE6oAT.js";import"./index-JPfhvaY4.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};