diff --git a/assets/Book.stories-924782ea.js b/assets/Book.stories-91438e1c.js similarity index 93% rename from assets/Book.stories-924782ea.js rename to assets/Book.stories-91438e1c.js index 1543413..c2e6fbc 100644 --- a/assets/Book.stories-924782ea.js +++ b/assets/Book.stories-91438e1c.js @@ -195,7 +195,7 @@ left: calc(var(--cover-margin) / 2); outline-offset: -1px; overflow: hidden; } -`;try{Di.displayName="BookWrapper",Di.__docgenInfo={description:"",displayName:"BookWrapper",props:{theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"void | WebTarget"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"void | WebTarget"}}}}}catch{}try{Ui.displayName="FrontCover",Ui.__docgenInfo={description:"",displayName:"FrontCover",props:{theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"void | WebTarget"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"void | WebTarget"}}}}}catch{}try{Ni.displayName="BackCover",Ni.__docgenInfo={description:"",displayName:"BackCover",props:{theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"void | WebTarget"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"void | WebTarget"}}}}}catch{}try{qi.displayName="Pages",qi.__docgenInfo={description:"",displayName:"Pages",props:{theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"DefaultTheme"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"void | WebTarget"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"void | WebTarget"}}}}}catch{}const Rp=.7,V={borderRadiusLeft:.025,borderRadiusRight:.045,thickness:.075,creaseWidth:.035,creaseMargin:.06,coverMargin:.018,coverColor:"#555",transitionDuration:"300ms",transitionTimingFunction:"ease-out",coverStartAngle:0,coverEndAngle:10},Ne=R=>{const[Pn,o]=In.useState(""),[be,se]=In.useState(Rp),[gt,sn]=In.useState(0),[hr,qe]=In.useState(1),[gr,Ae]=In.useState(0),[Dn,dt]=In.useState(1),[le,Hn]=In.useState(!1),[N,rn]=In.useState(null),un=In.useRef(null);In.useEffect(()=>{if(un.current){const{width:Y,height:$}=un.current.getBoundingClientRect();rn({width:Y,height:$})}const q=new ResizeObserver(Y=>{var $;if(Y!=null&&Y.length){const{width:X,height:dn}=(($=Y==null?void 0:Y[0])==null?void 0:$.contentRect)||{};rn({width:X,height:dn})}});return un.current&&q.observe(un.current),()=>{un.current&&q.unobserve(un.current)}},[]),In.useEffect(()=>{R.cover&&(Hn(!0),pt(R.cover).then(q=>{se(q[0]/q[1]),o(R.cover||"")}).catch(q=>{console.error("Failed to load the image",q)}).finally(()=>{Hn(!1)}))},[R.cover]),In.useEffect(()=>{const q=[0,45,0,45],Y=[0,45,1,.5];if(Number.isFinite(R.coverStartAngle)){const $=sr(R.coverStartAngle,...q),X=sr(R.coverStartAngle,...Y);sn($),qe(X)}if(Number.isFinite(R.coverEndAngle)){const $=sr(R.coverEndAngle,...q),X=sr(R.coverEndAngle,...Y);Ae($),dt(X)}},[R.coverStartAngle,R.coverEndAngle]);const pt=(q="")=>new Promise((Y,$)=>{const X=document.createElement("img");X.src=q,X.onerror=dn=>{$(dn)},X.onload=()=>{Y([X.width,X.height])}});return Pi(Di,{style:{aspectRatio:be,"--cover-image":`url(${Pn})`,"--border-radius-left":(((N==null?void 0:N.width)??0)*Sa.clamp(R.leftCornerRadius??V.borderRadiusLeft,0,R.creaseMargin??V.creaseMargin)).toFixed(2)+"px","--border-radius-right":(((N==null?void 0:N.width)??0)*(R.rightCornerRadius??V.borderRadiusRight)).toFixed(2)+"px","--crease-margin":(((N==null?void 0:N.width)||0)*(R.creaseMargin??V.creaseMargin)).toFixed(2)+"px","--crease-width":(((N==null?void 0:N.width)||0)*(R.creaseWidth??V.creaseWidth)).toFixed(2)+"px","--thickness":(((N==null?void 0:N.height)||0)*(R.thickness??V.thickness)).toFixed(2)+"px","--cover-margin":(((N==null?void 0:N.height)||0)*(R.coverMargin??V.coverMargin)).toFixed(2)+"px","--fallback-color":R.coverColor,"--transition-duration":R.transitionDuration,"--transition-timing-function":R.transitionTimingFunction,"--start-skew":`${gt*-1}deg`,"--end-skew":`${gr*-1}deg`,"--start-scale":hr,"--end-scale":Dn},ref:un,children:[tn(Ui,{className:"cover",children:Pi("div",{className:"wrapper",children:[tn("div",{className:"left-part"}),tn("div",{className:"right-part",children:R.coverContent&&tn("div",{className:"content",children:R.coverContent})})]})}),tn(qi,{children:tn("div",{className:"first-page",children:R.pageContent&&tn("div",{className:"content",children:R.pageContent})})}),tn(Ni,{style:{backgroundImage:`url("${Pn}")`}})]})};Ne.defaultProps={leftCornerRadius:V.borderRadiusLeft,rightCornerRadius:V.borderRadiusRight,thickness:V.thickness,creaseMargin:V.creaseMargin,creaseWidth:V.creaseWidth,coverColor:V.coverColor,coverMargin:V.coverMargin,transitionDuration:V.transitionDuration,transitionTimingFunction:V.transitionTimingFunction,coverStartAngle:V.coverStartAngle,coverEndAngle:V.coverEndAngle};try{Ne.displayName="Book",Ne.__docgenInfo={description:"",displayName:"Book",props:{cover:{defaultValue:null,description:"Cover image URL",name:"cover",required:!1,type:{name:"string"}},leftCornerRadius:{defaultValue:{value:"0.025"},description:"Border radius, relative to the width of the book. `0` - `1`",name:"leftCornerRadius",required:!1,type:{name:"number"}},rightCornerRadius:{defaultValue:{value:"0.045"},description:"Border radius, relative to the width of the book. `0` - `1`",name:"rightCornerRadius",required:!1,type:{name:"number"}},creaseMargin:{defaultValue:{value:"0.06"},description:"Crease margin to the left, ralative to the width of the book. `0` - `1`",name:"creaseMargin",required:!1,type:{name:"number"}},creaseWidth:{defaultValue:{value:"0.035"},description:"Crease width, ralative to the width of the book. `0` - `1`",name:"creaseWidth",required:!1,type:{name:"number"}},thickness:{defaultValue:{value:"0.075"},description:"Thickness, relative to the height of the book. `0` - `1`",name:"thickness",required:!1,type:{name:"number"}},coverMargin:{defaultValue:{value:"0.018"},description:"Cover margin, relative to the height of the book. `0` - `1`",name:"coverMargin",required:!1,type:{name:"number"}},coverColor:{defaultValue:{value:"#555"},description:"Cover color shows when the cover image is loading or not provided.",name:"coverColor",required:!1,type:{name:"string"}},transitionTimingFunction:{defaultValue:{value:"defaults.transitionTimingFunction as TransitionTimingFunction"},description:"",name:"transitionTimingFunction",required:!1,type:{name:"TransitionTimingFunction"}},transitionDuration:{defaultValue:{value:"defaults.transitionDuration as TransitionDuration"},description:"",name:"transitionDuration",required:!1,type:{name:"TransitionDuration"}},coverStartAngle:{defaultValue:{value:"0"},description:"Initial cover angle. `0` - `45`",name:"coverStartAngle",required:!1,type:{name:"number"}},coverEndAngle:{defaultValue:{value:"10"},description:"Cover angle when hover on it. `0` - `45`",name:"coverEndAngle",required:!1,type:{name:"number"}},coverContent:{defaultValue:null,description:"",name:"coverContent",required:!1,type:{name:"Element | Element[]"}},pageContent:{defaultValue:null,description:"",name:"pageContent",required:!1,type:{name:"Element | Element[]"}}}}}catch{}const Lp={component:Ne,title:"Sensoreal/Book",argTypes:{},tags:["autodocs"],parameters:{layout:"centered"}},ct=R=>tn("div",{style:{width:"30vw"},children:tn(Ne,{...R})});ct.args={cover:"https://pictures.abebooks.com/inventory/md/md30869329205.jpg"};const ht=R=>tn("div",{style:{width:"10rem"},children:tn(Ne,{...R})});ht.args={transitionDuration:"400ms",transitionTimingFunction:"ease-out",coverColor:"#ac7244",coverEndAngle:45,coverContent:tn("div",{style:{color:"rgba(255,255,255,.85)",fontWeight:"900",fontFamily:"sans-serif",filter:"drop-shadow(0px -1px 0px rgba(0,0,0,.5))"},children:"Lorem Ipsum"}),pageContent:Pi("div",{style:{color:"#333",fontSize:".35rem",padding:"2rem 1rem"},children:[tn("div",{style:{textAlign:"center",fontSize:".75rem",fontWeight:"bolder"},children:"Duis aute"}),tn("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ipsum nunc aliquet bibendum enim facilisis. Orci eu lobortis elementum nibh. Eget felis eget nunc lobortis mattis aliquam faucibus purus. Sit amet aliquam id diam. Tincidunt lobortis feugiat vivamus at augue eget. Id interdum velit laoreet id donec ultrices tincidunt. Tempor id eu nisl nunc mi. Eu augue ut lectus arcu bibendum. In pellentesque massa placerat duis."}),tn("p",{children:"Est ante in nibh mauris cursus. Aliquet bibendum enim facilisis gravida neque convallis a cras semper. Massa tincidunt dui ut ornare. Sed nisi lacus sed viverra tellus in hac habitasse. Pellentesque eu tincidunt tortor aliquam. Suspendisse faucibus interdum posuere lorem ipsum. Eu lobortis elementum nibh tellus molestie. Elit at imperdiet dui accumsan sit amet. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Mattis pellentesque id nibh tortor id aliquet. Adipiscing bibendum est ultricies integer quis auctor elit."})]})};var xa,ba,Aa;ct.parameters={...ct.parameters,docs:{...(xa=ct.parameters)==null?void 0:xa.docs,source:{originalSource:`args =>