2b:null 2c:["$","title",null,{"children":"Components | Roman Samec | Observable"}] 31:T624,class Banner extends GenericComponent { constructor(props) { super( ({ imageSrc, text = "Some title", color = "blue", textAlign = "right", height = 250, circlePadding = 0, textPadding = 20 }) => renderComponent( new LayersStack({ children: [ new SizedBox({ height, child: new ImageComponent({ height: "100%", width: "100%", objectFit: "cover", src: imageSrc }) }), new HorizontalStack({ align: textAlign, alignItems: "center", children: [ new Container({ padding:circlePadding, child: new Container({ width: height - (50 + 2*circlePadding), height: height - (50 + 2*circlePadding), padding: textPadding, borderRadius: "50%", background: color, opacity: 0.8, child: new Center({ child: new Paragraph({ color: "white", align: "center", children: [text] }) }) }) }) ] }) ] }) ), props ); } }32:[] 2f:{"id":"073439b9c17daf63","slug":"components","title":"Components","thumbnail":"7985b5a91b8b60d1c3f7b006ec69a91cb3349f4653750cb1559156b1c7ebce5e","access_level":"public","create_time":"$D2022-01-21T17:22:08.237Z","update_time":"$D2022-12-28T12:34:04.817Z","view_time":null,"first_public_time":"$D2022-01-21T17:49:19.789Z","fork":{"id":"1a3525c94c557d78","slug":"layouts","title":"Layouts","owner":{"id":"4e8eb6188a86a7df","login":"rsamec","name":"Roman Samec"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4e8eb6188a86a7df","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":"starter_2024"},"version":2821,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"29741195570dd799","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":null}],"members":[{"type":"individual","id":"29741195570dd799","login":"rsamec","name":"Roman Samec","avatar_url":"https://avatars-next.observableusercontent.com/4c48f0f4408a68e6e003e589591b7f0d1f94bed68ac1bb60eb91b7e498198ae5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Components","cells":[{"id":0,"value":"# Components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2592,"value":"### Layout components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1863,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1334,"value":"class PageLayout extends GenericComponent {\n constructor(props) {\n super(({parts}) =>\n html`${renderComponent(\n new VerticalStack({\n gap: \"small\",\n alignItems: \"center\",\n children: parts.map((part,i) =>\n new TwoColumnLayout({\n leftChild:i % 2 == 0 ? part[0]: part[1],\n rightChild:i % 2 == 0 ? part[1]: part[0],\n })) \n })\n )}`,\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"class TwoColumnLayout extends GenericComponent {\n constructor(props) {\n super(\n ({leftChild, rightChild}) =>\n html`${renderComponent(\n new HorizontalStack({\n gap: \"small\",\n alignItems: \"center\",\n children: [\n new StackItem({\n padding: 20,\n flex: 1,\n child: props.leftChild\n }),\n new StackItem({\n padding:20,\n flex:1,\n child: props.rightChild\n })\n ]\n })\n )}`,\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":728,"value":"class SkewLandingLayout extends GenericComponent {\n constructor(props) {\n super(\n ({ headline, skewX, skewY }) =>\n html`${renderComponent(\n new VerticalStack({\n gap:10 * skewY,\n children: [\n new Container({}),\n new LayersStack({\n children: [\n new Container({\n background: \"black\",\n transform: `skewX(${skewX}deg) skewY(${skewY}deg);`\n }),\n new StackItem({\n margin: 30,\n order: 3,\n width: 300,\n justifySelf: \"center\",\n align: \"center\",\n color: \"white\",\n child: props.headline\n })\n ]\n }),\n new Container({}),\n ]\n })\n )}`,\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"### Generic component utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":20,"value":"class GenericComponent {\n constructor(component, props){\n this.props = props\n this.component = component\n }\n render(){\n return this.component(this.props);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"renderComponent = component => component?.render?.() ?? component;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"renderChildren = children => children?.map(el => renderComponent(el))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"propsToStyle = (props) => {\n const pixelProps = [\"width\", \"height\", \"padding\", \"margin\"];\n return Object.keys(props)\n .map((key) => {\n const keyValue = props[key];\n return keyValue != null\n ? `${key}:${\n pixelProps.indexOf(key) !== -1\n ? isNaN(keyValue)\n ? keyValue\n : `${keyValue}px`\n : keyValue\n }`\n : \"\";\n })\n .join(\";\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2658,"value":"bgToStyle = ({ background, color }) => ({\n ...(background && { background }),\n ...(color && { color })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"### Basic layout components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1426,"value":"class Grid extends GenericComponent {\n constructor(props) {\n super(({ rows, columns, areas, children, columnGap, ...props }) => {\n const normalizedRows = splitSizes(rows);\n const normalizedColumns = splitSizes(columns);\n\n return html`

${children.map((child) =>\n Array.isArray(child) && child.length > 1\n ? html.fragment`

${renderComponent(\n child[1]\n )}

`\n : renderComponent(child)\n )}

`;\n }, props);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1464,"value":"class GridItem extends GenericComponent {\n constructor(props) {\n super(\n ({ justifySelf, order, child, gridArea, ...props }) =>\n html.fragment`

${renderComponent(child)}

`,\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2813,"value":"html`${renderComponent(new HorizontalStack({gap:10, \"flex-grow\":1, children:[]}))}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"class HorizontalStack extends GenericComponent {\n constructor(props) {\n super(\n ({gap, align, alignItems,children, ...props}) =>\n html`

${renderChildren(\n children\n )}

`,\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"class VerticalStack extends GenericComponent {\n constructor(props) {\n super(\n ({gap, align, alignItems,children, ...props}) =>\n html`

${renderChildren(\n children\n )}

`,\n props\n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":719,"value":"class LayersStack extends GenericComponent {\n constructor(props) {\n super(\n (props) =>\n html`

${renderChildren(\n props.children\n )}

`,\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"class StackItem extends GenericComponent {\n constructor(props) {\n super(\n ({justifySelf,child,...props}) =>\n html.fragment`

${renderComponent(child)}

`,\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2006,"value":"class Center extends GenericComponent {\n constructor(props) {\n super(\n ({ child }) =>\n renderComponent(\n new HorizontalStack({\n height:'100%',\n align: \"center\",\n alignItems: \"center\",\n children: [child]\n })\n ),\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"class MultiColumn extends GenericComponent {\n constructor(props) {\n super(\n ({ columnCount, columnWidth, children = [] }) =>\n html`

${renderChildren(children)}

`, \n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"class FloatableColumn extends GenericComponent {\n constructor(props) {\n super(\n ({ children, borderWidth, padding}) =>\n html.fragment`

${renderChildren(children)}

`,\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"class Floatable extends GenericComponent {\n constructor(props) {\n super(\n ({ float, clear, child, maxWidth }) =>\n html.fragment`

${renderComponent(child)}

`,\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"class Container extends GenericComponent {\n constructor(props) {\n super(\n ({ child, borderRadius, ...props }) =>\n html.fragment`

${renderComponent(child)}

`,\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"class SizedBox extends GenericComponent {\n constructor(props) {\n super(\n ({ width, height, minWidth, maxWidth, minHeight, maxHeight, child }) =>\n html.fragment`

${renderComponent(child)}

`,\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1715,"value":"### Paging components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":305,"value":"class TitledHeaderBox extends GenericComponent {\n constructor(props) {\n super(\n ({ headerChild, title, subTitle, align='left', children = [] }) =>\n renderComponent(\n new VerticalStack({\n gap:'small',\n children: [\n new VerticalStack({\n gap: 1,\n alignItems:align,\n children: [\n new StackItem({ child: html`${title}` }),\n new StackItem({ child: html`${subTitle}`})\n ]\n })\n ].concat(children)\n })\n ),\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1673,"value":"class Page extends GenericComponent {\n constructor(props) {\n super(({ width, height, margin = {}, child }) => {\n const { top = 0, left = 0, bottom = 0, right = 0 } = margin;\n return renderComponent(\n new SizedBox({\n width: width - (left + right),\n height: height - (top + bottom),\n child: new Container({ height:'100%', background: \"lightgray\", child })\n })\n );\n }, props);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1729,"value":"class Section extends GenericComponent {\n constructor(props){\n super(({children, startOnNewPage, unbreakable}) => html.fragment`

${renderChildren(children)}

`,props)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"### Basic components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"class ImageComponent extends GenericComponent {\n constructor(props) {\n super(\n ({ src, objectFit, objectPosition, ...props }) =>\n html.fragment`

`,\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2621,"value":"class Text extends GenericComponent {\n constructor(props) {\n super(\n ({ child, align, fontSize, fontWeight, ...props }) =>\n html.fragment`${(typeof child === 'object') ? renderComponent(child): child}`,\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"class Paragraph extends GenericComponent {\n constructor(props) {\n super(\n ({ children, align, initialLetter,fontSize, ...props }) =>\n html.fragment`

${renderChildren(children)}

`,\n props\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"### Constants utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1491,"value":"function splitSizes(array) { \n const sizes = new Array(array.length);\n for (let i = 0; i < array.length; i++) {\n let size = (sizes[i] = {});\n const val = array[i];\n if (typeof val === \"object\") {\n size.value = val.value;\n size.unit = val.unit;\n } else {\n val.replace(/^(\\d+(\\.\\d+)?)(\\w+)$/g, (match, v, dec, unit) => {\n v = +v;\n size.unit = unit;\n size.value = v;\n });\n }\n if (isNaN(size.value)) {\n throw new Error(\n `\"${name}\": value should be a number. Position ${i}. Value: \"${size.value}\".`\n );\n }\n if (typeof size.unit !== \"string\") {\n throw new Error(\n `\"${name}\": unit should be defined as a string (ex: \"px\", \"fr\"). Position ${i}. Unit: \"${size.unit}\".`\n );\n }\n }\n return sizes;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1451,"value":"formatSizes = (list) =>\n list.map(({ unit, value }) => `${value}${unit}`).join(\" \");\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1454,"value":"formatAreas = (list) =>\n list.map((areas) => `\"${areas.join(\" \")}\"`).join(\"\\n\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2642,"value":"renderComponent(new Banner({}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"import {verticalStack, horizontalStack, layersStack} from \"@rsamec/stacks\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"import {html} from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"