Structure concistency (#56)

src/components/ArtistSection/index.tsx

@@ -3,7 +3,7 @@ import SectionTitle from "../SectionTitle";
 import { colors } from "../../common/styleVariables";
 import SectionSubtitle from "../SectionSubtitle";
 
-const ArtistSection = () => {
+export default function ArtistSection() {
 	const t = useTranslations("Home");
 
 	return (
@@ -18,6 +18,4 @@ const ArtistSection = () => {
 			<p>{t("artist-section.description")}</p>
 		</>
 	);
-};
-
-export default ArtistSection;
+}

src/components/Button/index.tsx

@@ -26,19 +26,21 @@ const StyledButton = styled.button({
 	},
 });
 
-const StyledButtonAsLink = StyledButton.withComponent("a");
-
-type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+interface StyledButtonProps {
 	as?: "button" | undefined;
 	unstyled?: boolean;
-};
+}
 
-type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+const StyledButtonAsLink = StyledButton.withComponent("a");
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, StyledButtonProps {}
+
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 	as: "a";
 	href: string;
 	rel?: string;
 	target?: string;
-};
+}
 
 type Props = ButtonProps | LinkProps;
 

src/components/ButtonWithIcon/index.tsx

@@ -14,18 +14,18 @@ const StyledIcon = styled(Icon)({
 	flex: "0 0 auto",
 });
 
-type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	as?: "button" | undefined;
 	icon: IconProps["name"];
-};
+}
 
-type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 	as: "a";
 	icon: IconProps["name"];
 	href: string;
 	rel?: string;
 	target?: string;
-};
+}
 
 type Props = ButtonProps | LinkProps;
 

src/components/HTMLText/index.tsx

@@ -2,10 +2,10 @@ import styled from "@emotion/styled";
 
 const StyledP = styled.p({});
 
-type Props = {
+interface Props {
 	text: string;
 	as?: keyof JSX.IntrinsicElements;
-};
+}
 
 export default function HTMLText({ text, as }: Props) {
 	return <StyledP dangerouslySetInnerHTML={{ __html: text }} as={as} />;

src/components/HomePage/DataUsersSection/UseCase.tsx

@@ -8,12 +8,12 @@ const Image = styled.img({
 	border: `${borderWidths.default} solid ${colors.blueDark}`,
 });
 
-type Props = {
+interface Props {
 	imageSrc: string;
 	imageAlt: string;
 	title: string;
 	description: string;
-};
+}
 
 export default function UseCase({ imageSrc, imageAlt, title, description }: Props) {
 	return (

src/components/HomePage/NewsletterSection/index.tsx

@@ -22,9 +22,9 @@ const TextContainer = styled.div({
 	flex: "1 1 auto",
 });
 
-type Props = {
+interface Props {
 	trackingPosition: string;
-};
+}
 
 export default function NewsletterSection({ trackingPosition }: Props) {
 	const t = useTranslations("Home.newsletter-section");

src/components/HomePage/RequestCreatorAndList/Block.tsx

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
 import { borderRadiuses, borderWidths, colors, spacings } from "../../../common/styleVariables";
 
-type Props = {
+interface Props {
 	padding?: string | number;
-};
+}
 
 const Block = styled.div<Props>(({ padding = spacings.get(5) }) => ({
 	padding,

src/components/HomePage/RequestCreatorAndList/EventList/ItemContent/Description.tsx

@@ -60,11 +60,11 @@ function sanitizeDescription(description: string) {
 	return description.replace(/­/g, "").replace(/(\n)$/gm, "");
 }
 
-type Props = {
+interface Props {
 	description: string;
 	attractionId: string;
 	onExpanded(): void;
-};
+}
 
 export default function Description({ description, attractionId, onExpanded }: Props) {
 	const t = useTranslations("Home.for-interested");

src/components/HomePage/RequestCreatorAndList/EventList/ItemContent/index.tsx

@@ -19,11 +19,11 @@ const Title = styled.div({
 	fontWeight: fontWeights.medium,
 });
 
-type Props = {
+interface Props {
 	eventWithAttraction: EventWithAttraction;
 	locale: Locale;
 	onExpandedDescription(): void;
-};
+}
 
 export default function ItemContent({ eventWithAttraction, locale, onExpandedDescription }: Props) {
 	const { event, attraction } = eventWithAttraction;

src/components/HomePage/RequestCreatorAndList/EventList/index.tsx

@@ -33,10 +33,10 @@ const Item = styled.li({
 	},
 });
 
-type Props = {
+interface Props {
 	isLoading: boolean;
 	eventsWithAttractions: EventWithAttraction[];
-};
+}
 
 export default function EventList({ isLoading, eventsWithAttractions }: Props) {
 	const locale = useLocale();

src/components/HomePage/RequestCreatorAndList/RequestCreator/AnimatedText/index.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
 import TextCursor from "./TextCursor";
 
-type Props = {
+interface Props {
 	text: string;
 	onAnimationFinished(): void;
-};
+}
 
 export default function AnimatedText({ text: incomingText, onAnimationFinished }: Props) {
 	const [text, setText] = useState("");

src/components/HomePage/RequestCreatorAndList/RequestCreator/index.tsx

@@ -20,10 +20,10 @@ function useRequest() {
 	return { request, randomizeRequest };
 }
 
-type Props = {
+interface Props {
 	onStartRequestCreation(): void;
 	onRequestCreated(request: Request): void;
-};
+}
 
 export default function RequestCreator({ onStartRequestCreation, onRequestCreated }: Props) {
 	const { request, randomizeRequest } = useRequest();

src/components/Hr/index.tsx

@@ -6,9 +6,9 @@ const StyledHr = styled.hr({
 	backgroundColor: colors.blueDark,
 });
 
-type Props = {
+interface Props {
 	height?: number;
-};
+}
 
 export default function Hr({ height = 2 }: Props) {
 	return <StyledHr style={{ height }} />;

src/components/Link/index.tsx

@@ -12,10 +12,10 @@ const linkStyles: CSSObject = {
 };
 const Link = styled.a<Props>(linkStyles);
 
-type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
+interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
 	href: string;
 	children: ReactNode;
-};
+}
 
 export default Link;
 

src/components/LoadingIndicator/index.tsx

@@ -12,9 +12,9 @@ const Container = styled.div({
 	animation: `${rotate} 1.5s linear infinite`,
 });
 
-type Props = {
+interface Props {
 	size?: number;
-};
+}
 
 export default function LoadingIndicator({ size }: Props) {
 	return (

src/components/Page/Head/index.tsx

@@ -1,9 +1,9 @@
 import NextHead from "next/head";
 import { Metadata } from "..";
 
-type Props = {
+interface Props {
 	metadata: Metadata;
-};
+}
 
 export default function Head({ metadata }: Props) {
 	const { title, description } = metadata;

src/components/Page/index.tsx

@@ -9,16 +9,16 @@ const Main = styled.main(() => ({
 	margin: "0 auto",
 }));
 
-export type Metadata = {
+export interface Metadata {
 	title: string;
 	description?: string;
-};
+}
 
-type Props = {
+interface Props {
 	children: ReactNode;
 	metadata: Metadata;
 	header?: ReactNode;
-};
+}
 
 export default function Page({ children, metadata, header }: Props) {
 	return (

src/components/SectionSubtitle/index.tsx

@@ -1,5 +1,4 @@
 import styled from "@emotion/styled";
-import { FC } from "react";
 import { colors, spacings } from "../../common/styleVariables";
 import Text from "../Text";
 
@@ -13,14 +12,12 @@ interface Props {
 	label: string;
 }
 
-const SectionSubtitle: FC<Props> = ({ label }) => {
+export default function SectionSubtitle({ label }: Props) {
 	return (
 		<SubtitleWrapper>
 			<Text type="h3" as="h2" color="blueDark">
 				{label}
 			</Text>
 		</SubtitleWrapper>
 	);
-};
-
-export default SectionSubtitle;
+}

src/components/SectionTitle/index.tsx

@@ -1,5 +1,4 @@
 import styled from "@emotion/styled";
-import { FC } from "react";
 import { colors, fontWeights, lineHeights, mediaQueries, spacings } from "../../common/styleVariables";
 import FoldSvg from "./FoldSvg";
 
@@ -60,14 +59,14 @@ const SectionImage = styled.div<{ headerImage: string }>(({ headerImage }) => {
 	};
 });
 
-interface SectionTitleProps {
+interface Props {
 	label: string;
 	headingLevel: "h1" | "h2";
 	backgroundColor: BackgroundColor;
 	headerImage: string;
 }
 
-const SectionTitle: FC<SectionTitleProps> = ({ label, headingLevel, backgroundColor, headerImage }) => {
+export default function SectionTitle({ label, headingLevel, backgroundColor, headerImage }: Props) {
 	return (
 		<HeaderWrapper>
 			<BannerBackdrop backgroundColor={backgroundColor}>
@@ -79,6 +78,4 @@ const SectionTitle: FC<SectionTitleProps> = ({ label, headingLevel, backgroundCo
 			<SectionImage headerImage={headerImage} />
 		</HeaderWrapper>
 	);
-};
-
-export default SectionTitle;
+}

src/components/Spacer/index.tsx

@@ -2,9 +2,9 @@ import styled from "@emotion/styled";
 
 const StyledDiv = styled.div({});
 
-type Props = {
+interface Props {
 	size: number | string;
-};
+}
 
 export default function Spacer({ size }: Props) {
 	const flexBasis = typeof size === "number" ? `${size}px` : size;

src/components/Text/index.tsx

@@ -35,11 +35,11 @@ const StyledDiv = styled("div", {
 	whiteSpace: "pre-line",
 }));
 
-type Props = HTMLAttributes<HTMLDivElement> & {
+interface Props extends HTMLAttributes<HTMLDivElement> {
 	type: TextType;
 	as?: keyof JSX.IntrinsicElements;
 	color?: keyof typeof colors;
-};
+}
 
 export default function Text({ type, as = type, ...props }: Props) {
 	return <StyledDiv type={type} as={as} {...props} />;

src/components/Tooltip/index.tsx

@@ -21,13 +21,13 @@ const StyledTooltip = styled(ReactTooltip)({
 	},
 });
 
-type Props = ITooltip & {
+interface Props extends ITooltip {
 	element?: keyof JSX.IntrinsicElements;
 	children: ReactNode;
 	tooltip: string;
 	tooltipAsHTML?: boolean;
 	id: string;
-};
+}
 
 export default function Tooltip({
 	element = "span",

src/pages/_app.tsx

@@ -18,11 +18,11 @@ if (typeof window !== "undefined" && process.env.NODE_ENV !== "production") {
 	loadAxe();
 }
 
-type CustomPageProps = {
+interface Props {
 	messages: IntlMessages;
-};
+}
 
-export default function App({ Component, pageProps }: AppProps<CustomPageProps>) {
+export default function App({ Component, pageProps }: AppProps<Props>) {
 	useAnalytics();
 	return (
 		<NextIntlClientProvider messages={pageProps.messages}>