[Tooling] yarn splash (beta)

UNRELEASED.md

@@ -25,6 +25,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Development workflow
 
+- Added [`yarn splash` (beta)](/scripts/splash/), a command-line interface to observe the splash zone of a change across the component library ([#2113](https://github.com/Shopify/polaris-react/pull/2113))
+
 ### Dependency upgrades
 
 ### Code quality

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",
+    "splash": "babel-node --extensions '.tsx','.ts' ./scripts/splash/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",
@@ -104,7 +106,8 @@
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/lodash": "^4.14.108",
-    "@types/node": "^11.13.8",
+    "@types/node": "^12.7.4",
+    "@types/tinycolor2": "^1.4.2",
     "archiver": "^3.0.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-loader": "^8.0.5",
@@ -118,9 +121,10 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "fs-extra": "^7.0.1",
-    "glob": "^7.1.3",
+    "glob": "^7.1.4",
     "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",
@@ -189,6 +193,7 @@
     "@types/react-transition-group": "^2.0.7",
     "hoist-non-react-statics": "^3.3.0",
     "lodash": "^4.17.4",
+    "node-cmd": "^3.0.0",
     "tslib": "^1.9.3"
   }
 }

scripts/splash/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "jsx-a11y/accessible-emoji": "off",
+    "shopify/jsx-no-hardcoded-content": "off"
+  }
+}

scripts/splash/README.md

@@ -0,0 +1,23 @@
+# `yarn splash` (beta)
+
+`yarn splash` is a command-line interface to observe the splash zone of a change across the component library.
+
+It answers the question:
+
+> When I modify a component, what parts of the system did that also touch (also known as the change’s “splash zone”)?
+
+## How to use `yarn splash`
+
+1. Edit files in `src/`, such as components 🧩 and style sheets 🎨
+2. Run `yarn splash` to see the splash zone of your changes in the working directory
+
+## Tips
+
+- <kbd>command</kbd> + click a file path to open it in your text editor
+- `yarn splash --watch` continuously looks for changes in the working directory and updates the list of impacted files in real-time (alpha: you may need to hit <kbd>ctrl</kbd> + <kbd>c</kbd> multiple times to exit)
+
+## Feedback and bug reports
+
+Found an issue or want to share feedback?
+
+Reach out on Slack in [#polaris-tooling](https://shopify.slack.com/messages/CCNUS0FML).

scripts/splash/index.tsx

@@ -0,0 +1,207 @@
+import path from 'path';
+import React, {useState, useEffect} from 'react';
+import {Box, Text, Color, render} from 'ink';
+import sortBy from 'lodash/sortBy';
+import {argv} from 'yargs';
+import {getGitStagedFiles, getDependencies} from './treebuilder';
+
+const excludedFileNames = (fileName) =>
+  !fileName.includes('test') &&
+  !fileName.includes('types') &&
+  !fileName.endsWith('index.ts') &&
+  !fileName.endsWith('utils.tsx');
+
+const getEmojiForExtension = (extension) => {
+  switch (extension) {
+    case '.tsx':
+      return '🧩';
+    case '.scss':
+      return '🎨';
+    default:
+      return '❔';
+  }
+};
+const formatDependencies = (dependencies) =>
+  dependencies
+    .filter(({fileName}) => excludedFileNames(fileName))
+    .map((dependency) => ({
+      pathname: `${path.dirname(dependency.fileName)}/`,
+      filename: path.basename(dependency.fileName),
+      dependencies: sortBy(
+        dependency.dependencies.filter(excludedFileNames).map((dependency) => ({
+          pathname: `${path.dirname(dependency)}/`,
+          filename: path.basename(dependency),
+          componentName: path
+            .dirname(dependency)
+            .replace('src/components/', '')
+            .split('/')[0],
+        })),
+        ['pathname', 'filename'],
+      ),
+    }));
+
+const Component = ({pathname, filename, dependencies}) => (
+  <Box marginBottom={1} flexDirection="column">
+    <Box>
+      <Box width={3}>{getEmojiForExtension(path.extname(filename))}</Box>
+      <Text bold>
+        <Color greenBright>
+          {pathname}
+          {filename}
+        </Color>
+      </Text>
+    </Box>
+    <Box marginLeft={3}>
+      <Box width={23}>Component name</Box>
+      Files potentially affected (total: {dependencies.length})
+    </Box>
+    {dependencies.map(({pathname, filename, componentName}) => (
+      <Box marginLeft={3} key={pathname + filename}>
+        <Box width={23}>
+          <Color dim>{'<'}</Color>
+          <Color>{componentName}</Color>
+          <Color dim>{' />'}</Color>
+        </Box>
+        <Text>
+          <Color dim>{pathname}</Color>
+          {filename}
+        </Text>
+      </Box>
+    ))}
+  </Box>
+);
+
+const Components = ({components, status}) => (
+  <React.Fragment>
+    {status === 'loading' && (
+      <Box marginLeft={4} marginBottom={1}>
+        ⏳{'  '}Please wait during compilation… Beep boop beep 🤖
+      </Box>
+    )}
+
+    {status === 'loaded' &&
+      components.map(({pathname, filename, dependencies}) => (
+        <Component
+          key={pathname + filename}
+          pathname={pathname}
+          filename={filename}
+          dependencies={dependencies}
+        />
+      ))}
+  </React.Fragment>
+);
+
+const Summary = ({
+  componentsModified,
+  dependencies,
+}: {
+  componentsModified: number;
+  dependencies: number;
+}) => (
+  <Box flexDirection="column">
+    <Box>
+      <Box width={30}>
+        <Text>Files modified:</Text>
+      </Box>
+      <Box justifyContent="flex-end" width={3}>
+        {componentsModified}
+      </Box>
+    </Box>
+    <Box>
+      <Box width={30}>
+        <Text>Files potentially affected:</Text>
+      </Box>
+      <Box justifyContent="flex-end" width={3}>
+        {dependencies > -1 ? dependencies : '⏳'}
+      </Box>
+    </Box>
+  </Box>
+);
+
+const App = () => {
+  const [stagedFiles, setStagedFiles] = useState([]);
+  const [data, setData] = useState([]);
+  const [dataStatus, setDataStatus] = useState('loading');
+
+  const getStagedFiles = async () => {
+    const staged = (await getGitStagedFiles('src/')) as string[];
+    setStagedFiles(staged);
+    if (staged.length === 0) {
+      setDataStatus('loaded');
+    }
+  };
+
+  useEffect(() => {
+    if (!argv.watch) {
+      getStagedFiles();
+    }
+  }, []);
+  // ^ empty dependency array = exits after one run
+
+  useEffect(() => {
+    if (argv.watch) {
+      getStagedFiles();
+    }
+  });
+  // ^ no dependencies = keeps watching
+
+  useEffect(() => {
+    if (stagedFiles.length > 0) {
+      const dependencies = getDependencies(
+        'src/**/*.tsx',
+        '*.test.tsx',
+        stagedFiles,
+      );
+      setData(formatDependencies(dependencies));
+      setDataStatus('loaded');
+    }
+  }, [setData, stagedFiles]);
+
+  return (
+    <React.Fragment>
+      <Box marginBottom={1} flexDirection="column">
+        <Box>
+          <Box width={3}>💦</Box>
+          <Box>
+            <Text bold>yarn splash</Text>: Observe the splash zone of a change
+            across the entire library
+          </Box>
+        </Box>
+      </Box>
+      <Components components={data} status={dataStatus} />
+      <Summary
+        componentsModified={stagedFiles.length}
+        dependencies={
+          dataStatus === 'loading'
+            ? -1
+            : new Map([
+                ...data.map(({pathname, filename}) => [
+                  pathname,
+                  pathname + filename,
+                ]),
+                ...data.reduce(
+                  (val, curr) =>
+                    val.concat(
+                      curr.dependencies.map(({pathname}) => [
+                        pathname,
+                        curr.pathname + curr.filename,
+                      ]),
+                    ),
+                  [],
+                ),
+              ]).size
+        }
+      />
+      <Box marginTop={1}>
+        <Color dim>
+          <Box width={3}>💡</Box>
+          <Box>
+            tip: command + click a file path to open it in your text editor
+          </Box>
+        </Color>
+      </Box>
+    </React.Fragment>
+  );
+};
+
+render(<App />);