First iteration of the observer CLI

package.json

@@ -60,7 +60,8 @@
     "readme-update-version": "node ./scripts/readme-update-version",
     "version": "yarn run readme-update-version",
     "storybook": "start-storybook -p 6006 --quiet",
-    "storybook:build": "yarn run copy-polaris-tokens && build-storybook -o build/storybook/static"
+    "storybook:build": "yarn run copy-polaris-tokens && build-storybook -o build/storybook/static",
+    "observer": "babel-node --extensions '.tsx' ./scripts/observer/index.tsx"
   },
   "stylelint": {
     "extends": [
@@ -89,6 +90,7 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.4.3",
+    "@babel/node": "^7.6.1",
     "@percy/storybook": "^3.0.2",
     "@shopify/jest-dom-mocks": "^2.1.1",
     "@shopify/react-testing": "^1.7.3",
@@ -105,6 +107,7 @@
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/lodash": "^4.14.108",
     "@types/node": "^11.13.8",
+    "@types/tinycolor2": "^1.4.2",
     "archiver": "^3.0.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-loader": "^8.0.5",
@@ -121,6 +124,7 @@
     "glob": "^7.1.3",
     "gray-matter": "^4.0.2",
     "in-publish": "^2.0.0",
+    "ink": "^2.3.0",
     "isomorphic-fetch": "^2.2.1",
     "js-yaml": "^3.13.1",
     "marked": "^0.6.2",
@@ -153,6 +157,7 @@
     "shx": "^0.3.2",
     "storybook-chroma": "^2.1.1",
     "svgo": "^1.2.2",
+    "tinycolor2": "^1.4.1",
     "typescript": "~3.5.1",
     "yargs": "^13.2.2"
   },

scripts/observer/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "jsx-a11y/accessible-emoji": "off"
+  }
+}

scripts/observer/README.md

@@ -0,0 +1,3 @@
+# `yarn observer`
+
+A command-line interface to observe the impact of a change across the component library.

scripts/observer/index.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import tinycolor from 'tinycolor2';
+import tokens from '@shopify/polaris-tokens';
+import {Box, Text, render, Color} from 'ink';
+
+const data = [
+  {
+    path: 'src/components/Button/',
+    filename: 'Button.tsx',
+    componentsAffected: [
+      {path: 'src/components/ButtonGroup/', filename: 'ButtonGroup.tsx'},
+      {path: 'src/components/CalloutCard/', filename: 'CalloutCard.tsx'},
+      {path: 'src/components/Caption/', filename: 'Caption.tsx'},
+      {path: 'src/components/TopBar/', filename: 'TopBar.tsx'},
+    ],
+  },
+  {
+    path: 'src/components/Button/',
+    filename: 'Button.scss',
+    componentsAffected: [
+      {path: 'src/components/ButtonGroup/', filename: 'ButtonGroup.tsx'},
+      {path: 'src/components/Caption/', filename: 'Caption.tsx'},
+      {path: 'src/components/Button/', filename: 'Button.tsx'},
+    ],
+  },
+  {
+    path: 'src/components/Checkbox/',
+    filename: 'Checkbox.tsx',
+    componentsAffected: [
+      {
+        path: 'src/components/ContextualSaveBar/',
+        filename: 'ContextualSaveBar.tsx',
+      },
+      {
+        path: 'src/components/EmptySearchResult/',
+        filename: 'EmptySearchResult.tsx',
+      },
+      {path: 'src/components/Labelled/', filename: 'Labelled.tsx'},
+      {path: 'src/components/Button/', filename: 'Button.tsx'},
+    ],
+  },
+];
+
+const Component = ({path, filename, componentsAffected}) => (
+  <Box marginBottom={1} flexDirection="column">
+    <Box paddingLeft={2}>
+      {filename.endsWith('tsx') ? '🧩  ' : '💅 '}
+      <Text underline>
+        <Color dim>{path}</Color>
+        <Text bold>{filename}</Text>
+      </Text>
+    </Box>
+    <Box marginLeft={4}>Affected files:</Box>
+    {componentsAffected.map(({path, filename}) => (
+      <Box marginLeft={4} key={path + filename}>
+        <Text>
+          <Color dim>{path}</Color>
+          {filename}
+        </Text>
+      </Box>
+    ))}
+  </Box>
+);
+
+const Components = ({components}) => (
+  <React.Fragment>
+    {components.map(({path, filename, componentsAffected}) => (
+      <Component
+        key={path + filename}
+        path={path}
+        filename={filename}
+        componentsAffected={componentsAffected}
+      />
+    ))}
+  </React.Fragment>
+);
+
+const Summary = ({
+  componentsModified,
+  componentsAffected,
+}: {
+  componentsModified: number;
+  componentsAffected: number;
+}) => (
+  <Box flexDirection="column">
+    <Box>
+      <Box width={22}>
+        <Text>Components modified:</Text>
+      </Box>
+      {componentsModified}
+    </Box>
+    <Box>
+      <Box width={22}>
+        <Text>Components affected:</Text>
+      </Box>
+      {componentsAffected}
+    </Box>
+  </Box>
+);
+
+render(
+  <React.Fragment>
+    <Box marginBottom={1}>
+      💡 tip: command + click file paths to open them in your text editor
+    </Box>
+    <Components components={data} />
+    <Summary
+      componentsModified={data.length}
+      componentsAffected={
+        new Map([
+          ...data.map(({path, filename}) => [path, path + filename]),
+          ...data.reduce(
+            (val, curr) =>
+              val.concat(
+                curr.componentsAffected.map(({path}) => [
+                  path,
+                  curr.path + curr.filename,
+                ]),
+              ),
+            [],
+          ),
+        ]).size
+      }
+    />
+  </React.Fragment>,
+);