feat(preset-chart-xy): migrate from plugins repo (#377)

* chore: move chart-xy and word-cloud

* fix: babel settings

* fix: remove file

* docs: update storybook code

* docs: word cloud storybook working

* chore: move files back

* fix: ts issues

* fix: import path

* fix: all storybook thingy

* fix: add query storybook back

* fix: address comments

* fix: sorting

.gitignore

@@ -39,7 +39,6 @@ test-changelog.md
 .eslintrc.js
 .flowconfig
 .prettierignore
-babel.config.js
 jest.config.js
 prettier.config.js
 tsconfig.eslint.json

babel.config.js

@@ -0,0 +1,24 @@
+// eslint-disable-next-line no-undef, import/no-extraneous-dependencies
+const { getConfig } = require('@airbnb/config-babel');
+
+const config = getConfig({
+  library: true,
+  react: true,
+  next: true,
+  node: process.env.NODE_ENV === 'test',
+  typescript: true,
+  env: {
+    targets: false,
+  },
+});
+
+if (process.env.NODE_ENV !== 'test') {
+  config.presets[0][1].modules = false;
+}
+
+// Override to allow transpile es modules inside vega-lite
+config.ignore = config.ignore.filter(item => item !== 'node_modules/');
+config.ignore.push('node_modules/(?!(vega-lite|lodash-es))');
+
+// eslint-disable-next-line no-undef
+module.exports = config;

package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "build": "yarn babel && yarn type && yarn build:assets",
     "babel": "yarn babel:cjs && yarn babel:esm",
-    "babel:cjs": "nimbus babel --clean --workspaces=\"@superset-ui/!(demo|generator-superset)\"",
-    "babel:esm": "nimbus babel --clean --workspaces=\"@superset-ui/!(demo|generator-superset)\" --esm",
+    "babel:cjs": "nimbus babel --clean --workspaces=\"@superset-ui/!(demo|generator-superset)\" --config-file=../../babel.config.js",
+    "babel:esm": "nimbus babel --clean --workspaces=\"@superset-ui/!(demo|generator-superset)\" --esm --config-file=../../babel.config.js",
     "build:assets": "node ./scripts/buildAssets.js",
     "demo": "cd packages/superset-ui-demo && yarn demo:build",
     "demo:clean": "cd packages/superset-ui-demo && yarn demo:clean",
@@ -94,7 +94,7 @@
   ],
   "nimbus": {
     "drivers": [
-      "babel",
+      { "driver": "babel", "strategy": "none" },
       "eslint",
       "jest",
       "prettier",
@@ -114,10 +114,10 @@
       },
       "coverageThreshold": {
         "global": {
-          "branches": 25,
-          "functions": 25,
-          "lines": 25,
-          "statements": 25
+          "branches": 5,
+          "functions": 5,
+          "lines": 5,
+          "statements": 5
         }
       },
       "moduleNameMapper": {
@@ -128,6 +128,9 @@
       "setupFilesAfterEnv": [
         "@airbnb/config-jest/enzyme"
       ],
+      "transformIgnorePatterns": [
+        "node_modules/(?!(vega-lite|lodash-es))"
+      ],
       "testPathIgnorePatterns": [
         "packages/generator-superset/generators"
       ],

packages/superset-ui-demo/.storybook/preview.js

@@ -28,7 +28,16 @@ addParameters({
     sortStoriesByKind: false,
     url: '#',
     storySort: (a, b) => {
-      return a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
+      if (a[1].kind === b[1].kind ) {
+        return 0;
+      }
+      if (a[1].id.startsWith('core-packages') && !b[1].id.startsWith('core-packages')) {
+        return -1;
+      }
+      if (!a[1].id.startsWith('core-packages') && b[1].id.startsWith('core-packages')) {
+        return 1;
+      }
+      return a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
     },
   },
 });

packages/superset-ui-demo/storybook/shared/components/createQueryStory.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { text, select } from '@storybook/addon-knobs';
+import { SuperChart, ChartDataProvider } from '@superset-ui/chart';
+import { SupersetClient } from '@superset-ui/connection';
+import Expandable from './Expandable';
+import VerifyCORS, { renderError } from './VerifyCORS';
+
+export default function createQueryStory({
+  choices,
+}: {
+  choices: {
+    [key: string]: {
+      chartType: string;
+      formData: {
+        [key: string]: any;
+      };
+    };
+  };
+}) {
+  const keys = Object.keys(choices);
+
+  return () => {
+    const host = text('Set Superset App host for CORS request', 'localhost:8088');
+    const mode = select('Choose mode:', keys, keys[0]);
+    const { formData: presetFormData, chartType } = choices[mode];
+    const width = text('Vis width', '400');
+    const height = text('Vis height', '400');
+    const formData = text('Override formData', JSON.stringify(presetFormData, null, 2));
+
+    return (
+      <div style={{ margin: 16 }}>
+        <VerifyCORS host={host}>
+          {() => (
+            <ChartDataProvider
+              client={SupersetClient}
+              formData={JSON.parse(formData.replace(/&quot;/g, '"'))}
+            >
+              {({ loading, payload, error }) => {
+                if (loading) return <div>Loading!</div>;
+
+                if (error) return renderError(error);
+
+                if (payload)
+                  return (
+                    <>
+                      <SuperChart
+                        chartType={chartType}
+                        width={width}
+                        height={height}
+                        formData={payload.formData}
+                        // @TODO fix typing
+                        // all vis's now expect objects but api/v1/ returns an array
+                        queryData={
+                          Array.isArray(payload.queryData)
+                            ? payload.queryData[0]
+                            : payload.queryData
+                        }
+                      />
+                      <br />
+                      <Expandable expandableWhat="payload">
+                        <pre style={{ fontSize: 11 }}>{JSON.stringify(payload, null, 2)}</pre>
+                      </Expandable>
+                    </>
+                  );
+
+                return null;
+              }}
+            </ChartDataProvider>
+          )}
+        </VerifyCORS>
+      </div>
+    );
+  };
+}

packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-word-cloud/Stories.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import { select, withKnobs } from '@storybook/addon-knobs';
+import WordCloudChartPlugin from '@superset-ui/plugin-chart-word-cloud';
+import LegacyWordCloudChartPlugin from '@superset-ui/plugin-chart-word-cloud/esm/legacy';
+import data from './data';
+
+new WordCloudChartPlugin().configure({ key: 'word-cloud2' }).register();
+new LegacyWordCloudChartPlugin().configure({ key: 'legacy-word-cloud2' }).register();
+
+export default {
+  title: 'Chart Plugins|plugin-chart-word-cloud',
+  decorators: [withKnobs],
+};
+
+export const basic = () => (
+  <SuperChart
+    chartType="word-cloud2"
+    width={400}
+    height={400}
+    queryData={{ data }}
+    formData={{
+      encoding: {
+        color: {
+          value: '#0097e6',
+        },
+        fontSize: {
+          field: 'sum__num',
+          scale: {
+            range: [0, 70],
+            zero: true,
+          },
+          type: 'quantitative',
+        },
+        text: {
+          field: 'name',
+        },
+      },
+      metric: 'sum__num',
+      rotation: select('Rotation', ['square', 'flat', 'random'], 'flat'),
+      series: 'name',
+    }}
+  />
+);
+
+export const encodesColorByWordLength = () => (
+  <SuperChart
+    chartType="word-cloud2"
+    width={400}
+    height={400}
+    queryData={{ data }}
+    formData={{
+      encoding: {
+        color: {
+          field: 'name.length',
+          scale: {
+            range: ['#fbc531', '#c23616'],
+            type: 'linear',
+            zero: false,
+          },
+          type: 'quantitative',
+        },
+        fontSize: {
+          field: 'sum__num',
+          scale: {
+            range: [0, 70],
+            zero: true,
+          },
+          type: 'quantitative',
+        },
+        text: {
+          field: 'name',
+        },
+      },
+      metric: 'sum__num',
+      rotation: select('Rotation', ['square', 'flat', 'random'], 'flat'),
+      series: 'name',
+    }}
+  />
+);
+
+export const encodesFontByFirstLetter = () => (
+  <SuperChart
+    chartType="word-cloud2"
+    width={400}
+    height={400}
+    queryData={{ data }}
+    formData={{
+      encoding: {
+        color: {
+          value: '#8c7ae6',
+        },
+        fontFamily: {
+          field: 'name[0]',
+          scale: {
+            range: ['Helvetica', 'Monaco'],
+            type: 'ordinal',
+          },
+          type: 'nominal',
+        },
+        fontSize: {
+          field: 'sum__num',
+          scale: {
+            range: [0, 70],
+            zero: true,
+          },
+          type: 'quantitative',
+        },
+        text: {
+          field: 'name',
+        },
+      },
+      metric: 'sum__num',
+      rotation: select('Rotation', ['square', 'flat', 'random'], 'flat'),
+      series: 'name',
+    }}
+  />
+);
+
+export const legacyShim = () => (
+  <SuperChart
+    chartType="legacy-word-cloud2"
+    width={400}
+    height={400}
+    queryData={{ data }}
+    formData={{
+      colorScheme: 'd3Category10',
+      metric: 'sum__num',
+      rotation: select('Rotation', ['square', 'flat', 'random'], 'flat'),
+      series: 'name',
+      sizeFrom: '10',
+      sizeTo: '70',
+    }}
+  />
+);

temporary-plugins/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/index.ts → packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/BoxPlot/Stories.tsx

@@ -1,14 +1,11 @@
-import {
-  BoxPlotChartPlugin,
-  LegacyBoxPlotChartPlugin,
-} from '../../../../../superset-ui-preset-chart-xy';
-import Stories from './stories/Basic';
-import LegacyStories from './stories/Legacy';
+import { BoxPlotChartPlugin, LegacyBoxPlotChartPlugin } from '@superset-ui/preset-chart-xy';
 import { BOX_PLOT_PLUGIN_LEGACY_TYPE, BOX_PLOT_PLUGIN_TYPE } from './constants';
-
 new LegacyBoxPlotChartPlugin().configure({ key: BOX_PLOT_PLUGIN_LEGACY_TYPE }).register();
 new BoxPlotChartPlugin().configure({ key: BOX_PLOT_PLUGIN_TYPE }).register();
 
 export default {
-  examples: [...Stories, ...LegacyStories],
+  title: 'Chart Plugins|preset-chart-xy/BoxPlot',
 };
+
+export { basic, horizontal } from './stories/Basic';
+export { legacy } from './stories/Legacy';