Add symlink yarn command and document linking

README.md

@@ -68,6 +68,7 @@ docker run -t -i --rm -e -v ${PWD}/components:/app/components NPM_TOKEN=$NPM_TOK
 | **yarn build**                | Build the library                                                         |
 | **yarn build:storybook**      | Build Storybook as static website                                         |
 | **yarn symlink**              | Symlink current version of library for development                        |
+| **yarn symlink:off**          | Un-symlink current version of library for development                     |
 
 ## Icons
 
@@ -100,3 +101,38 @@ To add a new Icon to Picasso library please follow these steps:
    ```
 
 After Picasso will be released with your changes you can start using your Icon as described [here](https://picasso.toptal.net/?selectedKind=Icons&selectedStory=Icons).
+
+## Linking with other projects
+
+In order to develop or debug Picasso in parallel with your project without the need to publish new Picasso versions, you need to link Picasso to your project. And once finished unlink it.
+You will probably notice that linking process links `@toptal/picasso` and `react`. It is due to React restriction of only once instance used in the project [[1]](https://github.com/facebook/react/issues/14257#issuecomment-439967377) [[2]](https://github.com/facebook/react/issues/13991#issuecomment-463486871), so we link to Picasso's `react` version.
+
+### Link
+
+To link Picasso follow these steps:
+
+In Picasso project directory:
+
+1. Checkout Picasso project from [Github](https://github.com/toptal/picasso)
+2. Install Picasso dependencies with `yarn install`
+3. Build Picasso with `yarn build` or `yarn build:watch` if you want to trigger build on file change
+4. Create a link with `yarn symlink` (creates Picasso and React link)
+
+In your project directory:
+
+1. Link Picasso and React with `yarn link @toptal/picasso react`
+2. Start your project and changes in Picasso will be visible in your project!
+
+### Unlink
+
+To unlink Picasso follow these steps:
+
+In your project directory:
+
+1. Unlink Picasso with `yarn unlink @toptal/picasso react`
+2. Re-install dependencies with `yarn install --force`
+
+(Optional) In Picasso project directory:
+
+1. Unlink with `yarn symlink:off`
+2. Re-install dependencies with `yarn install --force`

bin/build

@@ -40,24 +40,6 @@ const compile = function(config) {
     generatePackageJson(config.compilerOptions.outDir)
   }
 
-  if (yargs.symlink) {
-    log('Symlinking dev package...')
-    try {
-      exec('yarn unlink', {
-        cwd: config.compilerOptions.outDir,
-        stdio: 'ignore',
-        stderr: 'ignore'
-      })
-    } catch (e) {
-      log(`Package ${packageJson.name} not found. Linking new...`)
-    }
-
-    exec('yarn link', {
-      cwd: config.compilerOptions.outDir,
-      stdio: 'inherit'
-    })
-  }
-
   if (yargs.watch) {
     args.unshift('--watch')
     log(`Watching for changes in: ${config.include.join(', ')}`)

bin/symlink

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+
+const path = require('path')
+const chalk = require('chalk')
+const yargs = require('yargs').argv
+const exec = require('child_process').execSync
+
+const config = require(`../tsconfig.json`)
+const packageJson = require(path.resolve(__dirname, '../package.json'))
+
+// General logging
+const log = function(text, color) {
+  if (!color) color = 'blue'
+  console.log(chalk[color](text))
+}
+
+const link = function(name, cwd) {
+  log(`Linking ${name}...`)
+  exec('yarn link', {
+    cwd,
+    stdio: 'inherit'
+  })
+}
+
+const unlink = function(name, cwd) {
+  try {
+    log(`Unlinking ${name}...`)
+    exec('yarn unlink', {
+      cwd,
+      stdio: 'ignore',
+      stderr: 'ignore'
+    })
+  } catch (e) {
+    log(`Package ${name} not found. ${e}`)
+  }
+}
+
+const setup = function(config) {
+  if (yargs.link) {
+    log('Linking process started...')
+
+    unlink(packageJson.name, config.compilerOptions.outDir)
+    unlink('react', './node_modules/react')
+
+    link('picasso', config.compilerOptions.outDir)
+    link('react', './node_modules/react')
+
+    log('Linking process finished.')
+  }
+
+  if (yargs.unlink) {
+    log('Unlinking process started...')
+
+    unlink(packageJson.name, config.compilerOptions.outDir)
+    unlink('react', './node_modules/react')
+
+    log('Unlinking process finished.')
+  }
+}
+
+setup(config)

package.json

@@ -19,7 +19,8 @@
     "build": "yarn run build:svg && cross-env NODE_ENV=production ./bin/build",
     "build:svg": "svgr -d components/Icon --ext jsx components/Icon/svg",
     "build:watch": "cross-env ./bin/build --watch",
-    "symlink": "cross-env ./bin/build --symlink",
+    "symlink": "cross-env ./bin/symlink --link",
+    "symlink:off": "cross-env ./bin/symlink --unlink",
     "generate:component": "hygen component new",
     "generate:example": "hygen component example"
   },
@@ -34,8 +35,8 @@
   },
   "homepage": "https://github.com/toptal/ui-library#readme",
   "peerDependencies": {
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3"
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
   },
   "dependencies": {
     "@babel/standalone": "^7.3.4",
@@ -93,10 +94,10 @@
     "prop-types": "^15.6.2",
     "puppeteer": "^1.9.0",
     "raw-loader": "^1.0.0",
-    "react": "^16.8.1",
+    "react": "^16.8.4",
     "react-ace": "^6.3.2",
     "react-docgen-typescript-loader": "^3.0.1",
-    "react-dom": "^16.8.1",
+    "react-dom": "^16.8.4",
     "react-source-render": "^2.0.0-beta.6",
     "react-storybook-addon-chapters": "^3.0.3",
     "react-testing-library": "^5.3.1",

yarn.lock

@@ -10492,15 +10492,15 @@ react-dom@^16.6.3, react-dom@^16.7.0:
     prop-types "^15.6.2"
     scheduler "^0.12.0"
 
-react-dom@^16.8.1:
-  version "16.8.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.1.tgz#ec860f98853d09d39bafd3a6f1e12389d283dbb4"
-  integrity sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg==
+react-dom@^16.8.4:
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.4.tgz#1061a8e01a2b3b0c8160037441c3bf00a0e3bc48"
+  integrity sha512-Ob2wK7XG2tUDt7ps7LtLzGYYB6DXMCLj0G5fO6WeEICtT4/HdpOi7W/xLzZnR6RCG1tYza60nMdqtxzA8FaPJQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.1"
+    scheduler "^0.13.4"
 
 react-error-overlay@^5.1.0:
   version "5.1.2"
@@ -10651,15 +10651,15 @@ react@^16.6.3, react@^16.7.0:
     prop-types "^15.6.2"
     scheduler "^0.12.0"
 
-react@^16.8.1:
-  version "16.8.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.1.tgz#ae11831f6cb2a05d58603a976afc8a558e852c4a"
-  integrity sha512-wLw5CFGPdo7p/AgteFz7GblI2JPOos0+biSoxf1FPsGxWQZdN/pj6oToJs1crn61DL3Ln7mN86uZ4j74p31ELQ==
+react@^16.8.4:
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.4.tgz#fdf7bd9ae53f03a9c4cd1a371432c206be1c4768"
+  integrity sha512-0GQ6gFXfUH7aZcjGVymlPOASTuSjlQL4ZtVC5YKH+3JL6bBLCVO21DknzmaPlI90LN253ojj02nsapy+j7wIjg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.1"
+    scheduler "^0.13.4"
 
 read-cmd-shim@^1.0.1, read-cmd-shim@~1.0.1:
   version "1.0.1"
@@ -11372,10 +11372,10 @@ scheduler@^0.12.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.13.1:
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.1.tgz#1a217df1bfaabaf4f1b92a9127d5d732d85a9591"
-  integrity sha512-VJKOkiKIN2/6NOoexuypwSrybx13MY7NSy9RNt8wPvZDMRT1CW6qlpF5jXRToXNHz3uWzbm2elNpZfXfGPqP9A==
+scheduler@^0.13.4:
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.4.tgz#8fef05e7a3580c76c0364d2df5e550e4c9140298"
+  integrity sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"