NPM Link works now

package.json

@@ -8,13 +8,17 @@
     "test": "jest",
     "storybook": "start-storybook -p 6006 -s public",
     "build": "webpack --config webpack.config.js",
+    "dev": "webpack --config webpack.dev.config.js --mode development",
+    "linked": "npm run clean && npm run dev && npm run cp",
     "buildw": "webpack --config webpack.config.js --watch",
     "build-storybook": "build-storybook -s public",
     "build-storybook-docs": "build-storybook -s public --docs",
     "clean": "rimraf dist storybook-static",
-    "deploy:ghpages": "npm run build-storybook-docs && gh-pages -d public",
-    "publish:public": "npm run build && rm ./dist/package.json || true && cp package.json ./dist/package.json && rm ./dist/README.md || true && cp README.md ./dist/README.md || true && npm publish dist --access public",
-    "publish:dry": "npm publish --dry-run",
+    "publish-ghpages": "npm run build-storybook-docs && gh-pages -d build-storybook",
+    "cp": "cp package.json ./dist/package.json && cp README.md ./dist/README.md ",
+    "prepare": "npm run clean && npm run build && npm run cp",
+    "publish": "npm run prepare && npm publish dist --access public",
+    "publish-dry": "npm publish --dry-run",
     "release": "auto shipit"
   },
   "eslintConfig": {

webpack.config.js

@@ -3,7 +3,6 @@
 const path = require('path');
 
 module.exports = {
-  mode: 'production',
   devtool: 'source-map',
   entry: {
     Breadcrumb: './src/Breadcrumb/index.js',
@@ -63,7 +62,7 @@ module.exports = {
         test: /\.(js|jsx)$/,
         include: path.resolve(__dirname, 'src'),
         // TODO: because it uses entry point to determine graph of dependencies, might not be needed to exclude test ans sample files?
-        exclude: /(node_modules|bower_components|build|dist|demo|.storybook)/,
+        exclude: /(node_modules|bower_components|build|dist|demo|.storybook|storybook-static)/,
         use: {
           loader: 'babel-loader',
           options: {

webpack.dev.config.js

@@ -0,0 +1,98 @@
+// based on https://itnext.io/how-to-package-your-react-component-for-distribution-via-npm-d32d4bf71b4f
+// and http://jasonwatmore.com/post/2018/04/14/react-npm-how-to-publish-a-react-component-to-npm
+const path = require('path');
+
+module.exports = {
+  devtool: 'source-map',
+  entry: {
+    Breadcrumb: './src/Breadcrumb/index.js',
+    CustomAlert: './src/CustomAlert/index.js',
+    FormModal: './src/FormModal/index.js',
+    ItemForm: './src/ItemForm/index.js',
+    List: './src/List/index.js',
+    SearchBar: './src/SearchBar/index.js',
+    PreviewCanvas: './src/PreviewCanvas/index.js',
+    VideoContextPreview: './src/PreviewCanvas/VideoContextPreview/index.js',
+    VideoContextProgressBar:
+      './src/PreviewCanvas/VideoContextPreview/VideoContextProgressBar.js',
+    Controls: './src/PreviewCanvas/Controls.js',
+    Filler: './src/PreviewCanvas/Filler.js',
+    ProgressBar: './src/PreviewCanvas/ProgressBar.js',
+    ProgrammeScriptContainer: './src/ProgrammeScriptContainer/index.js',
+    ProgrammeElements:
+      './src/ProgrammeScriptContainer/ProgrammeElements/index.js',
+    Note: './src/ProgrammeScriptContainer/ProgrammeElements/Note.js',
+    PaperCut: './src/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js',
+    SortableHandle:
+      './src/ProgrammeScriptContainer/ProgrammeElements/SortableHandle.js',
+    SortableItem:
+      './src/ProgrammeScriptContainer/ProgrammeElements/SortableItem.js',
+    TitleHeading:
+      './src/ProgrammeScriptContainer/ProgrammeElements/TitleHeading.js',
+    VoiceOver: './src/ProgrammeScriptContainer/ProgrammeElements/VoiceOver.js',
+    SimpleCard: './src/SimpleCard/index.js',
+    TranscriptCard: './src/TranscriptCard/index.js',
+    TranscriptForm: './src/TranscriptForm/index.js'
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].js',
+    libraryTarget: 'commonjs2'
+  },
+  optimization: {
+    minimize: true
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(js|jsx)$/,
+        include: path.resolve(__dirname, 'src'),
+        // TODO: because it uses entry point to determine graph of dependencies, might not be needed to exclude test ans sample files?
+        exclude: /(node_modules|bower_components|build|dist|demo|.storybook|storybook-static)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [ '@babel/preset-env', '@babel/preset-react' ]
+          }
+        }
+      }
+    ]
+  },
+  resolve: {
+    alias: {
+      react: path.resolve(
+        '../../digital-paper-edit-firebase/node_modules/react'
+      ),
+      'react-dom': path.resolve(
+        '../../digital-paper-edit-firebase/node_modules/react-dom'
+      ),
+      'react-router': path.resolve(
+        '../../digital-paper-edit-firebase/node_modules/react-router'
+      ),
+      'react-router-dom': path.resolve(
+        '../../digital-paper-edit-firebase/node_modules/react-router-dom'
+      )
+    },
+    symlinks: false
+  },
+  externals: {
+    react: 'commonjs react',
+    'react-dom': 'commonjs react-dom',
+    'react-router': 'commonjs react-router',
+    'react-router-dom': 'commonjs react-router-dom'
+  }
+};

yarn.lock

@@ -11690,9 +11690,9 @@ [email protected], snyk-try-require@^1.1.1, snyk-try-require@^1.3.1:
     then-fs "^2.0.0"
 
 snyk@^1.189.0:
-  version "1.251.0"
-  resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.251.0.tgz#24ff530c8ad319c14d170da3fcdf18b2aa85395f"
-  integrity sha512-f5hp0SuGwAlkR2eE8Vx4hB5hM5sOxm2V8/MkaJxYhf1k4Eu1ONW/lR4CarU0pCF9K5U3EbtrcmQI/3XiKkG5Kg==
+  version "1.251.1"
+  resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.251.1.tgz#de368cae5501238c5c3f3ed5022930d95c7953c5"
+  integrity sha512-a7AOBfh1iTXypXH2BSCYubtfZ8y85fC7884BMQ99E4YU4ScBJbrSHbQTt0prjkKUaLUlHNFgfoSrfhI/Je+b0A==
   dependencies:
     "@snyk/cli-interface" "2.3.0"
     "@snyk/dep-graph" "1.13.1"