refactor: website in own workspace (#387)

* chore: move website into own workspace

* chore: resolve linting problems

* chore: website missing deps, peers

* chore: ci, artifacts

* docs: refs to start

.github/workflows/main.yml

@@ -160,10 +160,10 @@ jobs:
       - name: Deploy (dry)
         if: ${{ github.ref != 'refs/heads/master' }}
         run: |
-          yarn deploy:dryrun
+          yarn website:dryrun
       - name: Deploy
         if: ${{ github.ref == 'refs/heads/master' }}
         env:
           GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}
         run: |
-          yarn deploy
+          yarn website:deploy

README.md

@@ -28,21 +28,18 @@ To build the examples locally, run:
 
 ```bash
 yarn
-yarn start
+yarn website:start
 ```
 
 Then open [`localhost:3000`](http://localhost:3000) in a browser.
 
 
 ## Installation
 
-The easiest way to use react-intl-tel-input is to install it from NPM and include it in your own React build process (using [Webpack](http://webpack.github.io/), etc).
-
 ```bash
 yarn add react-intl-tel-input
 ```
 
-
 ## Usage
 
 ```javascript
@@ -62,9 +59,9 @@ Please see the [Demo Page](https://patw0929.github.io/react-intl-tel-input/)
 
 ## Development (`src` and the build process)
 
-To build, watch and serve the examples (which will also watch the component source), run `yarn start`.
+To build, watch and serve the examples (which will also watch the component source), run `yarn website:start`.
 
-You can prepare a distribution build using `yarn run build`.
+You can prepare a distribution build using `yarn build`.
 
 ## Contributing
 

config/paths.js

@@ -3,7 +3,7 @@ var fs = require('fs')
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebookincubator/create-react-app/issues/637
-const appDirectory = fs.realpathSync(process.cwd())
+const appDirectory = fs.realpathSync(path.join(path.dirname(process.cwd())))
 
 function resolveApp(relativePath) {
   return path.resolve(appDirectory, relativePath)

package.json

@@ -3,6 +3,9 @@
   "version": "0.0.0",
   "description": "Telephone input component. Rewrite intl-tel-input in React.js.",
   "author": "patw",
+  "workspaces": [
+    "website"
+  ],
   "contributors": [
     {
       "name": "Marc Cataford",
@@ -51,71 +54,48 @@
     "@babel/preset-react": "^7.0.0",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
-    "@storybook/addon-actions": "4.1.11",
-    "@storybook/addon-info": "^4.1.11",
-    "@storybook/addon-knobs": "^4.1.11",
-    "@storybook/addon-options": "^4.1.11",
-    "@storybook/cli": "^4.1.6",
-    "@storybook/react": "^4.1.6",
-    "@storybook/storybook-deployer": "^2.8.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.4",
     "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-plugin-react-docgen": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.21",
     "coveralls": "^2.11.9",
-    "css-loader": "^1.0.1",
-    "css-modules-require-hook": "^4.0.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.5.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "~17.1.0",
     "eslint-config-airbnb-base": "~13.1.0",
     "eslint-config-prettier": "^6.10.0",
-    "eslint-loader": "^2.1.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.11.0",
     "eslint-plugin-security": "^1.3.0",
-    "file-loader": "^2.0.0",
     "husky": "^4.2.3",
     "identity-obj-proxy": "^3.0.0",
-    "image-webpack-loader": "^4.6.0",
     "jasmine-reporters": "^2.2.0",
     "jest": "^23.6.0",
     "jsdom": "^9.2.1",
     "lint-staged": "^11.1.1",
-    "mini-css-extract-plugin": "^0.4.5",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "packwatch": "^1.0.0",
-    "postcss-safe-parser": "^4.0.1",
     "prettier": "^1.14.2",
     "prettier-eslint": "^9.0.1",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-hot-loader": "^1.3.0",
     "rimraf": "2.5.4",
     "sass": "^1.37.4",
-    "sass-loader": "^7.1.0",
     "semantic-release": "^17.0.4",
-    "sinon": "^1.17.4",
-    "storybook-addon-react-docgen": "^1.0.4",
-    "style-loader": "^0.23.1",
-    "uglifyjs-webpack-plugin": "^2.0.1",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.27.1"
+    "sinon": "^1.17.4"
   },
   "scripts": {
     "prebuild": "yarn run clean",
     "build": "BABEL_ENV=production babel src -d dist && cp -r ./src/*.png ./dist && sass ./src/intlTelInput.scss ./dist/main.css",
     "clean": "rimraf dist",
-    "start": "start-storybook -p 4000 -c .storybook",
-    "deploy:dryrun": "storybook-to-ghpages --dry-run",
-    "deploy": "storybook-to-ghpages -- --ci",
-    "lint": "eslint src *.js",
+    "website:start": "yarn workspace website run start",
+    "website:dryrun": "yarn workspace website run deploy:dryrun",
+    "website:deploy": "yarn workspace website run deploy",
+    "lint": "eslint src website/.storybook *.js",
     "coverage": "yarn test --coverage",
     "coverage-upload": "NODE_ENV=development cat coverage/lcov.info | yarn coveralls",
     "test": "jest src",

website/.storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-options/register'
+import '@storybook/addon-knobs/register'
+import '@storybook/addon-actions/register'

website/.storybook/config.js

@@ -0,0 +1,21 @@
+import { configure, addDecorator } from '@storybook/react'
+import { withOptions } from '@storybook/addon-options'
+import { version } from '../../package.json'
+
+const req = require.context('./stories', true, /.js*/)
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename))
+  // eslint-disable-next-line global-require
+  require('./styles/styles.scss')
+}
+
+addDecorator(
+  withOptions({
+    name: `react-intl-tel-input v${version}`,
+    url: 'https://github.com/patw0929/react-intl-tel-input',
+    sidebarAnimations: true,
+  }),
+)
+
+configure(loadStories, module)

website/.storybook/helpers/helpers.js

@@ -0,0 +1,11 @@
+// eslint-disable-next-line import/prefer-default-export
+export const lookup = callback => {
+  const request = new XMLHttpRequest()
+
+  request.addEventListener('load', () => {
+    callback(JSON.parse(request.responseText).country_code)
+  })
+
+  request.open('GET', 'https://api.ipdata.co/?api-key=test')
+  request.send()
+}

.storybook/stories/1.GettingStarted/GettingStarted.stories.js → website/.storybook/stories/1.GettingStarted/GettingStarted.stories.js

@@ -1,17 +1,20 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
 
-import IntlTelInput from '../../../src/components/IntlTelInput';
-import '../../../src/intlTelInput.scss'
+import IntlTelInput from '../../../../src/components/IntlTelInput'
+import '../../../../src/intlTelInput.scss'
 
 storiesOf('Documentation', module)
   .addParameters({ options: { showAddonPanel: false } })
-  .add('Getting Started', withInfo({ inline: true, source: false, propTables: null })(() =>
-  (
-    <IntlTelInput />
-  )), { info: {
-    text: `
+  .add(
+    'Getting Started',
+    withInfo({ inline: true, source: false, propTables: null })(() => (
+      <IntlTelInput />
+    )),
+    {
+      info: {
+        text: `
       ## Installation
 
       ~~~bash
@@ -41,4 +44,6 @@ storiesOf('Documentation', module)
       );
       ~~~
         `,
-  },});
+      },
+    },
+  )

website/.storybook/stories/2.Props/Props.stories.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
+
+import IntlTelInput from '../../../../src/components/IntlTelInput'
+import '../../../../src/intlTelInput.scss'
+
+storiesOf('Documentation', module)
+  .addParameters({ options: { showAddonPanel: false } })
+  .add(
+    'Props',
+    withInfo({ inline: true, source: false })(() => <IntlTelInput />),
+  )