Merge pull request #922 from Financial-Times/CPP-671-bower-to-npm

CPP-671 Bower to NPM migration

.eslintignore

@@ -1,5 +1,4 @@
 dist/
 coverage/
 node_modules/
-bower_components/
 public/

.eslintrc.js

@@ -30,8 +30,8 @@ module.exports = {
         // rules so that the two files do not need to know about one other and their structure.
         config: {
           resolve: {
-            modules: ['bower_components', 'node_modules'],
-            descriptionFiles: ['bower.json', 'package.json'],
+            modules: ['node_modules'],
+            descriptionFiles: ['package.json'],
             mainFiles: ['index', 'main']
           }
         }

.gitignore

@@ -1,4 +1,3 @@
-bower_components/
 node_modules/
 coverage/
 dist/

.prettierignore

@@ -1,4 +1,3 @@
 dist
 tsconfig.json
 README.md
-bower_components

.storybook/main.js

@@ -1,4 +1,8 @@
 module.exports = {
-  stories: ['../packages/dotcom-ui-*/src/**/story.tsx'],
+  stories: [
+    '../packages/dotcom-ui-header/src/**/story.tsx',
+    '../packages/dotcom-ui-footer/src/**/story.tsx',
+    '../packages/dotcom-ui-layout/src/**/story.tsx'
+  ],
   addons: ['@storybook/addon-essentials']
 }

.storybook/webpack.config.js

@@ -7,10 +7,9 @@ module.exports = ({ config }) => {
   // Use real file paths for symlinked dependencies do avoid including them multiple times
   config.resolve.symlinks = true
 
-  // Resolve packages installed using Bower
   Object.assign(config.resolve, {
-    modules: ['bower_components', 'node_modules'],
-    descriptionFiles: ['bower.json', 'package.json'],
+    modules: ['node_modules'],
+    descriptionFiles: ['package.json'],
     mainFiles: ['index', 'main']
   })
 
@@ -55,7 +54,7 @@ module.exports = ({ config }) => {
           // Use `dart-sass` rather than `node-sass`
           implementation: require('sass'),
           sassOptions: {
-            includePaths: ['bower_components', 'node_modules/@financial-times']
+            includePaths: ['node_modules']
           }
         }
       }

docs/guides/building-client-side-assets-with-webpack.md

@@ -77,27 +77,6 @@ Running `webpack --mode=development` again outputs the file `public/styles.bundl
 
 [sass]: https://sass-lang.com/
 
-## Using Bower packages
-
-Apps that need packages from [Bower] should install the [`@financial-times/dotcom-build-bower-resolve`](../../packages/dotcom-build-bower-resolve/README.md) plugin, which enables Webpack to resolve packages installed with Bower:
-
-```diff
-const { PageKitBasePlugin } = require('@financial-times/dotcom-build-base')
-+ const { PageKitBowerResolvePlugin } = require('@financial-times/dotcom-build-bower-resolve')
-
-module.exports = {
-	entry: {
-		scripts: 'client/main.js',
-	},
-	plugins: [
-		new PageKitBasePlugin(),
-+		new PageKitBowerResolvePlugin()
-	]
-}
-```
-
-[bower]: https://bower.io/
-
 ## Code splitting
 
 FT.com apps should use the [`@financial-times/dotcom-build-code-splitting`](../../packages/dotcom-build-code-splitting/README.md) plugin to take advantage of shared cached dependencies between apps.

examples/ft-ui/package.json

@@ -20,7 +20,6 @@
     "sucrase": "^3.10.1"
   },
   "devDependencies": {
-    "@financial-times/dotcom-build-bower-resolve": "file:../../packages/dotcom-build-bower-resolve",
     "@financial-times/dotcom-build-js": "file:../../packages/dotcom-build-js",
     "@financial-times/dotcom-build-sass": "file:../../packages/dotcom-build-sass",
     "@financial-times/dotcom-build-base": "file:../../packages/dotcom-build-base",

examples/ft-ui/webpack.config.js

@@ -1,6 +1,5 @@
 const path = require('path')
 const { PageKitBasePlugin } = require('@financial-times/dotcom-build-base')
-const { PageKitBowerResolvePlugin } = require('@financial-times/dotcom-build-bower-resolve')
 const { PageKitSassPlugin } = require('@financial-times/dotcom-build-sass')
 const { PageKitJsPlugin } = require('@financial-times/dotcom-build-js')
 
@@ -13,16 +12,12 @@ module.exports = {
   plugins: [
     new PageKitBasePlugin(),
     new PageKitJsPlugin(),
-    new PageKitBowerResolvePlugin(),
     new PageKitSassPlugin({
       // Enabling webpackImporter because Sass itself can only resolve partial files based on the
       // CWD and not relative to the current file being processed. This means Sass can't find the
       // nested dependencies created when symlinking.
       webpackImporter: true,
-      includePaths: [
-        // All Bower components are installed at the repo root
-        path.resolve('../../bower_components')
-      ]
+      includePaths: [path.resolve('../../node_modules')]
     })
-  ],
+  ]
 }

examples/kitchen-sink/__test__/build.test.js

@@ -6,19 +6,11 @@ const expected = [
   'financial-times-n-tracking.bundle.js',
   'financial-times-o-ads.bundle.js',
   'financial-times-o-grid.bundle.js',
+  'financial-times-o-toggle.bundle.js',
   'financial-times-o-tracking.bundle.js',
   'financial-times-o-utils.bundle.js',
   'financial-times-o-viewport.bundle.js',
   'manifest.json',
-  'n-topic-search.bundle.js',
-  'n-ui-foundations.bundle.js',
-  'o-footer.bundle.js',
-  'o-grid.bundle.js',
-  'o-header.bundle.js',
-  'o-toggle.bundle.js',
-  'o-typography.bundle.js',
-  'o-utils.bundle.js',
-  'o-viewport.bundle.js',
   'page-kit-components.bundle.js',
   'page-kit-layout-styles.css',
   'regenerator-runtime.bundle.js',

examples/kitchen-sink/package.json

@@ -27,7 +27,6 @@
     "sucrase": "^3.10.1"
   },
   "devDependencies": {
-    "@financial-times/dotcom-build-bower-resolve": "file:../../packages/dotcom-build-bower-resolve",
     "@financial-times/dotcom-build-code-splitting": "file:../../packages/dotcom-build-code-splitting",
     "@financial-times/dotcom-build-js": "file:../../packages/dotcom-build-js",
     "@financial-times/dotcom-build-sass": "file:../../packages/dotcom-build-sass",

examples/kitchen-sink/webpack.config.js

@@ -1,7 +1,6 @@
 const path = require('path')
 const { PageKitBasePlugin } = require('@financial-times/dotcom-build-base')
 const { PageKitCodeSplittingPlugin } = require('@financial-times/dotcom-build-code-splitting')
-const { PageKitBowerResolvePlugin } = require('@financial-times/dotcom-build-bower-resolve')
 const { PageKitSassPlugin } = require('@financial-times/dotcom-build-sass')
 const { PageKitJsPlugin } = require('@financial-times/dotcom-build-js')
 
@@ -16,16 +15,12 @@ module.exports = {
     new PageKitBasePlugin(),
     new PageKitJsPlugin(),
     new PageKitCodeSplittingPlugin(),
-    new PageKitBowerResolvePlugin(),
     new PageKitSassPlugin({
       // Enabling webpackImporter because Sass itself can only resolve partial files based on the
       // CWD and not relative to the current file being processed. This means Sass can't find the
       // nested dependencies created when symlinking.
       webpackImporter: true,
-      includePaths: [
-        // All Bower components are installed at the repo root
-        path.resolve('../../bower_components')
-      ]
+      includePaths: [path.resolve('../../node_modules')]
     })
-  ],
+  ]
 }

jest.config.js

@@ -3,6 +3,6 @@ module.exports = {
   roots: ['./packages'],
   testEnvironment: 'node',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
-  testPathIgnorePatterns: ['/bower_components/', '/node_modules/'],
+  testPathIgnorePatterns: ['/node_modules/'],
   setupFilesAfterEnv: ['./jest.enzyme.ts']
 }

package.json

@@ -14,9 +14,7 @@
     "clean:install": "npm run clean && npm install",
     "dev": "athloi run dev --filter 'dotcom-*' --concurrency 100",
     "lint": "eslint . --ext .js,.ts,.tsx,.jsx",
-    "bower:link": "node scripts/link-packages-using-bower.js",
-    "bower:install": "npm run bower:link && bower install",
-    "postinstall": "athloi exec npm i -- --no-package-lock && npm run bower:install",
+    "postinstall": "athloi exec npm i -- --no-package-lock",
     "prettier": "prettier --write '**/*.{ts,tsx,js,jsx,json}'",
     "storybook": "start-storybook -p 9001 -c .storybook",
     "storybook:ci": "start-storybook -c .storybook --ci --smoke-test",
@@ -59,7 +57,6 @@
     "@types/react": "^16.8.20",
     "@typescript-eslint/parser": "^3.0.0",
     "babel-loader": "^8.0.4",
-    "bower": "^1.8.8",
     "check-engine": "^1.10.1",
     "css-loader": "^3.0.0",
     "enzyme": "^3.10.0",

packages/dotcom-build-code-splitting/src/extractPackageName.ts

@@ -1,7 +1,7 @@
 import memoize from 'memoize-one'
 import getPackageName from 'get-package-name'
 
-const moduleType = /(node_modules|bower_components)/
+const moduleType = /(node_modules)/
 
 function extractPackageName(modulePath: string) {
   const type = modulePath.match(moduleType)

packages/dotcom-build-code-splitting/src/index.ts

@@ -32,7 +32,7 @@ export class PageKitCodeSplittingPlugin {
     const addComponentCodeSplitting = createBundlesForRegExp({
       compiler,
       name: 'shared-components',
-      pattern: /(node_modules\/@financial-times|bower_components)\/(o|n|x|next)-/,
+      pattern: /(node_modules\/@financial-times)\/(o|n|x|next)-/,
       usedInUnknownWay: true
     })
 
@@ -66,7 +66,7 @@ export class PageKitCodeSplittingPlugin {
       name: 'privacy-components',
       pattern: /@financial-times\/privacy-/,
       usedInUnknownWay: true
-    });
+    })
 
     // split packages used by all pages (i.e. used by Page Kit) into a shared bundle
     const addSharedStableCodeSplitting = createBundleWithPackages({

packages/dotcom-build-sass/README.md

@@ -41,7 +41,7 @@ module.exports = {
 
 This plugin adds a [rule] to the Webpack configuration to handle `.scss` files. It first uses the [sass-loader] to transpile Sass source code, then sends the output through to the [postcss-loader] for optimisations, and finally the [css-loader]. The [mini-css-extract-plugin] is added to generate `.css` files and the [webpack-fix-style-only-entries] to clean up any empty JavaScript bundles.
 
-Sass has been configured to find packages installed with Bower and or npm by looking in the `'bower_components'` and `'node_modules/@financial-times'` directories. It can be configured to look in additional locations by passing the relevant paths to the plugin as absolute paths.
+Sass has been configured to find packages installed with npm by looking in the `'node_modules/@financial-times'` directories. It can be configured to look in additional locations by passing the relevant paths to the plugin as absolute paths.
 
 ```js
 new PageKitSassPlugin({ includePaths: [path.resolve('./path-to-sass-files')] })

packages/dotcom-ui-base-styles/browser.js

@@ -1,4 +1,4 @@
-import oTypography from 'o-typography'
+import oTypography from '@financial-times/o-typography'
 
 // Polyfill for :focus-visible https://github.com/WICG/focus-visible
 // NOTE: v5 of this polyfill is not yet supported by o-normalise