https://baseweb.design/_next/static/chunks/pages/blog/introducing-react-view-f3956634-2ddb6b4bea42f889.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7725],{51701:function(e,r,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/introducing-react-view",function(){return t(29472)}])},34825:function(e,r,t){"use strict";t.d(r,{B9:function(){return p},YS:function(){return d},cz:function(){return u},h_:function(){return m}});var o=t(35250),n=t(70079),i=t(29876),a=t(38929),s=t.n(a),l=t(41814),c=t(23417);let d=(0,c.themedStyled)("figcaption",e=>{let{$theme:r}=e;return{color:r.colors.contentSecondary,fontFamily:r.typography.font100.fontFamily,fontSize:r.sizing.scale500,fontWeight:300,textAlign:"center",padding:"4px 4px 0 0"}}),u=e=>{let{full:r,alt:t,caption:n,src:i,style:a}=e;return(0,o.jsxs)("figure",{style:{margin:0},children:[(0,o.jsx)("img",{src:i.src,alt:t,style:{width:"100%",height:"auto"}}),n?(0,o.jsx)(d,{children:n}):null]})},p=(0,c.themedStyled)("iframe",{borderLeftWidth:0,borderRightWidth:0,borderTopWidth:0,borderBottomWidth:0,borderTopLeftRadius:"4px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px",borderBottomLeftRadius:"4px",height:"500px",overflow:"hidden",width:"100%"}),h=(0,c.themedStyled)("span",e=>{let{$theme:r}=e;return{color:r.colors.contentSecondary,fontFamily:r.typography.font100.fontFamily,fontSize:r.sizing.scale800,fontWeight:300}}),f=(0,c.themedStyled)("a",e=>{let{$theme:r}=e;return{color:r.colors.contentSecondary,fontFamily:r.typography.font100.fontFamily,":hover":{color:r.colors.contentPrimary},":focus":{outline:"3px solid ".concat(r.colors.accent),textDecoration:"none",outlineOffset:"2px"}}}),g=(0,c.themedStyled)("span",e=>{let{$theme:r}=e;return{color:r.colors.contentSecondary}}),m=e=>{let{data:{title:r,tagline:t,author:a,authorLink:c,date:d,coverImage:u,coverImageWidth:p,coverImageHeight:m,keyWords:b=[]}}=e;return(0,o.jsxs)(n.Fragment,{children:[(0,o.jsxs)(s(),{children:[(0,o.jsx)("meta",{property:"og:title",content:r,name:"title"}),(0,o.jsx)("meta",{property:"og:type",content:"article"}),(0,o.jsx)("meta",{property:"og:description",content:t,name:"description"},"description"),(0,o.jsx)("meta",{property:"article:author",content:a,name:"author"}),b.map(e=>(0,o.jsx)("meta",{property:"article:tag",content:e},"article:tag:".concat(e))),(0,o.jsx)("meta",{property:"article:published_time",content:new Date(d).toISOString()}),(0,o.jsx)("meta",{property:"og:image",content:u}),p?(0,o.jsx)("meta",{property:"og:image:width",content:p}):null,m?(0,o.jsx)("meta",{property:"og:image:height",content:m}):null]}),(0,o.jsxs)(i.Z,{overrides:{Block:{style:e=>{let{$theme:r}=e;return{marginBottom:r.sizing.scale1400}}}},children:[(0,o.jsx)(l.H1,{children:r}),(0,o.jsx)(h,{children:t}),(0,o.jsxs)(i.Z,{overrides:{Block:{style:e=>{let{$theme:r}=e;return{color:r.colors.contentSecondary,fontFamily:r.typography.font100.fontFamily,margin:"".concat(r.sizing.scale400," 0")}}}},children:[(0,o.jsx)(f,{$as:c?"a":"span",rel:"noopener noreferrer",target:"_blank",href:c||"/",children:a})," ",(0,o.jsxs)(g,{children:[" - ",d]})]})]})]})}},4603:function(e,r,t){"use strict";t.d(r,{a:function(){return n}});var o=t(41814);function n(e){return{...o.ZP}}},39458:function(e,r,t){"use strict";t.r(r);var o=t(35250),n=t(70079),i=t(86048),a=t(57555),s=t(18253),l=t(19993),c=t(24711);r.default=function(e){let{initialCode:r}=e,t=(0,i.Z)({initialCode:r,scope:{},onUpdate:console.log});return(0,o.jsxs)(n.Fragment,{children:[(0,o.jsx)("div",{style:{marginBottom:"8px",fontFamily:'system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif'},children:(0,o.jsx)(a.Z,{...t.compilerProps,presets:[c.Z]})}),(0,o.jsx)(l.Z,{...t.editorProps,language:"tsx"}),(0,o.jsx)(s.Z,{...t.errorProps})]})}},81445:function(e,r,t){"use strict";t.d(r,{Z:function(){return d}});var o=t(35250),n=t(70079),i=t(4729),a=t(90918),s=t(46645),l=t(95478),c=t(69090);class d extends n.Component{render(){let{overrides:e={},mode:r,children:t,selected:i,disabled:d,onClick:u,kind:p,shape:h,size:f,wrap:g,padding:m}=this.props,[b,y]=(0,s.jb)(e.Root,c.F),x=this.props["aria-label"]||this.props.ariaLabel,v=r===a.IK.radio,j=(!r||Object.values(a.IK).every(e=>e!==r))&&void 0===i,R=n.Children.count(t);return(0,o.jsx)(l.R.Consumer,{children:e=>(0,o.jsx)(b,{"aria-label":x||e.buttongroup.ariaLabel,"aria-labelledby":this.props["aria-labelledby"],"aria-describedby":this.props["aria-describedby"],"data-baseweb":"button-group",role:v?"radiogroup":"group",$size:f,$padding:m,$wrap:g,...y,children:n.Children.map(t,(e,r)=>{if(!n.isValidElement(e))return null;let t=e.props.isSelected?e.props.isSelected:j?void 0:(!!Array.isArray(i)||"number"==typeof i)&&(Array.isArray(i)?i.includes(r):i===r);return v&&(this.childRefs[r]=n.createRef()),n.cloneElement(e,{disabled:d||e.props.disabled,isSelected:t,ref:v?this.childRefs[r]:void 0,tabIndex:!v||t||v&&(!i||-1===i||Array.isArray(i)&&0===i.length)&&0===r?0:-1,onKeyDown:e=>{if(!v)return;let r=Number(i)?Number(i):0;if("ArrowUp"===e.key||"ArrowLeft"===e.key){e.preventDefault&&e.preventDefault();let t=r-1<0?R-1:r-1;u&&u(e,t),this.childRefs[t].current&&this.childRefs[t].current.focus()}if("ArrowDown"===e.key||"ArrowRight"===e.key){e.preventDefault&&e.preventDefault();let t=r+1>R-1?0:r+1;u&&u(e,t),this.childRefs[t].current&&this.childRefs[t].current.focus()}},kind:p,onClick:t=>{!d&&(e.props.onClick&&e.props.onClick(t),u&&u(t,r))},shape:h,size:f,overrides:{BaseButton:{props:{..."boolean"==typeof e.props["aria-checked"]?{"aria-checked":e.props["aria-checked"]}:j?{}:{"aria-checked":t},role:e.props.role||v?"radio":j?void 0:"checkbox"}},...e.props.overrides}})})})})}constructor(...e){super(...e),this.childRefs={}}}d.defaultProps={disabled:!1,onClick:()=>{},shape:i.X3.default,size:i.NO.default,kind:i.TO.secondary,padding:a.tr.none}},90918:function(e,r,t){"use strict";t.d(r,{IK:function(){return o},oL:function(){return n},tr:function(){return i}});let o=Object.freeze({radio:"radio",checkbox:"checkbox"}),n=Object.freeze({change:"change"}),i=Object.freeze({default:"default",none:"none",custom:"custom"})},69090:function(e,r,t){"use strict";t.d(r,{F:function(){return a}});var o=t(95760),n=t(4729),i=t(90918);let a=(0,o.zo)("div",e=>{let{$padding:r,$wrap:t,$size:o,$theme:i}=e;return{display:"flex",columnGap:i.sizing.scale300,rowGap:o===n.NO.xSmall||o===n.NO.mini?i.sizing.scale500:i.sizing.scale300,...s({$wrap:t}),...l({$padding:r,$theme:i})}});a.displayName="StyledRoot";let s=e=>{let{$wrap:r}=e;return"boolean"==typeof r?r?{flexWrap:"wrap"}:{overflowX:"auto",scrollbarWidth:"none"}:{}},l=e=>{let{$padding:r,$theme:t}=e;switch(r){case i.tr.default:return{paddingLeft:t.sizing.scale600,paddingRight:t.sizing.scale600};case i.tr.none:return{paddingLeft:0,paddingRight:0};case i.tr.custom:default:return Object.freeze({})}}},9105:function(e,r,t){"use strict";t.d(r,{M:function(){return s}});var o=t(35250);t(70079);var n=t(46645),i=t(85591),a=t(94071);function s(e){return!!e.thumbnail}let l=e=>{let{children:r,...t}=e,n=["","h1","h2","h3","h4","h5","h6"];return(0,o.jsx)(i.jC.Consumer,{children:e=>(0,o.jsx)(a.Dx,{$as:n[e],...t,children:r})})};function c(e){let{action:r,children:t,hasThumbnail:i,headerImage:s,thumbnail:c,title:d,overrides:u,...p}=e,{Action:h,Body:f,Contents:g,HeaderImage:m,Root:b,Thumbnail:y,Title:x}=u,v=(0,n.XG)(h)||a.aU,j=(0,n.XG)(f)||a.uT,R=(0,n.XG)(g)||a.AU,w=(0,n.XG)(m)||a.sQ,z=(0,n.XG)(b)||a.fC,k=(0,n.XG)(y)||a.pl,C=(0,n.XG)(x)||l,B="str

1ing"==typeof s?{src:s}:s,O=i(e);return(0,o.jsxs)(z,{"data-baseweb":"card",...p,...(0,n.ch)(b),children:[s&&(0,o.jsx)(w,{...B,...(0,n.ch)(m)}),(0,o.jsxs)(R,{...(0,n.ch)(g),children:[c&&(0,o.jsx)(k,{src:c,...(0,n.ch)(y)}),d&&(0,o.jsx)(C,{$hasThumbnail:O,...(0,n.ch)(x),children:d}),(0,o.jsx)(j,{...(0,n.ch)(f),children:t}),r&&(0,o.jsx)(v,{...(0,n.ch)(h),children:r})]})]})}c.defaultProps={action:null,children:null,hasThumbnail:s,overrides:{}},r.Z=c},94071:function(e,r,t){"use strict";t.d(r,{AU:function(){return s},Dx:function(){return u},aU:function(){return i},fC:function(){return c},pl:function(){return d},sQ:function(){return l},uT:function(){return a}});var o=t(95760),n=t(96310);let i=(0,o.zo)("div",e=>{let{$theme:r}=e;return{...r.typography.LabelMedium}});i.displayName="Action";let a=(0,o.zo)("div",e=>{let{$theme:r}=e;return{marginBottom:r.sizing.scale600,color:r.colors.contentPrimary,...r.typography.ParagraphMedium}});a.displayName="Body";let s=(0,o.zo)("div",e=>{let{$theme:r}=e;return{marginLeft:r.sizing.scale600,marginTop:r.sizing.scale600,marginRight:r.sizing.scale600,marginBottom:r.sizing.scale600}});s.displayName="Contents";let l=(0,o.zo)("img",e=>{let{$theme:r}=e;return{borderTopLeftRadius:r.borders.surfaceBorderRadius,borderTopRightRadius:r.borders.surfaceBorderRadius,objectFit:"contain",maxWidth:"100%"}});l.displayName="HeaderImage";let c=(0,o.zo)("section",e=>{let{$theme:r}=e;return{borderLeftWidth:"2px",borderTopWidth:"2px",borderRightWidth:"2px",borderBottomWidth:"2px",borderLeftStyle:"solid",borderTopStyle:"solid",borderRightStyle:"solid",borderBottomStyle:"solid",borderLeftColor:r.colors.borderOpaque,borderRightColor:r.colors.borderOpaque,borderTopColor:r.colors.borderOpaque,borderBottomColor:r.colors.borderOpaque,borderTopLeftRadius:r.borders.radius400,borderTopRightRadius:r.borders.radius400,borderBottomLeftRadius:r.borders.radius400,borderBottomRightRadius:r.borders.radius400,backgroundColor:r.colors.backgroundPrimary,overflow:"hidden"}});c.displayName="Root";let d=(0,o.zo)("img",e=>{let{$theme:r}=e;return{float:"right",height:r.sizing.scale2400,width:r.sizing.scale2400,objectFit:"cover",borderTopLeftRadius:r.borders.surfaceBorderRadius,borderTopRightRadius:r.borders.surfaceBorderRadius,borderBottomLeftRadius:r.borders.surfaceBorderRadius,borderBottomRightRadius:r.borders.surfaceBorderRadius,...(0,n.Qj)(r.borders.border200),margin:"0 0 ".concat(r.sizing.scale500," ").concat(r.sizing.scale500)}});d.displayName="Thumbnail";let u=(0,o.zo)("h1",e=>{let{$theme:r}=e;return{...r.typography.HeadingSmall,color:r.colors.contentPrimary,marginLeft:0,marginTop:0,marginRight:0,marginBottom:r.sizing.scale500,paddingLeft:0,paddingTop:0,paddingRight:0,paddingBottom:0}});u.displayName="Title"},85591:function(e,r,t){"use strict";t.d(r,{jC:function(){return n}});var o=t(35250);let n=t(70079).createContext(0);r.ZP=e=>{let{children:r}=e;return(0,o.jsx)(n.Consumer,{children:e=>(0,o.jsx)(n.Provider,{value:e+1,children:r})})}},69228:function(e,r,t){"use strict";t.d(r,{w_:function(){return l}});var o=t(70079),n={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},i=o.createContext&&o.createContext(n),a=function(){return(a=Object.assign||function(e){for(var r,t=1,o=arguments.length;t<o;t++)for(var n in r=arguments[t])Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);return e}).apply(this,arguments)},s=function(e,r){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&0>r.indexOf(o)&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var n=0,o=Object.getOwnPropertySymbols(e);n<o.length;n++)0>r.indexOf(o[n])&&(t[o[n]]=e[o[n]]);return t};function l(e){return function(r){return o.createElement(c,a({attr:a({},e.attr)},r),function e(r){return r&&r.map(function(r,t){return o.createElement(r.tag,a({key:t},r.attr),e(r.child))})}(e.child))}}function c(e){var r=function(r){var t,n=e.size||r.size||"1em";r.className&&(t=r.className),e.className&&(t=(t?t+" ":"")+e.className);var i=e.attr,l=e.title,c=s(e,["attr","title"]);return o.createElement("svg",a({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},r.attr,i,c,{className:t,style:a({color:e.color||r.color},r.style,e.style),height:n,width:n,xmlns:"http://www.w3.org/2000/svg"}),l&&o.createElement("title",null,l),e.children)};return void 0!==i?o.createElement(i.Consumer,null,function(e){return r(e)}):r(n)}},95563:function(e){"use strict";e.exports=JSON.parse('{"author":"Vojtech Miksu","authorLink":"https://twitter.com/vmiksu","title":"Introducing React View, an Interactive Playground for Your Components","tagline":"Making documentation better.","date":"3 December 2019","coverImage":"https://user-images.githubusercontent.com/1387913/69589789-09196800-0fa2-11ea-9485-aeb506d18fe8.gif","coverImageWidth":1302,"coverImageHeight":1135,"keyWords":["Playground","React","Documentation","Vie

1w"]}')}}]);