Internal: Workspaces (pinterest#22)

* wip * update ci commands to use yarn * update deps * update netlify config * peg docs to latest gestalt * update netlify script to pick up yarn * netlify build from docs dir * fix bad merge * more bad merges * lock docs gestalt version * no output path by default * Add test to workspaces * debug docker * convert to COPY commands * try being more explicit * lets get explicit * again! * even more verbose * update pipeline * remove logging * fix eslint & jest * also add react-dom * run flow check in ci * fix flow command * Ignore docs for flow * Fix stylelint * ignore integration tests for flow too * ghost command * give this a try * ignore package.json * replace npm with yarn * export icon list * Hopefully more fixes to tests. * reference babel-node directly * another try * test * more debug * fail fast * cd into directory individually * give this a go * turn off debugging * try again * fix top level command * test stuff * v * zomg * undebug * upgrade ghost * fix merge * fix a couple of things * fix * Update packages * Update export list of icons * move npm ignore * Update integration test env. * try again * try to use current version of gestalt * try removing context * wip * fix lint * zomg * update readme and publishing description etc. * update changelog * Flyout: update docs with correct flowtypes (pinterest#37) * Flyout: update docs with correct flowtypes * Fix ErrorFlyout references as well * Add pull request number * build gestalt before docs * Add react to dependencies of tests
ryanahamilton · Mar 3, 2018 · b4f0ee3 · b4f0ee3
1 parent 8eae518
commit b4f0ee3
Show file tree

Hide file tree

Showing 383 changed files with 778 additions and 1,096 deletions.
diff --git a/.buildkite/pipeline.yml b/.buildkite/pipeline.yml
@@ -2,53 +2,53 @@ steps:
   - name: ":docker: :package:"
     plugins:
       docker-compose:
-        build: app
+        build: gestalt
         image-repository: 053722134931.dkr.ecr.us-east-1.amazonaws.com/pinterest
     agents:
       queue: elastic-builders
   - wait
   - name: ":eslint:"
-    command: npm run eslint
+    command: yarn lint:js
     timeout_in_minutes: 10
     agents:
       queue: elastic
     plugins:
       docker-compose:
-        run: app
+        run: gestalt
   - name: ":stylelint:"
-    command: npm run stylelint
+    command: yarn lint:css
     timeout_in_minutes: 10
     agents:
       queue: elastic
     plugins:
       docker-compose:
-        run: app
+        run: gestalt
   - name: ":flowtype:"
     command: yarn flow check
     timeout_in_minutes: 10
     agents:
       queue: elastic
     plugins:
       docker-compose:
-        run: app
+        run: gestalt
   - name: ":jest: :chrome:"
-    command: npm test -- --env jsdom
+    command: yarn test --env jsdom
     timeout_in_minutes: 10
     agents:
       queue: elastic
     plugins:
       docker-compose:
-        run: app
+        run: gestalt
   - name: ":jest: :node:"
-    command: npm test -- --env node
+    command: yarn test --env node
     timeout_in_minutes: 10
     agents:
       queue: elastic
     plugins:
       docker-compose:
-        run: app
-  - name: ":ghost: %n"
-    command: npm run ghost
+        run: gestalt
+  - name: ":ghost: integration %n"
+    command: ./run_integration_tests
     artifact_paths: 'screenshots/*'
     timeout_in_minutes: 30
     parallelism: 3
@@ -59,7 +59,7 @@ steps:
       queue: elastic
     plugins:
       docker-compose:
-        run: app
+        run: gestalt
   - name: ":zap: danger"
     command: yarn danger ci
     timeout_in_minutes: 10
@@ -73,4 +73,4 @@ steps:
       queue: elastic
     plugins:
       docker-compose:
-        run: app
+        run: gestalt
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,5 @@
+.git
+Dockerfile
+.gitignore
+*.log
+node_modules
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
-**/node_modules/**
-dist/**
+node_modules
+docs/build
+packages/gestalt/dist
diff --git a/.flowconfig b/.flowconfig
@@ -2,6 +2,10 @@
 0.65.0
 
 [ignore]
+# Tracking https://github.com/facebook/flow/issues/4015
+<PROJECT_ROOT>/docs
+<PROJECT_ROOT>/test
+
 <PROJECT_ROOT>/node_modules/stylelint.*
 <PROJECT_ROOT>/node_modules/eslint-plugin-jsx-a11y/*
 

diff --git a/.gitignore b/.gitignore
@@ -3,7 +3,8 @@ coverage/
 docs/build/
 *.log
 stats.html
+screenshots
 
-dist/*
+packages/gestalt/dist/*
 # the flow export file as it's maintained by hand
-!dist/gestalt.js.flow
+!packages/gestalt/dist/gestalt.js.flow
diff --git a/.npmignore b/.npmignore
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+package.json
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 ### Minor
 
 ### Patch
+* Internal: split docs & integration tests into individual packages
 
 * Flyout: Update the docs with correct flowtypes (#37)
 

diff --git a/Dockerfile b/Dockerfile
@@ -6,18 +6,23 @@ WORKDIR /app
 ENV PATH /app/node_modules/.bin:$PATH
 ENV DISPLAY :99
 
-ADD test/xvfb_init /etc/init.d/xvfb
-ADD test/xvfb_daemon_run /usr/bin/xvfb-daemon-run
+COPY test/xvfb_init /etc/init.d/xvfb
+COPY test/xvfb_daemon_run /usr/bin/xvfb-daemon-run
 
 RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
     echo "deb http://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
     apt-get update -yy -qq && \
-    apt-get install yarn xvfb -yy -qq && \
-    apt-get install firefox-esr -yy -qq && \
+    apt-get install yarn -yy -qq && \
+    apt-get install xvfb firefox-esr -yy -qq && \
     chmod a+x /etc/init.d/xvfb /usr/bin/xvfb-daemon-run
 
-ADD package.json yarn.lock /app/
+COPY yarn.lock package.json ./
 
-RUN yarn --pure-lockfile --ignore-scripts
+RUN mkdir -p docs test packages/gestalt
+COPY packages/gestalt/package.json ./packages/gestalt/
+COPY docs/package.json ./docs/
+COPY test/package.json ./test/
 
-ADD . /app
+RUN yarn install --pure-lockfile --ignore-scripts
+
+COPY . ./
diff --git a/README.md b/README.md
@@ -22,25 +22,29 @@ That syntax is Webpack specific (and will work with Create React App), but you c
 
 ## Development
 
-Install dependencies.
+Gestalt is a [multi-project monorepo](https://yarnpkg.com/lang/en/docs/workspaces/). The docs, components and integration tests are all organized as separate packages that share similar tooling.
+
+Install project dependencies and run tests:
 
 ```bash
 yarn
+yarn test
 ```
 
-Start the development server:
+Build and watch Gestalt:
 
 ```bash
-yarn start
-open "http://localhost:8080"
+cd packages/gestalt
+yarn watch
 ```
-Visit [http://localhost:8080/](http://localhost:8080) and click on a component to view the docs.
 
-Running Jest unit tests:
+Start the docs server:
 
 ```bash
-yarn test
+yarn start
+open "http://localhost:8080"
 ```
+Visit [http://localhost:8080/](http://localhost:8080) and click on a component to view the docs.
 
 Using the Masonry playground:
 
@@ -49,7 +53,7 @@ cd test && yarn start
 open "http://localhost:3000"
 ```
 
-Running Masonry's integration tests. This will likely leave hanging Firefox processes left over, so please be warned.
+Running Masonry's integration tests. This will leave lots of Firefox processes hanging around, so please be warned.
 
 ```bash
 ./run_integration_tests
@@ -60,8 +64,8 @@ Running Masonry's integration tests. This will likely leave hanging Firefox proc
 The following outlines our release process:
 
 * Checkout a new branch.
-* Bump package version in `package.json`.
+* Bump package version in `packages/gestalt/package.json` & update `CHANGELOG.md`.
 * Open a pull request with the new version and land that in master.
 * Once the version is bumped in master, checkout that commit locally.
 * Publish the tag, npm package, and docs with: `./scripts/publish.js`.
-* Draft a release from the tag and update the release notes at https://github.com/pinterest/gestalt/releases
+* Draft a release from the tag and update the release notes from the `CHANGELOG` at https://github.com/pinterest/gestalt/releases.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,6 +1,6 @@
 version: '2'
 services:
-  app:
+  gestalt:
     build: .
     volumes:
       - "./screenshots:/app/screenshots"

diff --git a/docs/package.json b/docs/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "gestalt-docs",
+  "version": "0.0.0",
+  "private": true,
+  "license": "Apache-2.0",
+  "homepage": "https://pinterest.github.io/gestalt",
+  "scripts": {
+    "build": "webpack --config webpack.config.corkboard.js --colors --progress --output-path build",
+    "start": "webpack-dev-server --config webpack.config.corkboard.js --progress --colors --open"
+  },
+  "dependencies": {
+    "corkboard": "0.3.3",
+    "gestalt": ">0.0.0",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-eslint": "^8.2.1",
+    "babel-loader": "^7.1.3",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-flow-strip-types": "^6.22.0",
+    "babel-polyfill": "^6.23.0",
+    "css-loader": "^0.23.1",
+    "cssnano": "^3.10.0",
+    "ejs": "^2.5.2",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "flow-status-webpack-plugin": "^0.1.5",
+    "html-webpack-plugin": "^2.30.1",
+    "json-loader": "^0.5.4",
+    "open-browser-webpack-plugin": "0.0.2",
+    "raw-loader": "^0.5.1",
+    "react-hot-loader": "^1.3.0",
+    "react-live": "^1.7.1",
+    "style-loader": "^0.13.0",
+    "svg-path-loader": "^0.0.4",
+    "webpack-dev-server": "^2.11.1",
+    "webpack": "^3.11.0"
+  },
+  "browserslist": [
+    "defaults",
+    "last 2 versions",
+    "iOS 8"
+  ]
+}
diff --git a/src/Avatar/Avatar.doc.js → docs/src/Avatar.doc.js b/src/Avatar/Avatar.doc.js → docs/src/Avatar.doc.js
@@ -1,10 +1,8 @@
 // @flow
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Avatar from './Avatar';
-import Box from '../Box/Box';
-import Text from '../Text/Text';
-import { ns, card, md, PropTable, Example } from '../../docs/src/cards';
+import { Avatar, Box, Text } from 'gestalt';
+import { ns, card, md, PropTable, Example } from './cards';
 
 ns(
   'Avatar',

diff --git a/src/Box/Box.doc.js → docs/src/Box.doc.js b/src/Box/Box.doc.js → docs/src/Box.doc.js
@@ -1,17 +1,7 @@
 // @flow
 import * as React from 'react';
-import Box from './Box';
-import Text from '../Text/Text';
-import Avatar from '../Avatar/Avatar';
-import Button from '../Button/Button';
-import {
-  ns,
-  card,
-  md,
-  PropTable,
-  Example,
-  Combination,
-} from '../../docs/src/cards';
+import { Box, Text, Avatar, Button } from 'gestalt';
+import { ns, card, md, PropTable, Example, Combination } from './cards';
 
 ns(
   'Box',

diff --git a/src/Button/Button.doc.js → docs/src/Button.doc.js b/src/Button/Button.doc.js → docs/src/Button.doc.js
@@ -1,16 +1,7 @@
 // @flow
 import * as React from 'react';
-import Box from '../Box/Box';
-import Button from './Button';
-import {
-  ns,
-  card,
-  md,
-  PropTable,
-  Example,
-  Combination,
-} from '../../docs/src/cards';
-import Text from '../Text/Text';
+import { Box, Button, Text } from 'gestalt';
+import { ns, card, md, PropTable, Example, Combination } from './cards';
 
 ns(
   'Button',

diff --git a/src/Card/Card.doc.js → docs/src/Card.doc.js b/src/Card/Card.doc.js → docs/src/Card.doc.js
@@ -1,13 +1,7 @@
 // @flow
 import * as React from 'react';
-
-import Avatar from '../Avatar/Avatar';
-import Box from '../Box/Box';
-import Button from '../Button/Button';
-import Card from './Card';
-import Link from '../Link/Link';
-import Text from '../Text/Text';
-import { ns, card, md, PropTable, Example } from '../../docs/src/cards';
+import { Avatar, Box, Button, Card, Link, Text } from 'gestalt';
+import { ns, card, md, PropTable, Example } from './cards';
 
 ns(
   'Card',

diff --git a/src/Checkbox/Checkbox.doc.js → docs/src/Checkbox.doc.js b/src/Checkbox/Checkbox.doc.js → docs/src/Checkbox.doc.js
@@ -1,17 +1,7 @@
 // @flow
 import * as React from 'react';
-import Box from '../Box/Box';
-import Label from '../Label/Label';
-import Text from '../Text/Text';
-import Checkbox from './Checkbox';
-import {
-  ns,
-  card,
-  md,
-  PropTable,
-  Example,
-  Combination,
-} from '../../docs/src/cards';
+import { Box, Label, Text, Checkbox } from 'gestalt';
+import { ns, card, md, PropTable, Example, Combination } from './cards';
 
 ns(
   'Checkbox',

diff --git a/src/Column/Column.doc.js → docs/src/Column.doc.js b/src/Column/Column.doc.js → docs/src/Column.doc.js
@@ -1,9 +1,7 @@
 // @flow
 import * as React from 'react';
-import Column from './Column';
-import Box from '../Box/Box';
-import Text from '../Text/Text';
-import { ns, card, md, PropTable, Example } from '../../docs/src/cards';
+import { Column, Box, Text } from 'gestalt';
+import { ns, card, md, PropTable, Example } from './cards';
 
 ns('Column', 'Gestalt supports a 12-column system.');
 

diff --git a/src/Container/Container.doc.js → docs/src/Container.doc.js b/src/Container/Container.doc.js → docs/src/Container.doc.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
-import Container from './Container';
-import { ns, card, md, PropTable, Example } from '../../docs/src/cards';
+import { Container } from 'gestalt';
+import { ns, card, md, PropTable, Example } from './cards';
 
 ns(
   'Container',

diff --git a/src/Divider/Divider.doc.js → docs/src/Divider.doc.js b/src/Divider/Divider.doc.js → docs/src/Divider.doc.js
@@ -1,9 +1,7 @@
 // @flow
 import * as React from 'react';
-import Box from '../Box/Box';
-import Text from '../Text/Text';
-import Divider from './Divider';
-import { ns, card, Example, md, PropTable } from '../../docs/src/cards';
+import { Box, Text, Divider } from 'gestalt';
+import { ns, card, Example, md, PropTable } from './cards';
 
 ns(
   'Divider',