@aussieljk/forkbook 0.0.1-2 → 0.0.1-3

package/assets/create/rendererAssets/common/Configure.mdx

@@ -33,187 +33,187 @@ export const RightArrow = () => <svg
 
 <Meta title="Configure your project" />
 
-<div className="sb-container">
-  <div className='sb-section-title'>
+<div className="fb-container">
+  <div className='fb-section-title'>
     # Configure your project
 
     Because Forkbook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Forkbook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
   </div>
-  <div className="sb-section">
-    <div className="sb-section-item">
+  <div className="fb-section">
+    <div className="fb-section-item">
       <img
         src={Styling}
         alt="A wall of logos representing different styling technologies"
       />
-      <h4 className="sb-section-item-heading">Add styling and CSS</h4>
-      <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Forkbook. Learn more about setting up styling within Forkbook.</p>
+      <h4 className="fb-section-item-heading">Add styling and CSS</h4>
+      <p className="fb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Forkbook. Learn more about setting up styling within Forkbook.</p>
       <a
-        className="sb-action-link"
-        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer={{renderer}}&ref=configure"
+        className="fb-action-link"
+        href="https://forkbook.ljk.dev/docs/configure/styling-and-css"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
-    <div className="sb-section-item">
+    <div className="fb-section-item">
       <img
         src={Context}
         alt="An abstraction representing the composition of data for a component"
       />
-      <h4 className="sb-section-item-heading">Provide context and mocking</h4>
-      <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
+      <h4 className="fb-section-item-heading">Provide context and mocking</h4>
+      <p className="fb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
-        className="sb-action-link"
-        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer={{renderer}}&ref=configure#context-for-mocking"
+        className="fb-action-link"
+        href="https://forkbook.ljk.dev/docs/writing-stories/decorators#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
-    <div className="sb-section-item">
+    <div className="fb-section-item">
       <img src={Assets} alt="A representation of typography and image assets" />
       <div>
-        <h4 className="sb-section-item-heading">Load assets and resources</h4>
-        <p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the
+        <h4 className="fb-section-item-heading">Load assets and resources</h4>
+        <p className="fb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the
         `staticDirs` configuration option to specify folders to load when
         starting Forkbook.</p>
         <a
-          className="sb-action-link"
-          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer={{renderer}}&ref=configure"
+          className="fb-action-link"
+          href="https://forkbook.ljk.dev/docs/configure/images-and-assets"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
     </div>
   </div>
 </div>
-<div className="sb-container">
-  <div className='sb-section-title'>
+<div className="fb-container">
+  <div className='fb-section-title'>
     # Do more with Forkbook
 
     Now that you know the basics, let's explore other parts of Forkbook that will improve your experience. This list is just to get you started. You can customise Forkbook in many ways to fit your needs.
   </div>
 
-  <div className="sb-section">
-    <div className="sb-features-grid">
-      <div className="sb-grid-item">
+  <div className="fb-section">
+    <div className="fb-features-grid">
+      <div className="fb-grid-item">
         <img src={Docs} alt="A screenshot showing the autodocs tag being set, pointing a docs page being generated" />
-        <h4 className="sb-section-item-heading">Autodocs</h4>
-        <p className="sb-section-item-paragraph">Auto-generate living,
+        <h4 className="fb-section-item-heading">Autodocs</h4>
+        <p className="fb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
-          className="sb-action-link"
-          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer={{renderer}}&ref=configure"
+          className="fb-action-link"
+          href="https://forkbook.ljk.dev/docs/writing-docs/autodocs"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
-      <div className="sb-grid-item">
+      <div className="fb-grid-item">
         <img src={Share} alt="A browser window showing a Forkbook being published to a chromatic.com URL" />
-        <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
-        <p className="sb-section-item-paragraph">Publish your Forkbook to review and collaborate with your entire team.</p>
+        <h4 className="fb-section-item-heading">Publish to Chromatic</h4>
+        <p className="fb-section-item-paragraph">Publish your Forkbook to review and collaborate with your entire team.</p>
         <a
-          className="sb-action-link"
-          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer={{renderer}}&ref=configure#publish-storybook-with-chromatic"
+          className="fb-action-link"
+          href="https://forkbook.ljk.dev/docs/sharing/publish-storybook#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
-      <div className="sb-grid-item">
+      <div className="fb-grid-item">
         <img src={FigmaPlugin} alt="Windows showing the Forkbook plugin in Figma" />
-        <h4 className="sb-section-item-heading">Figma Plugin</h4>
-        <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
+        <h4 className="fb-section-item-heading">Figma Plugin</h4>
+        <p className="fb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
-          className="sb-action-link"
-          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer={{renderer}}&ref=configure#embed-storybook-in-figma-with-the-plugin"
+          className="fb-action-link"
+          href="https://forkbook.ljk.dev/docs/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
-      <div className="sb-grid-item">
+      <div className="fb-grid-item">
         <img src={Testing} alt="Screenshot of tests passing and failing" />
-        <h4 className="sb-section-item-heading">Testing</h4>
-        <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
+        <h4 className="fb-section-item-heading">Testing</h4>
+        <p className="fb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          className="sb-action-link"
-          href="https://storybook.js.org/docs/writing-tests/?renderer={{renderer}}&ref=configure"
+          className="fb-action-link"
+          href="https://forkbook.ljk.dev/docs/writing-tests"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
-      <div className="sb-grid-item">
+      <div className="fb-grid-item">
         <img src={Accessibility} alt="Screenshot of accessibility tests passing and failing" />
-        <h4 className="sb-section-item-heading">Accessibility</h4>
-        <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
+        <h4 className="fb-section-item-heading">Accessibility</h4>
+        <p className="fb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
-          className="sb-action-link"
-          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer={{renderer}}&ref=configure"
+          className="fb-action-link"
+          href="https://forkbook.ljk.dev/docs/writing-tests/accessibility-testing"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
-      <div className="sb-grid-item">
+      <div className="fb-grid-item">
         <img src={Theming} alt="Screenshot of Forkbook in light and dark mode" />
-        <h4 className="sb-section-item-heading">Theming</h4>
-        <p className="sb-section-item-paragraph">Theme Forkbook's UI to personalize it to your project.</p>
+        <h4 className="fb-section-item-heading">Theming</h4>
+        <p className="fb-section-item-paragraph">Theme Forkbook's UI to personalize it to your project.</p>
         <a
-          className="sb-action-link"
-          href="https://storybook.js.org/docs/configure/theming/?renderer={{renderer}}&ref=configure"
+          className="fb-action-link"
+          href="https://forkbook.ljk.dev/docs/configure/theming"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
     </div>
   </div>
 </div>
-<div className='sb-addon'>
-  <div className='sb-addon-text'>
+<div className='fb-addon'>
+  <div className='fb-addon-text'>
     <h4>Addons</h4>
-    <p className="sb-section-item-paragraph">Integrate your tools with Forkbook to connect workflows.</p>
+    <p className="fb-section-item-paragraph">Integrate your tools with Forkbook to connect workflows.</p>
     <a
-        className="sb-action-link"
-        href="https://storybook.js.org/addons/?ref=configure"
+        className="fb-action-link"
+        href="https://forkbook.ljk.dev/addons"
         target="_blank"
       >Discover all addons<RightArrow /></a>
   </div>
-  <div className='sb-addon-img'>
+  <div className='fb-addon-img'>
     <img src={AddonLibrary} alt="Integrate your tools with Forkbook to connect workflows." />
   </div>
 </div>
 
-<div className="sb-section sb-socials">
-    <div className="sb-section-item">
-      <img src={Github} alt="Github logo" className="sb-explore-image"/>
+<div className="fb-section fb-socials">
+    <div className="fb-section-item">
+      <img src={Github} alt="Github logo" className="fb-explore-image"/>
       Join our contributors building the future of UI development.
 
       <a
-        className="sb-action-link"
-        href="https://github.com/storybookjs/storybook"
+        className="fb-action-link"
+        href="https://github.com/aussieljk/forkbook"
         target="_blank"
       >Star on GitHub<RightArrow /></a>
     </div>
-    <div className="sb-section-item">
-      <img src={Discord} alt="Discord logo" className="sb-explore-image"/>
+    <div className="fb-section-item">
+      <img src={Discord} alt="Discord logo" className="fb-explore-image"/>
       <div>
         Get support and chat with frontend developers.
 
         <a
-          className="sb-action-link"
+          className="fb-action-link"
           href="https://discord.gg/storybook"
           target="_blank"
         >Join Discord server<RightArrow /></a>
       </div>
     </div>
-    <div className="sb-section-item">
-      <img src={Youtube} alt="Youtube logo" className="sb-explore-image"/>
+    <div className="fb-section-item">
+      <img src={Youtube} alt="Youtube logo" className="fb-explore-image"/>
       <div>
         Watch tutorials, feature previews and interviews.
 
         <a
-          className="sb-action-link"
+          className="fb-action-link"
           href="https://www.youtube.com/@chromaticui"
           target="_blank"
         >Watch on YouTube<RightArrow /></a>
       </div>
     </div>
-    <div className="sb-section-item">
-      <img src={Tutorials} alt="A book" className="sb-explore-image"/>
+    <div className="fb-section-item">
+      <img src={Tutorials} alt="A book" className="fb-explore-image"/>
       <p>Follow guided walkthroughs on for key workflows.</p>
 
       <a
-          className="sb-action-link"
-          href="https://storybook.js.org/tutorials/?ref=configure"
+          className="fb-action-link"
+          href="https://forkbook.ljk.dev/tutorials"
           target="_blank"
         >Discover tutorials<RightArrow /></a>
     </div>
@@ -221,11 +221,11 @@ export const RightArrow = () => <svg
 
 <style>
   {`
-  .sb-container {
+  .fb-container {
     margin-bottom: 48px;
   }
 
-  .sb-section {
+  .fb-section {
     width: 100%;
     display: flex;
     flex-direction: row;
@@ -236,65 +236,65 @@ export const RightArrow = () => <svg
     object-fit: cover;
   }
 
-  .sb-section-title {
+  .fb-section-title {
     margin-bottom: 32px;
   }
 
-  .sb-section a:not(h1 a, h2 a, h3 a) {
+  .fb-section a:not(h1 a, h2 a, h3 a) {
     font-size: 14px;
   }
 
-  .sb-section-item, .sb-grid-item {
+  .fb-section-item, .fb-grid-item {
     flex: 1;
     display: flex;
     flex-direction: column;
   }
 
-  .sb-section-item-heading {
+  .fb-section-item-heading {
     padding-top: 20px !important;
     padding-bottom: 5px !important;
     margin: 0 !important;
   }
-  .sb-section-item-paragraph {
+  .fb-section-item-paragraph {
     margin: 0;
     padding-bottom: 10px;
   }
 
-  .sb-action-link {
+  .fb-action-link {
     text-decoration: none;
   }
 
-  .sb-action-link:hover, .sb-action-link:focus {
+  .fb-action-link:hover, .fb-action-link:focus {
     text-decoration: underline;
     text-decoration-thickness: 0.03125rem;
     text-underline-offset: 0.11em;
   }
 
-  .sb-chevron {
+  .fb-chevron {
     margin-left: 5px;
   }
 
-  .sb-features-grid {
+  .fb-features-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-gap: 32px 20px;
   }
 
-  .sb-socials {
+  .fb-socials {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
   }
 
-  .sb-socials p {
+  .fb-socials p {
     margin-bottom: 10px;
   }
 
-  .sb-explore-image {
+  .fb-explore-image {
     max-height: 32px;
     align-self: flex-start;
   }
 
-  .sb-addon {
+  .fb-addon {
     width: 100%;
     display: flex;
     align-items: center;
@@ -308,16 +308,16 @@ export const RightArrow = () => <svg
     overflow: hidden;
   }
 
-  .sb-addon-text {
+  .fb-addon-text {
     padding-left: 48px;
     max-width: 240px;
   }
 
-  .sb-addon-text h4 {
+  .fb-addon-text h4 {
     padding-top: 0px;
   }
 
-  .sb-addon-img {
+  .fb-addon-img {
     position: absolute;
     left: 345px;
     top: 0;
@@ -326,7 +326,7 @@ export const RightArrow = () => <svg
     overflow: hidden;
   }
 
-  .sb-addon-img img {
+  .fb-addon-img img {
     width: 650px;
     transform: rotate(-15deg);
     margin-left: 40px;
@@ -336,36 +336,36 @@ export const RightArrow = () => <svg
   }
 
   @media screen and (max-width: 800px) {
-    .sb-addon-img {
+    .fb-addon-img {
       left: 300px;
     }
   }
 
   @media screen and (max-width: 600px) {
-    .sb-section {
+    .fb-section {
       flex-direction: column;
     }
 
-    .sb-features-grid {
+    .fb-features-grid {
       grid-template-columns: repeat(1, 1fr);
     }
 
-    .sb-socials {
+    .fb-socials {
       grid-template-columns: repeat(2, 1fr);
     }
 
-    .sb-addon {
+    .fb-addon {
       height: 280px;
       align-items: flex-start;
       padding-top: 32px;
       overflow: hidden;
     }
 
-    .sb-addon-text {
+    .fb-addon-text {
       padding-left: 24px;
     }
 
-    .sb-addon-img {
+    .fb-addon-img {
       right: 0;
       left: 0;
       top: 130px;
@@ -375,7 +375,7 @@ export const RightArrow = () => <svg
       width: 124%;
     }
 
-    .sb-addon-img img {
+    .fb-addon-img img {
       width: 1200px;
       transform: rotate(-12deg);
       margin-left: 0;

package/assets/create/rendererAssets/common/button.css

@@ -5,7 +5,7 @@
   border-radius: 3em;
   font-weight: 700;
   line-height: 1;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Inter Variable', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 .storybook-button--primary {
   background-color: #555ab9;

package/assets/create/rendererAssets/common/header.css

@@ -4,7 +4,7 @@
   align-items: center;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Inter Variable', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 .storybook-header svg {

package/assets/create/rendererAssets/common/page.css

@@ -5,7 +5,7 @@
   color: #333;
   font-size: 14px;
   line-height: 24px;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Inter Variable', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 .storybook-page h2 {
@@ -64,5 +64,5 @@
 }
 
 .storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
+  fill: #007aff;
 }

package/assets/server/base-preview-body.html

@@ -1,21 +1,21 @@
-<div class="sb-preparing-story sb-wrapper">
-  <div class="sb-loader"></div>
+<div class="fb-preparing-story fb-wrapper">
+  <div class="fb-loader"></div>
 </div>
 
-<div class="sb-preparing-docs sb-wrapper">
-  <div class="sb-previewBlock">
-    <div class="sb-previewBlock_header">
-      <div class="sb-previewBlock_icon"></div>
-      <div class="sb-previewBlock_icon"></div>
-      <div class="sb-previewBlock_icon"></div>
-      <div class="sb-previewBlock_icon"></div>
+<div class="fb-preparing-docs fb-wrapper">
+  <div class="fb-previewBlock">
+    <div class="fb-previewBlock_header">
+      <div class="fb-previewBlock_icon"></div>
+      <div class="fb-previewBlock_icon"></div>
+      <div class="fb-previewBlock_icon"></div>
+      <div class="fb-previewBlock_icon"></div>
     </div>
-    <div class="sb-previewBlock_body">
-      <div class="sb-loader"></div>
+    <div class="fb-previewBlock_body">
+      <div class="fb-loader"></div>
     </div>
   </div>
-  <table aria-hidden="true" class="sb-argstableBlock">
-    <thead class="sb-argstableBlock-head">
+  <table aria-hidden="true" class="fb-argstableBlock">
+    <thead class="fb-argstableBlock-head">
       <tr>
         <th><span>Name</span></th>
         <th><span>Description</span></th>
@@ -23,17 +23,17 @@
         <th><span>Control </span></th>
       </tr>
     </thead>
-    <tbody class="sb-argstableBlock-body">
+    <tbody class="fb-argstableBlock-body">
       <tr>
         <td><span>propertyName</span><span title="Required">*</span></td>
         <td>
           <div><span>This is a short description</span></div>
-          <div class="sb-argstableBlock-summary">
-            <div><span class="sb-argstableBlock-code">summary</span></div>
+          <div class="fb-argstableBlock-summary">
+            <div><span class="fb-argstableBlock-code">summary</span></div>
           </div>
         </td>
         <td>
-          <div><span class="sb-argstableBlock-code">defaultValue</span></div>
+          <div><span class="fb-argstableBlock-code">defaultValue</span></div>
         </td>
         <td><button>Set string</button></td>
       </tr>
@@ -41,12 +41,12 @@
         <td><span>propertyName</span><span>*</span></td>
         <td>
           <div><span>This is a short description</span></div>
-          <div class="sb-argstableBlock-summary">
-            <div><span class="sb-argstableBlock-code">summary</span></div>
+          <div class="fb-argstableBlock-summary">
+            <div><span class="fb-argstableBlock-code">summary</span></div>
           </div>
         </td>
         <td>
-          <div><span class="sb-argstableBlock-code">defaultValue</span></div>
+          <div><span class="fb-argstableBlock-code">defaultValue</span></div>
         </td>
         <td><button>Set string</button></td>
       </tr>
@@ -54,12 +54,12 @@
         <td><span>propertyName</span><span>*</span></td>
         <td>
           <div><span>This is a short description</span></div>
-          <div class="sb-argstableBlock-summary">
-            <div><span class="sb-argstableBlock-code">summary</span></div>
+          <div class="fb-argstableBlock-summary">
+            <div><span class="fb-argstableBlock-code">summary</span></div>
           </div>
         </td>
         <td>
-          <div><span class="sb-argstableBlock-code">defaultValue</span></div>
+          <div><span class="fb-argstableBlock-code">defaultValue</span></div>
         </td>
         <td><button>Set string</button></td>
       </tr>
@@ -67,9 +67,9 @@
   </table>
 </div>
 
-<div class="sb-nopreview sb-wrapper">
-  <div class="sb-nopreview_main">
-    <h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
+<div class="fb-nopreview fb-wrapper">
+  <div class="fb-nopreview_main">
+    <h1 class="fb-nopreview_heading fb-heading">No Preview</h1>
     <p>Sorry, but you either have no stories or none are selected somehow.</p>
     <ul>
       <li>Please check the Forkbook config.</li>
@@ -81,8 +81,8 @@
   </div>
 </div>
 
-<div class="sb-errordisplay sb-wrapper">
-  <div class="sb-errordisplay_main">
+<div class="fb-errordisplay fb-wrapper">
+  <div class="fb-errordisplay_main">
     <h1 id="error-message"></h1>
     <p>
       The component failed to render properly, likely due to a configuration issue in Forkbook.
@@ -93,24 +93,24 @@
         <strong>Missing Context/Providers</strong>: You can use decorators to supply specific
         contexts or providers, which are sometimes necessary for components to render correctly. For
         detailed instructions on using decorators, please visit the
-        <a href="https://storybook.js.org/docs/writing-stories/decorators"
+        <a href="https://forkbook.ljk.dev/docs/writing-stories/decorators"
           >Decorators documentation</a
         >.
       </li>
       <li>
         <strong>Misconfigured Vite</strong>: Verify that Forkbook picks up all necessary
         settings for plugins and other relevant parameters. You can find a step-by-step guide for
-        configuring <a href="https://storybook.js.org/docs/builders/vite">Vite</a> with Forkbook.
+        configuring <a href="https://forkbook.ljk.dev/docs/builders/vite">Vite</a> with Forkbook.
       </li>
       <li>
         <strong>Missing Environment Variables</strong>: Your Forkbook may require specific
         environment variables to function as intended. You can set up custom environment variables
         as outlined in the
-        <a href="https://storybook.js.org/docs/configure/environment-variables"
+        <a href="https://forkbook.ljk.dev/docs/configure/environment-variables"
           >Environment Variables documentation</a
         >.
       </li>
     </ol>
-    <pre class="sb-errordisplay_code"><code id="error-stack"></code></pre>
+    <pre class="fb-errordisplay_code"><code id="error-stack"></code></pre>
   </div>
 </div>