Merge pull request #338 from veloek/highstock_types

Add typescript definitions for react-jsx-highstock

Author: anajavi

packages/react-jsx-highstock/package-lock.json

@@ -4,10 +4,12 @@
   "description": "Highcharts (including Highstock) charts built using React components",
   "main": "dist/react-jsx-highstock.min.js",
   "module": "dist/es/index.js",
+  "types": "types/index.d.ts",
   "sideEffects": false,
   "files": [
     "dist",
-    "src"
+    "src",
+    "types"
   ],
   "scripts": {
     "build": "cross-env NODE_ENV=development webpack",
@@ -18,7 +20,8 @@
     "format": "prettier --write \"src/**/*.js\" \"test/**/*.js\" README.md",
     "lint": "eslint src",
     "test": "jest",
-    "test:coverage": "jest --coverage"
+    "test:coverage": "jest --coverage",
+    "test:types": "tsc --noEmit"
   },
   "author": "Will Hawker",
   "contributors": [
@@ -70,6 +73,7 @@
     "@babel/preset-env": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
     "@testing-library/react": "^11.2.7",
+    "@types/react": "^17.0.11",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -89,6 +93,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
+    "typescript": "^4.3.2",
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.2"
   },

packages/react-jsx-highstock/package.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "target": "ES2020"
+  },
+  "include": ["./types/**/*"]
+}

packages/react-jsx-highstock/tsconfig.json

@@ -0,0 +1,71 @@
+import type * as Highcharts from 'highcharts';
+import type { ReactElement, ReactNode } from 'react';
+import { HighchartsChartProps, SeriesProps } from 'react-jsx-highcharts';
+
+export * from 'react-jsx-highcharts';
+
+export function HighchartsStockChart(props: HighchartsChartProps): ReactElement;
+
+// Navigator
+type NavigatorProps = {
+  children?: ReactNode;
+} & Partial<Highcharts.NavigatorOptions>;
+export function Navigator(props: NavigatorProps): ReactElement;
+export namespace Navigator {
+  type NavigatorSeriesProps = {
+    seriesId: string
+  }
+  export function Series(props: NavigatorSeriesProps): ReactElement;
+
+  type NavigatorXAxisProps = {
+    children?: ReactNode
+  } & Partial<Highcharts.NavigatorXAxisOptions>;
+  export function XAxis(props: NavigatorXAxisProps): ReactElement;
+
+  type NavigatorYAxisProps = {
+    children?: ReactNode
+  } & Partial<Highcharts.NavigatorYAxisOptions>;
+  export function YAxis(props: NavigatorYAxisProps): ReactElement;
+}
+
+// RangeSelector
+type RangeSelectorProps = {
+  children?: ReactNode;
+} & Partial<Highcharts.RangeSelectorOptions>;
+export function RangeSelector(
+  props: RangeSelectorProps
+): ReactElement;
+export namespace RangeSelector {
+  type RangeSelectorButtonProps = {
+    children?: ReactNode;
+  } & Partial<Omit<Highcharts.RangeSelectorButtonsOptions, "text">>;
+  export function Button(props: RangeSelectorButtonProps): ReactElement;
+
+  type RangeSelectorInputProps = {
+    boxBorderColor?: Highcharts.ColorString;
+    boxHeight?: number;
+    boxWidth?: (number|undefined);
+    dateFormat?: string;
+    dateParser?: Highcharts.RangeSelectorParseCallbackFunction;
+    editDateFormat?: string;
+    enabled?: boolean;
+    position?: Highcharts.RangeSelectorInputPositionOptions;
+    spacing?: number;
+    style?: Highcharts.CSSObject;
+  }
+  export function Input(props: RangeSelectorInputProps): ReactElement;
+}
+
+// Scrollbar
+export function Scrollbar(props: Highcharts.ScrollbarOptions): ReactElement;
+
+// Series
+export function CandlestickSeries(
+  props: SeriesProps<Highcharts.SeriesCandlestickOptions>
+): ReactElement;
+export function FlagsSeries(
+  props: SeriesProps<Highcharts.SeriesFlagsOptions>
+): ReactElement;
+export function OHLCSeries(
+  props: SeriesProps<Highcharts.SeriesOhlcOptions>
+): ReactElement;