build: upgrade to storybook 6.3 and convert to workspace

.eslintrc.js

@@ -118,13 +118,7 @@ module.exports = {
     'implicit-arrow-linebreak': 0,
     'function-call-argument-newline': ['error', 'consistent'],
     'array-bracket-newline': ['error', 'consistent'],
-    'array-element-newline': [
-      'error',
-      {
-        ArrayExpression: 'consistent',
-        ArrayPattern: 'consistent',
-      },
-    ],
+    'array-element-newline': 0,
     'object-curly-newline': [
       'error',
       {
@@ -208,7 +202,20 @@ module.exports = {
       'error',
       {
         'newlines-between': 'always',
-        groups: ['builtin', 'external', ['parent', 'sibling', 'index', 'internal']],
+        groups: ['builtin', 'external', 'unknown', ['parent', 'sibling', 'index', 'internal']],
+
+        // seperates internal published packages from external packages
+        pathGroups: [
+          {
+            pattern: '@elastic/charts',
+            group: 'unknown',
+          },
+          {
+            pattern: '@elastic/charts/**',
+            group: 'unknown',
+          },
+        ],
+        pathGroupsExcludedImportTypes: ['builtin'],
         alphabetize: { order: 'asc', caseInsensitive: true }, // todo replace with directory gradient ordering
       },
     ],

docs/0-Intro/0-Intro.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/addon-docs/blocks";
+import { Meta, Story } from "@storybook/addon-docs";
 
 <Meta title="Introduction/Intro and Consuming Elastic Charts" />
 

docs/0-Intro/1-Overview.mdx

@@ -1,9 +1,9 @@
-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 { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts';
+import { mocks } from '@elastic/charts/src/mocks/hierarchical/index';
+import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
+import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types';
 import {
-  categoricalFillColor,
+  discreteColor,
   colorBrewerCategoricalStark9,
   countryLookup,
   indexInterpolatedFillColor,
@@ -12,7 +12,7 @@ import {
   productLookup,
   regionLookup,
 } from '../../stories/utils/utils';
-import { Meta, Story } from "@storybook/addon-docs/blocks";
+import { Meta, Story } from "@storybook/addon-docs";
 
 <Meta title="Introduction/Elastic Charts Overview" />
 
@@ -281,7 +281,7 @@ config: {
 `textInvertible` will have to be set to true for `textContrast` to be set as well. To see an example of where this applies, please see the Partitions Background story within Stylings. Charts are included below but are static.
 If you have `textInvertible` set to true, but do not have `textContrast` set to true, then the red slices, Europe, North America, and Asia, will have white text:
 
-<Chart className="story-chart">
+<Chart>
   <Settings theme={{background : {color: `rgba(155, 155, 155, 1)`}}} />
   <Partition
     id="spec_1"
@@ -294,7 +294,7 @@ If you have `textInvertible` set to true, but do not have `textContrast` set to
         nodeLabel: (d) => productLookup[d].name,
         shape: {
           fillColor: (d) => {
-            return categoricalFillColor(colorBrewerCategoricalStark9, 0.7)(d.sortIndex);
+            return discreteColor(colorBrewerCategoricalStark9, 0.7)(d.sortIndex);
           },
         },
       },
@@ -303,7 +303,7 @@ If you have `textInvertible` set to true, but do not have `textContrast` set to
         nodeLabel: (d) => regionLookup[d].regionName,
         shape: {
           fillColor: (d) => {
-            return categoricalFillColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
+            return discreteColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
           },
         },
       },
@@ -312,7 +312,7 @@ If you have `textInvertible` set to true, but do not have `textContrast` set to
         nodeLabel: (d) => countryLookup[d].name,
         shape: {
           fillColor: (d) => {
-            return categoricalFillColor(colorBrewerCategoricalStark9, 0.3)(d[MODEL_KEY].parent.sortIndex);
+            return discreteColor(colorBrewerCategoricalStark9, 0.3)(d[MODEL_KEY].parent.sortIndex);
           },
         },
       },
@@ -351,7 +351,7 @@ If you have `textInvertible` set to true, but do not have `textContrast` set to
 
 Now if you set the `textContrast` to true as well, these slices also become black in text color:
 
-<Chart className="story-chart">
+<Chart>
   <Settings theme={{background : {color: `rgba(155, 155, 155, 1)`}}} />
   <Partition
     id="spec_1"
@@ -364,7 +364,7 @@ Now if you set the `textContrast` to true as well, these slices also become blac
         nodeLabel: (d) => productLookup[d].name,
         shape: {
           fillColor: (d) => {
-            return categoricalFillColor(colorBrewerCategoricalStark9, 0.7)(d.sortIndex);
+            return discreteColor(colorBrewerCategoricalStark9, 0.7)(d.sortIndex);
           },
         },
       },
@@ -373,7 +373,7 @@ Now if you set the `textContrast` to true as well, these slices also become blac
         nodeLabel: (d) => regionLookup[d].regionName,
         shape: {
           fillColor: (d) => {
-            return categoricalFillColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
+            return discreteColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
           },
         },
       },
@@ -382,7 +382,7 @@ Now if you set the `textContrast` to true as well, these slices also become blac
         nodeLabel: (d) => countryLookup[d].name,
         shape: {
           fillColor: (d) => {
-            return categoricalFillColor(colorBrewerCategoricalStark9, 0.3)(d[MODEL_KEY].parent.sortIndex);
+            return discreteColor(colorBrewerCategoricalStark9, 0.3)(d[MODEL_KEY].parent.sortIndex);
           },
         },
       },

docs/1-Typesofchart/0-Bar.mdx

@@ -1,4 +1,4 @@
-import { Meta, Description, Story, Preview } from "@storybook/addon-docs/blocks";
+import { Meta, Description, Story, Preview } from "@storybook/addon-docs";
 import { boolean, color, number, select } from '@storybook/addon-knobs';
 import {
   Chart,
@@ -11,8 +11,8 @@ import {
   Position,
   timeFormatter,
   niceTimeFormatByDay,
-} from '../../packages/charts/src';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+} from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 import BarSeriesPropsTable from '../2-ChartPropTables/9-BarProps.md';
 import BarWAxisPropsTable from '../2-ChartPropTables/10-BarWAxisProps.md';
 
@@ -22,7 +22,7 @@ import BarWAxisPropsTable from '../2-ChartPropTables/10-BarWAxisProps.md';
 
 [source](https://datavizproject.com/data-type/bar-chart/)
 
-<Chart className={'story-chart'}>
+<Chart>
     <BarSeries
     id={'bars1'}
     name={'Simple bar series'}
@@ -46,7 +46,7 @@ Below is a very basic bar chart from Elastic Charts. A bar chart is a chart with
 Bar charts provide a visual presentation of categorical data. Categorical data is a grouping of data into discrete groups, such as months of the year, age group, shoe sizes, and animals. These categories are usually qualitative. Bars on the chart may be arranged in any order.
 
 ``` js
-<Chart className={'story-chart'}>
+<Chart>
     <BarSeries
     id={'bars1'}
     name={'Simple bar series'}
@@ -75,7 +75,7 @@ Additonal prop tables for the following bar charts can be found in `Chart Refere
 
 This chart now includes x and y axes. These axes can be `linear`, `ordinal` or `time`.
 
-<Chart className={'story-chart'}>
+<Chart>
     <Settings theme={LIGHT_THEME} />
     <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
     <Axis
@@ -105,7 +105,7 @@ This chart now includes x and y axes. These axes can be `linear`, `ordinal` or `
 <details>
 
 ```js
-<Chart className={'story-chart'}>
+<Chart>
     <Settings theme={LIGHT_THEME} />
     <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
     <Axis
@@ -135,7 +135,7 @@ This chart now includes x and y axes. These axes can be `linear`, `ordinal` or `
 
 And below is an example of an `ordinal` x axis bar chart
 
-<Chart className={'story-chart'}>
+<Chart>
     <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
     <Axis
     id={'left2'}
@@ -162,7 +162,7 @@ And below is an example of an `ordinal` x axis bar chart
 
 ```js
 
-<Chart className={'story-chart'}>
+<Chart>
     <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
     <Axis
     id={'left2'}
@@ -190,7 +190,7 @@ And below is an example of an `ordinal` x axis bar chart
 </details>
 
 Here is an example of a `time` x axis
-<Chart className={'story-chart'}>
+<Chart>
     <Settings debug={boolean('debug', false)} />
     <Axis
         id={'bottom'}
@@ -219,7 +219,7 @@ Here is an example of a `time` x axis
 <details>
 
 ```js
-<Chart className={'story-chart'}>
+<Chart>
     <Settings debug={boolean('debug', false)} />
     <Axis
         id={'bottom'}

docs/1-Typesofchart/1-Area.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/addon-docs/blocks";
+import { Meta, Story } from "@storybook/addon-docs";
 import {
   AreaSeries,
   Axis,
@@ -10,8 +10,8 @@ import {
   ScaleType,
   Settings,
   timeFormatter,
-} from '../../packages/charts/src';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+} from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 <Meta title="Types of charts/Area Charts/Basic and with axes" />
 
@@ -23,7 +23,7 @@ Area charts often used to show overall trends over time rather than specific val
 
 [source](https://datavizproject.com/data-type/area-chart/)
 
-<Chart className={'story-chart'}>
+<Chart>
   <AreaSeries
     id={'areas1'}
     xScaleType={ScaleType.Time}
@@ -41,7 +41,7 @@ The code snippet for the area chart above is found in the details section below.
 <details>
 
 ```js
-<Chart className={'story-chart'}>
+<Chart>
   <AreaSeries
     id={'areas1'}
     xScaleType={ScaleType.Time}
@@ -56,7 +56,7 @@ The code snippet for the area chart above is found in the details section below.
 
 Here is the same chart including axes
 
-<Chart className={'story-chart'}>
+<Chart>
   <Axis
     id={'bottom'}
     title={'timestamp per 1 minute'}
@@ -91,7 +91,7 @@ To only have an area chart without axes, do not include the `<Axis/>` components
 <details>
 
 ```js
-<Chart className={'story-chart'}>
+<Chart>
   <Axis
     id={'bottom'}
     title={'timestamp per 1 minute'}

docs/1-Typesofchart/2-Line.mdx

@@ -9,9 +9,9 @@ import {
   ScaleType,
   Settings,
   timeFormatter,
-} from '../../packages/charts/src';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
-import { TSVB_DATASET } from '../../packages/charts/src/utils/data_samples/test_dataset_tsvb';
+} from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+import { TSVB_DATASET } from '@elastic/charts/src/utils/data_samples/test_dataset_tsvb';
 
 <Meta title="Types of charts/Line Charts/Basic and with axes" />
 
@@ -23,7 +23,7 @@ A line chart is similar to the spline graph, but the spline graph draws a curved
 
 [source](https://datavizproject.com/data-type/line-chart/)
 
-<Chart className={'story-chart'}>
+<Chart>
     <LineSeries
     id={'lines1'}
     xScaleType={ScaleType.Time}
@@ -40,7 +40,7 @@ The data is generated from kibana metrics data
 <details>
 
 ```js
-<Chart className={'story-chart'}>
+<Chart>
     <LineSeries
     id={'lines1'}
     xScaleType={ScaleType.Time}
@@ -55,7 +55,7 @@ The data is generated from kibana metrics data
 
 Here is a `linear x axis` line chart
 
-<Chart className={'story-chart'}>
+<Chart>
     <Axis
     id={'bottom'}
     position={Position.Bottom}
@@ -89,7 +89,7 @@ Notice how the `<Axis position={Position.Left}/>` includes a tickFormat prop to
 <details>
 
 ```js
-<Chart className={'story-chart'}>
+<Chart>
 
     <Axis
     id={'bottom'}