Next gatsby v5

.stylelintrc

@@ -4,18 +4,13 @@
     "selector-pseudo-class-no-unknown": [
       true,
       {
-        "ignorePseudoClasses": [
-          "global",
-          "local"
-        ]
+        "ignorePseudoClasses": ["global", "local"]
       }
     ],
     "property-no-unknown": [
       true,
       {
-        "ignoreProperties": [
-          "composes"
-        ]
+        "ignoreProperties": ["composes"]
       }
     ],
     "no-descending-specificity": null

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "xyc.vscode-mdx-preview",
+    "unifiedjs.vscode-mdx",
+    "editorconfig.editorconfig"
+  ]
+}

.yarnrc.yml

@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.0.cjs
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

README.md

@@ -5,10 +5,6 @@
 > :exclamation: This project is maintained by community contributions. The original
 > contributor, Carbon Design System, is no longer involved in maintaining this project.
 
-The Gatsby Carbon theme includes all the configuration you need to build a beautiful
-site inspired by the [Carbon Design System](https://www.carbondesignsystem.com).
-
-[![Validate](https://github.com/carbon-design-system/gatsby-theme-carbon/actions/workflows/validate-and-build.yaml/badge.svg)](https://github.com/carbon-design-system/gatsby-theme-carbon/actions/workflows/validate-and-build.yaml)
 [![release-it](https://github.com/carbon-design-system/gatsby-theme-carbon/actions/workflows/release.yml/badge.svg)](https://github.com/carbon-design-system/gatsby-theme-carbon/actions/workflows/release.yml)
 
 <!-- NPM info -->

cp-example.sh

@@ -1,4 +1,6 @@
-# This script is used to update the a repository containing the starter kit 
+#!/bin/bash
+
+# This script is used to update the a repository containing the starter kit
 # https://github.com/carbon-design-system/gatsby-starter-carbon-theme
 # This project should be located in the same directory as the starter project
 
@@ -8,4 +10,4 @@ find ./packages/example -type f -maxdepth 1 ! -iname '.DS_Store' -exec cp {} ../
 # delete and copy over directories
 rm -rf ../gatsby-starter-carbon-theme/{src,static}
 cp -r ./packages/example/src ../gatsby-starter-carbon-theme/src
-cp -r ./packages/example/static ../gatsby-starter-carbon-theme/static
+cp -r ./packages/example/static ../gatsby-starter-carbon-theme/static

docs/commitlint.md

@@ -1,3 +1,5 @@
+# commitlint
+
 ## My pull request is failing! What Gives?
 
 We use a tool called
@@ -8,33 +10,35 @@ packages based on the type of commit.
 If you're here, odds are your pull request or a subsequent commit didn't adhere
 to our guidelines.
 
-## So what do I do about it?!
+### So what do I do about it?
 
 We need a commit message that describes what's happening in your commit, let's
 build one.
 
-### Type
+#### Type
 
 Commit messages need a type, pick the one below that best matches your commit:
 
 **Release:** commits in this category will trigger a release of the package
 
-- fix: a bug fix (triggers a `patch` release)
-- feat: a new feature (triggers a `minor` release)
+- **fix**: a bug fix (triggers a `patch` release)
+- **feat**: a new feature (triggers a `minor` release)
 
 **No release:** commits in this category won't trigger a release
 
-- build: changes that affect the build system
-- ci: changes to our CI configuration
-- chore: dependency updates
-- docs: documentation changes
-- perf: performance improvements
-- refactor: code change that neither fixes a bug, nore adds a feature
-- test: adding or changing test files
+- **build**: changes that affect the build system
+- **ci**: changes to our CI configuration
+- **chore**: dependency updates
+- **docs**: documentation changes
+- **perf**: performance improvements
+- **refactor**: code change that neither fixes a bug, nor adds a feature
+- **test**: adding or changing test files
+- **revert**: undoes another commit
+- **style**: changes that do not affect the meaning of the code
 
 Commit messages should look like this:
 
-### Structure
+#### Structure
 
 Your commit should look like this (keep everything lowercase, even React
 components):
@@ -45,7 +49,7 @@ type(scope): subject # scope is optional, it refers to a particular component/fe
 
 The `subject` is just a short summary of the code changes
 
-### Examples
+#### Examples
 
 ```bash
 feat: add RTL support
@@ -55,7 +59,7 @@ feat: add RTL support
 fix(aside): remove aside margin
 ```
 
-### Fixing the PR
+#### Fixing the PR
 
 1. On the command line, navigate to the repository that contains the commit you
    want to amend

docs/development-principles.md

@@ -1,4 +1,6 @@
-# What should be a feature?
+# Development principles
+
+## What should be a feature?
 
 When determining whether a not a new feature should be added to the theme, we
 should run the feature through the following heuristic. The term `siteland`
@@ -13,7 +15,7 @@ If any of the above are false, we recommend building a solution in `siteland`
 for the project that needs it most. This ensures we bring in mature, solutions
 that have the largest likelihood of solving more problems than it causes.
 
-# What constitutes a breaking change?
+## What constitutes a breaking change?
 
 A breaking change for the theme is one in which, after upgrading, a site is
 unable to build.

docs/releases.md

@@ -1,4 +1,6 @@
-# When does the theme publish releases?
+# Releases
+
+## When does the theme publish releases?
 
 At the moment, we intentionally publish releases manually. We want each release
 to have meaning and reduce constant release churn. For that reason we release
@@ -12,7 +14,7 @@ when any of the following conditions are true:
 If a patch is narrow in scope(impacting a small subset of sites) we'll hold off
 on releasing the patch for the reasons mentioned above.
 
-# How to publish a new theme version
+## How to publish a new theme version
 
 We publish to npm, create a GitHub release, and generate changelogs by using
 [release-it](https://www.npmjs.com/package/release-it). To practice, use
@@ -27,7 +29,7 @@ not actually do anything.
 4. Complete the prompts
 5. 🚀 You did it! 🥳
 
-# Updating the starter
+## Updating the starter
 
 If there's been a feature release/substantial change to the example project, you
 should update the gatsby starter kit

package.json

@@ -1,6 +1,8 @@
 {
   "name": "gatsby-theme-carbon-workspace",
   "private": true,
+  "version": "4.0.0-next.11",
+  "packageManager": "[email protected]",
   "repository": {
     "url": "[email protected]:carbon-design-system/gatsby-theme-carbon.git",
     "type": "git"
@@ -38,12 +40,11 @@
   },
   "release-it": {
     "plugins": {
-      "release-it-yarn-workspaces": {
-        "skipChecks": true
-      },
+      "@release-it-plugins/workspaces": true,
       "@release-it/conventional-changelog": {
-        "preset": "conventionalcommits",
-        "infile": "CHANGELOG.md"
+        "infile": "CHANGELOG.md",
+        "header": "# Changelog",
+        "preset": "conventionalcommits"
       }
     },
     "github": {
@@ -79,31 +80,32 @@
     ]
   },
   "dependencies": {
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
-    "@release-it/conventional-changelog": "^2.0.1",
+    "@babel/core": "^7.24.5",
+    "@babel/eslint-parser": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@commitlint/cli": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.3",
+    "@release-it-plugins/workspaces": "^4.2.0",
+    "@release-it/conventional-changelog": "^8.0.1",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-config-wesbos": "0.0.19",
-    "eslint-plugin-html": "^6.2.0",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-wesbos": "4.0.1",
+    "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^4.3.8",
-    "lerna": "^8.1.2",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.8.8",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "husky": "^9.0.11",
+    "lerna": "^8.1.3",
+    "lint-staged": "^15.2.4",
+    "prettier": "^3.2.5",
     "prettier-config-carbon": "^0.11.0",
-    "release-it": "^14.14.3",
-    "release-it-yarn-workspaces": "^2.0.1",
-    "stylelint": "^15.11.0",
-    "stylelint-config-recommended-scss": "^12.0.0",
-    "stylelint-scss": "^5.3.2"
-  },
-  "version": "3.4.22",
-  "packageManager": "[email protected]"
+    "release-it": "^17.3.0",
+    "stylelint": "^16.5.0",
+    "stylelint-config-recommended-scss": "^14.0.0",
+    "stylelint-scss": "^6.3.0"
+  }
 }

packages/example/README.md

@@ -7,7 +7,7 @@
 
 > Gatsby [themes](https://www.gatsbyjs.org/docs/themes/) encapsulate all of the
 > configuration and implementation details of Gatsby websites. This is a
-> starter-kit (boilerplate) with a dependancy on the `gatsby-theme-carbon`
+> starter-kit (boilerplate) with a dependency on the `gatsby-theme-carbon`
 > package. The primary goal of `gatsby-theme-carbon` is to get content authors
 > speaking the IBM Design Language with Carbon as soon as possible. It includes
 > some sample components/content demos in the `src/pages` directory.

packages/example/gatsby-config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  trailingSlash: `always`,
   siteMetadata: {
     title: 'Gatsby Theme Carbon',
     description: 'A Gatsby theme for the carbon design system',

packages/example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example",
   "private": true,
-  "version": "3.4.22",
+  "version": "4.0.0-next.11",
   "license": "Apache 2.0",
   "scripts": {
     "dev": "gatsby develop -H 0.0.0.0",
@@ -12,9 +12,10 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "gatsby": "^4.25.8",
-    "gatsby-theme-carbon": "^3.4.22",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@carbon/icons-react": "^11.42.0",
+    "gatsby": "^5.13.5",
+    "gatsby-theme-carbon": "^4.0.0-next.11",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

packages/example/src/components/Homepage.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { HomepageBanner, HomepageCallout } from 'gatsby-theme-carbon';
-import HomepageTemplate from 'gatsby-theme-carbon/src/templates/Homepage';
+import HomepageTemplate from 'gatsby-theme-carbon/src/components/Layouts/Homepage';
 import { calloutLink } from './Homepage.module.scss';
 
 import Carbon from './carbon.jpg';

packages/example/src/data/nav-items.yaml

@@ -32,6 +32,8 @@
       path: /guides/v2-migration
     - title: v3.0 Migration
       path: /guides/v3-migration
+    - title: v4.0 Migration
+      path: /guides/v4-migration
 - title: Components
   pages:
     - title: Accordion

packages/example/src/gatsby-theme-carbon/components/Layout.js

@@ -6,7 +6,7 @@ import { Information } from '@carbon/icons-react';
 import Meta from 'gatsby-theme-carbon/src/components/Meta';
 import LeftNav from 'gatsby-theme-carbon/src/components/LeftNav';
 import Header from 'gatsby-theme-carbon/src/components/Header';
-import Switcher from 'gatsby-theme-carbon/src/components/Switcher';
+import { Switcher } from 'gatsby-theme-carbon/src/components/Switcher';
 import Container from 'gatsby-theme-carbon/src/components/Container';
 import useMetadata from 'gatsby-theme-carbon/src/util/hooks/useMetadata';
 import Footer from './Footer';

packages/example/src/pages/components/Accordion.mdx

@@ -55,13 +55,13 @@ ligula tempor.
 
 <Title>AccordionItem</Title>
 
-| property        | propType | required | default                        | description                                                                         |
-| --------------- | -------- | -------- | ------------------------------ | ----------------------------------------------------------------------------------- |
-| title           | node     |          | 'title'                        | The accordion title                                                                 |
-| renderExpando   | func     |          | props => <button {...props} /> | The callback function to render the expando button. Can be a React component class. |
-| iconDescription | string   |          | 'Expand/Collapse'              | The description of the expando icon                                                 |
-| open            | bool     |          | false                          | `true` to open the expando                                                          |
-| onClick         | func     |          | () => {}                       | The handler of the massaged `click` event.                                          |
-| onHeadingClick  | func     |          | () => {}                       | The handler of the massaged `click` event on the heading.                           |
-| children        | node     |          |                                | Provide the contents of your AccordionItem                                          |
-| className       | string   |          |                                | Specify an optional className to be applied to the container node                   |
+| property        | propType | required | default                          | description                                                                         |
+| --------------- | -------- | -------- | -------------------------------- | ----------------------------------------------------------------------------------- |
+| title           | node     |          | 'title'                          | The accordion title                                                                 |
+| renderExpando   | func     |          | `props => <button {...props} />` | The callback function to render the expando button. Can be a React component class. |
+| iconDescription | string   |          | 'Expand/Collapse'                | The description of the expando icon                                                 |
+| open            | bool     |          | false                            | `true` to open the expando                                                          |
+| onClick         | func     |          | () => {}                         | The handler of the massaged `click` event.                                          |
+| onHeadingClick  | func     |          | () => {}                         | The handler of the massaged `click` event on the heading.                           |
+| children        | node     |          |                                  | Provide the contents of your AccordionItem                                          |
+| className       | string   |          |                                  | Specify an optional className to be applied to the container node                   |