Merge pull request #429 from PortableStudios/update-workspace-depende…

…ncies

chore: update scaffolding dependencies and upgrade node from v16 to v20

.github/workflows/main.yml

@@ -8,12 +8,12 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
-          registry-url: 'https://npm.pkg.github.com/'
-          scope: '@portablestudios'
+          node-version-file: ".nvmrc"
+          registry-url: "https://npm.pkg.github.com/"
+          scope: "@portablestudios"
 
       - name: Install dependencies
         run: yarn install --frozen-lockfile
@@ -24,7 +24,7 @@ jobs:
       - name: Generate a Next.js project
         run: |
           yarn sao . test-project --answers \
-            '{ "name": "test-project", "description": "Cool project", "author": "John Smith <[email protected]", "type": "nextjs" }'
+            '{ "name": "test-project", "description": "Cool project", "author": "John Smith <[email protected]>", "type": "nextjs" }'
 
       # https://github.com/actions/setup-node#usage
       - name: Install dependencies in the project

.husky/pre-push

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn pre-push

.nvmrc

@@ -1 +1 @@
-v16.15.1
+v20.14.0

package.json

@@ -16,20 +16,17 @@
     "template"
   ],
   "scripts": {
-    "prepare": "husky install",
+    "prepare": "husky",
     "pre-push": "yarn test",
     "test": "ava"
   },
-  "dependencies": {
-    "superb": "^4.0.0"
-  },
   "devDependencies": {
-    "ava": "^4.3.0",
-    "husky": "^8.0.1",
+    "ava": "^6.1.3",
+    "husky": "^9.0.11",
     "sao": "^1.7.1"
   },
   "engines": {
-    "node": ">=16.0.0",
-    "npm": ">=8.0.0"
+    "node": ">=20.0.0",
+    "npm": ">=10.0.0"
   }
 }

saofile.js

@@ -1,5 +1,3 @@
-const superb = require("superb");
-
 const stacks = [
   {
     name: "Next.js with Chakra UI",
@@ -19,7 +17,6 @@ module.exports = {
       {
         name: "description",
         message: "How would you describe the new project",
-        default: `my ${superb.random()} project`,
       },
       {
         name: "author",

template/common/.nvmrc

@@ -1 +1 @@
-v16.15.1
+v20.14.0

template/next-ts-chakra-ui/.storybook/main.js → template/next-ts-chakra-ui/.storybook/main.ts

@@ -1,29 +1,27 @@
-const path = require('path');
+import path from 'path';
+import type { StorybookConfig } from '@storybook/nextjs';
 
-module.exports = {
+const config: StorybookConfig = {
+  framework: '@storybook/nextjs',
   staticDirs: ['../public'],
   stories: [
-    '../node_modules/@portablestudios/figma2theme/lib/**/*.stories.js',
+    // TODO: Update figma2theme and uncomment this
+    // '../node_modules/@portablestudios/figma2theme/lib/**/*.stories.js',
     '../src/**/*.stories.tsx',
   ],
-  core: {
-    builder: 'webpack5',
-  },
-  features: {
-    emotionAlias: false,
-  },
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-viewport',
     '@storybook/addon-storysource',
     '@storybook/addon-a11y',
     '@storybook/addon-links',
+    '@storybook/addon-designs',
     'storycap/register',
   ],
   babel: async (options) => ({
     ...options,
     plugins: [
-      ...options.plugins,
+      ...(options.plugins ?? []),
       [
         'module-resolver',
         {
@@ -35,8 +33,10 @@ module.exports = {
   }),
   webpackFinal: async (config) => {
     // Insert our custom polyfill file in to the beginning of the entry point
-    config.entry.unshift('./src/polyfills.ts');
+    (config.entry as string[]).unshift('./src/polyfills.ts');
 
     return config;
   },
 };
+
+export default config;

template/next-ts-chakra-ui/.storybook/preview.tsx

@@ -1,29 +1,10 @@
 import React from 'react';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { withScreenshot } from 'storycap';
-import * as NextImage from 'next/image';
 
 import AppProvider from '../src/components/AppProvider';
 import MockRouterProvider from '../src/utils/testing/MockRouterProvider';
 
-// Override `next/image` to prevent it throwing an error in Storybook
-// https://github.com/vercel/next.js/issues/36417#issuecomment-1117360509
-const OriginalNextImage = NextImage.default;
-Object.defineProperty(NextImage, 'default', {
-  configurable: true,
-  value: function NextImage(
-    props: React.ComponentProps<typeof OriginalNextImage>
-  ) {
-    return (
-      <OriginalNextImage {...props} unoptimized loader={({ src }) => src} />
-    );
-  },
-});
-Object.defineProperty(NextImage, '__esModule', {
-  configurable: true,
-  value: true,
-});
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const withProviders = (Story: any) => {
   return (
@@ -35,18 +16,11 @@ const withProviders = (Story: any) => {
   );
 };
 
-export const decorators = [withProviders, withScreenshot];
+const decorators = [withProviders, withScreenshot()];
 
-export const parameters = {
+const parameters = {
   actions: { argTypesRegex: '^on.*' },
-  options: {
-    // Sort categories alphabetically
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    storySort: (a: any, b: any) =>
-      a[1].kind === b[1].kind
-        ? 0
-        : a[1].id.localeCompare(b[1].id, { numeric: true }),
-  },
+  options: { storySort: { method: 'alphabetical' } },
   viewport: {
     viewports: {
       cheapLaptop: {
@@ -140,3 +114,10 @@ export const parameters = {
     },
   },
 };
+
+const config = {
+  decorators,
+  parameters,
+};
+
+export default config;

template/next-ts-chakra-ui/jest.setup.ts

@@ -1,10 +1,10 @@
 import { cleanup } from '@testing-library/react';
-import { setGlobalConfig } from '@storybook/testing-react';
+import { setProjectAnnotations } from '@storybook/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import * as globalStorybookConfig from './.storybook/preview';
+import globalStorybookConfig from './.storybook/preview';
 
-setGlobalConfig(globalStorybookConfig);
+setProjectAnnotations(globalStorybookConfig);
 
 afterEach(() => {
   cleanup();

template/next-ts-chakra-ui/package.json

@@ -16,8 +16,8 @@
     "typecheck": "concurrently --group yarn:typecheck:*",
     "typecheck:app": "tsc -p ./tsconfig.json --noEmit",
     "typecheck:cypress": " tsc -p ./cypress/tsconfig.json --noEmit",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "sb dev -p 6006",
+    "build-storybook": "sb build",
     "screenshots": "rimraf __screenshots__ && storycap http://localhost:6006 --flat",
     "analyze": "cross-env ANALYZE=true yarn build",
     "test": "jest --passWithNoTests",
@@ -39,7 +39,7 @@
     "@types/gtag.js": "^0.0.10",
     "@types/smoothscroll-polyfill": "^0.3.1",
     "framer-motion": "^6.3.11",
-    "next": "12.1.6",
+    "next": "12.3.4",
     "next-compose-plugins": "^2.2.1",
     "polished": "^4.2.2",
     "react": "18.1.0",
@@ -55,17 +55,18 @@
     "@chakra-ui/utils": "^2.0.2",
     "@cypress/webpack-preprocessor": "^5.12.0",
     "@portablestudios/figma2theme": "^0.6.9",
-    "@storybook/addon-a11y": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/addon-storysource": "^6.5.9",
-    "@storybook/addon-viewport": "^6.5.9",
-    "@storybook/addons": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@storybook/testing-react": "^1.3.0",
-    "@storybook/theming": "^6.5.9",
+    "@storybook/addon-a11y": "7.6.19",
+    "@storybook/addon-designs": "7.0.9",
+    "@storybook/addon-essentials": "7.6.19",
+    "@storybook/addon-links": "7.6.19",
+    "@storybook/addon-storysource": "7.6.19",
+    "@storybook/addon-viewport": "7.6.19",
+    "@storybook/addons": "7.6.19",
+    "@storybook/builder-webpack5": "7.6.19",
+    "@storybook/cli": "7.6.19",
+    "@storybook/nextjs": "7.6.19",
+    "@storybook/react": "7.6.19",
+    "@storybook/theming": "7.6.19",
     "@testing-library/cypress": "^8.0.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
@@ -98,16 +99,15 @@
     "plop": "^3.1.0",
     "prettier": "^2.7.0",
     "rimraf": "^3.0.2",
-    "storybook-addon-designs": "^6.3.1",
-    "storycap": "^3.1.8",
+    "storycap": "^5.0.0",
     "ts-node": "^10.8.1",
     "typescript": "^4.7.3",
     "webp-loader": "^0.6.0",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0"
   },
   "engines": {
-    "node": ">=16.0.0",
-    "npm": ">=8.0.0"
+    "node": ">=20.0.0",
+    "npm": ">=10.0.0"
   }
 }

template/next-ts-chakra-ui/src/theme/styles.ts

@@ -5,7 +5,7 @@ import type { Styles } from '@chakra-ui/theme-tools';
 const styles: Styles = {
   global: {
     // Make our page containers fill the height of the browser
-    'html, body, #root, #__next': {
+    'html, body, #storybook-root, #__next': {
       height: '100%',
     },
   },

template/next-ts-chakra-ui/templates/Component/Component.test.tsx.hbs

@@ -1,5 +1,5 @@
 import React from 'react';
-import { composeStories } from '@storybook/testing-react';
+import { composeStories } from '@storybook/react';
 
 import { render, screen } from '@/utils/testing';