@ossy/design-system-extras 0.0.1-beta

package/.storybook/main.js

@@ -0,0 +1,19 @@
+
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions"
+  ],
+  "framework": {
+    "name": "@storybook/react-vite",
+    "options": {}
+  }
+};
+export default config;

package/.storybook/preview.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Theme } from '@ossy/design-system';
+import { Ossy, Standard } from '@ossy/themes'
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+
+  parameters: {
+    
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+
+    options: {
+      storySort: {
+        order: ['App', 'Layout', '*', 'Base'],
+      },
+    },
+
+  },
+
+  decorators: [
+    (Story) => (
+      <Theme theme={Ossy} >
+        <Story />
+      </Theme>
+    ),
+  ]
+
+};
+
+export default preview;

package/build/cjs/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("react"),t=require("react-markdown"),a=require("react-syntax-highlighter"),n=require("@ossy/design-system");function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},r.apply(null,arguments)}var o={hljs:{display:"block",overflowX:"auto",padding:"0.5em",color:"#383a42",background:"#fafafa"},"hljs-comment":{color:"#a0a1a7",fontStyle:"italic"},"hljs-quote":{color:"#a0a1a7",fontStyle:"italic"},"hljs-doctag":{color:"#a626a4"},"hljs-keyword":{color:"#a626a4"},"hljs-formula":{color:"#a626a4"},"hljs-section":{color:"#e45649"},"hljs-name":{color:"#e45649"},"hljs-selector-tag":{color:"#e45649"},"hljs-deletion":{color:"#e45649"},"hljs-subst":{color:"#e45649"},"hljs-literal":{color:"#0184bb"},"hljs-string":{color:"#50a14f"},"hljs-regexp":{color:"#50a14f"},"hljs-addition":{color:"#50a14f"},"hljs-attribute":{color:"#50a14f"},"hljs-meta-string":{color:"#50a14f"},"hljs-built_in":{color:"#c18401"},"hljs-class .hljs-title":{color:"#c18401"},"hljs-attr":{color:"#986801"},"hljs-variable":{color:"#986801"},"hljs-template-variable":{color:"#986801"},"hljs-type":{color:"#986801"},"hljs-selector-class":{color:"#986801"},"hljs-selector-attr":{color:"#986801"},"hljs-selector-pseudo":{color:"#986801"},"hljs-number":{color:"#986801"},"hljs-symbol":{color:"#4078f2"},"hljs-bullet":{color:"#4078f2"},"hljs-link":{color:"#4078f2",textDecoration:"underline"},"hljs-meta":{color:"#4078f2"},"hljs-selector-id":{color:"#4078f2"},"hljs-title":{color:"#4078f2"},"hljs-emphasis":{fontStyle:"italic"},"hljs-strong":{fontWeight:"bold"}};const l={h1:({node:t,...a})=>e.createElement(n.Title,r({id:s(a.children),as:"h1",variant:"primary"},a,{style:{marginBottom:"var(--space-l)"}})),h2:({node:t,...a})=>e.createElement(n.Title,r({id:s(a.children),as:"h2",variant:"secondary"},a,{style:{marginBottom:"var(--space-m)",marginTop:"var(--space-l)"}})),h3:({node:t,...a})=>e.createElement(n.Title,r({id:s(a.children),as:"h3",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),h4:({node:t,...a})=>e.createElement(n.Title,r({id:s(a.children),as:"h4",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),h5:({node:t,...a})=>e.createElement(n.Title,r({id:s(a.children),as:"h5",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),p:({node:t,...a})=>e.createElement(n.Text,r({},a,{style:{marginBottom:"var(--space-m)"}})),ul:({node:t,...a})=>e.createElement("ul",r({},a,{style:{listStyle:"inside",paddingLeft:"var(--space-l)"}})),li:({node:t,...a})=>e.createElement(n.Text,r({as:"li"},a,{style:{marginBottom:"var(--space-m)"}})),a:({node:t,...a})=>e.createElement(n.Button,r({as:a.href?"a":"button"},a,{variant:"link"})),code:({node:t,className:l,...s})=>{const[i,c]=/language-(\w+)/.exec(l||"")||[];return!c?e.createElement(n.View,r({inset:"xs",surface:"secondary",roundness:"s",style:{display:"inline-block"}},s),e.createElement(a,r({style:{display:"inline",...o,hljs:{display:"inline",color:"#383a42",background:"transparent"}},language:c},s))):e.createElement(n.View,{inset:"m",surface:"secondary",roundness:"m","data-component":"MarkdownViewer"},e.createElement("style",{href:"@ossy/design-system-extras/markdown-viewer/MarkdownViewer",precedence:"high"},'\n        [data-component="MarkdownViewer"] {\n          margin: var(--space-s) 0;\n        }\n\n        [data-component="MarkdownViewer"] pre {\n          margin: 0;\n        }\n      '),e.createElement(a,r({style:{...o,hljs:{display:"block",overflowX:"auto",color:"#383a42",background:"transparent"}},language:c},s)))}};function s(e){return e?e.toLowerCase().replace(/\s+/g,"-"):""}const i=({columns:t=[]})=>e.createElement(n.View,{layout:"row",placeContent:"normal space-between",gap:"xl"},t.map(t=>e.createElement("div",{style:{maxWidth:`var(--max-width-${t.maxWidth}, 100%)`}},e.createElement(n.Title,{as:"h3",variant:"tertiary",style:{marginBottom:"var(--space-m)"}},t.title),!!t.text&&e.createElement(n.Text,null,t.text),!!t.list&&e.createElement("ul",{key:t.title,style:{padding:"0"}},t.list.map(({label:t,...a})=>e.createElement("li",{key:t,style:{listStyle:"none"}},e.createElement(n.Button,r({variant:"link"},a,{style:{marginBottom:"var(--space-m)"}}),t))))))),c=(e,t)=>{const a=e=>e?.date?.split(" - ")?.[0]||"1900",n=new Date(a(e));return new Date(a(t))-n},m=(t=[])=>{t.sort(c);const[a,n]=e.useState([]),[r,o]=e.useState([]),[l,s]=e.useState([]),[i,m]=e.useState([]),[d,p]=e.useState([]),[u,g]=e.useState();Object.keys(t.flatMap(e=>e.tags).filter(e=>!!e).reduce((e,t)=>({[t]:"",...e}),{}));const y=Object.keys(t.reduce((e,t)=>({[t.typeOfExperience]:"",...e}),{}));e.useEffect(()=>{let e=t;d.length&&(e=t.filter(e=>e?.tags?.map(e=>e.toLowerCase())?.some(e=>d.map(e=>e.toLowerCase()).includes(e)))),u&&(e=e.filter(e=>e.typeOfExperience===u));const a=(e=>e.reduce((e,t)=>(e[t.typeOfExperience||"Other"].push(t),e),{Work:[],Education:[],Project:[],Other:[]}))(e);n(a.Work),o(a.Education),s(a.Project),m(a.Other)},[d,t,u]);return{work:a,education:r,project:l,other:i,tags:[],categories:y,activeTags:d,toggleActiveTag:e=>{p(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},activeExperienceType:u,toggleActiveExperienceType:e=>{e!==u&&g("All"===e?void 0:e)}}},d=({title:t,titleVariant:a="secondary",titleAs:o="h2",text:l,children:s,maxWidth:i="l",...c})=>e.createElement(n.PageSection,r({maxWidth:i},c,{style:{padding:"var(--space-xl) var(--space-m)",borderBottom:"1px solid var(--separator-primary)"}}),e.createElement(n.Title,{as:o,variant:a,style:{marginBottom:"var(--space-m)"}},t),e.createElement(n.Text,{style:{maxWidth:"600px",marginBottom:"var(--space-xl)"}},l),s),p=({title:t,titleMaxWidth:a="800px",text:o,actions:l=[]})=>e.createElement("div",{"data-component":"hero"},e.createElement("style",{href:"@ossy/design-system-extras/hero",precedence:"high"},'\n      [data-component="hero"] {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n          text-align: center;\n        }\n\n        @media (min-width: 820px) {\n          [data-component="hero"] {\n            /* min-height: 60vh; */\n            flex: 0 0 auto;\n          }\n        }\n      '),e.createElement(n.Title,{variant:"display",style:{maxWidth:a,marginBottom:"var(--space-l)"}},t),e.createElement(n.Text,{style:{marginBottom:"var(--space-l)"}},o),e.createElement("div",{style:{display:"flex",gap:"var(--space-m)"}},l.map(({label:t,...a})=>e.createElement(n.Button,r({},a,{key:t}),t)))),u=({columns:t=[]})=>e.createElement(n.View,{layout:"row",placeContent:"normal space-between",gap:"xl",className:"footer"},e.createElement("style",{href:"@ossy/design-system-extras/footer",precedence:"high"},"\n          .footer {\n            padding: var(--space-s);\n          }\n\n          .footer .title {\n            margin-bottom: var(--space-m);\n          }\n\n          .footer .list {\n            padding: 0;\n          }\n\n          .footer .list-item {\n            list-style: none;\n          }\n        "),t.map(t=>e.createElement("div",{style:{maxWidth:`var(--max-width-${t.maxWidth}, 100%)`}},e.createElement(n.Title,{as:"h3",variant:"tertiary",className:"title",style:{color:"var(--color-primary)"}},t.title),!!t.text&&e.createElement(n.Text,{style:{color:"var(--color-primary)"}},t.text),!!t.list&&e.createElement("ul",{className:"list",key:t.title},t.list.map(({label:t,...a})=>e.createElement("li",{className:"list-item",key:t},e.createElement(n.Button,r({variant:"link"},a,{style:{marginBottom:"var(--space-m)"}}),t))))))),g=[{id:"about",surface:"decorated",style:{padding:"var(--space-xxl) var(--space-m)"},render:({about:t,socialProof:a})=>e.createElement(e.Fragment,null,e.createElement(n.View,{alignItems:"stretch",justifyContent:"center",style:{marginBottom:"var(--space-xl)"}},t.columns.map(({name:t,role:a,imgSrc:r,text:o})=>e.createElement("div",{key:t,style:{display:"flex",flexDirection:"column",justifyContent:"center"}},e.createElement(n.Image,{key:t,src:r,style:{borderRadius:"50%",width:"100%",maxWidth:"200px",height:"auto",margin:"0 auto",marginBottom:"var(--space-l)"}}),e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"var(--space-s)",alignItems:"center",marginBottom:"var(--space-l)"}},e.createElement(n.Title,{as:"h1",variant:"primary"},t),e.createElement(n.Title,{as:"h2",variant:"lead"},a)),e.createElement(n.Text,{style:{textAlign:"center",maxWidth:"600px",margin:"0 auto"}},o)))),e.createElement(n.Text,{variant:"small",style:{marginBottom:"var(--space-l)",textAlign:"center"}},a.title),e.createElement(n.View,{layout:"row",justifyContent:"space-between",gap:"m"},a.columns.map(({title:t,logo:a})=>e.createElement("div",{key:t,style:{textAlign:"center"}},e.createElement(n.Card,null,e.createElement(n.Image,{src:a,style:{height:"20px",width:"auto"}}))))))},{id:"hero",surface:"primary",style:{padding:"var(--space-xxl) var(--space-m) var(--space-xl)"},render:({hero:t})=>e.createElement(p,t)},{id:"services",surface:"primary",maxWidth:"large",layout:"row",placeContent:"stretch space-around",gap:"xl",style:{borderBottom:"1px solid var(--separator-primary)",padding:"var(--space-xxl) var(--space-m)"},render:({services:t})=>e.createElement(e.Fragment,null,t.map(({title:t,text:a})=>e.createElement("div",{key:t,style:{textAlign:"center"}},e.createElement(n.Title,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},t),e.createElement(n.Text,{style:{maxWidth:"600px"}},a))))},{id:"projects",surface:"primary",style:{padding:"var(--space-xxl) var(--space-m) var(--space-xl)",minHeight:"60vh"},render:({projects:t})=>e.createElement(e.Fragment,null,e.createElement(n.Guide,{title:t.title,titleVariant:"display",text:t.text,style:{textAlign:"left",maxWidth:"600px",marginBottom:"var(--space-xl)"}}),t.categories.map(({title:t,text:a,links:o})=>e.createElement("div",{style:{marginBottom:"var(--space-xl)"}},e.createElement(n.Title,{title:t,variant:"tertiary",style:{marginBottom:"var(--space-l)"}},t),e.createElement(n.Text,null,a),e.createElement(n.Stack,null,o.map(t=>e.createElement(n.Stack,{horizontal:!0,style:{marginBottom:"var(--space-m)"}},t.map(t=>e.createElement(n.Button,r({},t,{variant:"link",target:"_blank",style:{marginRight:"var(--space-m)"}})))))))))},{id:"contact",surface:"accent",style:{padding:"var(--space-xxl) var(--space-m)",borderBottom:"1px solid var(--separator-primary)"},render:({contact:t})=>e.createElement(u,{columns:t.columns})}];exports.CardLayout=({surface:t="primary",maxWidth:a="full",layout:r="off-center",cardVariant:o,cardSurface:l,header:s,children:i,content:c})=>e.createElement(n.PageSection,{surface:t,maxWidth:a},e.createElement(n.View,{layout:r,style:{height:"100vh"}},s,e.createElement(n.Card,{slot:"content",variant:o,style:{overflowY:"auto"},surface:l},c??i))),exports.CardSidebar=({surface:t="primary",layout:a="off-center-m",navigation:o=[],cardVariant:l,cardSurface:s,header:i,children:c,content:m,...d})=>e.createElement(n.PageSection,r({layout:a,surface:t},d),i,e.createElement(n.Card,{variant:l,surface:s,slot:"content",style:{display:"flex",flexDirection:"row",padding:"0"}},e.createElement("div",{style:{display:"flex",gap:"var(--space-s)",padding:"var(--space-l) var(--space-s)",flexDirection:"column",width:"180px",borderRight:"1px solid var(--separator-primary)"}},o.map(t=>e.createElement(n.Button,r({},t,{style:{justifyContent:"flex-start"}})))),e.createElement("div",{style:{flexGrow:"1",padding:"var(--space-l)",overflowY:"auto"}},m??c))),exports.CardTabs=({surface:t="primary",layout:a="off-center",cardVariant:o="decorated",tabs:l=[],content:s,children:i,...c})=>e.createElement(n.PageSection,r({layout:a,surface:t},c),e.createElement(n.View,{style:{height:"100%",background:"var(--surface-linear-gradient)"}},e.createElement(n.Card,{variant:o,slot:"content",style:{width:"100vw",padding:"0"}},e.createElement(n.Tabs,{tabs:l,style:{height:"auto",borderBottom:"1px solid var(--separator-primary)"}}),e.createElement("div",{style:{padding:"var(--space-m)"}},s||i)))),exports.LandingPage2020=g,exports.MarkdownViewer=({markdown:a,children:n,components:o={},...s})=>e.createElement(t,r({children:a||n,components:{...l,...o}},s)),exports.Resume=({status:t,profile:a,experiences:o,translations:l,profileCardProps:s={},actions:i=[]})=>{const{work:c,education:d,project:p,other:u,tags:g,categories:y,activeTags:x,toggleActiveTag:v,activeExperienceType:h,toggleActiveExperienceType:f}=m(o),E=[{id:"All",label:l.all},{id:"Work",label:l.work},{id:"Project",label:l.projects},{id:"Education",label:l.education},{id:"Other",label:l.other}].filter(e=>"All"===e.id?e:y.includes(e.id)),w=[{title:l.work,experiences:c},{title:l.projects,experiences:p},{title:l.education,experiences:d},{title:l.other,experiences:u}];return e.createElement("div",{"data-component":"@design-system-extras/resume","data-status":t},e.createElement("style",{href:"@design-system-extras/resume",precedence:"high"},'\n        [data-component="@design-system-extras/resume"] {\n\n          --padding: var(--resume-padding, 0);\n          --background: var(--resume-background, transparent);\n          --header-padding: var(--resume-header-padding, 8px 24px 8px 0);\n          --header-justify-content: var(--resume-header-justify-content, center);\n          --filter-padding: var(--resume-filter-padding, var(--space-s) var(--space-m));\n          --content-background: var(--resume-content-background, transparent);\n\n          background: var(--background);\n          padding: var(--padding);\n          display: grid;\n          grid-template-columns: 1fr;\n          grid-template-rows: fit-content fit-content fit-content;\n          grid-template-areas:\n            "profile-summary"\n            "actions"\n            "content";\n        }\n\n        [data-component="@design-system-extras/resume"] [data-slot="actions"] {\n          min-width: 0;\n          box-sizing: border-box;\n          grid-area: actions;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          padding: var(--header-padding);\n        }\n\n        [data-component="@design-system-extras/resume"] [data-slot="actions"]::-webkit-scrollbar {\n          display: none;\n        }\n\n        [data-component="@design-system-extras/resume"] .secondary-actions {\n          display: none;\n          gap: var(--space-s);\n        }\n\n        [data-component="@design-system-extras/resume"] [data-slot="profile-summary"] {\n          grid-area: profile-summary;\n          z-index: 1;\n        }\n\n        [data-component="@design-system-extras/resume"] [data-slot="content"] {\n          display: flex;\n          width: 100%;\n          flex-direction: column;\n          align-items: center;\n          justify-content: flex-start;\n          grid-area: content;\n          padding: var(--space-l) var(--space-m);\n          margin: var(--content-margin);\n          gap: var(--space-xl);\n          background: var(--content-background);\n        }\n\n        [data-component="@design-system-extras/resume"] [data-animation="fade-in"] {\n          opacity: 0;\n          transition-property: opacity, transform;\n          transition-duration: 1s, 1s;\n          transition-timing-function: ease-in-out;\n          transform: translateZ(0);\n        }\n\n        [data-component="@design-system-extras/resume"] [data-scroll] {\n          scrollbar-width: none;\n          overflow-y: auto;\n        }\n\n        [data-component="@design-system-extras/resume"] [data-scroll]::-webkit-scrollbar {\n          display: none;\n        }\n\n        [data-component="@design-system-extras/resume"][data-status="Success"] [data-animation="fade-in"] {\n          opacity: 1;\n        }\n\n        [data-component="@design-system-extras/resume"] .content-section {\n          display: flex;\n          flex-direction: column;\n          gap: var(--space-l);\n          width: 100%;\n          max-width: 700px;\n        }\n\n        @media (min-width: 1200px) {\n          [data-component="@design-system-extras/resume"] {\n            height: 100vh;\n            grid-template-columns: 400px 1fr;\n            grid-template-rows: min-content 1fr;\n            grid-template-areas:\n              "profile-summary actions"\n              "profile-summary content";\n          }\n\n          [data-component="@design-system-extras/resume"] [data-slot="actions"] {\n            justify-content: space-between;\n          }\n\n          [data-component="@design-system-extras/resume"] .secondary-actions {\n            display: flex;\n          }\n        }\n\n        @media (min-width: 1900px) {\n          [data-component="@design-system-extras/resume"] [data-slot="content"] {\n            grid-column-start: profile-summary;\n            grid-column-end: content;\n            grid-row-start: content;\n            grid-row-end: content;\n          }\n        }\n      '),e.createElement(n.ProfileCard,r({"data-scroll":!0,"data-slot":"profile-summary",activeTags:x,onTagClick:v,translations:l,surface:"primary"},s,a)),e.createElement("header",{className:"actions","data-slot":"actions","data-surface":"primary"},e.createElement(n.Tabs,{tabs:E,activeTabId:h||"All",onTabClick:(e,t)=>f(t.id),style:{borderBottom:g.length?"var(--header-border-bottom)":void 0}}),e.createElement("div",{className:"secondary-actions"},i.map(({label:t,contextMenu:a,...r})=>a?e.createElement(n.Dropdown,{trigger:e.createElement(n.Button,r,t)},e.createElement(n.ContextMenu,null,a.map(t=>e.createElement(n.ContextMenu.Item,t,t.label)))):e.createElement(n.Button,r,t))),!!g.length&&e.createElement(n.Tags,{tags:g,activeTags:x,onSelect:v,style:{padding:"var(--filter-padding)",display:"flex"}})),e.createElement("main",{className:"content","data-slot":"content","data-scroll":!0},w.filter(e=>!!e.experiences.length).map(({title:t,experiences:a})=>e.createElement("section",{className:"content-section",key:t},e.createElement(n.Title,{variant:"primary",style:{textAlign:"center"}},t),e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"var(--space-l)"}},a.map(t=>e.createElement(n.ResumeExperience,{key:t.id||t.title,title:t.title,subTitle:t.subTitle,date:t.date,description:t.description,website:t.website,github:t.github,tags:t.tags})))))))},exports.StandardLayout=({logo:t,headerActions:a,headerAccentBorder:o=!0,navigation:l,maxWidth:s="medium",copyright:c,footer:m,children:d,...p})=>{const u=[o&&{id:"accent-border",style:{height:"4px",position:"sticky",zIndex:"10",top:"0",background:"var(--separator-accent)"}},(t||a)&&{id:"header",surface:"primary",style:{padding:"var(--space-s) var(--space-l)",width:"100%"},render:()=>e.createElement(n.Header,{logo:t,actions:a})},l&&{id:"navigation",surface:"primary",style:{height:"55px",position:"sticky",top:"4px",width:"100%",zIndex:"10"},render:()=>e.createElement(n.Tabs,{tabs:l,style:{height:"100%"}})},{id:"outlet",as:"main",maxWidth:"full",style:{gridArea:"content"},render:()=>d},m&&{id:"footer",surface:m.surface,as:"footer",style:{padding:"var(--space-xl) var(--space-m)"},render:()=>e.createElement(i,{columns:m.columns})},c&&{id:"footer-section-copyright",surface:"alt-secondary",style:{padding:"var(--space-m)",textAlign:"center"},render:()=>e.createElement(n.Text,{variant:"small"},c)}].filter(e=>!!e);return e.createElement(n.Page,r({maxWidth:s,sections:u},p))},exports.ThemeDisplay=({theme:t={}})=>e.createElement(e.Fragment,null,e.createElement(d,{title:"Theme overview",titleVariant:"primary",titleAs:"h1",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "}),e.createElement(d,{title:"Colors",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "},e.createElement(n.View,{layout:"row-wrap",gap:"xl"},Object.entries(t.color).map(([t])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",flexWrap:"wrap",gap:"var(--space-l)"}},e.createElement("div",{variant:t,style:{width:"200px",height:"var(--space-xl)",backgroundColor:`var(--color-${t})`,boxShadow:"2px 2px 10px 0 hsla(0, 0%, 90%, .8)",borderRadius:"var(--space-xs)"}}),e.createElement(n.Text,null,t))))),e.createElement(d,{title:"Spacing",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "},e.createElement(n.View,{layout:"row",gap:"xl"},Object.entries(t.space).map(([t,a])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"flex-end",alignItems:"center"}},e.createElement("div",{style:{background:"var(--button-cta-background)",width:"20px",height:a,borderRadius:"var(--space-xxs)",marginBottom:"var(--space-m)"}}),e.createElement(n.Text,null,t," - ",a))))),e.createElement(d,{title:"Content sizes (max width)",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "},e.createElement(n.View,{gap:"s"},Object.entries(t["max-width"]).map(([t,a])=>e.createElement(n.View,{layout:"row",gap:"l"},e.createElement(n.Text,{style:{flexBasis:"90px"}},t," - ",a),e.createElement("div",{style:{background:"var(--color-accent)",width:"100%",maxWidth:`calc(var(--max-width-${t}) / 2)`,height:"20px",borderRadius:"var(--space-xxs)"}}))))),e.createElement(d,{title:"Surfaces",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "},e.createElement(n.View,{layout:"row-wrap",gap:"xl"},Object.entries(t.surface).map(([t,a])=>e.createElement("div",{style:{background:`var(--surface-${t})`,width:"300px",height:"300px",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)"}},e.createElement(n.Text,null,t))))),e.createElement(d,{title:"Separators",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "},e.createElement(n.View,{layout:"row",gap:"xl"},Object.entries(t.separator).map(([t])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",flexWrap:"wrap",gap:"var(--space-l)",marginBottom:"var(--space-xl)"}},e.createElement("div",{variant:t,style:{width:"300px",height:"1px",backgroundColor:`var(--separator-${t})`}}),e.createElement(n.Text,null,t))))),e.createElement(d,{title:"Typography",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "},e.createElement(n.Title,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},"Titles"),e.createElement(n.View,{layout:"row-wrap",gap:"xl",placeItems:"center",style:{marginBottom:"var(--space-xl)"}},Object.entries(t.title).filter(([e])=>"default"!==e).map(([t])=>e.createElement("div",{style:{padding:"var(--space-l)",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)",display:"flex",justifyContent:"center",alignItems:"center"}},e.createElement(n.Title,{variant:t},t)))),e.createElement(n.Title,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},"Text"),e.createElement(n.View,{layout:"row",gap:"xl",placeItems:"center"},Object.entries(t.text).map(([t])=>e.createElement("div",{style:{padding:"var(--space-l)",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)"}},e.createElement(n.Text,{variant:t},t))))),e.createElement(d,{title:"Buttons",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "},e.createElement(n.View,{layout:"row-wrap",gap:"xl",alignItems:"center",justifyContent:"flex-start"},Object.entries(t.button).map(([t])=>e.createElement(n.Button,{variant:t,style:{flexGrow:"0",flexShrink:"0"}},t))))),exports.useResume=m;

package/build/esm/index.js

@@ -0,0 +1 @@
+import e,{useState as t,useEffect as a}from"react";import n from"react-markdown";import r from"react-syntax-highlighter";import{View as o,Button as l,Text as s,Title as i,Header as c,Tabs as m,Page as d,PageSection as p,Card as y,ProfileCard as g,Dropdown as u,ContextMenu as v,Tags as h,ResumeExperience as x,Image as f,Guide as E,Stack as b}from"@ossy/design-system";function w(){return w=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},w.apply(null,arguments)}var j={hljs:{display:"block",overflowX:"auto",padding:"0.5em",color:"#383a42",background:"#fafafa"},"hljs-comment":{color:"#a0a1a7",fontStyle:"italic"},"hljs-quote":{color:"#a0a1a7",fontStyle:"italic"},"hljs-doctag":{color:"#a626a4"},"hljs-keyword":{color:"#a626a4"},"hljs-formula":{color:"#a626a4"},"hljs-section":{color:"#e45649"},"hljs-name":{color:"#e45649"},"hljs-selector-tag":{color:"#e45649"},"hljs-deletion":{color:"#e45649"},"hljs-subst":{color:"#e45649"},"hljs-literal":{color:"#0184bb"},"hljs-string":{color:"#50a14f"},"hljs-regexp":{color:"#50a14f"},"hljs-addition":{color:"#50a14f"},"hljs-attribute":{color:"#50a14f"},"hljs-meta-string":{color:"#50a14f"},"hljs-built_in":{color:"#c18401"},"hljs-class .hljs-title":{color:"#c18401"},"hljs-attr":{color:"#986801"},"hljs-variable":{color:"#986801"},"hljs-template-variable":{color:"#986801"},"hljs-type":{color:"#986801"},"hljs-selector-class":{color:"#986801"},"hljs-selector-attr":{color:"#986801"},"hljs-selector-pseudo":{color:"#986801"},"hljs-number":{color:"#986801"},"hljs-symbol":{color:"#4078f2"},"hljs-bullet":{color:"#4078f2"},"hljs-link":{color:"#4078f2",textDecoration:"underline"},"hljs-meta":{color:"#4078f2"},"hljs-selector-id":{color:"#4078f2"},"hljs-title":{color:"#4078f2"},"hljs-emphasis":{fontStyle:"italic"},"hljs-strong":{fontWeight:"bold"}};const k={h1:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h1",variant:"primary"},a,{style:{marginBottom:"var(--space-l)"}})),h2:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h2",variant:"secondary"},a,{style:{marginBottom:"var(--space-m)",marginTop:"var(--space-l)"}})),h3:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h3",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),h4:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h4",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),h5:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h5",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),p:({node:t,...a})=>e.createElement(s,w({},a,{style:{marginBottom:"var(--space-m)"}})),ul:({node:t,...a})=>e.createElement("ul",w({},a,{style:{listStyle:"inside",paddingLeft:"var(--space-l)"}})),li:({node:t,...a})=>e.createElement(s,w({as:"li"},a,{style:{marginBottom:"var(--space-m)"}})),a:({node:t,...a})=>e.createElement(l,w({as:a.href?"a":"button"},a,{variant:"link"})),code:({node:t,className:a,...n})=>{const[l,s]=/language-(\w+)/.exec(a||"")||[];return!s?e.createElement(o,w({inset:"xs",surface:"secondary",roundness:"s",style:{display:"inline-block"}},n),e.createElement(r,w({style:{display:"inline",...j,hljs:{display:"inline",color:"#383a42",background:"transparent"}},language:s},n))):e.createElement(o,{inset:"m",surface:"secondary",roundness:"m","data-component":"MarkdownViewer"},e.createElement("style",{href:"@ossy/design-system-extras/markdown-viewer/MarkdownViewer",precedence:"high"},'\n        [data-component="MarkdownViewer"] {\n          margin: var(--space-s) 0;\n        }\n\n        [data-component="MarkdownViewer"] pre {\n          margin: 0;\n        }\n      '),e.createElement(r,w({style:{...j,hljs:{display:"block",overflowX:"auto",color:"#383a42",background:"transparent"}},language:s},n)))}};function B(e){return e?e.toLowerCase().replace(/\s+/g,"-"):""}const W=({markdown:t,children:a,components:r={},...o})=>e.createElement(n,w({children:t||a,components:{...k,...r}},o)),C=({columns:t=[]})=>e.createElement(o,{layout:"row",placeContent:"normal space-between",gap:"xl"},t.map(t=>e.createElement("div",{style:{maxWidth:`var(--max-width-${t.maxWidth}, 100%)`}},e.createElement(i,{as:"h3",variant:"tertiary",style:{marginBottom:"var(--space-m)"}},t.title),!!t.text&&e.createElement(s,null,t.text),!!t.list&&e.createElement("ul",{key:t.title,style:{padding:"0"}},t.list.map(({label:t,...a})=>e.createElement("li",{key:t,style:{listStyle:"none"}},e.createElement(l,w({variant:"link"},a,{style:{marginBottom:"var(--space-m)"}}),t))))))),S=({logo:t,headerActions:a,headerAccentBorder:n=!0,navigation:r,maxWidth:o="medium",copyright:l,footer:i,children:p,...y})=>{const g=[n&&{id:"accent-border",style:{height:"4px",position:"sticky",zIndex:"10",top:"0",background:"var(--separator-accent)"}},(t||a)&&{id:"header",surface:"primary",style:{padding:"var(--space-s) var(--space-l)",width:"100%"},render:()=>e.createElement(c,{logo:t,actions:a})},r&&{id:"navigation",surface:"primary",style:{height:"55px",position:"sticky",top:"4px",width:"100%",zIndex:"10"},render:()=>e.createElement(m,{tabs:r,style:{height:"100%"}})},{id:"outlet",as:"main",maxWidth:"full",style:{gridArea:"content"},render:()=>p},i&&{id:"footer",surface:i.surface,as:"footer",style:{padding:"var(--space-xl) var(--space-m)"},render:()=>e.createElement(C,{columns:i.columns})},l&&{id:"footer-section-copyright",surface:"alt-secondary",style:{padding:"var(--space-m)",textAlign:"center"},render:()=>e.createElement(s,{variant:"small"},l)}].filter(e=>!!e);return e.createElement(d,w({maxWidth:o,sections:g},y))},A=({surface:t="primary",maxWidth:a="full",layout:n="off-center",cardVariant:r,cardSurface:l,header:s,children:i,content:c})=>e.createElement(p,{surface:t,maxWidth:a},e.createElement(o,{layout:n,style:{height:"100vh"}},s,e.createElement(y,{slot:"content",variant:r,style:{overflowY:"auto"},surface:l},c??i))),O=({surface:t="primary",layout:a="off-center-m",navigation:n=[],cardVariant:r,cardSurface:o,header:s,children:i,content:c,...m})=>e.createElement(p,w({layout:a,surface:t},m),s,e.createElement(y,{variant:r,surface:o,slot:"content",style:{display:"flex",flexDirection:"row",padding:"0"}},e.createElement("div",{style:{display:"flex",gap:"var(--space-s)",padding:"var(--space-l) var(--space-s)",flexDirection:"column",width:"180px",borderRight:"1px solid var(--separator-primary)"}},n.map(t=>e.createElement(l,w({},t,{style:{justifyContent:"flex-start"}})))),e.createElement("div",{style:{flexGrow:"1",padding:"var(--space-l)",overflowY:"auto"}},c??i))),T=({surface:t="primary",layout:a="off-center",cardVariant:n="decorated",tabs:r=[],content:l,children:s,...i})=>e.createElement(p,w({layout:a,surface:t},i),e.createElement(o,{style:{height:"100%",background:"var(--surface-linear-gradient)"}},e.createElement(y,{variant:n,slot:"content",style:{width:"100vw",padding:"0"}},e.createElement(m,{tabs:r,style:{height:"auto",borderBottom:"1px solid var(--separator-primary)"}}),e.createElement("div",{style:{padding:"var(--space-m)"}},l||s)))),I=(e,t)=>{const a=e=>e?.date?.split(" - ")?.[0]||"1900",n=new Date(a(e));return new Date(a(t))-n},D=(e=[])=>{e.sort(I);const[n,r]=t([]),[o,l]=t([]),[s,i]=t([]),[c,m]=t([]),[d,p]=t([]),[y,g]=t();Object.keys(e.flatMap(e=>e.tags).filter(e=>!!e).reduce((e,t)=>({[t]:"",...e}),{}));const u=Object.keys(e.reduce((e,t)=>({[t.typeOfExperience]:"",...e}),{}));a(()=>{let t=e;d.length&&(t=e.filter(e=>e?.tags?.map(e=>e.toLowerCase())?.some(e=>d.map(e=>e.toLowerCase()).includes(e)))),y&&(t=t.filter(e=>e.typeOfExperience===y));const a=(e=>e.reduce((e,t)=>(e[t.typeOfExperience||"Other"].push(t),e),{Work:[],Education:[],Project:[],Other:[]}))(t);r(a.Work),l(a.Education),i(a.Project),m(a.Other)},[d,e,y]);return{work:n,education:o,project:s,other:c,tags:[],categories:u,activeTags:d,toggleActiveTag:e=>{p(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},activeExperienceType:y,toggleActiveExperienceType:e=>{e!==y&&g("All"===e?void 0:e)}}},V=({status:t,profile:a,experiences:n,translations:r,profileCardProps:o={},actions:s=[]})=>{const{work:c,education:d,project:p,other:y,tags:f,categories:E,activeTags:b,toggleActiveTag:j,activeExperienceType:k,toggleActiveExperienceType:B}=D(n),W=[{id:"All",label:r.all},{id:"Work",label:r.work},{id:"Project",label:r.projects},{id:"Education",label:r.education},{id:"Other",label:r.other}].filter(e=>"All"===e.id?e:E.includes(e.id)),C=[{title:r.work,experiences:c},{title:r.projects,experiences:p},{title:r.education,experiences:d},{title:r.other,experiences:y}];return e.createElement("div",{"data-component":"@design-system-extras/resume","data-status":t},e.createElement("style",{href:"@design-system-extras/resume",precedence:"high"},'\n        [data-component="@design-system-extras/resume"] {\n\n          --padding: var(--resume-padding, 0);\n          --background: var(--resume-background, transparent);\n          --header-padding: var(--resume-header-padding, 8px 24px 8px 0);\n          --header-justify-content: var(--resume-header-justify-content, center);\n          --filter-padding: var(--resume-filter-padding, var(--space-s) var(--space-m));\n          --content-background: var(--resume-content-background, transparent);\n\n          background: var(--background);\n          padding: var(--padding);\n          display: grid;\n          grid-template-columns: 1fr;\n          grid-template-rows: fit-content fit-content fit-content;\n          grid-template-areas:\n            "profile-summary"\n            "actions"\n            "content";\n        }\n\n        [data-component="@design-system-extras/resume"] [data-slot="actions"] {\n          min-width: 0;\n          box-sizing: border-box;\n          grid-area: actions;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          padding: var(--header-padding);\n        }\n\n        [data-component="@design-system-extras/resume"] [data-slot="actions"]::-webkit-scrollbar {\n          display: none;\n        }\n\n        [data-component="@design-system-extras/resume"] .secondary-actions {\n          display: none;\n          gap: var(--space-s);\n        }\n\n        [data-component="@design-system-extras/resume"] [data-slot="profile-summary"] {\n          grid-area: profile-summary;\n          z-index: 1;\n        }\n\n        [data-component="@design-system-extras/resume"] [data-slot="content"] {\n          display: flex;\n          width: 100%;\n          flex-direction: column;\n          align-items: center;\n          justify-content: flex-start;\n          grid-area: content;\n          padding: var(--space-l) var(--space-m);\n          margin: var(--content-margin);\n          gap: var(--space-xl);\n          background: var(--content-background);\n        }\n\n        [data-component="@design-system-extras/resume"] [data-animation="fade-in"] {\n          opacity: 0;\n          transition-property: opacity, transform;\n          transition-duration: 1s, 1s;\n          transition-timing-function: ease-in-out;\n          transform: translateZ(0);\n        }\n\n        [data-component="@design-system-extras/resume"] [data-scroll] {\n          scrollbar-width: none;\n          overflow-y: auto;\n        }\n\n        [data-component="@design-system-extras/resume"] [data-scroll]::-webkit-scrollbar {\n          display: none;\n        }\n\n        [data-component="@design-system-extras/resume"][data-status="Success"] [data-animation="fade-in"] {\n          opacity: 1;\n        }\n\n        [data-component="@design-system-extras/resume"] .content-section {\n          display: flex;\n          flex-direction: column;\n          gap: var(--space-l);\n          width: 100%;\n          max-width: 700px;\n        }\n\n        @media (min-width: 1200px) {\n          [data-component="@design-system-extras/resume"] {\n            height: 100vh;\n            grid-template-columns: 400px 1fr;\n            grid-template-rows: min-content 1fr;\n            grid-template-areas:\n              "profile-summary actions"\n              "profile-summary content";\n          }\n\n          [data-component="@design-system-extras/resume"] [data-slot="actions"] {\n            justify-content: space-between;\n          }\n\n          [data-component="@design-system-extras/resume"] .secondary-actions {\n            display: flex;\n          }\n        }\n\n        @media (min-width: 1900px) {\n          [data-component="@design-system-extras/resume"] [data-slot="content"] {\n            grid-column-start: profile-summary;\n            grid-column-end: content;\n            grid-row-start: content;\n            grid-row-end: content;\n          }\n        }\n      '),e.createElement(g,w({"data-scroll":!0,"data-slot":"profile-summary",activeTags:b,onTagClick:j,translations:r,surface:"primary"},o,a)),e.createElement("header",{className:"actions","data-slot":"actions","data-surface":"primary"},e.createElement(m,{tabs:W,activeTabId:k||"All",onTabClick:(e,t)=>B(t.id),style:{borderBottom:f.length?"var(--header-border-bottom)":void 0}}),e.createElement("div",{className:"secondary-actions"},s.map(({label:t,contextMenu:a,...n})=>a?e.createElement(u,{trigger:e.createElement(l,n,t)},e.createElement(v,null,a.map(t=>e.createElement(v.Item,t,t.label)))):e.createElement(l,n,t))),!!f.length&&e.createElement(h,{tags:f,activeTags:b,onSelect:j,style:{padding:"var(--filter-padding)",display:"flex"}})),e.createElement("main",{className:"content","data-slot":"content","data-scroll":!0},C.filter(e=>!!e.experiences.length).map(({title:t,experiences:a})=>e.createElement("section",{className:"content-section",key:t},e.createElement(i,{variant:"primary",style:{textAlign:"center"}},t),e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"var(--space-l)"}},a.map(t=>e.createElement(x,{key:t.id||t.title,title:t.title,subTitle:t.subTitle,date:t.date,description:t.description,website:t.website,github:t.github,tags:t.tags})))))))},H=({title:t,titleVariant:a="secondary",titleAs:n="h2",text:r,children:o,maxWidth:l="l",...c})=>e.createElement(p,w({maxWidth:l},c,{style:{padding:"var(--space-xl) var(--space-m)",borderBottom:"1px solid var(--separator-primary)"}}),e.createElement(i,{as:n,variant:a,style:{marginBottom:"var(--space-m)"}},t),e.createElement(s,{style:{maxWidth:"600px",marginBottom:"var(--space-xl)"}},r),o),N=({theme:t={}})=>e.createElement(e.Fragment,null,e.createElement(H,{title:"Theme overview",titleVariant:"primary",titleAs:"h1",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "}),e.createElement(H,{title:"Colors",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "},e.createElement(o,{layout:"row-wrap",gap:"xl"},Object.entries(t.color).map(([t])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",flexWrap:"wrap",gap:"var(--space-l)"}},e.createElement("div",{variant:t,style:{width:"200px",height:"var(--space-xl)",backgroundColor:`var(--color-${t})`,boxShadow:"2px 2px 10px 0 hsla(0, 0%, 90%, .8)",borderRadius:"var(--space-xs)"}}),e.createElement(s,null,t))))),e.createElement(H,{title:"Spacing",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "},e.createElement(o,{layout:"row",gap:"xl"},Object.entries(t.space).map(([t,a])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"flex-end",alignItems:"center"}},e.createElement("div",{style:{background:"var(--button-cta-background)",width:"20px",height:a,borderRadius:"var(--space-xxs)",marginBottom:"var(--space-m)"}}),e.createElement(s,null,t," - ",a))))),e.createElement(H,{title:"Content sizes (max width)",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "},e.createElement(o,{gap:"s"},Object.entries(t["max-width"]).map(([t,a])=>e.createElement(o,{layout:"row",gap:"l"},e.createElement(s,{style:{flexBasis:"90px"}},t," - ",a),e.createElement("div",{style:{background:"var(--color-accent)",width:"100%",maxWidth:`calc(var(--max-width-${t}) / 2)`,height:"20px",borderRadius:"var(--space-xxs)"}}))))),e.createElement(H,{title:"Surfaces",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "},e.createElement(o,{layout:"row-wrap",gap:"xl"},Object.entries(t.surface).map(([t,a])=>e.createElement("div",{style:{background:`var(--surface-${t})`,width:"300px",height:"300px",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)"}},e.createElement(s,null,t))))),e.createElement(H,{title:"Separators",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "},e.createElement(o,{layout:"row",gap:"xl"},Object.entries(t.separator).map(([t])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",flexWrap:"wrap",gap:"var(--space-l)",marginBottom:"var(--space-xl)"}},e.createElement("div",{variant:t,style:{width:"300px",height:"1px",backgroundColor:`var(--separator-${t})`}}),e.createElement(s,null,t))))),e.createElement(H,{title:"Typography",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "},e.createElement(i,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},"Titles"),e.createElement(o,{layout:"row-wrap",gap:"xl",placeItems:"center",style:{marginBottom:"var(--space-xl)"}},Object.entries(t.title).filter(([e])=>"default"!==e).map(([t])=>e.createElement("div",{style:{padding:"var(--space-l)",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)",display:"flex",justifyContent:"center",alignItems:"center"}},e.createElement(i,{variant:t},t)))),e.createElement(i,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},"Text"),e.createElement(o,{layout:"row",gap:"xl",placeItems:"center"},Object.entries(t.text).map(([t])=>e.createElement("div",{style:{padding:"var(--space-l)",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)"}},e.createElement(s,{variant:t},t))))),e.createElement(H,{title:"Buttons",text:"\n          Here you can find an overview of our patterns, colors, and components.\n          Keep in mind that this is only an overview, for usage examples and documentation go to\n          our Storybook page.\n        "},e.createElement(o,{layout:"row-wrap",gap:"xl",alignItems:"center",justifyContent:"flex-start"},Object.entries(t.button).map(([t])=>e.createElement(l,{variant:t,style:{flexGrow:"0",flexShrink:"0"}},t))))),R=({title:t,titleMaxWidth:a="800px",text:n,actions:r=[]})=>e.createElement("div",{"data-component":"hero"},e.createElement("style",{href:"@ossy/design-system-extras/hero",precedence:"high"},'\n      [data-component="hero"] {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n          text-align: center;\n        }\n\n        @media (min-width: 820px) {\n          [data-component="hero"] {\n            /* min-height: 60vh; */\n            flex: 0 0 auto;\n          }\n        }\n      '),e.createElement(i,{variant:"display",style:{maxWidth:a,marginBottom:"var(--space-l)"}},t),e.createElement(s,{style:{marginBottom:"var(--space-l)"}},n),e.createElement("div",{style:{display:"flex",gap:"var(--space-m)"}},r.map(({label:t,...a})=>e.createElement(l,w({},a,{key:t}),t)))),K=({columns:t=[]})=>e.createElement(o,{layout:"row",placeContent:"normal space-between",gap:"xl",className:"footer"},e.createElement("style",{href:"@ossy/design-system-extras/footer",precedence:"high"},"\n          .footer {\n            padding: var(--space-s);\n          }\n\n          .footer .title {\n            margin-bottom: var(--space-m);\n          }\n\n          .footer .list {\n            padding: 0;\n          }\n\n          .footer .list-item {\n            list-style: none;\n          }\n        "),t.map(t=>e.createElement("div",{style:{maxWidth:`var(--max-width-${t.maxWidth}, 100%)`}},e.createElement(i,{as:"h3",variant:"tertiary",className:"title",style:{color:"var(--color-primary)"}},t.title),!!t.text&&e.createElement(s,{style:{color:"var(--color-primary)"}},t.text),!!t.list&&e.createElement("ul",{className:"list",key:t.title},t.list.map(({label:t,...a})=>e.createElement("li",{className:"list-item",key:t},e.createElement(l,w({variant:"link"},a,{style:{marginBottom:"var(--space-m)"}}),t))))))),M=[{id:"about",surface:"decorated",style:{padding:"var(--space-xxl) var(--space-m)"},render:({about:t,socialProof:a})=>e.createElement(e.Fragment,null,e.createElement(o,{alignItems:"stretch",justifyContent:"center",style:{marginBottom:"var(--space-xl)"}},t.columns.map(({name:t,role:a,imgSrc:n,text:r})=>e.createElement("div",{key:t,style:{display:"flex",flexDirection:"column",justifyContent:"center"}},e.createElement(f,{key:t,src:n,style:{borderRadius:"50%",width:"100%",maxWidth:"200px",height:"auto",margin:"0 auto",marginBottom:"var(--space-l)"}}),e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"var(--space-s)",alignItems:"center",marginBottom:"var(--space-l)"}},e.createElement(i,{as:"h1",variant:"primary"},t),e.createElement(i,{as:"h2",variant:"lead"},a)),e.createElement(s,{style:{textAlign:"center",maxWidth:"600px",margin:"0 auto"}},r)))),e.createElement(s,{variant:"small",style:{marginBottom:"var(--space-l)",textAlign:"center"}},a.title),e.createElement(o,{layout:"row",justifyContent:"space-between",gap:"m"},a.columns.map(({title:t,logo:a})=>e.createElement("div",{key:t,style:{textAlign:"center"}},e.createElement(y,null,e.createElement(f,{src:a,style:{height:"20px",width:"auto"}}))))))},{id:"hero",surface:"primary",style:{padding:"var(--space-xxl) var(--space-m) var(--space-xl)"},render:({hero:t})=>e.createElement(R,t)},{id:"services",surface:"primary",maxWidth:"large",layout:"row",placeContent:"stretch space-around",gap:"xl",style:{borderBottom:"1px solid var(--separator-primary)",padding:"var(--space-xxl) var(--space-m)"},render:({services:t})=>e.createElement(e.Fragment,null,t.map(({title:t,text:a})=>e.createElement("div",{key:t,style:{textAlign:"center"}},e.createElement(i,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},t),e.createElement(s,{style:{maxWidth:"600px"}},a))))},{id:"projects",surface:"primary",style:{padding:"var(--space-xxl) var(--space-m) var(--space-xl)",minHeight:"60vh"},render:({projects:t})=>e.createElement(e.Fragment,null,e.createElement(E,{title:t.title,titleVariant:"display",text:t.text,style:{textAlign:"left",maxWidth:"600px",marginBottom:"var(--space-xl)"}}),t.categories.map(({title:t,text:a,links:n})=>e.createElement("div",{style:{marginBottom:"var(--space-xl)"}},e.createElement(i,{title:t,variant:"tertiary",style:{marginBottom:"var(--space-l)"}},t),e.createElement(s,null,a),e.createElement(b,null,n.map(t=>e.createElement(b,{horizontal:!0,style:{marginBottom:"var(--space-m)"}},t.map(t=>e.createElement(l,w({},t,{variant:"link",target:"_blank",style:{marginRight:"var(--space-m)"}})))))))))},{id:"contact",surface:"accent",style:{padding:"var(--space-xxl) var(--space-m)",borderBottom:"1px solid var(--separator-primary)"},render:({contact:t})=>e.createElement(K,{columns:t.columns})}];export{A as CardLayout,O as CardSidebar,T as CardTabs,M as LandingPage2020,W as MarkdownViewer,V as Resume,S as StandardLayout,N as ThemeDisplay,D as useResume};

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@ossy/design-system-extras",
+  "repository": "github:ossy-se/packages",
+  "description": "Ossy's React Design System Extra Components",
+  "version": "0.0.1-beta",
+  "source": "src/index.js",
+  "type": "module",
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
+  "author": "Ossy <yourfriends@ossy.se> (https://ossy.se)",
+  "license": "MIT License",
+  "scripts": {
+    "start": "storybook dev -p 6006",
+    "build": "rollup -c rollup.config.js",
+    "build:addons2": "rollup -c ./src/addons/rollup.config.js",
+    "build:addons": "babel --no-babelrc babelrc.addons.js ./src/addons --out-dir ./storybook",
+    "test": "",
+    "build:storybook": "storybook build",
+    "lint": "eslint '**/*.(js|jsx)'",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.21.5",
+    "@babel/core": "^7.14.5",
+    "@babel/eslint-parser": "^7.15.8",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.24.1",
+    "@rollup/plugin-babel": "6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.5",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "0.4.4",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@types/react": "18.2.79",
+    "babel-loader": "^9.1.3",
+    "prop-types": "^15.8.1",
+    "rollup": "^4.24.3",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss-modules": "^2.1.1",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "storybook": "^8.6.12",
+    "tslib": "^2.6.2"
+  },
+  "dependencies": {
+    "@ossy/themes": "^0.0.12-alpha",
+    "moment": "^2.29.4"
+  },
+  "peerDependencies": {
+    "@ossy/design-system": "^0",
+    "react": "^19",
+    "react-dom": "^19",
+    "react-markdown": "^9.0.3",
+    "react-syntax-highlighter": "^5.8.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,35 @@
+import babel from '@rollup/plugin-babel'
+import { nodeResolve as resolveDependencies } from '@rollup/plugin-node-resolve'
+import resolveCommonJsDependencies from '@rollup/plugin-commonjs'
+import removeOwnPeerDependencies from 'rollup-plugin-peer-deps-external'
+import minifyJS from '@rollup/plugin-terser'
+// import typescript from '@rollup/plugin-typescript'
+import preserveDirectives from "rollup-plugin-preserve-directives"
+
+export default [
+  {
+    input: 'src/index.js',
+    output: [
+      {
+        dir: 'build/cjs',
+        format: 'cjs'
+      },
+      {
+        dir: 'build/esm',
+        format: 'esm'
+      }
+    ],
+    plugins: [
+      removeOwnPeerDependencies(),
+      resolveCommonJsDependencies(),
+      resolveDependencies(),
+      babel({
+        exclude: ['**/node_modules/**/*'],
+        presets: ['@babel/preset-react']
+      }),
+      preserveDirectives(),
+      minifyJS(),
+      // typescript({ tsconfig: "./tsconfig.json" }),
+    ]
+  },
+]

package/src/index.js

@@ -0,0 +1,3 @@
+export * from './markdown-viewer'
+export * from './router-layouts'
+export * from './templates'

package/src/markdown-viewer/MarkdownViewer.jsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import atomOneLight from './styles/atom-one-light'
+import { View, Button, Title, Text } from "@ossy/design-system"
+
+const defaultComponents = {
+  'h1': ({ node, ...props }) => <Title id={asId(props.children)} as="h1" variant="primary" {...props} style={{ marginBottom: 'var(--space-l)' }} />,
+  'h2': ({ node, ...props }) => <Title id={asId(props.children)} as="h2" variant="secondary" {...props} style={{ marginBottom: 'var(--space-m)', marginTop: 'var(--space-l)' }} />,
+  'h3': ({ node, ...props }) => <Title id={asId(props.children)} as="h3" variant="tertiary" {...props} style={{ marginBottom: 'var(--space-m)' }} />,
+  'h4': ({ node, ...props }) => <Title id={asId(props.children)} as="h4" variant="tertiary" {...props} style={{ marginBottom: 'var(--space-m)' }} />,
+  'h5': ({ node, ...props }) => <Title id={asId(props.children)} as="h5" variant="tertiary" {...props} style={{ marginBottom: 'var(--space-m)' }} />,
+  'p': ({ node, ...props }) => <Text {...props} style={{ marginBottom: 'var(--space-m)' }} />,
+  'ul': ({ node, ...props }) => <ul {...props} style={{ listStyle: 'inside', paddingLeft: 'var(--space-l)' }} />,
+  'li': ({ node, ...props }) => <Text as="li" {...props} style={{ marginBottom: 'var(--space-m)' }}/>,
+  'a': ({ node, ...props }) => <Button as={props.href ? 'a' : 'button'} {...props} variant="link" />,
+  code: ({ node, className, ...props }) => {
+    const [_, language] = /language-(\w+)/.exec(className || '') || []
+    const inline = !language
+
+    if (inline) {
+      return (
+        <View inset="xs" surface="secondary" roundness="s" style={{ display: 'inline-block' }} {...props} >
+          <SyntaxHighlighter
+            style={{
+              display: 'inline',
+              ...atomOneLight,
+              "hljs": {
+                display: 'inline',
+                "color": "#383a42",
+                "background": "transparent"
+            }}}
+            language={language}
+            {...props}
+          />
+        </View>
+      )
+    }
+
+    return (
+      <View inset="m" surface="secondary" roundness="m" data-component="MarkdownViewer">
+      <style href="@ossy/design-system-extras/markdown-viewer/MarkdownViewer" precedence="high">
+      {`
+        [data-component="MarkdownViewer"] {
+          margin: var(--space-s) 0;
+        }
+
+        [data-component="MarkdownViewer"] pre {
+          margin: 0;
+        }
+      `}
+        </style>
+        <SyntaxHighlighter
+          style={{
+            ...atomOneLight,
+            "hljs": {
+              "display": "block",
+              "overflowX": "auto",
+              "color": "#383a42",
+              "background": "transparent"
+          }}}
+          language={language}
+          {...props}
+        />
+      </View>
+    )
+
+  }
+}
+
+function asId(str) {
+  if (!str) return ''
+  return str.toLowerCase().replace(/\s+/g, '-');
+}
+
+export const MarkdownViewer = ({
+  markdown,
+  children,
+  components = {},
+  ...props
+}) =>
+  <ReactMarkdown
+    children={markdown || children}
+    components={{ ...defaultComponents, ...components }}
+    {...props}
+  />

package/src/markdown-viewer/MarkdownViewer.stories.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { MarkdownViewer } from './MarkdownViewer.jsx'
+
+export default {
+  title: 'Design System Extras/MarkdownViewer',
+  component: MarkdownViewer,
+}
+
+const Story = props => <MarkdownViewer {...props} />
+
+export const Default = Story.bind({})
+Default.args = {
+  children: `
+    # Hello, this is an md doc
+
+    Let's get started with some documentation
+
+    ## Getting started
+
+    \`\`\`javascript
+    npm install @ossy/cms-client-react
+    \`\`\`
+
+    \`\`\`javascript
+    import { WorkspaceProvider } from '@ossy/cms-client-react'
+
+    export const App = () => (
+      <WorkspaceProvider workspaceId={<yourWorkspaceId>}>
+        {//...}
+      </WorkspaceProvider>
+    )
+    \`\`\`
+  `
+}

package/src/markdown-viewer/index.js

@@ -0,0 +1 @@
+export * from './MarkdownViewer.jsx'

package/src/markdown-viewer/styles/atom-one-light.js

@@ -0,0 +1,114 @@
+export default {
+    "hljs": {
+        "display": "block",
+        "overflowX": "auto",
+        "padding": "0.5em",
+        "color": "#383a42",
+        "background": "#fafafa"
+    },
+    "hljs-comment": {
+        "color": "#a0a1a7",
+        "fontStyle": "italic"
+    },
+    "hljs-quote": {
+        "color": "#a0a1a7",
+        "fontStyle": "italic"
+    },
+    "hljs-doctag": {
+        "color": "#a626a4"
+    },
+    "hljs-keyword": {
+        "color": "#a626a4"
+    },
+    "hljs-formula": {
+        "color": "#a626a4"
+    },
+    "hljs-section": {
+        "color": "#e45649"
+    },
+    "hljs-name": {
+        "color": "#e45649"
+    },
+    "hljs-selector-tag": {
+        "color": "#e45649"
+    },
+    "hljs-deletion": {
+        "color": "#e45649"
+    },
+    "hljs-subst": {
+        "color": "#e45649"
+    },
+    "hljs-literal": {
+        "color": "#0184bb"
+    },
+    "hljs-string": {
+        "color": "#50a14f"
+    },
+    "hljs-regexp": {
+        "color": "#50a14f"
+    },
+    "hljs-addition": {
+        "color": "#50a14f"
+    },
+    "hljs-attribute": {
+        "color": "#50a14f"
+    },
+    "hljs-meta-string": {
+        "color": "#50a14f"
+    },
+    "hljs-built_in": {
+        "color": "#c18401"
+    },
+    "hljs-class .hljs-title": {
+        "color": "#c18401"
+    },
+    "hljs-attr": {
+        "color": "#986801"
+    },
+    "hljs-variable": {
+        "color": "#986801"
+    },
+    "hljs-template-variable": {
+        "color": "#986801"
+    },
+    "hljs-type": {
+        "color": "#986801"
+    },
+    "hljs-selector-class": {
+        "color": "#986801"
+    },
+    "hljs-selector-attr": {
+        "color": "#986801"
+    },
+    "hljs-selector-pseudo": {
+        "color": "#986801"
+    },
+    "hljs-number": {
+        "color": "#986801"
+    },
+    "hljs-symbol": {
+        "color": "#4078f2"
+    },
+    "hljs-bullet": {
+        "color": "#4078f2"
+    },
+    "hljs-link": {
+        "color": "#4078f2",
+        "textDecoration": "underline"
+    },
+    "hljs-meta": {
+        "color": "#4078f2"
+    },
+    "hljs-selector-id": {
+        "color": "#4078f2"
+    },
+    "hljs-title": {
+        "color": "#4078f2"
+    },
+    "hljs-emphasis": {
+        "fontStyle": "italic"
+    },
+    "hljs-strong": {
+        "fontWeight": "bold"
+    }
+}

package/src/router-layouts/Footer.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Title, Button, Text, View } from "@ossy/design-system"
+
+export const Footer = ({
+  columns = [],
+}) => {
+  return (
+    <View layout="row" placeContent="normal space-between" gap="xl">
+      {
+        columns.map(column => (
+          <div style={{ maxWidth: `var(--max-width-${column.maxWidth}, 100%)` }}>
+            <Title as="h3" variant="tertiary" style={{ marginBottom: 'var(--space-m)' }}>
+              {column.title}
+            </Title>
+            {
+              !!column.text && <Text>{column.text}</Text>
+            }
+            {
+              !!column.list && (
+                <ul key={column.title} style={{ padding: '0' }}>
+                  {
+                    column.list.map(({ label, ...anchorProps }) => (
+                      <li key={label} style={{ listStyle: 'none' }}>
+                        <Button variant="link" {...anchorProps} style={{ marginBottom: 'var(--space-m)' }}>
+                          {label}
+                        </Button>
+                      </li>
+                    ))
+                  }
+                </ul>
+              )
+            }
+          </div>
+        ))
+      }
+    </View>
+  )
+}