Merge pull request #680 from alphagov/setup-to-publish-one-package

Setup to publish one package

.gitignore

@@ -3,9 +3,8 @@ npm-debug.log
 .DS_Store
 preview/
 tmp/
-lerna-debug.log
 axeReports/
 public/
-packages/**/package-lock.json
+package/package-lock.json
 examples/**/package-lock.json
 *.zip

CHANGELOG.md

@@ -6,6 +6,22 @@ Note: We're not following semantic versioning yet, we are going to talk about th
 
 Breaking changes:
 
+- Restructure project to enable it to be published as a single package
+  ([PR #680](https://github.com/alphagov/govuk-frontend/pull/680))
+  This is ground work to enable the project to be published as a single package by:
+  - removing components' package.json files
+  - moving "all" files into root
+  - renaming "packages" folder to "package"
+  - removing Lerna
+  - updating release scripts
+  - creating a new package.json
+  - updating documentation
+  - update any tests and build pipelines to support this
+
+  The single package will be published under a new name. 
+  There are more changes to be done to folder structure to ensure
+  entry points are more understandable.
+
 - Error messages have been moved out of the label and fieldset components and
   are now called from every component that uses them - they are no longer nested
   within the label or legend. They are associated with the input or with the
@@ -134,7 +150,6 @@ Breaking changes:
 
   ([PR #684](https://github.com/alphagov/govuk-frontend/pull/684))
 
-
 - Remove -c -o -h layer prefixes
   ([PR #644](https://github.com/alphagov/govuk-frontend/pull/644))
   In user research and in feedback from Private Beta partners we

README.md

@@ -73,16 +73,6 @@ To install all components, run:
 npm install --save @govuk-frontend/all
 ```
 
-To install individual components (for example, a button), run:
-
-```
-npm install --save @govuk-frontend/button
-```
-
-You can find a list of all components in the [packages
-directory](https://github.com/alphagov/govuk-frontend/tree/master/packages).
-Each component has a README with installation and usage instructions.
-
 After you have installed GOV.UK Frontend the `@govuk-frontend` package will
 appear in your `node_modules` folder.
 

app/app.js

@@ -56,8 +56,8 @@ module.exports = (options) => {
     // Filter out globals, all and icons package
     const filteredComponents = components.filter(component => (
       component !== 'globals' &&
-      component !== 'all' &&
-      component !== 'icons'
+      component !== 'icons' &&
+      !component.startsWith('all')
     ))
 
     res.render('index', {

app/assets/scss/app-old-ie.scss → app/assets/scss/app-ie8.scss

@@ -2,5 +2,5 @@
 // right corner of your site during development, add the breakpoints
 // to this list, ordered by width, e.g. (mobile, tablet, desktop).
 $mq-show-breakpoints: (desktop);
-@import "../../../src/all/all-old-ie";
+@import "../../../src/all-ie8";
 @import "partials/app";

app/assets/scss/app.scss

@@ -2,5 +2,5 @@
 // right corner of your site during development, add the breakpoints
 // to this list, ordered by width, e.g. (mobile, tablet, desktop).
 $mq-show-breakpoints: (mobile, tablet, desktop);
-@import "../../../src/all/all";
+@import "../../../src/all";
 @import "partials/app";

app/views/layouts/_generic.njk

@@ -6,15 +6,15 @@
   <title>GOV.UK Frontend</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!--[if !IE 8]><!-->
-    <link rel="stylesheet" href="/public/css/app.css">
+    <link rel="stylesheet" href="/public/app.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
   <!--<![endif]-->
   <!--[if lt IE 9]>
   <script src="/vendor/html5-shiv/html5shiv.js"></script>
   <![endif]-->
   <!--[if IE 8]>
-  <link rel="stylesheet" href="/public/css/app-old-ie.css">
+  <link rel="stylesheet" href="/public/app-ie8.css">
   <![endif]-->
   {% block styles %}
   {% endblock %}
@@ -24,7 +24,7 @@
   {% block body %}
     {% block content %}{% endblock %}
   {% endblock %}
-  <script src="/public/all/all.js"></script>
+  <script src="/public/all.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.15/iframeResizer.min.js"></script>
   <!--[if lte IE 8]>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.15/ie8.polyfils.min.js"></script>

bin/pre-release.sh

@@ -3,31 +3,21 @@ set -e
 
 LATEST_PUBLISHED_TAG=$(git describe --abbrev=0 --tags)
 
-npm run build:packages &&
-lerna publish --skip-git --skip-npm &&
+npm run build:package
 npm run build:dist
 
-
-ALL_PACKAGE_VERSION=$(node -p "require('./packages/all/package.json').version")
+ALL_PACKAGE_VERSION=$(node -p "require('./package/package.json').version")
 TAG="v$ALL_PACKAGE_VERSION"
-ERROR_CODE=$?
 CURRENT_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)
 
-if [ $ERROR_CODE != 0 ]; then
-    echo "⚠️ Error with lerna publish. Please try again."
-    exit $ERROR_CODE;
+if [ "$LATEST_PUBLISHED_TAG" == "$TAG" ]; then
+    echo "⚠️ Git tag already exists."
+    exit 1;
 else
-    # if you cancel lerna publish, it exists with 0 and it doesnt update package.json files so
-    # we exit because package.json file hasn't changed. Otherwise commit changes.
-   if [ "$LATEST_PUBLISHED_TAG" == "$TAG" ]; then
-        echo "⚠️ Nothing to commit. Rerun the step."
-        exit 1;
-    else
-        git add . &&
-        git commit -m "Release $TAG" &&
-        #set upstream so that we can push the branch up
-        git push --set-upstream origin $CURRENT_BRANCH_NAME &&
-        git push
-        echo "🗒 All done. Ready to create a pull request. Once approved, run npm run release"
-    fi
+    git add .
+    git commit -m "Release $TAG"
+    #set upstream so that we can push the branch up
+    git push --set-upstream origin $CURRENT_BRANCH_NAME
+    git push
+    echo "🗒 All done. Ready to create a pull request. Once approved, run npm run release"
 fi

bin/release.sh

@@ -12,13 +12,16 @@ if ! [ "govuk-patterns-and-tools" == "$NPM_USER" ]; then
   exit 1
 fi
 
-echo "📦  Publishing packages..."
+echo "📦  Publishing package..."
 
 # Try publishing
-lerna exec -- $(PWD)/bin/npm-publish.sh
+cd package
+npm publish
+echo "🗒 Package published!" 
+cd ..
 
-# Extract tag version from all/package.json
-ALL_PACKAGE_VERSION=$(node -p "require('./packages/all/package.json').version")
+# Extract tag version from ./package/package.json
+ALL_PACKAGE_VERSION=$(node -p "require('./package/package.json').version")
 TAG="v$ALL_PACKAGE_VERSION"
 LATEST_PUBLISHED_TAG=$(git describe --abbrev=0 --tags)
 

config/paths.json

@@ -6,7 +6,7 @@
       "layouts": "app/views/layouts/",
   "config": "config/",
   "dist": "dist/",
-  "packages": "packages/",
+  "package": "package/",
   "public": "public/",
   "src": "src/",
   "ports": {

docs/coding-standards/css.md

@@ -56,10 +56,6 @@ System.
 
 Modifying these styles should be safe and have no side effects.
 
-This layer:
-- is distributed as individual packages within the @govuk-frontend scope for
-  each component.
-
 Any classes generated by this layer will use the prefix `govuk-`.
 
 ### 7. Overrides

docs/components.md

@@ -44,4 +44,4 @@ issue fixed
 - chore (updating gulp tasks etc; no production code change)
 
 ### scope:
-thing being changed - e.g. component name, packages, gulp
+thing being changed - e.g. component name, package, gulp

docs/development-and-publish-tasks.md

@@ -1,6 +1,6 @@
 # NPM and Gulp tasks
 
-This application used a number of a number of NPM scripts that run the application and trigger gulp tasks that build files, update packages, copy assets and watch for changes.
+This application used a number of a number of NPM scripts that run the application and trigger gulp tasks that build files, update the package, copy assets and watch for changes.
 
 ## Express app only
 
@@ -31,14 +31,14 @@ There are a few npm scripts in `package.json` that trigger a number of gulp task
 - compiles CSS & JS
 - starts up Express
 
-**`npm run build:packages` will do the following:**
+**`npm run build:package` will do the following:**
 - compile component nunjucks to HTML
 - copy template, macro and component.njk files for each component
 - copy Sass files, add vendor prefixes and replace path to be node_modules consumption compliant
-- split icons out from globals/icons into a separate package (packages/icons)
+- split icons out from globals/icons into a separate package (package/icons)
 - create an "all" package for Sass
 - generate README markdown files
-- runs `npm run test:build:packages` (which will test the output is correct)
+- runs `npm run test:build:package` (which will test the output is correct)
 
 **`npm run build:dist` will do the following:**
 - copy JS
@@ -47,7 +47,7 @@ There are a few npm scripts in `package.json` that trigger a number of gulp task
 - compile component nujucks files to HTML
 - generate README markdown files
 - take version from 'all/package.json' and append it to compiled & minified JS and CSS files
-- runs `npm run test:dist:packages` (which will test the output is correct)
+- runs `npm run test:dist:package` (which will test the output is correct)
 
 ## Gulp tasks
 

docs/index.md

@@ -78,57 +78,54 @@ See [development and publishing tasks](development-and-publish-tasks.md) for mor
 
   Application modules and helpers.
 
-- `packages/` **contains auto-generated files**
+- `package/` **contains auto-generated files**
 
-  packages published on npm.
+  package published on npm.
+  Consume all of govuk-frontend through a single package.
 
-  - `all/`
+- `src/`
 
-    Consume all of govuk-frontend through a single package.
+  Source files.
 
   - `globals/`
 
-    All packages depend on this package, it contains shared dependencies of all components (e.g. colours, font-face, media queries, typography and vars).
-
-  - `[component-name]/`
-
-    Individual packages - these depend on each other (dependencies are listed in package.json) and also the globals package.
-
-    - `CHANGELOG.md`
+    Generic scripts, style definitions and mixins.
 
-      Changes made to a package listed per version.
+  - `icons/`
 
-    - `LICENSE`
+    Image assets.
 
-      Package license.
+  - `[component-name]/`
 
-    - `README.md`
+    Component-specific source files.
+
+  - `CHANGELOG.md`
 
-      Package README showing the basic API and usage instructions.
+    Changes made to a package listed per release version.
 
-    - `package.json`
+  - `LICENSE`
 
-      npm definition for a package; states package dependencies.
+    Package license.
 
-- `src/`
+  - `README.md`
 
-  Source files.
+    Package README showing the basic API and usage instructions.
 
-  - `all/`
+  - `package.json`
 
-    Import all scripts and styles.
+    npm definition for a package; states package dependencies.
 
-  - `globals/`
+  - `govuk-frontend.scss`
 
-    Generic scripts, style definitions and mixins.
+    Main Sass file that imports all partials
 
-  - `icons/`
+  - `govuk-frontend-ie8.scss`
 
-    Image assets.
+    Internet Explorer 8 specific Sass file that imports `govuk-frontend.scss`
 
-  - `[component-name]/`
+   - `govuk-frontend.js`
 
-    Component-specific source files.
+    Main Javascript file that imports all component specific .js files
 
 - `tasks/`