@ossy/design-system 0.0.1-alpha → 0.0.3-alpha

package/src/view/View.stories.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { View } from './View.jsx'
+
+export default {
+  title: 'Design System/View',
+  component: View,
+  tags: ['autodocs']
+}
+
+const containerStyles = {
+   background: 'hsl(188deg 90% 98%)',
+   width: '100%',
+   padding: '16px',
+   borderRadius: '2px',
+   color: 'hsl(188deg 61% 20%)',
+   border: '1px solid hsl(188deg 61% 40%)'
+}
+
+const Story = (args) => (
+  <View {...args} style={{ height: '100%', gap: '16px' }}>
+    <div slot="header" style={containerStyles}>Header</div>
+    <div slot="sidebar-primary" style={containerStyles}>Sidebar primary</div>
+    <div slot="sidebar-secondary" style={containerStyles}>Sidebar secondary</div>
+    <div slot="content" style={containerStyles}>
+     <div style={{ height: '700px' }}>
+      Content
+      </div> 
+    </div>
+    <div slot="footer" style={containerStyles}>Footer</div>
+  </View>
+)
+
+const SelectableStory = ({ surface, ...args }) => (
+  <View surface={surface} style={{ padding: 'var(--space-m)' }}>
+    <View {...args} style={{ height: '80px', width: '80px' }} />
+  </View>
+  
+)
+
+export const Selectable = SelectableStory.bind({})
+Selectable.args = { layout: 'row', surface: "secondary", selectable: true }
+
+export const Surfaces = Story.bind({})
+Surfaces.args = { layout: 'page' }
+
+export const Page = Story.bind({})
+Page.args = { layout: 'page' }
+
+export const Sidebar = Story.bind({});
+Sidebar.args = {
+  layout: 'sidebar'
+}
+
+export const OffCenter = Story.bind({})
+OffCenter.args = { layout: 'off-center' }
+
+export const OffCenterSmall = Story.bind({})
+OffCenterSmall.args = { layout: 'off-center-s' }
+
+export const OffCenterMedium = Story.bind({})
+OffCenterMedium.args = { layout: 'off-center-m' }

package/src/view/index.js

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

package/index.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../Resume-220e98c1.js"),t=require("react");require("react-dom");var r=require("react-router-dom");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("react-markdown"),require("react-syntax-highlighter"),require("react-syntax-highlighter/dist/esm/styles/hljs");var s=a(t);const o=({as:r="div",variant:a,...o})=>{const n=t.useMemo((()=>e.css_1({"--max-width":`var(--content-${a}-max-width, var(--content-max-width, 100%))`,marginLeft:"auto",marginRight:"auto",width:"100%",maxWidth:"var(--max-width)"})),[a]);return s.default.createElement(r,e._extends({},n,o))},n=({surface:t,maxWidth:r,surfaceAs:a="section",maxWidthAs:n="div",children:l,...u})=>s.default.createElement(e.Surface,e._extends({variant:t,as:a},u),s.default.createElement(o,{variant:r,as:n,style:{height:"100%"}},l)),l=(e,r)=>{const a=t.useRef(e);t.useEffect((()=>{a.current=e}),[e]),t.useEffect((()=>{if(null===r)return;const e=setTimeout((()=>a.current()),r);return()=>clearTimeout(e)}),[r])},u={borderBottom:"5px solid hsl(0, 89%, 43%)",backgroundColor:"hsl(0, 0%, 97%)",padding:"16px",borderRadius:"8px",fontFamily:"sans-serif",boxShadow:"3px 0 10px hsla(0, 0%, 85%, .75)"},i=t.createContext({}),c="SET";exports.Breadcrumbs=e.Breadcrumbs,exports.Button=e.Button,exports.Card=e.Card,exports.Contact=e.Contact,exports.ContextMenu=e.ContextMenu,exports.DropZone=e.DropZone,exports.Dropdown=e.Dropdown,exports.Footer=e.Footer,exports.Guide=e.Guide,exports.Header=e.Header,exports.Icon=e.Icon,exports.Image=e.Image,exports.Input=e.Input,exports.Input2=e.Input2,exports.InputDisabled=e.InputDisabled,exports.InputTitle=e.InputTitle,exports.Layout=e.Layout,exports.MarkdownViewer=e.MarkdownViewer,exports.Overlay=e.Overlay,exports.ProfileCard=e.ProfileCard,exports.Resume=e.Resume,exports.ResumeExperience=e.ResumeExperience,exports.Select=e.Select,exports.Stack=e.Stack,exports.StackItem=e.StackItem,exports.Surface=e.Surface,exports.SurfaceItem=e.SurfaceItem,exports.Switch=e.Switch,exports.Table=e.Table,exports.Tabs=e.Tabs,exports.Tag=e.Tag,exports.Tags=e.Tags,exports.Text=e.Text,exports.Textarea=e.Textarea,exports.Theme=e.Theme,exports.Title=e.Title,exports.addCssProperties=e.addCssProperties,exports.asDragable=e.asDragable,exports.asDropZone=e.asDropZone,exports.icons=e.icons,exports.removeCssProperties=e.removeCssProperties,exports.useClipboardCopy=e.useClipboardCopy,exports.useResume=e.useResume,exports.useTheme=e.useTheme,exports.Alert=({children:t,style:r={},as:a="div",...o})=>s.default.createElement(a,e._extends({},o,{style:{...u,...r}}),t),exports.CacheContext=i,exports.CardSidebar=({surface:t="primary",navigation:a=[]})=>s.default.createElement(e.Layout,{variant:"PerceivedMiddle",style:{height:"100%",background:`var(--surface-${t})`}},s.default.createElement(e.Card,{variant:"cover",slot:"content",style:{width:"100vw",maxWidth:"700px",borderBottom:"4px solid var(--separator-accent)",display:"flex"}},s.default.createElement("div",{style:{display:"flex",gap:"var(--space-s)",padding:"var(--space-s)",flexDirection:"column",width:"200px",borderRight:"1px solid var(--separator-primary)"}},a.map((t=>s.default.createElement(e.Button,e._extends({},t,{style:{justifyContent:"flex-start"}}))))),s.default.createElement("div",{style:{flexGrow:"1",padding:"var(--space-m)"}},s.default.createElement(r.Outlet,null)))),exports.CardTabs=({tabs:t=[]})=>s.default.createElement(e.Layout,{variant:"PerceivedMiddle",style:{height:"100%",background:"var(--surface-linear-gradient)"}},s.default.createElement(e.Card,{variant:"cover",slot:"content",style:{width:"100vw",maxWidth:"600px",borderBottom:"4px solid var(--separator-accent)"}},s.default.createElement(e.Tabs,{tabs:t,style:{height:"auto",borderBottom:"1px solid var(--separator-primary)"}}),s.default.createElement(r.Outlet,null))),exports.ColumnGallery=({columnMinWidth:e=250,minNumberOfColumns:r=2,items:a=[],...o})=>{const n=t.useRef();t.useRef();const[l,u]=t.useState(0),[i,c]=t.useState([]),[d,p]=t.useState(0);return t.useEffect((()=>{if(!a.length)return;let t=Math.floor(l/e);t=t<r?r:t;Math.abs(t-d)>0&&(c(((e,t)=>{const r=e.reduce(((e,t)=>e+t.height),0),a=Math.floor(r/t),s=e.slice(0),o=[];if(1===t)return[s];for(;t>0;){let e=0,r=1;s.forEach(((t,s)=>{e<a&&(e+=t.height,r=s)})),o.push({columnHeight:e,columnItems:s.splice(0,r)}),t-=1}return s.forEach((e=>{o.sort(((e,t)=>e.columnHeight-t.columnHeight)),o[0].columnHeight+=e.height,o[0].columnItems.push(e)})),o.map((e=>e.columnItems))})(a,t)),p(t))}),[l,a,e,r,d]),t.useEffect((()=>{const e=()=>{u(n.current.offsetWidth)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),s.default.createElement("div",{ref:n,className:"gallery-container"},s.default.createElement("div",{id:"oskw-gallery",className:"oskw-gallery"},0!==i.length&&s.default.createElement("div",{className:"oskw-card-group"},i.map(((e,t)=>s.default.createElement("div",{className:"oskw-column",key:t},e.map((e=>s.default.createElement(ImageCard,{key:e.url,title:e.title,src:e.url,link:e.link,dateTaken:e.dateTaken})))))))))},exports.ContentSection=n,exports.DelayedRender=({delay:e=1e3,children:r})=>{const[a,o]=t.useState(!1);return l((()=>{o(!0)}),e),a?r:s.default.createElement(s.default.Fragment,null)},exports.MaxWidth=o,exports.PageBuilder=({layout:t,sections:r=[],...a})=>s.default.createElement(e.Layout,{variant:t},r.map((({render:t,...r})=>s.default.createElement(n,e._extends({},r,{key:r.id}),t(a))))),exports.createCache=({get:r,set:a})=>o=>{const[n,l]=t.useReducer((({set:e,get:t})=>(r={},a)=>{if(a.type===c){let s;if("function"==typeof a.data){const e=t(a.cachePath,r);s=a.data(e)}else s=a.data;return e(a.cachePath,s,r)}return{...r}})({set:a,get:r}),{}),u=t.useCallback((e=>t=>{l({type:c,cachePath:e,data:t})}),[l]),d=t.useCallback((e=>r(e,n)),[n,r]);return s.default.createElement(i.Provider,e._extends({value:{get:d,set:u}},o))},exports.useCache=(e,r)=>{const{get:a,set:s}=t.useContext(i);return{data:(()=>{const t=a(e);return null==t?r:t})(),set:s(e)}},exports.useDocumentTitle=e=>{t.useEffect((()=>{document.title=e}),[e])},exports.useInputValue=(e="")=>{const[r,a]=t.useState(e);return[r,e=>{"string"==typeof e?a(e):event&&event.target&&event.target.value?a(event.target.value):a("")},()=>a(e)]},exports.useTimeout=l;

package/index.esm.js

@@ -1 +0,0 @@
-import{c,_ as g,S as W,L as Z,C as $,B as V,a as _}from"../Resume-23a55554.js";export{y as Breadcrumbs,B as Button,C as Card,r as Contact,b as ContextMenu,v as DropZone,D as Dropdown,F as Footer,G as Guide,H as Header,I as Icon,d as Image,e as Input,j as Input2,f as InputDisabled,h as InputTitle,L as Layout,M as MarkdownViewer,O as Overlay,P as ProfileCard,R as Resume,w as ResumeExperience,l as Select,m as Stack,n as StackItem,S as Surface,o as SurfaceItem,J as Switch,x as Table,a as Tabs,z as Tag,A as Tags,p as Text,k as Textarea,T as Theme,q as Title,K as addCssProperties,s as asDragable,t as asDropZone,i as icons,N as removeCssProperties,u as useClipboardCopy,E as useResume,Q as useTheme}from"../Resume-23a55554.js";import U,{useMemo as X,useEffect as Y,useState as ee,useRef as te,createContext as ae,useReducer as re,useCallback as se,useContext as ne}from"react";import"react-dom";import{Outlet as oe}from"react-router-dom";import"react-markdown";import"react-syntax-highlighter";import"react-syntax-highlighter/dist/esm/styles/hljs";const ie=({as:e="div",variant:t,...a})=>{const r=X((()=>c({"--max-width":`var(--content-${t}-max-width, var(--content-max-width, 100%))`,marginLeft:"auto",marginRight:"auto",width:"100%",maxWidth:"var(--max-width)"})),[t]);return U.createElement(e,g({},r,a))},le=({surface:e,maxWidth:t,surfaceAs:a="section",maxWidthAs:r="div",children:s,...n})=>U.createElement(W,g({variant:e,as:a},n),U.createElement(ie,{variant:t,as:r,style:{height:"100%"}},s)),ce=e=>{Y((()=>{document.title=e}),[e])},me=(e="")=>{const[t,a]=ee(e);return[t,e=>{"string"==typeof e?a(e):event&&event.target&&event.target.value?a(event.target.value):a("")},()=>a(e)]},de=(e,t)=>{const a=te(e);Y((()=>{a.current=e}),[e]),Y((()=>{if(null===t)return;const e=setTimeout((()=>a.current()),t);return()=>clearTimeout(e)}),[t])},ue={borderBottom:"5px solid hsl(0, 89%, 43%)",backgroundColor:"hsl(0, 0%, 97%)",padding:"16px",borderRadius:"8px",fontFamily:"sans-serif",boxShadow:"3px 0 10px hsla(0, 0%, 85%, .75)"},he=({children:e,style:t={},as:a="div",...r})=>U.createElement(a,g({},r,{style:{...ue,...t}}),e),pe=({columnMinWidth:e=250,minNumberOfColumns:t=2,items:a=[],...r})=>{const s=te();te();const[n,o]=ee(0),[i,l]=ee([]),[c,m]=ee(0);return Y((()=>{if(!a.length)return;let r=Math.floor(n/e);r=r<t?t:r;Math.abs(r-c)>0&&(l(((e,t)=>{const a=e.reduce(((e,t)=>e+t.height),0),r=Math.floor(a/t),s=e.slice(0),n=[];if(1===t)return[s];for(;t>0;){let e=0,a=1;s.forEach(((t,s)=>{e<r&&(e+=t.height,a=s)})),n.push({columnHeight:e,columnItems:s.splice(0,a)}),t-=1}return s.forEach((e=>{n.sort(((e,t)=>e.columnHeight-t.columnHeight)),n[0].columnHeight+=e.height,n[0].columnItems.push(e)})),n.map((e=>e.columnItems))})(a,r)),m(r))}),[n,a,e,t,c]),Y((()=>{const e=()=>{o(s.current.offsetWidth)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),U.createElement("div",{ref:s,className:"gallery-container"},U.createElement("div",{id:"oskw-gallery",className:"oskw-gallery"},0!==i.length&&U.createElement("div",{className:"oskw-card-group"},i.map(((e,t)=>U.createElement("div",{className:"oskw-column",key:t},e.map((e=>U.createElement(ImageCard,{key:e.url,title:e.title,src:e.url,link:e.link,dateTaken:e.dateTaken})))))))))},ve=ae({}),ge="SET",fe=({get:e,set:t})=>a=>{const[r,s]=re((({set:e,get:t})=>(a={},r)=>{if(r.type===ge){let s;if("function"==typeof r.data){const e=t(r.cachePath,a);s=r.data(e)}else s=r.data;return e(r.cachePath,s,a)}return{...a}})({set:t,get:e}),{}),n=se((e=>t=>{s({type:ge,cachePath:e,data:t})}),[s]),o=se((t=>e(t,r)),[r,e]);return U.createElement(ve.Provider,g({value:{get:o,set:n}},a))},ye=(e,t)=>{const{get:a,set:r}=ne(ve);return{data:(()=>{const r=a(e);return null==r?t:r})(),set:r(e)}},xe=({delay:e=1e3,children:t})=>{const[a,r]=ee(!1);return de((()=>{r(!0)}),e),a?t:U.createElement(U.Fragment,null)},Ee=({layout:e,sections:t=[],...a})=>U.createElement(Z,{variant:e},t.map((({render:e,...t})=>U.createElement(le,g({},t,{key:t.id}),e(a))))),we=({surface:e="primary",navigation:t=[]})=>U.createElement(Z,{variant:"PerceivedMiddle",style:{height:"100%",background:`var(--surface-${e})`}},U.createElement($,{variant:"cover",slot:"content",style:{width:"100vw",maxWidth:"700px",borderBottom:"4px solid var(--separator-accent)",display:"flex"}},U.createElement("div",{style:{display:"flex",gap:"var(--space-s)",padding:"var(--space-s)",flexDirection:"column",width:"200px",borderRight:"1px solid var(--separator-primary)"}},t.map((e=>U.createElement(V,g({},e,{style:{justifyContent:"flex-start"}}))))),U.createElement("div",{style:{flexGrow:"1",padding:"var(--space-m)"}},U.createElement(oe,null)))),be=({tabs:e=[]})=>U.createElement(Z,{variant:"PerceivedMiddle",style:{height:"100%",background:"var(--surface-linear-gradient)"}},U.createElement($,{variant:"cover",slot:"content",style:{width:"100vw",maxWidth:"600px",borderBottom:"4px solid var(--separator-accent)"}},U.createElement(_,{tabs:e,style:{height:"auto",borderBottom:"1px solid var(--separator-primary)"}}),U.createElement(oe,null)));export{he as Alert,ve as CacheContext,we as CardSidebar,be as CardTabs,pe as ColumnGallery,le as ContentSection,xe as DelayedRender,ie as MaxWidth,Ee as PageBuilder,fe as createCache,ye as useCache,ce as useDocumentTitle,me as useInputValue,de as useTimeout};