Update dependencies

.babelrc

@@ -1,5 +1,8 @@
 {
 	"presets": [
+		["@babel/preset-env", { "targets": { "node": "current" } }],
+		"@babel/preset-typescript",
+		"@emotion/babel-preset-css-prop",
 		[
 			"next/babel",
 			{

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-	"extends": ["next/core-web-vitals", "plugin:storybook/recommended"]
+	"extends": ["eslint:recommended", "next/core-web-vitals", "prettier"]
 }

.github/workflows/test.yml

@@ -14,7 +14,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [16]
+        node-version: [22]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -35,8 +35,6 @@ jobs:
             ${{ steps.yarn-cache-dir-path.outputs.dir }}
             node_modules
           key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
 
       - name: Install dependencies
         run: yarn

.storybook/main.ts

@@ -1,26 +1,33 @@
-import type { StorybookConfig } from '@storybook/core-common';
+import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
 	stories: ['../components/**/*.stories.@(js|jsx|ts|tsx)'],
+
 	addons: [
 		'@storybook/addon-a11y',
 		'@storybook/addon-links',
-		{ name: '@storybook/addon-essentials', options: { backgrounds: false } },
-		'@storybook/addon-postcss',
-		'storybook-addon-next-router',
+		{
+			name: '@storybook/addon-essentials',
+			options: {
+				backgrounds: false,
+			},
+		},
 	],
-	framework: '@storybook/react',
-	core: {
-		builder: 'webpack5',
-	},
-	features: {
-		/**
-		 * Enable code splitting
-		 * @see https://storybook.js.org/docs/react/builders/webpack#code-splitting
-		 */
-		storyStoreV7: true,
+
+	framework: {
+		name: '@storybook/nextjs',
+		options: {},
 	},
+
+	features: {},
+
 	staticDirs: ['../public'],
+
+	docs: {},
+
+	typescript: {
+		reactDocgen: 'react-docgen-typescript',
+	},
 };
 
 export default config;

.storybook/preview.tsx

@@ -1,30 +1,37 @@
-import { DecoratorFn } from '@storybook/react';
+import { Preview } from '@storybook/react';
 import { Core } from '@ag.ds-next/react/core';
 import { Box } from '@ag.ds-next/react/box';
 import { theme } from '@ag.ds-next/react/ag-branding';
-import { RouterContext } from 'next/dist/shared/lib/router-context'; // next 12
 
 export const parameters = {
-	actions: { argTypesRegex: '^on[A-Z].*' },
+	actions: {},
 	controls: {
 		matchers: {
 			color: /(background|color)$/i,
 			date: /Date$/,
 		},
 	},
-	nextRouter: {
-		Provider: RouterContext.Provider,
-	},
 };
 
-const withBrandTheme: DecoratorFn = (Story, context) => {
-	return (
-		<Core theme={theme}>
-			<Box width="100%" minHeight="100vh" padding={1} background="body">
-				<Story />
-			</Box>
-		</Core>
-	);
+const preview: Preview = {
+	parameters,
+	decorators: [
+		(Story, context) => {
+			const palette = context.globals.palette;
+			return (
+				<Core theme={theme}>
+					<Box
+						background="body"
+						minHeight="100vh"
+						palette={palette}
+						width="100%"
+					>
+						<Story />
+					</Box>
+				</Core>
+			);
+		},
+	],
 };
 
-export const decorators = [withBrandTheme];
+export default preview;

components/AppLayout/AppLayout.stories.tsx

@@ -1,10 +1,12 @@
 import { AppLayout } from '.';
 
-export default {
+const meta = {
 	title: 'Components/AppLayout',
 	component: AppLayout,
 };
 
+export default meta;
+
 export const Default = () => {
 	return (
 		<AppLayout>

components/AppLayout/AppLayout.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { Box, Flex } from '@ag.ds-next/react/box';
+import { Box } from '@ag.ds-next/react/box';
+import { Flex } from '@ag.ds-next/react/flex';
 import { SkipLinks } from '@ag.ds-next/react/skip-link';
 import { SiteHeader } from '../SiteHeader';
 import { SiteFooter } from '../SiteFooter';
@@ -16,11 +17,11 @@ export const AppLayout = ({ children }: { children: ReactNode }) => {
 			<Flex
 				flexDirection="column"
 				fontFamily="body"
-				palette="light"
 				minHeight="100vh"
+				palette="light"
 			>
 				<SiteHeader />
-				<Box as="main" id="main-content" flexGrow={1}>
+				<Box as="main" flexGrow={1} id="main-content">
 					{children}
 				</Box>
 				<SiteFooter />

components/HomePage/HomePage.stories.tsx

@@ -1,10 +1,12 @@
 import { HomePage } from '.';
 
-export default {
+const meta = {
 	title: 'Pages/Home',
 	component: HomePage,
 };
 
+export default meta;
+
 export const Default = () => {
 	return <HomePage />;
 };

components/SiteFooter/SiteFooter.stories.tsx

@@ -1,10 +1,12 @@
 import { SiteFooter } from './SiteFooter';
 
-export default {
+const meta = {
 	title: 'Components/SiteFooter',
 	component: SiteFooter,
 };
 
+export default meta;
+
 export const Default = () => {
 	return <SiteFooter />;
 };

components/SiteFooter/SiteFooter.tsx

@@ -12,7 +12,7 @@ const footerLinks = [
 export const SiteFooter = () => (
 	<Box palette="dark">
 		<Footer background="bodyAlt">
-			<LinkList links={footerLinks} horizontal />
+			<LinkList horizontal links={footerLinks} />
 			<FooterDivider />
 			<Text fontSize="xs" maxWidth="42em">
 				We acknowledge the traditional owners of country throughout Australia

components/SiteHeader/SiteHeader.stories.tsx

@@ -1,10 +1,12 @@
 import { SiteHeader } from './SiteHeader';
 
-export default {
+const meta = {
 	title: 'Components/SiteHeader',
 	component: SiteHeader,
 };
 
+export default meta;
+
 export const Default = () => {
 	return <SiteHeader />;
 };

components/SiteHeader/SiteHeader.tsx

@@ -1,8 +1,8 @@
 import { useRouter } from 'next/router';
 import { Logo } from '@ag.ds-next/react/ag-branding';
-import { Stack } from '@ag.ds-next/react/box';
 import { Header } from '@ag.ds-next/react/header';
 import { MainNav } from '@ag.ds-next/react/main-nav';
+import { Stack } from '@ag.ds-next/react/stack';
 
 const NAV_LINKS = [{ label: 'Home', href: '/' }];
 
@@ -12,15 +12,15 @@ export const SiteHeader = () => {
 		<Stack palette="dark">
 			<Header
 				background="bodyAlt"
-				logo={<Logo />}
+				badgeLabel="Beta"
 				heading="Agriculture Design System"
+				logo={<Logo />}
 				subline="Design System for the Export Service"
-				badgeLabel="Beta"
 			/>
 			<MainNav
+				activePath={router.asPath}
 				id="main-nav"
 				items={NAV_LINKS}
-				activePath={router.asPath}
 				secondaryItems={[
 					{
 						label: 'Github',

eslint.config.mjs

@@ -0,0 +1,21 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+	baseDirectory: __dirname,
+	recommendedConfig: js.configs.recommended,
+	allConfig: js.configs.all,
+});
+
+const config = [
+	{
+		ignores: ['!**/.storybook', '.next'],
+	},
+	...compat.extends('eslint:recommended', 'next/core-web-vitals', 'prettier'),
+];
+
+export default config;

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

package.json

@@ -6,43 +6,45 @@
 		"dev": "next dev",
 		"build": "next build",
 		"start": "next start",
-		"storybook": "start-storybook -p 6006",
-		"build-storybook": "build-storybook",
-		"lint": "lint:app && lint:prettier",
-		"lint:app": "next lint",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"lint": "yarn lint:app && yarn lint:prettier && yarn lint:typescript",
+		"lint:app": "eslint .",
 		"lint:prettier": "prettier --check \"**/*.{js,jsx,json,ts,tsx,md,mdx,yml,yaml}\"",
+		"lint:typescript": "tsc --noEmit",
 		"format": "prettier --write \"**/*.{js,jsx,json,ts,tsx,md,mdx}\""
 	},
 	"dependencies": {
-		"@ag.ds-next/react": "^1.7.0",
-		"@emotion/react": "^11.8.2",
-		"facepaint": "^1.2.1",
-		"next": "^13.2.2",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
-		"storybook-addon-next-router": "^4.0.1"
+		"@ag.ds-next/react": "^1.28.0",
+		"@emotion/react": "^11.14.0",
+		"next": "^15.3.2",
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.20.5",
-		"@babel/preset-env": "^7.16.5",
-		"@emotion/babel-plugin": "^11.7.2",
-		"@emotion/babel-preset-css-prop": "^11.2.0",
-		"@storybook/addon-a11y": "^6.5.12",
-		"@storybook/addon-actions": "^6.5.12",
-		"@storybook/addon-essentials": "^6.5.12",
-		"@storybook/addon-links": "^6.5.12",
-		"@storybook/addon-postcss": "^2.0.0",
-		"@storybook/builder-webpack5": "^6.5.12",
-		"@storybook/manager-webpack5": "^6.5.12",
-		"@storybook/react": "^6.5.12",
-		"@types/node": "^18.14.2",
-		"@types/react": "18.0.28",
-		"@types/react-dom": "18.0.11",
-		"babel-loader": "^8.3.0",
-		"eslint": "8.12.0",
-		"eslint-config-next": "12.1.2",
-		"eslint-plugin-storybook": "^0.6.8",
-		"prettier": "^2.4.1",
-		"typescript": "4.6.3"
+		"@babel/core": "^7.27.1",
+		"@babel/preset-env": "^7.27.2",
+		"@emotion/babel-plugin": "^11.13.5",
+		"@emotion/babel-preset-css-prop": "^11.12.0",
+		"@eslint/eslintrc": "^3.3.1",
+		"@eslint/js": "^9.26.0",
+		"@storybook/addon-a11y": "^8.6.12",
+		"@storybook/addon-actions": "^8.6.12",
+		"@storybook/addon-essentials": "^8.6.12",
+		"@storybook/addon-links": "^8.6.12",
+		"@storybook/nextjs": "^8.6.12",
+		"@storybook/react": "^8.6.12",
+		"@storybook/react-webpack5": "^8.6.12",
+		"@types/node": "^22.15.18",
+		"@types/react": "19.1.0",
+		"@types/react-dom": "19.1.0",
+		"babel-loader": "^10.0.0",
+		"eslint": "9.26.0",
+		"eslint-config-next": "^15.3.2",
+		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-storybook": "^0.12.0",
+		"prettier": "^3.5.3",
+		"storybook": "^8.6.12",
+		"typescript": "5.8.3"
 	}
 }

pages/404.tsx

@@ -1,6 +1,6 @@
+import { PageContent } from '@ag.ds-next/react/content';
 import { H1 } from '@ag.ds-next/react/heading';
 import { Text } from '@ag.ds-next/react/text';
-import { PageContent } from '@ag.ds-next/react/content';
 import { AppLayout } from '../components/AppLayout';
 import { DocumentTitle } from '../components/DocumentTitle';