Migrate examples off of Create React App

[tay1orjones]

Create React App project is moving in a new direction, and there are quite a few examples within the repo using it or react-scripts. I think it makes sense to move off of it to avoid future hassle with outdated dependencies and errant dependabot vulnerability errors.

What should we move to?

We should consider the recommended options outlined by the new react docs. This is where the majority of new react-based projects will begin their journey with Carbon and we should have examples that follow suit. Two in particular stand out

1. Vite - great for isolated and small/lightweight examples showcasing component prop configuration or usage
2. NextJS - suitable for more complicated examples that involve needs provided by a framework - routing, SSR, etc.

Quite a few of the examples in the repo are old and outdated. In some cases they're using react-scripts v3 and causing errant dependabot vulnerability alerts. This includes the following directories:

• https://github.com/carbon-design-system/carbon/tree/main/examples
• https://github.com/carbon-design-system/carbon/tree/main/packages/react/examples

Goals

• Remove examples that no longer provide value
  • Could we gather install stats for these to determine ones that aren't used much? Install may not be the perfect metric, sometimes examples are just used as a reference
• Update remaining examples to either vite or nextjs
• Examples should be able to be run:
  • locally
  • on stackblitz
  • preferably on codesandbox as well though this may not be feasible due to their lack of scss support

Tasks

Beta Give feedback

1. Migrate off CRA: Determine which examples we should remove, and remove them #14599
   package: react role: dev 🤖 +2
   
2. Migrate off CRA: mark cra-template as deprecated, then remove it #14771
   role: dev 🤖 type: docs 📖 +2
   
3. Migrate off CRA: examples/incremental-migration #14462
   +0
   
4. Delete/examples/codesandbox (reduce CRA usage) #14768
   role: dev 🤖 type: docs 📖 +2
   
5. Delete /examples/codesandbox-with-sass-compilation (reduce CRA usage) #14769
   role: dev 🤖 type: docs 📖 +2
   
6. Migrate off CRA: packages/react/examples/custom-data-table-state-manager #15201
   role: dev 🤖 type: docs 📖 +2
   
7. Migrate off CRA: packages/react/examples/drag-and-drop-file-uploader #15202
   role: dev 🤖 type: docs 📖 +2
   
8. Migrate off CRA: packages/react/examples/react-router #15203
   role: dev 🤖 type: docs 📖 +2
   

[falsepopsky]

It would be good if we actually made use of the examples directory in the root of the project. This was my first problem when I wanted to learn Carbon in the past: the documentation was outdated or in transition with the new v11, and I found many examples scattered everywhere, but didn't know where to start. Additionally, as a suggestion because of the new direction of CRA, I think it would be good to deprecate this template @carbon/cra-template

[tay1orjones]

The other thing to consider with this is now that we have the separate sandboxes repo, we could move ancillary examples there to avoid having them in the monorepo.

From my perspective we only need examples in the monorepo if we want them tied to the release process (lerna incrementing the versions of carbon deps used in the example)

[alisonjoseph]

Examples

• /examples/class-prefix
  • using vite ✅
  • runs on stackblitz ✅
• /examples/codesandbox Removed
• /examples/codesandbox-styles
  • using vite ✅
  • runs on stackblitz ✅
• /examples/codesandbox-with-sass-compilation Removed
• /examples/custom-theme
  • using vite ✅
  • runs on stackblitz ✅
• /examples/id-prefix
  • using vite ✅
  • runs on stackblitz ✅
• /examples/incremental-migration Removed
• /examples/incremental-migration-vite
  • using vite ✅
  • runs on stackblitz ❌
• /examples/light-dark-mode
  • using nextjs ✅
  • runs on stackblitz ❌
• /examples/nextjs
  • using nextjs ✅
  • runs on stackblitz ✅
• /examples/v10-token-compat-in-v11
  • using vite ✅
  • runs on stackblitz ✅
• /examples/vite
  • using vite ✅
  • runs on stackblitz ✅
• /packages/icons-vue/examples/vue-cli
  • not on CRA ✅
  • runs on stackblitz ❌
• /packages/react/examples/codesandbox Removed
• /packages/react/examples/create-react-app Removed
• /packages/react/examples/custom-css-prefix Removed
• /packages/react/examples/custom-data-table-state-manager
  • runs on stackblitz ❌
• /packages/react/examples/drag-and-drop-file-uploader
  • runs on stackblitz ❌
• /packages/react/examples/next Removed
• /packages/react/examples/react-router
  • broken example ❌
• /packages/colors/examples/preview
  • using nextjs ✅
  • runs on stackblitz ❌
• packages/colors/examples/sass-modules
  • using nextjs ✅
  • runs on stackblitz ❌
• packages/grid/examples/css-grid
  • using nextjs ✅
  • runs on stackblitz ❌
• packages/grid/examples/preview
  • using nextjs ✅
  • runs on stackblitz ❌
• packages/icons/examples/preview
  • using nextjs ✅
  • runs on stackblitz ❌
• packages/layout/examples/preview
  • using nextjs ✅
  • runs on stackblitz ❌
• packages/pictograms/examples/preview
  • using nextjs ✅
  • runs on stackblitz ❌
• packages/themes/examples/preview
  • using nextjs ✅
  • runs on stackblitz ❌
• packages/themes/examples/preview-v10
  • using nextjs ✅
  • runs on stackblitz ❌
• packages/themes/examples/sass-modules
  • using nextjs ✅
  • runs on stackblitz ❌
• packages/type/examples/preview
  • using nextjs ✅
  • runs on stackblitz ❌

[guidari]

All tasks were validated and completed in this issue.