@saasquatch/stencilbook - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1-2

LICENSE

+MIT License
+
+Copyright (c) 2023 ReferralSaaSquatch.com, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

tsconfig.json

+{
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "h"
+  }
+}

CHANGELOG.md

@@ -8,2 +8,16 @@ # Changelog
 
+## [1.1.0] - 2023-06-27
+
+### Changed
+
+- Hot reload now keeps the selected story in view
+- Added URL param that represented the current selected story key
+- Removed bottom right layout/screen width options
+
+## [1.0.1] - 2023-04-20
+
+### Changed
+
+- Updated license copyright to be in line with SaaSquatch open-source policy.
+
 ## [1.0.0] - 2021-05-26
@@ -15,3 +29,4 @@
 
-[unreleased]: https://github.com/saasquatch/program-tools/compare/stencilbook@1.0.0...HEAD
+[unreleased]: https://github.com/saasquatch/program-tools/compare/stencilbook@1.0.1...HEAD
+[1.0.1]: https://github.com/saasquatch/program-tools/releases/tag/stencilbook@1.0.1
 [1.0.0]: https://github.com/saasquatch/program-tools/releases/tag/stencilbook@1.0.0

dist/index.js

@@ -1,2 +0,2 @@
-var n=require("@stencil/core"),t=require("@saasquatch/universal-hooks"),e=require("lodash.startcase"),r=require("@emotion/css");function o(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var i,s=o(e);function a(){return(a=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r])}return n}).apply(this,arguments)}function l(n,t){return t||(t=n.slice(0)),n.raw=t,n}var u,c,p=r.css(i||(i=l(['\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: "Arial", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n'])));function d(n,t){var e,r=t.story.title.split("/"),o=r[1]?r[0]:"_";return a({},n,((e={})[o]=[].concat(n[o]||[],[{story:a({},t.story,{title:r[1]||r[0]}),subs:t.subs}]).sort(function(n,t){return n.story.title.localeCompare(t.story.title)}),e))}function f(n){return{story:n.default,subs:function(n,t){if(null==n)return{};var e,r,o={},i=Object.keys(n);for(r=0;r<i.length;r++)t.indexOf(e=i[r])>=0||(o[e]=n[e]);return o}(n,["default"])}}exports.useStencilbook=function(e,o){var i=o.h,b=void 0===i?n.h:i,y=o.title,g=void 0===y?"Stencilbook":y,x=o.homepage,h=void 0===x?b("h3",null,"Select a story!"):x,v=o.addons,m=void 0===v?[]:v,k=t.useMemo(function(){return e.map(f).reduce(d,{_:[]})},e),w=t.useState(void 0),S=w[0],C=w[1],j=null==S?void 0:S.key,z=t.useState("desktop"),O=z[0],q=z[1],T=t.useState(!0),_=T[0],B=T[1],D=t.useState(!1),L=D[0],M=D[1],N=function(){return b("div",{class:"dynamic-display-wrapper"},b("div",{class:"button-wrapper"},b("button",{class:"desktop"===O?"active":"",onClick:function(){return q("desktop")}},"Desktop"),b("button",{class:"tablet"===O?"active":"",onClick:function(){return q("tablet")}},"Tablet"),b("button",{class:"mobile"===O?"active":"",onClick:function(){return q("mobile")}},"Mobile")),b("p",null,"Note: Currently doesn't test breakpoints, use the native tester for now"),b("hr",null),b("button",{class:L?"active":"",onClick:function(){return M(function(n){return!n})}},"Toggle Dark Background"),b("hr",null),b("button",{class:_?"active":"",onClick:function(){return B(function(n){return!n})}},"Toggle Sidebar"))},A="mobile"===O?"375px":"tablet"===O?"768px":"1124px",P=r.css(u||(u=l(["\n    max-width: ",";\n    margin-left: ",";\n  "])),A,_?"250px":"0px"),V=r.css(c||(c=l(["\n    display: none;\n  "])));document.body.style.backgroundColor=L?"#232323":"#fafafa";var X=function(n){var t=n.selected,e=m.reduce(function(n,e){return function(){return b(e,{story:a({},t)},b(n,null))}},null==t?void 0:t.story);return b(e,null)},E=function(){return b("div",{class:"story-book-outer-div"},b("div",{class:"story-div "+(_?"":V)},b("div",{class:"header",onClick:function(){C(void 0)}},b("h2",null,g)),b("ul",{class:"parentStoryList"},Object.keys(k).sort().map(function(n){return b("div",{class:"group-wrapper"},"_"!==n&&b("h4",{class:"group-header"},n),k[n].map(function(t){return b("li",{class:"parentStory"},b("details",{style:{marginBottom:"10px"}},b("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map(function(e){var r=n+"/"+e,o=t.subs[e],i=o.storyName||s.default(e);return b("div",{class:"subStory "+(j===r?"selected":"")},b("a",{onClick:function(){return function(n,t,e,r){C({key:t,story:n,parent:e,label:r})}(o,r,t.story,i)}},i))})))}))}))),b(N,null),b("div",{class:"component "+P},!j&&h,j&&b("div",null,b("h3",null,S.label),b(X,{selected:S}))))};return{class:p,children:b(E,null),View:E,selected:S}};
+var n=require("@stencil/core"),t=require("@saasquatch/universal-hooks"),e=require("lodash.startcase"),o=require("@emotion/css");function r(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var i,a=r(e);function s(){return(s=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o])}return n}).apply(this,arguments)}function l(n,t){return t||(t=n.slice(0)),n.raw=t,n}var u,c,d=o.css(i||(i=l(['\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: "Arial", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n'])));function p(n,t){var e,o=t.story.title.split("/"),r=o[1]?o[0]:"_";return s({},n,((e={})[r]=[].concat(n[r]||[],[{story:s({},t.story,{title:o[1]||o[0]}),subs:t.subs}]).sort(function(n,t){return n.story.title.localeCompare(t.story.title)}),e))}function f(n){return{story:n.default,subs:function(n,t){if(null==n)return{};var e,o,r={},i=Object.keys(n);for(o=0;o<i.length;o++)t.indexOf(e=i[o])>=0||(r[e]=n[e]);return r}(n,["default"])}}exports.useStencilbook=function(e,r){var i=r.h,y=void 0===i?n.h:i,b=r.title,g=void 0===b?"Stencilbook":b,x=r.homepage,v=void 0===x?y("h3",null,"Select a story!"):x,h=r.addons,m=void 0===h?[]:h,k=t.useMemo(function(){return e.map(f).reduce(p,{_:[]})},e),w=decodeURIComponent(window.location.hash).replace("#",""),S=t.useState(D(w)),C=S[0],j=S[1],z=null==C?void 0:C.key,O=t.useState("desktop")[0],q=t.useState(!0),I=q[0],R=q[1],U=t.useState(!1),_=U[0],B=U[1];function D(n){var t;if(n){var e=decodeURIComponent(n).split("-"),o=e[1],r=e[2],i=null==(t=k[e[0]])?void 0:t.find(function(n){return n.story.title===o}),a=i.subs[r];return{key:n,story:a,parent:null==i?void 0:i.story,label:null==a?void 0:a.name}}}var L=function(){return y("div",{class:"dynamic-display-wrapper"},y("button",{class:_?"active":"",onClick:function(){return B(function(n){return!n})}},"Toggle Dark Background"),y("button",{class:I?"active":"",onClick:function(){return R(function(n){return!n})}},"Toggle Sidebar"))},T="mobile"===O?"375px":"tablet"===O?"768px":"1124px",A=o.css(u||(u=l(["\n    max-width: ",";\n    margin-left: ",";\n  "])),T,I?"250px":"0px"),M=o.css(c||(c=l(["\n    display: none;\n  "])));document.body.style.backgroundColor=_?"#232323":"#fafafa";var N=function(n){var t=n.selected,e=m.reduce(function(n,e){return function(){return y(e,{story:s({},t)},y(n,null))}},null==t?void 0:t.story);return y(e,null)},P=function(){return y("div",{class:"story-book-outer-div"},y("div",{class:"story-div "+(I?"":M)},y("div",{class:"header",onClick:function(){j(void 0)}},y("h2",null,g)),y("ul",{class:"parentStoryList"},Object.keys(k).sort().map(function(n){return y("div",{class:"group-wrapper"},"_"!==n&&y("h4",{class:"group-header"},n),k[n].map(function(e){var o=t.useState(!1),r=o[0],i=o[1];return y("li",{class:"parentStory"},y("details",{style:{marginBottom:"10px"},open:r||(null==z?void 0:z.includes(n+"-"+e.story.title)),onClick:function(n){n.preventDefault(),i(!r)}},y("summary",{style:{outline:"none"}},e.story.title),e.subs&&Object.keys(e.subs).map(function(t){var o=n+"-"+e.story.title+"-"+t,r=e.subs[t].storyName||a.default(t);return y("div",{class:"subStory "+(z===o?"selected":"")},y("a",{onClick:function(){return function(n){window.location.hash=encodeURIComponent(n),j(D(n))}(o)}},r))})))}))}))),y(L,null),y("div",{class:"component "+A},!z&&v,z&&y("div",null,y("h3",null,C.label),y(N,{selected:C}))))};return{class:d,children:y(P,null),View:P,selected:C}};
 //# sourceMappingURL=index.js.map

dist/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../src/stencil-storybook.styles.ts","../src/organiseStories.tsx","../src/stencil-storybook.tsx"],"sourcesContent":["// Emotion doesn't natively support named exports with Rollup\r\nimport { css } from \"@emotion/css\";\r\n\r\nexport const Style = css`\r\n  width: 100vw;\r\n  height: 100vh;\r\n\r\n  .story-book-outer-div {\r\n    .story-div {\r\n      font-family: \"Arial\", sans-serif;\r\n      font-size: 12px;\r\n    }\r\n    padding-bottom: 500px;\r\n  }\r\n\r\n  .story-div {\r\n    position: fixed;\r\n    box-sizing: border-box;\r\n    top: 0;\r\n    width: 250px;\r\n    height: 100vh;\r\n    z-index: 999;\r\n    overflow-y: scroll;\r\n    background: white;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .header {\r\n    padding: 24px 0 16px 16px;\r\n    margin-bottom: 24px;\r\n    color: white;\r\n    background: #333;\r\n    cursor: pointer;\r\n\r\n    h2 {\r\n      letter-spacing: 3px;\r\n      font-weight: 400;\r\n    }\r\n  }\r\n\r\n  .parentStoryList {\r\n    list-style: none;\r\n    padding-left: 16px;\r\n\r\n    summary {\r\n      margin-bottom: 4px;\r\n    }\r\n  }\r\n  .parentStory {\r\n    cursor: pointer;\r\n  }\r\n  .parentStory.selected {\r\n    font-weight: bold;\r\n  }\r\n\r\n  .subStory {\r\n    font-size: 12px;\r\n    cursor: pointer;\r\n    line-height: 1.5em;\r\n    margin-top: 4px;\r\n\r\n    a {\r\n      display: block;\r\n      padding: 4px 4px 4px 16px;\r\n    }\r\n  }\r\n  .subStory:hover {\r\n    background-color: #eee;\r\n  }\r\n  .subStory.selected {\r\n    background-color: lightgreen;\r\n  }\r\n\r\n  .component {\r\n    padding: 24px 16px;\r\n  }\r\n\r\n  h4.group-header {\r\n    margin: 8px 0;\r\n    text-transform: uppercase;\r\n    font-weight: 600;\r\n    font-size: 14px;\r\n    color: #575757;\r\n  }\r\n\r\n  .group-wrapper {\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .dynamic-display-wrapper {\r\n    position: fixed;\r\n    display: flex;\r\n    flex-direction: column;\r\n    bottom: 0;\r\n    left: 100%;\r\n    padding: 16px;\r\n    z-index: 1000;\r\n    background: white;\r\n    transform: translateX(-100%);\r\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n\r\n    & > :not(:first-child) {\r\n      margin-top: 12px;\r\n    }\r\n\r\n    p {\r\n      font-size: 12px;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    .button-wrapper {\r\n      display: flex;\r\n\r\n      & > :not(:first-child) {\r\n        margin-left: 12px;\r\n      }\r\n    }\r\n\r\n    & button {\r\n      border: 1px solid #eaeaea;\r\n      background: white;\r\n      border-radius: 4px;\r\n      color: #777;\r\n      padding: 4px 12px;\r\n      justify-content: center;\r\n      align-items: center;\r\n      text-align: center;\r\n\r\n      &.active {\r\n        background: #555;\r\n        border-color: #555;\r\n        color: white;\r\n      }\r\n    }\r\n  }\r\n`;\r\n","import { OrganisedStoryWithSubs, StoryWithSubs } from \".\";\r\n\r\nexport function organiseStories(\r\n  prev: OrganisedStoryWithSubs,\r\n  curr: StoryWithSubs\r\n): OrganisedStoryWithSubs {\r\n  const splitTitle = curr.story.title.split(\"/\");\r\n  const group = splitTitle[1] ? splitTitle[0] : \"_\";\r\n  const title = splitTitle[1] || splitTitle[0];\r\n\r\n  return {\r\n    ...prev,\r\n    [group]: [\r\n      ...(prev[group] || []),\r\n      {\r\n        story: {\r\n          ...curr.story,\r\n          title,\r\n        },\r\n        subs: curr.subs,\r\n      },\r\n    ].sort((a, b) => a.story.title.localeCompare(b.story.title)),\r\n  };\r\n}\r\n","import { h as StencilH, FunctionalComponent, VNode } from \"@stencil/core\";\r\nimport { useState, useMemo } from \"@saasquatch/universal-hooks\";\r\n\r\nimport startCase from \"lodash.startcase\";\r\nimport { Style } from \"./stencil-storybook.styles\";\r\nimport { css } from \"@emotion/css\";\r\nimport { organiseStories } from \"./organiseStories\";\r\nimport {\r\n  StorybookDefaultExport,\r\n  SubStories,\r\n  AddOn,\r\n  OrganisedStoryWithSubs,\r\n  StoryWithSubs,\r\n  Selection,\r\n} from \".\";\r\n\r\nfunction loadStory(imps: any) {\r\n  // TODO: Validate if something doesn't export things in Component Story Format (CSF)\r\n  const { default: defaultStory, ...rest } = imps;\r\n  return {\r\n    story: defaultStory as StorybookDefaultExport,\r\n    subs: rest as SubStories,\r\n  };\r\n}\r\n\r\ntype Layout = \"desktop\" | \"tablet\" | \"mobile\";\r\n\r\nexport type Return = {\r\n  class: string;\r\n  children: VNode;\r\n  View: FunctionalComponent<{}>;\r\n  selected: Selection;\r\n};\r\n\r\nexport function useStencilbook(\r\n  imports: unknown[],\r\n  {\r\n    h = StencilH,\r\n    title = \"Stencilbook\",\r\n    homepage = <h3>Select a story!</h3>,\r\n    addons = [],\r\n  }: {\r\n    h?: typeof StencilH;\r\n    title?: string;\r\n    homepage?: VNode;\r\n    addons?: AddOn[];\r\n  }\r\n): Return {\r\n  const stories: OrganisedStoryWithSubs = useMemo(\r\n    () =>\r\n      imports\r\n        .map(loadStory)\r\n        .reduce(organiseStories, { _: [] as StoryWithSubs[] }),\r\n    imports\r\n  );\r\n\r\n  const [Selected, setSelectedInternal] = useState<Selection>(undefined);\r\n  const selectedKey = Selected?.key;\r\n  const [layout, setLayout] = useState<Layout>(\"desktop\");\r\n  const [showSidebar, setShowSidebar] = useState<boolean>(true);\r\n  const [darkCanvas, setDarkCanvas] = useState<boolean>(false);\r\n  function setSelected(\r\n    story: FunctionalComponent,\r\n    key: string,\r\n    parent: StorybookDefaultExport,\r\n    label: string\r\n  ) {\r\n    setSelectedInternal({\r\n      key,\r\n      story,\r\n      parent,\r\n      label,\r\n    });\r\n  }\r\n  const WidthSelector = () => {\r\n    // Not the best way to display these buttons but don't wanna put too much time\r\n    return (\r\n      <div class=\"dynamic-display-wrapper\">\r\n        <div class=\"button-wrapper\">\r\n          <button\r\n            class={layout === \"desktop\" ? \"active\" : \"\"}\r\n            onClick={() => setLayout(\"desktop\")}\r\n          >\r\n            Desktop\r\n          </button>\r\n          <button\r\n            class={layout === \"tablet\" ? \"active\" : \"\"}\r\n            onClick={() => setLayout(\"tablet\")}\r\n          >\r\n            Tablet\r\n          </button>\r\n          <button\r\n            class={layout === \"mobile\" ? \"active\" : \"\"}\r\n            onClick={() => setLayout(\"mobile\")}\r\n          >\r\n            Mobile\r\n          </button>\r\n        </div>\r\n        <p>\r\n          Note: Currently doesn't test breakpoints, use the native tester for\r\n          now\r\n        </p>\r\n        <hr />\r\n        <button\r\n          class={darkCanvas ? \"active\" : \"\"}\r\n          onClick={() => setDarkCanvas((isDark) => !isDark)}\r\n        >\r\n          Toggle Dark Background\r\n        </button>\r\n        <hr />\r\n        <button\r\n          class={showSidebar ? \"active\" : \"\"}\r\n          onClick={() => setShowSidebar((isshown) => !isshown)}\r\n        >\r\n          Toggle Sidebar\r\n        </button>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  // Mobile/tablet widths are based on avocode designs\r\n  const containerWidth =\r\n    layout === \"mobile\" ? \"375px\" : layout === \"tablet\" ? \"768px\" : \"1124px\";\r\n  const responsiveWidth = css`\r\n    max-width: ${containerWidth};\r\n    margin-left: ${showSidebar ? \"250px\" : \"0px\"};\r\n  `;\r\n\r\n  const hide = css`\r\n    display: none;\r\n  `;\r\n\r\n  if (darkCanvas) {\r\n    document.body.style.backgroundColor = \"#232323\";\r\n  } else {\r\n    document.body.style.backgroundColor = \"#fafafa\";\r\n  }\r\n\r\n  const InnerFn = ({ selected }: { selected: Selection }) => {\r\n    const Component = addons.reduce<FunctionalComponent>((PrevFn, AddOnFn) => {\r\n      return () => (\r\n        <AddOnFn\r\n          story={{\r\n            ...selected,\r\n          }}\r\n        >\r\n          <PrevFn />\r\n        </AddOnFn>\r\n      );\r\n    }, selected?.story);\r\n    return <Component />;\r\n  };\r\n\r\n  const GoHome = () => {\r\n    setSelectedInternal(undefined);\r\n  };\r\n\r\n  const View = () => (\r\n    <div class=\"story-book-outer-div\">\r\n      <div class={`story-div ${!showSidebar ? hide : \"\"}`}>\r\n        <div class=\"header\" onClick={() => GoHome()}>\r\n          <h2>{title}</h2>\r\n        </div>\r\n        <ul class=\"parentStoryList\">\r\n          {Object.keys(stories)\r\n            .sort()\r\n            .map((group) => {\r\n              return (\r\n                <div class=\"group-wrapper\">\r\n                  {group !== \"_\" && <h4 class=\"group-header\">{group}</h4>}\r\n                  {stories[group].map((s) => {\r\n                    return (\r\n                      <li class=\"parentStory\">\r\n                        <details style={{ marginBottom: \"10px\" }}>\r\n                          <summary style={{ outline: \"none\" }}>\r\n                            {s.story.title}\r\n                          </summary>\r\n                          {s.subs &&\r\n                            Object.keys(s.subs).map((subKey) => {\r\n                              const key = group + \"/\" + subKey;\r\n                              const subStory = s.subs[subKey];\r\n                              const subStoryView = () => <subStory />;\r\n                              const label =\r\n                                subStory.storyName || startCase(subKey);\r\n                              return (\r\n                                <div\r\n                                  class={`subStory ${\r\n                                    selectedKey === key ? \"selected\" : \"\"\r\n                                  }`}\r\n                                >\r\n                                  <a\r\n                                    onClick={() =>\r\n                                      setSelected(subStory, key, s.story, label)\r\n                                    }\r\n                                  >\r\n                                    {label}\r\n                                  </a>\r\n                                </div>\r\n                              );\r\n                            })}\r\n                        </details>\r\n                      </li>\r\n                    );\r\n                  })}\r\n                </div>\r\n              );\r\n            })}\r\n        </ul>\r\n      </div>\r\n      <WidthSelector />\r\n      <div class={`component ${responsiveWidth}`}>\r\n        {!selectedKey && homepage}\r\n        {selectedKey && (\r\n          <div>\r\n            {/* <pre>{selected.specs}</pre> */}\r\n            <h3>{Selected.label}</h3>\r\n            <InnerFn selected={Selected} />\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n\r\n  return {\r\n    class: Style,\r\n    children: <View />,\r\n    View,\r\n    selected: Selected,\r\n  };\r\n}\r\n"],"names":["Style","css","organiseStories","prev","curr","splitTitle","story","title","split","group","subs","sort","a","b","localeCompare","loadStory","imps","imports","h","StencilH","homepage","addons","stories","useMemo","map","reduce","_","useState","undefined","Selected","setSelectedInternal","selectedKey","key","layout","setLayout","showSidebar","setShowSidebar","darkCanvas","setDarkCanvas","WidthSelector","class","onClick","isDark","isshown","containerWidth","responsiveWidth","hide","document","body","style","backgroundColor","InnerFn","selected","Component","PrevFn","AddOnFn","View","Object","keys","s","marginBottom","outline","subKey","subStory","label","storyName","startCase","parent","setSelected","children"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/stencil-storybook.styles.ts","../src/organiseStories.tsx","../src/stencil-storybook.tsx"],"sourcesContent":["// Emotion doesn't natively support named exports with Rollup\nimport { css } from \"@emotion/css\";\n\nexport const Style = css`\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: \"Arial\", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n`;\n","import { OrganisedStoryWithSubs, StoryWithSubs } from \".\";\n\nexport function organiseStories(\n  prev: OrganisedStoryWithSubs,\n  curr: StoryWithSubs\n): OrganisedStoryWithSubs {\n  const splitTitle = curr.story.title.split(\"/\");\n  const group = splitTitle[1] ? splitTitle[0] : \"_\";\n  const title = splitTitle[1] || splitTitle[0];\n\n  return {\n    ...prev,\n    [group]: [\n      ...(prev[group] || []),\n      {\n        story: {\n          ...curr.story,\n          title,\n        },\n        subs: curr.subs,\n      },\n    ].sort((a, b) => a.story.title.localeCompare(b.story.title)),\n  };\n}\n","import { h as StencilH, FunctionalComponent, VNode } from \"@stencil/core\";\nimport { useState, useMemo, useEffect } from \"@saasquatch/universal-hooks\";\n\nimport startCase from \"lodash.startcase\";\nimport { Style } from \"./stencil-storybook.styles\";\nimport { css } from \"@emotion/css\";\nimport { organiseStories } from \"./organiseStories\";\nimport {\n  StorybookDefaultExport,\n  SubStories,\n  AddOn,\n  OrganisedStoryWithSubs,\n  StoryWithSubs,\n  Selection,\n} from \".\";\n\nfunction loadStory(imps: any) {\n  // TODO: Validate if something doesn't export things in Component Story Format (CSF)\n  const { default: defaultStory, ...rest } = imps;\n  return {\n    story: defaultStory as StorybookDefaultExport,\n    subs: rest as SubStories,\n  };\n}\n\ntype Layout = \"desktop\" | \"tablet\" | \"mobile\";\n\nexport type Return = {\n  class: string;\n  children: VNode;\n  View: FunctionalComponent<{}>;\n  selected: Selection;\n};\n\nexport function useStencilbook(\n  imports: unknown[],\n  {\n    h = StencilH,\n    title = \"Stencilbook\",\n    homepage = <h3>Select a story!</h3>,\n    addons = [],\n  }: {\n    h?: typeof StencilH;\n    title?: string;\n    homepage?: VNode;\n    addons?: AddOn[];\n  }\n): Return {\n  const stories: OrganisedStoryWithSubs = useMemo(\n    () =>\n      imports\n        .map(loadStory)\n        .reduce(organiseStories, { _: [] as StoryWithSubs[] }),\n    imports\n  );\n\n  const urlStoryKey = decodeURIComponent(window.location.hash).replace(\"#\", \"\");\n  const [Selected, setSelectedInternal] = useState<Selection>(\n    getStoryFromKey(urlStoryKey)\n  );\n  const selectedKey = Selected?.key;\n  const [layout, setLayout] = useState<Layout>(\"desktop\");\n  const [showSidebar, setShowSidebar] = useState<boolean>(true);\n  const [darkCanvas, setDarkCanvas] = useState<boolean>(false);\n\n  function getStoryFromKey(key?: string) {\n    if (!key) return undefined;\n\n    const keys = decodeURIComponent(key).split(\"-\");\n    const group = keys[0];\n    const parentTitle = keys[1];\n    const subKey = keys[2];\n\n    const s = stories[group]?.find(\n      (element) => element.story.title === parentTitle\n    );\n    const subStory = s.subs[subKey];\n    return {\n      key,\n      story: subStory,\n      parent: s?.story,\n      label: subStory?.name,\n    };\n  }\n  function setSelectedStory(key: string) {\n    window.location.hash = encodeURIComponent(key);\n    setSelectedInternal(getStoryFromKey(key));\n  }\n\n  const WidthSelector = () => {\n    // Not the best way to display these buttons but don't wanna put too much time\n    return (\n      <div class=\"dynamic-display-wrapper\">\n        <button\n          class={darkCanvas ? \"active\" : \"\"}\n          onClick={() => setDarkCanvas((isDark) => !isDark)}\n        >\n          Toggle Dark Background\n        </button>\n        <button\n          class={showSidebar ? \"active\" : \"\"}\n          onClick={() => setShowSidebar((isshown) => !isshown)}\n        >\n          Toggle Sidebar\n        </button>\n      </div>\n    );\n  };\n\n  // Mobile/tablet widths are based on avocode designs\n  const containerWidth =\n    layout === \"mobile\" ? \"375px\" : layout === \"tablet\" ? \"768px\" : \"1124px\";\n  const responsiveWidth = css`\n    max-width: ${containerWidth};\n    margin-left: ${showSidebar ? \"250px\" : \"0px\"};\n  `;\n\n  const hide = css`\n    display: none;\n  `;\n\n  if (darkCanvas) {\n    document.body.style.backgroundColor = \"#232323\";\n  } else {\n    document.body.style.backgroundColor = \"#fafafa\";\n  }\n\n  const InnerFn = ({ selected }: { selected: Selection }) => {\n    const Component = addons.reduce<FunctionalComponent>((PrevFn, AddOnFn) => {\n      return () => (\n        <AddOnFn\n          story={{\n            ...selected,\n          }}\n        >\n          <PrevFn />\n        </AddOnFn>\n      );\n    }, selected?.story);\n    return <Component />;\n  };\n\n  const GoHome = () => {\n    setSelectedInternal(undefined);\n  };\n\n  const View = () => (\n    <div class=\"story-book-outer-div\">\n      <div class={`story-div ${!showSidebar ? hide : \"\"}`}>\n        <div class=\"header\" onClick={() => GoHome()}>\n          <h2>{title}</h2>\n        </div>\n        <ul class=\"parentStoryList\">\n          {Object.keys(stories)\n            .sort()\n            .map((group) => {\n              return (\n                <div class=\"group-wrapper\">\n                  {group !== \"_\" && <h4 class=\"group-header\">{group}</h4>}\n                  {stories[group].map((s) => {\n                    const [isOpen, setIsOpen] = useState<Boolean>(false);\n                    return (\n                      <li class=\"parentStory\">\n                        <details\n                          style={{ marginBottom: \"10px\" }}\n                          open={\n                            isOpen ||\n                            selectedKey?.includes(`${group}-${s.story.title}`)\n                          }\n                          onClick={(e) => {\n                            e.preventDefault();\n                            setIsOpen(!isOpen);\n                          }}\n                        >\n                          <summary style={{ outline: \"none\" }}>\n                            {s.story.title}\n                          </summary>\n                          {s.subs &&\n                            Object.keys(s.subs).map((subKey) => {\n                              const key = `${group}-${s.story.title}-${subKey}`;\n                              const subStory = s.subs[subKey];\n                              const subStoryView = () => <subStory />;\n                              const label =\n                                subStory.storyName || startCase(subKey);\n                              return (\n                                <div\n                                  class={`subStory ${\n                                    selectedKey === key ? \"selected\" : \"\"\n                                  }`}\n                                >\n                                  <a onClick={() => setSelectedStory(key)}>\n                                    {label}\n                                  </a>\n                                </div>\n                              );\n                            })}\n                        </details>\n                      </li>\n                    );\n                  })}\n                </div>\n              );\n            })}\n        </ul>\n      </div>\n      <WidthSelector />\n      <div class={`component ${responsiveWidth}`}>\n        {!selectedKey && homepage}\n        {selectedKey && (\n          <div>\n            {/* <pre>{selected.specs}</pre> */}\n            <h3>{Selected.label}</h3>\n            <InnerFn selected={Selected} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return {\n    class: Style,\n    children: <View />,\n    View,\n    selected: Selected,\n  };\n}\n"],"names":["Style","css","organiseStories","prev","curr","splitTitle","story","title","split","group","subs","sort","a","b","localeCompare","loadStory","imps","imports","h","StencilH","homepage","addons","stories","useMemo","map","reduce","_","urlStoryKey","decodeURIComponent","window","location","hash","replace","useState","getStoryFromKey","Selected","setSelectedInternal","selectedKey","key","layout","showSidebar","setShowSidebar","darkCanvas","setDarkCanvas","keys","parentTitle","subKey","s","_stories$group","find","element","subStory","parent","label","name","WidthSelector","class","onClick","isDark","isshown","containerWidth","responsiveWidth","hide","document","body","style","backgroundColor","InnerFn","selected","Component","PrevFn","AddOnFn","View","undefined","Object","isOpen","setIsOpen","marginBottom","open","includes","e","preventDefault","outline","storyName","startCase","encodeURIComponent","setSelectedStory","children"],"mappings":"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"}

dist/index.modern.js

@@ -1,2 +0,2 @@
-import{h as t}from"@stencil/core";import{useMemo as o,useState as e}from"@saasquatch/universal-hooks";import r from"lodash.startcase";import{css as n}from"@emotion/css";function s(){return(s=Object.assign||function(t){for(var o=1;o<arguments.length;o++){var e=arguments[o];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t}).apply(this,arguments)}let i;const l=n(i||(i=(t=>t)`
+import{h as t}from"@stencil/core";import{useMemo as o,useState as e}from"@saasquatch/universal-hooks";import r from"lodash.startcase";import{css as n}from"@emotion/css";function i(){return(i=Object.assign||function(t){for(var o=1;o<arguments.length;o++){var e=arguments[o];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t}).apply(this,arguments)}let s;const l=n(s||(s=(t=>t)`
   width: 100vw;
@@ -134,8 +134,8 @@ height: 100vh;
   }
-`));function a(t,o){const e=o.story.title.split("/"),r=e[1]?e[0]:"_";return s({},t,{[r]:[...t[r]||[],{story:s({},o.story,{title:e[1]||e[0]}),subs:o.subs}].sort((t,o)=>t.story.title.localeCompare(o.story.title))})}let p,c,d=t=>t;function u(t){const{default:o}=t;return{story:o,subs:function(t,o){if(null==t)return{};var e,r,n={},s=Object.keys(t);for(r=0;r<s.length;r++)o.indexOf(e=s[r])>=0||(n[e]=t[e]);return n}(t,["default"])}}function b(i,{h:b=t,title:y="Stencilbook",homepage:g=b("h3",null,"Select a story!"),addons:m=[]}){const x=o(()=>i.map(u).reduce(a,{_:[]}),i),[f,h]=e(void 0),v=null==f?void 0:f.key,[k,w]=e("desktop"),[S,C]=e(!0),[z,O]=e(!1),j=()=>b("div",{class:"dynamic-display-wrapper"},b("div",{class:"button-wrapper"},b("button",{class:"desktop"===k?"active":"",onClick:()=>w("desktop")},"Desktop"),b("button",{class:"tablet"===k?"active":"",onClick:()=>w("tablet")},"Tablet"),b("button",{class:"mobile"===k?"active":"",onClick:()=>w("mobile")},"Mobile")),b("p",null,"Note: Currently doesn't test breakpoints, use the native tester for now"),b("hr",null),b("button",{class:z?"active":"",onClick:()=>O(t=>!t)},"Toggle Dark Background"),b("hr",null),b("button",{class:S?"active":"",onClick:()=>C(t=>!t)},"Toggle Sidebar")),$=n(p||(p=d`
+`));function a(t,o){const e=o.story.title.split("/"),r=e[1]?e[0]:"_";return i({},t,{[r]:[...t[r]||[],{story:i({},o.story,{title:e[1]||e[0]}),subs:o.subs}].sort((t,o)=>t.story.title.localeCompare(o.story.title))})}let p,c,d=t=>t;function u(t){const{default:o}=t;return{story:o,subs:function(t,o){if(null==t)return{};var e,r,n={},i=Object.keys(t);for(r=0;r<i.length;r++)o.indexOf(e=i[r])>=0||(n[e]=t[e]);return n}(t,["default"])}}function y(s,{h:y=t,title:m="Stencilbook",homepage:b=y("h3",null,"Select a story!"),addons:g=[]}){const x=o(()=>s.map(u).reduce(a,{_:[]}),s),f=decodeURIComponent(window.location.hash).replace("#",""),[h,v]=e(j(f)),k=null==h?void 0:h.key,[w,S]=e("desktop"),[C,$]=e(!0),[z,O]=e(!1);function j(t){var o;if(!t)return;const e=decodeURIComponent(t).split("-"),r=e[1],n=e[2],i=null==(o=x[e[0]])?void 0:o.find(t=>t.story.title===r),s=i.subs[n];return{key:t,story:s,parent:null==i?void 0:i.story,label:null==s?void 0:s.name}}const I=()=>y("div",{class:"dynamic-display-wrapper"},y("button",{class:z?"active":"",onClick:()=>O(t=>!t)},"Toggle Dark Background"),y("button",{class:C?"active":"",onClick:()=>$(t=>!t)},"Toggle Sidebar")),R=n(p||(p=d`
     max-width: ${0};
     margin-left: ${0};
-  `),"mobile"===k?"375px":"tablet"===k?"768px":"1124px",S?"250px":"0px"),T=n(c||(c=d`
+  `),"mobile"===w?"375px":"tablet"===w?"768px":"1124px",C?"250px":"0px"),U=n(c||(c=d`
     display: none;
-  `));document.body.style.backgroundColor=z?"#232323":"#fafafa";const _=({selected:t})=>{const o=m.reduce((o,e)=>()=>b(e,{story:s({},t)},b(o,null)),null==t?void 0:t.story);return b(o,null)},B=()=>b("div",{class:"story-book-outer-div"},b("div",{class:`story-div ${S?"":T}`},b("div",{class:"header",onClick:()=>{h(void 0)}},b("h2",null,y)),b("ul",{class:"parentStoryList"},Object.keys(x).sort().map(t=>b("div",{class:"group-wrapper"},"_"!==t&&b("h4",{class:"group-header"},t),x[t].map(o=>b("li",{class:"parentStory"},b("details",{style:{marginBottom:"10px"}},b("summary",{style:{outline:"none"}},o.story.title),o.subs&&Object.keys(o.subs).map(e=>{const n=t+"/"+e,s=o.subs[e],i=s.storyName||r(e);return b("div",{class:"subStory "+(v===n?"selected":"")},b("a",{onClick:()=>function(t,o,e,r){h({key:o,story:t,parent:e,label:r})}(s,n,o.story,i)},i))})))))))),b(j,null),b("div",{class:`component ${$}`},!v&&g,v&&b("div",null,b("h3",null,f.label),b(_,{selected:f}))));return{class:l,children:b(B,null),View:B,selected:f}}export{b as useStencilbook};
+  `));document.body.style.backgroundColor=z?"#232323":"#fafafa";const _=({selected:t})=>{const o=g.reduce((o,e)=>()=>y(e,{story:i({},t)},y(o,null)),null==t?void 0:t.story);return y(o,null)},B=()=>y("div",{class:"story-book-outer-div"},y("div",{class:`story-div ${C?"":U}`},y("div",{class:"header",onClick:()=>{v(void 0)}},y("h2",null,m)),y("ul",{class:"parentStoryList"},Object.keys(x).sort().map(t=>y("div",{class:"group-wrapper"},"_"!==t&&y("h4",{class:"group-header"},t),x[t].map(o=>{const[n,i]=e(!1);return y("li",{class:"parentStory"},y("details",{style:{marginBottom:"10px"},open:n||(null==k?void 0:k.includes(`${t}-${o.story.title}`)),onClick:t=>{t.preventDefault(),i(!n)}},y("summary",{style:{outline:"none"}},o.story.title),o.subs&&Object.keys(o.subs).map(e=>{const n=`${t}-${o.story.title}-${e}`,i=o.subs[e].storyName||r(e);return y("div",{class:"subStory "+(k===n?"selected":"")},y("a",{onClick:()=>function(t){window.location.hash=encodeURIComponent(t),v(j(t))}(n)},i))})))}))))),y(I,null),y("div",{class:`component ${R}`},!k&&b,k&&y("div",null,y("h3",null,h.label),y(_,{selected:h}))));return{class:l,children:y(B,null),View:B,selected:h}}export{y as useStencilbook};
 //# sourceMappingURL=index.modern.js.map

dist/index.modern.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.modern.js","sources":["../src/stencil-storybook.styles.ts","../src/organiseStories.tsx","../src/stencil-storybook.tsx"],"sourcesContent":["// Emotion doesn't natively support named exports with Rollup\r\nimport { css } from \"@emotion/css\";\r\n\r\nexport const Style = css`\r\n  width: 100vw;\r\n  height: 100vh;\r\n\r\n  .story-book-outer-div {\r\n    .story-div {\r\n      font-family: \"Arial\", sans-serif;\r\n      font-size: 12px;\r\n    }\r\n    padding-bottom: 500px;\r\n  }\r\n\r\n  .story-div {\r\n    position: fixed;\r\n    box-sizing: border-box;\r\n    top: 0;\r\n    width: 250px;\r\n    height: 100vh;\r\n    z-index: 999;\r\n    overflow-y: scroll;\r\n    background: white;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .header {\r\n    padding: 24px 0 16px 16px;\r\n    margin-bottom: 24px;\r\n    color: white;\r\n    background: #333;\r\n    cursor: pointer;\r\n\r\n    h2 {\r\n      letter-spacing: 3px;\r\n      font-weight: 400;\r\n    }\r\n  }\r\n\r\n  .parentStoryList {\r\n    list-style: none;\r\n    padding-left: 16px;\r\n\r\n    summary {\r\n      margin-bottom: 4px;\r\n    }\r\n  }\r\n  .parentStory {\r\n    cursor: pointer;\r\n  }\r\n  .parentStory.selected {\r\n    font-weight: bold;\r\n  }\r\n\r\n  .subStory {\r\n    font-size: 12px;\r\n    cursor: pointer;\r\n    line-height: 1.5em;\r\n    margin-top: 4px;\r\n\r\n    a {\r\n      display: block;\r\n      padding: 4px 4px 4px 16px;\r\n    }\r\n  }\r\n  .subStory:hover {\r\n    background-color: #eee;\r\n  }\r\n  .subStory.selected {\r\n    background-color: lightgreen;\r\n  }\r\n\r\n  .component {\r\n    padding: 24px 16px;\r\n  }\r\n\r\n  h4.group-header {\r\n    margin: 8px 0;\r\n    text-transform: uppercase;\r\n    font-weight: 600;\r\n    font-size: 14px;\r\n    color: #575757;\r\n  }\r\n\r\n  .group-wrapper {\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .dynamic-display-wrapper {\r\n    position: fixed;\r\n    display: flex;\r\n    flex-direction: column;\r\n    bottom: 0;\r\n    left: 100%;\r\n    padding: 16px;\r\n    z-index: 1000;\r\n    background: white;\r\n    transform: translateX(-100%);\r\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n\r\n    & > :not(:first-child) {\r\n      margin-top: 12px;\r\n    }\r\n\r\n    p {\r\n      font-size: 12px;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    .button-wrapper {\r\n      display: flex;\r\n\r\n      & > :not(:first-child) {\r\n        margin-left: 12px;\r\n      }\r\n    }\r\n\r\n    & button {\r\n      border: 1px solid #eaeaea;\r\n      background: white;\r\n      border-radius: 4px;\r\n      color: #777;\r\n      padding: 4px 12px;\r\n      justify-content: center;\r\n      align-items: center;\r\n      text-align: center;\r\n\r\n      &.active {\r\n        background: #555;\r\n        border-color: #555;\r\n        color: white;\r\n      }\r\n    }\r\n  }\r\n`;\r\n","import { OrganisedStoryWithSubs, StoryWithSubs } from \".\";\r\n\r\nexport function organiseStories(\r\n  prev: OrganisedStoryWithSubs,\r\n  curr: StoryWithSubs\r\n): OrganisedStoryWithSubs {\r\n  const splitTitle = curr.story.title.split(\"/\");\r\n  const group = splitTitle[1] ? splitTitle[0] : \"_\";\r\n  const title = splitTitle[1] || splitTitle[0];\r\n\r\n  return {\r\n    ...prev,\r\n    [group]: [\r\n      ...(prev[group] || []),\r\n      {\r\n        story: {\r\n          ...curr.story,\r\n          title,\r\n        },\r\n        subs: curr.subs,\r\n      },\r\n    ].sort((a, b) => a.story.title.localeCompare(b.story.title)),\r\n  };\r\n}\r\n","import { h as StencilH, FunctionalComponent, VNode } from \"@stencil/core\";\r\nimport { useState, useMemo } from \"@saasquatch/universal-hooks\";\r\n\r\nimport startCase from \"lodash.startcase\";\r\nimport { Style } from \"./stencil-storybook.styles\";\r\nimport { css } from \"@emotion/css\";\r\nimport { organiseStories } from \"./organiseStories\";\r\nimport {\r\n  StorybookDefaultExport,\r\n  SubStories,\r\n  AddOn,\r\n  OrganisedStoryWithSubs,\r\n  StoryWithSubs,\r\n  Selection,\r\n} from \".\";\r\n\r\nfunction loadStory(imps: any) {\r\n  // TODO: Validate if something doesn't export things in Component Story Format (CSF)\r\n  const { default: defaultStory, ...rest } = imps;\r\n  return {\r\n    story: defaultStory as StorybookDefaultExport,\r\n    subs: rest as SubStories,\r\n  };\r\n}\r\n\r\ntype Layout = \"desktop\" | \"tablet\" | \"mobile\";\r\n\r\nexport type Return = {\r\n  class: string;\r\n  children: VNode;\r\n  View: FunctionalComponent<{}>;\r\n  selected: Selection;\r\n};\r\n\r\nexport function useStencilbook(\r\n  imports: unknown[],\r\n  {\r\n    h = StencilH,\r\n    title = \"Stencilbook\",\r\n    homepage = <h3>Select a story!</h3>,\r\n    addons = [],\r\n  }: {\r\n    h?: typeof StencilH;\r\n    title?: string;\r\n    homepage?: VNode;\r\n    addons?: AddOn[];\r\n  }\r\n): Return {\r\n  const stories: OrganisedStoryWithSubs = useMemo(\r\n    () =>\r\n      imports\r\n        .map(loadStory)\r\n        .reduce(organiseStories, { _: [] as StoryWithSubs[] }),\r\n    imports\r\n  );\r\n\r\n  const [Selected, setSelectedInternal] = useState<Selection>(undefined);\r\n  const selectedKey = Selected?.key;\r\n  const [layout, setLayout] = useState<Layout>(\"desktop\");\r\n  const [showSidebar, setShowSidebar] = useState<boolean>(true);\r\n  const [darkCanvas, setDarkCanvas] = useState<boolean>(false);\r\n  function setSelected(\r\n    story: FunctionalComponent,\r\n    key: string,\r\n    parent: StorybookDefaultExport,\r\n    label: string\r\n  ) {\r\n    setSelectedInternal({\r\n      key,\r\n      story,\r\n      parent,\r\n      label,\r\n    });\r\n  }\r\n  const WidthSelector = () => {\r\n    // Not the best way to display these buttons but don't wanna put too much time\r\n    return (\r\n      <div class=\"dynamic-display-wrapper\">\r\n        <div class=\"button-wrapper\">\r\n          <button\r\n            class={layout === \"desktop\" ? \"active\" : \"\"}\r\n            onClick={() => setLayout(\"desktop\")}\r\n          >\r\n            Desktop\r\n          </button>\r\n          <button\r\n            class={layout === \"tablet\" ? \"active\" : \"\"}\r\n            onClick={() => setLayout(\"tablet\")}\r\n          >\r\n            Tablet\r\n          </button>\r\n          <button\r\n            class={layout === \"mobile\" ? \"active\" : \"\"}\r\n            onClick={() => setLayout(\"mobile\")}\r\n          >\r\n            Mobile\r\n          </button>\r\n        </div>\r\n        <p>\r\n          Note: Currently doesn't test breakpoints, use the native tester for\r\n          now\r\n        </p>\r\n        <hr />\r\n        <button\r\n          class={darkCanvas ? \"active\" : \"\"}\r\n          onClick={() => setDarkCanvas((isDark) => !isDark)}\r\n        >\r\n          Toggle Dark Background\r\n        </button>\r\n        <hr />\r\n        <button\r\n          class={showSidebar ? \"active\" : \"\"}\r\n          onClick={() => setShowSidebar((isshown) => !isshown)}\r\n        >\r\n          Toggle Sidebar\r\n        </button>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  // Mobile/tablet widths are based on avocode designs\r\n  const containerWidth =\r\n    layout === \"mobile\" ? \"375px\" : layout === \"tablet\" ? \"768px\" : \"1124px\";\r\n  const responsiveWidth = css`\r\n    max-width: ${containerWidth};\r\n    margin-left: ${showSidebar ? \"250px\" : \"0px\"};\r\n  `;\r\n\r\n  const hide = css`\r\n    display: none;\r\n  `;\r\n\r\n  if (darkCanvas) {\r\n    document.body.style.backgroundColor = \"#232323\";\r\n  } else {\r\n    document.body.style.backgroundColor = \"#fafafa\";\r\n  }\r\n\r\n  const InnerFn = ({ selected }: { selected: Selection }) => {\r\n    const Component = addons.reduce<FunctionalComponent>((PrevFn, AddOnFn) => {\r\n      return () => (\r\n        <AddOnFn\r\n          story={{\r\n            ...selected,\r\n          }}\r\n        >\r\n          <PrevFn />\r\n        </AddOnFn>\r\n      );\r\n    }, selected?.story);\r\n    return <Component />;\r\n  };\r\n\r\n  const GoHome = () => {\r\n    setSelectedInternal(undefined);\r\n  };\r\n\r\n  const View = () => (\r\n    <div class=\"story-book-outer-div\">\r\n      <div class={`story-div ${!showSidebar ? hide : \"\"}`}>\r\n        <div class=\"header\" onClick={() => GoHome()}>\r\n          <h2>{title}</h2>\r\n        </div>\r\n        <ul class=\"parentStoryList\">\r\n          {Object.keys(stories)\r\n            .sort()\r\n            .map((group) => {\r\n              return (\r\n                <div class=\"group-wrapper\">\r\n                  {group !== \"_\" && <h4 class=\"group-header\">{group}</h4>}\r\n                  {stories[group].map((s) => {\r\n                    return (\r\n                      <li class=\"parentStory\">\r\n                        <details style={{ marginBottom: \"10px\" }}>\r\n                          <summary style={{ outline: \"none\" }}>\r\n                            {s.story.title}\r\n                          </summary>\r\n                          {s.subs &&\r\n                            Object.keys(s.subs).map((subKey) => {\r\n                              const key = group + \"/\" + subKey;\r\n                              const subStory = s.subs[subKey];\r\n                              const subStoryView = () => <subStory />;\r\n                              const label =\r\n                                subStory.storyName || startCase(subKey);\r\n                              return (\r\n                                <div\r\n                                  class={`subStory ${\r\n                                    selectedKey === key ? \"selected\" : \"\"\r\n                                  }`}\r\n                                >\r\n                                  <a\r\n                                    onClick={() =>\r\n                                      setSelected(subStory, key, s.story, label)\r\n                                    }\r\n                                  >\r\n                                    {label}\r\n                                  </a>\r\n                                </div>\r\n                              );\r\n                            })}\r\n                        </details>\r\n                      </li>\r\n                    );\r\n                  })}\r\n                </div>\r\n              );\r\n            })}\r\n        </ul>\r\n      </div>\r\n      <WidthSelector />\r\n      <div class={`component ${responsiveWidth}`}>\r\n        {!selectedKey && homepage}\r\n        {selectedKey && (\r\n          <div>\r\n            {/* <pre>{selected.specs}</pre> */}\r\n            <h3>{Selected.label}</h3>\r\n            <InnerFn selected={Selected} />\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n\r\n  return {\r\n    class: Style,\r\n    children: <View />,\r\n    View,\r\n    selected: Selected,\r\n  };\r\n}\r\n"],"names":["Style","css","organiseStories","prev","curr","splitTitle","story","title","split","group","[object Object]","subs","sort","a","b","localeCompare","loadStory","imps","default","defaultStory","useStencilbook","imports","h","StencilH","homepage","addons","stories","useMemo","map","reduce","_","Selected","setSelectedInternal","useState","undefined","selectedKey","key","layout","setLayout","showSidebar","setShowSidebar","darkCanvas","setDarkCanvas","WidthSelector","class","onClick","isDark","isshown","responsiveWidth","hide","document","body","style","backgroundColor","InnerFn","selected","Component","PrevFn","AddOnFn","View","Object","keys","s","marginBottom","outline","subKey","subStory","label","storyName","startCase","parent","setSelected","children"],"mappings":"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"}
+{"version":3,"file":"index.modern.js","sources":["../src/stencil-storybook.styles.ts","../src/organiseStories.tsx","../src/stencil-storybook.tsx"],"sourcesContent":["// Emotion doesn't natively support named exports with Rollup\nimport { css } from \"@emotion/css\";\n\nexport const Style = css`\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: \"Arial\", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n`;\n","import { OrganisedStoryWithSubs, StoryWithSubs } from \".\";\n\nexport function organiseStories(\n  prev: OrganisedStoryWithSubs,\n  curr: StoryWithSubs\n): OrganisedStoryWithSubs {\n  const splitTitle = curr.story.title.split(\"/\");\n  const group = splitTitle[1] ? splitTitle[0] : \"_\";\n  const title = splitTitle[1] || splitTitle[0];\n\n  return {\n    ...prev,\n    [group]: [\n      ...(prev[group] || []),\n      {\n        story: {\n          ...curr.story,\n          title,\n        },\n        subs: curr.subs,\n      },\n    ].sort((a, b) => a.story.title.localeCompare(b.story.title)),\n  };\n}\n","import { h as StencilH, FunctionalComponent, VNode } from \"@stencil/core\";\nimport { useState, useMemo, useEffect } from \"@saasquatch/universal-hooks\";\n\nimport startCase from \"lodash.startcase\";\nimport { Style } from \"./stencil-storybook.styles\";\nimport { css } from \"@emotion/css\";\nimport { organiseStories } from \"./organiseStories\";\nimport {\n  StorybookDefaultExport,\n  SubStories,\n  AddOn,\n  OrganisedStoryWithSubs,\n  StoryWithSubs,\n  Selection,\n} from \".\";\n\nfunction loadStory(imps: any) {\n  // TODO: Validate if something doesn't export things in Component Story Format (CSF)\n  const { default: defaultStory, ...rest } = imps;\n  return {\n    story: defaultStory as StorybookDefaultExport,\n    subs: rest as SubStories,\n  };\n}\n\ntype Layout = \"desktop\" | \"tablet\" | \"mobile\";\n\nexport type Return = {\n  class: string;\n  children: VNode;\n  View: FunctionalComponent<{}>;\n  selected: Selection;\n};\n\nexport function useStencilbook(\n  imports: unknown[],\n  {\n    h = StencilH,\n    title = \"Stencilbook\",\n    homepage = <h3>Select a story!</h3>,\n    addons = [],\n  }: {\n    h?: typeof StencilH;\n    title?: string;\n    homepage?: VNode;\n    addons?: AddOn[];\n  }\n): Return {\n  const stories: OrganisedStoryWithSubs = useMemo(\n    () =>\n      imports\n        .map(loadStory)\n        .reduce(organiseStories, { _: [] as StoryWithSubs[] }),\n    imports\n  );\n\n  const urlStoryKey = decodeURIComponent(window.location.hash).replace(\"#\", \"\");\n  const [Selected, setSelectedInternal] = useState<Selection>(\n    getStoryFromKey(urlStoryKey)\n  );\n  const selectedKey = Selected?.key;\n  const [layout, setLayout] = useState<Layout>(\"desktop\");\n  const [showSidebar, setShowSidebar] = useState<boolean>(true);\n  const [darkCanvas, setDarkCanvas] = useState<boolean>(false);\n\n  function getStoryFromKey(key?: string) {\n    if (!key) return undefined;\n\n    const keys = decodeURIComponent(key).split(\"-\");\n    const group = keys[0];\n    const parentTitle = keys[1];\n    const subKey = keys[2];\n\n    const s = stories[group]?.find(\n      (element) => element.story.title === parentTitle\n    );\n    const subStory = s.subs[subKey];\n    return {\n      key,\n      story: subStory,\n      parent: s?.story,\n      label: subStory?.name,\n    };\n  }\n  function setSelectedStory(key: string) {\n    window.location.hash = encodeURIComponent(key);\n    setSelectedInternal(getStoryFromKey(key));\n  }\n\n  const WidthSelector = () => {\n    // Not the best way to display these buttons but don't wanna put too much time\n    return (\n      <div class=\"dynamic-display-wrapper\">\n        <button\n          class={darkCanvas ? \"active\" : \"\"}\n          onClick={() => setDarkCanvas((isDark) => !isDark)}\n        >\n          Toggle Dark Background\n        </button>\n        <button\n          class={showSidebar ? \"active\" : \"\"}\n          onClick={() => setShowSidebar((isshown) => !isshown)}\n        >\n          Toggle Sidebar\n        </button>\n      </div>\n    );\n  };\n\n  // Mobile/tablet widths are based on avocode designs\n  const containerWidth =\n    layout === \"mobile\" ? \"375px\" : layout === \"tablet\" ? \"768px\" : \"1124px\";\n  const responsiveWidth = css`\n    max-width: ${containerWidth};\n    margin-left: ${showSidebar ? \"250px\" : \"0px\"};\n  `;\n\n  const hide = css`\n    display: none;\n  `;\n\n  if (darkCanvas) {\n    document.body.style.backgroundColor = \"#232323\";\n  } else {\n    document.body.style.backgroundColor = \"#fafafa\";\n  }\n\n  const InnerFn = ({ selected }: { selected: Selection }) => {\n    const Component = addons.reduce<FunctionalComponent>((PrevFn, AddOnFn) => {\n      return () => (\n        <AddOnFn\n          story={{\n            ...selected,\n          }}\n        >\n          <PrevFn />\n        </AddOnFn>\n      );\n    }, selected?.story);\n    return <Component />;\n  };\n\n  const GoHome = () => {\n    setSelectedInternal(undefined);\n  };\n\n  const View = () => (\n    <div class=\"story-book-outer-div\">\n      <div class={`story-div ${!showSidebar ? hide : \"\"}`}>\n        <div class=\"header\" onClick={() => GoHome()}>\n          <h2>{title}</h2>\n        </div>\n        <ul class=\"parentStoryList\">\n          {Object.keys(stories)\n            .sort()\n            .map((group) => {\n              return (\n                <div class=\"group-wrapper\">\n                  {group !== \"_\" && <h4 class=\"group-header\">{group}</h4>}\n                  {stories[group].map((s) => {\n                    const [isOpen, setIsOpen] = useState<Boolean>(false);\n                    return (\n                      <li class=\"parentStory\">\n                        <details\n                          style={{ marginBottom: \"10px\" }}\n                          open={\n                            isOpen ||\n                            selectedKey?.includes(`${group}-${s.story.title}`)\n                          }\n                          onClick={(e) => {\n                            e.preventDefault();\n                            setIsOpen(!isOpen);\n                          }}\n                        >\n                          <summary style={{ outline: \"none\" }}>\n                            {s.story.title}\n                          </summary>\n                          {s.subs &&\n                            Object.keys(s.subs).map((subKey) => {\n                              const key = `${group}-${s.story.title}-${subKey}`;\n                              const subStory = s.subs[subKey];\n                              const subStoryView = () => <subStory />;\n                              const label =\n                                subStory.storyName || startCase(subKey);\n                              return (\n                                <div\n                                  class={`subStory ${\n                                    selectedKey === key ? \"selected\" : \"\"\n                                  }`}\n                                >\n                                  <a onClick={() => setSelectedStory(key)}>\n                                    {label}\n                                  </a>\n                                </div>\n                              );\n                            })}\n                        </details>\n                      </li>\n                    );\n                  })}\n                </div>\n              );\n            })}\n        </ul>\n      </div>\n      <WidthSelector />\n      <div class={`component ${responsiveWidth}`}>\n        {!selectedKey && homepage}\n        {selectedKey && (\n          <div>\n            {/* <pre>{selected.specs}</pre> */}\n            <h3>{Selected.label}</h3>\n            <InnerFn selected={Selected} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return {\n    class: Style,\n    children: <View />,\n    View,\n    selected: Selected,\n  };\n}\n"],"names":["Style","css","organiseStories","prev","curr","splitTitle","story","title","split","group","[object Object]","subs","sort","a","b","localeCompare","loadStory","imps","default","defaultStory","useStencilbook","imports","h","StencilH","homepage","addons","stories","useMemo","map","reduce","_","urlStoryKey","decodeURIComponent","window","location","hash","replace","Selected","setSelectedInternal","useState","getStoryFromKey","selectedKey","key","layout","setLayout","showSidebar","setShowSidebar","darkCanvas","setDarkCanvas","keys","parentTitle","subKey","s","_stories$group","find","element","subStory","parent","label","name","WidthSelector","class","onClick","isDark","isshown","responsiveWidth","hide","document","body","style","backgroundColor","InnerFn","selected","Component","PrevFn","AddOnFn","View","undefined","Object","isOpen","setIsOpen","marginBottom","open","includes","e","preventDefault","outline","storyName","startCase","encodeURIComponent","setSelectedStory","children"],"mappings":"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"}

dist/index.module.js

@@ -1,2 +0,2 @@
-import{h as n}from"@stencil/core";import{useMemo as t,useState as o}from"@saasquatch/universal-hooks";import r from"lodash.startcase";import{css as e}from"@emotion/css";function i(){return(i=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(n[r]=o[r])}return n}).apply(this,arguments)}function s(n,t){return t||(t=n.slice(0)),n.raw=t,n}var a,l,u,c=e(a||(a=s(['\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: "Arial", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n'])));function p(n,t){var o,r=t.story.title.split("/"),e=r[1]?r[0]:"_";return i({},n,((o={})[e]=[].concat(n[e]||[],[{story:i({},t.story,{title:r[1]||r[0]}),subs:t.subs}]).sort(function(n,t){return n.story.title.localeCompare(t.story.title)}),o))}function d(n){return{story:n.default,subs:function(n,t){if(null==n)return{};var o,r,e={},i=Object.keys(n);for(r=0;r<i.length;r++)t.indexOf(o=i[r])>=0||(e[o]=n[o]);return e}(n,["default"])}}function f(a,f){var b=f.h,y=void 0===b?n:b,g=f.title,m=void 0===g?"Stencilbook":g,x=f.homepage,h=void 0===x?y("h3",null,"Select a story!"):x,v=f.addons,k=void 0===v?[]:v,w=t(function(){return a.map(d).reduce(p,{_:[]})},a),S=o(void 0),C=S[0],z=S[1],O=null==C?void 0:C.key,j=o("desktop"),T=j[0],_=j[1],B=o(!0),D=B[0],L=B[1],N=o(!1),q=N[0],A=N[1],M=function(){return y("div",{class:"dynamic-display-wrapper"},y("div",{class:"button-wrapper"},y("button",{class:"desktop"===T?"active":"",onClick:function(){return _("desktop")}},"Desktop"),y("button",{class:"tablet"===T?"active":"",onClick:function(){return _("tablet")}},"Tablet"),y("button",{class:"mobile"===T?"active":"",onClick:function(){return _("mobile")}},"Mobile")),y("p",null,"Note: Currently doesn't test breakpoints, use the native tester for now"),y("hr",null),y("button",{class:q?"active":"",onClick:function(){return A(function(n){return!n})}},"Toggle Dark Background"),y("hr",null),y("button",{class:D?"active":"",onClick:function(){return L(function(n){return!n})}},"Toggle Sidebar"))},P="mobile"===T?"375px":"tablet"===T?"768px":"1124px",V=e(l||(l=s(["\n    max-width: ",";\n    margin-left: ",";\n  "])),P,D?"250px":"0px"),X=e(u||(u=s(["\n    display: none;\n  "])));document.body.style.backgroundColor=q?"#232323":"#fafafa";var E=function(n){var t=n.selected,o=k.reduce(function(n,o){return function(){return y(o,{story:i({},t)},y(n,null))}},null==t?void 0:t.story);return y(o,null)},F=function(){return y("div",{class:"story-book-outer-div"},y("div",{class:"story-div "+(D?"":X)},y("div",{class:"header",onClick:function(){z(void 0)}},y("h2",null,m)),y("ul",{class:"parentStoryList"},Object.keys(w).sort().map(function(n){return y("div",{class:"group-wrapper"},"_"!==n&&y("h4",{class:"group-header"},n),w[n].map(function(t){return y("li",{class:"parentStory"},y("details",{style:{marginBottom:"10px"}},y("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map(function(o){var e=n+"/"+o,i=t.subs[o],s=i.storyName||r(o);return y("div",{class:"subStory "+(O===e?"selected":"")},y("a",{onClick:function(){return function(n,t,o,r){z({key:t,story:n,parent:o,label:r})}(i,e,t.story,s)}},s))})))}))}))),y(M,null),y("div",{class:"component "+V},!O&&h,O&&y("div",null,y("h3",null,C.label),y(E,{selected:C}))))};return{class:c,children:y(F,null),View:F,selected:C}}export{f as useStencilbook};
+import{h as n}from"@stencil/core";import{useMemo as t,useState as o}from"@saasquatch/universal-hooks";import r from"lodash.startcase";import{css as e}from"@emotion/css";function i(){return(i=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(n[r]=o[r])}return n}).apply(this,arguments)}function a(n,t){return t||(t=n.slice(0)),n.raw=t,n}var l,s,c,u=e(l||(l=a(['\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: "Arial", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n'])));function p(n,t){var o,r=t.story.title.split("/"),e=r[1]?r[0]:"_";return i({},n,((o={})[e]=[].concat(n[e]||[],[{story:i({},t.story,{title:r[1]||r[0]}),subs:t.subs}]).sort(function(n,t){return n.story.title.localeCompare(t.story.title)}),o))}function d(n){return{story:n.default,subs:function(n,t){if(null==n)return{};var o,r,e={},i=Object.keys(n);for(r=0;r<i.length;r++)t.indexOf(o=i[r])>=0||(e[o]=n[o]);return e}(n,["default"])}}function f(l,f){var y=f.h,m=void 0===y?n:y,b=f.title,g=void 0===b?"Stencilbook":b,x=f.homepage,h=void 0===x?m("h3",null,"Select a story!"):x,v=f.addons,k=void 0===v?[]:v,w=t(function(){return l.map(d).reduce(p,{_:[]})},l),S=decodeURIComponent(window.location.hash).replace("#",""),C=o(T(S)),z=C[0],O=C[1],j=null==z?void 0:z.key,I=o("desktop")[0],R=o(!0),U=R[0],_=R[1],B=o(!1),D=B[0],L=B[1];function T(n){var t;if(n){var o=decodeURIComponent(n).split("-"),r=o[1],e=o[2],i=null==(t=w[o[0]])?void 0:t.find(function(n){return n.story.title===r}),a=i.subs[e];return{key:n,story:a,parent:null==i?void 0:i.story,label:null==a?void 0:a.name}}}var q=function(){return m("div",{class:"dynamic-display-wrapper"},m("button",{class:D?"active":"",onClick:function(){return L(function(n){return!n})}},"Toggle Dark Background"),m("button",{class:U?"active":"",onClick:function(){return _(function(n){return!n})}},"Toggle Sidebar"))},A="mobile"===I?"375px":"tablet"===I?"768px":"1124px",N=e(s||(s=a(["\n    max-width: ",";\n    margin-left: ",";\n  "])),A,U?"250px":"0px"),P=e(c||(c=a(["\n    display: none;\n  "])));document.body.style.backgroundColor=D?"#232323":"#fafafa";var V=function(n){var t=n.selected,o=k.reduce(function(n,o){return function(){return m(o,{story:i({},t)},m(n,null))}},null==t?void 0:t.story);return m(o,null)},X=function(){return m("div",{class:"story-book-outer-div"},m("div",{class:"story-div "+(U?"":P)},m("div",{class:"header",onClick:function(){O(void 0)}},m("h2",null,g)),m("ul",{class:"parentStoryList"},Object.keys(w).sort().map(function(n){return m("div",{class:"group-wrapper"},"_"!==n&&m("h4",{class:"group-header"},n),w[n].map(function(t){var e=o(!1),i=e[0],a=e[1];return m("li",{class:"parentStory"},m("details",{style:{marginBottom:"10px"},open:i||(null==j?void 0:j.includes(n+"-"+t.story.title)),onClick:function(n){n.preventDefault(),a(!i)}},m("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map(function(o){var e=n+"-"+t.story.title+"-"+o,i=t.subs[o].storyName||r(o);return m("div",{class:"subStory "+(j===e?"selected":"")},m("a",{onClick:function(){return function(n){window.location.hash=encodeURIComponent(n),O(T(n))}(e)}},i))})))}))}))),m(q,null),m("div",{class:"component "+N},!j&&h,j&&m("div",null,m("h3",null,z.label),m(V,{selected:z}))))};return{class:u,children:m(X,null),View:X,selected:z}}export{f as useStencilbook};
 //# sourceMappingURL=index.module.js.map

dist/index.module.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.module.js","sources":["../src/stencil-storybook.styles.ts","../src/organiseStories.tsx","../src/stencil-storybook.tsx"],"sourcesContent":["// Emotion doesn't natively support named exports with Rollup\r\nimport { css } from \"@emotion/css\";\r\n\r\nexport const Style = css`\r\n  width: 100vw;\r\n  height: 100vh;\r\n\r\n  .story-book-outer-div {\r\n    .story-div {\r\n      font-family: \"Arial\", sans-serif;\r\n      font-size: 12px;\r\n    }\r\n    padding-bottom: 500px;\r\n  }\r\n\r\n  .story-div {\r\n    position: fixed;\r\n    box-sizing: border-box;\r\n    top: 0;\r\n    width: 250px;\r\n    height: 100vh;\r\n    z-index: 999;\r\n    overflow-y: scroll;\r\n    background: white;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .header {\r\n    padding: 24px 0 16px 16px;\r\n    margin-bottom: 24px;\r\n    color: white;\r\n    background: #333;\r\n    cursor: pointer;\r\n\r\n    h2 {\r\n      letter-spacing: 3px;\r\n      font-weight: 400;\r\n    }\r\n  }\r\n\r\n  .parentStoryList {\r\n    list-style: none;\r\n    padding-left: 16px;\r\n\r\n    summary {\r\n      margin-bottom: 4px;\r\n    }\r\n  }\r\n  .parentStory {\r\n    cursor: pointer;\r\n  }\r\n  .parentStory.selected {\r\n    font-weight: bold;\r\n  }\r\n\r\n  .subStory {\r\n    font-size: 12px;\r\n    cursor: pointer;\r\n    line-height: 1.5em;\r\n    margin-top: 4px;\r\n\r\n    a {\r\n      display: block;\r\n      padding: 4px 4px 4px 16px;\r\n    }\r\n  }\r\n  .subStory:hover {\r\n    background-color: #eee;\r\n  }\r\n  .subStory.selected {\r\n    background-color: lightgreen;\r\n  }\r\n\r\n  .component {\r\n    padding: 24px 16px;\r\n  }\r\n\r\n  h4.group-header {\r\n    margin: 8px 0;\r\n    text-transform: uppercase;\r\n    font-weight: 600;\r\n    font-size: 14px;\r\n    color: #575757;\r\n  }\r\n\r\n  .group-wrapper {\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .dynamic-display-wrapper {\r\n    position: fixed;\r\n    display: flex;\r\n    flex-direction: column;\r\n    bottom: 0;\r\n    left: 100%;\r\n    padding: 16px;\r\n    z-index: 1000;\r\n    background: white;\r\n    transform: translateX(-100%);\r\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n\r\n    & > :not(:first-child) {\r\n      margin-top: 12px;\r\n    }\r\n\r\n    p {\r\n      font-size: 12px;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    .button-wrapper {\r\n      display: flex;\r\n\r\n      & > :not(:first-child) {\r\n        margin-left: 12px;\r\n      }\r\n    }\r\n\r\n    & button {\r\n      border: 1px solid #eaeaea;\r\n      background: white;\r\n      border-radius: 4px;\r\n      color: #777;\r\n      padding: 4px 12px;\r\n      justify-content: center;\r\n      align-items: center;\r\n      text-align: center;\r\n\r\n      &.active {\r\n        background: #555;\r\n        border-color: #555;\r\n        color: white;\r\n      }\r\n    }\r\n  }\r\n`;\r\n","import { OrganisedStoryWithSubs, StoryWithSubs } from \".\";\r\n\r\nexport function organiseStories(\r\n  prev: OrganisedStoryWithSubs,\r\n  curr: StoryWithSubs\r\n): OrganisedStoryWithSubs {\r\n  const splitTitle = curr.story.title.split(\"/\");\r\n  const group = splitTitle[1] ? splitTitle[0] : \"_\";\r\n  const title = splitTitle[1] || splitTitle[0];\r\n\r\n  return {\r\n    ...prev,\r\n    [group]: [\r\n      ...(prev[group] || []),\r\n      {\r\n        story: {\r\n          ...curr.story,\r\n          title,\r\n        },\r\n        subs: curr.subs,\r\n      },\r\n    ].sort((a, b) => a.story.title.localeCompare(b.story.title)),\r\n  };\r\n}\r\n","import { h as StencilH, FunctionalComponent, VNode } from \"@stencil/core\";\r\nimport { useState, useMemo } from \"@saasquatch/universal-hooks\";\r\n\r\nimport startCase from \"lodash.startcase\";\r\nimport { Style } from \"./stencil-storybook.styles\";\r\nimport { css } from \"@emotion/css\";\r\nimport { organiseStories } from \"./organiseStories\";\r\nimport {\r\n  StorybookDefaultExport,\r\n  SubStories,\r\n  AddOn,\r\n  OrganisedStoryWithSubs,\r\n  StoryWithSubs,\r\n  Selection,\r\n} from \".\";\r\n\r\nfunction loadStory(imps: any) {\r\n  // TODO: Validate if something doesn't export things in Component Story Format (CSF)\r\n  const { default: defaultStory, ...rest } = imps;\r\n  return {\r\n    story: defaultStory as StorybookDefaultExport,\r\n    subs: rest as SubStories,\r\n  };\r\n}\r\n\r\ntype Layout = \"desktop\" | \"tablet\" | \"mobile\";\r\n\r\nexport type Return = {\r\n  class: string;\r\n  children: VNode;\r\n  View: FunctionalComponent<{}>;\r\n  selected: Selection;\r\n};\r\n\r\nexport function useStencilbook(\r\n  imports: unknown[],\r\n  {\r\n    h = StencilH,\r\n    title = \"Stencilbook\",\r\n    homepage = <h3>Select a story!</h3>,\r\n    addons = [],\r\n  }: {\r\n    h?: typeof StencilH;\r\n    title?: string;\r\n    homepage?: VNode;\r\n    addons?: AddOn[];\r\n  }\r\n): Return {\r\n  const stories: OrganisedStoryWithSubs = useMemo(\r\n    () =>\r\n      imports\r\n        .map(loadStory)\r\n        .reduce(organiseStories, { _: [] as StoryWithSubs[] }),\r\n    imports\r\n  );\r\n\r\n  const [Selected, setSelectedInternal] = useState<Selection>(undefined);\r\n  const selectedKey = Selected?.key;\r\n  const [layout, setLayout] = useState<Layout>(\"desktop\");\r\n  const [showSidebar, setShowSidebar] = useState<boolean>(true);\r\n  const [darkCanvas, setDarkCanvas] = useState<boolean>(false);\r\n  function setSelected(\r\n    story: FunctionalComponent,\r\n    key: string,\r\n    parent: StorybookDefaultExport,\r\n    label: string\r\n  ) {\r\n    setSelectedInternal({\r\n      key,\r\n      story,\r\n      parent,\r\n      label,\r\n    });\r\n  }\r\n  const WidthSelector = () => {\r\n    // Not the best way to display these buttons but don't wanna put too much time\r\n    return (\r\n      <div class=\"dynamic-display-wrapper\">\r\n        <div class=\"button-wrapper\">\r\n          <button\r\n            class={layout === \"desktop\" ? \"active\" : \"\"}\r\n            onClick={() => setLayout(\"desktop\")}\r\n          >\r\n            Desktop\r\n          </button>\r\n          <button\r\n            class={layout === \"tablet\" ? \"active\" : \"\"}\r\n            onClick={() => setLayout(\"tablet\")}\r\n          >\r\n            Tablet\r\n          </button>\r\n          <button\r\n            class={layout === \"mobile\" ? \"active\" : \"\"}\r\n            onClick={() => setLayout(\"mobile\")}\r\n          >\r\n            Mobile\r\n          </button>\r\n        </div>\r\n        <p>\r\n          Note: Currently doesn't test breakpoints, use the native tester for\r\n          now\r\n        </p>\r\n        <hr />\r\n        <button\r\n          class={darkCanvas ? \"active\" : \"\"}\r\n          onClick={() => setDarkCanvas((isDark) => !isDark)}\r\n        >\r\n          Toggle Dark Background\r\n        </button>\r\n        <hr />\r\n        <button\r\n          class={showSidebar ? \"active\" : \"\"}\r\n          onClick={() => setShowSidebar((isshown) => !isshown)}\r\n        >\r\n          Toggle Sidebar\r\n        </button>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  // Mobile/tablet widths are based on avocode designs\r\n  const containerWidth =\r\n    layout === \"mobile\" ? \"375px\" : layout === \"tablet\" ? \"768px\" : \"1124px\";\r\n  const responsiveWidth = css`\r\n    max-width: ${containerWidth};\r\n    margin-left: ${showSidebar ? \"250px\" : \"0px\"};\r\n  `;\r\n\r\n  const hide = css`\r\n    display: none;\r\n  `;\r\n\r\n  if (darkCanvas) {\r\n    document.body.style.backgroundColor = \"#232323\";\r\n  } else {\r\n    document.body.style.backgroundColor = \"#fafafa\";\r\n  }\r\n\r\n  const InnerFn = ({ selected }: { selected: Selection }) => {\r\n    const Component = addons.reduce<FunctionalComponent>((PrevFn, AddOnFn) => {\r\n      return () => (\r\n        <AddOnFn\r\n          story={{\r\n            ...selected,\r\n          }}\r\n        >\r\n          <PrevFn />\r\n        </AddOnFn>\r\n      );\r\n    }, selected?.story);\r\n    return <Component />;\r\n  };\r\n\r\n  const GoHome = () => {\r\n    setSelectedInternal(undefined);\r\n  };\r\n\r\n  const View = () => (\r\n    <div class=\"story-book-outer-div\">\r\n      <div class={`story-div ${!showSidebar ? hide : \"\"}`}>\r\n        <div class=\"header\" onClick={() => GoHome()}>\r\n          <h2>{title}</h2>\r\n        </div>\r\n        <ul class=\"parentStoryList\">\r\n          {Object.keys(stories)\r\n            .sort()\r\n            .map((group) => {\r\n              return (\r\n                <div class=\"group-wrapper\">\r\n                  {group !== \"_\" && <h4 class=\"group-header\">{group}</h4>}\r\n                  {stories[group].map((s) => {\r\n                    return (\r\n                      <li class=\"parentStory\">\r\n                        <details style={{ marginBottom: \"10px\" }}>\r\n                          <summary style={{ outline: \"none\" }}>\r\n                            {s.story.title}\r\n                          </summary>\r\n                          {s.subs &&\r\n                            Object.keys(s.subs).map((subKey) => {\r\n                              const key = group + \"/\" + subKey;\r\n                              const subStory = s.subs[subKey];\r\n                              const subStoryView = () => <subStory />;\r\n                              const label =\r\n                                subStory.storyName || startCase(subKey);\r\n                              return (\r\n                                <div\r\n                                  class={`subStory ${\r\n                                    selectedKey === key ? \"selected\" : \"\"\r\n                                  }`}\r\n                                >\r\n                                  <a\r\n                                    onClick={() =>\r\n                                      setSelected(subStory, key, s.story, label)\r\n                                    }\r\n                                  >\r\n                                    {label}\r\n                                  </a>\r\n                                </div>\r\n                              );\r\n                            })}\r\n                        </details>\r\n                      </li>\r\n                    );\r\n                  })}\r\n                </div>\r\n              );\r\n            })}\r\n        </ul>\r\n      </div>\r\n      <WidthSelector />\r\n      <div class={`component ${responsiveWidth}`}>\r\n        {!selectedKey && homepage}\r\n        {selectedKey && (\r\n          <div>\r\n            {/* <pre>{selected.specs}</pre> */}\r\n            <h3>{Selected.label}</h3>\r\n            <InnerFn selected={Selected} />\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n\r\n  return {\r\n    class: Style,\r\n    children: <View />,\r\n    View,\r\n    selected: Selected,\r\n  };\r\n}\r\n"],"names":["Style","css","organiseStories","prev","curr","splitTitle","story","title","split","group","subs","sort","a","b","localeCompare","loadStory","imps","useStencilbook","imports","h","StencilH","homepage","addons","stories","useMemo","map","reduce","_","useState","undefined","Selected","setSelectedInternal","selectedKey","key","layout","setLayout","showSidebar","setShowSidebar","darkCanvas","setDarkCanvas","WidthSelector","class","onClick","isDark","isshown","containerWidth","responsiveWidth","hide","document","body","style","backgroundColor","InnerFn","selected","Component","PrevFn","AddOnFn","View","Object","keys","s","marginBottom","outline","subKey","subStory","label","storyName","startCase","parent","setSelected","children"],"mappings":"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"}
+{"version":3,"file":"index.module.js","sources":["../src/stencil-storybook.styles.ts","../src/organiseStories.tsx","../src/stencil-storybook.tsx"],"sourcesContent":["// Emotion doesn't natively support named exports with Rollup\nimport { css } from \"@emotion/css\";\n\nexport const Style = css`\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: \"Arial\", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n`;\n","import { OrganisedStoryWithSubs, StoryWithSubs } from \".\";\n\nexport function organiseStories(\n  prev: OrganisedStoryWithSubs,\n  curr: StoryWithSubs\n): OrganisedStoryWithSubs {\n  const splitTitle = curr.story.title.split(\"/\");\n  const group = splitTitle[1] ? splitTitle[0] : \"_\";\n  const title = splitTitle[1] || splitTitle[0];\n\n  return {\n    ...prev,\n    [group]: [\n      ...(prev[group] || []),\n      {\n        story: {\n          ...curr.story,\n          title,\n        },\n        subs: curr.subs,\n      },\n    ].sort((a, b) => a.story.title.localeCompare(b.story.title)),\n  };\n}\n","import { h as StencilH, FunctionalComponent, VNode } from \"@stencil/core\";\nimport { useState, useMemo, useEffect } from \"@saasquatch/universal-hooks\";\n\nimport startCase from \"lodash.startcase\";\nimport { Style } from \"./stencil-storybook.styles\";\nimport { css } from \"@emotion/css\";\nimport { organiseStories } from \"./organiseStories\";\nimport {\n  StorybookDefaultExport,\n  SubStories,\n  AddOn,\n  OrganisedStoryWithSubs,\n  StoryWithSubs,\n  Selection,\n} from \".\";\n\nfunction loadStory(imps: any) {\n  // TODO: Validate if something doesn't export things in Component Story Format (CSF)\n  const { default: defaultStory, ...rest } = imps;\n  return {\n    story: defaultStory as StorybookDefaultExport,\n    subs: rest as SubStories,\n  };\n}\n\ntype Layout = \"desktop\" | \"tablet\" | \"mobile\";\n\nexport type Return = {\n  class: string;\n  children: VNode;\n  View: FunctionalComponent<{}>;\n  selected: Selection;\n};\n\nexport function useStencilbook(\n  imports: unknown[],\n  {\n    h = StencilH,\n    title = \"Stencilbook\",\n    homepage = <h3>Select a story!</h3>,\n    addons = [],\n  }: {\n    h?: typeof StencilH;\n    title?: string;\n    homepage?: VNode;\n    addons?: AddOn[];\n  }\n): Return {\n  const stories: OrganisedStoryWithSubs = useMemo(\n    () =>\n      imports\n        .map(loadStory)\n        .reduce(organiseStories, { _: [] as StoryWithSubs[] }),\n    imports\n  );\n\n  const urlStoryKey = decodeURIComponent(window.location.hash).replace(\"#\", \"\");\n  const [Selected, setSelectedInternal] = useState<Selection>(\n    getStoryFromKey(urlStoryKey)\n  );\n  const selectedKey = Selected?.key;\n  const [layout, setLayout] = useState<Layout>(\"desktop\");\n  const [showSidebar, setShowSidebar] = useState<boolean>(true);\n  const [darkCanvas, setDarkCanvas] = useState<boolean>(false);\n\n  function getStoryFromKey(key?: string) {\n    if (!key) return undefined;\n\n    const keys = decodeURIComponent(key).split(\"-\");\n    const group = keys[0];\n    const parentTitle = keys[1];\n    const subKey = keys[2];\n\n    const s = stories[group]?.find(\n      (element) => element.story.title === parentTitle\n    );\n    const subStory = s.subs[subKey];\n    return {\n      key,\n      story: subStory,\n      parent: s?.story,\n      label: subStory?.name,\n    };\n  }\n  function setSelectedStory(key: string) {\n    window.location.hash = encodeURIComponent(key);\n    setSelectedInternal(getStoryFromKey(key));\n  }\n\n  const WidthSelector = () => {\n    // Not the best way to display these buttons but don't wanna put too much time\n    return (\n      <div class=\"dynamic-display-wrapper\">\n        <button\n          class={darkCanvas ? \"active\" : \"\"}\n          onClick={() => setDarkCanvas((isDark) => !isDark)}\n        >\n          Toggle Dark Background\n        </button>\n        <button\n          class={showSidebar ? \"active\" : \"\"}\n          onClick={() => setShowSidebar((isshown) => !isshown)}\n        >\n          Toggle Sidebar\n        </button>\n      </div>\n    );\n  };\n\n  // Mobile/tablet widths are based on avocode designs\n  const containerWidth =\n    layout === \"mobile\" ? \"375px\" : layout === \"tablet\" ? \"768px\" : \"1124px\";\n  const responsiveWidth = css`\n    max-width: ${containerWidth};\n    margin-left: ${showSidebar ? \"250px\" : \"0px\"};\n  `;\n\n  const hide = css`\n    display: none;\n  `;\n\n  if (darkCanvas) {\n    document.body.style.backgroundColor = \"#232323\";\n  } else {\n    document.body.style.backgroundColor = \"#fafafa\";\n  }\n\n  const InnerFn = ({ selected }: { selected: Selection }) => {\n    const Component = addons.reduce<FunctionalComponent>((PrevFn, AddOnFn) => {\n      return () => (\n        <AddOnFn\n          story={{\n            ...selected,\n          }}\n        >\n          <PrevFn />\n        </AddOnFn>\n      );\n    }, selected?.story);\n    return <Component />;\n  };\n\n  const GoHome = () => {\n    setSelectedInternal(undefined);\n  };\n\n  const View = () => (\n    <div class=\"story-book-outer-div\">\n      <div class={`story-div ${!showSidebar ? hide : \"\"}`}>\n        <div class=\"header\" onClick={() => GoHome()}>\n          <h2>{title}</h2>\n        </div>\n        <ul class=\"parentStoryList\">\n          {Object.keys(stories)\n            .sort()\n            .map((group) => {\n              return (\n                <div class=\"group-wrapper\">\n                  {group !== \"_\" && <h4 class=\"group-header\">{group}</h4>}\n                  {stories[group].map((s) => {\n                    const [isOpen, setIsOpen] = useState<Boolean>(false);\n                    return (\n                      <li class=\"parentStory\">\n                        <details\n                          style={{ marginBottom: \"10px\" }}\n                          open={\n                            isOpen ||\n                            selectedKey?.includes(`${group}-${s.story.title}`)\n                          }\n                          onClick={(e) => {\n                            e.preventDefault();\n                            setIsOpen(!isOpen);\n                          }}\n                        >\n                          <summary style={{ outline: \"none\" }}>\n                            {s.story.title}\n                          </summary>\n                          {s.subs &&\n                            Object.keys(s.subs).map((subKey) => {\n                              const key = `${group}-${s.story.title}-${subKey}`;\n                              const subStory = s.subs[subKey];\n                              const subStoryView = () => <subStory />;\n                              const label =\n                                subStory.storyName || startCase(subKey);\n                              return (\n                                <div\n                                  class={`subStory ${\n                                    selectedKey === key ? \"selected\" : \"\"\n                                  }`}\n                                >\n                                  <a onClick={() => setSelectedStory(key)}>\n                                    {label}\n                                  </a>\n                                </div>\n                              );\n                            })}\n                        </details>\n                      </li>\n                    );\n                  })}\n                </div>\n              );\n            })}\n        </ul>\n      </div>\n      <WidthSelector />\n      <div class={`component ${responsiveWidth}`}>\n        {!selectedKey && homepage}\n        {selectedKey && (\n          <div>\n            {/* <pre>{selected.specs}</pre> */}\n            <h3>{Selected.label}</h3>\n            <InnerFn selected={Selected} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return {\n    class: Style,\n    children: <View />,\n    View,\n    selected: Selected,\n  };\n}\n"],"names":["Style","css","organiseStories","prev","curr","splitTitle","story","title","split","group","subs","sort","a","b","localeCompare","loadStory","imps","useStencilbook","imports","h","StencilH","homepage","addons","stories","useMemo","map","reduce","_","urlStoryKey","decodeURIComponent","window","location","hash","replace","useState","getStoryFromKey","Selected","setSelectedInternal","selectedKey","key","layout","showSidebar","setShowSidebar","darkCanvas","setDarkCanvas","keys","parentTitle","subKey","s","_stories$group","find","element","subStory","parent","label","name","WidthSelector","class","onClick","isDark","isshown","containerWidth","responsiveWidth","hide","document","body","style","backgroundColor","InnerFn","selected","Component","PrevFn","AddOnFn","View","undefined","Object","isOpen","setIsOpen","marginBottom","open","includes","e","preventDefault","outline","storyName","startCase","encodeURIComponent","setSelectedStory","children"],"mappings":"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"}

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@stencil/core"),require("@saasquatch/universal-hooks"),require("lodash.startcase"),require("@emotion/css")):"function"==typeof define&&define.amd?define(["exports","@stencil/core","@saasquatch/universal-hooks","lodash.startcase","@emotion/css"],t):t((n||self).stencilbook={},n.core,n.universalHooks,n.startCase,n.css)}(this,function(n,t,e,o,r){function i(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var s,a=i(o);function l(){return(l=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o])}return n}).apply(this,arguments)}function u(n,t){return t||(t=n.slice(0)),n.raw=t,n}var c,p,d=r.css(s||(s=u(['\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: "Arial", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n'])));function f(n,t){var e,o=t.story.title.split("/"),r=o[1]?o[0]:"_";return l({},n,((e={})[r]=[].concat(n[r]||[],[{story:l({},t.story,{title:o[1]||o[0]}),subs:t.subs}]).sort(function(n,t){return n.story.title.localeCompare(t.story.title)}),e))}function b(n){return{story:n.default,subs:function(n,t){if(null==n)return{};var e,o,r={},i=Object.keys(n);for(o=0;o<i.length;o++)t.indexOf(e=i[o])>=0||(r[e]=n[e]);return r}(n,["default"])}}n.useStencilbook=function(n,o){var i=o.h,s=void 0===i?t.h:i,y=o.title,g=void 0===y?"Stencilbook":y,x=o.homepage,h=void 0===x?s("h3",null,"Select a story!"):x,m=o.addons,v=void 0===m?[]:m,k=e.useMemo(function(){return n.map(b).reduce(f,{_:[]})},n),w=e.useState(void 0),S=w[0],C=w[1],j=null==S?void 0:S.key,z=e.useState("desktop"),O=z[0],q=z[1],T=e.useState(!0),_=T[0],B=T[1],D=e.useState(!1),L=D[0],M=D[1],N=function(){return s("div",{class:"dynamic-display-wrapper"},s("div",{class:"button-wrapper"},s("button",{class:"desktop"===O?"active":"",onClick:function(){return q("desktop")}},"Desktop"),s("button",{class:"tablet"===O?"active":"",onClick:function(){return q("tablet")}},"Tablet"),s("button",{class:"mobile"===O?"active":"",onClick:function(){return q("mobile")}},"Mobile")),s("p",null,"Note: Currently doesn't test breakpoints, use the native tester for now"),s("hr",null),s("button",{class:L?"active":"",onClick:function(){return M(function(n){return!n})}},"Toggle Dark Background"),s("hr",null),s("button",{class:_?"active":"",onClick:function(){return B(function(n){return!n})}},"Toggle Sidebar"))},A="mobile"===O?"375px":"tablet"===O?"768px":"1124px",H=r.css(c||(c=u(["\n    max-width: ",";\n    margin-left: ",";\n  "])),A,_?"250px":"0px"),P=r.css(p||(p=u(["\n    display: none;\n  "])));document.body.style.backgroundColor=L?"#232323":"#fafafa";var V=function(n){var t=n.selected,e=v.reduce(function(n,e){return function(){return s(e,{story:l({},t)},s(n,null))}},null==t?void 0:t.story);return s(e,null)},X=function(){return s("div",{class:"story-book-outer-div"},s("div",{class:"story-div "+(_?"":P)},s("div",{class:"header",onClick:function(){C(void 0)}},s("h2",null,g)),s("ul",{class:"parentStoryList"},Object.keys(k).sort().map(function(n){return s("div",{class:"group-wrapper"},"_"!==n&&s("h4",{class:"group-header"},n),k[n].map(function(t){return s("li",{class:"parentStory"},s("details",{style:{marginBottom:"10px"}},s("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map(function(e){var o=n+"/"+e,r=t.subs[e],i=r.storyName||a.default(e);return s("div",{class:"subStory "+(j===o?"selected":"")},s("a",{onClick:function(){return function(n,t,e,o){C({key:t,story:n,parent:e,label:o})}(r,o,t.story,i)}},i))})))}))}))),s(N,null),s("div",{class:"component "+H},!j&&h,j&&s("div",null,s("h3",null,S.label),s(V,{selected:S}))))};return{class:d,children:s(X,null),View:X,selected:S}}});
+!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@stencil/core"),require("@saasquatch/universal-hooks"),require("lodash.startcase"),require("@emotion/css")):"function"==typeof define&&define.amd?define(["exports","@stencil/core","@saasquatch/universal-hooks","lodash.startcase","@emotion/css"],t):t((n||self).stencilbook={},n.core,n.universalHooks,n.startCase,n.css)}(this,function(n,t,e,o,r){function i(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var s,a=i(o);function l(){return(l=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o])}return n}).apply(this,arguments)}function u(n,t){return t||(t=n.slice(0)),n.raw=t,n}var c,d,p=r.css(s||(s=u(['\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: "Arial", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n'])));function f(n,t){var e,o=t.story.title.split("/"),r=o[1]?o[0]:"_";return l({},n,((e={})[r]=[].concat(n[r]||[],[{story:l({},t.story,{title:o[1]||o[0]}),subs:t.subs}]).sort(function(n,t){return n.story.title.localeCompare(t.story.title)}),e))}function y(n){return{story:n.default,subs:function(n,t){if(null==n)return{};var e,o,r={},i=Object.keys(n);for(o=0;o<i.length;o++)t.indexOf(e=i[o])>=0||(r[e]=n[e]);return r}(n,["default"])}}n.useStencilbook=function(n,o){var i=o.h,s=void 0===i?t.h:i,b=o.title,g=void 0===b?"Stencilbook":b,h=o.homepage,x=void 0===h?s("h3",null,"Select a story!"):h,m=o.addons,v=void 0===m?[]:m,k=e.useMemo(function(){return n.map(y).reduce(f,{_:[]})},n),w=decodeURIComponent(window.location.hash).replace("#",""),S=e.useState(B(w)),C=S[0],j=S[1],z=null==C?void 0:C.key,O=e.useState("desktop")[0],q=e.useState(!0),T=q[0],I=q[1],R=e.useState(!1),U=R[0],_=R[1];function B(n){var t;if(n){var e=decodeURIComponent(n).split("-"),o=e[1],r=e[2],i=null==(t=k[e[0]])?void 0:t.find(function(n){return n.story.title===o}),s=i.subs[r];return{key:n,story:s,parent:null==i?void 0:i.story,label:null==s?void 0:s.name}}}var D=function(){return s("div",{class:"dynamic-display-wrapper"},s("button",{class:U?"active":"",onClick:function(){return _(function(n){return!n})}},"Toggle Dark Background"),s("button",{class:T?"active":"",onClick:function(){return I(function(n){return!n})}},"Toggle Sidebar"))},L="mobile"===O?"375px":"tablet"===O?"768px":"1124px",A=r.css(c||(c=u(["\n    max-width: ",";\n    margin-left: ",";\n  "])),L,T?"250px":"0px"),H=r.css(d||(d=u(["\n    display: none;\n  "])));document.body.style.backgroundColor=U?"#232323":"#fafafa";var M=function(n){var t=n.selected,e=v.reduce(function(n,e){return function(){return s(e,{story:l({},t)},s(n,null))}},null==t?void 0:t.story);return s(e,null)},N=function(){return s("div",{class:"story-book-outer-div"},s("div",{class:"story-div "+(T?"":H)},s("div",{class:"header",onClick:function(){j(void 0)}},s("h2",null,g)),s("ul",{class:"parentStoryList"},Object.keys(k).sort().map(function(n){return s("div",{class:"group-wrapper"},"_"!==n&&s("h4",{class:"group-header"},n),k[n].map(function(t){var o=e.useState(!1),r=o[0],i=o[1];return s("li",{class:"parentStory"},s("details",{style:{marginBottom:"10px"},open:r||(null==z?void 0:z.includes(n+"-"+t.story.title)),onClick:function(n){n.preventDefault(),i(!r)}},s("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map(function(e){var o=n+"-"+t.story.title+"-"+e,r=t.subs[e].storyName||a.default(e);return s("div",{class:"subStory "+(z===o?"selected":"")},s("a",{onClick:function(){return function(n){window.location.hash=encodeURIComponent(n),j(B(n))}(o)}},r))})))}))}))),s(D,null),s("div",{class:"component "+A},!z&&x,z&&s("div",null,s("h3",null,C.label),s(M,{selected:C}))))};return{class:p,children:s(N,null),View:N,selected:C}}});
 //# sourceMappingURL=index.umd.js.map

dist/index.umd.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.umd.js","sources":["../src/stencil-storybook.styles.ts","../src/organiseStories.tsx","../src/stencil-storybook.tsx"],"sourcesContent":["// Emotion doesn't natively support named exports with Rollup\r\nimport { css } from \"@emotion/css\";\r\n\r\nexport const Style = css`\r\n  width: 100vw;\r\n  height: 100vh;\r\n\r\n  .story-book-outer-div {\r\n    .story-div {\r\n      font-family: \"Arial\", sans-serif;\r\n      font-size: 12px;\r\n    }\r\n    padding-bottom: 500px;\r\n  }\r\n\r\n  .story-div {\r\n    position: fixed;\r\n    box-sizing: border-box;\r\n    top: 0;\r\n    width: 250px;\r\n    height: 100vh;\r\n    z-index: 999;\r\n    overflow-y: scroll;\r\n    background: white;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .header {\r\n    padding: 24px 0 16px 16px;\r\n    margin-bottom: 24px;\r\n    color: white;\r\n    background: #333;\r\n    cursor: pointer;\r\n\r\n    h2 {\r\n      letter-spacing: 3px;\r\n      font-weight: 400;\r\n    }\r\n  }\r\n\r\n  .parentStoryList {\r\n    list-style: none;\r\n    padding-left: 16px;\r\n\r\n    summary {\r\n      margin-bottom: 4px;\r\n    }\r\n  }\r\n  .parentStory {\r\n    cursor: pointer;\r\n  }\r\n  .parentStory.selected {\r\n    font-weight: bold;\r\n  }\r\n\r\n  .subStory {\r\n    font-size: 12px;\r\n    cursor: pointer;\r\n    line-height: 1.5em;\r\n    margin-top: 4px;\r\n\r\n    a {\r\n      display: block;\r\n      padding: 4px 4px 4px 16px;\r\n    }\r\n  }\r\n  .subStory:hover {\r\n    background-color: #eee;\r\n  }\r\n  .subStory.selected {\r\n    background-color: lightgreen;\r\n  }\r\n\r\n  .component {\r\n    padding: 24px 16px;\r\n  }\r\n\r\n  h4.group-header {\r\n    margin: 8px 0;\r\n    text-transform: uppercase;\r\n    font-weight: 600;\r\n    font-size: 14px;\r\n    color: #575757;\r\n  }\r\n\r\n  .group-wrapper {\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .dynamic-display-wrapper {\r\n    position: fixed;\r\n    display: flex;\r\n    flex-direction: column;\r\n    bottom: 0;\r\n    left: 100%;\r\n    padding: 16px;\r\n    z-index: 1000;\r\n    background: white;\r\n    transform: translateX(-100%);\r\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n\r\n    & > :not(:first-child) {\r\n      margin-top: 12px;\r\n    }\r\n\r\n    p {\r\n      font-size: 12px;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    .button-wrapper {\r\n      display: flex;\r\n\r\n      & > :not(:first-child) {\r\n        margin-left: 12px;\r\n      }\r\n    }\r\n\r\n    & button {\r\n      border: 1px solid #eaeaea;\r\n      background: white;\r\n      border-radius: 4px;\r\n      color: #777;\r\n      padding: 4px 12px;\r\n      justify-content: center;\r\n      align-items: center;\r\n      text-align: center;\r\n\r\n      &.active {\r\n        background: #555;\r\n        border-color: #555;\r\n        color: white;\r\n      }\r\n    }\r\n  }\r\n`;\r\n","import { OrganisedStoryWithSubs, StoryWithSubs } from \".\";\r\n\r\nexport function organiseStories(\r\n  prev: OrganisedStoryWithSubs,\r\n  curr: StoryWithSubs\r\n): OrganisedStoryWithSubs {\r\n  const splitTitle = curr.story.title.split(\"/\");\r\n  const group = splitTitle[1] ? splitTitle[0] : \"_\";\r\n  const title = splitTitle[1] || splitTitle[0];\r\n\r\n  return {\r\n    ...prev,\r\n    [group]: [\r\n      ...(prev[group] || []),\r\n      {\r\n        story: {\r\n          ...curr.story,\r\n          title,\r\n        },\r\n        subs: curr.subs,\r\n      },\r\n    ].sort((a, b) => a.story.title.localeCompare(b.story.title)),\r\n  };\r\n}\r\n","import { h as StencilH, FunctionalComponent, VNode } from \"@stencil/core\";\r\nimport { useState, useMemo } from \"@saasquatch/universal-hooks\";\r\n\r\nimport startCase from \"lodash.startcase\";\r\nimport { Style } from \"./stencil-storybook.styles\";\r\nimport { css } from \"@emotion/css\";\r\nimport { organiseStories } from \"./organiseStories\";\r\nimport {\r\n  StorybookDefaultExport,\r\n  SubStories,\r\n  AddOn,\r\n  OrganisedStoryWithSubs,\r\n  StoryWithSubs,\r\n  Selection,\r\n} from \".\";\r\n\r\nfunction loadStory(imps: any) {\r\n  // TODO: Validate if something doesn't export things in Component Story Format (CSF)\r\n  const { default: defaultStory, ...rest } = imps;\r\n  return {\r\n    story: defaultStory as StorybookDefaultExport,\r\n    subs: rest as SubStories,\r\n  };\r\n}\r\n\r\ntype Layout = \"desktop\" | \"tablet\" | \"mobile\";\r\n\r\nexport type Return = {\r\n  class: string;\r\n  children: VNode;\r\n  View: FunctionalComponent<{}>;\r\n  selected: Selection;\r\n};\r\n\r\nexport function useStencilbook(\r\n  imports: unknown[],\r\n  {\r\n    h = StencilH,\r\n    title = \"Stencilbook\",\r\n    homepage = <h3>Select a story!</h3>,\r\n    addons = [],\r\n  }: {\r\n    h?: typeof StencilH;\r\n    title?: string;\r\n    homepage?: VNode;\r\n    addons?: AddOn[];\r\n  }\r\n): Return {\r\n  const stories: OrganisedStoryWithSubs = useMemo(\r\n    () =>\r\n      imports\r\n        .map(loadStory)\r\n        .reduce(organiseStories, { _: [] as StoryWithSubs[] }),\r\n    imports\r\n  );\r\n\r\n  const [Selected, setSelectedInternal] = useState<Selection>(undefined);\r\n  const selectedKey = Selected?.key;\r\n  const [layout, setLayout] = useState<Layout>(\"desktop\");\r\n  const [showSidebar, setShowSidebar] = useState<boolean>(true);\r\n  const [darkCanvas, setDarkCanvas] = useState<boolean>(false);\r\n  function setSelected(\r\n    story: FunctionalComponent,\r\n    key: string,\r\n    parent: StorybookDefaultExport,\r\n    label: string\r\n  ) {\r\n    setSelectedInternal({\r\n      key,\r\n      story,\r\n      parent,\r\n      label,\r\n    });\r\n  }\r\n  const WidthSelector = () => {\r\n    // Not the best way to display these buttons but don't wanna put too much time\r\n    return (\r\n      <div class=\"dynamic-display-wrapper\">\r\n        <div class=\"button-wrapper\">\r\n          <button\r\n            class={layout === \"desktop\" ? \"active\" : \"\"}\r\n            onClick={() => setLayout(\"desktop\")}\r\n          >\r\n            Desktop\r\n          </button>\r\n          <button\r\n            class={layout === \"tablet\" ? \"active\" : \"\"}\r\n            onClick={() => setLayout(\"tablet\")}\r\n          >\r\n            Tablet\r\n          </button>\r\n          <button\r\n            class={layout === \"mobile\" ? \"active\" : \"\"}\r\n            onClick={() => setLayout(\"mobile\")}\r\n          >\r\n            Mobile\r\n          </button>\r\n        </div>\r\n        <p>\r\n          Note: Currently doesn't test breakpoints, use the native tester for\r\n          now\r\n        </p>\r\n        <hr />\r\n        <button\r\n          class={darkCanvas ? \"active\" : \"\"}\r\n          onClick={() => setDarkCanvas((isDark) => !isDark)}\r\n        >\r\n          Toggle Dark Background\r\n        </button>\r\n        <hr />\r\n        <button\r\n          class={showSidebar ? \"active\" : \"\"}\r\n          onClick={() => setShowSidebar((isshown) => !isshown)}\r\n        >\r\n          Toggle Sidebar\r\n        </button>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  // Mobile/tablet widths are based on avocode designs\r\n  const containerWidth =\r\n    layout === \"mobile\" ? \"375px\" : layout === \"tablet\" ? \"768px\" : \"1124px\";\r\n  const responsiveWidth = css`\r\n    max-width: ${containerWidth};\r\n    margin-left: ${showSidebar ? \"250px\" : \"0px\"};\r\n  `;\r\n\r\n  const hide = css`\r\n    display: none;\r\n  `;\r\n\r\n  if (darkCanvas) {\r\n    document.body.style.backgroundColor = \"#232323\";\r\n  } else {\r\n    document.body.style.backgroundColor = \"#fafafa\";\r\n  }\r\n\r\n  const InnerFn = ({ selected }: { selected: Selection }) => {\r\n    const Component = addons.reduce<FunctionalComponent>((PrevFn, AddOnFn) => {\r\n      return () => (\r\n        <AddOnFn\r\n          story={{\r\n            ...selected,\r\n          }}\r\n        >\r\n          <PrevFn />\r\n        </AddOnFn>\r\n      );\r\n    }, selected?.story);\r\n    return <Component />;\r\n  };\r\n\r\n  const GoHome = () => {\r\n    setSelectedInternal(undefined);\r\n  };\r\n\r\n  const View = () => (\r\n    <div class=\"story-book-outer-div\">\r\n      <div class={`story-div ${!showSidebar ? hide : \"\"}`}>\r\n        <div class=\"header\" onClick={() => GoHome()}>\r\n          <h2>{title}</h2>\r\n        </div>\r\n        <ul class=\"parentStoryList\">\r\n          {Object.keys(stories)\r\n            .sort()\r\n            .map((group) => {\r\n              return (\r\n                <div class=\"group-wrapper\">\r\n                  {group !== \"_\" && <h4 class=\"group-header\">{group}</h4>}\r\n                  {stories[group].map((s) => {\r\n                    return (\r\n                      <li class=\"parentStory\">\r\n                        <details style={{ marginBottom: \"10px\" }}>\r\n                          <summary style={{ outline: \"none\" }}>\r\n                            {s.story.title}\r\n                          </summary>\r\n                          {s.subs &&\r\n                            Object.keys(s.subs).map((subKey) => {\r\n                              const key = group + \"/\" + subKey;\r\n                              const subStory = s.subs[subKey];\r\n                              const subStoryView = () => <subStory />;\r\n                              const label =\r\n                                subStory.storyName || startCase(subKey);\r\n                              return (\r\n                                <div\r\n                                  class={`subStory ${\r\n                                    selectedKey === key ? \"selected\" : \"\"\r\n                                  }`}\r\n                                >\r\n                                  <a\r\n                                    onClick={() =>\r\n                                      setSelected(subStory, key, s.story, label)\r\n                                    }\r\n                                  >\r\n                                    {label}\r\n                                  </a>\r\n                                </div>\r\n                              );\r\n                            })}\r\n                        </details>\r\n                      </li>\r\n                    );\r\n                  })}\r\n                </div>\r\n              );\r\n            })}\r\n        </ul>\r\n      </div>\r\n      <WidthSelector />\r\n      <div class={`component ${responsiveWidth}`}>\r\n        {!selectedKey && homepage}\r\n        {selectedKey && (\r\n          <div>\r\n            {/* <pre>{selected.specs}</pre> */}\r\n            <h3>{Selected.label}</h3>\r\n            <InnerFn selected={Selected} />\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n\r\n  return {\r\n    class: Style,\r\n    children: <View />,\r\n    View,\r\n    selected: Selected,\r\n  };\r\n}\r\n"],"names":["Style","css","organiseStories","prev","curr","splitTitle","story","title","split","group","subs","sort","a","b","localeCompare","loadStory","imps","imports","h","StencilH","homepage","addons","stories","useMemo","map","reduce","_","useState","undefined","Selected","setSelectedInternal","selectedKey","key","layout","setLayout","showSidebar","setShowSidebar","darkCanvas","setDarkCanvas","WidthSelector","class","onClick","isDark","isshown","containerWidth","responsiveWidth","hide","document","body","style","backgroundColor","InnerFn","selected","Component","PrevFn","AddOnFn","View","Object","keys","s","marginBottom","outline","subKey","subStory","label","storyName","startCase","parent","setSelected","children"],"mappings":"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"}
+{"version":3,"file":"index.umd.js","sources":["../src/stencil-storybook.styles.ts","../src/organiseStories.tsx","../src/stencil-storybook.tsx"],"sourcesContent":["// Emotion doesn't natively support named exports with Rollup\nimport { css } from \"@emotion/css\";\n\nexport const Style = css`\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: \"Arial\", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n`;\n","import { OrganisedStoryWithSubs, StoryWithSubs } from \".\";\n\nexport function organiseStories(\n  prev: OrganisedStoryWithSubs,\n  curr: StoryWithSubs\n): OrganisedStoryWithSubs {\n  const splitTitle = curr.story.title.split(\"/\");\n  const group = splitTitle[1] ? splitTitle[0] : \"_\";\n  const title = splitTitle[1] || splitTitle[0];\n\n  return {\n    ...prev,\n    [group]: [\n      ...(prev[group] || []),\n      {\n        story: {\n          ...curr.story,\n          title,\n        },\n        subs: curr.subs,\n      },\n    ].sort((a, b) => a.story.title.localeCompare(b.story.title)),\n  };\n}\n","import { h as StencilH, FunctionalComponent, VNode } from \"@stencil/core\";\nimport { useState, useMemo, useEffect } from \"@saasquatch/universal-hooks\";\n\nimport startCase from \"lodash.startcase\";\nimport { Style } from \"./stencil-storybook.styles\";\nimport { css } from \"@emotion/css\";\nimport { organiseStories } from \"./organiseStories\";\nimport {\n  StorybookDefaultExport,\n  SubStories,\n  AddOn,\n  OrganisedStoryWithSubs,\n  StoryWithSubs,\n  Selection,\n} from \".\";\n\nfunction loadStory(imps: any) {\n  // TODO: Validate if something doesn't export things in Component Story Format (CSF)\n  const { default: defaultStory, ...rest } = imps;\n  return {\n    story: defaultStory as StorybookDefaultExport,\n    subs: rest as SubStories,\n  };\n}\n\ntype Layout = \"desktop\" | \"tablet\" | \"mobile\";\n\nexport type Return = {\n  class: string;\n  children: VNode;\n  View: FunctionalComponent<{}>;\n  selected: Selection;\n};\n\nexport function useStencilbook(\n  imports: unknown[],\n  {\n    h = StencilH,\n    title = \"Stencilbook\",\n    homepage = <h3>Select a story!</h3>,\n    addons = [],\n  }: {\n    h?: typeof StencilH;\n    title?: string;\n    homepage?: VNode;\n    addons?: AddOn[];\n  }\n): Return {\n  const stories: OrganisedStoryWithSubs = useMemo(\n    () =>\n      imports\n        .map(loadStory)\n        .reduce(organiseStories, { _: [] as StoryWithSubs[] }),\n    imports\n  );\n\n  const urlStoryKey = decodeURIComponent(window.location.hash).replace(\"#\", \"\");\n  const [Selected, setSelectedInternal] = useState<Selection>(\n    getStoryFromKey(urlStoryKey)\n  );\n  const selectedKey = Selected?.key;\n  const [layout, setLayout] = useState<Layout>(\"desktop\");\n  const [showSidebar, setShowSidebar] = useState<boolean>(true);\n  const [darkCanvas, setDarkCanvas] = useState<boolean>(false);\n\n  function getStoryFromKey(key?: string) {\n    if (!key) return undefined;\n\n    const keys = decodeURIComponent(key).split(\"-\");\n    const group = keys[0];\n    const parentTitle = keys[1];\n    const subKey = keys[2];\n\n    const s = stories[group]?.find(\n      (element) => element.story.title === parentTitle\n    );\n    const subStory = s.subs[subKey];\n    return {\n      key,\n      story: subStory,\n      parent: s?.story,\n      label: subStory?.name,\n    };\n  }\n  function setSelectedStory(key: string) {\n    window.location.hash = encodeURIComponent(key);\n    setSelectedInternal(getStoryFromKey(key));\n  }\n\n  const WidthSelector = () => {\n    // Not the best way to display these buttons but don't wanna put too much time\n    return (\n      <div class=\"dynamic-display-wrapper\">\n        <button\n          class={darkCanvas ? \"active\" : \"\"}\n          onClick={() => setDarkCanvas((isDark) => !isDark)}\n        >\n          Toggle Dark Background\n        </button>\n        <button\n          class={showSidebar ? \"active\" : \"\"}\n          onClick={() => setShowSidebar((isshown) => !isshown)}\n        >\n          Toggle Sidebar\n        </button>\n      </div>\n    );\n  };\n\n  // Mobile/tablet widths are based on avocode designs\n  const containerWidth =\n    layout === \"mobile\" ? \"375px\" : layout === \"tablet\" ? \"768px\" : \"1124px\";\n  const responsiveWidth = css`\n    max-width: ${containerWidth};\n    margin-left: ${showSidebar ? \"250px\" : \"0px\"};\n  `;\n\n  const hide = css`\n    display: none;\n  `;\n\n  if (darkCanvas) {\n    document.body.style.backgroundColor = \"#232323\";\n  } else {\n    document.body.style.backgroundColor = \"#fafafa\";\n  }\n\n  const InnerFn = ({ selected }: { selected: Selection }) => {\n    const Component = addons.reduce<FunctionalComponent>((PrevFn, AddOnFn) => {\n      return () => (\n        <AddOnFn\n          story={{\n            ...selected,\n          }}\n        >\n          <PrevFn />\n        </AddOnFn>\n      );\n    }, selected?.story);\n    return <Component />;\n  };\n\n  const GoHome = () => {\n    setSelectedInternal(undefined);\n  };\n\n  const View = () => (\n    <div class=\"story-book-outer-div\">\n      <div class={`story-div ${!showSidebar ? hide : \"\"}`}>\n        <div class=\"header\" onClick={() => GoHome()}>\n          <h2>{title}</h2>\n        </div>\n        <ul class=\"parentStoryList\">\n          {Object.keys(stories)\n            .sort()\n            .map((group) => {\n              return (\n                <div class=\"group-wrapper\">\n                  {group !== \"_\" && <h4 class=\"group-header\">{group}</h4>}\n                  {stories[group].map((s) => {\n                    const [isOpen, setIsOpen] = useState<Boolean>(false);\n                    return (\n                      <li class=\"parentStory\">\n                        <details\n                          style={{ marginBottom: \"10px\" }}\n                          open={\n                            isOpen ||\n                            selectedKey?.includes(`${group}-${s.story.title}`)\n                          }\n                          onClick={(e) => {\n                            e.preventDefault();\n                            setIsOpen(!isOpen);\n                          }}\n                        >\n                          <summary style={{ outline: \"none\" }}>\n                            {s.story.title}\n                          </summary>\n                          {s.subs &&\n                            Object.keys(s.subs).map((subKey) => {\n                              const key = `${group}-${s.story.title}-${subKey}`;\n                              const subStory = s.subs[subKey];\n                              const subStoryView = () => <subStory />;\n                              const label =\n                                subStory.storyName || startCase(subKey);\n                              return (\n                                <div\n                                  class={`subStory ${\n                                    selectedKey === key ? \"selected\" : \"\"\n                                  }`}\n                                >\n                                  <a onClick={() => setSelectedStory(key)}>\n                                    {label}\n                                  </a>\n                                </div>\n                              );\n                            })}\n                        </details>\n                      </li>\n                    );\n                  })}\n                </div>\n              );\n            })}\n        </ul>\n      </div>\n      <WidthSelector />\n      <div class={`component ${responsiveWidth}`}>\n        {!selectedKey && homepage}\n        {selectedKey && (\n          <div>\n            {/* <pre>{selected.specs}</pre> */}\n            <h3>{Selected.label}</h3>\n            <InnerFn selected={Selected} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return {\n    class: Style,\n    children: <View />,\n    View,\n    selected: Selected,\n  };\n}\n"],"names":["Style","css","organiseStories","prev","curr","splitTitle","story","title","split","group","subs","sort","a","b","localeCompare","loadStory","imps","imports","h","StencilH","homepage","addons","stories","useMemo","map","reduce","_","urlStoryKey","decodeURIComponent","window","location","hash","replace","useState","getStoryFromKey","Selected","setSelectedInternal","selectedKey","key","layout","showSidebar","setShowSidebar","darkCanvas","setDarkCanvas","keys","parentTitle","subKey","s","_stories$group","find","element","subStory","parent","label","name","WidthSelector","class","onClick","isDark","isshown","containerWidth","responsiveWidth","hide","document","body","style","backgroundColor","InnerFn","selected","Component","PrevFn","AddOnFn","View","undefined","Object","isOpen","setIsOpen","marginBottom","open","includes","e","preventDefault","outline","storyName","startCase","encodeURIComponent","setSelectedStory","children"],"mappings":"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"}

package.json

 {
   "name": "@saasquatch/stencilbook",
-  "version": "1.0.0",
+  "version": "1.0.1-2",
   "description": "Storybook, but built with Stencil. Used to provide an easy to view and test implemented components and all of their states / specs, and to easily share progress with customers.",
@@ -26,3 +26,3 @@ "source": "src/index.ts",
   },
-  "author": "SaaSquatch Team",
+  "author": "ReferralSaaSquatch.com, Inc.",
   "bugs": {
@@ -32,3 +32,3 @@ "url": "https://github.com/saasquatch/program-tools"
   "homepage": "https://github.com/saasquatch/program-tools",
-  "license": "ISC"
+  "license": "MIT"
 }

Readme.md

@@ -0,0 +0,0 @@ # Stencilbook

src/index.ts

@@ -0,0 +0,0 @@ import { FunctionalComponent } from "@stencil/core";

src/organiseStories.tsx

@@ -0,0 +0,0 @@ import { OrganisedStoryWithSubs, StoryWithSubs } from ".";

src/stencil-storybook.styles.ts

@@ -0,0 +0,0 @@ // Emotion doesn't natively support named exports with Rollup

src/stencil-storybook.tsx

 import { h as StencilH, FunctionalComponent, VNode } from "@stencil/core";
-import { useState, useMemo } from "@saasquatch/universal-hooks";
+import { useState, useMemo, useEffect } from "@saasquatch/universal-hooks";
 
@@ -57,3 +57,6 @@ import startCase from "lodash.startcase";
 
-  const [Selected, setSelectedInternal] = useState<Selection>(undefined);
+  const urlStoryKey = decodeURIComponent(window.location.hash).replace("#", "");
+  const [Selected, setSelectedInternal] = useState<Selection>(
+    getStoryFromKey(urlStoryKey)
+  );
   const selectedKey = Selected?.key;
@@ -63,15 +66,27 @@ const [layout, setLayout] = useState<Layout>("desktop");
   const [darkCanvas, setDarkCanvas] = useState<boolean>(false);
-  function setSelected(
-    story: FunctionalComponent,
-    key: string,
-    parent: StorybookDefaultExport,
-    label: string
-  ) {
-    setSelectedInternal({
+
+  function getStoryFromKey(key?: string) {
+    if (!key) return undefined;
+
+    const keys = decodeURIComponent(key).split("-");
+    const group = keys[0];
+    const parentTitle = keys[1];
+    const subKey = keys[2];
+
+    const s = stories[group]?.find(
+      (element) => element.story.title === parentTitle
+    );
+    const subStory = s.subs[subKey];
+    return {
       key,
-      story,
-      parent,
-      label,
-    });
+      story: subStory,
+      parent: s?.story,
+      label: subStory?.name,
+    };
   }
+  function setSelectedStory(key: string) {
+    window.location.hash = encodeURIComponent(key);
+    setSelectedInternal(getStoryFromKey(key));
+  }
+
   const WidthSelector = () => {
@@ -81,27 +96,2 @@ // Not the best way to display these buttons but don't wanna put too much time
       <div class="dynamic-display-wrapper">
-        <div class="button-wrapper">
-          <button
-            class={layout === "desktop" ? "active" : ""}
-            onClick={() => setLayout("desktop")}
-          >
-            Desktop
-          </button>
-          <button
-            class={layout === "tablet" ? "active" : ""}
-            onClick={() => setLayout("tablet")}
-          >
-            Tablet
-          </button>
-          <button
-            class={layout === "mobile" ? "active" : ""}
-            onClick={() => setLayout("mobile")}
-          >
-            Mobile
-          </button>
-        </div>
-        <p>
-          Note: Currently doesn't test breakpoints, use the native tester for
-          now
-        </p>
-        <hr />
         <button
@@ -113,3 +103,2 @@ class={darkCanvas ? "active" : ""}
         </button>
-        <hr />
         <button
@@ -176,5 +165,16 @@ class={showSidebar ? "active" : ""}
                   {stories[group].map((s) => {
+                    const [isOpen, setIsOpen] = useState<Boolean>(false);
                     return (
                       <li class="parentStory">
-                        <details style={{ marginBottom: "10px" }}>
+                        <details
+                          style={{ marginBottom: "10px" }}
+                          open={
+                            isOpen ||
+                            selectedKey?.includes(`${group}-${s.story.title}`)
+                          }
+                          onClick={(e) => {
+                            e.preventDefault();
+                            setIsOpen(!isOpen);
+                          }}
+                        >
                           <summary style={{ outline: "none" }}>
@@ -185,3 +185,3 @@ {s.story.title}
                             Object.keys(s.subs).map((subKey) => {
-                              const key = group + "/" + subKey;
+                              const key = `${group}-${s.story.title}-${subKey}`;
                               const subStory = s.subs[subKey];
@@ -197,7 +197,3 @@ const subStoryView = () => <subStory />;
                                 >
-                                  <a
-                                    onClick={() =>
-                                      setSelected(subStory, key, s.story, label)
-                                    }
-                                  >
+                                  <a onClick={() => setSelectedStory(key)}>
                                     {label}
@@ -204,0 +200,0 @@ </a>

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1139347

1115.47%

Number of package files

24

26.32%

Worsened metrics

Lines of code

659

-0.3%

Number of low quality alerts

6

20%

No dependency changes