feat(typescript): Add TypeScript definitions

fix patternfly#1040

Gruntfile.js

@@ -80,7 +80,7 @@ module.exports = function (grunt) {
             'dist/js/patternfly-functions.js'
           ]
         }
-      }
+      },
     },
     copy: {
       fonts: {
@@ -244,7 +244,12 @@ module.exports = function (grunt) {
       js: {
         files: [
           // copy js src file
-          {expand: true, cwd: 'src/js/', src: ['*.js'], dest: 'dist/js/'}
+          { expand: true, cwd: 'src/js/', src: ['*.js'], dest: 'dist/js/' }
+        ]
+      },
+      ts: {
+        files: [
+          { expand: true, cwd: 'src/js/', src: ['*.d.ts'], dest: 'dist/js/' }
         ]
       },
       lessBuild: {
@@ -645,6 +650,7 @@ module.exports = function (grunt) {
       'copy:less',
       'copy:sass',
       'copy:js',
+      'copy:ts',
       'sass',
       'less',
       'shipcss',

package.json

@@ -64,6 +64,7 @@
     "table": "3.7.9"
   },
   "optionalDependencies": {
+    "@types/c3": "^0.6.0",
     "bootstrap-datepicker": "^1.7.1",
     "bootstrap-sass": "^3.3.7",
     "bootstrap-select": "1.12.2",

src/js/patternfly-settings-base.d.ts

@@ -0,0 +1,9 @@
+interface Patternfly {
+  pfBreakpoints: {
+    tablet: number;
+    desktop: number;
+  };
+}
+interface Window {
+  patternfly: Patternfly;
+}

src/js/patternfly-settings-charts.d.ts

@@ -0,0 +1,92 @@
+/// <reference types="c3" />
+
+interface Window {
+  patternfly: Patternfly;
+}
+
+interface PFChartDataItem {
+  id: string;
+  index: number;
+  value: string;
+  name: string;
+  ratio: number;
+}
+
+type PFChartData = PFChartDataItem[];
+
+interface Patternfly {
+  pfSetDonutChartTitle(
+    selector: Node,
+    primary: string,
+    secondary: string
+  ): void;
+
+  pfDonutTooltipContents(
+    data: PFChartData,
+    defaultTitleFormat: string,
+    defaultValueFormat: string,
+    color: (id: number | string) => string
+  ): string;
+
+  pfGetUtilizationDonutTooltipContentsFn(
+    units: string | number
+  ): (data: PFChartData) => string;
+
+  pfGetBarChartTooltipContentsFn(
+    categories?: string[]
+  ): (data: PFChartData) => string;
+
+  pfSingleLineChartTooltipContentsFn(
+    categories?: string[]
+  ): (data: PFChartData) => string;
+
+  pfPieTooltipContents: Patternfly['pfDonutTooltipContents'];
+
+  c3ChartDefaults(): {
+    getDefaultAreaAxis(): c3.Axis
+    getDefaultAreaConfig(): c3.ChartConfiguration;
+    getDefaultAreaLegend(): c3.LegendOptions;
+    getDefaultAreaPoint(): c3.PointOptions;
+    getDefaultBarConfig(categories: string[]): c3.ChartConfiguration;
+    getDefaultBarGrid(): c3.Grid;
+    getDefaultBarLegend(): c3.LegendOptions;
+    getDefaultBarTooltip(categories: string[]): c3.TooltipOptions;
+    getDefaultColors(): c3.ChartConfiguration['color'];
+    getDefaultDonut(title: string): c3.ChartConfiguration['donut'];
+    getDefaultDonutColors(): c3.ChartConfiguration['color'];
+    getDefaultDonutConfig(title: string): c3.ChartConfiguration;
+    getDefaultDonutLegend(): c3.LegendOptions;
+    getDefaultDonutSize(): c3.ChartConfiguration['size'];
+    getDefaultDonutTooltip(): c3.TooltipOptions;
+    getDefaultGroupedBarConfig(): c3.ChartConfiguration;
+    getDefaultGroupedBarGrid(): c3.Grid;
+    getDefaultGroupedBarLegend(): c3.LegendOptions;
+    getDefaultLineAxis(): c3.Axis;
+    getDefaultLineConfig(): c3.ChartConfiguration;
+    getDefaultLineGrid(): c3.Grid;
+    getDefaultLineLegend(): c3.LegendOptions;
+    getDefaultLinePoint(): c3.PointOptions;
+    getDefaultPie(): c3.ChartConfiguration['pie'];
+    getDefaultPieColors(): c3.ChartConfiguration['color'];
+    getDefaultPieConfig(): c3.ChartConfiguration;
+    getDefaultPieLegend(): c3.LegendOptions;
+    getDefaultPieSize(): c3.ChartConfiguration['size'];
+    getDefaultPieTooltip(): c3.TooltipOptions;
+    getDefaultRelationshipDonutColors(): c3.ChartConfiguration['color'];
+    getDefaultRelationshipDonutConfig(): c3.ChartConfiguration;
+    getDefaultSingleAreaConfig(): c3.ChartConfiguration;
+    getDefaultSingleAreaTooltip(): c3.TooltipOptions;
+    getDefaultSingleLineConfig(): c3.ChartConfiguration;
+    getDefaultSingleLineTooltip(): c3.TooltipOptions;
+    getDefaultSparklineArea(): c3.ChartConfiguration['area'];
+    getDefaultSparklineAxis(): c3.Axis;
+    getDefaultSparklineConfig(): c3.ChartConfiguration;
+    getDefaultSparklineLegend(): c3.LegendOptions;
+    getDefaultSparklinePoint(): c3.PointOptions;
+    getDefaultSparklineSize(): c3.ChartConfiguration['size'];
+    getDefaultSparklineTooltip(): c3.TooltipOptions;
+    getDefaultStackedBarConfig(): c3.ChartConfiguration;
+    getDefaultStackedBarGrid(): c3.Grid;
+    getDefaultStackedBarLegend(): c3.LegendOptions;
+  };
+}

src/js/patternfly-settings-colors.d.ts

@@ -0,0 +1,88 @@
+interface Window {
+  patternfly: Patternfly;
+}
+
+interface Patternfly {
+  pfPaletteColors: {
+    black: string;
+    black100: string;
+    black200: string;
+    black300: string;
+    black400: string;
+    black500: string;
+    black600: string;
+    black700: string;
+    black800: string;
+    black900: string;
+    blue: string;
+    blue100: string;
+    blue200: string;
+    blue300: string;
+    blue400: string;
+    blue500: string;
+    blue600: string;
+    blue700: string;
+    gold: string;
+    gold100: string;
+    gold200: string;
+    gold300: string;
+    gold400: string;
+    gold500: string;
+    gold600: string;
+    gold700: string;
+    orange: string;
+    orange100: string;
+    orange200: string;
+    orange300: string;
+    orange400: string;
+    orange500: string;
+    orange600: string;
+    orange700: string;
+    lightBlue: string;
+    lightBlue100: string;
+    lightBlue200: string;
+    lightBlue300: string;
+    lightBlue400: string;
+    lightBlue500: string;
+    lightBlue600: string;
+    lightBlue700: string;
+    green: string;
+    green100: string;
+    green200: string;
+    green300: string;
+    green400: string;
+    green500: string;
+    green600: string;
+    green700: string;
+    lightGreen: string;
+    lightGreen100: string;
+    lightGreen200: string;
+    lightGreen300: string;
+    lightGreen400: string;
+    lightGreen500: string;
+    lightGreen600: string;
+    lightGreen700: string;
+    cyan: string;
+    cyan100: string;
+    cyan200: string;
+    cyan300: string;
+    cyan400: string;
+    cyan500: string;
+    cyan600: string;
+    cyan700: string;
+    purple: string;
+    purple100: string;
+    purple200: string;
+    purple300: string;
+    purple400: string;
+    purple500: string;
+    purple600: string;
+    purple700: string;
+    red: string;
+    red100: string;
+    red200: string;
+    red300: string;
+    red400: string;
+    red500: string;
+  };
+}

src/js/patternfly-settings.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="patternfly-settings-colors.d.ts" />
+/// <reference path="patternfly-settings-base.d.ts" />
+/// <reference path="patternfly-settings-charts.d.ts" />