Update Review app to import govuk-frontend via local package

.editorconfig

@@ -113,7 +113,7 @@ charset = utf-8
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[{**package**,**vendor**}]
+[{**dist**,**vendor**}]
 indent_size = unset
 indent_style = unset
 charset = unset

.eslintrc.js

@@ -2,7 +2,6 @@ module.exports = {
   extends: 'standard',
   ignorePatterns: [
     '**/dist/**',
-    '**/package/**',
     '**/vendor/**',
 
     // Enable dotfile linting

.github/workflows/actions/build/action.yml

@@ -11,7 +11,7 @@ runs:
       with:
         # Restore build cache (unless commit SHA changes)
         key: build-cache-${{ runner.os }}-${{ github.sha }}
-        path: app/dist
+        path: packages/*/dist
 
     - name: Install dependencies
       uses: ./.github/workflows/actions/install-node

.github/workflows/actions/install-node/action.yml

@@ -13,9 +13,8 @@ runs:
         key: npm-install-cache-${{ runner.os }}-${{ hashFiles('package-lock.json', '**/package.json') }}
         path: |
           node_modules
-          app/node_modules
           docs/examples/*/node_modules
-          package/node_modules
+          packages/*/node_modules
           shared/*/node_modules
 
     - name: Setup Node.js

.github/workflows/sass.yaml

@@ -36,7 +36,7 @@ jobs:
           sass --version
 
       - name: Run command
-        run: time sass src/govuk/all.scss > /dev/null
+        run: time sass packages/govuk-frontend/src/govuk/all.scss > /dev/null
 
   dart-sass-latest:
     name: Dart Sass v1 (latest)
@@ -64,7 +64,7 @@ jobs:
         # Run the command through a shell to ensure `time` measures the time
         # taken by the entire pipeline, as we are now piping input into `sass`.
       - name: Run command
-        run: time sh -c 'echo "@import "\""govuk/all"\"";" | sass --stdin --quiet-deps --load-path=src > /dev/null'
+        run: time sh -c 'echo "@import "\""govuk/all"\"";" | sass --stdin --quiet-deps --load-path=packages/govuk-frontend/src > /dev/null'
 
   # Node Sass v3.4.0 = LibSass v3.3.0
   lib-sass:
@@ -87,7 +87,7 @@ jobs:
           node-sass --version
 
       - name: Run command
-        run: time node-sass src/govuk/all.scss > /dev/null
+        run: time node-sass packages/govuk-frontend/src/govuk/all.scss > /dev/null
 
   # Node Sass v8.x = LibSass v3 latest
   lib-sass-latest:
@@ -110,7 +110,7 @@ jobs:
           node-sass --version
 
       - name: Run command
-        run: time node-sass src/govuk/all.scss > /dev/null
+        run: time node-sass packages/govuk-frontend/src/govuk/all.scss > /dev/null
 
   ruby-sass:
     name: Ruby Sass v3.4.0 (deprecated)
@@ -131,7 +131,7 @@ jobs:
           sass --version
 
       - name: Run command
-        run: time sass src/govuk/all.scss > /dev/null
+        run: time sass packages/govuk-frontend/src/govuk/all.scss > /dev/null
 
   ruby-sass-latest:
     name: Ruby Sass v3 (latest, deprecated)
@@ -152,4 +152,4 @@ jobs:
           sass --version
 
       - name: Run command
-        run: time sass src/govuk/all.scss > /dev/null
+        run: time sass packages/govuk-frontend/src/govuk/all.scss > /dev/null

.github/workflows/screenshots.yml

@@ -41,10 +41,10 @@ jobs:
         uses: ./.github/workflows/actions/build
 
       - name: Start review application
-        run: npm start --workspace app &
+        run: npm start --workspace govuk-frontend-review &
 
       - name: Send screenshots to Percy
-        run: npx percy exec --parallel -- npm run test:screenshots --workspace app
+        run: npx percy exec --parallel -- npm run test:screenshots --workspace govuk-frontend-review
 
       - name: Finalise Percy build
         run: npx percy build:finalize

.lintstagedrc.js

@@ -1,7 +1,7 @@
 const { ESLint } = require('eslint')
 
 module.exports = {
-  // ESLint's configuration makes it ignore built files in `dist` or `package`
+  // ESLint's configuration makes it ignore built files in `dist` or `packages/govuk-frontend/dist`
   // that we want left alone, as well as the polyfills.
   // The glob used by lint-staged to trigger the linting on commit isn't aware
   // of that ignore list, so will ask ESLint to lint those files.

.prettierignore

@@ -11,9 +11,6 @@ coverage/
 # Build output
 dist/
 
-# Build output (committed)
-/package
-
 # 3rd party vendor code
 vendor/
 

Procfile

@@ -1 +1 @@
-web: npm start --workspace app
+web: npm start --workspace govuk-frontend-review

bin/build-release.sh

@@ -3,7 +3,7 @@ set -e
 
 # Check if there are unexpected changes. Changes to CHANGELOG.md, package.json
 # and package-lock.json files are expected as part of the normal release process.
-changes="$(git status --porcelain -- ':!CHANGELOG.md' ':!package/package.json' ':!package-lock.json')"
+changes="$(git status --porcelain -- ':!CHANGELOG.md' ':!packages/govuk-frontend/dist/package.json' ':!package-lock.json')"
 if [[ -n $changes ]]; then
   echo "⚠ Unexpected changes in your working directory:"
   echo "$changes"
@@ -14,7 +14,7 @@ echo "Starting to build release..."
 echo " "
 echo "This will:"
 echo "- run the test suite"
-echo "- build GOV.UK Frontend into the 'package/' directory"
+echo "- build GOV.UK Frontend into the 'packages/govuk-frontend/dist/' directory"
 echo "- build GOV.UK Frontend into the 'dist/' directory"
 echo "- commit all changes and push the branch to remote"
 echo " "
@@ -30,7 +30,7 @@ npm run test
 npm run build:package
 npm run build:release
 
-ALL_PACKAGE_VERSION=$(node -p "require('./package/package.json').version")
+ALL_PACKAGE_VERSION=$(node -p "require('./packages/govuk-frontend/dist/package.json').version")
 TAG="v$ALL_PACKAGE_VERSION"
 CURRENT_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)
 

bin/generate-npm-tag.sh

@@ -4,8 +4,8 @@ set -e
 # Get highest tag published on Github
 HIGHEST_PUBLISHED_VERSION=$(git tag --list 2>/dev/null | sort -V | tail -n1 2>/dev/null | sed 's/v//g')
 
-# Extract tag version from ./package/package.json
-CURRENT_VERSION=$(node -p "require('./package/package.json').version")
+# Extract tag version from ./packages/govuk-frontend/dist/package.json
+CURRENT_VERSION=$(node -p "require('./packages/govuk-frontend/dist/package.json').version")
 
 function version() { echo "$@" | awk -F. '{ printf("%d%03d%03d\n", $1,$2,$3); }'; }
 

bin/pre-release.sh

@@ -25,13 +25,13 @@ npm run build:package
 # Check if the new built package has anything new to commit
 if [[ -n $(git status --porcelain) ]]; then
   echo "✍️ Commiting changed package"
-  git add package/
+  git add packages/govuk-frontend/dist/
 
   git commit -m "Release GOV.UK Frontend to '$BRANCH_NAME' for testing"
 
-  # Create a local branch containing the package directory
-  echo "✨ Filter the branch to only the package/ directory..."
-  git filter-branch --force --subdirectory-filter package
+  # Create a local branch containing the packages/govuk-frontend/dist directory
+  echo "✨ Filter the branch to only the packages/govuk-frontend/dist/ directory..."
+  git filter-branch --force --subdirectory-filter packages/govuk-frontend/dist
 
   # Force the push of the branch to the remote Github origin
   git push origin $BRANCH_NAME:$BRANCH_NAME --force

bin/publish-release.sh

@@ -48,13 +48,13 @@ fi
 echo "📦  Publishing package..."
 
 # Try publishing
-cd package
+cd packages/govuk-frontend/dist
 [ $NPM_TAG = "latest" ] && npm publish || npm publish --tag $NPM_TAG
 echo "🗒 Package published!"
 cd ..
 
-# Extract tag version from ./package/package.json
-ALL_PACKAGE_VERSION=$(node -p "require('./package/package.json').version")
+# Extract tag version from ./packages/govuk-frontend/dist/package.json
+ALL_PACKAGE_VERSION=$(node -p "require('./packages/govuk-frontend/dist/package.json').version")
 TAG="v$ALL_PACKAGE_VERSION"
 
 if [ $(git tag -l "$TAG") ]; then

docs/contributing/application-architecture.md

@@ -1,9 +1,5 @@
 ## Application architecture
 
-- `app/`
-
-  [Express](https://github.com/expressjs/express) application to preview components; also referred to as the _review app_.
-
 - `bin/`
 
   Binary/executable files (i.e. bash scripts) mainly used in the [publishing process](/docs/releasing/publishing.md).
@@ -16,14 +12,28 @@
 
   Documentation files.
 
-- `package/` **contains auto-generated files**
+- `packages/`
+
+  - `govuk-frontend-review/`
+
+    [Express](https://github.com/expressjs/express) application to preview components; also referred to as the _review app_.
+
+  - `govuk-frontend/`
+
+    Package published on npm.
+    Consume all of govuk-frontend through a single package.
 
-  Package published on npm.
-  Consume all of govuk-frontend through a single package.
+    - `dist/` **contains auto-generated files**
+
+      Builds of govuk-frontend published and exported from the npm package.
+
+    - `src/`
+
+    Source files. See [README.md](/packages/govuk-frontend/src/README.md) in the src directory for details.
 
 - `shared/`
 
-  Shared packages used by tests, build tools and the [review app](/app).
+  Shared packages used by tests, build tools and the [review app](/packages/govuk-frontend-review).
 
   - `config/`
 
@@ -40,7 +50,3 @@
   - `tasks/`
 
     See [tasks](tasks.md) for more information about the tasks.
-
-- `src/`
-
-  Source files. See [README.md](/src/govuk/README.md) in the src directory for details.

docs/contributing/coding-standards/components.md

@@ -1,6 +1,6 @@
 # Components
 
-You can find components in `src/govuk/components`.
+You can find components in `packages/govuk-frontend/src/govuk/components`.
 
 ## Name your components
 

docs/contributing/coding-standards/css.md

@@ -548,4 +548,4 @@ The SassDoc comments are used to generate the [Sass API reference in the GOV.UK
 
 For SassDoc comments, use 3 slashes (`///`) at the start of the line.
 
-See [`_colour.scss`](/src/govuk/helpers/_colour.scss) for an example of SassDoc syntax.
+See [`_colour.scss`](/packages/govuk-frontend/src/govuk/helpers/_colour.scss) for an example of SassDoc syntax.

docs/contributing/coding-standards/js.md

@@ -144,7 +144,7 @@ Prefer named exports over default exports to avoid compatibility issues with tra
 
 ## Polyfilling
 
-If you need to support older browsers, import the necessary [polyfills](/src/govuk/vendor/polyfills) and they will be added to the environment when the feature is not supported.
+If you need to support older browsers, import the necessary [polyfills](/packages/govuk-frontend/src/govuk/vendor/polyfills) and they will be added to the environment when the feature is not supported.
 
 For example, if you want to polyfill `addEventListener` for IE8, import the Event polyfills.
 

docs/contributing/coding-standards/nunjucks-api.md

@@ -6,9 +6,9 @@ To provide a level of consistency for developers we have standardised option nam
 
 The options (arguments) accepted by the component macro are specified in a `[component-name].yaml` file as `params`. Each option should have the following attributes: `name`, `type`, `required`, `description`.
 
-An option can additionally contain `params` that denotes nested items in the option (see [breadcrumbs component](/src/govuk/components/breadcrumbs/breadcrumbs.yaml#L6)) and `isComponent: true` where the option is another component (see [checkboxes component](/src/govuk/components/checkboxes/checkboxes.yaml#L11)).
+An option can additionally contain `params` that denotes nested items in the option (see [breadcrumbs component](/packages/govuk-frontend/src/govuk/components/breadcrumbs/breadcrumbs.yaml#L6)) and `isComponent: true` where the option is another component (see [checkboxes component](/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml#L10)).
 
-Component macro options are shipped as `macro-options.json` in `package`.
+Component macro options are shipped as `macro-options.json` in `packages/govuk-frontend/dist`.
 
 ## Specifying content
 

docs/contributing/managing-change.md

@@ -176,6 +176,6 @@ Keep the old name in the selector list, and mark it as deprecated.
 
 In the above examples we've used `@include _warning(...)` instead of the native sass `@warn` at-rule. We use this instead of `@warn` because it gives users the option to suppress deprecation warnings by interacting with the `$govuk-suppressed-warnings` map.
 
-You can read more about how `$govuk-suppressed-warnings` and `_warning` work by reading their respective sassdocs in [`src/govuk/settings/_warnings.scss`](/src/govuk/settings/_warnings.scss).
+You can read more about how `$govuk-suppressed-warnings` and `_warning` work by reading their respective sassdocs in [`packages/govuk-frontend/src/govuk/settings/_warnings.scss`](/packages/govuk-frontend/src/govuk/settings/_warnings.scss).
 
 We make this option available for users because they can not always action deprecation warnings or upgrade their codebase beyond a specific version of GOV.UK Frontend. For example, a legacy codebase that does not have the resource to upgrade to the latest breaking change where a deprecated feature will be removed. This feature allows those users to continue to operate their codebase without having to repeatedly see non-actionable deprecation warnings in their testing.

docs/contributing/tasks.md

@@ -8,8 +8,9 @@ To run the application without any tasks being triggered, see [Express app only]
 
 npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
 
-**`npm start` will trigger `npm run dev --workspace app` that will:**
+**`npm start` will trigger `npm run dev` that will:**
 
+- runs tasks from `npm run build:package`
 - runs tasks from `npm run build:app`
 - starts up Express, restarting when `.mjs`, `.json` or `.yaml` files change
 - compile again when frontend `.mjs` and `.scss` files change
@@ -20,21 +21,21 @@ npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
 - run JavaScript tests on the review application
 - run accessibility and HTML validation tests
 
-**`npm run serve --workspace app` will do the following:**
+**`npm run serve --workspace govuk-frontend-review` will do the following:**
 
 - start up Express, restarting when `.mjs`, `.json` or `.yaml` files change
 
-**`npm run build:app` will trigger `npm run build --workspace app` that will:**
+**`npm run build:app` will trigger `npm run build --workspace govuk-frontend-review` that will:**
 
-- clean the `./app/dist` folder
-- output files into `./app/dist`
+- clean the `./packages/govuk-frontend-review/dist` folder
+- output files into `./packages/govuk-frontend-review/dist`
 - copy fonts and images
 - compile JavaScript and Sass, including documentation
 
 **`npm run build:package` will do the following:**
 
-- clean the `./package` folder
-- output files into `./package`
+- clean the `./packages/govuk-frontend/dist` folder
+- output files into `./packages/govuk-frontend/dist`
 - copy Sass files, applying Autoprefixer via PostCSS
 - copy Nunjucks component template/macro files, including JSON configs
 - copy GOV.UK Prototype Kit config files
@@ -48,7 +49,7 @@ npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
 - output files into `./dist`
 - copy fonts and images
 - compile JavaScript and Sass
-- append version number from `package/package.json` to compiled JavaScript and CSS files
+- append version number from `packages/govuk-frontend/dist/package.json` to compiled JavaScript and CSS files
 - runs `npm run postbuild:release` (which will test the output is correct)
 
 ## Gulp tasks
@@ -65,21 +66,33 @@ Review app Gulp tasks are defined in [`app/gulpfile.mjs`](/app/gulpfile.mjs) and
 
 Gulp tasks from npm workspaces (such as the review app) can be run as shown:
 
-**`npx --workspace app -- gulp styles`**
+**`npx --workspace govuk-frontend-review -- gulp --tasks`**
+
+This will list out all available tasks for the GOV.UK Frontend package.
+
+GOV.UK Frontend package build Gulp tasks are defined in [`packages/govuk-frontend/gulpfile.mjs`](/packages/govuk-frontend/gulpfile.mjs) and the [`packages/govuk-frontend/tasks/`](/packages/govuk-frontend/tasks) folder.
+
+**`npx --workspace govuk-frontend -- gulp --tasks`**
+
+This will list out all available tasks for the Review app.
+
+Review app Gulp tasks are defined in [`packages/govuk-frontend-review/gulpfile.mjs`](/packages/govuk-frontend-review/gulpfile.mjs) and the [`packages/govuk-frontend-review/tasks/`](/packages/govuk-frontend-review/tasks) folder.
+
+**`npx --workspace govuk-frontend-review -- gulp styles`**
 
 This task will:
 
 - check Sass code quality via Stylelint (`npm run lint:scss`)
-- compile Sass to CSS into `./app/dist/stylesheets`
-- compile Sass documentation into `./app/dist/docs/sassdoc`
+- compile Sass to CSS into `./packages/govuk-frontend-review/dist/stylesheets`
+- compile Sass documentation into `./packages/govuk-frontend-review/dist/docs/sassdoc`
 
-**`npx --workspace app -- gulp scripts`**
+**`npx --workspace govuk-frontend-review -- gulp scripts`**
 
 This task will:
 
 - check JavaScript code quality via ESLint (`npm run lint:js`) (using JavaScript Standard Style)
-- compile JavaScript to Universal Module Definition (UMD) into `./app/dist/javascripts`
-- compile JavaScript documentation into `./app/dist/docs/jsdoc`
+- compile JavaScript to Universal Module Definition (UMD) into `./packages/govuk-frontend-review/dist/javascripts`
+- compile JavaScript documentation into `./packages/govuk-frontend-review/dist/docs/jsdoc`
 
 ## Express app only