chore: fomatting using prettier

src/components/Error404/error404.stories.tsx

@@ -1,14 +1,15 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import * as React from "react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Error404 } from ".";
+import { Error404 } from '.';
 
 export default {
-  title: "Error404",
+  title: 'Error404',
   component: Error404,
 } as ComponentMeta<typeof Error404>;
 
-const Template: ComponentStory<typeof Error404> = (args) => <Error404 {...args} />;
+const Template: ComponentStory<typeof Error404> = (args) => (
+  <Error404 {...args} />
+);
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {};

src/components/Error404/index.ts

@@ -1 +1 @@
-export * from "./Error404"
+export * from './Error404';

src/components/Overlay/index.ts

@@ -1 +1 @@
-export * from "./Overlay"
+export * from './Overlay';

src/components/Overlay/overlay.stories.tsx

@@ -1,14 +1,16 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import * as React from "react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import * as React from 'react';
 
-import { Overlay } from ".";
+import { Overlay } from '.';
 
 export default {
-  title: "Overlay",
+  title: 'Overlay',
   component: Overlay,
 } as ComponentMeta<typeof Overlay>;
 
-const Template: ComponentStory<typeof Overlay> = (args) => <Overlay {...args} />;
+const Template: ComponentStory<typeof Overlay> = (args) => (
+  <Overlay {...args} />
+);
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {};

src/components/Overlay/overlay.tests.tsx

@@ -14,5 +14,4 @@ describe('Overlay component', () => {
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
-
-});
+});

src/components/Providers/index.ts

@@ -1 +1 @@
-export * from "./Providers"
+export * from './Providers';

src/components/Providers/providers.stories.tsx

@@ -1,14 +1,16 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import * as React from "react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import * as React from 'react';
 
-import { Providers } from ".";
+import { Providers } from '.';
 
 export default {
-  title: "Providers",
+  title: 'Providers',
   component: Providers,
 } as ComponentMeta<typeof Providers>;
 
-const Template: ComponentStory<typeof Providers> = (args) => <Providers {...args} />;
+const Template: ComponentStory<typeof Providers> = (args) => (
+  <Providers {...args} />
+);
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {};

src/components/ScrollToTop/index.ts

@@ -1 +1 @@
-export * from "./ScrollToTop"
+export * from './ScrollToTop';

src/components/ScrollToTop/scrolltotop.stories.tsx

@@ -1,14 +1,16 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import * as React from "react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import * as React from 'react';
 
-import { ScrollToTop } from ".";
+import { ScrollToTop } from '.';
 
 export default {
-  title: "ScrollToTop",
+  title: 'ScrollToTop',
   component: ScrollToTop,
 } as ComponentMeta<typeof ScrollToTop>;
 
-const Template: ComponentStory<typeof ScrollToTop> = (args) => <ScrollToTop {...args} />;
+const Template: ComponentStory<typeof ScrollToTop> = (args) => (
+  <ScrollToTop {...args} />
+);
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {};

src/services/postService.ts

@@ -9,18 +9,16 @@ import { Frontmatter, Post } from '../types';
  */
 const importAll = (r: any) => r.keys().map(r);
 
-
 //NOTE: the following code does not support folders which makes it hard to organise content eg. work vs projects.
 //      Need to find some solutions to load projects and or abe to separate them somehow
 /**
  * Array of imported markdown files.
  * @type {Array<unknown>}
  */
 const markdownFiles = importAll(
-  (require as any).context(process.env.REACT_APP_CONTENT_PATH, false, /\.md$/),
+  (require as any).context(process.env.REACT_APP_CONTENT_PATH, false, /\.md$/)
 );
 
-
 /**
  * Retrieves all posts asynchronously.
  * @returns A promise that resolves to an array of Post objects with Frontmatter.
@@ -37,12 +35,11 @@ const getAllPosts = async () => {
               content,
               frontmatter,
             } as Post<Frontmatter>;
-          }),
-    ),
+          })
+    )
   );
 };
 
-
 /**
  * Service for posts.
  */

src/stories/Button.tsx

@@ -34,11 +34,15 @@ export const Button = ({
   label,
   ...props
 }: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  const mode = primary
+    ? 'storybook-button--primary'
+    : 'storybook-button--secondary';
   return (
     <button
       type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={['storybook-button', `storybook-button--${size}`, mode].join(
+        ' '
+      )}
       style={{ backgroundColor }}
       {...props}
     >

src/stories/Header.tsx

@@ -14,11 +14,21 @@ interface HeaderProps {
   onCreateAccount: () => void;
 }
 
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+export const Header = ({
+  user,
+  onLogin,
+  onLogout,
+  onCreateAccount,
+}: HeaderProps) => (
   <header>
     <div className="storybook-header">
       <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <g fill="none" fillRule="evenodd">
             <path
               d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
@@ -47,7 +57,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
         ) : (
           <>
             <Button size="small" onClick={onLogin} label="Log in" />
-            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+            <Button
+              primary
+              size="small"
+              onClick={onCreateAccount}
+              label="Sign up"
+            />
           </>
         )}
       </div>

src/stories/Page.tsx

@@ -23,40 +23,58 @@ export const Page: React.FC = () => {
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
-          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+          <a
+            href="https://componentdriven.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             <strong>component-driven</strong>
           </a>{' '}
           process starting with atomic components and ending with pages.
         </p>
         <p>
-          Render pages with mock data. This makes it easy to build and review page states without
-          needing to navigate to them in your app. Here are some handy patterns for managing page
-          data in Storybook:
+          Render pages with mock data. This makes it easy to build and review
+          page states without needing to navigate to them in your app. Here are
+          some handy patterns for managing page data in Storybook:
         </p>
         <ul>
           <li>
-            Use a higher-level connected component. Storybook helps you compose such data from the
-            "args" of child component stories
+            Use a higher-level connected component. Storybook helps you compose
+            such data from the "args" of child component stories
           </li>
           <li>
-            Assemble data in the page component from your services. You can mock these services out
-            using Storybook.
+            Assemble data in the page component from your services. You can mock
+            these services out using Storybook.
           </li>
         </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://storybook.js.org/tutorials/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             Storybook tutorials
           </a>
           . Read more in the{' '}
-          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+          <a
+            href="https://storybook.js.org/docs"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             docs
           </a>
           .
         </p>
         <div className="tip-wrapper">
-          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
-          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+          <span className="tip">Tip</span> Adjust the width of the canvas with
+          the{' '}
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 12 12"
+            xmlns="http://www.w3.org/2000/svg"
+          >
             <g fill="none" fillRule="evenodd">
               <path
                 d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"