@oliasoft-open-source/react-ui-library 3.12.0-beta-21 → 3.12.0-beta-24

package/dist/assets/message.stories.3fa55adc.js

@@ -0,0 +1,273 @@
+import{j as e}from"./jsx-runtime.bc0b5389.js";import{M as a,a as n}from"./message.65e5823f.js";import{B as C}from"./button.4d73be0d.js";import{G as q}from"./grid.87b6d860.js";import"./index.8c7046c4.js";import"./index.55214191.js";import"./icon.86155bc3.js";import"./inheritsLoose.5387fada.js";import"./index.73b4811b.js";import"./disabled-context.47d44ea4.js";import"./common-enum.04de2059.js";import"./spinner.f0fdc45e.js";import"./tooltip.47b8435e.js";import"./index.cb615f32.js";import"./styled-components.browser.esm.611ca86c.js";import"./hoist-non-react-statics.cjs.10bac274.js";const{useArgs:w}=__STORYBOOK_MODULE_ADDONS__,L={visible:!0,heading:void 0,content:"Here is some info",withDismiss:!1,icon:!1,details:void 0,maxHeight:void 0,type:n.INFO},te={title:"Basic/Message",component:a,args:{...L},argTypes:{heading:{control:{type:"text"}},details:{control:{type:"text"}}}},s=d=>{const[K,u]=w(),m=()=>{u({visible:!1}),setTimeout(()=>{u({visible:!0})},1e3)};return e.exports.jsxs(q,{gap:!0,children:[e.exports.jsx(a,{message:{...d,onClose:m,type:n.INFO}}),e.exports.jsx(a,{message:{...d,onClose:m,type:n.ERROR}}),e.exports.jsx(a,{message:{...d,onClose:m,type:n.WARNING}}),e.exports.jsx(a,{message:{...d,onClose:m,type:n.SUCCESS}})]})},c=s.bind({}),o=s.bind({});o.args={heading:"Message Heading"};const r=s.bind({});r.args={icon:!0};const t=s.bind({});t.args={details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at mi ac quam condimentum blandit at sit amet lectus. Nullam volutpat erat maximus, venenatis nisl sed, aliquam libero."};const g=s.bind({});g.args={type:n.ERROR,icon:!0,content:"Unable to sync because connection settings are not set.",footer:e.exports.jsxs(e.exports.Fragment,{children:[e.exports.jsx(C,{small:!0,label:"Edit connection settings",colored:"primary"},"edit-settings"),e.exports.jsx(C,{small:!0,label:"Cancel sync"},"cancel-sync"),","]})};const l=s.bind({});l.args={width:"100%"};const p=s.bind({});p.args={width:"300px"};const i=s.bind({});i.args={maxHeight:"100px",content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(20)};var y,M,h;c.parameters={...c.parameters,docs:{...(y=c.parameters)==null?void 0:y.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleClose = () => {
+    updateArgs({
+      visible: false
+    });
+    setTimeout(() => {
+      updateArgs({
+        visible: true
+      });
+    }, 1000);
+  };
+  return <Grid gap>
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.INFO
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.ERROR
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.WARNING
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.SUCCESS
+    }} />
+    </Grid>;
+}`,...(h=(M=c.parameters)==null?void 0:M.docs)==null?void 0:h.source}}};var T,A,R;o.parameters={...o.parameters,docs:{...(T=o.parameters)==null?void 0:T.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleClose = () => {
+    updateArgs({
+      visible: false
+    });
+    setTimeout(() => {
+      updateArgs({
+        visible: true
+      });
+    }, 1000);
+  };
+  return <Grid gap>
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.INFO
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.ERROR
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.WARNING
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.SUCCESS
+    }} />
+    </Grid>;
+}`,...(R=(A=o.parameters)==null?void 0:A.docs)==null?void 0:R.source}}};var S,b,x;r.parameters={...r.parameters,docs:{...(S=r.parameters)==null?void 0:S.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleClose = () => {
+    updateArgs({
+      visible: false
+    });
+    setTimeout(() => {
+      updateArgs({
+        visible: true
+      });
+    }, 1000);
+  };
+  return <Grid gap>
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.INFO
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.ERROR
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.WARNING
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.SUCCESS
+    }} />
+    </Grid>;
+}`,...(x=(b=r.parameters)==null?void 0:b.docs)==null?void 0:x.source}}};var N,G,O;t.parameters={...t.parameters,docs:{...(N=t.parameters)==null?void 0:N.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleClose = () => {
+    updateArgs({
+      visible: false
+    });
+    setTimeout(() => {
+      updateArgs({
+        visible: true
+      });
+    }, 1000);
+  };
+  return <Grid gap>
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.INFO
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.ERROR
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.WARNING
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.SUCCESS
+    }} />
+    </Grid>;
+}`,...(O=(G=t.parameters)==null?void 0:G.docs)==null?void 0:O.source}}};var v,E,I;g.parameters={...g.parameters,docs:{...(v=g.parameters)==null?void 0:v.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleClose = () => {
+    updateArgs({
+      visible: false
+    });
+    setTimeout(() => {
+      updateArgs({
+        visible: true
+      });
+    }, 1000);
+  };
+  return <Grid gap>
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.INFO
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.ERROR
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.WARNING
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.SUCCESS
+    }} />
+    </Grid>;
+}`,...(I=(E=g.parameters)==null?void 0:E.docs)==null?void 0:I.source}}};var f,_,F;l.parameters={...l.parameters,docs:{...(f=l.parameters)==null?void 0:f.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleClose = () => {
+    updateArgs({
+      visible: false
+    });
+    setTimeout(() => {
+      updateArgs({
+        visible: true
+      });
+    }, 1000);
+  };
+  return <Grid gap>
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.INFO
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.ERROR
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.WARNING
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.SUCCESS
+    }} />
+    </Grid>;
+}`,...(F=(_=l.parameters)==null?void 0:_.docs)==null?void 0:F.source}}};var W,U,j;p.parameters={...p.parameters,docs:{...(W=p.parameters)==null?void 0:W.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleClose = () => {
+    updateArgs({
+      visible: false
+    });
+    setTimeout(() => {
+      updateArgs({
+        visible: true
+      });
+    }, 1000);
+  };
+  return <Grid gap>
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.INFO
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.ERROR
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.WARNING
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.SUCCESS
+    }} />
+    </Grid>;
+}`,...(j=(U=p.parameters)==null?void 0:U.docs)==null?void 0:j.source}}};var D,H,B;i.parameters={...i.parameters,docs:{...(D=i.parameters)==null?void 0:D.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  const handleClose = () => {
+    updateArgs({
+      visible: false
+    });
+    setTimeout(() => {
+      updateArgs({
+        visible: true
+      });
+    }, 1000);
+  };
+  return <Grid gap>
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.INFO
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.ERROR
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.WARNING
+    }} />
+      <Message message={{
+      ...args,
+      onClose: handleClose,
+      type: MessageType.SUCCESS
+    }} />
+    </Grid>;
+}`,...(B=(H=i.parameters)==null?void 0:H.docs)==null?void 0:B.source}}};const ge=["Default","Heading","Icon","Details","Footer","FullWidth","FixedWidth","MaxHeight"];export{c as Default,t as Details,p as FixedWidth,g as Footer,l as FullWidth,o as Heading,r as Icon,i as MaxHeight,ge as __namedExportsOrder,te as default};

package/dist/assets/modal.stories.2abfae2c.js

@@ -0,0 +1,141 @@
+import{j as e}from"./jsx-runtime.bc0b5389.js";import{M as I,D as W}from"./dialog.d82a54f5.js";import{B as n}from"./button.4d73be0d.js";import{P as R}from"./popover.deb1280b.js";import{I as H}from"./input.c3176058.js";import{I as K}from"./input-group.655922b4.js";import{F as g}from"./field.34841a80.js";import{M as U}from"./actions.310c4239.js";import{S as G}from"./select.0c940187.js";import{S as V}from"./spacer.17f9f9e6.js";import{T as Y}from"./tooltip.47b8435e.js";import{M as m}from"./enum.9003e5cc.js";import{T as q}from"./common-enum.04de2059.js";import"./index.8c7046c4.js";import"./index.55214191.js";import"./portal.23946b05.js";import"./index.cb615f32.js";import"./lodash.96de7017.js";import"./heading.d8accca2.js";import"./help-icon.8deae1d5.js";import"./icon.86155bc3.js";import"./inheritsLoose.5387fada.js";import"./index.73b4811b.js";import"./disabled-context.47d44ea4.js";import"./spinner.f0fdc45e.js";import"./types.f0417c6d.js";import"./label.71b4dc9a.js";import"./badge.c60b26e4.js";import"./extends.946277fc.js";import"./assertThisInitialized.962dde02.js";import"./memoize-one.esm.7a54f149.js";import"./text.3e08313f.js";import"./select.input.395daa83.js";const{useArgs:z}=__STORYBOOK_MODULE_ADDONS__,Te={title:"Modals/Modal",component:I,args:{visible:!0,centered:!0,width:"300px",heading:"Are you sure?",content:e.exports.jsx(e.exports.Fragment,{children:"This will complete the transaction"}),footer:e.exports.jsxs(e.exports.Fragment,{children:[e.exports.jsx(n,{label:"Okay",colored:!0,onClick:()=>{}}),e.exports.jsx(n,{label:"Cancel",onClick:()=>{}})]}),onClose:()=>{}},parameters:{docs:{story:{inline:!1,iframeHeight:400}}}},o=J=>{const[{visible:p,centered:w,...E},L]=z(),c=()=>{L({visible:!p})};return e.exports.jsxs(e.exports.Fragment,{children:[e.exports.jsx(I,{visible:p,centered:w,children:e.exports.jsx(W,{dialog:{...E,onClose:c}})}),e.exports.jsx(n,{label:"Open Modal",onClick:c})]})},d=o.bind({}),r=o.bind({});r.args={centered:!0};const s=o.bind({});s.args={content:["This is a","new line!"]};const t=o.bind({});t.args={scroll:!0,content:e.exports.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const a=o.bind({});a.args={width:"100%",content:e.exports.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const l=o.bind({});l.args={contentPadding:0};const i=o.bind({});i.args={content:e.exports.jsxs(e.exports.Fragment,{children:[e.exports.jsx(Y,{text:"Tooltip text",children:"Hover for tooltip"}),e.exports.jsx(V,{}),e.exports.jsx(g,{label:"Custom Select",helpText:"Select an animal",children:e.exports.jsx(G,{name:"example",options:["Aardvarks","Kangaroos","Monkeys","Possums","Gorilla","Puma","Patagonian Mara","Tarsier","Koala","Panda","Red Panda","Impala","Tiger","Crocodile","Bat"],onChange:()=>{},value:"Monkeys",error:"Bad value"})}),e.exports.jsx(g,{label:"Nested Menu",children:e.exports.jsx(U,{maxHeight:"240px",menu:{label:"Menu",trigger:q.DROP_DOWN_BUTTON,sections:[{type:m.MENU,menu:{trigger:"Text",label:"Children",sections:[...Array(100).keys()].map(()=>({type:"Option",label:Math.random().toString(36).substring(7),onClick:()=>{}}))}},...[...Array(100).keys()].map(()=>({type:m.OPTION,label:Math.random().toString(36).substring(7),onClick:()=>{}}))]}})}),e.exports.jsx(R,{content:e.exports.jsxs(K,{small:!0,children:[e.exports.jsx(H,{value:"Value",width:"150px",error:"Bad value"}),e.exports.jsx(n,{colored:!0,label:"Save",onClick:()=>{}}),e.exports.jsx(n,{label:"Cancel",onClick:()=>{}})]}),children:e.exports.jsx(n,{colored:!0,label:"Toggle me",onClick:()=>{}})})]})};var u,b,x;d.parameters={...d.parameters,docs:{...(u=d.parameters)==null?void 0:u.docs,source:{originalSource:`(args: any) => {
+  const [{
+    visible,
+    centered,
+    ...dialogProps
+  }, updateArgs] = useArgs();
+  const toggleModal = () => {
+    updateArgs({
+      visible: !visible
+    });
+  };
+  return <>
+      <Modal visible={visible} centered={centered}>
+        <Dialog dialog={{
+        ...dialogProps,
+        onClose: toggleModal
+      }} />
+      </Modal>
+      <Button label="Open Modal" onClick={toggleModal} />
+    </>;
+}`,...(x=(b=d.parameters)==null?void 0:b.docs)==null?void 0:x.source}}};var M,v,C;r.parameters={...r.parameters,docs:{...(M=r.parameters)==null?void 0:M.docs,source:{originalSource:`(args: any) => {
+  const [{
+    visible,
+    centered,
+    ...dialogProps
+  }, updateArgs] = useArgs();
+  const toggleModal = () => {
+    updateArgs({
+      visible: !visible
+    });
+  };
+  return <>
+      <Modal visible={visible} centered={centered}>
+        <Dialog dialog={{
+        ...dialogProps,
+        onClose: toggleModal
+      }} />
+      </Modal>
+      <Button label="Open Modal" onClick={toggleModal} />
+    </>;
+}`,...(C=(v=r.parameters)==null?void 0:v.docs)==null?void 0:C.source}}};var h,P,A;s.parameters={...s.parameters,docs:{...(h=s.parameters)==null?void 0:h.docs,source:{originalSource:`(args: any) => {
+  const [{
+    visible,
+    centered,
+    ...dialogProps
+  }, updateArgs] = useArgs();
+  const toggleModal = () => {
+    updateArgs({
+      visible: !visible
+    });
+  };
+  return <>
+      <Modal visible={visible} centered={centered}>
+        <Dialog dialog={{
+        ...dialogProps,
+        onClose: toggleModal
+      }} />
+      </Modal>
+      <Button label="Open Modal" onClick={toggleModal} />
+    </>;
+}`,...(A=(P=s.parameters)==null?void 0:P.docs)==null?void 0:A.source}}};var j,k,y;t.parameters={...t.parameters,docs:{...(j=t.parameters)==null?void 0:j.docs,source:{originalSource:`(args: any) => {
+  const [{
+    visible,
+    centered,
+    ...dialogProps
+  }, updateArgs] = useArgs();
+  const toggleModal = () => {
+    updateArgs({
+      visible: !visible
+    });
+  };
+  return <>
+      <Modal visible={visible} centered={centered}>
+        <Dialog dialog={{
+        ...dialogProps,
+        onClose: toggleModal
+      }} />
+      </Modal>
+      <Button label="Open Modal" onClick={toggleModal} />
+    </>;
+}`,...(y=(k=t.parameters)==null?void 0:k.docs)==null?void 0:y.source}}};var O,f,S;a.parameters={...a.parameters,docs:{...(O=a.parameters)==null?void 0:O.docs,source:{originalSource:`(args: any) => {
+  const [{
+    visible,
+    centered,
+    ...dialogProps
+  }, updateArgs] = useArgs();
+  const toggleModal = () => {
+    updateArgs({
+      visible: !visible
+    });
+  };
+  return <>
+      <Modal visible={visible} centered={centered}>
+        <Dialog dialog={{
+        ...dialogProps,
+        onClose: toggleModal
+      }} />
+      </Modal>
+      <Button label="Open Modal" onClick={toggleModal} />
+    </>;
+}`,...(S=(f=a.parameters)==null?void 0:f.docs)==null?void 0:S.source}}};var T,B,D;l.parameters={...l.parameters,docs:{...(T=l.parameters)==null?void 0:T.docs,source:{originalSource:`(args: any) => {
+  const [{
+    visible,
+    centered,
+    ...dialogProps
+  }, updateArgs] = useArgs();
+  const toggleModal = () => {
+    updateArgs({
+      visible: !visible
+    });
+  };
+  return <>
+      <Modal visible={visible} centered={centered}>
+        <Dialog dialog={{
+        ...dialogProps,
+        onClose: toggleModal
+      }} />
+      </Modal>
+      <Button label="Open Modal" onClick={toggleModal} />
+    </>;
+}`,...(D=(B=l.parameters)==null?void 0:B.docs)==null?void 0:D.source}}};var _,F,N;i.parameters={...i.parameters,docs:{...(_=i.parameters)==null?void 0:_.docs,source:{originalSource:`(args: any) => {
+  const [{
+    visible,
+    centered,
+    ...dialogProps
+  }, updateArgs] = useArgs();
+  const toggleModal = () => {
+    updateArgs({
+      visible: !visible
+    });
+  };
+  return <>
+      <Modal visible={visible} centered={centered}>
+        <Dialog dialog={{
+        ...dialogProps,
+        onClose: toggleModal
+      }} />
+      </Modal>
+      <Button label="Open Modal" onClick={toggleModal} />
+    </>;
+}`,...(N=(F=i.parameters)==null?void 0:F.docs)==null?void 0:N.source}}};const Be=["Default","Centered","LineBreak","Scroll","FullWidth","NoContentPadding","WithPopoverLayers"];export{r as Centered,d as Default,a as FullWidth,s as LineBreak,l as NoContentPadding,t as Scroll,i as WithPopoverLayers,Be as __namedExportsOrder,Te as default};