@aussieljk/forkbook 0.0.1-2 → 0.0.1-4

package/template/nextjs-vite/cli/js/Configure.mdx

@@ -34,14 +34,14 @@ 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">
       <Image
         src={Styling}
         alt="A wall of logos representing different styling technologies"
@@ -49,15 +49,15 @@ export const RightArrow = () => <svg
         height={0}
         style={{ width: '100%', height: 'auto' }}
       />
-      <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=react&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">
       <Image 
         width={0}
         height={0}
@@ -65,15 +65,15 @@ export const RightArrow = () => <svg
         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=react&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">
       <Image 
         width={0}
         height={0}
@@ -82,29 +82,29 @@ export const RightArrow = () => <svg
         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=react&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">
         <Image 
           width={0}
           height={0}
@@ -112,16 +112,16 @@ export const RightArrow = () => <svg
           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=react&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">
         <Image 
           width={0}
           height={0}
@@ -129,15 +129,15 @@ export const RightArrow = () => <svg
           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=react&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">
         <Image 
           width={0}
           height={0}
@@ -145,16 +145,16 @@ export const RightArrow = () => <svg
           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=react&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">
         <Image 
           width={0}
           height={0}
@@ -162,16 +162,16 @@ export const RightArrow = () => <svg
           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=react&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">
         <Image 
           width={0}
           height={0}
@@ -179,15 +179,15 @@ export const RightArrow = () => <svg
           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=react&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">
         <Image 
           width={0}
           height={0}
@@ -195,28 +195,28 @@ export const RightArrow = () => <svg
           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=react&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'>
     <Image 
       width={650}
       height={347}
@@ -226,76 +226,76 @@ export const RightArrow = () => <svg
   </div>
 </div>
 
-<div className="sb-section sb-socials">
-    <div className="sb-section-item">
+<div className="fb-section fb-socials">
+    <div className="fb-section-item">
       <Image 
         width={32}
         height={32}
         layout="fixed"
         src={Github} 
         alt="Github logo" 
-        className="sb-explore-image"
+        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">
+    <div className="fb-section-item">
       <Image 
         width={33}
         height={32}
         layout="fixed"
         src={Discord} 
         alt="Discord logo" 
-        className="sb-explore-image"
+        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">
+    <div className="fb-section-item">
       <Image 
         width={32}
         height={32}
         layout="fixed"
         src={Youtube} 
         alt="Youtube logo" 
-        className="sb-explore-image"
+        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">
+    <div className="fb-section-item">
       <Image 
         width={33}
         height={32}
         layout="fixed"
         src={Tutorials} 
         alt="A book" 
-        className="sb-explore-image"
+        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>
@@ -303,11 +303,11 @@ export const RightArrow = () => <svg
 
 <style>
   {`
-  .sb-container {
+  .fb-container {
     margin-bottom: 48px;
   }
 
-  .sb-section {
+  .fb-section {
     width: 100%;
     display: flex;
     flex-direction: row;
@@ -318,65 +318,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;
@@ -390,16 +390,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;
@@ -408,7 +408,7 @@ export const RightArrow = () => <svg
     overflow: hidden;
   }
 
-  .sb-addon-img img {
+  .fb-addon-img img {
     width: 650px;
     transform: rotate(-15deg);
     margin-left: 40px;
@@ -418,36 +418,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;
@@ -457,7 +457,7 @@ export const RightArrow = () => <svg
       width: 124%;
     }
 
-    .sb-addon-img img {
+    .fb-addon-img img {
       width: 1200px;
       transform: rotate(-12deg);
       margin-left: 0;

package/template/nextjs-vite/cli/js/Header.stories.js

@@ -5,10 +5,10 @@ import { Header } from './Header';
 export default {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  // This component will have an automatically generated Autodocs entry: https://forkbook.ljk.dev/docs/writing-docs/autodocs
   tags: ['autodocs'],
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    // More on how to position stories at: https://forkbook.ljk.dev/docs/configure/story-layout
     layout: 'fullscreen',
   },
   args: {

package/template/nextjs-vite/cli/js/Page.jsx

@@ -40,11 +40,11 @@ export const Page = () => {
         </ul>
         <p>
           Get a guided tutorial on component-driven development at{' '}
-          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+          <a href="https://forkbook.ljk.dev/tutorials" target="_blank" rel="noopener noreferrer">
             Forkbook tutorials
           </a>
           . Read more in the{' '}
-          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+          <a href="https://forkbook.ljk.dev/docs" target="_blank" rel="noopener noreferrer">
             docs
           </a>
           .

package/template/nextjs-vite/cli/js/Page.stories.js

@@ -6,14 +6,14 @@ export default {
   title: 'Example/Page',
   component: Page,
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    // More on how to position stories at: https://forkbook.ljk.dev/docs/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
 export const LoggedOut = {};
 
-// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://forkbook.ljk.dev/docs/writing-tests/interaction-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

package/template/nextjs-vite/cli/ts/Button.stories.ts

@@ -4,28 +4,28 @@ import { fn } from '@aussieljk/forkbook/test';
 
 import { Button } from './Button';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+// More on how to set up stories at: https://forkbook.ljk.dev/docs/writing-stories#default-export
 const meta = {
   title: 'Example/Button',
   component: Button,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    // Optional parameter to center the component in the Canvas. More info: https://forkbook.ljk.dev/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  // This component will have an automatically generated Autodocs entry: https://forkbook.ljk.dev/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/arg-types
+  // More on argTypes: https://forkbook.ljk.dev/docs/api/arg-types
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://forkbook.ljk.dev/docs/essentials/actions#story-args
   args: { onClick: fn() },
 } satisfies Meta<typeof Button>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+// More on writing stories with args: https://forkbook.ljk.dev/docs/writing-stories/args
 export const Primary: Story = {
   args: {
     primary: true,