fix: Fix linting issues

.github/workflows/cd-staging.yml

@@ -6,29 +6,30 @@ on:
   workflow_dispatch:
 
 jobs:
-  build-cms:
-    name: Build CMS Docker Image
-    runs-on: ubuntu-22.04
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@v3
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v1
-        with:
-          registry: ghcr.io
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build and push
-        uses: docker/build-push-action@v2
-        with:
-          file: ./apps/cms/docker/staging/Dockerfile
-          context: .
-          push: true
-          tags: |
-            ghcr.io/${{ github.repository_owner }}/website/cms:${{ github.sha }}
-            ghcr.io/${{ github.repository_owner }}/website/cms:latest
+  # TODO: CMS build is currently broken.
+  # build-cms:
+  #   name: Build CMS Docker Image
+  #   runs-on: ubuntu-22.04
+  #   steps:
+  #     - name: Checkout repo
+  #       uses: actions/checkout@v3
+
+  #     - name: Login to GitHub Container Registry
+  #       uses: docker/login-action@v1
+  #       with:
+  #         registry: ghcr.io
+  #         username: ${{ github.repository_owner }}
+  #         password: ${{ secrets.GITHUB_TOKEN }}
+
+  #     - name: Build and push
+  #       uses: docker/build-push-action@v2
+  #       with:
+  #         file: ./apps/cms/docker/staging/Dockerfile
+  #         context: .
+  #         push: true
+  #         tags: |
+  #           ghcr.io/${{ github.repository_owner }}/website/cms:${{ github.sha }}
+  #           ghcr.io/${{ github.repository_owner }}/website/cms:latest
 
   build-merch:
     name: Build Merch Docker Image

apps/cms/docker/staging/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16-alpine AS builder
+FROM node:18-alpine AS builder
 
 RUN apk add --no-cache libc6-compat
 RUN apk update
@@ -11,7 +11,7 @@ RUN rm -rf **/node_modules **/build **/dist **/out **/.turbo
 RUN rm -rf **/.env
 RUN turbo prune --scope=cms --docker
 
-FROM node:16-alpine AS installer
+FROM node:18-alpine AS installer
 # Add lockfile and package.json's of isolated subworkspace
 RUN apk add --no-cache libc6-compat
 RUN apk update
@@ -21,14 +21,15 @@ WORKDIR /app
 COPY .gitignore .gitignore
 COPY --from=builder /app/out/json/ .
 COPY --from=builder /app/out/yarn.lock ./yarn.lock
-RUN yarn install
+RUN yarn --version
+RUN yarn install --verbose
 
 # Build the project and its dependencies
 COPY --from=builder /app/out/full/ .
 COPY turbo.json turbo.json
 RUN yarn turbo run build --filter=cms...
 
-FROM node:16-alpine AS runner
+FROM node:18-alpine AS runner
 
 WORKDIR /app
 

package.json

@@ -30,7 +30,7 @@
     "turbo": "^1.12.5"
   },
   "engines": {
-    "node": ">=16.0.0",
+    "node": ">=18.0.0",
     "npm": "please-use-yarn",
     "yarn": ">= 1.22.17",
     "pnpm": "please-use-yarn"

packages/ui/components/blog-card/BlogCard.stories.tsx

@@ -1,20 +1,18 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { type Meta, type StoryFn } from "@storybook/react";
 import { BlogCard } from "./BlogCard";
 
 export default {
   title: "Components/BlogCard",
   component: BlogCard,
   argTypes: {},
-} as ComponentMeta<typeof BlogCard>;
+} as Meta<typeof BlogCard>;
 
-const Template: ComponentStory<typeof BlogCard> = (args) => (
+const Template: StoryFn<typeof BlogCard> = (args) => (
   <BlogCard {...args} />
 );
 
 export const Default = Template.bind({});
 Default.args = {
-  link: "/#",
   blogCardImageProps: {
     src: "https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
     alt: "unsplash image",

packages/ui/components/button/ButtonLink.stories.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { type Meta, type StoryFn } from "@storybook/react";
 
 import { ButtonLink } from "./ButtonLink";
 
@@ -8,9 +7,9 @@ export default {
   component: ButtonLink,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {},
-} as ComponentMeta<typeof ButtonLink>;
+} as Meta<typeof ButtonLink>;
 
-const Template: ComponentStory<typeof ButtonLink> = (args) => <ButtonLink {...args} />;
+const Template: StoryFn<typeof ButtonLink> = (args) => <ButtonLink {...args} />;
 
 export const PrimaryBlue = Template.bind({});
 PrimaryBlue.args = {

packages/ui/components/carousel/Carousel.stories.tsx

@@ -1,14 +1,13 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { type Meta, type StoryFn } from "@storybook/react";
 import { Carousel } from "./Carousel";
 
 export default {
   title: "Components/Carousel",
   component: Carousel,
   argTypes: {},
-} as ComponentMeta<typeof Carousel>;
+} as Meta<typeof Carousel>;
 
-const Template: ComponentStory<typeof Carousel> = (args) => (
+const Template: StoryFn<typeof Carousel> = (args) => (
   <Carousel {...args} />
 );
 export const Primary = Template.bind({});

packages/ui/components/faq/Faq.stories.tsx

@@ -1,14 +1,13 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { type Meta, type StoryFn } from "@storybook/react";
 import { Faq } from "./Faq";
 
 export default {
   title: "Components/Faq",
   component: Faq,
   argTypes: {},
-} as ComponentMeta<typeof Faq>;
+} as Meta<typeof Faq>;
 
-const Template: ComponentStory<typeof Faq> = (args) => <Faq {...args} />;
+const Template: StoryFn<typeof Faq> = (args) => <Faq {...args} />;
 
 export const Primary = Template.bind({});
 Primary.args = {

packages/ui/components/footer/Footer.stories.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { type Meta, type StoryFn } from "@storybook/react";
 
 import { Footer } from "./Footer";
 import { FaGithub, FaInstagram, FaLinkedin } from "react-icons/fa";
@@ -8,9 +7,9 @@ export default {
   title: "Components/Footer",
   component: Footer,
   argTypes: {},
-} as ComponentMeta<typeof Footer>;
+} as Meta<typeof Footer>;
 
-const Template: ComponentStory<typeof Footer> = (args) => <Footer {...args} />;
+const Template: StoryFn<typeof Footer> = (args) => <Footer {...args} />;
 
 export const Basic = Template.bind({});
 Basic.args = {

packages/ui/components/footer/Footer.tsx

@@ -1,7 +1,6 @@
 import { Flex, VStack, Box, Text, Stack, Link, Icon } from "@chakra-ui/react";
 import { FooterLinkGroup, FooterLinkGroupProps } from "./FooterLink";
 import { Image, VercelPowered, VercelPoweredProps } from "ui";
-import React from "react";
 import { LogoProps } from "../navbar/Logo";
 
 export interface FooterProps {

packages/ui/components/hero/Hero.stories.tsx

@@ -1,14 +1,13 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { type Meta, type StoryFn } from "@storybook/react";
 import { Hero } from "./Hero";
 
 export default {
   title: "Components/Hero",
   component: Hero,
   argTypes: {},
-} as ComponentMeta<typeof Hero>;
+} as Meta<typeof Hero>;
 
-const Template: ComponentStory<typeof Hero> = (args) => <Hero {...args} />;
+const Template: StoryFn<typeof Hero> = (args) => <Hero {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -20,13 +19,13 @@ Default.args = {
     {
       label: "LEARN MORE",
       href: "/learn",
-      buttonType: "primary.blue",
+      variant: "primary-blue",
       size: "lg",
     },
     {
       label: "CONTACT US",
       href: "/contact",
-      buttonType: "primary.black",
+      variant: "primary-black",
       size: "lg",
     },
   ],

packages/ui/components/map/Map.stories.tsx

@@ -1,15 +1,14 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { type Meta, type StoryFn } from "@storybook/react";
 
 import { Map } from "./Map";
 
 export default {
   title: "Components/Map",
   component: Map,
   argTypes: {},
-} as ComponentMeta<typeof Map>;
+} as Meta<typeof Map>;
 
-const Template: ComponentStory<typeof Map> = (args) => <Map {...args} />;
+const Template: StoryFn<typeof Map> = (args) => <Map {...args} />;
 
 export const Primary = Template.bind({});
 Primary.args = {

packages/ui/components/navbar/NavBar.stories.tsx

@@ -1,14 +1,13 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { type Meta, type StoryFn } from "@storybook/react";
 import { NavBar } from "./NavBar";
 
 export default {
   title: "Components/NavBar",
   component: NavBar,
   argTypes: {},
-} as ComponentMeta<typeof NavBar>;
+} as Meta<typeof NavBar>;
 
-const Template: ComponentStory<typeof NavBar> = (args) => <NavBar {...args} />;
+const Template: StoryFn<typeof NavBar> = (args) => <NavBar {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

packages/ui/components/vercelpowered/VercelPowered.stories.tsx

@@ -1,15 +1,14 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { type Meta, type StoryFn } from "@storybook/react";
 
 import { VercelPowered } from "./VercelPowered";
 
 export default {
   title: "Components/VercelPowered",
   component: VercelPowered,
   argTypes: {},
-} as ComponentMeta<typeof VercelPowered>;
+} as Meta<typeof VercelPowered>;
 
-const Template: ComponentStory<typeof VercelPowered> = (args) => (
+const Template: StoryFn<typeof VercelPowered> = (args) => (
   <VercelPowered {...args} />
 );
 

packages/ui/stories/example/Button.stories.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { type Meta, type StoryFn } from "@storybook/react";
 
 import { Button } from "./Button";
 
@@ -11,10 +10,10 @@ export default {
   argTypes: {
     backgroundColor: { control: "color" },
   },
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args

packages/ui/stories/example/Header.stories.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { type Meta, type StoryFn } from "@storybook/react";
 
 import { Header } from "./Header";
 
@@ -10,9 +9,9 @@ export default {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof Header>;
+} as Meta<typeof Header>;
 
-const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+const Template: StoryFn<typeof Header> = (args) => <Header {...args} />;
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {

packages/ui/stories/example/Page.stories.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { type Meta, type StoryFn } from "@storybook/react";
 import { within, userEvent } from "@storybook/testing-library";
 import { Page } from "./Page";
 
@@ -10,17 +9,17 @@ export default {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof Page>;
+} as Meta<typeof Page>;
 
-const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
+const Template: StoryFn<typeof Page> = (args) => <Page {...args} />;
 
 export const LoggedOut = Template.bind({});
 
 export const LoggedIn = Template.bind({});
 
 // More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
 LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = await within(canvasElement);
-  const loginButton = await canvas.getByRole("button", { name: /Log in/i });
+  const canvas = within(canvasElement);
+  const loginButton = canvas.getByRole("button", { name: /Log in/i });
   await userEvent.click(loginButton);
 };