feat: node20 upgrade - Githubissues

What:

Updates node dependency to LTS version 20
Consolidates images/scripts into an assets folder
Minor version bumps for a handful of dependencies

Why:

Node16 LTS is officially end-of-life
This will close #270

To Test:

Create Drupal Project: composer create-project drupal/recommended-project [PROJECT_NAME] --no-interaction

Move into the project directory cd [PROJECT_NAME]

Install Emulsify client globally npm install -g @emulsify/cli

Initialize your theme with emulsify emulsify init --checkout=feat-node20-upgrade "[THEME NAME]"

Install the version of Drupal componentst works with Drupal 10 composer require 'drupal/components:^3.0@beta'

Install the version of emulsify_twig that work with Drupal 10 composer require 'drupal/emulsify_twig^4.0'

Move into the theme directory cd web/themes/custom/[THEME NAME]

Install Compound System emulsify system install compound

Change a file from Compound so icons can be found

Change line 8 in components/01-atoms/images/images.stories.js to const svgIcons = require.context('../../../assets/icons/', true, /\.svg$/);

Verify storybook and scss compiling can run (see note below regarding warning from compound) npm run develop

Verify npm run a11y also runs

Note: The scss files should now compile. However, this will result in a lot of stylint warnings (examples below) but this is more of an issue with the Compound repository and not emulsify-drupal specifically.


WARN [stylelint] 
WARN components/style.scss
WARN   2:9  ✖  Expected "'~normalize.css/normalize'" to be "url('~normalize.css/normalize')"                                import-notation
WARN   3:9  ✖  Expected "'~breakpoint-sass/stylesheets/breakpoint'" to be "url('~breakpoint-sass/stylesheets/breakpoint')"  import-notation
WARN   6:9  ✖  Expected "'00-base/**/*.scss'" to be "url('00-base/**/*.scss')"                                              import-notation
WARN   7:9  ✖  Expected "'01-atoms/**/*.scss'" to be "url('01-atoms/**/*.scss')"                                            import-notation
WARN   8:9  ✖  Expected "'02-molecules/**/*.scss'" to be "url('02-molecules/**/*.scss')"                                    import-notation
WARN   9:9  ✖  Expected "'03-organisms/**/*.scss'" to be "url('03-organisms/**/*.scss')"                                    import-notation
WARN  10:9  ✖  Expected "'04-templates/**/*.scss'" to be "url('04-templates/**/*.scss')"                                    import-notation
WARN  11:9  ✖  Expected "'00-base/01-colors/colors-used.scss'" to be "url('00-base/01-colors/colors-used.scss')"            import-notation```

┆Issue is synchronized with this [Clickup task](https://app.clickup.com/t/86a1chn18) by [Unito](https://www.unito.io)

emulsify-ds / emulsify-drupal

feat: node20 upgrade #302