Merge pull request #8 from millnut/feature/components

refactor: react component functions to you arrow functions

src/components/Button/Button.stories.tsx

@@ -1,24 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from './Button';
+import Button from './Button';
 import buttonProps, { buttonLinkProps } from './defaultProps';
 
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#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/react/configure/story-layout
     layout: 'centered'
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
   tags: ['autodocs']
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
 } satisfies Meta<typeof Button>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const PrimaryButton: Story = {
   args: {
     ...buttonProps

src/components/Button/Button.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
-import './button.scss';
 import useTheme from '../../hooks/useDarkMode';
+import './button.scss';
 
 export interface ButtonProps {
   label: string;
@@ -18,7 +18,7 @@ export interface ButtonProps {
  * Primary UI component for user interaction
  */
 
-export const Button = ({ label, url, ...props }: ButtonProps): ReactElement => {
+const Button = ({ label, url, ...props }: ButtonProps): ReactElement => {
   const theme = useTheme();
   return url ? (
     <a className={`button theme--${theme.mode}`} href={url}>
@@ -30,3 +30,5 @@ export const Button = ({ label, url, ...props }: ButtonProps): ReactElement => {
     </button>
   );
 };
+
+export default Button;

src/components/Card/Card.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactElement } from 'react';
 import useTheme from '../../hooks/useDarkMode';
 import Image, { ImageProps } from '../Image/Image';
 import './Card.scss';
@@ -22,7 +22,7 @@ export interface CardProps {
   url?: string;
 }
 
-export default function Card({ image, title, body, url }: CardProps): ReactNode {
+const Card = ({ image, title, body, url }: CardProps): ReactElement => {
   const theme = useTheme();
 
   function handleClick(e: React.MouseEvent<HTMLElement>): void {
@@ -56,4 +56,6 @@ export default function Card({ image, title, body, url }: CardProps): ReactNode
       </span>
     </li>
   );
-}
+};
+
+export default Card;

src/components/Image/Image.tsx

@@ -33,17 +33,17 @@ export interface ImageProps {
   loadingAttr?: 'lazy' | 'eager' | undefined;
 }
 
-export default function Image({ src, size, width, height, altText, loadingAttr = 'lazy' }: ImageProps): ReactElement {
-  return (
-    <img
-      className="image"
-      srcSet={`${src.small}, ${src.medium}, ${src.default}`}
-      sizes={`${size?.small ?? 576}w, ${size?.medium ?? 992}w, ${size?.default ?? 1440}w`}
-      src={src.default}
-      width={width}
-      height={height}
-      alt={altText}
-      loading={loadingAttr}
-    />
-  );
-}
+const Image = ({ src, size, width, height, altText, loadingAttr = 'lazy' }: ImageProps): ReactElement => (
+  <img
+    className="image"
+    srcSet={`${src.small}, ${src.medium}, ${src.default}`}
+    sizes={`${size?.small ?? 576}w, ${size?.medium ?? 992}w, ${size?.default ?? 1440}w`}
+    src={src.default}
+    width={width}
+    height={height}
+    alt={altText}
+    loading={loadingAttr}
+  />
+);
+
+export default Image;

src/components/Listing/Listing.tsx

@@ -5,6 +5,6 @@ export interface ListingProps {
   children: ReactNode;
 }
 
-export default function Listing({ children }: ListingProps): ReactElement {
-  return <ul className="listing">{children}</ul>;
-}
+const Listing = ({ children }: ListingProps): ReactElement => <ul className="listing">{children}</ul>;
+
+export default Listing;

src/components/TextImage/TextImage.tsx

@@ -18,7 +18,7 @@ export interface TextImageProps {
   image: ImageProps;
 }
 
-export default function TextImage({ title, body, image }: TextImageProps): ReactElement {
+const TextImage = ({ title, body, image }: TextImageProps): ReactElement => {
   const theme = useTheme();
   return (
     <section className={`text-image theme--${theme.mode}`}>
@@ -29,4 +29,6 @@ export default function TextImage({ title, body, image }: TextImageProps): React
       </div>
     </section>
   );
-}
+};
+
+export default TextImage;