feat: add typescript declaration for external packages (#12)

* feat: add declaration for external packages

* feat: add dependency

* fix: address comments

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/package.json

@@ -36,6 +36,7 @@
     "@vx/scale": "^0.0.182",
     "@vx/shape": "^0.0.184",
     "d3-array": "^2.0.3",
+    "d3-scale": "^2.2.2",
     "prop-types": "^15.6.2"
   },
   "peerDependencies": {

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/types/@data-ui/theme/index.d.ts

@@ -0,0 +1,110 @@
+declare module '@data-ui/theme' {
+  type SvgLabelTextStyle = {
+    fontFamily: string;
+    fontSize: number;
+    fontWeight: number;
+    letterSpacing: number;
+    fill: string;
+    stroke: string;
+    textAnchor?:
+      | '-moz-initial'
+      | 'inherit'
+      | 'initial'
+      | 'revert'
+      | 'unset'
+      | 'end'
+      | 'start'
+      | 'middle';
+    pointerEvents?:
+      | '-moz-initial'
+      | 'inherit'
+      | 'initial'
+      | 'revert'
+      | 'unset'
+      | 'auto'
+      | 'none'
+      | 'visible'
+      | 'all'
+      | 'fill'
+      | 'stroke'
+      | 'painted'
+      | 'visibleFill'
+      | 'visiblePainted'
+      | 'visibleStroke';
+  };
+
+  export interface ChartTheme {
+    colors: {
+      default: string;
+      dark: string;
+      light: string;
+      disabled: string;
+      lightDisabled: string;
+      text: string;
+      black: string;
+      darkGray: string;
+      lightGray: string;
+      grid: string;
+      gridDark: string;
+      label: string;
+      tickLabel: string;
+      grays: string[];
+      categories: string[];
+    };
+    labelStyles: SvgLabelTextStyle & {
+      color: string;
+      lineHeight: string;
+      paddingBottom: number;
+      paddingTop: number;
+    };
+    gridStyles: {
+      stroke: string;
+      strokeWidth: number;
+    };
+    xAxisStyles: {
+      stroke: string;
+      strokeWidth: number;
+      label: {
+        bottom: SvgLabelTextStyle;
+        top: SvgLabelTextStyle;
+      };
+    };
+    xTickStyles: {
+      stroke: string;
+      length: number;
+      label: {
+        bottom: SvgLabelTextStyle & {
+          dy: string;
+        };
+        top: SvgLabelTextStyle & {
+          dy: string;
+        };
+      };
+    };
+    yAxisStyles: {
+      stroke: string;
+      strokeWidth: number;
+      label: {
+        left: SvgLabelTextStyle;
+        right: SvgLabelTextStyle;
+      };
+    };
+    yTickStyles: {
+      stroke: string;
+      length: number;
+      label: {
+        left: SvgLabelTextStyle & {
+          dx: string;
+          dy: string;
+        };
+        right: SvgLabelTextStyle & {
+          dx: string;
+          dy: string;
+        };
+      };
+    };
+  }
+
+  // eslint-disable-next-line import/prefer-default-export
+  export const chartTheme: ChartTheme;
+}

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/types/@data-ui/xy-chart/esm/utils/collectScalesFromProps.d.ts

@@ -0,0 +1,34 @@
+
+declare module '@data-ui/xy-chart/esm/utils/collectScalesFromProps' {
+  import { ScaleLinear, ScaleBand, ScaleContinuousNumeric, ScaleDiverging, ScaleIdentity, ScaleLogarithmic, ScaleOrdinal, ScalePoint, ScalePower, ScaleQuantile, ScaleQuantize, ScaleSequential, ScaleThreshold, ScaleTime } from "d3-scale";
+  import React from "react";
+  import { ChartTheme } from "@data-ui/theme";
+
+  interface ScaleConfig {
+    [key: string]: any;
+  }
+
+  interface Scale {
+    domain(): any[];
+    ticks(count?: number): number[];
+    tickFormat(count?: number, specifier?: string): ((d: number | { valueOf(): number }) => string);
+  }
+
+  export default function collectScalesFromProps(props: {
+    width: number;
+    height: number;
+    margin: {
+      top: number;
+      left: number;
+      bottom: number;
+      right: number;
+    },
+    xScale: ScaleConfig,
+    yScale: ScaleConfig,
+    theme: ChartTheme,
+    children: React.ReactElement[],
+  }): {
+    xScale: Scale;
+    yScale: Scale;
+  };
+}

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/types/@data-ui/xy-chart/index.d.ts

@@ -0,0 +1,34 @@
+/* eslint-disable react/no-multi-comp */
+declare module '@data-ui/xy-chart' {
+  import React from 'react';
+
+  type Props = {
+    [key: string]: any;
+  };
+
+  interface XYChartProps {
+    theme: any;
+    width: number;
+    height: number;
+    margin?: {
+      top?: number;
+      right?: number;
+      bottom?: number;
+      left?: number;
+    };
+    ariaLabel: string;
+    xScale: any;
+    yScale: any;
+    renderTooltip: any;
+    eventTrigger?: any;
+  }
+
+  export class AreaSeries extends React.PureComponent<Props, {}> {}
+  export class CrossHair extends React.PureComponent<Props, {}> {}
+  export class LinearGradient extends React.PureComponent<Props, {}> {}
+  export class LineSeries extends React.PureComponent<Props, {}> {}
+  export class WithTooltip extends React.PureComponent<Props, {}> {}
+  export class XYChart extends React.PureComponent<XYChartProps, {}> {}
+  export class XAxis extends React.PureComponent<Props, {}> {}
+  export class YAxis extends React.PureComponent<Props, {}> {}
+}

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/types/@vx/legend/index.d.ts

@@ -0,0 +1,16 @@
+/* eslint-disable react/no-multi-comp */
+declare module '@vx/legend' {
+  import React from 'react';
+
+  export function LegendOrdinal(props: { [key: string]: any }): React.ReactNode;
+
+  export function LegendItem(props: { [key: string]: any }): React.ReactNode;
+
+  export function LegendLabel(props: {
+    align: string;
+    label?: React.ReactNode;
+    flex?: string | number;
+    margin?: string | number;
+    children?: React.ReactNode;
+  }): React.ReactNode;
+}

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/types/@vx/responsive/index.d.ts

@@ -0,0 +1,10 @@
+declare module '@vx/responsive' {
+  import React from 'react';
+
+  // eslint-disable-next-line import/prefer-default-export
+  interface ParentSizeProps {
+    children: (renderProps: { width: number; height: number }) => React.ReactNode;
+  }
+
+  const ParentSize: React.ComponentType<ParentSizeProps>;
+}

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/types/@vx/scale/index.d.ts

@@ -0,0 +1,9 @@
+declare module '@vx/scale' {
+  import { ScaleOrdinal } from 'd3-scale';
+
+  // eslint-disable-next-line import/prefer-default-export
+  export function scaleOrdinal<Domain = string, Range = string>(input: {
+    domain: Domain[];
+    range: Range[];
+  }): ScaleOrdinal<Domain, Range>;
+}

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/types/external.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: any;
+  export default value;
+}