Next (#1289)

* feat(deps): update node to 18 (#1278)

* build(deps): update node to 18

Also update all other dependencies

- update all minor dependencies

#1277

* chore: bump everything to node 18

* chore: update gatsby-plugin-sass

* chore: update readme with status badge

* docs: typo correction

* docs: update structure

* ci: update .github/workflows/manual-release.yml

Co-authored-by: Scott Strubberg <[email protected]>

* ci: update commitlint version and docs

Co-authored-by: Scott Strubberg <[email protected]>

* chore: release 4.0.0-next.0

* chore: release 4.0.0-next.1

* build: bump deps

* chore: release 4.0.0-next.2

* build: update node version

* build: update deps

* build: gatsby v5

* fix: run gatsby codemods

npx gatsby-codemods@latest sort-and-aggr-graphql .

* build: define trailingSlash

* build: bump dependencies

* refactor: apply formatting

* refactor(eslint): comment out unused imorts

* refactor: apply formatting

* start update mdx

* build(deps): bump minor and below versions

* build: update lerna

* formatting...

* feat: update release-it

* feat: update @commitlint

* ci: add github actions updater

* build: move some deps down to devDependencies

* build: update all things

* formatting...

* build: dep updates

* fix: remove extraLayouts

This is not longer supported as you can define your own layouts as components,
following this guide: https://www.gatsbyjs.com/docs/how-to/routing/layout-components/

* build: bump dependencies

* chore: update sass resources loader to compatible version

* build: bump deps

* docs: start migration doc

* chore: rebuild yarn lock

* build(deps): update minor and below

* build(deps): update minor and below

* feat(layouts): start converting to use layouts

* build: rebuild lock file

* build: cleanup unknown property

* build(deps): update minor and below

* build(deps): bump minor and below

* fix(path): update layout path

* linter fixes

* chore: update changelog settings

* build(deps): bump minor and below

And other minor adjustments.

* chore: add recommended plugins

* fix(scss): import + other minor fixes (#1410)

* Fixing scss import + other minor fixes

* Fixing useMetadata in Default Layout

* lint fixing

* bring back defaultProps

* Fixing inline code blocks

* Minor info comment

* More suggested changes

* remove white space

* testing vercel again

* Fixing yarn

* fixing yarn

* chore(deps): bump minor and below

* fix(format): run prettier

* fix(lint): update wesbos

* fix: linting,imports in code (#1414)

* build(deps): update release-it workspaces

* docs: update code block

* chore: release 4.0.0-next.4 [skip ci],

* chore: update lock file

* Fix : mdx tables  + port to esm v2 (#1418)

* fix: mdx tables + port gatsby core to ESM

* chore: bring back js files via using type

* updating the order of remarkGfm

Co-authored-by: Eric Garcia <[email protected]>

* fix: updatng remarkGfm order

Co-authored-by: Eric Garcia <[email protected]>

* chore: add a space

* fix: mdx-tables

---------

Co-authored-by: Eric Garcia <[email protected]>

* fix(yarn): revert lock file changes

* fix: v5 issues (#1431)

* fix: image spacing

* fix: blockquote styles

* fix: prop table display

* fix: image gallery display

* fix: markdown link with title

* docs: update migration guide

* build: maintian dependencies

* build: rebuild lock file

* Fix: code blocks in mdx + issues/868 (#1422)

* fix: heading spacing

* build: bump yarn

* fix: nested list styling for v5 (#1438)

Co-authored-by: Eric Garcia <[email protected]>

* style: apply formatting

* chore: release 4.0.0-next.5.0 [skip ci],

* build(deps): bump minor

* fix: copy button color token (#1441)

* fix: copy button color token

* chore: remove extra file changes

* fix: regression in code blocks - default prop (#1442)

* docs: code blocks docs page (#1443)

* docs: code snippet docs page

* fix: hidecode prop check

* fix formatting

* fix: release

* chore: release 4.0.0-next.7 [skip ci],

* refactor: change hideCode prop to showAll prop (#1445)

* refactor: change hideCode prop to showAll prop

* fix: yan lock file

* fix: feedback form button style

* fix: warnings (#1450)

* fix: warnings

* fix: swap back to mjs file

* fix: caption styles (#1451)

* fix formatting

* chore: release 4.0.0-next.8 [skip ci],

* feat(next): add gatsby-plugin-local-search  (#1464)

* feat(next): add gatsby-plugin-local-search remove gatsby-plugin-lunr

* feat(next): add gatsby-plugin-local-search remove gatsby-plugin-lunr

* feat: add path

* chore: remove old code

* chore: clean up code

* chore: cleanup

* feat: fix tabs

* feat: create search config file

* chore: release 4.0.0-next.9 [skip ci],

* feat: add max results to search (#1466)

* chore: release 4.0.0-next.10 [skip ci],

* build(deps): bump minor and below

* chore: release 4.0.0-next.11 [skip ci],

* build(yarn): update lock file

* docs: update migration guide

* fix(deps): add missing preset

* docs: update migration guide

* chore: cleanup

* fix: update homepage link to v4 migration

---------

Co-authored-by: Scott Strubberg <[email protected]>
Co-authored-by: Mudit Juneja <[email protected]>
Co-authored-by: Alison Joseph <[email protected]>
Co-authored-by: Alison Joseph <[email protected]>

.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                   |