@aussieljk/forkbook 0.0.1-1 → 0.0.1-11

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/create/templates/react-native/index.expo.js

@@ -1,15 +1,15 @@
 import { registerRootComponent } from 'expo';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
-import { view } from './storybook.requires';
+import { view } from './forkbook.requires';
 
 /**
  * This file is user-editable.
  *
- * Use it as your React Native Storybook entrypoint and wrap `StorybookUIRoot`
+ * Use it as your React Native Storybook entrypoint and wrap `ForkbookUIRoot`
  * with application decorators/providers (theme, i18n, state, navigation, etc).
  */
-const StorybookUIRoot = view.getStorybookUI({
+const ForkbookUIRoot = view.getForkbookUI({
   shouldPersistSelection: true,
   storage: {
     getItem: AsyncStorage.getItem,
@@ -17,4 +17,4 @@ const StorybookUIRoot = view.getStorybookUI({
   },
 });
 
-registerRootComponent(StorybookUIRoot);
+registerRootComponent(ForkbookUIRoot);

package/assets/create/templates/react-native/index.js

@@ -2,16 +2,16 @@ import { AppRegistry } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { LiteUI } from '@storybook/react-native-ui-lite';
 
-import { view } from './storybook.requires';
+import { view } from './forkbook.requires';
 import { name as appName } from '../app.json';
 
 /**
  * This file is user-editable.
  *
- * Use it as your React Native Storybook entrypoint and wrap `StorybookUIRoot`
+ * Use it as your React Native Storybook entrypoint and wrap `ForkbookUIRoot`
  * with application decorators/providers (theme, i18n, state, navigation, etc).
  */
-const StorybookUIRoot = view.getStorybookUI({
+const ForkbookUIRoot = view.getForkbookUI({
   shouldPersistSelection: true,
   storage: {
     getItem: AsyncStorage.getItem,
@@ -20,6 +20,6 @@ const StorybookUIRoot = view.getStorybookUI({
   CustomUIComponent: LiteUI,
 });
 
-AppRegistry.registerComponent(appName, () => StorybookUIRoot);
+AppRegistry.registerComponent(appName, () => ForkbookUIRoot);
 
-export default StorybookUIRoot;
+export default ForkbookUIRoot;