@oliasoft-open-source/react-ui-library 4.4.8 → 4.5.0-beta-1

package/dist/storybook/assets/unit-table.stories-Vd1Nqk2h.js

@@ -0,0 +1,434 @@
+import{j as e}from"./jsx-runtime-FsUICBgo.js";import{r as w}from"./index-RfLt4OUa.js";import{d as v}from"./index-IQMsp8Ab.js";import{G as R}from"./grid-u1mZpaML.js";import{F as _}from"./form-row-bwoDTUga.js";import{C as I}from"./card-0r8RRVk-.js";import{F as $}from"./field-eknsj_Ll.js";import{H as x}from"./heading-Bk0bpNfe.js";import{S as L}from"./select-JjEPivho.js";/* empty css               */import"./accordion-6_27SROY.js";import"./accordion-with-default-toggle-8PUIm8jP.js";import{M as ie}from"./actions-Z9jDWreP.js";import"./badge-23Ty_zBt.js";import"./breadcrumb-WFZ7OoC2.js";import{B as oe}from"./button-7V8oA22w.js";import"./button-group-q8QKkLVU.js";import"./check-box-LZdXXKhv.js";import"./row-vFUhHoz5.js";import"./divider-RwW2f_N0.js";import"./modal-Dr5HffrG.js";import"./drawer-WuErQ5Z8.js";import"./empty-PU0JdhZM.js";import"./file-input-7-7kYhsS.js";import"./flex-RYZsoWEN.js";import{I as se}from"./icon-y1a2N5SZ.js";import"./input-group-R8LoqKRn.js";import"./input-group-addon-BHVsW9mL.js";import"./help-icon--rUDxLUD.js";import"./input-u1He-wWs.js";import"./label-0_Qf6I8t.js";import"./list-dAlCO11z.js";import"./meta-content-2S9BpSoX.js";import"./loader-TGOJBZQG.js";import"./message-yii7x6Na.js";import"./option-dropdown-6QvoS02o.js";import"./page-9-f6BzS0.js";import"./pagination-5n5spTRo.js";import"./popover-Y3FpGdUS.js";import"./portal-zPiHHKoC.js";import"./print-header-mVYWFles.js";import"./progress-bar-NRjN2baY.js";import"./radio-button-jHcwHUA4.js";import"./rich-text-input-W-kYpvgO.js";import"./side-bar-Fjr2t9MT.js";import"./slider-nl2rJ9LF.js";import"./spacer-Yji9g2AW.js";import"./spinner-R8Il4aRe.js";import{T as de}from"./table-lfeSnryj.js";import"./tabs-fcLbHC1n.js";import"./text-6KQ6ntOV.js";import"./text-link-1uKYQqn_.js";import"./textarea-8bcldTyf.js";import"./toaster-2HasMRmP.js";import"./toggle-BPI2y-lU.js";import"./tooltip-HEHiU__l.js";import"./top-bar-3dxv0sp9.js";import"./pop-confirm-nfz5S-f-.js";import"./tree-Rhl5ea49.js";import"./number-input-SvjJIGsW.js";import"./unit-input-fxjK7nON.js";import{l as ue}from"./lodash-Bmg8FrMx.js";import"./disabled-context-urNQThQz.js";import"./index-cCpkwrS5.js";import"./styled-components.browser.esm-qIipjd6c.js";import"./tslib.es6-OIsz3r9a.js";import"./index-VW3EWkuE.js";import"./common-types-U65vzrrz.js";import"./types-5uVBABF4.js";import"./index-4QtD-hFu.js";import"./extends-dGVwEr9R.js";import"./assertThisInitialized-4q6YPdh3.js";import"./inheritsLoose-Y9jOMJLd.js";import"./memoize-one.esm-hqe5SRxC.js";import"./types-VB5zD18b.js";import"./select.input-zP5tW20f.js";import"./index-miLrID2P.js";import"./index.es-JXn3JM7k.js";import"./redux-F5dueAP3.js";import"./objectSpread2-93s0nBry.js";import"./index-ugi_ZH6T.js";const D=Object.freeze({ARRAY:"array",OBJECT:"object"}),pe=({tableDef:t,displayedUnits:l,handleUnitChange:m,oldStructureType:g})=>t.map(({convertible:d,unitKey:y,key:i},b)=>{var u;if(!d)return{value:""};const f=g===D.ARRAY?l[b]:l[i],c=(u=v.getAltUnitsListByQuantity(y))==null?void 0:u.map(({unit:p,label:a})=>({label:a,value:p}));return{value:f,options:c,type:"Select",onChange:({target:{value:p}})=>{p!==f&&m(i,p,b)}}}),ce=({tableDef:t})=>t.map(({header:l})=>({value:l})),me=(t,l,m,g)=>{if(!(t!=null&&t.length))return[];let d;const y=ue.cloneDeep(t);g&&([d]=y.splice(0,1));const i=y.map(b=>m.reduce((c,o,u)=>{const{key:p,defaultValue:a}=o,n=g===D.ARRAY?l[u]:l[p],h=g===D.ARRAY?d[u]:d==null?void 0:d[p],s=g===D.ARRAY?b[u]:b[p];let r=s??a;if(h&&n&&(r=v.convertAndGetValue(r,n,h)),g){if(g===D.ARRAY)return b[u]=r,b}else if(v.isValueWithUnit(s)&&n){const T=v.convertAndGetValue(r,n);r=v.isNumeric(T)?v.withUnit(T,n):r}return{...c,[p]:r}},{}));return g?[l,...i]:i},ge=(t,l,m)=>({label:"Add",icon:"plus",primary:!0,onClick:()=>t(l,m),testId:"lithology-table-add-new-row"}),M=(t,l,m)=>m===D.ARRAY?t.reduce((g,d,y)=>{const{unitKey:i}=d;return g[y]=l[i],g},[]):t.reduce((g,d)=>{const{key:y,unitKey:i}=d;return{...g,[y]:l[i]}},{}),he=({rows:t,tableDef:l,displayedUnits:m,handleUnitChange:g,tableActions:d,oldStructureType:y=D.OBJECT})=>{if(!t)return{rows:[],headers:[]};const{addRow:i}=d;return{headers:[{cells:ce({tableDef:l}),actions:i?[ge(i,t,m)]:[]},{cells:pe({tableDef:l,displayedUnits:m,handleUnitChange:g,oldStructureType:y})}],rows:t}},U=({data:t,unitTemplate:l,tableDef:m,convertToCells:g,tableActions:d,testId:y,oldStructureType:i=D.OBJECT})=>{const[b,f]=w.useState(M(m,l,i));w.useEffect(()=>{f(M(m,l,i))},[l]);const c=(p,a,n)=>{i===D.ARRAY?f(h=>{const s=[...h];return s[n]=a,s}):f(h=>({...h,[p]:a}))},{headers:o,rows:u}=w.useMemo(()=>he({rows:g(me(t,b,m,i),b),tableDef:m,displayedUnits:b,handleUnitChange:c,tableActions:d,oldStructureType:i}),[b,t]);return e.jsx(de,{table:{testId:y,headers:o,rows:u,columnAlignment:m.map(p=>p.columnAlignment),columnWidths:m.map(p=>p.columnWidth),fixedWidth:"auto"},onListReorder:(d==null?void 0:d.reorderComponents)||void 0})};try{U.displayName="UnitTable",U.__docgenInfo={description:"",displayName:"UnitTable",props:{data:{defaultValue:null,description:"",name:"data",required:!0,type:{name:"any[]"}},unitTemplate:{defaultValue:null,description:"",name:"unitTemplate",required:!0,type:{name:"Record<string, any>"}},tableDef:{defaultValue:null,description:"",name:"tableDef",required:!0,type:{name:"ITableDefinition[]"}},convertToCells:{defaultValue:null,description:"",name:"convertToCells",required:!0,type:{name:"(displayedData: any[], displayedUnits: Record<string, any>) => { cells: ICell[]; actions: IActionsType; }[]"}},tableActions:{defaultValue:null,description:"",name:"tableActions",required:!0,type:{name:"ITableActions"}},oldStructureType:{defaultValue:{value:"object"},description:"",name:"oldStructureType",required:!1,type:{name:"string | null"}},testId:{defaultValue:null,description:"",name:"testId",required:!0,type:{name:"string"}}}}}catch{}const be="#ff6600",ye=({onDeleteTableRow:t,rowid:l})=>{let m=[{type:"Option",label:"Delete",icon:e.jsx(se,{icon:"delete",color:be}),onClick:()=>t(l)}];return e.jsx(ie,{menu:{trigger:"Component",component:e.jsx(oe,{small:!0,basic:!0,round:!0,colored:"muted",icon:"menu",testId:`row-menu-${l}`}),sections:m}})};try{tablerowmenu.displayName="tablerowmenu",tablerowmenu.__docgenInfo={description:"",displayName:"tablerowmenu",props:{onDeleteTableRow:{defaultValue:null,description:"",name:"onDeleteTableRow",required:!0,type:{name:"(rowid: number) => void"}},rowid:{defaultValue:null,description:"",name:"rowid",required:!0,type:{name:"number"}}}}}catch{}const ve=["Rock","Sandstone"],te=ve.map(t=>({label:t,value:t})),fe=[{Cp:"1256.039|J/(kg*degC)",Ro:"2243|kg/m3",name:"Utsira Formation",Lambda:"1.591|W/(mK)",depth_to:"1200|m",rock_type:"Rock",depth_from:"385|m"},{Cp:"1300|J/(kg*degC)",Ro:"2200|kg/m3",name:"Sele Formation",Lambda:"1.591|W/(mK)",depth_to:"1600|m",rock_type:"Sandstone",depth_from:"1200|m"},{Cp:"1256.039|J/(kg*degC)",Ro:"2243|kg/m3",name:"Lista Formation",Lambda:"1.591|W/(mK)",depth_to:"1950|m",rock_type:"Rock",depth_from:"1600|m"},{Cp:"1256.039|J/(kg*degC)",Ro:"2243|kg/m3",name:"Våge Formation",Lambda:"1.591|W/(mK)",depth_to:"2200|m",rock_type:"Rock",depth_from:"1950|m"}],we=[{key:"rock_type",header:"Rock",translationKey:"rock",defaultValue:"",type:"Select",convertible:!1,unitKey:"",columnAlignment:"left",columnWidth:"150px",options:te},{key:"name",header:"Formation name",translationKey:"name",placeholder:"Formation Name",type:"Input",disabled:!1,convertible:!1,unitKey:"",columnAlignment:"left",columnWidth:"160px"},{key:"depth_from",header:"Top Depth (TVD)",translationKey:"top_depth",type:"NumberInput",disabled:!1,convertible:!0,unitKey:"length",columnAlignment:"right",columnWidth:"150px"},{key:"depth_to",header:"Bottom Depth (TVD)",translationKey:"bottom_depth",type:"NumberInput",disabled:!1,convertible:!0,unitKey:"length",columnAlignment:"right",columnWidth:"160px"},{key:"Ro",header:"Density",translationKey:"ro",type:"NumberInput",defaultValue:0,disabled:!0,convertible:!0,unitKey:"density",columnAlignment:"right",columnWidth:"100px"},{key:"Cp",header:"Specific Heat Capacity",translationKey:"cp",type:"NumberInput",defaultValue:0,unitKey:"specificHeatCapacity",disabled:!0,convertible:!0,columnWidth:"150px",columnAlignment:"right"},{key:"Lambda",header:"Thermal Conductivity",translationKey:"cp",type:"NumberInput",unitKey:"thermalConductivity",disabled:!0,convertible:!0,defaultValue:0,columnWidth:"150px",columnAlignment:"right"}],H={acceleration:"ft/s2",angleGradient:"deg/100ft",angles:"deg",areaOther:"ft2",areaTubular:"in2",blowoutFlowRate:"STB/d",blowoutGasFlowRate:"MMSCFD",blowoutOilFlowRate:"STB/d",density:"ppg",densityGas:"Glbm/ft3",densityOil:"lbm/ft3",densityOilGas:"lbm/ft3",densitySolid:"lbm/ft3",depth:"ft",diameters:"cm",distance:"ft",doglegSeverity:"deg/100ft",duration:"min",durationLong:"d",durationShort:"h",flowrate:"bpm",fluidCompressibility:"1/psi",force:"lbf",forceGradient:"lbf/ft",frequency:"Hz",gasliftFlowRate:"STB/d",gasVolume:"MMSCF",gor:"SCF/STB",height:"ft",inflowProductivityIndex:"STB/d/psi",injectionFlowRate:"bpm",intensity:"hhp/in2",interfacialTension:"lbf/ft",inverseStandSpeed:"min/stand",kickToleranceVolume:"bbl",length:"km",linearCapacity:"bbl/ft",location:"m",massFlowRate:"lbm/s",mixingRequirements:"m3/t",moleWeight:"lbf/mol",oilVolume:"STB",percentage:"%",permeability:"mD",power:"BTU/h",pressure:"psi",pressurechange:"psi",pressureGradient:"psi/ft",pressurePerTemperature:"psi/F",productionFlowRate:"STB/d",productionFlowRateGas:"MMSCFD",productionFlowRateOil:"STB/d",pumpRate:"bpm",rop:"ft/h",rotationalSpeed:"rpm",roughness:"in",specificHeatCapacity:"BTU/(lbm*degF)",speed:"ft/s",stress:"psi",temperature:"F",tempgrad:"F/100ft",thermalConductivity:"BTU/(h*ft*degF)",thermalExpansionCoefficient:"E-06/degF",torque:"Nm",torqueGradient:"lbf",turbulentSkin:"1/MMSCFD",viscosity:"cP",volume:"bbl",wearFactor:"E-10/psi",weight:"lbf",weightGradient:"ppf",wltubulars:"ppf",youngsModulus:"psi"},Ce=[{length:"10|m",pressure:"5|psi"},{length:"20|m",pressure:"10|psi"}],Te=[{length:"m",pressure:"psi"},{length:"10",pressure:"5"},{length:"20",pressure:"10"}],Ie=[["m","psi"],[10,5],[20,10]],G=[{key:"length",header:"Length",translationKey:"length",defaultValue:0,type:"NumberInput",convertible:!0,unitKey:"length",columnAlignment:"left",columnWidth:"150px"},{key:"pressure",header:"Pressure",translationKey:"pressure",defaultValue:0,type:"NumberInput",convertible:!0,unitKey:"pressure",columnAlignment:"left",columnWidth:"150px"}],xe=t=>t===0,De=(t,l)=>l===t-1,Re=(t,l)=>l?`(Test value text) ${t}`:t,en={title:"Basic/UnitTable",component:U},k=()=>{const[t,l]=w.useState(Ce),[m,g]=w.useState([]),[d,y]=w.useState(H),i=(c,o,u,p)=>{const{value:a}=c.target;let n;l(h=>(n=[...h],n[u][o]=v.withUnit(a,p[o]),n))},b=(c,o)=>{const u=c.map((p,a)=>{let{length:n,pressure:h}=p;return{cells:[{value:v.getValue(n),type:"NumberInput",disabled:!1,onChange:s=>i(s,"length",a,o),testId:`table-cell-${a}-0`},{value:v.getValue(h),type:"NumberInput",disabled:!1,onChange:s=>i(s,"pressure",a,o),testId:`table-cell-${a}-1`}],actions:[]}});return g(c),u},f=[{value:"m",label:"m"},{value:"ft",label:"ft"},{value:"km",label:"km"},{value:"in",label:"in"},{value:"mm",label:"mm"}];return e.jsxs(R,{columns:"1fr",gap:!0,children:[e.jsx(I,{heading:e.jsx(x,{children:"Global View Settings"}),children:e.jsx(_,{children:e.jsx($,{label:"Active Unit Template For Length",children:e.jsx(L,{options:f,value:{value:d.length},onChange:c=>{y(o=>({...o,length:c.target.value}))},width:"100px"})})})}),e.jsx(U,{tableActions:{},data:t,tableDef:G,convertToCells:b,unitTemplate:d,testId:"Test",oldStructureType:null}),e.jsxs(R,{columns:"1fr 1fr",gap:!0,children:[e.jsx(I,{heading:e.jsx(x,{children:"Display data"}),children:e.jsx("pre",{children:e.jsx("code",{children:JSON.stringify(m,null,2)})})}),e.jsx(I,{heading:e.jsx(x,{children:"Storage data"}),children:e.jsx("pre",{children:e.jsx("code",{children:JSON.stringify(t,null,2)})})})]})]})},F=()=>{const[t,l]=w.useState(Te),[m,g]=w.useState([]),[d,y]=w.useState(H),i=(c,o,u,p)=>{const{value:a}=c.target;if(u<0||u>=t.length){console.error("Index out of range");return}let n=[...t];const h=t[0][o],s=p[o];h!==s&&(n=n.map((r,T)=>{if(T===0)return r;const S=v.convertAndGetValue(r[o],s,h);return{...r,[o]:S}}),n[0][o]=s),n[u][o]=a,l(n)},b=(c,o)=>{const u=c.slice(1).map((p,a)=>{let{length:n,pressure:h}=p;return{cells:[{value:n,type:"NumberInput",disabled:!1,onChange:s=>i(s,"length",a+1,o),testId:`table-cell-${a+1}-0`},{value:h,type:"NumberInput",disabled:!1,onChange:s=>i(s,"pressure",a+1,o),testId:`table-cell-${a+1}-1`}],actions:[]}});return g(c),u},f=[{value:"m",label:"m"},{value:"ft",label:"ft"},{value:"km",label:"km"},{value:"in",label:"in"},{value:"mm",label:"mm"}];return e.jsxs(R,{columns:"1fr",gap:!0,children:[e.jsx(I,{heading:e.jsx(x,{children:"Global View Settings"}),children:e.jsx(_,{children:e.jsx($,{label:"Active Unit Template For Length",children:e.jsx(L,{options:f,value:{value:d.length},onChange:c=>{y(o=>({...o,length:c.target.value}))},width:"100px"})})})}),e.jsx(U,{tableActions:{},data:t,tableDef:G,convertToCells:b,unitTemplate:d,testId:"Test"}),e.jsxs(R,{columns:"1fr 1fr",gap:!0,children:[e.jsx(I,{heading:e.jsx(x,{children:"Display data"}),children:e.jsx("pre",{children:e.jsx("code",{children:JSON.stringify(m,null,2)})})}),e.jsx(I,{heading:e.jsx(x,{children:"Storage data"}),children:e.jsx("pre",{children:e.jsx("code",{children:JSON.stringify(t,null,2)})})})]})]})},A=()=>{const[t,l]=w.useState(Ie),[m,g]=w.useState([]),[d,y]=w.useState(H),i=(c,o,u,p)=>{const{value:a}=c.target;if(o<0||o>=t.length){console.error("Index out of range");return}let n=[...t];const h=t[0][u],s=p[u];h!==s&&(n=n.map((r,T)=>{if(T===0){const j=r;return j[u]=s,j}const S=r[u],O=v.convertAndGetValue(S,s,h);return r[u]=O,r})),n[o][u]=a,l(n)},b=(c,o)=>{const u=c.slice(1).map((p,a)=>{let[n,h]=p;return{cells:[{value:n,type:"NumberInput",disabled:!1,onChange:s=>i(s,a+1,0,o),testId:`table-cell-${a+1}-0`},{value:h,type:"NumberInput",disabled:!1,onChange:s=>i(s,a+1,1,o),testId:`table-cell-${a+1}-1`}],actions:[]}});return g(c),u},f=[{value:"m",label:"m"},{value:"ft",label:"ft"},{value:"km",label:"km"},{value:"in",label:"in"},{value:"mm",label:"mm"}];return e.jsxs(R,{columns:"1fr",gap:!0,children:[e.jsx(I,{heading:e.jsx(x,{children:"Global View Settings"}),children:e.jsx(_,{children:e.jsx($,{label:"Active Unit Template For Length",children:e.jsx(L,{options:f,value:{value:d.length},onChange:c=>{y(o=>({...o,length:c.target.value}))},width:"100px"})})})}),e.jsx(U,{tableActions:{},data:t,tableDef:G,convertToCells:b,unitTemplate:d,testId:"Test",oldStructureType:"array"}),e.jsxs(R,{columns:"1fr 1fr",gap:!0,children:[e.jsx(I,{heading:e.jsx(x,{children:"Display data"}),children:e.jsx("pre",{children:e.jsx("code",{children:JSON.stringify(m,null,2)})})}),e.jsx(I,{heading:e.jsx(x,{children:"Storage data"}),children:e.jsx("pre",{children:e.jsx("code",{children:JSON.stringify(t,null,2)})})})]})]})},N=()=>{const[t,l]=w.useState(fe),[m,g]=w.useState([]),[d,y]=w.useState(H),i=(a,n,h,s)=>{const{value:r}=a.target;let T;l(S=>(T=[...S],T[h][n]=n==="rock_type"||n==="name"?r:v.withUnit(r,s[n]),T))},b=()=>{const a={...t[t.length-1]};l(n=>[...n,a])},f=a=>l(n=>n.filter((h,s)=>a!==s)),c=a=>e.jsx(ye,{onDeleteTableRow:f,rowid:a}),o=(a,n)=>{const h=a.map((s,r)=>{let{rock_type:T,name:S,depth_from:O,depth_to:j,Ro:ne,Cp:ae,Lambda:le}=s;const V=xe(r),E=De(t.length,r),re=V?[]:[{childComponent:c(r)}];return{cells:[{options:te,value:T||"Rock",type:"Select",disabled:!1,onChange:C=>i(C,"rock_type",r,n),testId:`table-cell-${r}-0`},{value:S,type:"Input",placeholder:"Name",disabled:!1,onChange:C=>i(C,"name",r,n),testId:`table-cell-${r}-1`},{value:Re(v.getValue(O),V),type:V?"Static":"NumberInput",style:V?{whiteSpace:"nowrap"}:{},disabled:V,onChange:C=>i(C,"depth_from",r,n),testId:`table-cell-${r}-2`},{value:v.getValue(j),type:E?"Static":"NumberInput",style:E?{whiteSpace:"nowrap"}:{},disabled:E,onChange:C=>i(C,"depth_to",r,n),testId:`table-cell-${r}-3`},{value:v.getValue(ne),type:"NumberInput",disabled:!0,onChange:C=>i(C,"Ro",r,n),testId:`table-cell-${r}-4`},{value:v.getValue(ae),type:"NumberInput",disabled:!0,onChange:C=>i(C,"Cp",r,n),testId:`table-cell-${r}-5`},{value:v.getValue(le),type:"NumberInput",disabled:!0,onChange:C=>i(C,"Lambda",r,n),testId:`table-cell-${r}-6`}],actions:re}});return g(a),h},u={addRow:b,reorderComponents:()=>{}},p=[{value:"m",label:"m"},{value:"ft",label:"ft"},{value:"km",label:"km"},{value:"in",label:"in"},{value:"mm",label:"mm"}];return e.jsxs(R,{columns:"1fr",gap:!0,children:[e.jsx(I,{heading:e.jsx(x,{children:"Global View Settings"}),children:e.jsx(_,{children:e.jsx($,{label:"Active Unit Template For Length",children:e.jsx(L,{options:p,value:{value:d.length},onChange:a=>{y(n=>({...n,length:a.target.value}))},width:"100px"})})})}),e.jsx(U,{tableActions:u,data:t,tableDef:we,convertToCells:o,unitTemplate:d,testId:"Test",oldStructureType:null}),e.jsxs(R,{columns:"1fr 1fr",gap:!0,children:[e.jsx(I,{heading:e.jsx(x,{children:"Display data"}),children:e.jsx("pre",{children:e.jsx("code",{children:JSON.stringify(m,null,2)})})}),e.jsx(I,{heading:e.jsx(x,{children:"Storage data"}),children:e.jsx("pre",{children:e.jsx("code",{children:JSON.stringify(t,null,2)})})})]})]})};var K,J,W;k.parameters={...k.parameters,docs:{...(K=k.parameters)==null?void 0:K.docs,source:{originalSource:`() => {
+  const [data, setData] = useState<any[]>(simpleData);
+  const [displayedData, setDisplayedData] = useState<any[]>([]);
+  const [unitTemplate, setUnitTemplate] = useState(initalUnitTemplate);
+  const onChangeValue = (ev: ChangeEvent<HTMLInputElement>, columnName: keyof ISimpleData, rowIx: number, displayedUnits: Record<string, string>) => {
+    const {
+      value
+    } = ev.target;
+    let newData: ISimpleData[];
+    setData(prev => {
+      newData = [...prev];
+      newData[rowIx][columnName] = withUnit(value, displayedUnits[columnName]);
+      return newData;
+    });
+  };
+  const convertToCells = (displayedRows: Array<any>, displayedUnits: Record<string, any>) => {
+    const cells = displayedRows.map((item, rowIndex) => {
+      let {
+        length,
+        pressure
+      } = item;
+      return {
+        cells: [{
+          value: getValue(length),
+          type: 'NumberInput',
+          disabled: false,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'length', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${0}\`
+        }, {
+          value: getValue(pressure),
+          type: 'NumberInput',
+          disabled: false,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'pressure', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${1}\`
+        }],
+        actions: []
+      };
+    });
+    setDisplayedData(displayedRows);
+    return cells;
+  };
+  const unitOptions = [{
+    value: 'm',
+    label: 'm'
+  }, {
+    value: 'ft',
+    label: 'ft'
+  }, {
+    value: 'km',
+    label: 'km'
+  }, {
+    value: 'in',
+    label: 'in'
+  }, {
+    value: 'mm',
+    label: 'mm'
+  }];
+  return <Grid columns="1fr" gap>
+      <Card heading={<Heading>Global View Settings</Heading>}>
+        <FormRow>
+          <Field label="Active Unit Template For Length">
+            <Select options={unitOptions} value={{
+            value: unitTemplate.length
+          }} onChange={evt => {
+            setUnitTemplate(prev => ({
+              ...prev,
+              length: evt.target.value
+            }));
+          }} width="100px" />
+          </Field>
+        </FormRow>
+      </Card>
+      <UnitTable tableActions={{}} data={data} tableDef={simpleTableDef} convertToCells={convertToCells} unitTemplate={unitTemplate} testId="Test" oldStructureType={null} />
+      <Grid columns="1fr 1fr" gap>
+        <Card heading={<Heading>Display data</Heading>}>
+          <pre>
+            <code>{JSON.stringify(displayedData, null, 2)}</code>
+          </pre>
+        </Card>
+        <Card heading={<Heading>Storage data</Heading>}>
+          <pre>
+            <code>{JSON.stringify(data, null, 2)}</code>
+          </pre>
+        </Card>
+      </Grid>
+    </Grid>;
+}`,...(W=(J=k.parameters)==null?void 0:J.docs)==null?void 0:W.source}}};var B,q,Y;F.parameters={...F.parameters,docs:{...(B=F.parameters)==null?void 0:B.docs,source:{originalSource:`() => {
+  const [data, setData] = useState<any[]>(simpleOldData);
+  const [displayedData, setDisplayedData] = useState<any[]>([]);
+  const [unitTemplate, setUnitTemplate] = useState(initalUnitTemplate);
+  const onChangeValue = (ev: ChangeEvent<HTMLInputElement>, key: keyof ISimpleData, rowIx: number, displayedUnits: Record<string, any>) => {
+    const {
+      value
+    } = ev.target;
+    if (rowIx < 0 || rowIx >= data.length) {
+      console.error('Index out of range');
+      return;
+    }
+    let newData = [...data];
+    const prevUnit = data[0][key];
+    const newUnit = displayedUnits[key];
+    // If the units have changed, convert all data in the column
+    if (prevUnit !== newUnit) {
+      newData = newData.map((row, i) => {
+        if (i === 0) return row;
+        const convertedValue = convertAndGetValue(row[key], newUnit, prevUnit);
+        return {
+          ...row,
+          [key]: convertedValue
+        };
+      });
+      newData[0][key] = newUnit;
+    }
+    newData[rowIx][key] = value;
+    setData(newData);
+  };
+  const convertToCells = (displayedRows: Array<any>, displayedUnits: Record<string, any>) => {
+    const cells = displayedRows.slice(1).map((item, rowIndex) => {
+      let {
+        length,
+        pressure
+      } = item;
+      return {
+        cells: [{
+          value: length,
+          type: 'NumberInput',
+          disabled: false,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'length', rowIndex + 1, displayedUnits),
+          testId: \`table-cell-\${rowIndex + 1}-\${0}\`
+        }, {
+          value: pressure,
+          type: 'NumberInput',
+          disabled: false,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'pressure', rowIndex + 1, displayedUnits),
+          testId: \`table-cell-\${rowIndex + 1}-\${1}\`
+        }],
+        actions: []
+      };
+    });
+    setDisplayedData(displayedRows);
+    return cells;
+  };
+  const unitOptions = [{
+    value: 'm',
+    label: 'm'
+  }, {
+    value: 'ft',
+    label: 'ft'
+  }, {
+    value: 'km',
+    label: 'km'
+  }, {
+    value: 'in',
+    label: 'in'
+  }, {
+    value: 'mm',
+    label: 'mm'
+  }];
+  return <Grid columns="1fr" gap>
+      <Card heading={<Heading>Global View Settings</Heading>}>
+        <FormRow>
+          <Field label="Active Unit Template For Length">
+            <Select options={unitOptions} value={{
+            value: unitTemplate.length
+          }} onChange={evt => {
+            setUnitTemplate(prev => ({
+              ...prev,
+              length: evt.target.value
+            }));
+          }} width="100px" />
+          </Field>
+        </FormRow>
+      </Card>
+      <UnitTable tableActions={{}} data={data} tableDef={simpleTableDef} convertToCells={convertToCells} unitTemplate={unitTemplate} testId="Test" />
+      <Grid columns="1fr 1fr" gap>
+        <Card heading={<Heading>Display data</Heading>}>
+          <pre>
+            <code>{JSON.stringify(displayedData, null, 2)}</code>
+          </pre>
+        </Card>
+        <Card heading={<Heading>Storage data</Heading>}>
+          <pre>
+            <code>{JSON.stringify(data, null, 2)}</code>
+          </pre>
+        </Card>
+      </Grid>
+    </Grid>;
+}`,...(Y=(q=F.parameters)==null?void 0:q.docs)==null?void 0:Y.source}}};var P,z,Q;A.parameters={...A.parameters,docs:{...(P=A.parameters)==null?void 0:P.docs,source:{originalSource:`() => {
+  const [data, setData] = useState<any[]>(simpleOldStructureWithArrayUnit);
+  const [displayedData, setDisplayedData] = useState<any[]>([]);
+  const [unitTemplate, setUnitTemplate] = useState(initalUnitTemplate);
+  const onChangeValue = (ev: ChangeEvent<HTMLInputElement>, rowIx: number, colIx: number, displayedUnits: Record<string, any>) => {
+    const {
+      value
+    } = ev.target;
+    if (rowIx < 0 || rowIx >= data.length) {
+      console.error('Index out of range');
+      return;
+    }
+    let newData = [...data];
+    const prevUnit = data[0][colIx];
+    const newUnit = displayedUnits[colIx];
+    // If the units have changed, convert all data in the column
+    if (prevUnit !== newUnit) {
+      newData = newData.map((row, i) => {
+        if (i === 0) {
+          const updatedUnitRow = row;
+          updatedUnitRow[colIx] = newUnit;
+          return updatedUnitRow;
+        }
+        const value = row[colIx];
+        const convertedValue = convertAndGetValue(value, newUnit, prevUnit);
+        row[colIx] = convertedValue;
+        return row;
+      });
+    }
+    newData[rowIx][colIx] = value;
+    setData(newData);
+  };
+  const convertToCells = (displayedRows: Array<any>, displayedUnits: Record<string, any>) => {
+    const cells = displayedRows.slice(1).map((item, rowIndex) => {
+      let [length, pressure] = item;
+      return {
+        cells: [{
+          value: length,
+          type: 'NumberInput',
+          disabled: false,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, rowIndex + 1, 0, displayedUnits),
+          testId: \`table-cell-\${rowIndex + 1}-\${0}\`
+        }, {
+          value: pressure,
+          type: 'NumberInput',
+          disabled: false,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, rowIndex + 1, 1, displayedUnits),
+          testId: \`table-cell-\${rowIndex + 1}-\${1}\`
+        }],
+        actions: []
+      };
+    });
+    setDisplayedData(displayedRows);
+    return cells;
+  };
+  const unitOptions = [{
+    value: 'm',
+    label: 'm'
+  }, {
+    value: 'ft',
+    label: 'ft'
+  }, {
+    value: 'km',
+    label: 'km'
+  }, {
+    value: 'in',
+    label: 'in'
+  }, {
+    value: 'mm',
+    label: 'mm'
+  }];
+  return <Grid columns="1fr" gap>
+      <Card heading={<Heading>Global View Settings</Heading>}>
+        <FormRow>
+          <Field label="Active Unit Template For Length">
+            <Select options={unitOptions} value={{
+            value: unitTemplate.length
+          }} onChange={evt => {
+            setUnitTemplate(prev => ({
+              ...prev,
+              length: evt.target.value
+            }));
+          }} width="100px" />
+          </Field>
+        </FormRow>
+      </Card>
+      <UnitTable tableActions={{}} data={data} tableDef={simpleTableDef} convertToCells={convertToCells} unitTemplate={unitTemplate} testId="Test" oldStructureType="array" />
+      <Grid columns="1fr 1fr" gap>
+        <Card heading={<Heading>Display data</Heading>}>
+          <pre>
+            <code>{JSON.stringify(displayedData, null, 2)}</code>
+          </pre>
+        </Card>
+        <Card heading={<Heading>Storage data</Heading>}>
+          <pre>
+            <code>{JSON.stringify(data, null, 2)}</code>
+          </pre>
+        </Card>
+      </Grid>
+    </Grid>;
+}`,...(Q=(z=A.parameters)==null?void 0:z.docs)==null?void 0:Q.source}}};var X,Z,ee;N.parameters={...N.parameters,docs:{...(X=N.parameters)==null?void 0:X.docs,source:{originalSource:`() => {
+  const [data, setData] = useState<IRock[]>(rocks);
+  const [displayedData, setDisplayedData] = useState<any[]>([]);
+  const [unitTemplate, setUnitTemplate] = useState(initalUnitTemplate);
+  const onChangeValue = (ev: ChangeEvent<HTMLInputElement>, columnName: keyof IRock, rowIx: number, displayedUnits: Record<string, string>) => {
+    const {
+      value
+    } = ev.target;
+    let newData: IRock[];
+    setData(prev => {
+      newData = [...prev];
+      newData[rowIx][columnName] = columnName === 'rock_type' || columnName === 'name' ? value : withUnit(value, displayedUnits[columnName]);
+      return newData;
+    });
+  };
+  const addRow = () => {
+    const newRow = {
+      ...data[data.length - 1]
+    };
+    setData(prev => [...prev, newRow]);
+  };
+  const onDeleteRow = (ix: number) => setData(prev => prev.filter((_, index) => ix !== index));
+  const rowMenu = (rowIx: number) => <TableRowMenu onDeleteTableRow={onDeleteRow} rowid={rowIx} />;
+  const convertToCells = (displayedRows: Array<any>, displayedUnits: Record<string, any>) => {
+    const cells = displayedRows.map((item, rowIndex) => {
+      let {
+        rock_type,
+        name,
+        depth_from,
+        depth_to,
+        Ro,
+        Cp,
+        Lambda
+      } = item;
+      const disabledFirstRow = isFirstRow(rowIndex);
+      const disabledLastRow = isLastRow(data.length, rowIndex);
+      const actions = disabledFirstRow ? [] : [{
+        childComponent: rowMenu(rowIndex)
+      }];
+      return {
+        cells: [{
+          options: rocksList,
+          value: rock_type || 'Rock',
+          type: 'Select',
+          disabled: false,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'rock_type', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${0}\`
+        }, {
+          value: name,
+          type: 'Input',
+          placeholder: 'Name',
+          disabled: false,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'name', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${1}\`
+        }, {
+          value: getCellLength(getValue(depth_from), disabledFirstRow),
+          type: disabledFirstRow ? 'Static' : 'NumberInput',
+          style: disabledFirstRow ? {
+            whiteSpace: 'nowrap'
+          } : {},
+          disabled: disabledFirstRow,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'depth_from', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${2}\`
+        }, {
+          value: getValue(depth_to),
+          type: disabledLastRow ? 'Static' : 'NumberInput',
+          style: disabledLastRow ? {
+            whiteSpace: 'nowrap'
+          } : {},
+          disabled: disabledLastRow,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'depth_to', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${3}\`
+        }, {
+          value: getValue(Ro),
+          type: 'NumberInput',
+          disabled: true,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'Ro', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${4}\`
+        }, {
+          value: getValue(Cp),
+          type: 'NumberInput',
+          disabled: true,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'Cp', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${5}\`
+        }, {
+          value: getValue(Lambda),
+          type: 'NumberInput',
+          disabled: true,
+          onChange: (e: ChangeEvent<HTMLInputElement>) => onChangeValue(e, 'Lambda', rowIndex, displayedUnits),
+          testId: \`table-cell-\${rowIndex}-\${6}\`
+        }],
+        actions
+      };
+    });
+    setDisplayedData(displayedRows);
+    return cells;
+  };
+  const tableActions = {
+    addRow,
+    reorderComponents: () => {}
+  };
+  const unitOptions = [{
+    value: 'm',
+    label: 'm'
+  }, {
+    value: 'ft',
+    label: 'ft'
+  }, {
+    value: 'km',
+    label: 'km'
+  }, {
+    value: 'in',
+    label: 'in'
+  }, {
+    value: 'mm',
+    label: 'mm'
+  }];
+  return <Grid columns="1fr" gap>
+      <Card heading={<Heading>Global View Settings</Heading>}>
+        <FormRow>
+          <Field label="Active Unit Template For Length">
+            <Select options={unitOptions} value={{
+            value: unitTemplate.length
+          }} onChange={evt => {
+            setUnitTemplate(prev => ({
+              ...prev,
+              length: evt.target.value
+            }));
+          }} width="100px" />
+          </Field>
+        </FormRow>
+      </Card>
+      <UnitTable tableActions={tableActions} data={data} tableDef={tableDef} convertToCells={convertToCells} unitTemplate={unitTemplate} testId="Test" oldStructureType={null} />
+      <Grid columns="1fr 1fr" gap>
+        <Card heading={<Heading>Display data</Heading>}>
+          <pre>
+            <code>{JSON.stringify(displayedData, null, 2)}</code>
+          </pre>
+        </Card>
+        <Card heading={<Heading>Storage data</Heading>}>
+          <pre>
+            <code>{JSON.stringify(data, null, 2)}</code>
+          </pre>
+        </Card>
+      </Grid>
+    </Grid>;
+}`,...(ee=(Z=N.parameters)==null?void 0:Z.docs)==null?void 0:ee.source}}};const tn=["NewStructure","OldStructure","OldStructureWithArrayUnit","Complex"];export{N as Complex,k as NewStructure,F as OldStructure,A as OldStructureWithArrayUnit,tn as __namedExportsOrder,en as default};

package/dist/storybook/iframe.html

@@ -357,7 +357,7 @@
   }
 </script>
 
-  <script type="module" crossorigin src="./assets/iframe-ujjJUTtn.js"></script>
+  <script type="module" crossorigin src="./assets/iframe-ybuSzuG4.js"></script>
 </head>
 
 <body>