build(workspaces): implement src as workspace package (elastic#1198)

Key changes:
- move `./src/**` to `./packages/elastic-charts/**`
- correct all paths due to file sturcture changes
- fix bad docs paths and config options
- create top-level mono package, move lib package
- simplify lib tsconfig.json files
- fix errors in linking package, cleanup paths
- fix linting config to reflect file structure changes
- update semantic release to point at new lib package
- add lerna to facilitate running workspace scripts

.ci/jobs/elastic+elastic-charts+pull-request.yml

@@ -13,7 +13,7 @@
           allow-whitelist-orgs-as-admins: true
           trigger-phrase: '(.*(?:jenkins\W+)?test\W+(?:this|it)(?:\W+please)?.*)|^retest$'
           github-hooks: true
-          status-context: "@elastic/charts CI"
+          status-context: '@elastic/charts CI'
           cancel-builds-on-update: true
     builders:
       - multijob:

.eslintignore

@@ -1,9 +1,10 @@
 # Force include
 !.*.js
+!packages/charts/.*.js
 
 # Ignore
 wiki
-node_modules
+**/node_modules
 coverage
 license_header.js
 
@@ -14,8 +15,8 @@ license_header.js
 .git
 
 # Compiled source
-src/utils/d3-delaunay/*
+packages/charts/src/utils/d3-delaunay
 **/dist
 
 # auto generated directories
-integration/tmp
+**/tmp

.eslintrc.js

@@ -319,7 +319,7 @@ module.exports = {
     'import/resolver': {
       node: {
         extensions: ['.mjs', '.js', '.json', '.ts', '.d.ts', '.tsx'],
-        moduleDirectory: ['node_modules', 'src/'],
+        moduleDirectory: ['node_modules', 'packages/charts/src/'],
       },
     },
     react: {
@@ -328,7 +328,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['src/**/*.{ts?(x),js}'],
+      files: ['packages/charts/src/**/*.{ts?(x),js}'],
       rules: {
         /*
          * Custom elastic-charts rules
@@ -349,27 +349,20 @@ module.exports = {
                 'error',
                 {
                   zones: [
-                    { target: './src', from: './src/index.ts' },
-                    { target: './src', from: './', except: ['./src', './node_modules/'] },
+                    { target: './packages/charts/src', from: './packages/charts/src/index.ts' },
+                    {
+                      target: './packages/charts/src',
+                      from: './',
+                      except: ['./packages/charts/src', 'node_modules'],
+                    },
                   ],
                 },
               ]
             : 0,
 
-        'import/no-internal-modules': [
-          'error',
-          {
-            allow: ['**/src/**'],
-          },
-        ],
         'no-underscore-dangle': 2,
         'import/no-unresolved': 'error',
-        'import/no-extraneous-dependencies': [
-          'error',
-          {
-            devDependencies: ['**/*.test.ts?(x)', 'src/mocks/**/*.ts?(x)'],
-          },
-        ],
+        'import/no-extraneous-dependencies': 2,
         'prefer-destructuring': [
           'warn',
           {
@@ -431,12 +424,15 @@ module.exports = {
       },
     },
     {
-      files: ['*.test.ts?(x)', '**/__mocks__/**/*.ts?(x)'],
+      files: ['*.test.ts?(x)', '**/__mocks__/**/*.ts?(x)', 'packages/charts/src/mocks/**'],
       rules: {
         'elastic-charts/require-release-tag': 0,
         'elastic-charts/require-tsdocs': 0,
         'elastic-charts/require-documentation': 0,
         'unicorn/error-message': 0,
+        // Cannot check extraneous deps in test files with this mono setup
+        // see https://github.com/benmosher/eslint-plugin-import/issues/1174
+        'import/no-extraneous-dependencies': 0,
       },
     },
     {

.github/pull_request_template.md

@@ -47,7 +47,7 @@
 - [ ] The proper chart type label was added (e.g. :xy, :partition) if the PR involves a specific chart type
 - [ ] The proper feature label was added (e.g. :interactions, :axis) if the PR involves a specific chart feature
 - [ ] Whenever possible, please check if the closing issue is connected to a running GH project
-- [ ] Any consumer-facing exports were added to `src/index.ts` (and stories only import from `../src` except for test data & storybook)
+- [ ] Any consumer-facing exports were added to `packages/charts/src/index.ts` (and stories only import from `../src` except for test data & storybook)
 - [ ] This was checked for cross-browser compatibility
 - [ ] Proper documentation or storybook story was added for features that require explanation or tutorials
 - [ ] Unit tests were updated or added to match the most common scenarios

.gitignore

@@ -1,14 +1,14 @@
 .idea
-node_modules/
+**/node_modules/
 test/spec/screenshots/baseline/**/*.png
 test/spec/screenshots/diff/**/*.png
 test/spec/screenshots/screen/**/*.png
 test/failure-screenshots/**/*.png
 
 reports/
-tmp/
+**/tmp/
 .temp/
-dist/
+**/dist/
 coverage/
 .out/
 .idea
@@ -18,6 +18,6 @@ coverage/
 .yo-rc.json
 npm-debug.log
 yarn-error.log
-./playground/playground.tsx
+playground/playground.tsx
 
 **/__diff_output__/

.prettierignore

@@ -4,6 +4,6 @@
 .idea/
 .vscode/
 .temp/
-dist/
+**/dist/
 coverage/
-tmp/
+**/tmp/

.releaserc.js

@@ -0,0 +1,36 @@
+const isDryRun = process.argv.includes('--dry-run');
+
+/**
+ * Semantic release is currently a 1:1 relationship between repo and package.
+ * This is fine for our use case as we currently only publish a single package.
+ * In the future if/when we publish more than one package we would need to switch
+ * to another similar release framework.
+ *
+ * see https://github.com/semantic-release/semantic-release/issues/193
+ */
+module.exports = {
+  plugins: [
+    '@semantic-release/commit-analyzer',
+    '@semantic-release/release-notes-generator',
+    '@semantic-release/changelog',
+    '@semantic-release/github',
+    [
+      '@semantic-release/npm',
+      {
+        // must point to the child package
+        pkgRoot: 'packages/charts',
+      },
+    ],
+    '@semantic-release/git',
+    ...(isDryRun
+      ? []
+      : [
+          'semantic-release-slack-bot',
+          {
+            notifyOnSuccess: true,
+            notifyOnFail: true,
+            markdownReleaseNotes: true,
+          },
+        ]),
+  ],
+};

CONTRIBUTING.md

@@ -62,7 +62,7 @@ This is an example that cover all cases:
 ```
 feat(brush): add multi axis brushing (#625)
 
-This commit allows the consumer to configure the direction used for the brush tool. The direction is, by default, along the X-axis, but can be changed to be along the Y-axis or have a rectangular selection along both axes. 
+This commit allows the consumer to configure the direction used for the brush tool. The direction is, by default, along the X-axis, but can be changed to be along the Y-axis or have a rectangular selection along both axes.
 For each Y-axis defined (usually determined by an associated `groupId`) we return a scaled set of `[min, max]` values.
 
 BREAKING CHANGE: The type used by the `BrushEndListener` is now in the following form `{ x?: [number, number]; }` where `x` contains an array of `[min, max]` values, and the  `y` property is an optional array of objects, containing the `GroupId` and the values of the brush for that specific axis.
@@ -116,39 +116,40 @@ This will automatically generate a pr to merge into the target branch. Once the
 
 > Note: The version will __ONLY__ be published from branches following the [maintenance branch convention](https://github.com/semantic-release/semantic-release/blob/0785a844fa8ac1320383452ce531898be3b01f92/docs/recipes/maintenance-releases.md#publishing-maintenance-releases)
 
-## Linking to Application
+## Linking to Kibana
 
-There are two ways to "link" a local version of `@elastic/charts` to your application. The following examples have steps that are kibana-specific denoted with ☈.
+To link `@elastic/charts` to kibana we need to perform a few workarounds. Fortunately, this is done automatically by a custom built linking scripts.
 
-### Package library and install in app
+### Linking
 
-Easy but time-consuming in terms of repeated runs.
-1. Run `npm pack` from `@elastic/charts` root to package the library into a gzip file
-1. Locate the full path the the gzip file, typically at the same level of the target library `package.json`
-1. Run `yarn add <PATH_TO_GZIP>` from Kibana. This will install `@elastic/charts` using that version not the one from the package.json.
+In order to create link run...
 
-Notice that you would need to repeat all these steps for any changes in charts to be reflected in Kibana.
+```
+yarn link:kibana
+```
+
+This will prompt you for the following inputs:
 
-> If running repeated runs and you notice changes not being updated after a new install you _may_ need to increment the `@elastic/charts` version for kibana/npm/??? to pick up the changes. This should NOT be commited.
+- Select the `Link` action
+- Select the path to kibana (default: `../kibana`)
+- Confirm kibana is running
 
-#### Uninstalling
-1. Reset changes to `package.json`.
-1. Run `yarn kbn bootstrap` ☈. Or `yarn install --force`
+The reset is handled automatically! If any errors occur in the build method, they will be surfaced in the terminal and pause the build process until corrected.
 
-### Symlink the library and build in watch mode
+If you encounter and issue or close the watch mode following the linking process, you can run the script is watch mode. Do so by running...
 
-The second is a little trickier but the preferred option, especially for debugging.
+```
+yarn link:kibana
+```
 
-1. Run `yarn build:watch` from `@elastic/charts`. This builds the scss and other files and then will _watch_ for changes in typescript files and recompile. If you don't run watch and try to rebuild after each change the link _may_ break.
-1. ☈ In Kibana there is a package called [`@kbn/ui-shared-deps`](https://github.com/elastic/kibana/tree/master/packages/kbn-ui-shared-deps) that optimizes importing shared modules. This causes a _lot_ of complications when linking. The easiest way to fix this is to just remove any and all references of `@elastic/charts` in this directory and then run `yarn kbn bootstrap`.
-1. Run `yarn link @elastic/charts` in Kibana.
-1. If you application uses react hooks, you must link your application react module to `@elastic/charts`. The issue with react hooks is that react requires there only be a single instance of react. This should be solved in your app at build time using yarn [resolutions](https://classic.yarnpkg.com/en/docs/selective-version-resolutions/) to resolve any differing version in the dependency tree to a single version of react. But when symlinking the local `@elastic/charts`, `@elastic/charts` is still using `@elastic/charts/node_modules/react` and not `<PATH_TO_APP>/node_modules/react`. To fix this you need to run `npm link <PATH_TO_APP>/node_modules/react` from `@elastic/charts`. Now elastic-charts and kibana will be using the same instance of react.
-1. At this point you can make changes to `@elastic/charts` wait for the new hash to complete and refresh the application to see the changes, it does _not_ hot reload.
+- Select the `Watch mode` action
 
-#### Unlinking
+### Unlinking
+
+In order to remove the link and restore kibana to state prior to linking, run...
+
+```
+yarn link:kibana
+```
 
-1. Remove react symlink by running `npm unlink <PATH_TO_APP>/node_modules/react` from `@elastic/charts`.
-1. Run `yarn unlink @elastic/charts` in Kibana.
-1. ☈ Restore changes to [`@kbn/ui-shared-deps`](https://github.com/elastic/kibana/tree/master/packages/kbn-ui-shared-deps)
-1. For good measure, delete `@elastic/charts` in kibana `node_modules`. Run `rm -fr <PATH_TO_APP>/node_modules/@elastic/charts`.
-1. Run `yarn kbn bootstrap` ☈. Or `yarn install --force`
+- Select the `Unlink` action

docs/0-Intro/0-Intro.mdx

@@ -2,14 +2,14 @@ import { Meta, Story } from "@storybook/addon-docs/blocks";
 
 <Meta title="Introduction/Intro and Consuming Elastic Charts" />
 
-# Introduction 
-This storybook is comprised of the main charts within [Elastic Charts](https://github.com/elastic/elastic-charts). 
+# Introduction
+This storybook is comprised of the main charts within [Elastic Charts](https://github.com/elastic/elastic-charts).
 You can see the stories used for visual regression testing [here](https://elastic.github.io/elastic-charts).
 
 
 This storybook is intended to be useful for a consumer of the Elastic Charts library.
 
-The components within elastic charts are divided in the `src/chart_types` directory. Currently, bars, lines, and area charts are in the `xy_chart` directory while `partition_chart` contains sunbursts (including pie charts and donut charts) and treemaps.
+The components within elastic charts are divided in the `packages/charts/src/chart_types` directory. Currently, bars, lines, and area charts are in the `xy_chart` directory while `partition_chart` contains sunbursts (including pie charts and donut charts) and treemaps.
 
 You can import Chart components from the top-level Elastic Chart module.
 

docs/0-Intro/1-Overview.mdx

@@ -1,7 +1,7 @@
-import { Chart, Datum, Partition, PartitionLayout, Settings } from '../../src';
-import { mocks } from '../../src/mocks/hierarchical/index';
-import { config } from '../../src/chart_types/partition_chart/layout/config/config';
-import { ShapeTreeNode } from '../../src/chart_types/partition_chart/layout/types/viewmodel_types';
+import { Chart, Datum, Partition, PartitionLayout, Settings } from '../../packages/charts/src';
+import { mocks } from '../../packages/charts/src/mocks/hierarchical/index';
+import { config } from '../../packages/charts/src/chart_types/partition_chart/layout/config';
+import { ShapeTreeNode } from '../../packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types';
 import {
   categoricalFillColor,
   colorBrewerCategoricalStark9,

docs/1-Typesofchart/0-Bar.mdx

@@ -11,8 +11,8 @@ import {
   Position,
   timeFormatter,
   niceTimeFormatByDay,
-} from '../../src';
-import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana';
+} from '../../packages/charts/src';
+import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
 import BarSeriesPropsTable from '../2-ChartPropTables/9-BarProps.md';
 import BarWAxisPropsTable from '../2-ChartPropTables/10-BarWAxisProps.md';
 
@@ -71,9 +71,9 @@ Bar charts provide a visual presentation of categorical data. Categorical data i
 Additonal prop tables for the following bar charts can be found in `Chart References > Prop Tables`
 ***
 
-# Bar Chart with Axes 
+# Bar Chart with Axes
 
-This chart now includes x and y axes. These axes can be `linear`, `ordinal` or `time`. 
+This chart now includes x and y axes. These axes can be `linear`, `ordinal` or `time`.
 
 <Chart className={'story-chart'}>
     <Settings theme={LIGHT_THEME} />
@@ -158,7 +158,7 @@ And below is an example of an `ordinal` x axis bar chart
     />
 </Chart>
 
-<details> 
+<details>
 
 ```js
 

docs/1-Typesofchart/1-Area.mdx

@@ -10,13 +10,13 @@ import {
   ScaleType,
   Settings,
   timeFormatter,
-} from '../../src';
-import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana';
+} from '../../packages/charts/src';
+import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
 
 <Meta title="Types of charts/Area Charts/Basic and with axes" />
 
 # Basic Area Chart
-Below is a very basic area chart from Elastic Charts. An Area Chart (or area graph) is basically a line graph with the area below the lined filled with colors or textures. 
+Below is a very basic area chart from Elastic Charts. An Area Chart (or area graph) is basically a line graph with the area below the lined filled with colors or textures.
 Like line graphs area charts are used to represent the development of quantitative values over a time period. It can also be used to compare two or more categories and is similar to the Stacked Area Chart.
 
 Area charts often used to show overall trends over time rather than specific values.
@@ -34,11 +34,11 @@ Area charts often used to show overall trends over time rather than specific val
   />
 </Chart>
 
-*** 
+***
 
-The code snippet for the area chart above is found in the details section below.  
+The code snippet for the area chart above is found in the details section below.
 
-<details> 
+<details>
 
 ```js
 <Chart className={'story-chart'}>
@@ -118,5 +118,5 @@ To only have an area chart without axes, do not include the `<Axis/>` components
 </details>
 
 ***
-There is a stacked area chart in the `Stacked Charts` section if you are interested. 
-Prop tables can be found in `Chart References > Prop Tables`
+There is a stacked area chart in the `Stacked Charts` section if you are interested.
+Prop tables can be found in `Chart References > Prop Tables`