migrate ui-components from flow to typescript

scm-ui/ui-components/.flowconfig

@@ -1,14 +0,0 @@
-[ignore]
-
-[include]
-../ui-types
-
-[libs]
-
-[lints]
-
-[options]
-module.system.node.resolve_dirname=../../node_modules
-module.name_mapper='^@scm-manager\/ui-types$' -> '<PROJECT_ROOT>/../ui-types'
-
-[strict]

scm-ui/ui-components/.storybook/webpack.config.js

@@ -8,7 +8,7 @@ module.exports = {
         }
       },
       {
-        test: /\.(js|jsx)$/,
+        test: /\.(js|ts|jsx|tsx)$/,
         exclude: /node_modules/,
         use: [
           {
@@ -36,5 +36,10 @@ module.exports = {
         use: ["file-loader"]
       }
     ]
+  },
+  resolve: {
+    extensions: [
+      ".ts", ".tsx", ".js", ".jsx", ".css", ".scss", ".json"
+    ]
   }
 };

scm-ui/ui-components/flow-typed/npm/@scm-manager/ui-extensions_vx.x.x.js

@@ -1,49 +0,0 @@
-// flow-typed signature: e87b860fca7047001bcde4b8780a8655
-// flow-typed version: <<STUB>>/@scm-manager/ui-extensions_v0.1.2/flow_v0.109.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   '@scm-manager/ui-extensions'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module '@scm-manager/ui-extensions' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module '@scm-manager/ui-extensions/lib/binder' {
-  declare module.exports: any;
-}
-
-declare module '@scm-manager/ui-extensions/lib/ExtensionPoint' {
-  declare module.exports: any;
-}
-
-declare module '@scm-manager/ui-extensions/lib' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module '@scm-manager/ui-extensions/lib/binder.js' {
-  declare module.exports: $Exports<'@scm-manager/ui-extensions/lib/binder'>;
-}
-declare module '@scm-manager/ui-extensions/lib/ExtensionPoint.js' {
-  declare module.exports: $Exports<'@scm-manager/ui-extensions/lib/ExtensionPoint'>;
-}
-declare module '@scm-manager/ui-extensions/lib/index' {
-  declare module.exports: $Exports<'@scm-manager/ui-extensions/lib'>;
-}
-declare module '@scm-manager/ui-extensions/lib/index.js' {
-  declare module.exports: $Exports<'@scm-manager/ui-extensions/lib'>;
-}

scm-ui/ui-components/flow-typed/npm/classnames_v2.x.x.js

@@ -1,23 +0,0 @@
-// flow-typed signature: cf86673cc32d185bdab1d2ea90578d37
-// flow-typed version: 614bf49aa8/classnames_v2.x.x/flow_>=v0.25.x
-
-type $npm$classnames$Classes =
-  | string
-  | { [className: string]: * }
-  | false
-  | void
-  | null;
-
-declare module "classnames" {
-  declare module.exports: (
-    ...classes: Array<$npm$classnames$Classes | $npm$classnames$Classes[]>
-  ) => string;
-}
-
-declare module "classnames/bind" {
-  declare module.exports: $Exports<"classnames">;
-}
-
-declare module "classnames/dedupe" {
-  declare module.exports: $Exports<"classnames">;
-}

scm-ui/ui-components/flow-typed/npm/enzyme_vx.x.x.js

@@ -1,269 +0,0 @@
-// flow-typed signature: 761f01d8db9f91fa67135cb2120c2b8e
-// flow-typed version: <<STUB>>/enzyme_v3.10.0/flow_v0.109.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'enzyme'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'enzyme' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'enzyme/build/configuration' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/build/Debug' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/build/EnzymeAdapter' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/build/getAdapter' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/build' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/build/mount' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/build/ReactWrapper' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/build/render' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/build/RSTTraversal' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/build/selectors' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/build/shallow' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/build/ShallowWrapper' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/build/Utils' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/build/validateAdapter' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/mount' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/ReactWrapper' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/render' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/shallow' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/ShallowWrapper' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/src/configuration' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/src/Debug' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/src/EnzymeAdapter' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/src/getAdapter' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/src' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/src/mount' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/src/ReactWrapper' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/src/render' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/src/RSTTraversal' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/src/selectors' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/src/shallow' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/src/ShallowWrapper' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/src/Utils' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/src/validateAdapter' {
-  declare module.exports: any;
-}
-
-declare module 'enzyme/withDom' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'enzyme/build/configuration.js' {
-  declare module.exports: $Exports<'enzyme/build/configuration'>;
-}
-declare module 'enzyme/build/Debug.js' {
-  declare module.exports: $Exports<'enzyme/build/Debug'>;
-}
-declare module 'enzyme/build/EnzymeAdapter.js' {
-  declare module.exports: $Exports<'enzyme/build/EnzymeAdapter'>;
-}
-declare module 'enzyme/build/getAdapter.js' {
-  declare module.exports: $Exports<'enzyme/build/getAdapter'>;
-}
-declare module 'enzyme/build/index' {
-  declare module.exports: $Exports<'enzyme/build'>;
-}
-declare module 'enzyme/build/index.js' {
-  declare module.exports: $Exports<'enzyme/build'>;
-}
-declare module 'enzyme/build/mount.js' {
-  declare module.exports: $Exports<'enzyme/build/mount'>;
-}
-declare module 'enzyme/build/ReactWrapper.js' {
-  declare module.exports: $Exports<'enzyme/build/ReactWrapper'>;
-}
-declare module 'enzyme/build/render.js' {
-  declare module.exports: $Exports<'enzyme/build/render'>;
-}
-declare module 'enzyme/build/RSTTraversal.js' {
-  declare module.exports: $Exports<'enzyme/build/RSTTraversal'>;
-}
-declare module 'enzyme/build/selectors.js' {
-  declare module.exports: $Exports<'enzyme/build/selectors'>;
-}
-declare module 'enzyme/build/shallow.js' {
-  declare module.exports: $Exports<'enzyme/build/shallow'>;
-}
-declare module 'enzyme/build/ShallowWrapper.js' {
-  declare module.exports: $Exports<'enzyme/build/ShallowWrapper'>;
-}
-declare module 'enzyme/build/Utils.js' {
-  declare module.exports: $Exports<'enzyme/build/Utils'>;
-}
-declare module 'enzyme/build/validateAdapter.js' {
-  declare module.exports: $Exports<'enzyme/build/validateAdapter'>;
-}
-declare module 'enzyme/mount.js' {
-  declare module.exports: $Exports<'enzyme/mount'>;
-}
-declare module 'enzyme/ReactWrapper.js' {
-  declare module.exports: $Exports<'enzyme/ReactWrapper'>;
-}
-declare module 'enzyme/render.js' {
-  declare module.exports: $Exports<'enzyme/render'>;
-}
-declare module 'enzyme/shallow.js' {
-  declare module.exports: $Exports<'enzyme/shallow'>;
-}
-declare module 'enzyme/ShallowWrapper.js' {
-  declare module.exports: $Exports<'enzyme/ShallowWrapper'>;
-}
-declare module 'enzyme/src/configuration.js' {
-  declare module.exports: $Exports<'enzyme/src/configuration'>;
-}
-declare module 'enzyme/src/Debug.js' {
-  declare module.exports: $Exports<'enzyme/src/Debug'>;
-}
-declare module 'enzyme/src/EnzymeAdapter.js' {
-  declare module.exports: $Exports<'enzyme/src/EnzymeAdapter'>;
-}
-declare module 'enzyme/src/getAdapter.js' {
-  declare module.exports: $Exports<'enzyme/src/getAdapter'>;
-}
-declare module 'enzyme/src/index' {
-  declare module.exports: $Exports<'enzyme/src'>;
-}
-declare module 'enzyme/src/index.js' {
-  declare module.exports: $Exports<'enzyme/src'>;
-}
-declare module 'enzyme/src/mount.js' {
-  declare module.exports: $Exports<'enzyme/src/mount'>;
-}
-declare module 'enzyme/src/ReactWrapper.js' {
-  declare module.exports: $Exports<'enzyme/src/ReactWrapper'>;
-}
-declare module 'enzyme/src/render.js' {
-  declare module.exports: $Exports<'enzyme/src/render'>;
-}
-declare module 'enzyme/src/RSTTraversal.js' {
-  declare module.exports: $Exports<'enzyme/src/RSTTraversal'>;
-}
-declare module 'enzyme/src/selectors.js' {
-  declare module.exports: $Exports<'enzyme/src/selectors'>;
-}
-declare module 'enzyme/src/shallow.js' {
-  declare module.exports: $Exports<'enzyme/src/shallow'>;
-}
-declare module 'enzyme/src/ShallowWrapper.js' {
-  declare module.exports: $Exports<'enzyme/src/ShallowWrapper'>;
-}
-declare module 'enzyme/src/Utils.js' {
-  declare module.exports: $Exports<'enzyme/src/Utils'>;
-}
-declare module 'enzyme/src/validateAdapter.js' {
-  declare module.exports: $Exports<'enzyme/src/validateAdapter'>;
-}
-declare module 'enzyme/withDom.js' {
-  declare module.exports: $Exports<'enzyme/withDom'>;
-}

scm-ui/ui-components/flow-typed/npm/gitdiff-parser_vx.x.x.js

@@ -1,66 +0,0 @@
-// flow-typed signature: 9be79ea52a669f6c266677d1d0bd3e9d
-// flow-typed version: <<STUB>>/gitdiff-parser_v0.1.2/flow_v0.109.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'gitdiff-parser'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'gitdiff-parser' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'gitdiff-parser/test/git.test' {
-  declare module.exports: any;
-}
-
-declare module 'gitdiff-parser/test/hg' {
-  declare module.exports: any;
-}
-
-declare module 'gitdiff-parser/test/hg.test' {
-  declare module.exports: any;
-}
-
-declare module 'gitdiff-parser/test/perf-parse-diff' {
-  declare module.exports: any;
-}
-
-declare module 'gitdiff-parser/test/perf' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'gitdiff-parser/index' {
-  declare module.exports: $Exports<'gitdiff-parser'>;
-}
-declare module 'gitdiff-parser/index.js' {
-  declare module.exports: $Exports<'gitdiff-parser'>;
-}
-declare module 'gitdiff-parser/test/git.test.js' {
-  declare module.exports: $Exports<'gitdiff-parser/test/git.test'>;
-}
-declare module 'gitdiff-parser/test/hg.js' {
-  declare module.exports: $Exports<'gitdiff-parser/test/hg'>;
-}
-declare module 'gitdiff-parser/test/hg.test.js' {
-  declare module.exports: $Exports<'gitdiff-parser/test/hg.test'>;
-}
-declare module 'gitdiff-parser/test/perf-parse-diff.js' {
-  declare module.exports: $Exports<'gitdiff-parser/test/perf-parse-diff'>;
-}
-declare module 'gitdiff-parser/test/perf.js' {
-  declare module.exports: $Exports<'gitdiff-parser/test/perf'>;
-}

scm-ui/ui-components/flow-typed/npm/moment_v2.3.x.js

@@ -1,331 +0,0 @@
-// flow-typed signature: 23b805356f90ad9384dd88489654e380
-// flow-typed version: e9374c5fe9/moment_v2.3.x/flow_>=v0.25.x
-
-type moment$MomentOptions = {
-  y?: number | string,
-  year?: number | string,
-  years?: number | string,
-  M?: number | string,
-  month?: number | string,
-  months?: number | string,
-  d?: number | string,
-  day?: number | string,
-  days?: number | string,
-  date?: number | string,
-  h?: number | string,
-  hour?: number | string,
-  hours?: number | string,
-  m?: number | string,
-  minute?: number | string,
-  minutes?: number | string,
-  s?: number | string,
-  second?: number | string,
-  seconds?: number | string,
-  ms?: number | string,
-  millisecond?: number | string,
-  milliseconds?: number | string
-};
-
-type moment$MomentObject = {
-  years: number,
-  months: number,
-  date: number,
-  hours: number,
-  minutes: number,
-  seconds: number,
-  milliseconds: number
-};
-
-type moment$MomentCreationData = {
-  input: string,
-  format: string,
-  locale: Object,
-  isUTC: boolean,
-  strict: boolean
-};
-
-type moment$CalendarFormat = string | ((moment: moment$Moment) => string);
-
-type moment$CalendarFormats = {
-  sameDay?: moment$CalendarFormat,
-  nextDay?: moment$CalendarFormat,
-  nextWeek?: moment$CalendarFormat,
-  lastDay?: moment$CalendarFormat,
-  lastWeek?: moment$CalendarFormat,
-  sameElse?: moment$CalendarFormat
-};
-
-declare class moment$LocaleData {
-  months(moment: moment$Moment): string,
-  monthsShort(moment: moment$Moment): string,
-  monthsParse(month: string): number,
-  weekdays(moment: moment$Moment): string,
-  weekdaysShort(moment: moment$Moment): string,
-  weekdaysMin(moment: moment$Moment): string,
-  weekdaysParse(weekDay: string): number,
-  longDateFormat(dateFormat: string): string,
-  isPM(date: string): boolean,
-  meridiem(hours: number, minutes: number, isLower: boolean): string,
-  calendar(
-    key:
-      | "sameDay"
-      | "nextDay"
-      | "lastDay"
-      | "nextWeek"
-      | "prevWeek"
-      | "sameElse",
-    moment: moment$Moment
-  ): string,
-  relativeTime(
-    number: number,
-    withoutSuffix: boolean,
-    key: "s" | "m" | "mm" | "h" | "hh" | "d" | "dd" | "M" | "MM" | "y" | "yy",
-    isFuture: boolean
-  ): string,
-  pastFuture(diff: any, relTime: string): string,
-  ordinal(number: number): string,
-  preparse(str: string): any,
-  postformat(str: string): any,
-  week(moment: moment$Moment): string,
-  invalidDate(): string,
-  firstDayOfWeek(): number,
-  firstDayOfYear(): number
-}
-declare class moment$MomentDuration {
-  humanize(suffix?: boolean): string,
-  milliseconds(): number,
-  asMilliseconds(): number,
-  seconds(): number,
-  asSeconds(): number,
-  minutes(): number,
-  asMinutes(): number,
-  hours(): number,
-  asHours(): number,
-  days(): number,
-  asDays(): number,
-  months(): number,
-  asWeeks(): number,
-  weeks(): number,
-  asMonths(): number,
-  years(): number,
-  asYears(): number,
-  add(value: number | moment$MomentDuration | Object, unit?: string): this,
-  subtract(value: number | moment$MomentDuration | Object, unit?: string): this,
-  as(unit: string): number,
-  get(unit: string): number,
-  toJSON(): string,
-  toISOString(): string,
-  isValid(): boolean
-}
-declare class moment$Moment {
-  static ISO_8601: string,
-  static (
-    string?: string,
-    format?: string | Array<string>,
-    strict?: boolean
-  ): moment$Moment,
-  static (
-    string?: string,
-    format?: string | Array<string>,
-    locale?: string,
-    strict?: boolean
-  ): moment$Moment,
-  static (
-    initDate: ?Object | number | Date | Array<number> | moment$Moment | string
-  ): moment$Moment,
-  static unix(seconds: number): moment$Moment,
-  static utc(): moment$Moment,
-  static utc(number: number | Array<number>): moment$Moment,
-  static utc(
-    str: string,
-    str2?: string | Array<string>,
-    str3?: string
-  ): moment$Moment,
-  static utc(moment: moment$Moment): moment$Moment,
-  static utc(date: Date): moment$Moment,
-  static parseZone(): moment$Moment,
-  static parseZone(rawDate: string): moment$Moment,
-  static parseZone(
-    rawDate: string,
-    format: string | Array<string>
-  ): moment$Moment,
-  static parseZone(
-    rawDate: string,
-    format: string,
-    strict: boolean
-  ): moment$Moment,
-  static parseZone(
-    rawDate: string,
-    format: string,
-    locale: string,
-    strict: boolean
-  ): moment$Moment,
-  isValid(): boolean,
-  invalidAt(): 0 | 1 | 2 | 3 | 4 | 5 | 6,
-  creationData(): moment$MomentCreationData,
-  millisecond(number: number): this,
-  milliseconds(number: number): this,
-  millisecond(): number,
-  milliseconds(): number,
-  second(number: number): this,
-  seconds(number: number): this,
-  second(): number,
-  seconds(): number,
-  minute(number: number): this,
-  minutes(number: number): this,
-  minute(): number,
-  minutes(): number,
-  hour(number: number): this,
-  hours(number: number): this,
-  hour(): number,
-  hours(): number,
-  date(number: number): this,
-  dates(number: number): this,
-  date(): number,
-  dates(): number,
-  day(day: number | string): this,
-  days(day: number | string): this,
-  day(): number,
-  days(): number,
-  weekday(number: number): this,
-  weekday(): number,
-  isoWeekday(number: number): this,
-  isoWeekday(): number,
-  dayOfYear(number: number): this,
-  dayOfYear(): number,
-  week(number: number): this,
-  weeks(number: number): this,
-  week(): number,
-  weeks(): number,
-  isoWeek(number: number): this,
-  isoWeeks(number: number): this,
-  isoWeek(): number,
-  isoWeeks(): number,
-  month(number: number): this,
-  months(number: number): this,
-  month(): number,
-  months(): number,
-  quarter(number: number): this,
-  quarter(): number,
-  year(number: number): this,
-  years(number: number): this,
-  year(): number,
-  years(): number,
-  weekYear(number: number): this,
-  weekYear(): number,
-  isoWeekYear(number: number): this,
-  isoWeekYear(): number,
-  weeksInYear(): number,
-  isoWeeksInYear(): number,
-  get(string: string): number,
-  set(unit: string, value: number): this,
-  set(options: { [unit: string]: number }): this,
-  static max(...dates: Array<moment$Moment>): moment$Moment,
-  static max(dates: Array<moment$Moment>): moment$Moment,
-  static min(...dates: Array<moment$Moment>): moment$Moment,
-  static min(dates: Array<moment$Moment>): moment$Moment,
-  add(
-    value: number | moment$MomentDuration | moment$Moment | Object,
-    unit?: string
-  ): this,
-  subtract(
-    value: number | moment$MomentDuration | moment$Moment | string | Object,
-    unit?: string
-  ): this,
-  startOf(unit: string): this,
-  endOf(unit: string): this,
-  local(): this,
-  utc(): this,
-  utcOffset(
-    offset: number | string,
-    keepLocalTime?: boolean,
-    keepMinutes?: boolean
-  ): this,
-  utcOffset(): number,
-  format(format?: string): string,
-  fromNow(removeSuffix?: boolean): string,
-  from(
-    value: moment$Moment | string | number | Date | Array<number>,
-    removePrefix?: boolean
-  ): string,
-  toNow(removePrefix?: boolean): string,
-  to(
-    value: moment$Moment | string | number | Date | Array<number>,
-    removePrefix?: boolean
-  ): string,
-  calendar(refTime?: any, formats?: moment$CalendarFormats): string,
-  diff(
-    date: moment$Moment | string | number | Date | Array<number>,
-    format?: string,
-    floating?: boolean
-  ): number,
-  valueOf(): number,
-  unix(): number,
-  daysInMonth(): number,
-  toDate(): Date,
-  toArray(): Array<number>,
-  toJSON(): string,
-  toISOString(
-    keepOffset?: boolean
-  ): string,
-  toObject(): moment$MomentObject,
-  isBefore(
-    date?: moment$Moment | string | number | Date | Array<number>,
-    units?: ?string
-  ): boolean,
-  isSame(
-    date?: moment$Moment | string | number | Date | Array<number>,
-    units?: ?string
-  ): boolean,
-  isAfter(
-    date?: moment$Moment | string | number | Date | Array<number>,
-    units?: ?string
-  ): boolean,
-  isSameOrBefore(
-    date?: moment$Moment | string | number | Date | Array<number>,
-    units?: ?string
-  ): boolean,
-  isSameOrAfter(
-    date?: moment$Moment | string | number | Date | Array<number>,
-    units?: ?string
-  ): boolean,
-  isBetween(
-    fromDate: moment$Moment | string | number | Date | Array<number>,
-    toDate?: ?moment$Moment | string | number | Date | Array<number>,
-    granularity?: ?string,
-    inclusion?: ?string
-  ): boolean,
-  isDST(): boolean,
-  isDSTShifted(): boolean,
-  isLeapYear(): boolean,
-  clone(): moment$Moment,
-  static isMoment(obj: any): boolean,
-  static isDate(obj: any): boolean,
-  static locale(locale: string, localeData?: Object): string,
-  static updateLocale(locale: string, localeData?: ?Object): void,
-  static locale(locales: Array<string>): string,
-  locale(locale: string, customization?: Object | null): moment$Moment,
-  locale(): string,
-  static months(): Array<string>,
-  static monthsShort(): Array<string>,
-  static weekdays(): Array<string>,
-  static weekdaysShort(): Array<string>,
-  static weekdaysMin(): Array<string>,
-  static months(): string,
-  static monthsShort(): string,
-  static weekdays(): string,
-  static weekdaysShort(): string,
-  static weekdaysMin(): string,
-  static localeData(key?: string): moment$LocaleData,
-  static duration(
-    value: number | Object | string,
-    unit?: string
-  ): moment$MomentDuration,
-  static isDuration(obj: any): boolean,
-  static normalizeUnits(unit: string): string,
-  static invalid(object: any): moment$Moment
-}
-
-declare module "moment" {
-  declare module.exports: Class<moment$Moment>;
-}

scm-ui/ui-components/flow-typed/npm/query-string_v5.x.x.js

@@ -1,22 +0,0 @@
-// flow-typed signature: 45d44f189fa426ca21dee3f5149a4f99
-// flow-typed version: c6154227d1/query-string_v5.x.x/flow_>=v0.104.x
-
-declare module "query-string" {
-  declare type ArrayFormat = "none" | "bracket" | "index";
-  declare type ParseOptions = {|
-    arrayFormat?: ArrayFormat
-  |};
-
-  declare type StringifyOptions = {|
-    arrayFormat?: ArrayFormat,
-    encode?: boolean,
-    strict?: boolean
-  |};
-
-  declare module.exports: {
-    extract(str: string): string,
-    parse(str: string, opts?: ParseOptions): Object,
-    stringify(obj: Object, opts?: StringifyOptions): string,
-    ...
-  };
-}

scm-ui/ui-components/flow-typed/npm/react-diff-view_vx.x.x.js

@@ -1,139 +0,0 @@
-// flow-typed signature: 35264e970923e4f3cda147e7c17e2407
-// flow-typed version: <<STUB>>/react-diff-view_v1.8.1/flow_v0.109.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'react-diff-view'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'react-diff-view' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'react-diff-view/parse' {
-  declare module.exports: any;
-}
-
-declare module 'react-diff-view/src/CodeCell' {
-  declare module.exports: any;
-}
-
-declare module 'react-diff-view/src/Diff' {
-  declare module.exports: any;
-}
-
-declare module 'react-diff-view/src/Hunk' {
-  declare module.exports: any;
-}
-
-declare module 'react-diff-view/src' {
-  declare module.exports: any;
-}
-
-declare module 'react-diff-view/src/parse' {
-  declare module.exports: any;
-}
-
-declare module 'react-diff-view/src/propTypes' {
-  declare module.exports: any;
-}
-
-declare module 'react-diff-view/src/selectors' {
-  declare module.exports: any;
-}
-
-declare module 'react-diff-view/src/SplitChange' {
-  declare module.exports: any;
-}
-
-declare module 'react-diff-view/src/SplitHunk' {
-  declare module.exports: any;
-}
-
-declare module 'react-diff-view/src/SplitWidget' {
-  declare module.exports: any;
-}
-
-declare module 'react-diff-view/src/UnifiedChange' {
-  declare module.exports: any;
-}
-
-declare module 'react-diff-view/src/UnifiedHunk' {
-  declare module.exports: any;
-}
-
-declare module 'react-diff-view/src/UnifiedWidget' {
-  declare module.exports: any;
-}
-
-declare module 'react-diff-view/src/utils' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'react-diff-view/index' {
-  declare module.exports: $Exports<'react-diff-view'>;
-}
-declare module 'react-diff-view/index.js' {
-  declare module.exports: $Exports<'react-diff-view'>;
-}
-declare module 'react-diff-view/parse.js' {
-  declare module.exports: $Exports<'react-diff-view/parse'>;
-}
-declare module 'react-diff-view/src/CodeCell.js' {
-  declare module.exports: $Exports<'react-diff-view/src/CodeCell'>;
-}
-declare module 'react-diff-view/src/Diff.js' {
-  declare module.exports: $Exports<'react-diff-view/src/Diff'>;
-}
-declare module 'react-diff-view/src/Hunk.js' {
-  declare module.exports: $Exports<'react-diff-view/src/Hunk'>;
-}
-declare module 'react-diff-view/src/index' {
-  declare module.exports: $Exports<'react-diff-view/src'>;
-}
-declare module 'react-diff-view/src/index.js' {
-  declare module.exports: $Exports<'react-diff-view/src'>;
-}
-declare module 'react-diff-view/src/parse.js' {
-  declare module.exports: $Exports<'react-diff-view/src/parse'>;
-}
-declare module 'react-diff-view/src/propTypes.js' {
-  declare module.exports: $Exports<'react-diff-view/src/propTypes'>;
-}
-declare module 'react-diff-view/src/selectors.js' {
-  declare module.exports: $Exports<'react-diff-view/src/selectors'>;
-}
-declare module 'react-diff-view/src/SplitChange.js' {
-  declare module.exports: $Exports<'react-diff-view/src/SplitChange'>;
-}
-declare module 'react-diff-view/src/SplitHunk.js' {
-  declare module.exports: $Exports<'react-diff-view/src/SplitHunk'>;
-}
-declare module 'react-diff-view/src/SplitWidget.js' {
-  declare module.exports: $Exports<'react-diff-view/src/SplitWidget'>;
-}
-declare module 'react-diff-view/src/UnifiedChange.js' {
-  declare module.exports: $Exports<'react-diff-view/src/UnifiedChange'>;
-}
-declare module 'react-diff-view/src/UnifiedHunk.js' {
-  declare module.exports: $Exports<'react-diff-view/src/UnifiedHunk'>;
-}
-declare module 'react-diff-view/src/UnifiedWidget.js' {
-  declare module.exports: $Exports<'react-diff-view/src/UnifiedWidget'>;
-}
-declare module 'react-diff-view/src/utils.js' {
-  declare module.exports: $Exports<'react-diff-view/src/utils'>;
-}

scm-ui/ui-components/flow-typed/npm/react-i18next_v7.x.x.js

@@ -1,110 +0,0 @@
-// flow-typed signature: e48526194d458ea4787ca56d830092da
-// flow-typed version: c6154227d1/react-i18next_v7.x.x/flow_>=v0.104.x
-
-declare module "react-i18next" {
-  declare type TFunction = (key?: ?string, data?: ?Object) => string;
-
-  declare type TranslatorProps = {|
-    t: TFunction,
-    i18nLoadedAt: Date,
-    i18n: Object
-  |};
-
-  declare type TranslatorPropsVoid = {
-    t: TFunction | void,
-    i18nLoadedAt: Date | void,
-    i18n: Object | void,
-    ...
-  };
-
-  declare type Translator<P: {...}, Component: React$ComponentType<P>> = (
-    WrappedComponent: Component
-  ) => React$ComponentType<
-    $Diff<React$ElementConfig<Component>, TranslatorPropsVoid>
-  >;
-
-  declare type TranslateOptions = $Shape<{
-    wait: boolean,
-    nsMode: "default" | "fallback",
-    bindi18n: false | string,
-    bindStore: false | string,
-    withRef: boolean,
-    translateFuncName: string,
-    i18n: Object,
-    usePureComponent: boolean,
-    ...
-  }>;
-
-  declare function translate<P: {...}, Component: React$ComponentType<P>>(
-    namespaces?: | string
-    | Array<string>
-    | (($Diff<P, TranslatorPropsVoid>) => string | Array<string>),
-    options?: TranslateOptions
-  ): Translator<P, Component>;
-
-  declare type I18nProps = {
-    i18n?: Object,
-    ns?: string | Array<string>,
-    children: (t: TFunction, {
-      i18n: Object,
-      t: TFunction,
-      ...
-    }) => React$Node,
-    initialI18nStore?: Object,
-    initialLanguage?: string,
-    ...
-  };
-  declare var I18n: React$ComponentType<I18nProps>;
-
-  declare type InterpolateProps = {
-    className?: string,
-    dangerouslySetInnerHTMLPartElement?: string,
-    i18n?: Object,
-    i18nKey?: string,
-    options?: Object,
-    parent?: string,
-    style?: Object,
-    t?: TFunction,
-    useDangerouslySetInnerHTML?: boolean,
-    ...
-  };
-  declare var Interpolate: React$ComponentType<InterpolateProps>;
-
-  declare type TransProps = {
-    count?: number,
-    parent?: string,
-    i18n?: Object,
-    i18nKey?: string,
-    t?: TFunction,
-    ...
-  };
-  declare var Trans: React$ComponentType<TransProps>;
-
-  declare type ProviderProps = {
-    i18n: Object,
-    children: React$Element<*>,
-    ...
-  };
-  declare var I18nextProvider: React$ComponentType<ProviderProps>;
-
-  declare type NamespacesProps = {
-    components: Array<React$ComponentType<*>>,
-    i18n: { loadNamespaces: Function, ... },
-    ...
-  };
-  declare function loadNamespaces(props: NamespacesProps): Promise<void>;
-
-  declare var reactI18nextModule: {
-    type: "3rdParty",
-    init: (instance: Object) => void,
-    ...
-  };
-
-  declare function setDefaults(options: TranslateOptions): void;
-
-  declare function getDefaults(): TranslateOptions;
-
-  declare function getI18n(): Object;
-
-  declare function setI18n(instance: Object): void;
-}

scm-ui/ui-components/flow-typed/npm/react-jss_vx.x.x.js

@@ -1,137 +0,0 @@
-// flow-typed signature: ba35d02d668b0d0a3e04a63a6847974e
-// flow-typed version: <<STUB>>/react-jss_v8.6.1/flow_v0.79.1
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'react-jss'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'react-jss' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'react-jss/dist/react-jss' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/dist/react-jss.min' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/lib/compose' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/lib/compose.test' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/lib/contextTypes' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/lib/createHoc' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/lib/getDisplayName' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/lib/index' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/lib/index.test' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/lib/injectSheet' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/lib/injectSheet.test' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/lib/jss' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/lib/JssProvider' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/lib/JssProvider.test' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/lib/ns' {
-  declare module.exports: any;
-}
-
-declare module 'react-jss/lib/propTypes' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'react-jss/dist/react-jss.js' {
-  declare module.exports: $Exports<'react-jss/dist/react-jss'>;
-}
-declare module 'react-jss/dist/react-jss.min.js' {
-  declare module.exports: $Exports<'react-jss/dist/react-jss.min'>;
-}
-declare module 'react-jss/lib/compose.js' {
-  declare module.exports: $Exports<'react-jss/lib/compose'>;
-}
-declare module 'react-jss/lib/compose.test.js' {
-  declare module.exports: $Exports<'react-jss/lib/compose.test'>;
-}
-declare module 'react-jss/lib/contextTypes.js' {
-  declare module.exports: $Exports<'react-jss/lib/contextTypes'>;
-}
-declare module 'react-jss/lib/createHoc.js' {
-  declare module.exports: $Exports<'react-jss/lib/createHoc'>;
-}
-declare module 'react-jss/lib/getDisplayName.js' {
-  declare module.exports: $Exports<'react-jss/lib/getDisplayName'>;
-}
-declare module 'react-jss/lib/index.js' {
-  declare module.exports: $Exports<'react-jss/lib/index'>;
-}
-declare module 'react-jss/lib/index.test.js' {
-  declare module.exports: $Exports<'react-jss/lib/index.test'>;
-}
-declare module 'react-jss/lib/injectSheet.js' {
-  declare module.exports: $Exports<'react-jss/lib/injectSheet'>;
-}
-declare module 'react-jss/lib/injectSheet.test.js' {
-  declare module.exports: $Exports<'react-jss/lib/injectSheet.test'>;
-}
-declare module 'react-jss/lib/jss.js' {
-  declare module.exports: $Exports<'react-jss/lib/jss'>;
-}
-declare module 'react-jss/lib/JssProvider.js' {
-  declare module.exports: $Exports<'react-jss/lib/JssProvider'>;
-}
-declare module 'react-jss/lib/JssProvider.test.js' {
-  declare module.exports: $Exports<'react-jss/lib/JssProvider.test'>;
-}
-declare module 'react-jss/lib/ns.js' {
-  declare module.exports: $Exports<'react-jss/lib/ns'>;
-}
-declare module 'react-jss/lib/propTypes.js' {
-  declare module.exports: $Exports<'react-jss/lib/propTypes'>;
-}

scm-ui/ui-components/flow-typed/npm/react-markdown_vx.x.x.js

@@ -1,123 +0,0 @@
-// flow-typed signature: 6bcbadac27a01caf160321668f1e53ce
-// flow-typed version: <<STUB>>/react-markdown_v4.2.2/flow_v0.109.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'react-markdown'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'react-markdown' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'react-markdown/lib/ast-to-react' {
-  declare module.exports: any;
-}
-
-declare module 'react-markdown/lib/get-definitions' {
-  declare module.exports: any;
-}
-
-declare module 'react-markdown/lib/plugins/disallow-node' {
-  declare module.exports: any;
-}
-
-declare module 'react-markdown/lib/plugins/html-parser' {
-  declare module.exports: any;
-}
-
-declare module 'react-markdown/lib/plugins/naive-html' {
-  declare module.exports: any;
-}
-
-declare module 'react-markdown/lib/react-markdown' {
-  declare module.exports: any;
-}
-
-declare module 'react-markdown/lib/renderers' {
-  declare module.exports: any;
-}
-
-declare module 'react-markdown/lib/symbols' {
-  declare module.exports: any;
-}
-
-declare module 'react-markdown/lib/uri-transformer' {
-  declare module.exports: any;
-}
-
-declare module 'react-markdown/lib/with-html' {
-  declare module.exports: any;
-}
-
-declare module 'react-markdown/lib/wrap-table-rows' {
-  declare module.exports: any;
-}
-
-declare module 'react-markdown/plugins/html-parser' {
-  declare module.exports: any;
-}
-
-declare module 'react-markdown/umd/react-markdown' {
-  declare module.exports: any;
-}
-
-declare module 'react-markdown/with-html' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'react-markdown/lib/ast-to-react.js' {
-  declare module.exports: $Exports<'react-markdown/lib/ast-to-react'>;
-}
-declare module 'react-markdown/lib/get-definitions.js' {
-  declare module.exports: $Exports<'react-markdown/lib/get-definitions'>;
-}
-declare module 'react-markdown/lib/plugins/disallow-node.js' {
-  declare module.exports: $Exports<'react-markdown/lib/plugins/disallow-node'>;
-}
-declare module 'react-markdown/lib/plugins/html-parser.js' {
-  declare module.exports: $Exports<'react-markdown/lib/plugins/html-parser'>;
-}
-declare module 'react-markdown/lib/plugins/naive-html.js' {
-  declare module.exports: $Exports<'react-markdown/lib/plugins/naive-html'>;
-}
-declare module 'react-markdown/lib/react-markdown.js' {
-  declare module.exports: $Exports<'react-markdown/lib/react-markdown'>;
-}
-declare module 'react-markdown/lib/renderers.js' {
-  declare module.exports: $Exports<'react-markdown/lib/renderers'>;
-}
-declare module 'react-markdown/lib/symbols.js' {
-  declare module.exports: $Exports<'react-markdown/lib/symbols'>;
-}
-declare module 'react-markdown/lib/uri-transformer.js' {
-  declare module.exports: $Exports<'react-markdown/lib/uri-transformer'>;
-}
-declare module 'react-markdown/lib/with-html.js' {
-  declare module.exports: $Exports<'react-markdown/lib/with-html'>;
-}
-declare module 'react-markdown/lib/wrap-table-rows.js' {
-  declare module.exports: $Exports<'react-markdown/lib/wrap-table-rows'>;
-}
-declare module 'react-markdown/plugins/html-parser.js' {
-  declare module.exports: $Exports<'react-markdown/plugins/html-parser'>;
-}
-declare module 'react-markdown/umd/react-markdown.js' {
-  declare module.exports: $Exports<'react-markdown/umd/react-markdown'>;
-}
-declare module 'react-markdown/with-html.js' {
-  declare module.exports: $Exports<'react-markdown/with-html'>;
-}

scm-ui/ui-components/flow-typed/npm/react-router-dom_v4.x.x.js

@@ -1,182 +0,0 @@
-// flow-typed signature: 0bc486c8fc04d0bb37efa138223e4f67
-// flow-typed version: c6154227d1/react-router-dom_v4.x.x/flow_>=v0.104.x
-
-declare module "react-router-dom" {
-  declare export var BrowserRouter: React$ComponentType<{|
-    basename?: string,
-    forceRefresh?: boolean,
-    getUserConfirmation?: GetUserConfirmation,
-    keyLength?: number,
-    children?: React$Node
-  |}>
-
-  declare export var HashRouter: React$ComponentType<{|
-    basename?: string,
-    getUserConfirmation?: GetUserConfirmation,
-    hashType?: "slash" | "noslash" | "hashbang",
-    children?: React$Node
-  |}>
-
-  declare export var Link: React$ComponentType<{
-    className?: string,
-    to: string | LocationShape,
-    replace?: boolean,
-    children?: React$Node,
-    ...
-  }>
-
-  declare export var NavLink: React$ComponentType<{
-    to: string | LocationShape,
-    activeClassName?: string,
-    className?: string,
-    activeStyle?: Object,
-    style?: Object,
-    isActive?: (match: Match, location: Location) => boolean,
-    children?: React$Node,
-    exact?: boolean,
-    strict?: boolean,
-    ...
-  }>
-
-  // NOTE: Below are duplicated from react-router. If updating these, please
-  // update the react-router and react-router-native types as well.
-  declare export type Location = {
-    pathname: string,
-    search: string,
-    hash: string,
-    state?: any,
-    key?: string,
-    ...
-  };
-
-  declare export type LocationShape = {
-    pathname?: string,
-    search?: string,
-    hash?: string,
-    state?: any,
-    ...
-  };
-
-  declare export type HistoryAction = "PUSH" | "REPLACE" | "POP";
-
-  declare export type RouterHistory = {
-    length: number,
-    location: Location,
-    action: HistoryAction,
-    listen(
-      callback: (location: Location, action: HistoryAction) => void
-    ): () => void,
-    push(path: string | LocationShape, state?: any): void,
-    replace(path: string | LocationShape, state?: any): void,
-    go(n: number): void,
-    goBack(): void,
-    goForward(): void,
-    canGo?: (n: number) => boolean,
-    block(
-      callback: string | (location: Location, action: HistoryAction) => ?string
-    ): () => void,
-    // createMemoryHistory
-    index?: number,
-    entries?: Array<Location>,
-    ...
-  };
-
-  declare export type Match = {
-    params: { [key: string]: ?string, ... },
-    isExact: boolean,
-    path: string,
-    url: string,
-    ...
-  };
-
-  declare export type ContextRouter = {|
-    history: RouterHistory,
-    location: Location,
-    match: Match,
-    staticContext?: StaticRouterContext
-  |};
-
-  declare type ContextRouterVoid = {
-    history: RouterHistory | void,
-    location: Location | void,
-    match: Match | void,
-    staticContext?: StaticRouterContext | void,
-    ...
-  };
-
-  declare export type GetUserConfirmation = (
-    message: string,
-    callback: (confirmed: boolean) => void
-  ) => void;
-
-  declare export type StaticRouterContext = { url?: string, ... };
-
-  declare export var StaticRouter: React$ComponentType<{|
-    basename?: string,
-    location?: string | Location,
-    context: StaticRouterContext,
-    children?: React$Node
-  |}>
-
-  declare export var MemoryRouter: React$ComponentType<{|
-    initialEntries?: Array<LocationShape | string>,
-    initialIndex?: number,
-    getUserConfirmation?: GetUserConfirmation,
-    keyLength?: number,
-    children?: React$Node
-  |}>
-
-  declare export var Router: React$ComponentType<{|
-    history: RouterHistory,
-    children?: React$Node
-  |}>
-
-  declare export var Prompt: React$ComponentType<{|
-    message: string | ((location: Location) => string | boolean),
-    when?: boolean
-  |}>
-
-  declare export var Redirect: React$ComponentType<{|
-    to: string | LocationShape,
-    push?: boolean,
-    from?: string,
-    exact?: boolean,
-    strict?: boolean
-  |}>
-
-  declare export var Route: React$ComponentType<{|
-    component?: React$ComponentType<*>,
-    render?: (router: ContextRouter) => React$Node,
-    children?: React$ComponentType<ContextRouter> | React$Node,
-    path?: string | Array<string>,
-    exact?: boolean,
-    strict?: boolean,
-    location?: LocationShape,
-    sensitive?: boolean
-  |}>
-
-  declare export var Switch: React$ComponentType<{|
-    children?: React$Node,
-    location?: Location
-  |}>
-
-  declare export function withRouter<Props: {...}, Component: React$ComponentType<Props>>(
-    WrappedComponent: Component
-  ): React$ComponentType<$Diff<React$ElementConfig<Component>, ContextRouterVoid>>;
-
-  declare type MatchPathOptions = {
-    path?: string,
-    exact?: boolean,
-    sensitive?: boolean,
-    strict?: boolean,
-    ...
-  };
-
-  declare export function matchPath(
-    pathname: string,
-    options?: MatchPathOptions | string,
-    parent?: Match
-  ): null | Match;
-
-  declare export function generatePath(pattern?: string, params?: Object): string;
-}

scm-ui/ui-components/flow-typed/npm/react-router-enzyme-context_vx.x.x.js

@@ -1,56 +0,0 @@
-// flow-typed signature: 030a0d51d7da2db8716b0c796bcd8992
-// flow-typed version: <<STUB>>/react-router-enzyme-context_v1.2.0/flow_v0.109.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'react-router-enzyme-context'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'react-router-enzyme-context' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'react-router-enzyme-context/dist/react-router-enzyme-context.cjs' {
-  declare module.exports: any;
-}
-
-declare module 'react-router-enzyme-context/dist/react-router-enzyme-context.esm' {
-  declare module.exports: any;
-}
-
-declare module 'react-router-enzyme-context/rollup.config' {
-  declare module.exports: any;
-}
-
-declare module 'react-router-enzyme-context/src' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'react-router-enzyme-context/dist/react-router-enzyme-context.cjs.js' {
-  declare module.exports: $Exports<'react-router-enzyme-context/dist/react-router-enzyme-context.cjs'>;
-}
-declare module 'react-router-enzyme-context/dist/react-router-enzyme-context.esm.js' {
-  declare module.exports: $Exports<'react-router-enzyme-context/dist/react-router-enzyme-context.esm'>;
-}
-declare module 'react-router-enzyme-context/rollup.config.js' {
-  declare module.exports: $Exports<'react-router-enzyme-context/rollup.config'>;
-}
-declare module 'react-router-enzyme-context/src/index' {
-  declare module.exports: $Exports<'react-router-enzyme-context/src'>;
-}
-declare module 'react-router-enzyme-context/src/index.js' {
-  declare module.exports: $Exports<'react-router-enzyme-context/src'>;
-}

scm-ui/ui-components/flow-typed/npm/react-select_vx.x.x.js

@@ -1,726 +0,0 @@
-// flow-typed signature: 0b6edc6705aa28ab46a24d08242af068
-// flow-typed version: <<STUB>>/react-select_v2.4.4/flow_v0.109.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'react-select'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'react-select' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'react-select/dist/react-select.esm' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/dist/react-select' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/dist/react-select.min' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/accessibility' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/animated' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/animated/Input' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/animated/MultiValue' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/animated/Placeholder' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/animated/SingleValue' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/animated/transitions' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/animated/ValueContainer' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/Async' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/AsyncCreatable' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/builtins' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/components/containers' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/components/Control' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/components/Group' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/components' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/components/indicators' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/components/Input' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/components/Menu' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/components/MultiValue' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/components/Option' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/components/Placeholder' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/components/SingleValue' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/Creatable' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/diacritics' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/filters' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/index.umd' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/internal/A11yText' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/internal/DummyInput' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/internal' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/internal/NodeResolver' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/internal/react-fast-compare' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/internal/ScrollBlock' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/internal/ScrollCaptor' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/internal/ScrollLock/constants' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/internal/ScrollLock' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/internal/ScrollLock/utils' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/Select' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/stateManager' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/styles' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/theme' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/types' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/lib/utils' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/__tests__/Async.test' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/__tests__/AsyncCreatable.test' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/__tests__/constants' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/__tests__/Creatable.test' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/__tests__/Select.test' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/__tests__/StateManaged.test' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/accessibility' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/animated' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/animated/Input' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/animated/MultiValue' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/animated/Placeholder' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/animated/SingleValue' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/animated/transitions' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/animated/ValueContainer' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/Async' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/AsyncCreatable' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/builtins' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/components/containers' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/components/Control' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/components/Group' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/components' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/components/indicators' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/components/Input' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/components/Menu' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/components/MultiValue' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/components/Option' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/components/Placeholder' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/components/SingleValue' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/Creatable' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/diacritics' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/filters' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/index.umd' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/internal/A11yText' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/internal/DummyInput' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/internal' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/internal/NodeResolver' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/internal/react-fast-compare' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/internal/ScrollBlock' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/internal/ScrollCaptor' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/internal/ScrollLock/constants' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/internal/ScrollLock' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/internal/ScrollLock/utils' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/Select' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/stateManager' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/styles' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/theme' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/types' {
-  declare module.exports: any;
-}
-
-declare module 'react-select/src/utils' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'react-select/dist/react-select.esm.js' {
-  declare module.exports: $Exports<'react-select/dist/react-select.esm'>;
-}
-declare module 'react-select/dist/react-select.js' {
-  declare module.exports: $Exports<'react-select/dist/react-select'>;
-}
-declare module 'react-select/dist/react-select.min.js' {
-  declare module.exports: $Exports<'react-select/dist/react-select.min'>;
-}
-declare module 'react-select/lib/accessibility/index' {
-  declare module.exports: $Exports<'react-select/lib/accessibility'>;
-}
-declare module 'react-select/lib/accessibility/index.js' {
-  declare module.exports: $Exports<'react-select/lib/accessibility'>;
-}
-declare module 'react-select/lib/animated/index' {
-  declare module.exports: $Exports<'react-select/lib/animated'>;
-}
-declare module 'react-select/lib/animated/index.js' {
-  declare module.exports: $Exports<'react-select/lib/animated'>;
-}
-declare module 'react-select/lib/animated/Input.js' {
-  declare module.exports: $Exports<'react-select/lib/animated/Input'>;
-}
-declare module 'react-select/lib/animated/MultiValue.js' {
-  declare module.exports: $Exports<'react-select/lib/animated/MultiValue'>;
-}
-declare module 'react-select/lib/animated/Placeholder.js' {
-  declare module.exports: $Exports<'react-select/lib/animated/Placeholder'>;
-}
-declare module 'react-select/lib/animated/SingleValue.js' {
-  declare module.exports: $Exports<'react-select/lib/animated/SingleValue'>;
-}
-declare module 'react-select/lib/animated/transitions.js' {
-  declare module.exports: $Exports<'react-select/lib/animated/transitions'>;
-}
-declare module 'react-select/lib/animated/ValueContainer.js' {
-  declare module.exports: $Exports<'react-select/lib/animated/ValueContainer'>;
-}
-declare module 'react-select/lib/Async.js' {
-  declare module.exports: $Exports<'react-select/lib/Async'>;
-}
-declare module 'react-select/lib/AsyncCreatable.js' {
-  declare module.exports: $Exports<'react-select/lib/AsyncCreatable'>;
-}
-declare module 'react-select/lib/builtins.js' {
-  declare module.exports: $Exports<'react-select/lib/builtins'>;
-}
-declare module 'react-select/lib/components/containers.js' {
-  declare module.exports: $Exports<'react-select/lib/components/containers'>;
-}
-declare module 'react-select/lib/components/Control.js' {
-  declare module.exports: $Exports<'react-select/lib/components/Control'>;
-}
-declare module 'react-select/lib/components/Group.js' {
-  declare module.exports: $Exports<'react-select/lib/components/Group'>;
-}
-declare module 'react-select/lib/components/index' {
-  declare module.exports: $Exports<'react-select/lib/components'>;
-}
-declare module 'react-select/lib/components/index.js' {
-  declare module.exports: $Exports<'react-select/lib/components'>;
-}
-declare module 'react-select/lib/components/indicators.js' {
-  declare module.exports: $Exports<'react-select/lib/components/indicators'>;
-}
-declare module 'react-select/lib/components/Input.js' {
-  declare module.exports: $Exports<'react-select/lib/components/Input'>;
-}
-declare module 'react-select/lib/components/Menu.js' {
-  declare module.exports: $Exports<'react-select/lib/components/Menu'>;
-}
-declare module 'react-select/lib/components/MultiValue.js' {
-  declare module.exports: $Exports<'react-select/lib/components/MultiValue'>;
-}
-declare module 'react-select/lib/components/Option.js' {
-  declare module.exports: $Exports<'react-select/lib/components/Option'>;
-}
-declare module 'react-select/lib/components/Placeholder.js' {
-  declare module.exports: $Exports<'react-select/lib/components/Placeholder'>;
-}
-declare module 'react-select/lib/components/SingleValue.js' {
-  declare module.exports: $Exports<'react-select/lib/components/SingleValue'>;
-}
-declare module 'react-select/lib/Creatable.js' {
-  declare module.exports: $Exports<'react-select/lib/Creatable'>;
-}
-declare module 'react-select/lib/diacritics.js' {
-  declare module.exports: $Exports<'react-select/lib/diacritics'>;
-}
-declare module 'react-select/lib/filters.js' {
-  declare module.exports: $Exports<'react-select/lib/filters'>;
-}
-declare module 'react-select/lib/index' {
-  declare module.exports: $Exports<'react-select/lib'>;
-}
-declare module 'react-select/lib/index.js' {
-  declare module.exports: $Exports<'react-select/lib'>;
-}
-declare module 'react-select/lib/index.umd.js' {
-  declare module.exports: $Exports<'react-select/lib/index.umd'>;
-}
-declare module 'react-select/lib/internal/A11yText.js' {
-  declare module.exports: $Exports<'react-select/lib/internal/A11yText'>;
-}
-declare module 'react-select/lib/internal/DummyInput.js' {
-  declare module.exports: $Exports<'react-select/lib/internal/DummyInput'>;
-}
-declare module 'react-select/lib/internal/index' {
-  declare module.exports: $Exports<'react-select/lib/internal'>;
-}
-declare module 'react-select/lib/internal/index.js' {
-  declare module.exports: $Exports<'react-select/lib/internal'>;
-}
-declare module 'react-select/lib/internal/NodeResolver.js' {
-  declare module.exports: $Exports<'react-select/lib/internal/NodeResolver'>;
-}
-declare module 'react-select/lib/internal/react-fast-compare.js' {
-  declare module.exports: $Exports<'react-select/lib/internal/react-fast-compare'>;
-}
-declare module 'react-select/lib/internal/ScrollBlock.js' {
-  declare module.exports: $Exports<'react-select/lib/internal/ScrollBlock'>;
-}
-declare module 'react-select/lib/internal/ScrollCaptor.js' {
-  declare module.exports: $Exports<'react-select/lib/internal/ScrollCaptor'>;
-}
-declare module 'react-select/lib/internal/ScrollLock/constants.js' {
-  declare module.exports: $Exports<'react-select/lib/internal/ScrollLock/constants'>;
-}
-declare module 'react-select/lib/internal/ScrollLock/index' {
-  declare module.exports: $Exports<'react-select/lib/internal/ScrollLock'>;
-}
-declare module 'react-select/lib/internal/ScrollLock/index.js' {
-  declare module.exports: $Exports<'react-select/lib/internal/ScrollLock'>;
-}
-declare module 'react-select/lib/internal/ScrollLock/utils.js' {
-  declare module.exports: $Exports<'react-select/lib/internal/ScrollLock/utils'>;
-}
-declare module 'react-select/lib/Select.js' {
-  declare module.exports: $Exports<'react-select/lib/Select'>;
-}
-declare module 'react-select/lib/stateManager.js' {
-  declare module.exports: $Exports<'react-select/lib/stateManager'>;
-}
-declare module 'react-select/lib/styles.js' {
-  declare module.exports: $Exports<'react-select/lib/styles'>;
-}
-declare module 'react-select/lib/theme.js' {
-  declare module.exports: $Exports<'react-select/lib/theme'>;
-}
-declare module 'react-select/lib/types.js' {
-  declare module.exports: $Exports<'react-select/lib/types'>;
-}
-declare module 'react-select/lib/utils.js' {
-  declare module.exports: $Exports<'react-select/lib/utils'>;
-}
-declare module 'react-select/src/__tests__/Async.test.js' {
-  declare module.exports: $Exports<'react-select/src/__tests__/Async.test'>;
-}
-declare module 'react-select/src/__tests__/AsyncCreatable.test.js' {
-  declare module.exports: $Exports<'react-select/src/__tests__/AsyncCreatable.test'>;
-}
-declare module 'react-select/src/__tests__/constants.js' {
-  declare module.exports: $Exports<'react-select/src/__tests__/constants'>;
-}
-declare module 'react-select/src/__tests__/Creatable.test.js' {
-  declare module.exports: $Exports<'react-select/src/__tests__/Creatable.test'>;
-}
-declare module 'react-select/src/__tests__/Select.test.js' {
-  declare module.exports: $Exports<'react-select/src/__tests__/Select.test'>;
-}
-declare module 'react-select/src/__tests__/StateManaged.test.js' {
-  declare module.exports: $Exports<'react-select/src/__tests__/StateManaged.test'>;
-}
-declare module 'react-select/src/accessibility/index' {
-  declare module.exports: $Exports<'react-select/src/accessibility'>;
-}
-declare module 'react-select/src/accessibility/index.js' {
-  declare module.exports: $Exports<'react-select/src/accessibility'>;
-}
-declare module 'react-select/src/animated/index' {
-  declare module.exports: $Exports<'react-select/src/animated'>;
-}
-declare module 'react-select/src/animated/index.js' {
-  declare module.exports: $Exports<'react-select/src/animated'>;
-}
-declare module 'react-select/src/animated/Input.js' {
-  declare module.exports: $Exports<'react-select/src/animated/Input'>;
-}
-declare module 'react-select/src/animated/MultiValue.js' {
-  declare module.exports: $Exports<'react-select/src/animated/MultiValue'>;
-}
-declare module 'react-select/src/animated/Placeholder.js' {
-  declare module.exports: $Exports<'react-select/src/animated/Placeholder'>;
-}
-declare module 'react-select/src/animated/SingleValue.js' {
-  declare module.exports: $Exports<'react-select/src/animated/SingleValue'>;
-}
-declare module 'react-select/src/animated/transitions.js' {
-  declare module.exports: $Exports<'react-select/src/animated/transitions'>;
-}
-declare module 'react-select/src/animated/ValueContainer.js' {
-  declare module.exports: $Exports<'react-select/src/animated/ValueContainer'>;
-}
-declare module 'react-select/src/Async.js' {
-  declare module.exports: $Exports<'react-select/src/Async'>;
-}
-declare module 'react-select/src/AsyncCreatable.js' {
-  declare module.exports: $Exports<'react-select/src/AsyncCreatable'>;
-}
-declare module 'react-select/src/builtins.js' {
-  declare module.exports: $Exports<'react-select/src/builtins'>;
-}
-declare module 'react-select/src/components/containers.js' {
-  declare module.exports: $Exports<'react-select/src/components/containers'>;
-}
-declare module 'react-select/src/components/Control.js' {
-  declare module.exports: $Exports<'react-select/src/components/Control'>;
-}
-declare module 'react-select/src/components/Group.js' {
-  declare module.exports: $Exports<'react-select/src/components/Group'>;
-}
-declare module 'react-select/src/components/index' {
-  declare module.exports: $Exports<'react-select/src/components'>;
-}
-declare module 'react-select/src/components/index.js' {
-  declare module.exports: $Exports<'react-select/src/components'>;
-}
-declare module 'react-select/src/components/indicators.js' {
-  declare module.exports: $Exports<'react-select/src/components/indicators'>;
-}
-declare module 'react-select/src/components/Input.js' {
-  declare module.exports: $Exports<'react-select/src/components/Input'>;
-}
-declare module 'react-select/src/components/Menu.js' {
-  declare module.exports: $Exports<'react-select/src/components/Menu'>;
-}
-declare module 'react-select/src/components/MultiValue.js' {
-  declare module.exports: $Exports<'react-select/src/components/MultiValue'>;
-}
-declare module 'react-select/src/components/Option.js' {
-  declare module.exports: $Exports<'react-select/src/components/Option'>;
-}
-declare module 'react-select/src/components/Placeholder.js' {
-  declare module.exports: $Exports<'react-select/src/components/Placeholder'>;
-}
-declare module 'react-select/src/components/SingleValue.js' {
-  declare module.exports: $Exports<'react-select/src/components/SingleValue'>;
-}
-declare module 'react-select/src/Creatable.js' {
-  declare module.exports: $Exports<'react-select/src/Creatable'>;
-}
-declare module 'react-select/src/diacritics.js' {
-  declare module.exports: $Exports<'react-select/src/diacritics'>;
-}
-declare module 'react-select/src/filters.js' {
-  declare module.exports: $Exports<'react-select/src/filters'>;
-}
-declare module 'react-select/src/index' {
-  declare module.exports: $Exports<'react-select/src'>;
-}
-declare module 'react-select/src/index.js' {
-  declare module.exports: $Exports<'react-select/src'>;
-}
-declare module 'react-select/src/index.umd.js' {
-  declare module.exports: $Exports<'react-select/src/index.umd'>;
-}
-declare module 'react-select/src/internal/A11yText.js' {
-  declare module.exports: $Exports<'react-select/src/internal/A11yText'>;
-}
-declare module 'react-select/src/internal/DummyInput.js' {
-  declare module.exports: $Exports<'react-select/src/internal/DummyInput'>;
-}
-declare module 'react-select/src/internal/index' {
-  declare module.exports: $Exports<'react-select/src/internal'>;
-}
-declare module 'react-select/src/internal/index.js' {
-  declare module.exports: $Exports<'react-select/src/internal'>;
-}
-declare module 'react-select/src/internal/NodeResolver.js' {
-  declare module.exports: $Exports<'react-select/src/internal/NodeResolver'>;
-}
-declare module 'react-select/src/internal/react-fast-compare.js' {
-  declare module.exports: $Exports<'react-select/src/internal/react-fast-compare'>;
-}
-declare module 'react-select/src/internal/ScrollBlock.js' {
-  declare module.exports: $Exports<'react-select/src/internal/ScrollBlock'>;
-}
-declare module 'react-select/src/internal/ScrollCaptor.js' {
-  declare module.exports: $Exports<'react-select/src/internal/ScrollCaptor'>;
-}
-declare module 'react-select/src/internal/ScrollLock/constants.js' {
-  declare module.exports: $Exports<'react-select/src/internal/ScrollLock/constants'>;
-}
-declare module 'react-select/src/internal/ScrollLock/index' {
-  declare module.exports: $Exports<'react-select/src/internal/ScrollLock'>;
-}
-declare module 'react-select/src/internal/ScrollLock/index.js' {
-  declare module.exports: $Exports<'react-select/src/internal/ScrollLock'>;
-}
-declare module 'react-select/src/internal/ScrollLock/utils.js' {
-  declare module.exports: $Exports<'react-select/src/internal/ScrollLock/utils'>;
-}
-declare module 'react-select/src/Select.js' {
-  declare module.exports: $Exports<'react-select/src/Select'>;
-}
-declare module 'react-select/src/stateManager.js' {
-  declare module.exports: $Exports<'react-select/src/stateManager'>;
-}
-declare module 'react-select/src/styles.js' {
-  declare module.exports: $Exports<'react-select/src/styles'>;
-}
-declare module 'react-select/src/theme.js' {
-  declare module.exports: $Exports<'react-select/src/theme'>;
-}
-declare module 'react-select/src/types.js' {
-  declare module.exports: $Exports<'react-select/src/types'>;
-}
-declare module 'react-select/src/utils.js' {
-  declare module.exports: $Exports<'react-select/src/utils'>;
-}

scm-ui/ui-components/flow-typed/npm/styled-components_v4.x.x.js

@@ -1,484 +0,0 @@
-// flow-typed signature: a55c22479779e4f28ad4dd10c702882a
-// flow-typed version: a29423bb31/styled-components_v4.x.x/flow_>=v0.104.x
-
-// @flow
-
-declare module 'styled-components' {
-  declare type BuiltinElementInstances = {
-    a: React$ElementRef<'a'>,
-    abbr: React$ElementRef<'abbr'>,
-    address: React$ElementRef<'address'>,
-    area: React$ElementRef<'area'>,
-    article: React$ElementRef<'article'>,
-    aside: React$ElementRef<'aside'>,
-    audio: React$ElementRef<'audio'>,
-    b: React$ElementRef<'b'>,
-    base: React$ElementRef<'base'>,
-    bdi: React$ElementRef<'bdi'>,
-    bdo: React$ElementRef<'bdo'>,
-    big: React$ElementRef<'big'>,
-    blockquote: React$ElementRef<'blockquote'>,
-    body: React$ElementRef<'body'>,
-    br: React$ElementRef<'br'>,
-    button: React$ElementRef<'button'>,
-    canvas: React$ElementRef<'canvas'>,
-    caption: React$ElementRef<'caption'>,
-    cite: React$ElementRef<'cite'>,
-    code: React$ElementRef<'code'>,
-    col: React$ElementRef<'col'>,
-    colgroup: React$ElementRef<'colgroup'>,
-    data: React$ElementRef<'data'>,
-    datalist: React$ElementRef<'datalist'>,
-    dd: React$ElementRef<'dd'>,
-    del: React$ElementRef<'del'>,
-    details: React$ElementRef<'details'>,
-    dfn: React$ElementRef<'dfn'>,
-    dialog: React$ElementRef<'dialog'>,
-    div: React$ElementRef<'div'>,
-    dl: React$ElementRef<'dl'>,
-    dt: React$ElementRef<'dt'>,
-    em: React$ElementRef<'em'>,
-    embed: React$ElementRef<'embed'>,
-    fieldset: React$ElementRef<'fieldset'>,
-    figcaption: React$ElementRef<'figcaption'>,
-    figure: React$ElementRef<'figure'>,
-    footer: React$ElementRef<'footer'>,
-    form: React$ElementRef<'form'>,
-    h1: React$ElementRef<'h1'>,
-    h2: React$ElementRef<'h2'>,
-    h3: React$ElementRef<'h3'>,
-    h4: React$ElementRef<'h4'>,
-    h5: React$ElementRef<'h5'>,
-    h6: React$ElementRef<'h6'>,
-    head: React$ElementRef<'head'>,
-    header: React$ElementRef<'header'>,
-    hgroup: React$ElementRef<'hgroup'>,
-    hr: React$ElementRef<'hr'>,
-    html: React$ElementRef<'html'>,
-    i: React$ElementRef<'i'>,
-    iframe: React$ElementRef<'iframe'>,
-    img: React$ElementRef<'img'>,
-    input: React$ElementRef<'input'>,
-    ins: React$ElementRef<'ins'>,
-    kbd: React$ElementRef<'kbd'>,
-    label: React$ElementRef<'label'>,
-    legend: React$ElementRef<'legend'>,
-    li: React$ElementRef<'li'>,
-    link: React$ElementRef<'link'>,
-    main: React$ElementRef<'main'>,
-    map: React$ElementRef<'map'>,
-    mark: React$ElementRef<'mark'>,
-    menu: React$ElementRef<'menu'>,
-    meta: React$ElementRef<'meta'>,
-    meter: React$ElementRef<'meter'>,
-    nav: React$ElementRef<'nav'>,
-    noscript: React$ElementRef<'noscript'>,
-    object: React$ElementRef<'object'>,
-    ol: React$ElementRef<'ol'>,
-    optgroup: React$ElementRef<'optgroup'>,
-    option: React$ElementRef<'option'>,
-    output: React$ElementRef<'output'>,
-    p: React$ElementRef<'p'>,
-    param: React$ElementRef<'param'>,
-    picture: React$ElementRef<'picture'>,
-    pre: React$ElementRef<'pre'>,
-    progress: React$ElementRef<'progress'>,
-    q: React$ElementRef<'q'>,
-    rp: React$ElementRef<'rp'>,
-    rt: React$ElementRef<'rt'>,
-    ruby: React$ElementRef<'ruby'>,
-    s: React$ElementRef<'s'>,
-    samp: React$ElementRef<'samp'>,
-    script: React$ElementRef<'script'>,
-    section: React$ElementRef<'section'>,
-    select: React$ElementRef<'select'>,
-    small: React$ElementRef<'small'>,
-    source: React$ElementRef<'source'>,
-    span: React$ElementRef<'span'>,
-    strong: React$ElementRef<'strong'>,
-    style: React$ElementRef<'style'>,
-    sub: React$ElementRef<'sub'>,
-    summary: React$ElementRef<'summary'>,
-    sup: React$ElementRef<'sup'>,
-    table: React$ElementRef<'table'>,
-    tbody: React$ElementRef<'tbody'>,
-    td: React$ElementRef<'td'>,
-    textarea: React$ElementRef<'textarea'>,
-    tfoot: React$ElementRef<'tfoot'>,
-    th: React$ElementRef<'th'>,
-    thead: React$ElementRef<'thead'>,
-    time: React$ElementRef<'time'>,
-    title: React$ElementRef<'title'>,
-    tr: React$ElementRef<'tr'>,
-    track: React$ElementRef<'track'>,
-    u: React$ElementRef<'u'>,
-    ul: React$ElementRef<'ul'>,
-    var: React$ElementRef<'var'>,
-    video: React$ElementRef<'video'>,
-    wbr: React$ElementRef<'wbr'>,
-    // SVG
-    circle: React$ElementRef<'circle'>,
-    clipPath: React$ElementRef<'clipPath'>,
-    defs: React$ElementRef<'defs'>,
-    ellipse: React$ElementRef<'ellipse'>,
-    g: React$ElementRef<'g'>,
-    image: React$ElementRef<'image'>,
-    line: React$ElementRef<'line'>,
-    linearGradient: React$ElementRef<'linearGradient'>,
-    mask: React$ElementRef<'mask'>,
-    path: React$ElementRef<'path'>,
-    pattern: React$ElementRef<'pattern'>,
-    polygon: React$ElementRef<'polygon'>,
-    polyline: React$ElementRef<'polyline'>,
-    radialGradient: React$ElementRef<'radialGradient'>,
-    rect: React$ElementRef<'rect'>,
-    stop: React$ElementRef<'stop'>,
-    svg: React$ElementRef<'svg'>,
-    text: React$ElementRef<'text'>,
-    tspan: React$ElementRef<'tspan'>,
-    // Deprecated, should be HTMLUnknownElement, but Flow doesn't support it
-    keygen: React$ElementRef<'keygen'>,
-    menuitem: React$ElementRef<'menuitem'>,
-    ...
-  }
-
-  declare type BuiltinElementType<ElementName: string> = $ElementType<BuiltinElementInstances, ElementName>
-
-  declare class InterpolatableComponent<P> extends React$Component<P> {
-    static +styledComponentId: string;
-  }
-
-  declare export type Interpolation<P> =
-    | ((executionContext: P) =>
-      | ((executionContext: P) => InterpolationBase)
-      | InterpolationBase
-    )
-    | Class<InterpolatableComponent<mixed>>
-    | InterpolationBase
-
-  declare export type InterpolationBase =
-    | CSSRules
-    | KeyFrames
-    | string
-    | number
-
-
-  // Should this be `mixed` perhaps?
-  declare export type CSSRules = Interpolation<any>[] // eslint-disable-line flowtype/no-weak-types
-
-  // This is not exported on purpose, since it's an implementation detail
-  declare type TaggedTemplateLiteral<I, R> = (strings: string[], ...interpolations: Interpolation<I>[]) => R
-
-  declare export type CSSConstructor = TaggedTemplateLiteral<any, CSSRules> // eslint-disable-line flowtype/no-weak-types
-  declare export type KeyFramesConstructor = TaggedTemplateLiteral<any, KeyFrames> // eslint-disable-line flowtype/no-weak-types
-  declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral<any, React$ComponentType<*>> // eslint-disable-line flowtype/no-weak-types
-
-  declare interface Tag<T> {
-    styleTag: HTMLStyleElement | null;
-    getIds(): string[];
-    hasNameForId(id: string, name: string): boolean;
-    insertMarker(id: string): T;
-    insertRules(id: string, cssRules: string[], name: ?string): void;
-    removeRules(id: string): void;
-    css(): string;
-    toHTML(additionalAttrs: ?string): string;
-    toElement(): React$Element<*>;
-    clone(): Tag<T>;
-    sealed: boolean;
-  }
-
-  // The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over
-  declare export class StyleSheet {
-    static get master() : StyleSheet;
-    static get instance() : StyleSheet;
-    static reset(forceServer? : boolean) : void;
-
-    id : number;
-    forceServer : boolean;
-    target : ?HTMLElement;
-    tagMap : { [string]: Tag<any>, ... }; // eslint-disable-line flowtype/no-weak-types
-    deferred: { [string]: string[] | void, ... };
-    rehydratedNames: { [string]: boolean, ... };
-    ignoreRehydratedNames: { [string]: boolean, ... };
-    tags: Tag<any>[]; // eslint-disable-line flowtype/no-weak-types
-    importRuleTag: Tag<any>; // eslint-disable-line flowtype/no-weak-types
-    capacity: number;
-    clones: StyleSheet[];
-
-    constructor(?HTMLElement) : this;
-    rehydrate() : this;
-    clone() : StyleSheet;
-    sealAllTags() : void;
-    makeTag(tag : ?Tag<any>) : Tag<any>; // eslint-disable-line flowtype/no-weak-types
-    getImportRuleTag() : Tag<any>; // eslint-disable-line flowtype/no-weak-types
-    getTagForId(id : string): Tag<any>; // eslint-disable-line flowtype/no-weak-types
-    hasId(id: string) : boolean;
-    hasNameForId(id: string, name: string) : boolean;
-    deferredInject(id : string, cssRules : string[]) : void;
-    inject(id: string, cssRules : string[], name? : string) : void;
-    remove(id : string) : void;
-    toHtml() : string;
-    toReactElements() : React$ElementType[];
-  }
-
-  declare export class KeyFrames {
-    id : string;
-    name : string;
-    rules : string[];
-
-    constructor(name : string, rules : string[]) : this;
-    inject(StyleSheet) : void;
-    toString() : string;
-    getName() : string;
-  }
-
-  // I think any is appropriate here?
-  // eslint-disable-next-line flowtype/no-weak-types
-  declare export var css : CSSConstructor;
-  declare export var keyframes : KeyFramesConstructor;
-  declare export var createGlobalStyle : CreateGlobalStyleConstructor
-  declare export var ThemeProvider: React$ComponentType<{
-    children?: ?React$Node,
-    theme: mixed | (mixed) => mixed,
-    ...
-  }>
-
-  declare type ThemeProps<T> = {|
-    theme: T
-  |}
-
-  declare type PropsWithTheme<Props, T> = {|
-    ...ThemeProps<T>,
-    ...$Exact<Props>
-  |}
-
-  declare export function withTheme<Theme, Config: {...}, Instance>(Component: React$AbstractComponent<Config, Instance>): React$AbstractComponent<$Diff<Config, ThemeProps<Theme | void>>, Instance>
-
-  declare export type StyledComponent<Props, Theme, Instance> = React$AbstractComponent<Props, Instance> & Class<InterpolatableComponent<Props>>
-
-  declare type StyledFactory<StyleProps, Theme, Instance> = {|
-    [[call]]: TaggedTemplateLiteral<PropsWithTheme<StyleProps, Theme>, StyledComponent<StyleProps, Theme, Instance>>;
-    +attrs: <A: {...}>(((StyleProps) => A) | A) => TaggedTemplateLiteral<
-      PropsWithTheme<{|...$Exact<StyleProps>, ...$Exact<A>|}, Theme>,
-      StyledComponent<React$Config<{|...$Exact<StyleProps>, ...$Exact<A>|}, $Exact<A>>, Theme, Instance>
-    >;
-  |}
-
-  declare type StyledShorthandFactory<V> = {|
-    [[call]]: <StyleProps, Theme>(string[], ...Interpolation<PropsWithTheme<StyleProps, Theme>>[]) => StyledComponent<StyleProps, Theme, V>;
-    +attrs: <A: {...}, StyleProps = {||}, Theme = {||}>(((StyleProps) => A) | A) => TaggedTemplateLiteral<
-      PropsWithTheme<{|...$Exact<StyleProps>, ...$Exact<A>|}, Theme>,
-      StyledComponent<React$Config<{|...$Exact<StyleProps>, ...$Exact<A>|}, $Exact<A>>, Theme, V>
-    >;
-  |}
-
-
-  declare type ConvenientShorthands = $ObjMap<
-    BuiltinElementInstances,
-    <V>(V) => StyledShorthandFactory<V>
-  >
-
-  declare interface Styled {
-    <StyleProps, Theme, ElementName: $Keys<BuiltinElementInstances>>(ElementName): StyledFactory<StyleProps, Theme, BuiltinElementType<ElementName>>;
-    <Comp: React$ComponentType<any>, Theme, OwnProps = React$ElementConfig<Comp>>(Comp): StyledFactory<{|...$Exact<OwnProps>|}, Theme, Comp>;
-  }
-
-  declare export default Styled & ConvenientShorthands
-}
-
-
-declare module 'styled-components/native' {
-
-  declare class InterpolatableComponent<P> extends React$Component<P> {
-    static +styledComponentId: string;
-  }
-
-  declare export type Interpolation<P> =
-    | ((executionContext: P) =>
-      | ((executionContext: P) => InterpolationBase) // eslint-disable-line flowtype/no-weak-types
-      | InterpolationBase
-    )
-    | Class<InterpolatableComponent<mixed>>
-    | InterpolationBase
-
-  declare export type InterpolationBase =
-    | CSSRules
-    | KeyFrames
-    | string
-    | number
-
-  // Should this be `mixed` perhaps?
-  declare export type CSSRules = Interpolation<any>[] // eslint-disable-line flowtype/no-weak-types
-
-  // This is not exported on purpose, since it's an implementation detail
-  declare type TaggedTemplateLiteral<I, R> = (strings: string[], ...interpolations: Interpolation<I>[]) => R
-
-  declare export type CSSConstructor = TaggedTemplateLiteral<any, CSSRules> // eslint-disable-line flowtype/no-weak-types
-  declare export type KeyFramesConstructor = TaggedTemplateLiteral<any, KeyFrames> // eslint-disable-line flowtype/no-weak-types
-  declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral<any, React$ComponentType<*>> // eslint-disable-line flowtype/no-weak-types
-
-  declare interface Tag<T> {
-    styleTag: HTMLStyleElement | null;
-    getIds(): string[];
-    hasNameForId(id: string, name: string): boolean;
-    insertMarker(id: string): T;
-    insertRules(id: string, cssRules: string[], name: ?string): void;
-    removeRules(id: string): void;
-    css(): string;
-    toHTML(additionalAttrs: ?string): string;
-    toElement(): React$Element<*>;
-    clone(): Tag<T>;
-    sealed: boolean;
-  }
-
-  // The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over
-  declare export class StyleSheet {
-    static get master() : StyleSheet;
-    static get instance() : StyleSheet;
-    static reset(forceServer? : boolean) : void;
-
-    id : number;
-    forceServer : boolean;
-    target : ?HTMLElement;
-    tagMap : { [string]: Tag<any>, ... }; // eslint-disable-line flowtype/no-weak-types
-    deferred: { [string]: string[] | void, ... };
-    rehydratedNames: { [string]: boolean, ... };
-    ignoreRehydratedNames: { [string]: boolean, ... };
-    tags: Tag<any>[]; // eslint-disable-line flowtype/no-weak-types
-    importRuleTag: Tag<any>; // eslint-disable-line flowtype/no-weak-types
-    capacity: number;
-    clones: StyleSheet[];
-
-    constructor(?HTMLElement) : this;
-    rehydrate() : this;
-    clone() : StyleSheet;
-    sealAllTags() : void;
-    makeTag(tag : ?Tag<any>) : Tag<any>; // eslint-disable-line flowtype/no-weak-types
-    getImportRuleTag() : Tag<any>; // eslint-disable-line flowtype/no-weak-types
-    getTagForId(id : string): Tag<any>; // eslint-disable-line flowtype/no-weak-types
-    hasId(id: string) : boolean;
-    hasNameForId(id: string, name: string) : boolean;
-    deferredInject(id : string, cssRules : string[]) : void;
-    inject(id: string, cssRules : string[], name? : string) : void;
-    remove(id : string) : void;
-    toHtml() : string;
-    toReactElements() : React$ElementType[];
-  }
-
-  declare export class KeyFrames {
-    id : string;
-    name : string;
-    rules : string[];
-
-    constructor(name : string, rules : string[]) : this;
-    inject(StyleSheet) : void;
-    toString() : string;
-    getName() : string;
-  }
-
-  // I think any is appropriate here?
-  // eslint-disable-next-line flowtype/no-weak-types
-  declare export var css : CSSConstructor;
-  declare export var keyframes : KeyFramesConstructor;
-  declare export var createGlobalStyle : CreateGlobalStyleConstructor
-  declare export var ThemeProvider: React$ComponentType<{
-    children?: ?React$Node,
-    theme: mixed | (mixed) => mixed,
-    ...
-  }>
-
-  declare type ThemeProps<T> = {|
-    theme: T
-  |}
-
-  declare type PropsWithTheme<Props, T> = {|
-    ...ThemeProps<T>,
-    ...$Exact<Props>
-  |}
-
-  declare export function withTheme<Theme, Config: {...}, Instance>(Component: React$AbstractComponent<Config, Instance>): React$AbstractComponent<$Diff<Config, ThemeProps<Theme | void>>, Instance>
-
-  declare export type StyledComponent<Props, Theme, Instance> = React$AbstractComponent<Props, Instance> & Class<InterpolatableComponent<Props>>
-
-  declare type StyledFactory<StyleProps, Theme, Instance> = {|
-    [[call]]: TaggedTemplateLiteral<PropsWithTheme<StyleProps, Theme>, StyledComponent<StyleProps, Theme, Instance>>;
-    +attrs: <A: {...}>(((StyleProps) => A) | A) => TaggedTemplateLiteral<
-      PropsWithTheme<{|...$Exact<StyleProps>, ...$Exact<A>|}, Theme>,
-      StyledComponent<React$Config<{|...$Exact<StyleProps>, ...$Exact<A>|}, $Exact<A>>, Theme, Instance>
-    >;
-  |}
-
-  declare type StyledShorthandFactory<V> = {|
-    [[call]]: <StyleProps, Theme>(string[], ...Interpolation<PropsWithTheme<StyleProps, Theme>>[]) => StyledComponent<StyleProps, Theme, V>;
-    +attrs: <A: {...}, StyleProps = {||}, Theme = {||}>(((StyleProps) => A) | A) => TaggedTemplateLiteral<
-      PropsWithTheme<{|...$Exact<StyleProps>, ...$Exact<A>|}, Theme>,
-      StyledComponent<React$Config<{|...$Exact<StyleProps>, ...$Exact<A>|}, $Exact<A>>, Theme, V>
-    >;
-  |}
-
-  declare type BuiltinElementInstances = {
-    ActivityIndicator:             React$ComponentType<{...}>,
-    ActivityIndicatorIOS:          React$ComponentType<{...}>,
-    ART:                           React$ComponentType<{...}>,
-    Button:                        React$ComponentType<{...}>,
-    DatePickerIOS:                 React$ComponentType<{...}>,
-    DrawerLayoutAndroid:           React$ComponentType<{...}>,
-    Image:                         React$ComponentType<{...}>,
-    ImageBackground:               React$ComponentType<{...}>,
-    ImageEditor:                   React$ComponentType<{...}>,
-    ImageStore:                    React$ComponentType<{...}>,
-    KeyboardAvoidingView:          React$ComponentType<{...}>,
-    ListView:                      React$ComponentType<{...}>,
-    MapView:                       React$ComponentType<{...}>,
-    Modal:                         React$ComponentType<{...}>,
-    NavigatorIOS:                  React$ComponentType<{...}>,
-    Picker:                        React$ComponentType<{...}>,
-    PickerIOS:                     React$ComponentType<{...}>,
-    ProgressBarAndroid:            React$ComponentType<{...}>,
-    ProgressViewIOS:               React$ComponentType<{...}>,
-    ScrollView:                    React$ComponentType<{...}>,
-    SegmentedControlIOS:           React$ComponentType<{...}>,
-    Slider:                        React$ComponentType<{...}>,
-    SliderIOS:                     React$ComponentType<{...}>,
-    SnapshotViewIOS:               React$ComponentType<{...}>,
-    Switch:                        React$ComponentType<{...}>,
-    RecyclerViewBackedScrollView:  React$ComponentType<{...}>,
-    RefreshControl:                React$ComponentType<{...}>,
-    SafeAreaView:                  React$ComponentType<{...}>,
-    StatusBar:                     React$ComponentType<{...}>,
-    SwipeableListView:             React$ComponentType<{...}>,
-    SwitchAndroid:                 React$ComponentType<{...}>,
-    SwitchIOS:                     React$ComponentType<{...}>,
-    TabBarIOS:                     React$ComponentType<{...}>,
-    Text:                          React$ComponentType<{...}>,
-    TextInput:                     React$ComponentType<{...}>,
-    ToastAndroid:                  React$ComponentType<{...}>,
-    ToolbarAndroid:                React$ComponentType<{...}>,
-    Touchable:                     React$ComponentType<{...}>,
-    TouchableHighlight:            React$ComponentType<{...}>,
-    TouchableNativeFeedback:       React$ComponentType<{...}>,
-    TouchableOpacity:              React$ComponentType<{...}>,
-    TouchableWithoutFeedback:      React$ComponentType<{...}>,
-    View:                          React$ComponentType<{...}>,
-    ViewPagerAndroid:              React$ComponentType<{...}>,
-    WebView:                       React$ComponentType<{...}>,
-    FlatList:                      React$ComponentType<{...}>,
-    SectionList:                   React$ComponentType<{...}>,
-    VirtualizedList:               React$ComponentType<{...}>,
-    ...
-  }
-
-  declare type BuiltinElementType<ElementName: string> = $ElementType<BuiltinElementInstances, ElementName>
-
-  declare type ConvenientShorthands = $ObjMap<
-    BuiltinElementInstances,
-    <V>(V) => StyledShorthandFactory<V>
-  >
-
-  declare interface Styled {
-    <StyleProps, Theme, ElementName: $Keys<BuiltinElementInstances>>(ElementName): StyledFactory<StyleProps, Theme, BuiltinElementType<ElementName>>;
-    <Comp: React$ComponentType<any>, Theme, OwnProps = React$ElementConfig<Comp>>(Comp): StyledFactory<{|...$Exact<OwnProps>|}, Theme, Comp>;
-  }
-
-  declare export default Styled & ConvenientShorthands
-}

scm-ui/ui-components/package.json

@@ -12,6 +12,7 @@
   "license": "BSD-3-Clause",
   "scripts": {
     "test": "jest",
+    "typecheck": "tsc",
     "storybook": "start-storybook -s ../ui-webapp/public",
     "storyshots": "jest --testPathPattern=\"storyshots.test.ts\" --collectCoverage=false",
     "update-storyshots": "jest --testPathPattern=\"storyshots.test.ts\" --collectCoverage=false -u"
@@ -21,6 +22,19 @@
     "@storybook/addon-actions": "^5.2.3",
     "@storybook/addon-storyshots": "^5.2.3",
     "@storybook/react": "^5.2.3",
+    "@types/classnames": "^2.2.9",
+    "@types/enzyme": "^3.10.3",
+    "@types/fetch-mock": "^7.3.1",
+    "@types/jest": "^24.0.19",
+    "@types/query-string": "5",
+    "@types/react": "^16.9.9",
+    "@types/react-dom": "^16.9.2",
+    "@types/react-i18next": "^7.8.3",
+    "@types/react-router-dom": "^5.1.0",
+    "@types/react-select": "^2.0.19",
+    "@types/react-syntax-highlighter": "^11.0.1",
+    "@types/storybook__addon-storyshots": "^5.1.1",
+    "@types/styled-components": "^4.1.19",
     "enzyme-context": "^1.1.2",
     "enzyme-context-react-router-4": "^2.0.0",
     "fetch-mock": "^7.5.1",
@@ -28,7 +42,8 @@
     "flow-typed": "^2.5.1",
     "raf": "^3.4.0",
     "react-test-renderer": "^16.10.2",
-    "storybook-addon-i18next": "^1.2.1"
+    "storybook-addon-i18next": "^1.2.1",
+    "typescript": "^3.6.4"
   },
   "dependencies": {
     "@scm-manager/ui-extensions": "^2.0.0-SNAPSHOT",

scm-ui/ui-components/src/Autocomplete.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React from "react";
-import { Async, AsyncCreatable } from 'react-select';
+import { Async, AsyncCreatable } from "react-select";
-import { AutocompleteObject, SelectValue } from '@scm-manager/ui-types';
+import { SelectValue } from "@scm-manager/ui-types";
-import LabelWithHelpIcon from './forms/LabelWithHelpIcon';
+import LabelWithHelpIcon from "./forms/LabelWithHelpIcon";
+import { ActionMeta, ValueType } from "react-select/lib/types";
 
 type Props = {
-  loadSuggestions: (p: string) => Promise<AutocompleteObject>;
+  loadSuggestions: (p: string) => Promise<SelectValue[]>;
   valueSelected: (p: SelectValue) => void;
   label: string;
   helpText?: string;
@@ -19,25 +20,32 @@ type State = {};
 
 class Autocomplete extends React.Component<Props, State> {
   static defaultProps = {
-    placeholder: 'Type here',
+    placeholder: "Type here",
-    loadingMessage: 'Loading...',
+    loadingMessage: "Loading...",
-    noOptionsMessage: 'No suggestion available',
+    noOptionsMessage: "No suggestion available"
   };
 
-  handleInputChange = (newValue: SelectValue) => {
+  handleInputChange = (
-    this.props.valueSelected(newValue);
+    newValue: ValueType<SelectValue>,
+    action: ActionMeta
+  ) => {
+    this.selectValue(newValue as SelectValue);
+  };
+
+  selectValue = (value: SelectValue) => {
+    this.props.valueSelected(value);
   };
 
   // We overwrite this to avoid running into a bug (https://github.com/JedWatson/react-select/issues/2944)
   isValidNewOption = (
     inputValue: string,
-    selectValue: SelectValue,
+    selectValue: ValueType<SelectValue>,
-    selectOptions: SelectValue[],
+    selectOptions: readonly SelectValue[]
-  ) => {
+  ): boolean => {
     const isNotDuplicated = !selectOptions
       .map(option => option.label)
       .includes(inputValue);
-    const isNotEmpty = inputValue !== '';
+    const isNotEmpty = inputValue !== "";
     return isNotEmpty && isNotDuplicated;
   };
 
@@ -50,7 +58,7 @@ class Autocomplete extends React.Component<Props, State> {
       loadingMessage,
       noOptionsMessage,
       loadSuggestions,
-      creatable,
+      creatable
     } = this.props;
     return (
       <div className="field">
@@ -67,12 +75,12 @@ class Autocomplete extends React.Component<Props, State> {
               noOptionsMessage={() => noOptionsMessage}
               isValidNewOption={this.isValidNewOption}
               onCreateOption={value => {
-                this.handleInputChange({
+                this.selectValue({
                   label: value,
                   value: {
                     id: value,
-                    displayName: value,
+                    displayName: value
-                  },
+                  }
                 });
               }}
             />

scm-ui/ui-components/src/BackendErrorNotification.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from "react";
-import { BackendError } from './errors';
+import { BackendError } from "./errors";
-import Notification from './Notification';
+import Notification from "./Notification";
 
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
 
 type Props = {
   error: BackendError;
@@ -29,7 +29,7 @@ class BackendErrorNotification extends React.Component<Props> {
 
   renderErrorName = () => {
     const { error, t } = this.props;
-    const translation = t('errors.' + error.errorCode + '.displayName');
+    const translation = t("errors." + error.errorCode + ".displayName");
     if (translation === error.errorCode) {
       return error.message;
     }
@@ -38,9 +38,9 @@ class BackendErrorNotification extends React.Component<Props> {
 
   renderErrorDescription = () => {
     const { error, t } = this.props;
-    const translation = t('errors.' + error.errorCode + '.description');
+    const translation = t("errors." + error.errorCode + ".description");
     if (translation === error.errorCode) {
-      return '';
+      return "";
     }
     return translation;
   };
@@ -51,7 +51,7 @@ class BackendErrorNotification extends React.Component<Props> {
       return (
         <>
           <p>
-            <strong>{t('errors.violations')}</strong>
+            <strong>{t("errors.violations")}</strong>
           </p>
           <ul>
             {error.violations.map((violation, index) => {
@@ -75,10 +75,10 @@ class BackendErrorNotification extends React.Component<Props> {
         {this.renderMoreInformationLink()}
         <div className="level is-size-7">
           <div className="left">
-            {t('errors.transactionId')} {error.transactionId}
+            {t("errors.transactionId")} {error.transactionId}
           </div>
           <div className="right">
-            {t('errors.errorCode')} {error.errorCode}
+            {t("errors.errorCode")} {error.errorCode}
           </div>
         </div>
       </>
@@ -91,7 +91,7 @@ class BackendErrorNotification extends React.Component<Props> {
       return (
         <>
           <p>
-            <strong>{t('errors.context')}</strong>
+            <strong>{t("errors.context")}</strong>
           </p>
           <ul>
             {error.context.map((context, index) => {
@@ -112,7 +112,7 @@ class BackendErrorNotification extends React.Component<Props> {
     if (error.url) {
       return (
         <p>
-          {t('errors.moreInfo')}{' '}
+          {t("errors.moreInfo")}{" "}
           <a href={error.url} target="_blank">
             {error.errorCode}
           </a>
@@ -122,4 +122,4 @@ class BackendErrorNotification extends React.Component<Props> {
   };
 }
 
-export default translate('plugins')(BackendErrorNotification);
+export default translate("plugins")(BackendErrorNotification);

scm-ui/ui-components/src/BranchSelector.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
-import styled from 'styled-components';
+import styled from "styled-components";
-import { Branch } from '@scm-manager/ui-types';
+import { Branch } from "@scm-manager/ui-types";
-import DropDown from './forms/DropDown';
+import DropDown from "./forms/DropDown";
 
 type Props = {
   branches: Branch[];
@@ -39,10 +39,10 @@ export default class BranchSelector extends React.Component<Props, State> {
     const { branches } = this.props;
     if (branches) {
       const selectedBranch = branches.find(
-        branch => branch.name === this.props.selectedBranch,
+        branch => branch.name === this.props.selectedBranch
       );
       this.setState({
-        selectedBranch,
+        selectedBranch
       });
     }
   }
@@ -52,14 +52,14 @@ export default class BranchSelector extends React.Component<Props, State> {
 
     if (branches) {
       return (
-        <div className={classNames('field', 'is-horizontal')}>
+        <div className={classNames("field", "is-horizontal")}>
           <ZeroflexFieldLabel
-            className={classNames('field-label', 'is-normal')}
+            className={classNames("field-label", "is-normal")}
           >
-            <label className={classNames('label', 'is-size-6')}>{label}</label>
+            <label className={classNames("label", "is-size-6")}>{label}</label>
           </ZeroflexFieldLabel>
           <div className="field-body">
-            <NoBottomMarginField className={classNames('field', 'is-narrow')}>
+            <NoBottomMarginField className={classNames("field", "is-narrow")}>
               <MinWidthControl className="control">
                 <DropDown
                   className="is-fullwidth"
@@ -69,7 +69,7 @@ export default class BranchSelector extends React.Component<Props, State> {
                   preselectedOption={
                     this.state.selectedBranch
                       ? this.state.selectedBranch.name
-                      : ''
+                      : ""
                   }
                 />
               </MinWidthControl>
@@ -87,7 +87,7 @@ export default class BranchSelector extends React.Component<Props, State> {
 
     if (!branchName) {
       this.setState({
-        selectedBranch: undefined,
+        selectedBranch: undefined
       });
       selected(undefined);
       return;
@@ -96,7 +96,7 @@ export default class BranchSelector extends React.Component<Props, State> {
 
     selected(branch);
     this.setState({
-      selectedBranch: branch,
+      selectedBranch: branch
     });
   };
 }

scm-ui/ui-components/src/Breadcrumb.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
-import classNames from 'classnames';
+import classNames from "classnames";
-import styled from 'styled-components';
+import styled from "styled-components";
-import { binder, ExtensionPoint } from '@scm-manager/ui-extensions';
+import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
-import { Branch, Repository } from '@scm-manager/ui-types';
+import { Branch, Repository } from "@scm-manager/ui-types";
-import Icon from './Icon';
+import Icon from "./Icon";
 
 type Props = {
   repository: Repository;
@@ -38,9 +38,9 @@ class Breadcrumb extends React.Component<Props> {
     const { revision, path, baseUrl } = this.props;
 
     if (path) {
-      const paths = path.split('/');
+      const paths = path.split("/");
       const map = paths.map((path, index) => {
-        const currPath = paths.slice(0, index + 1).join('/');
+        const currPath = paths.slice(0, index + 1).join("/");
         if (paths.length - 1 === index) {
           return (
             <li className="is-active" key={index}>
@@ -52,7 +52,7 @@ class Breadcrumb extends React.Component<Props> {
         }
         return (
           <li key={index}>
-            <Link to={baseUrl + '/' + revision + '/' + currPath}>{path}</Link>
+            <Link to={baseUrl + "/" + revision + "/" + currPath}>{path}</Link>
           </li>
         );
       });
@@ -70,21 +70,21 @@ class Breadcrumb extends React.Component<Props> {
       revision,
       path,
       repository,
-      t,
+      t
     } = this.props;
 
     return (
       <>
         <div className="is-flex">
           <FlexStartNav
-            className={classNames('breadcrumb', 'sources-breadcrumb')}
+            className={classNames("breadcrumb", "sources-breadcrumb")}
             aria-label="breadcrumbs"
           >
             <ul>
               <li>
-                <Link to={baseUrl + '/' + revision + '/'}>
+                <Link to={baseUrl + "/" + revision + "/"}>
                   <HomeIcon
-                    title={t('breadcrumb.home')}
+                    title={t("breadcrumb.home")}
                     name="home"
                     color="inherit"
                   />
@@ -93,7 +93,7 @@ class Breadcrumb extends React.Component<Props> {
               {this.renderPath()}
             </ul>
           </FlexStartNav>
-          {binder.hasExtension('repos.sources.actionbar') && (
+          {binder.hasExtension("repos.sources.actionbar") && (
             <ActionWrapper>
               <ExtensionPoint
                 name="repos.sources.actionbar"
@@ -104,9 +104,9 @@ class Breadcrumb extends React.Component<Props> {
                   isBranchUrl:
                     branches &&
                     branches.filter(
-                      b => b.name.replace('/', '%2F') === revision,
+                      b => b.name.replace("/", "%2F") === revision
                     ).length > 0,
-                  repository,
+                  repository
                 }}
                 renderAll={true}
               />
@@ -119,4 +119,4 @@ class Breadcrumb extends React.Component<Props> {
   }
 }
 
-export default translate('commons')(Breadcrumb);
+export default translate("commons")(Breadcrumb);

scm-ui/ui-components/src/CardColumn.tsx

@@ -1,15 +1,15 @@
-import * as React from 'react';
+import React, { ReactNode } from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
-import styled from 'styled-components';
+import styled from "styled-components";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 type Props = {
   title: string;
   description: string;
-  avatar: React.Node;
+  avatar: ReactNode;
-  contentRight?: React.Node;
+  contentRight?: ReactNode;
-  footerLeft: React.Node;
+  footerLeft: ReactNode;
-  footerRight: React.Node;
+  footerRight: ReactNode;
   link?: string;
   action?: () => void;
   className?: string;
@@ -73,16 +73,16 @@ export default class CardColumn extends React.Component<Props> {
       contentRight,
       footerLeft,
       footerRight,
-      className,
+      className
     } = this.props;
     const link = this.createLink();
     return (
       <>
         {link}
-        <NoEventWrapper className={classNames('media', className)}>
+        <NoEventWrapper className={classNames("media", className)}>
           <AvatarWrapper className="media-left">{avatar}</AvatarWrapper>
           <FlexFullHeight
-            className={classNames('media-content', 'text-box', 'is-flex')}
+            className={classNames("media-content", "text-box", "is-flex")}
           >
             <div className="is-flex">
               <ContentLeft className="content">
@@ -93,7 +93,7 @@ export default class CardColumn extends React.Component<Props> {
               </ContentLeft>
               <ContentRight>{contentRight}</ContentRight>
             </div>
-            <FooterWrapper className={classNames('level', 'is-flex')}>
+            <FooterWrapper className={classNames("level", "is-flex")}>
               <div className="level-left is-hidden-mobile">{footerLeft}</div>
               <div className="level-right is-mobile is-marginless">
                 {footerRight}

scm-ui/ui-components/src/CardColumnGroup.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import React, { ReactNode } from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
-import styled from 'styled-components';
+import styled from "styled-components";
 
 type Props = {
   name: string;
-  elements: React.Node[];
+  elements: ReactNode[];
 };
 
 type State = {
@@ -23,25 +23,25 @@ export default class CardColumnGroup extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      collapsed: false,
+      collapsed: false
     };
   }
 
   toggleCollapse = () => {
     this.setState(prevState => ({
-      collapsed: !prevState.collapsed,
+      collapsed: !prevState.collapsed
     }));
   };
 
-  isLastEntry = (array: React.Node[], index: number) => {
+  isLastEntry = (array: ReactNode[], index: number) => {
     return index === array.length - 1;
   };
 
-  isLengthOdd = (array: React.Node[]) => {
+  isLengthOdd = (array: ReactNode[]) => {
     return array.length % 2 !== 0;
   };
 
-  isFullSize = (array: React.Node[], index: number) => {
+  isFullSize = (array: ReactNode[], index: number) => {
     return this.isLastEntry(array, index) && this.isLengthOdd(array);
   };
 
@@ -49,20 +49,20 @@ export default class CardColumnGroup extends React.Component<Props, State> {
     const { name, elements } = this.props;
     const { collapsed } = this.state;
 
-    const icon = collapsed ? 'fa-angle-right' : 'fa-angle-down';
+    const icon = collapsed ? "fa-angle-right" : "fa-angle-down";
     let content = null;
     if (!collapsed) {
       content = elements.map((entry, index) => {
         const fullColumnWidth = this.isFullSize(elements, index);
-        const sizeClass = fullColumnWidth ? 'is-full' : 'is-half';
+        const sizeClass = fullColumnWidth ? "is-full" : "is-half";
         return (
           <div
             className={classNames(
-              'box',
+              "box",
-              'box-link-shadow',
+              "box-link-shadow",
-              'column',
+              "column",
-              'is-clipped',
+              "is-clipped",
-              sizeClass,
+              sizeClass
             )}
             key={index}
           >
@@ -75,14 +75,14 @@ export default class CardColumnGroup extends React.Component<Props, State> {
       <Container>
         <h2>
           <span
-            className={classNames('is-size-4', 'has-cursor-pointer')}
+            className={classNames("is-size-4", "has-cursor-pointer")}
             onClick={this.toggleCollapse}
           >
-            <i className={classNames('fa', icon)} /> {name}
+            <i className={classNames("fa", icon)} /> {name}
           </span>
         </h2>
         <hr />
-        <Wrapper className={classNames('columns', 'is-multiline')}>
+        <Wrapper className={classNames("columns", "is-multiline")}>
           {content}
         </Wrapper>
         <div className="is-clearfix" />

scm-ui/ui-components/src/DateFromNow.stories.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React from "react";
-import DateFromNow from './DateFromNow';
+import DateFromNow from "./DateFromNow";
-import { storiesOf } from '@storybook/react';
+import { storiesOf } from "@storybook/react";
 
 const baseProps = {
-  timeZone: 'Europe/Berlin',
+  timeZone: "Europe/Berlin",
-  baseDate: '2019-10-12T13:56:42+02:00',
+  baseDate: "2019-10-12T13:56:42+02:00"
 };
 
-storiesOf('DateFromNow', module).add('Default', () => (
+storiesOf("DateFromNow", module).add("Default", () => (
   <div>
     <p>
       <DateFromNow date="2009-06-30T18:30:00+02:00" {...baseProps} />

scm-ui/ui-components/src/DateFromNow.tsx

@@ -1,17 +1,23 @@
-import React from 'react';
+import React from "react";
-import { translate } from 'react-i18next';
+import { translate, InjectedI18nProps } from "react-i18next";
-import { formatDistance, format, parseISO } from 'date-fns';
+import { formatDistance, format, parseISO, Locale } from "date-fns";
-import { enUS, de, es } from 'date-fns/locale';
+import { enUS, de, es } from "date-fns/locale";
-import styled from 'styled-components';
+import styled from "styled-components";
 
-const supportedLocales = {
+type LocaleMap = {
-  enUS,
+  [key: string]: Locale
-  de,
-  es,
 };
 
-type Props = {
+type DateInput = Date | string;
-  date?: string;
+
+const supportedLocales: LocaleMap = {
+  enUS,
+  de,
+  es
+};
+
+type Props = InjectedI18nProps & {
+  date?: DateInput;
   timeZone?: string;
 
   /**
@@ -20,10 +26,13 @@ type Props = {
    * is required to keep snapshots tests green over the time on
    * ci server.
    */
-  baseDate?: string;
+  baseDate?: DateInput;
+};
 
-  // context props
+type Options = {
-  i18n: any;
+  addSuffix: boolean;
+  locale: Locale;
+  timeZone?: string;
 };
 
 const DateElement = styled.time`
@@ -32,7 +41,7 @@ const DateElement = styled.time`
 `;
 
 class DateFromNow extends React.Component<Props> {
-  getLocale = () => {
+  getLocale = (): Locale => {
     const { i18n } = this.props;
     const locale = supportedLocales[i18n.language];
     if (!locale) {
@@ -43,9 +52,9 @@ class DateFromNow extends React.Component<Props> {
 
   createOptions = () => {
     const { timeZone } = this.props;
-    const options: object = {
+    const options: Options = {
       addSuffix: true,
-      locate: this.getLocale(),
+      locale: this.getLocale()
     };
     if (timeZone) {
       options.timeZone = timeZone;
@@ -53,10 +62,17 @@ class DateFromNow extends React.Component<Props> {
     return options;
   };
 
+  toDate = (value: DateInput): Date => {
+    if (value instanceof Date) {
+      return value as Date;
+    }
+    return parseISO(value);
+  }
+
   getBaseDate = () => {
     const { baseDate } = this.props;
     if (baseDate) {
-      return parseISO(baseDate);
+      return this.toDate(baseDate);
     }
     return new Date();
   };
@@ -64,10 +80,10 @@ class DateFromNow extends React.Component<Props> {
   render() {
     const { date } = this.props;
     if (date) {
-      const isoDate = parseISO(date);
+      const isoDate = this.toDate(date);
       const options = this.createOptions();
       const distance = formatDistance(isoDate, this.getBaseDate(), options);
-      const formatted = format(isoDate, 'yyyy-MM-dd HH:mm:ss', options);
+      const formatted = format(isoDate, "yyyy-MM-dd HH:mm:ss", options);
       return <DateElement title={formatted}>{distance}</DateElement>;
     }
     return null;

scm-ui/ui-components/src/ErrorBoundary.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import React, { ReactNode } from "react";
-import ErrorNotification from './ErrorNotification';
+import ErrorNotification from "./ErrorNotification";
 
 type Props = {
   fallback?: React.ComponentType<any>;
-  children: React.Node;
+  children: ReactNode;
 };
 
 type ErrorInfo = {
@@ -25,7 +25,7 @@ class ErrorBoundary extends React.Component<Props, State> {
     // Catch errors in any components below and re-render with error message
     this.setState({
       error,
-      errorInfo,
+      errorInfo
     });
   }
 

scm-ui/ui-components/src/ErrorNotification.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from "react";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
-import { BackendError, ForbiddenError, UnauthorizedError } from './errors';
+import { BackendError, ForbiddenError, UnauthorizedError } from "./errors";
-import Notification from './Notification';
+import Notification from "./Notification";
-import BackendErrorNotification from './BackendErrorNotification';
+import BackendErrorNotification from "./BackendErrorNotification";
 
 type Props = {
   t: (p: string) => string;
@@ -18,24 +18,24 @@ class ErrorNotification extends React.Component<Props> {
       } else if (error instanceof UnauthorizedError) {
         return (
           <Notification type="danger">
-            <strong>{t('errorNotification.prefix')}:</strong>{' '}
+            <strong>{t("errorNotification.prefix")}:</strong>{" "}
-            {t('errorNotification.timeout')}{' '}
+            {t("errorNotification.timeout")}{" "}
             <a href="javascript:window.location.reload(true)">
-              {t('errorNotification.loginLink')}
+              {t("errorNotification.loginLink")}
             </a>
           </Notification>
         );
       } else if (error instanceof ForbiddenError) {
         return (
           <Notification type="danger">
-            <strong>{t('errorNotification.prefix')}:</strong>{' '}
+            <strong>{t("errorNotification.prefix")}:</strong>{" "}
-            {t('errorNotification.forbidden')}
+            {t("errorNotification.forbidden")}
           </Notification>
         );
       } else {
         return (
           <Notification type="danger">
-            <strong>{t('errorNotification.prefix')}:</strong> {error.message}
+            <strong>{t("errorNotification.prefix")}:</strong> {error.message}
           </Notification>
         );
       }
@@ -44,4 +44,4 @@ class ErrorNotification extends React.Component<Props> {
   }
 }
 
-export default translate('commons')(ErrorNotification);
+export default translate("commons")(ErrorNotification);

scm-ui/ui-components/src/ErrorPage.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import ErrorNotification from './ErrorNotification';
+import ErrorNotification from "./ErrorNotification";
-import { BackendError, ForbiddenError } from './errors';
+import { BackendError, ForbiddenError } from "./errors";
 
 type Props = {
   error: Error;

scm-ui/ui-components/src/FileSize.test.ts

@@ -1,10 +1,10 @@
-import FileSize from './FileSize';
+import FileSize from "./FileSize";
 
-it('should format bytes', () => {
+it("should format bytes", () => {
-  expect(FileSize.format(0)).toBe('0 B');
+  expect(FileSize.format(0)).toBe("0 B");
-  expect(FileSize.format(160)).toBe('160 B');
+  expect(FileSize.format(160)).toBe("160 B");
-  expect(FileSize.format(6304)).toBe('6.30 K');
+  expect(FileSize.format(6304)).toBe("6.30 K");
-  expect(FileSize.format(28792588)).toBe('28.79 M');
+  expect(FileSize.format(28792588)).toBe("28.79 M");
-  expect(FileSize.format(1369510189)).toBe('1.37 G');
+  expect(FileSize.format(1369510189)).toBe("1.37 G");
-  expect(FileSize.format(42949672960)).toBe('42.95 G');
+  expect(FileSize.format(42949672960)).toBe("42.95 G");
 });

scm-ui/ui-components/src/FileSize.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 type Props = {
   bytes: number;
@@ -7,10 +7,10 @@ type Props = {
 class FileSize extends React.Component<Props> {
   static format(bytes: number) {
     if (!bytes) {
-      return '0 B';
+      return "0 B";
     }
 
-    const units = ['B', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
+    const units = ["B", "K", "M", "G", "T", "P", "E", "Z", "Y"];
     const i = Math.floor(Math.log(bytes) / Math.log(1000));
 
     const size = i === 0 ? bytes : (bytes / 1000 ** i).toFixed(2);

scm-ui/ui-components/src/GroupAutocomplete.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
-import AutocompleteProps from './UserGroupAutocomplete';
+import AutocompleteProps from "./UserGroupAutocomplete";
-import UserGroupAutocomplete from './UserGroupAutocomplete';
+import UserGroupAutocomplete from "./UserGroupAutocomplete";
 
 type Props = AutocompleteProps & {
   // Context props
@@ -13,14 +13,14 @@ class GroupAutocomplete extends React.Component<Props> {
     const { t } = this.props;
     return (
       <UserGroupAutocomplete
-        label={t('autocomplete.group')}
+        label={t("autocomplete.group")}
-        noOptionsMessage={t('autocomplete.noGroupOptions')}
+        noOptionsMessage={t("autocomplete.noGroupOptions")}
-        loadingMessage={t('autocomplete.loading')}
+        loadingMessage={t("autocomplete.loading")}
-        placeholder={t('autocomplete.groupPlaceholder')}
+        placeholder={t("autocomplete.groupPlaceholder")}
         {...this.props}
       />
     );
   }
 }
 
-export default translate('commons')(GroupAutocomplete);
+export default translate("commons")(GroupAutocomplete);

scm-ui/ui-components/src/Help.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
-import styled from 'styled-components';
+import styled from "styled-components";
-import Tooltip from './Tooltip';
+import Tooltip from "./Tooltip";
-import HelpIcon from './HelpIcon';
+import HelpIcon from "./HelpIcon";
 
 type Props = {
   message: string;
@@ -19,7 +19,7 @@ export default class Help extends React.Component<Props> {
     const { message, className } = this.props;
     return (
       <HelpTooltip
-        className={classNames('is-inline-block', className)}
+        className={classNames("is-inline-block", className)}
         message={message}
       >
         <HelpIcon />

scm-ui/ui-components/src/HelpIcon.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
-import Icon from './Icon';
+import Icon from "./Icon";
 
 type Props = {
   className?: string;

scm-ui/ui-components/src/Icon.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
 
 type Props = {
   title?: string;
@@ -10,7 +10,7 @@ type Props = {
 
 export default class Icon extends React.Component<Props> {
   static defaultProps = {
-    color: 'grey-light',
+    color: "grey-light"
   };
 
   render() {
@@ -20,11 +20,11 @@ export default class Icon extends React.Component<Props> {
         <i
           title={title}
           className={classNames(
-            'fas',
+            "fas",
-            'fa-fw',
+            "fa-fw",
-            'fa-' + name,
+            "fa-" + name,
             `has-text-${color}`,
-            className,
+            className
           )}
         />
       );
@@ -32,10 +32,10 @@ export default class Icon extends React.Component<Props> {
     return (
       <i
         className={classNames(
-          'fas',
+          "fas",
-          'fa-' + name,
+          "fa-" + name,
           `has-text-${color}`,
-          className,
+          className
         )}
       />
     );

scm-ui/ui-components/src/Image.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
-import { withContextPath } from './urls';
+import { withContextPath } from "./urls";
 
 type Props = {
   src: string;
@@ -10,7 +10,7 @@ type Props = {
 class Image extends React.Component<Props> {
   createImageSrc = () => {
     const { src } = this.props;
-    if (src.startsWith('http')) {
+    if (src.startsWith("http")) {
       return src;
     }
     return withContextPath(src);

scm-ui/ui-components/src/LinkPaginator.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
-import { PagedCollection } from '@scm-manager/ui-types';
+import { PagedCollection } from "@scm-manager/ui-types";
-import { Button } from './buttons';
+import { Button } from "./buttons";
 
 type Props = {
   collection: PagedCollection;
@@ -25,9 +25,9 @@ class LinkPaginator extends React.Component<Props> {
     return (
       <Button
         className="pagination-link"
-        label={'1'}
+        label={"1"}
         disabled={false}
-        link={this.addFilterToLink('1')}
+        link={this.addFilterToLink("1")}
       />
     );
   }
@@ -40,7 +40,7 @@ class LinkPaginator extends React.Component<Props> {
       <Button
         className={className}
         label={label ? label : previousPage.toString()}
-        disabled={!this.hasLink('prev')}
+        disabled={!this.hasLink("prev")}
         link={this.addFilterToLink(`${previousPage}`)}
       />
     );
@@ -58,7 +58,7 @@ class LinkPaginator extends React.Component<Props> {
       <Button
         className={className}
         label={label ? label : nextPage.toString()}
-        disabled={!this.hasLink('next')}
+        disabled={!this.hasLink("next")}
         link={this.addFilterToLink(`${nextPage}`)}
       />
     );
@@ -84,7 +84,7 @@ class LinkPaginator extends React.Component<Props> {
     return (
       <Button
         className="pagination-link is-current"
-        label={page}
+        label={"" + page}
         disabled={true}
       />
     );
@@ -103,13 +103,13 @@ class LinkPaginator extends React.Component<Props> {
       links.push(this.separator());
     }
     if (page > 2) {
-      links.push(this.renderPreviousButton('pagination-link'));
+      links.push(this.renderPreviousButton("pagination-link"));
     }
 
     links.push(this.currentPage(page));
 
     if (page + 1 < pageTotal) {
-      links.push(this.renderNextButton('pagination-link'));
+      links.push(this.renderNextButton("pagination-link"));
     }
     if (page + 2 < pageTotal) links.push(this.separator());
     //if there exists pages between next and last
@@ -124,19 +124,19 @@ class LinkPaginator extends React.Component<Props> {
       return (
         <nav className="pagination is-centered" aria-label="pagination">
           {this.renderPreviousButton(
-            'pagination-previous',
+            "pagination-previous",
-            t('paginator.previous'),
+            t("paginator.previous")
           )}
           <ul className="pagination-list">
             {this.pageLinks().map((link, index) => {
               return <li key={index}>{link}</li>;
             })}
           </ul>
-          {this.renderNextButton('pagination-next', t('paginator.next'))}
+          {this.renderNextButton("pagination-next", t("paginator.next"))}
         </nav>
       );
     }
     return null;
   }
 }
-export default translate('commons')(LinkPaginator);
+export default translate("commons")(LinkPaginator);

scm-ui/ui-components/src/Loading.stories.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from "react";
-import { storiesOf } from '@storybook/react';
+import { storiesOf } from "@storybook/react";
-import Loading from './Loading';
+import Loading from "./Loading";
 
-storiesOf('Loading', module).add('Default', () => (
+storiesOf("Loading", module).add("Default", () => (
   <div>
     <Loading />
   </div>

scm-ui/ui-components/src/Loading.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
-import styled from 'styled-components';
+import styled from "styled-components";
-import Image from './Image';
+import Image from "./Image";
 
 type Props = {
   t: (p: string) => string;
@@ -26,11 +26,11 @@ class Loading extends React.Component<Props> {
     const { message, t } = this.props;
     return (
       <Wrapper className="is-flex">
-        <FixedSizedImage src="/images/loading.svg" alt={t('loading.alt')} />
+        <FixedSizedImage src="/images/loading.svg" alt={t("loading.alt")} />
         <p className="has-text-centered">{message}</p>
       </Wrapper>
     );
   }
 }
 
-export default translate('commons')(Loading);
+export default translate("commons")(Loading);

scm-ui/ui-components/src/Logo.stories.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
-import { storiesOf } from '@storybook/react';
+import { storiesOf } from "@storybook/react";
-import styled from 'styled-components';
+import styled from "styled-components";
-import Logo from './Logo';
+import Logo from "./Logo";
 
 const Wrapper = styled.div`
   padding: 2em;
@@ -9,7 +9,7 @@ const Wrapper = styled.div`
   height: 100%;
 `;
 
-storiesOf('Logo', module).add('Default', () => (
+storiesOf("Logo", module).add("Default", () => (
   <Wrapper>
     <Logo />
   </Wrapper>

scm-ui/ui-components/src/Logo.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
-import Image from './Image';
+import Image from "./Image";
 
 type Props = {
   t: (p: string) => string;
@@ -9,8 +9,8 @@ type Props = {
 class Logo extends React.Component<Props> {
   render() {
     const { t } = this.props;
-    return <Image src="/images/logo.png" alt={t('logo.alt')} />;
+    return <Image src="/images/logo.png" alt={t("logo.alt")} />;
   }
 }
 
-export default translate('commons')(Logo);
+export default translate("commons")(Logo);

scm-ui/ui-components/src/MailLink.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 type Props = {
   address?: string;
@@ -10,7 +10,7 @@ class MailLink extends React.Component<Props> {
     if (!address) {
       return null;
     }
-    return <a href={'mailto:' + address}>{address}</a>;
+    return <a href={"mailto:" + address}>{address}</a>;
   }
 }
 

scm-ui/ui-components/src/MarkdownHeadingRenderer.test.ts

@@ -1,15 +1,15 @@
-import React from 'react';
+import React from "react";
-import { headingToAnchorId } from './MarkdownHeadingRenderer';
+import { headingToAnchorId } from "./MarkdownHeadingRenderer";
 
-describe('headingToAnchorId tests', () => {
+describe("headingToAnchorId tests", () => {
-  it('should lower case the text', () => {
+  it("should lower case the text", () => {
-    expect(headingToAnchorId('Hello')).toBe('hello');
+    expect(headingToAnchorId("Hello")).toBe("hello");
-    expect(headingToAnchorId('HeLlO')).toBe('hello');
+    expect(headingToAnchorId("HeLlO")).toBe("hello");
-    expect(headingToAnchorId('HELLO')).toBe('hello');
+    expect(headingToAnchorId("HELLO")).toBe("hello");
   });
 
-  it('should replace spaces with hyphen', () => {
+  it("should replace spaces with hyphen", () => {
-    expect(headingToAnchorId('awesome stuff')).toBe('awesome-stuff');
+    expect(headingToAnchorId("awesome stuff")).toBe("awesome-stuff");
-    expect(headingToAnchorId('a b c d e f')).toBe('a-b-c-d-e-f');
+    expect(headingToAnchorId("a b c d e f")).toBe("a-b-c-d-e-f");
   });
 });

scm-ui/ui-components/src/MarkdownHeadingRenderer.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React, { ReactNode } from "react";
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteComponentProps } from "react-router-dom";
-import { withContextPath } from './urls';
+import { withContextPath } from "./urls";
 
 /**
  * Adds anchor links to markdown headings.
@@ -8,14 +8,13 @@ import { withContextPath } from './urls';
  * @see <a href="https://github.com/rexxars/react-markdown/issues/69">Headings are missing anchors / ids</a>
  */
 
-type Props = {
+type Props = RouteComponentProps & {
-  children: React.Node;
+  children: ReactNode;
   level: number;
-  location: any;
 };
 
-function flatten(text: string, child: any) {
+function flatten(text: string, child: any): any {
-  return typeof child === 'string'
+  return typeof child === "string"
     ? text + child
     : React.Children.toArray(child.props.children).reduce(flatten, text);
 }
@@ -26,19 +25,19 @@ function flatten(text: string, child: any) {
  * @VisibleForTesting
  */
 export function headingToAnchorId(heading: string) {
-  return heading.toLowerCase().replace(/\W/g, '-');
+  return heading.toLowerCase().replace(/\W/g, "-");
 }
 
 function MarkdownHeadingRenderer(props: Props) {
   const children = React.Children.toArray(props.children);
-  const heading = children.reduce(flatten, '');
+  const heading = children.reduce(flatten, "");
   const anchorId = headingToAnchorId(heading);
   const headingElement = React.createElement(
-    'h' + props.level,
+    "h" + props.level,
     {},
-    props.children,
+    props.children
   );
-  const href = withContextPath(props.location.pathname + '#' + anchorId);
+  const href = withContextPath(props.location.pathname + "#" + anchorId);
 
   return (
     <a id={`${anchorId}`} className="anchor" href={href}>

scm-ui/ui-components/src/MarkdownView.stories.tsx

@@ -1,20 +1,20 @@
-import React from 'react';
+import React from "react";
-import { storiesOf } from '@storybook/react';
+import { storiesOf } from "@storybook/react";
-import MarkdownView from './MarkdownView';
+import MarkdownView from "./MarkdownView";
-import styled from 'styled-components';
+import styled from "styled-components";
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from "react-router-dom";
 
-import TestPage from './__resources__/test-page.md';
+import TestPage from "./__resources__/test-page.md";
 
 const Spacing = styled.div`
   padding: 2em;
 `;
 
-storiesOf('MarkdownView', module)
+storiesOf("MarkdownView", module)
   .addDecorator(story => (
-    <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
+    <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>
   ))
-  .add('Default', () => (
+  .add("Default", () => (
     <Spacing>
       <MarkdownView content={TestPage} skipHtml={false} />
     </Spacing>

scm-ui/ui-components/src/MarkdownView.tsx

@@ -1,20 +1,17 @@
-import React from 'react';
+import React from "react";
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteComponentProps } from "react-router-dom";
-import Markdown from 'react-markdown/with-html';
+import Markdown from "react-markdown/with-html";
-import styled from 'styled-components';
+import styled from "styled-components";
-import { binder } from '@scm-manager/ui-extensions';
+import { binder } from "@scm-manager/ui-extensions";
-import SyntaxHighlighter from './SyntaxHighlighter';
+import SyntaxHighlighter from "./SyntaxHighlighter";
-import MarkdownHeadingRenderer from './MarkdownHeadingRenderer';
+import MarkdownHeadingRenderer from "./MarkdownHeadingRenderer";
 
-type Props = {
+type Props = RouteComponentProps & {
   content: string;
   renderContext?: object;
-  renderers?: object;
+  renderers?: any;
   skipHtml?: boolean;
-  enableAnchorHeadings: boolean;
+  enableAnchorHeadings?: boolean;
-
-  // context props
-  location: any;
 };
 
 const MarkdownWrapper = styled.div`
@@ -47,9 +44,9 @@ const MarkdownWrapper = styled.div`
 `;
 
 class MarkdownView extends React.Component<Props> {
-  static defaultProps = {
+  static defaultProps: Partial<Props> = {
     enableAnchorHeadings: false,
-    skipHtml: false,
+    skipHtml: false
   };
 
   contentRef: HTMLDivElement | null | undefined;
@@ -79,10 +76,10 @@ class MarkdownView extends React.Component<Props> {
       renderers,
       renderContext,
       enableAnchorHeadings,
-      skipHtml,
+      skipHtml
     } = this.props;
 
-    const rendererFactory = binder.getExtension('markdown-renderer-factory');
+    const rendererFactory = binder.getExtension("markdown-renderer-factory");
     let rendererList = renderers;
 
     if (rendererFactory) {

scm-ui/ui-components/src/Notification.tsx

@@ -1,24 +1,24 @@
-import * as React from 'react';
+import React, { ReactNode } from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
 
 type NotificationType =
-  | 'primary'
+  | "primary"
-  | 'info'
+  | "info"
-  | 'success'
+  | "success"
-  | 'warning'
+  | "warning"
-  | 'danger'
+  | "danger"
-  | 'inherit';
+  | "inherit";
 
 type Props = {
   type: NotificationType;
   onClose?: () => void;
   className?: string;
-  children?: React.Node;
+  children?: ReactNode;
 };
 
 class Notification extends React.Component<Props> {
   static defaultProps = {
-    type: 'info',
+    type: "info"
   };
 
   renderCloseButton() {
@@ -26,16 +26,16 @@ class Notification extends React.Component<Props> {
     if (onClose) {
       return <button className="delete" onClick={onClose} />;
     }
-    return '';
+    return "";
   }
 
   render() {
     const { type, className, children } = this.props;
 
-    const color = type !== 'inherit' ? 'is-' + type : '';
+    const color = type !== "inherit" ? "is-" + type : "";
 
     return (
-      <div className={classNames('notification', color, className)}>
+      <div className={classNames("notification", color, className)}>
         {this.renderCloseButton()}
         {children}
       </div>

scm-ui/ui-components/src/OverviewPageActions.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
-import { History } from 'history';
+import { History } from "history";
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteComponentProps } from "react-router-dom";
-import classNames from 'classnames';
+import classNames from "classnames";
-import { Button, urls } from './index';
+import { Button, urls } from "./index";
-import { FilterInput } from './forms';
+import { FilterInput } from "./forms";
 
-type Props = {
+type Props = RouteComponentProps & {
   showCreateButton: boolean;
   link: string;
   label?: string;
@@ -35,7 +35,7 @@ class OverviewPageActions extends React.Component<Props> {
     const { showCreateButton, link, label } = this.props;
     if (showCreateButton) {
       return (
-        <div className={classNames('input-button', 'control')}>
+        <div className={classNames("input-button", "control")}>
           <Button label={label} link={`/${link}/create`} color="primary" />
         </div>
       );

scm-ui/ui-components/src/Paginator.test.tsx

@@ -1,43 +1,44 @@
-import React from 'react';
+import React from "react";
-import { mount, shallow } from '@scm-manager/ui-tests/enzyme-router';
+import { mount, shallow } from "@scm-manager/ui-tests/enzyme-router";
-import '@scm-manager/ui-tests/i18n';
+import "@scm-manager/ui-tests/i18n";
-import Paginator from './Paginator';
+import Paginator from "./Paginator";
 
-xdescribe('paginator rendering tests', () => {
+xdescribe("paginator rendering tests", () => {
   const dummyLink = {
-    href: 'https://dummy',
+    href: "https://dummy"
   };
 
-  it('should render all buttons but disabled, without links', () => {
+  it("should render all buttons but disabled, without links", () => {
     const collection = {
       page: 10,
       pageTotal: 20,
       _links: {},
-      _embedded: {},
+      _embedded: {}
     };
 
     const paginator = shallow(<Paginator collection={collection} />);
-    const buttons = paginator.find('Button');
+    const buttons = paginator.find("Button");
     expect(buttons.length).toBe(7);
-    for (let button of buttons) {
+    buttons.forEach(button => {
+      // @ts-ignore ???
       expect(button.props.disabled).toBeTruthy();
-    }
+    });
   });
 
-  it('should render buttons for first page', () => {
+  it("should render buttons for first page", () => {
     const collection = {
       page: 0,
       pageTotal: 148,
       _links: {
         first: dummyLink,
         next: dummyLink,
-        last: dummyLink,
+        last: dummyLink
       },
-      _embedded: {},
+      _embedded: {}
     };
 
     const paginator = shallow(<Paginator collection={collection} />);
-    const buttons = paginator.find('Button');
+    const buttons = paginator.find("Button");
     expect(buttons.length).toBe(5);
 
     // previous button
@@ -52,15 +53,15 @@ xdescribe('paginator rendering tests', () => {
     // next button
     const nextButton = buttons.get(3).props;
     expect(nextButton.disabled).toBeFalsy();
-    expect(nextButton.label).toBe('2');
+    expect(nextButton.label).toBe("2");
 
     // last button
     const lastButton = buttons.get(4).props;
     expect(lastButton.disabled).toBeFalsy();
-    expect(lastButton.label).toBe('148');
+    expect(lastButton.label).toBe("148");
   });
 
-  it('should render buttons for second page', () => {
+  it("should render buttons for second page", () => {
     const collection = {
       page: 1,
       pageTotal: 148,
@@ -68,13 +69,13 @@ xdescribe('paginator rendering tests', () => {
         first: dummyLink,
         prev: dummyLink,
         next: dummyLink,
-        last: dummyLink,
+        last: dummyLink
       },
-      _embedded: {},
+      _embedded: {}
     };
 
     const paginator = shallow(<Paginator collection={collection} />);
-    const buttons = paginator.find('Button');
+    const buttons = paginator.find("Button");
     expect(buttons.length).toBe(6);
 
     // previous button
@@ -84,7 +85,7 @@ xdescribe('paginator rendering tests', () => {
     // first button
     const firstButton = buttons.get(2).props;
     expect(firstButton.disabled).toBeFalsy();
-    expect(firstButton.label).toBe('1');
+    expect(firstButton.label).toBe("1");
 
     // current button
     const currentButton = buttons.get(3).props;
@@ -94,27 +95,27 @@ xdescribe('paginator rendering tests', () => {
     // next button
     const nextButton = buttons.get(4).props;
     expect(nextButton.disabled).toBeFalsy();
-    expect(nextButton.label).toBe('3');
+    expect(nextButton.label).toBe("3");
 
     // last button
     const lastButton = buttons.get(5).props;
     expect(lastButton.disabled).toBeFalsy();
-    expect(lastButton.label).toBe('148');
+    expect(lastButton.label).toBe("148");
   });
 
-  it('should render buttons for last page', () => {
+  it("should render buttons for last page", () => {
     const collection = {
       page: 147,
       pageTotal: 148,
       _links: {
         first: dummyLink,
-        prev: dummyLink,
+        prev: dummyLink
       },
-      _embedded: {},
+      _embedded: {}
     };
 
     const paginator = shallow(<Paginator collection={collection} />);
-    const buttons = paginator.find('Button');
+    const buttons = paginator.find("Button");
     expect(buttons.length).toBe(5);
 
     // previous button
@@ -124,12 +125,12 @@ xdescribe('paginator rendering tests', () => {
     // first button
     const firstButton = buttons.get(2).props;
     expect(firstButton.disabled).toBeFalsy();
-    expect(firstButton.label).toBe('1');
+    expect(firstButton.label).toBe("1");
 
     // next button
     const nextButton = buttons.get(3).props;
     expect(nextButton.disabled).toBeFalsy();
-    expect(nextButton.label).toBe('147');
+    expect(nextButton.label).toBe("147");
 
     // last button
     const lastButton = buttons.get(4).props;
@@ -137,7 +138,7 @@ xdescribe('paginator rendering tests', () => {
     expect(lastButton.label).toBe(148);
   });
 
-  it('should render buttons for penultimate page', () => {
+  it("should render buttons for penultimate page", () => {
     const collection = {
       page: 146,
       pageTotal: 148,
@@ -145,13 +146,13 @@ xdescribe('paginator rendering tests', () => {
         first: dummyLink,
         prev: dummyLink,
         next: dummyLink,
-        last: dummyLink,
+        last: dummyLink
       },
-      _embedded: {},
+      _embedded: {}
     };
 
     const paginator = shallow(<Paginator collection={collection} />);
-    const buttons = paginator.find('Button');
+    const buttons = paginator.find("Button");
     expect(buttons.length).toBe(6);
 
     // previous button
@@ -162,11 +163,11 @@ xdescribe('paginator rendering tests', () => {
     // first button
     const firstButton = buttons.get(2).props;
     expect(firstButton.disabled).toBeFalsy();
-    expect(firstButton.label).toBe('1');
+    expect(firstButton.label).toBe("1");
 
     const currentButton = buttons.get(3).props;
     expect(currentButton.disabled).toBeFalsy();
-    expect(currentButton.label).toBe('146');
+    expect(currentButton.label).toBe("146");
 
     // current button
     const nextButton = buttons.get(4).props;
@@ -176,10 +177,10 @@ xdescribe('paginator rendering tests', () => {
     // last button
     const lastButton = buttons.get(5).props;
     expect(lastButton.disabled).toBeFalsy();
-    expect(lastButton.label).toBe('148');
+    expect(lastButton.label).toBe("148");
   });
 
-  it('should render buttons for a page in the middle', () => {
+  it("should render buttons for a page in the middle", () => {
     const collection = {
       page: 41,
       pageTotal: 148,
@@ -187,13 +188,13 @@ xdescribe('paginator rendering tests', () => {
         first: dummyLink,
         prev: dummyLink,
         next: dummyLink,
-        last: dummyLink,
+        last: dummyLink
       },
-      _embedded: {},
+      _embedded: {}
     };
 
     const paginator = shallow(<Paginator collection={collection} />);
-    const buttons = paginator.find('Button');
+    const buttons = paginator.find("Button");
     expect(buttons.length).toBe(7);
 
     // previous button
@@ -204,12 +205,12 @@ xdescribe('paginator rendering tests', () => {
     // first button
     const firstButton = buttons.get(2).props;
     expect(firstButton.disabled).toBeFalsy();
-    expect(firstButton.label).toBe('1');
+    expect(firstButton.label).toBe("1");
 
     // previous Button
     const previousButton = buttons.get(3).props;
     expect(previousButton.disabled).toBeFalsy();
-    expect(previousButton.label).toBe('41');
+    expect(previousButton.label).toBe("41");
 
     // current button
     const currentButton = buttons.get(4).props;
@@ -219,27 +220,27 @@ xdescribe('paginator rendering tests', () => {
     // next button
     const nextButton = buttons.get(5).props;
     expect(nextButton.disabled).toBeFalsy();
-    expect(nextButton.label).toBe('43');
+    expect(nextButton.label).toBe("43");
 
     // last button
     const lastButton = buttons.get(6).props;
     expect(lastButton.disabled).toBeFalsy();
-    expect(lastButton.label).toBe('148');
+    expect(lastButton.label).toBe("148");
   });
 
-  it('should call the function with the last previous url', () => {
+  it("should call the function with the last previous url", () => {
     const collection = {
       page: 41,
       pageTotal: 148,
       _links: {
         first: dummyLink,
         prev: {
-          href: 'https://www.scm-manager.org',
+          href: "https://www.scm-manager.org"
         },
         next: dummyLink,
-        last: dummyLink,
+        last: dummyLink
       },
-      _embedded: {},
+      _embedded: {}
     };
 
     let urlToOpen;
@@ -248,10 +249,10 @@ xdescribe('paginator rendering tests', () => {
     };
 
     const paginator = mount(
-      <Paginator collection={collection} onPageChange={callMe} />,
+      <Paginator collection={collection} onPageChange={callMe} />
     );
-    paginator.find('Button.pagination-previous').simulate('click');
+    paginator.find("Button.pagination-previous").simulate("click");
 
-    expect(urlToOpen).toBe('https://www.scm-manager.org');
+    expect(urlToOpen).toBe("https://www.scm-manager.org");
   });
 });

scm-ui/ui-components/src/Paginator.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
-import { PagedCollection } from '@scm-manager/ui-types';
+import { PagedCollection, Link } from "@scm-manager/ui-types";
-import { Button } from './buttons';
+import { Button } from "./buttons";
 
 type Props = {
   collection: PagedCollection;
@@ -17,7 +17,7 @@ class Paginator extends React.Component<Props> {
   createAction = (linkType: string) => () => {
     const { collection, onPageChange } = this.props;
     if (onPageChange) {
-      const link = collection._links[linkType];
+      const link = collection._links[linkType] as Link;
       if (link && link.href) {
         onPageChange(link.href);
       }
@@ -25,30 +25,30 @@ class Paginator extends React.Component<Props> {
   };
 
   renderFirstButton() {
-    return this.renderPageButton(1, 'first');
+    return this.renderPageButton(1, "first");
   }
 
   renderPreviousButton() {
     const { t } = this.props;
     return this.renderButton(
-      'pagination-previous',
+      "pagination-previous",
-      t('paginator.previous'),
+      t("paginator.previous"),
-      'prev',
+      "prev"
     );
   }
 
   renderNextButton() {
     const { t } = this.props;
-    return this.renderButton('pagination-next', t('paginator.next'), 'next');
+    return this.renderButton("pagination-next", t("paginator.next"), "next");
   }
 
   renderLastButton() {
     const { collection } = this.props;
-    return this.renderPageButton(collection.pageTotal, 'last');
+    return this.renderPageButton(collection.pageTotal, "last");
   }
 
   renderPageButton(page: number, linkType: string) {
-    return this.renderButton('pagination-link', page.toString(), linkType);
+    return this.renderButton("pagination-link", page.toString(), linkType);
   }
 
   renderButton(className: string, label: string, linkType: string) {
@@ -70,7 +70,7 @@ class Paginator extends React.Component<Props> {
     return (
       <Button
         className="pagination-link is-current"
-        label={page}
+        label={"" + page}
         disabled={true}
       />
     );
@@ -89,13 +89,13 @@ class Paginator extends React.Component<Props> {
       links.push(this.seperator());
     }
     if (page > 2) {
-      links.push(this.renderPageButton(page - 1, 'prev'));
+      links.push(this.renderPageButton(page - 1, "prev"));
     }
 
     links.push(this.currentPage(page));
 
     if (page + 1 < pageTotal) {
-      links.push(this.renderPageButton(page + 1, 'next'));
+      links.push(this.renderPageButton(page + 1, "next"));
     }
     if (page + 2 < pageTotal) links.push(this.seperator());
     //if there exists pages between next and last
@@ -118,4 +118,4 @@ class Paginator extends React.Component<Props> {
     );
   }
 }
-export default translate('commons')(Paginator);
+export default translate("commons")(Paginator);

scm-ui/ui-components/src/ProtectedRoute.tsx

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import { Route, Redirect, withRouter } from 'react-router-dom';
+import { Route, Redirect, withRouter, RouteComponentProps } from "react-router-dom";
 
-type Props = {
+type Props = RouteComponentProps & {
   authenticated?: boolean;
   component: Component<any, any>;
 };
@@ -15,10 +15,10 @@ class ProtectedRoute extends React.Component<Props> {
         return (
           <Redirect
             to={{
-              pathname: '/login',
+              pathname: "/login",
               state: {
-                from: routeProps.location,
+                from: routeProps.location
-              },
+              }
             }}
           />
         );

scm-ui/ui-components/src/StatePaginator.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
-import { PagedCollection } from '@scm-manager/ui-types';
+import { PagedCollection } from "@scm-manager/ui-types";
-import { Button } from './index';
+import { Button } from "./index";
 
 type Props = {
   collection: PagedCollection;
@@ -17,7 +17,7 @@ class StatePaginator extends React.Component<Props> {
     return (
       <Button
         className="pagination-link"
-        label={'1'}
+        label={"1"}
         disabled={false}
         action={() => this.updateCurrentPage(1)}
       />
@@ -36,7 +36,7 @@ class StatePaginator extends React.Component<Props> {
       <Button
         className="pagination-previous"
         label={label ? label : previousPage.toString()}
-        disabled={!this.hasLink('prev')}
+        disabled={!this.hasLink("prev")}
         action={() => this.updateCurrentPage(previousPage)}
       />
     );
@@ -54,7 +54,7 @@ class StatePaginator extends React.Component<Props> {
       <Button
         className="pagination-next"
         label={label ? label : nextPage.toString()}
-        disabled={!this.hasLink('next')}
+        disabled={!this.hasLink("next")}
         action={() => this.updateCurrentPage(nextPage)}
       />
     );
@@ -80,7 +80,7 @@ class StatePaginator extends React.Component<Props> {
     return (
       <Button
         className="pagination-link is-current"
-        label={page}
+        label={"" + page}
         disabled={true}
         action={() => this.updateCurrentPage(page)}
       />
@@ -119,15 +119,15 @@ class StatePaginator extends React.Component<Props> {
     const { t } = this.props;
     return (
       <nav className="pagination is-centered" aria-label="pagination">
-        {this.renderPreviousButton(t('paginator.previous'))}
+        {this.renderPreviousButton(t("paginator.previous"))}
         <ul className="pagination-list">
           {this.pageLinks().map((link, index) => {
             return <li key={index}>{link}</li>;
           })}
         </ul>
-        {this.renderNextButton(t('paginator.next'))}
+        {this.renderNextButton(t("paginator.next"))}
       </nav>
     );
   }
 }
-export default translate('commons')(StatePaginator);
+export default translate("commons")(StatePaginator);

scm-ui/ui-components/src/SyntaxHighlighter.stories.tsx

@@ -1,34 +1,34 @@
-import React from 'react';
+import React from "react";
-import { storiesOf } from '@storybook/react';
+import { storiesOf } from "@storybook/react";
-import styled from 'styled-components';
+import styled from "styled-components";
-import SyntaxHighlighter from './SyntaxHighlighter';
+import SyntaxHighlighter from "./SyntaxHighlighter";
 
-import JavaHttpServer from './__resources__/HttpServer.java';
+import JavaHttpServer from "./__resources__/HttpServer.java";
-import GoHttpServer from './__resources__/HttpServer.go';
+import GoHttpServer from "./__resources__/HttpServer.go";
-//import JsHttpServer from './__resources__/HttpServer.js';
+import JsHttpServer from './__resources__/HttpServer.js';
-import PyHttpServer from './__resources__/HttpServer.py';
+import PyHttpServer from "./__resources__/HttpServer.py";
 
 const Spacing = styled.div`
   padding: 1em;
 `;
 
-storiesOf('SyntaxHighlighter', module)
+storiesOf("SyntaxHighlighter", module)
-  .add('Java', () => (
+  .add("Java", () => (
     <Spacing>
       <SyntaxHighlighter language="java" value={JavaHttpServer} />
     </Spacing>
   ))
-  .add('Go', () => (
+  .add("Go", () => (
     <Spacing>
       <SyntaxHighlighter language="go" value={GoHttpServer} />
     </Spacing>
   ))
-  /*.add('Javascript', () => (
+  .add('Javascript', () => (
     <Spacing>
       <SyntaxHighlighter language="javascript" value={JsHttpServer} />
     </Spacing>
-  ))*/
+  ))
-  .add('Python', () => (
+  .add("Python", () => (
     <Spacing>
       <SyntaxHighlighter language="python" value={PyHttpServer} />
     </Spacing>

scm-ui/ui-components/src/SyntaxHighlighter.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React from "react";
 
-import { LightAsync as ReactSyntaxHighlighter } from 'react-syntax-highlighter';
+import { LightAsync as ReactSyntaxHighlighter } from "react-syntax-highlighter";
-import { arduinoLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+// @ts-ignore
+import { arduinoLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
 
 type Props = {
   language: string;
@@ -12,7 +13,7 @@ class SyntaxHighlighter extends React.Component<Props> {
   render() {
     return (
       <ReactSyntaxHighlighter
-        showLineNumbers="false"
+        showLineNumbers={false}
         language={this.props.language}
         style={arduinoLight}
       >

scm-ui/ui-components/src/Tag.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import * as React from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
 
 type Props = {
   className?: string;
@@ -13,7 +13,7 @@ type Props = {
 
 class Tag extends React.Component<Props> {
   static defaultProps = {
-    color: 'light',
+    color: "light"
   };
 
   render() {
@@ -24,13 +24,13 @@ class Tag extends React.Component<Props> {
       label,
       title,
       onClick,
-      onRemove,
+      onRemove
     } = this.props;
     let showIcon = null;
     if (icon) {
       showIcon = (
         <>
-          <i className={classNames('fas', `fa-${icon}`)} />
+          <i className={classNames("fas", `fa-${icon}`)} />
           &nbsp;
         </>
       );
@@ -43,7 +43,7 @@ class Tag extends React.Component<Props> {
     return (
       <>
         <span
-          className={classNames('tag', `is-${color}`, className)}
+          className={classNames("tag", `is-${color}`, className)}
           title={title}
           onClick={onClick}
         >

scm-ui/ui-components/src/Tooltip.tsx

@@ -1,28 +1,28 @@
-import * as React from 'react';
+import React, { ReactNode } from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
 
 type Props = {
   message: string;
   className?: string;
   location: string;
-  children: React.Node;
+  children: ReactNode;
 };
 
 class Tooltip extends React.Component<Props> {
   static defaultProps = {
-    location: 'right',
+    location: "right"
   };
 
   render() {
     const { className, message, location, children } = this.props;
-    const multiline = message.length > 60 ? 'is-tooltip-multiline' : '';
+    const multiline = message.length > 60 ? "is-tooltip-multiline" : "";
     return (
       <span
         className={classNames(
-          'tooltip',
+          "tooltip",
-          'is-tooltip-' + location,
+          "is-tooltip-" + location,
           multiline,
-          className,
+          className
         )}
         data-tooltip={message}
       >

scm-ui/ui-components/src/UserAutocomplete.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
-import AutocompleteProps from './UserGroupAutocomplete';
+import AutocompleteProps from "./UserGroupAutocomplete";
-import UserGroupAutocomplete from './UserGroupAutocomplete';
+import UserGroupAutocomplete from "./UserGroupAutocomplete";
 
 type Props = AutocompleteProps & {
   // Context props
@@ -13,14 +13,14 @@ class UserAutocomplete extends React.Component<Props> {
     const { t } = this.props;
     return (
       <UserGroupAutocomplete
-        label={t('autocomplete.user')}
+        label={t("autocomplete.user")}
-        noOptionsMessage={t('autocomplete.noUserOptions')}
+        noOptionsMessage={t("autocomplete.noUserOptions")}
-        loadingMessage={t('autocomplete.loading')}
+        loadingMessage={t("autocomplete.loading")}
-        placeholder={t('autocomplete.userPlaceholder')}
+        placeholder={t("autocomplete.userPlaceholder")}
         {...this.props}
       />
     );
   }
 }
 
-export default translate('commons')(UserAutocomplete);
+export default translate("commons")(UserAutocomplete);

scm-ui/ui-components/src/UserGroupAutocomplete.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React from "react";
-import { SelectValue } from '@scm-manager/ui-types';
+import { SelectValue, AutocompleteObject } from "@scm-manager/ui-types";
-import Autocomplete from './Autocomplete';
+import Autocomplete from "./Autocomplete";
 
 export type AutocompleteProps = {
-  autocompleteLink: string;
+  autocompleteLink?: string;
-  valueSelected: (p: SelectValue) => void;
+  valueSelected?: (p: SelectValue) => void;
   value?: SelectValue;
 };
 
@@ -16,26 +16,28 @@ type Props = AutocompleteProps & {
 };
 
 export default class UserGroupAutocomplete extends React.Component<Props> {
-  loadSuggestions = (inputValue: string) => {
+  loadSuggestions = (inputValue: string): Promise<SelectValue[]> => {
     const url = this.props.autocompleteLink;
-    const link = url + '?q=';
+    const link = url + "?q=";
     return fetch(link + inputValue)
       .then(response => response.json())
-      .then(json => {
+      .then((json: AutocompleteObject[]) => {
         return json.map(element => {
           const label = element.displayName
             ? `${element.displayName} (${element.id})`
             : element.id;
           return {
             value: element,
-            label,
+            label
           };
         });
       });
   };
 
   selectName = (selection: SelectValue) => {
-    this.props.valueSelected(selection);
+    if (this.props.valueSelected) {
+      this.props.valueSelected(selection);
+    }
   };
 
   render() {

scm-ui/ui-components/src/__resources__/HttpServer.js.ts

@@ -0,0 +1,8 @@
+export default `var http = require('http');
+
+http.createServer(function (req, res) {
+  res.writeHead(200, {'Content-Type': 'text/plain'});
+  res.write('Hello World!');
+  res.end();
+}).listen(8080);
+`;

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -5,7 +5,7 @@ exports[`Storyshots Buttons|AddButton Default 1`] = `
   className="sc-htoDjs bIDNS"
 >
   <button
-    className="button is-primary"
+    className="button is-default"
     onClick={[Function]}
     type="button"
   >
@@ -243,6 +243,30 @@ exports[`Storyshots Buttons|DownloadButton Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Buttons|DownloadButton Disabled 1`] = `
+<div
+  className="sc-htoDjs bIDNS"
+>
+  <a
+    className="button is-link"
+    disabled={true}
+    href=""
+    onClick={[Function]}
+  >
+    <span
+      className="icon is-medium"
+    >
+      <i
+        className="fas fa-arrow-circle-down"
+      />
+    </span>
+    <span>
+      Download
+    </span>
+  </a>
+</div>
+`;
+
 exports[`Storyshots Buttons|EditButton Default 1`] = `
 <div
   className="sc-htoDjs bIDNS"
@@ -310,6 +334,128 @@ exports[`Storyshots DateFromNow Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Forms|Checkbox Default 1`] = `
+<div
+  className="sc-gipzik xsalO"
+>
+  <div
+    className="field is-grouped"
+  >
+    <div
+      className="control"
+    >
+      <label
+        className="checkbox"
+      >
+        <input
+          checked={false}
+          onChange={[Function]}
+          type="checkbox"
+        />
+         
+        Not checked
+      </label>
+    </div>
+  </div>
+  <div
+    className="field is-grouped"
+  >
+    <div
+      className="control"
+    >
+      <label
+        className="checkbox"
+      >
+        <input
+          checked={true}
+          onChange={[Function]}
+          type="checkbox"
+        />
+         
+        Checked
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Forms|Checkbox Disabled 1`] = `
+<div
+  className="sc-gipzik xsalO"
+>
+  <div
+    className="field is-grouped"
+  >
+    <div
+      className="control"
+    >
+      <label
+        className="checkbox"
+        disabled={true}
+      >
+        <input
+          checked={true}
+          disabled={true}
+          onChange={[Function]}
+          type="checkbox"
+        />
+         
+        Checked but disabled
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Forms|Radio Default 1`] = `
+<div
+  className="sc-csuQGl fFFkRK"
+>
+  <label
+    className="radio"
+  >
+    <input
+      checked={false}
+      onChange={[Function]}
+      type="radio"
+    />
+     
+    Not checked
+  </label>
+  <label
+    className="radio"
+  >
+    <input
+      checked={true}
+      onChange={[Function]}
+      type="radio"
+    />
+     
+    Checked
+  </label>
+</div>
+`;
+
+exports[`Storyshots Forms|Radio Disabled 1`] = `
+<div
+  className="sc-csuQGl fFFkRK"
+>
+  <label
+    className="radio"
+    disabled={true}
+  >
+    <input
+      checked={true}
+      disabled={true}
+      onChange={[Function]}
+      type="radio"
+    />
+     
+    Checked but disabled
+  </label>
+</div>
+`;
+
 exports[`Storyshots Loading Default 1`] = `
 <div>
   <div
@@ -967,120 +1113,6 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
           }
         }
       >
-        <code
-          style={
-            Object {
-              "float": "left",
-              "paddingRight": "10px",
-            }
-          }
-        >
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            1
-
-          </span>
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            2
-
-          </span>
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            3
-
-          </span>
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            4
-
-          </span>
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            5
-
-          </span>
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            6
-
-          </span>
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            7
-
-          </span>
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            8
-
-          </span>
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            9
-
-          </span>
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            10
-
-          </span>
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            11
-
-          </span>
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            12
-
-          </span>
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            13
-
-          </span>
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            14
-
-          </span>
-          <span
-            className="react-syntax-highlighter-line-number"
-            style={Object {}}
-          >
-            15
-
-          </span>
-        </code>
         <code>
           package main
 
@@ -1221,134 +1253,6 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
       }
     }
   >
-    <code
-      style={
-        Object {
-          "float": "left",
-          "paddingRight": "10px",
-        }
-      }
-    >
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        1
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        2
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        3
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        4
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        5
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        6
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        7
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        8
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        9
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        10
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        11
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        12
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        13
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        14
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        15
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        16
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        17
-
-      </span>
-    </code>
     <code>
       <span
         style={
@@ -1557,232 +1461,6 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       }
     }
   >
-    <code
-      style={
-        Object {
-          "float": "left",
-          "paddingRight": "10px",
-        }
-      }
-    >
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        1
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        2
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        3
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        4
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        5
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        6
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        7
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        8
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        9
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        10
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        11
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        12
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        13
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        14
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        15
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        16
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        17
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        18
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        19
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        20
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        21
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        22
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        23
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        24
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        25
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        26
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        27
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        28
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        29
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        30
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        31
-
-      </span>
-    </code>
     <code>
       <span
         style={
@@ -2207,6 +1885,140 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
 </div>
 `;
 
+exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
+<div
+  className="sc-bZQynM hAJIOS"
+>
+  <pre
+    style={
+      Object {
+        "background": "#FFFFFF",
+        "color": "#434f54",
+        "display": "block",
+        "overflowX": "auto",
+        "padding": "0.5em",
+      }
+    }
+  >
+    <code>
+      <span
+        style={
+          Object {
+            "color": "#00979D",
+          }
+        }
+      >
+        var
+      </span>
+       http = 
+      <span
+        style={
+          Object {
+            "color": "#D35400",
+          }
+        }
+      >
+        require
+      </span>
+      (
+      <span
+        style={
+          Object {
+            "color": "#005C5F",
+          }
+        }
+      >
+        'http'
+      </span>
+      );
+
+http.createServer(
+      <span
+        style={
+          Object {
+            "color": "#728E00",
+          }
+        }
+      >
+        <span
+          style={
+            Object {
+              "color": "#00979D",
+            }
+          }
+        >
+          function
+        </span>
+         (
+        <span
+          className="hljs-params"
+          style={Object {}}
+        >
+          req, res
+        </span>
+        ) 
+      </span>
+      {
+  res.writeHead(
+      <span
+        style={
+          Object {
+            "color": "#8A7B52",
+          }
+        }
+      >
+        200
+      </span>
+      , {
+      <span
+        style={
+          Object {
+            "color": "#005C5F",
+          }
+        }
+      >
+        'Content-Type'
+      </span>
+      : 
+      <span
+        style={
+          Object {
+            "color": "#005C5F",
+          }
+        }
+      >
+        'text/plain'
+      </span>
+      });
+  res.write(
+      <span
+        style={
+          Object {
+            "color": "#005C5F",
+          }
+        }
+      >
+        'Hello World!'
+      </span>
+      );
+  res.end();
+}).listen(
+      <span
+        style={
+          Object {
+            "color": "#8A7B52",
+          }
+        }
+      >
+        8080
+      </span>
+      );
+
+    </code>
+  </pre>
+</div>
+`;
+
 exports[`Storyshots SyntaxHighlighter Python 1`] = `
 <div
   className="sc-bZQynM hAJIOS"
@@ -2222,155 +2034,6 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
       }
     }
   >
-    <code
-      style={
-        Object {
-          "float": "left",
-          "paddingRight": "10px",
-        }
-      }
-    >
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        1
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        2
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        3
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        4
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        5
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        6
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        7
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        8
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        9
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        10
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        11
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        12
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        13
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        14
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        15
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        16
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        17
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        18
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        19
-
-      </span>
-      <span
-        className="react-syntax-highlighter-line-number"
-        style={Object {}}
-      >
-        20
-
-      </span>
-    </code>
     <code>
       <span
         style={

scm-ui/ui-components/src/apiclient.test.ts

@@ -1,31 +1,31 @@
-import { apiClient, createUrl } from './apiclient';
+import { apiClient, createUrl } from "./apiclient";
-import fetchMock from 'fetch-mock';
+import fetchMock from "fetch-mock";
-import { BackendError } from './errors';
+import { BackendError } from "./errors";
 
-describe('create url', () => {
+describe("create url", () => {
-  it('should not change absolute urls', () => {
+  it("should not change absolute urls", () => {
-    expect(createUrl('https://www.scm-manager.org')).toBe(
+    expect(createUrl("https://www.scm-manager.org")).toBe(
-      'https://www.scm-manager.org',
+      "https://www.scm-manager.org"
     );
   });
 
-  it('should add prefix for api', () => {
+  it("should add prefix for api", () => {
-    expect(createUrl('/users')).toBe('/api/v2/users');
+    expect(createUrl("/users")).toBe("/api/v2/users");
-    expect(createUrl('users')).toBe('/api/v2/users');
+    expect(createUrl("users")).toBe("/api/v2/users");
   });
 });
 
-describe('error handling tests', () => {
+describe("error handling tests", () => {
   const earthNotFoundError = {
-    transactionId: '42t',
+    transactionId: "42t",
-    errorCode: '42e',
+    errorCode: "42e",
-    message: 'earth not found',
+    message: "earth not found",
     context: [
       {
-        type: 'planet',
+        type: "planet",
-        id: 'earth',
+        id: "earth"
-      },
+      }
-    ],
+    ]
   };
 
   afterEach(() => {
@@ -33,40 +33,40 @@ describe('error handling tests', () => {
     fetchMock.restore();
   });
 
-  it('should create a normal error, if the content type is not scmm-error', done => {
+  it("should create a normal error, if the content type is not scmm-error", done => {
-    fetchMock.getOnce('/api/v2/error', {
+    fetchMock.getOnce("/api/v2/error", {
-      status: 404,
+      status: 404
     });
 
-    apiClient.get('/error').catch((err: Error) => {
+    apiClient.get("/error").catch((err: Error) => {
-      expect(err.name).toEqual('Error');
+      expect(err.name).toEqual("Error");
-      expect(err.message).toContain('404');
+      expect(err.message).toContain("404");
       done();
     });
   });
 
-  it('should create an backend error, if the content type is scmm-error', done => {
+  it("should create an backend error, if the content type is scmm-error", done => {
-    fetchMock.getOnce('/api/v2/error', {
+    fetchMock.getOnce("/api/v2/error", {
       status: 404,
       headers: {
-        'Content-Type': 'application/vnd.scmm-error+json;v=2',
+        "Content-Type": "application/vnd.scmm-error+json;v=2"
       },
-      body: earthNotFoundError,
+      body: earthNotFoundError
     });
 
-    apiClient.get('/error').catch((err: BackendError) => {
+    apiClient.get("/error").catch((err: BackendError) => {
       expect(err).toBeInstanceOf(BackendError);
 
-      expect(err.message).toEqual('earth not found');
+      expect(err.message).toEqual("earth not found");
       expect(err.statusCode).toBe(404);
 
-      expect(err.transactionId).toEqual('42t');
+      expect(err.transactionId).toEqual("42t");
-      expect(err.errorCode).toEqual('42e');
+      expect(err.errorCode).toEqual("42e");
       expect(err.context).toEqual([
         {
-          type: 'planet',
+          type: "planet",
-          id: 'earth',
+          id: "earth"
-        },
+        }
       ]);
       done();
     });

scm-ui/ui-components/src/apiclient.ts

@@ -1,18 +1,18 @@
-import { contextPath } from './urls';
+import { contextPath } from "./urls";
 import {
   createBackendError,
   ForbiddenError,
   isBackendError,
-  UnauthorizedError,
+  UnauthorizedError
-} from './errors';
+} from "./errors";
-import { BackendErrorContent } from './errors';
+import { BackendErrorContent } from "./errors";
 
-const applyFetchOptions: (p: RequestOptions) => RequestOptions = o => {
+const applyFetchOptions: (p: RequestInit) => RequestInit = o => {
-  o.credentials = 'same-origin';
+  o.credentials = "same-origin";
   o.headers = {
-    Cache: 'no-cache',
+    Cache: "no-cache",
     // identify the request as ajax request
-    'X-Requested-With': 'XMLHttpRequest',
+    "X-Requested-With": "XMLHttpRequest"
   };
   return o;
 };
@@ -25,24 +25,24 @@ function handleFailure(response: Response) {
       });
     } else {
       if (response.status === 401) {
-        throw new UnauthorizedError('Unauthorized', 401);
+        throw new UnauthorizedError("Unauthorized", 401);
       } else if (response.status === 403) {
-        throw new ForbiddenError('Forbidden', 403);
+        throw new ForbiddenError("Forbidden", 403);
       }
 
-      throw new Error('server returned status code ' + response.status);
+      throw new Error("server returned status code " + response.status);
     }
   }
   return response;
 }
 
 export function createUrl(url: string) {
-  if (url.includes('://')) {
+  if (url.includes("://")) {
     return url;
   }
   let urlWithStartingSlash = url;
-  if (url.indexOf('/') !== 0) {
+  if (url.indexOf("/") !== 0) {
-    urlWithStartingSlash = '/' + urlWithStartingSlash;
+    urlWithStartingSlash = "/" + urlWithStartingSlash;
   }
   return `${contextPath}/api/v2${urlWithStartingSlash}`;
 }
@@ -52,36 +52,36 @@ class ApiClient {
     return fetch(createUrl(url), applyFetchOptions({})).then(handleFailure);
   }
 
-  post(url: string, payload: any, contentType: string = 'application/json') {
+  post(url: string, payload: any, contentType: string = "application/json") {
-    return this.httpRequestWithJSONBody('POST', url, contentType, payload);
+    return this.httpRequestWithJSONBody("POST", url, contentType, payload);
   }
 
   postBinary(url: string, fileAppender: (p: FormData) => void) {
     let formData = new FormData();
     fileAppender(formData);
 
-    let options: RequestOptions = {
+    let options: RequestInit = {
-      method: 'POST',
+      method: "POST",
-      body: formData,
+      body: formData
     };
     return this.httpRequestWithBinaryBody(options, url);
   }
 
-  put(url: string, payload: any, contentType: string = 'application/json') {
+  put(url: string, payload: any, contentType: string = "application/json") {
-    return this.httpRequestWithJSONBody('PUT', url, contentType, payload);
+    return this.httpRequestWithJSONBody("PUT", url, contentType, payload);
   }
 
   head(url: string) {
-    let options: RequestOptions = {
+    let options: RequestInit = {
-      method: 'HEAD',
+      method: "HEAD"
     };
     options = applyFetchOptions(options);
     return fetch(createUrl(url), options).then(handleFailure);
   }
 
   delete(url: string): Promise<Response> {
-    let options: RequestOptions = {
+    let options: RequestInit = {
-      method: 'DELETE',
+      method: "DELETE"
     };
     options = applyFetchOptions(options);
     return fetch(createUrl(url), options).then(handleFailure);
@@ -91,24 +91,27 @@ class ApiClient {
     method: string,
     url: string,
     contentType: string,
-    payload: any,
+    payload: any
   ): Promise<Response> {
-    let options: RequestOptions = {
+    let options: RequestInit = {
       method: method,
-      body: JSON.stringify(payload),
+      body: JSON.stringify(payload)
     };
     return this.httpRequestWithBinaryBody(options, url, contentType);
   }
 
   httpRequestWithBinaryBody(
-    options: RequestOptions,
+    options: RequestInit,
     url: string,
-    contentType?: string,
+    contentType?: string
   ) {
     options = applyFetchOptions(options);
     if (contentType) {
-      // $FlowFixMe
+      if (!options.headers) {
-      options.headers['Content-Type'] = contentType;
+        options.headers = new Headers();
+      }
+      // @ts-ignore
+      options.headers["Content-Type"] = contentType;
     }
 
     return fetch(createUrl(url), options).then(handleFailure);

scm-ui/ui-components/src/avatar/Avatar.ts

@@ -3,4 +3,4 @@ export type Person = {
   mail?: string;
 };
 
-export const EXTENSION_POINT = 'avatar.factory';
+export const EXTENSION_POINT = "avatar.factory";

scm-ui/ui-components/src/avatar/AvatarImage.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from "react";
-import { binder } from '@scm-manager/ui-extensions';
+import { binder } from "@scm-manager/ui-extensions";
-import { Image } from '..';
+import { Image } from "..";
-import { Person } from './Avatar';
+import { Person } from "./Avatar";
-import { EXTENSION_POINT } from './Avatar';
+import { EXTENSION_POINT } from "./Avatar";
 
 type Props = {
   person: Person;

scm-ui/ui-components/src/avatar/AvatarWrapper.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
+import React, { Component, ReactNode } from "react";
-import { binder } from '@scm-manager/ui-extensions';
+import { binder } from "@scm-manager/ui-extensions";
-import { EXTENSION_POINT } from './Avatar';
+import { EXTENSION_POINT } from "./Avatar";
 
 type Props = {
-  children: React.Node;
+  children: ReactNode;
 };
 
-class AvatarWrapper extends React.Component<Props> {
+class AvatarWrapper extends Component<Props> {
   render() {
     if (binder.hasExtension(EXTENSION_POINT)) {
       return <>{this.props.children}</>;

scm-ui/ui-components/src/avatar/index.ts

@@ -1,2 +1,2 @@
-export { default as AvatarWrapper } from './AvatarWrapper';
+export { default as AvatarWrapper } from "./AvatarWrapper";
-export { default as AvatarImage } from './AvatarImage';
+export { default as AvatarImage } from "./AvatarImage";

scm-ui/ui-components/src/buttons/AddButton.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
-import Button, { ButtonProps } from './Button';
+import Button, { ButtonProps } from "./Button";
 
 class AddButton extends React.Component<ButtonProps> {
   render() {

scm-ui/ui-components/src/buttons/Button.tsx

@@ -1,36 +1,34 @@
-import * as React from 'react';
+import React, { MouseEvent, ReactNode } from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteComponentProps } from "react-router-dom";
-import Icon from '../Icon';
+import Icon from "../Icon";
 
 export type ButtonProps = {
   label?: string;
   loading?: boolean;
   disabled?: boolean;
-  action?: (event: Event) => void;
+  action?: (event: MouseEvent) => void;
   link?: string;
   className?: string;
   icon?: string;
   fullWidth?: boolean;
   reducedMobile?: boolean;
-  children?: React.Node;
+  children?: ReactNode;
 };
 
-type Props = ButtonProps & {
+type Props = ButtonProps &
-  type: string;
+  RouteComponentProps & {
-  color: string;
+    type?: "button" | "submit" | "reset";
-
+    color?: string;
-  // context prop
-  history: any;
-};
-
-class Button extends React.Component<Props> {
-  static defaultProps = {
-    type: 'button',
-    color: 'default',
   };
 
-  onClick = (event: Event) => {
+class Button extends React.Component<Props> {
+  static defaultProps: Partial<Props> = {
+    type: "button",
+    color: "default"
+  };
+
+  onClick = (event: React.MouseEvent) => {
     const { action, link, history } = this.props;
     if (action) {
       action(event);
@@ -50,11 +48,11 @@ class Button extends React.Component<Props> {
       icon,
       fullWidth,
       reducedMobile,
-      children,
+      children
     } = this.props;
-    const loadingClass = loading ? 'is-loading' : '';
+    const loadingClass = loading ? "is-loading" : "";
-    const fullWidthClass = fullWidth ? 'is-fullwidth' : '';
+    const fullWidthClass = fullWidth ? "is-fullwidth" : "";
-    const reducedMobileClass = reducedMobile ? 'is-reduced-mobile' : '';
+    const reducedMobileClass = reducedMobile ? "is-reduced-mobile" : "";
     if (icon) {
       return (
         <button
@@ -62,12 +60,12 @@ class Button extends React.Component<Props> {
           disabled={disabled}
           onClick={this.onClick}
           className={classNames(
-            'button',
+            "button",
-            'is-' + color,
+            "is-" + color,
             loadingClass,
             fullWidthClass,
             reducedMobileClass,
-            className,
+            className
           )}
         >
           <span className="icon is-medium">
@@ -86,11 +84,11 @@ class Button extends React.Component<Props> {
         disabled={disabled}
         onClick={this.onClick}
         className={classNames(
-          'button',
+          "button",
-          'is-' + color,
+          "is-" + color,
           loadingClass,
           fullWidthClass,
-          className,
+          className
         )}
       >
         {label} {children}

scm-ui/ui-components/src/buttons/ButtonAddons.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React, { ReactNode } from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
-import styled from 'styled-components';
+import styled from "styled-components";
 
 const Flex = styled.div`
   &.field:not(:last-child) {
@@ -10,26 +10,26 @@ const Flex = styled.div`
 
 type Props = {
   className?: string;
-  children: React.Node;
+  children: ReactNode;
 };
 
 class ButtonAddons extends React.Component<Props> {
   render() {
     const { className, children } = this.props;
 
-    const childWrapper = [];
+    const childWrapper: ReactNode[] = [];
     React.Children.forEach(children, child => {
       if (child) {
         childWrapper.push(
           <p className="control" key={childWrapper.length}>
             {child}
-          </p>,
+          </p>
         );
       }
     });
 
     return (
-      <Flex className={classNames('field', 'has-addons', className)}>
+      <Flex className={classNames("field", "has-addons", className)}>
         {childWrapper}
       </Flex>
     );

scm-ui/ui-components/src/buttons/ButtonGroup.tsx

@@ -1,28 +1,28 @@
-import * as React from 'react';
+import React, { ReactNode } from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
 
 type Props = {
   className?: string;
-  children: React.Node;
+  children: ReactNode;
 };
 
 class ButtonGroup extends React.Component<Props> {
   render() {
     const { className, children } = this.props;
 
-    const childWrapper = [];
+    const childWrapper: ReactNode[] = [];
     React.Children.forEach(children, child => {
       if (child) {
         childWrapper.push(
           <div className="control" key={childWrapper.length}>
             {child}
-          </div>,
+          </div>
         );
       }
     });
 
     return (
-      <div className={classNames('field', 'is-grouped', className)}>
+      <div className={classNames("field", "is-grouped", className)}>
         {childWrapper}
       </div>
     );

scm-ui/ui-components/src/buttons/CreateButton.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import styled from 'styled-components';
+import styled from "styled-components";
-import Button, { ButtonProps } from './Button';
+import Button, { ButtonProps } from "./Button";
 
 const Wrapper = styled.div`
   margin-top: 2em;

scm-ui/ui-components/src/buttons/DeleteButton.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
-import Button, { ButtonProps } from './Button';
+import Button, { ButtonProps } from "./Button";
 
 class DeleteButton extends React.Component<ButtonProps> {
   render() {

scm-ui/ui-components/src/buttons/DownloadButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 type Props = {
   displayName: string;
@@ -12,17 +12,24 @@ class DownloadButton extends React.Component<Props> {
     const { displayName, url, disabled, onClick } = this.props;
     const onClickOrDefault = !!onClick ? onClick : () => {};
     return (
-      <a
+      <>
-        className="button is-link"
+        {/*
-        href={url}
+        we have to ignore the next line, 
-        disabled={disabled}
+        because jsx a does not the custom disabled attribute
-        onClick={onClickOrDefault}
+        but bulma does.
-      >
+        // @ts-ignore */}
-        <span className="icon is-medium">
+        <a
-          <i className="fas fa-arrow-circle-down" />
+          className="button is-link"
-        </span>
+          href={url}
-        <span>{displayName}</span>
+          disabled={disabled}
-      </a>
+          onClick={onClickOrDefault}
+        >
+          <span className="icon is-medium">
+            <i className="fas fa-arrow-circle-down" />
+          </span>
+          <span>{displayName}</span>
+        </a>
+      </>
     );
   }
 }

scm-ui/ui-components/src/buttons/EditButton.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
-import Button, { ButtonProps } from './Button';
+import Button, { ButtonProps } from "./Button";
 
 class EditButton extends React.Component<ButtonProps> {
   render() {

scm-ui/ui-components/src/buttons/RemoveEntryOfTableButton.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { MouseEvent } from "react";
-import { DeleteButton } from '.';
+import { DeleteButton } from ".";
-import classNames from 'classnames';
+import classNames from "classnames";
 
 type Props = {
   entryname: string;
@@ -15,10 +15,10 @@ class RemoveEntryOfTableButton extends React.Component<Props, State> {
   render() {
     const { label, entryname, removeEntry, disabled } = this.props;
     return (
-      <div className={classNames('is-pulled-right')}>
+      <div className={classNames("is-pulled-right")}>
         <DeleteButton
           label={label}
-          action={(event: Event) => {
+          action={(event: MouseEvent) => {
             event.preventDefault();
             removeEntry(entryname);
           }}

scm-ui/ui-components/src/buttons/SubmitButton.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React, { MouseEvent } from "react";
-import Button, { ButtonProps } from './Button';
+import Button, { ButtonProps } from "./Button";
 
 type SubmitButtonProps = ButtonProps & {
   scrollToTop: boolean;
@@ -7,7 +7,7 @@ type SubmitButtonProps = ButtonProps & {
 
 class SubmitButton extends React.Component<SubmitButtonProps> {
   static defaultProps = {
-    scrollToTop: true,
+    scrollToTop: true
   };
 
   render() {
@@ -17,7 +17,7 @@ class SubmitButton extends React.Component<SubmitButtonProps> {
         type="submit"
         color="primary"
         {...this.props}
-        action={event => {
+        action={(event: MouseEvent) => {
           if (action) {
             action(event);
           }

scm-ui/ui-components/src/buttons/index.stories.tsx

@@ -1,27 +1,28 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode } from "react";
-import Button from './Button';
+import Button from "./Button";
-import { storiesOf } from '@storybook/react';
+import { storiesOf } from "@storybook/react";
-import styled from 'styled-components';
+import styled from "styled-components";
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from "react-router-dom";
-import AddButton from './AddButton';
+import AddButton from "./AddButton";
-import CreateButton from './CreateButton';
+import CreateButton from "./CreateButton";
-import DeleteButton from './DeleteButton';
+import DeleteButton from "./DeleteButton";
-import DownloadButton from './DownloadButton';
+import DownloadButton from "./DownloadButton";
-import EditButton from './EditButton';
+import EditButton from "./EditButton";
-import SubmitButton from './SubmitButton';
+import SubmitButton from "./SubmitButton";
+import { ReactElement } from "react";
 
 const colors = [
-  'primary',
+  "primary",
-  'link',
+  "link",
-  'info',
+  "info",
-  'success',
+  "success",
-  'warning',
+  "warning",
-  'danger',
+  "danger",
-  'white',
+  "white",
-  'light',
+  "light",
-  'dark',
+  "dark",
-  'black',
+  "black",
-  'text',
+  "text"
 ];
 
 const Spacing = styled.div`
@@ -29,14 +30,14 @@ const Spacing = styled.div`
 `;
 
 const RoutingDecorator = story => (
-  <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
+  <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>
 );
 
 const SpacingDecorator = story => <Spacing>{story()}</Spacing>;
 
-storiesOf('Buttons|Button', module)
+storiesOf("Buttons|Button", module)
   .addDecorator(RoutingDecorator)
-  .add('Colors', () => (
+  .add("Colors", () => (
     <div>
       {colors.map(color => (
         <Spacing key={color}>
@@ -45,30 +46,36 @@ storiesOf('Buttons|Button', module)
       ))}
     </div>
   ))
-  .add('Loading', () => (
+  .add("Loading", () => (
     <Spacing>
-      <Button color={'primary'} loading={true}>
+      <Button color={"primary"} loading={true}>
         Loading Button
       </Button>
     </Spacing>
   ));
 
-const buttonStory = (name: string, storyFn: () => ReactNode) => {
+const buttonStory = (name: string, storyFn: () => ReactElement) => {
-  return storiesOf('Buttons|' + name, module)
+  return storiesOf("Buttons|" + name, module)
     .addDecorator(RoutingDecorator)
     .addDecorator(SpacingDecorator)
-    .add('Default', storyFn);
+    .add("Default", storyFn);
 };
 
-buttonStory('AddButton', () => <AddButton color={'primary'}>Add</AddButton>);
+buttonStory("AddButton", () => <AddButton>Add</AddButton>);
-buttonStory('CreateButton', () => <CreateButton>Create</CreateButton>);
+buttonStory("CreateButton", () => <CreateButton>Create</CreateButton>);
-buttonStory('DeleteButton', () => <DeleteButton>Delete</DeleteButton>);
+buttonStory("DeleteButton", () => <DeleteButton>Delete</DeleteButton>);
-buttonStory('DownloadButton', () => (
+buttonStory("DownloadButton", () => (
   <DownloadButton
     displayName="Download"
     disabled={false}
     url=""
   ></DownloadButton>
+)).add("Disabled", () => (
+  <DownloadButton
+    displayName="Download"
+    disabled={true}
+    url=""
+  ></DownloadButton>
 ));
-buttonStory('EditButton', () => <EditButton>Edit</EditButton>);
+buttonStory("EditButton", () => <EditButton>Edit</EditButton>);
-buttonStory('SubmitButton', () => <SubmitButton>Submit</SubmitButton>);
+buttonStory("SubmitButton", () => <SubmitButton>Submit</SubmitButton>);

scm-ui/ui-components/src/buttons/index.ts

@@ -1,14 +1,14 @@
 // @create-index
 
-export { default as AddButton } from './AddButton';
+export { default as AddButton } from "./AddButton";
-export { default as Button } from './Button';
+export { default as Button } from "./Button";
-export { default as CreateButton } from './CreateButton';
+export { default as CreateButton } from "./CreateButton";
-export { default as DeleteButton } from './DeleteButton';
+export { default as DeleteButton } from "./DeleteButton";
-export { default as EditButton } from './EditButton';
+export { default as EditButton } from "./EditButton";
-export { default as SubmitButton } from './SubmitButton';
+export { default as SubmitButton } from "./SubmitButton";
-export { default as DownloadButton } from './DownloadButton';
+export { default as DownloadButton } from "./DownloadButton";
-export { default as ButtonGroup } from './ButtonGroup';
+export { default as ButtonGroup } from "./ButtonGroup";
-export { default as ButtonAddons } from './ButtonAddons';
+export { default as ButtonAddons } from "./ButtonAddons";
 export {
-  default as RemoveEntryOfTableButton,
+  default as RemoveEntryOfTableButton
-} from './RemoveEntryOfTableButton';
+} from "./RemoveEntryOfTableButton";

scm-ui/ui-components/src/config/Configuration.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React from "react";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
-import { Links } from '@scm-manager/ui-types';
+import { Links, Link } from "@scm-manager/ui-types";
-import { apiClient, SubmitButton, Loading, ErrorNotification } from '../';
+import { apiClient, SubmitButton, Loading, ErrorNotification } from "../";
+import { FormEvent } from "react";
 
 type RenderProps = {
   readOnly: boolean;
@@ -25,7 +26,7 @@ type State = {
   error?: Error;
   fetching: boolean;
   modifying: boolean;
-  contentType?: string;
+  contentType?: string | null;
   configChanged: boolean;
 
   configuration?: ConfigurationType;
@@ -44,7 +45,7 @@ class Configuration extends React.Component<Props, State> {
       fetching: true,
       modifying: false,
       configChanged: false,
-      valid: false,
+      valid: false
     };
   }
 
@@ -60,23 +61,23 @@ class Configuration extends React.Component<Props, State> {
   }
 
   captureContentType = (response: Response) => {
-    const contentType = response.headers.get('Content-Type');
+    const contentType = response.headers.get("Content-Type");
     this.setState({
-      contentType,
+      contentType
     });
     return response;
   };
 
   getContentType = (): string => {
     const { contentType } = this.state;
-    return contentType ? contentType : 'application/json';
+    return contentType ? contentType : "application/json";
   };
 
   handleError = (error: Error) => {
     this.setState({
       error,
       fetching: false,
-      modifying: false,
+      modifying: false
     });
   };
 
@@ -84,16 +85,17 @@ class Configuration extends React.Component<Props, State> {
     this.setState({
       configuration,
       fetching: false,
-      error: undefined,
+      error: undefined
     });
   };
 
-  getModificationUrl = (): string | null | undefined => {
+  getModificationUrl = (): string | undefined => {
     const { configuration } = this.state;
     if (configuration) {
       const links = configuration._links;
       if (links && links.update) {
-        return links.update.href;
+        const link = links.update as Link;
+        return link.href;
       }
     }
   };
@@ -106,33 +108,40 @@ class Configuration extends React.Component<Props, State> {
   configurationChanged = (configuration: ConfigurationType, valid: boolean) => {
     this.setState({
       modifiedConfiguration: configuration,
-      valid,
+      valid
     });
   };
 
-  modifyConfiguration = (event: Event) => {
+  modifyConfiguration = (event: FormEvent) => {
     event.preventDefault();
 
     this.setState({
-      modifying: true,
+      modifying: true
     });
 
     const { modifiedConfiguration } = this.state;
 
+    const modificationUrl = this.getModificationUrl();
+    if (modificationUrl) {
     apiClient
       .put(
-        this.getModificationUrl(),
+        modificationUrl,
         modifiedConfiguration,
-        this.getContentType(),
+        this.getContentType()
       )
       .then(() =>
         this.setState({
           modifying: false,
           configChanged: true,
-          valid: false,
+          valid: false
-        }),
+        })
       )
       .catch(this.handleError);
+    } else {
+      this.setState({
+        error: new Error("no modification link available")
+      });
+    }
   };
 
   renderConfigChangedNotification = () => {
@@ -143,11 +152,11 @@ class Configuration extends React.Component<Props, State> {
             className="delete"
             onClick={() =>
               this.setState({
-                configChanged: false,
+                configChanged: false
               })
             }
           />
-          {this.props.t('config.form.submit-success-notification')}
+          {this.props.t("config.form.submit-success-notification")}
         </div>
       );
     }
@@ -168,7 +177,7 @@ class Configuration extends React.Component<Props, State> {
       const renderProps: RenderProps = {
         readOnly,
         initialConfiguration: configuration,
-        onConfigurationChange: this.configurationChanged,
+        onConfigurationChange: this.configurationChanged
       };
 
       return (
@@ -178,7 +187,7 @@ class Configuration extends React.Component<Props, State> {
             {this.props.render(renderProps)}
             <hr />
             <SubmitButton
-              label={t('config.form.submit')}
+              label={t("config.form.submit")}
               disabled={!valid || readOnly}
               loading={modifying}
             />
@@ -189,4 +198,4 @@ class Configuration extends React.Component<Props, State> {
   }
 }
 
-export default translate('config')(Configuration);
+export default translate("config")(Configuration);

scm-ui/ui-components/src/config/ConfigurationBinder.tsx

@@ -1,11 +1,22 @@
-import React from 'react';
+import React from "react";
-import { binder } from '@scm-manager/ui-extensions';
+import { binder } from "@scm-manager/ui-extensions";
-import { NavLink } from '../navigation';
+import { NavLink } from "../navigation";
-import { Route } from 'react-router-dom';
+import { Route } from "react-router-dom";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
+import { Repository, Links, Link } from "@scm-manager/ui-types";
+
+type GlobalRouteProps = {
+  url: string;
+  links: Links;
+};
+
+type RepositoryRouteProps = {
+  url: string;
+  repository: Repository;
+};
 
 class ConfigurationBinder {
-  i18nNamespace: string = 'plugins';
+  i18nNamespace: string = "plugins";
 
   navLink(to: string, labelI18nKey: string, t: any) {
     return <NavLink to={to} label={t(labelI18nKey)} />;
@@ -19,44 +30,53 @@ class ConfigurationBinder {
     to: string,
     labelI18nKey: string,
     linkName: string,
-    ConfigurationComponent: any,
+    ConfigurationComponent: any
   ) {
     // create predicate based on the link name of the index resource
     // if the linkname is not available, the navigation link and the route are not bound to the extension points
-    const configPredicate = (props: object) => {
+    const configPredicate = (props: any) => {
       return props.links && props.links[linkName];
     };
 
     // create NavigationLink with translated label
     const ConfigNavLink = translate(this.i18nNamespace)(({ t }) => {
-      return this.navLink('/admin/settings' + to, labelI18nKey, t);
+      return this.navLink("/admin/settings" + to, labelI18nKey, t);
     });
 
     // bind navigation link to extension point
-    binder.bind('admin.setting', ConfigNavLink, configPredicate);
+    binder.bind("admin.setting", ConfigNavLink, configPredicate);
 
     // route for global configuration, passes the link from the index resource to component
-    const ConfigRoute = ({ url, links, ...additionalProps }) => {
+    const ConfigRoute = ({
-      const link = links[linkName].href;
+      url,
-      return this.route(
+      links,
-        url + '/settings' + to,
+      ...additionalProps
-        <ConfigurationComponent link={link} {...additionalProps} />,
+    }: GlobalRouteProps) => {
-      );
+      const link = links[linkName];
+      if (link) {
+        return this.route(
+          url + "/settings" + to,
+          <ConfigurationComponent
+            link={(link as Link).href}
+            {...additionalProps}
+          />
+        );
+      }
     };
 
     // bind config route to extension point
-    binder.bind('admin.route', ConfigRoute, configPredicate);
+    binder.bind("admin.route", ConfigRoute, configPredicate);
   }
 
   bindRepository(
     to: string,
     labelI18nKey: string,
     linkName: string,
-    RepositoryComponent: any,
+    RepositoryComponent: any
   ) {
     // create predicate based on the link name of the current repository route
     // if the linkname is not available, the navigation link and the route are not bound to the extension points
-    const repoPredicate = (props: object) => {
+    const repoPredicate = (props: any) => {
       return (
         props.repository &&
         props.repository._links &&
@@ -70,34 +90,40 @@ class ConfigurationBinder {
     });
 
     // bind navigation link to extension point
-    binder.bind('repository.navigation', RepoNavLink, repoPredicate);
+    binder.bind("repository.navigation", RepoNavLink, repoPredicate);
 
     // route for global configuration, passes the current repository to component
-    const RepoRoute = ({ url, repository, ...additionalProps }) => {
+    const RepoRoute = ({
-      const link = repository._links[linkName].href;
+      url,
-      return this.route(
+      repository,
-        url + to,
+      ...additionalProps
-        <RepositoryComponent
+    }: RepositoryRouteProps) => {
-          repository={repository}
+      const link = repository._links[linkName];
-          link={link}
+      if (link) {
-          {...additionalProps}
+        return this.route(
-        />,
+          url + to,
-      );
+          <RepositoryComponent
+            repository={repository}
+            link={(link as Link).href}
+            {...additionalProps}
+          />
+        );
+      }
     };
 
     // bind config route to extension point
-    binder.bind('repository.route', RepoRoute, repoPredicate);
+    binder.bind("repository.route", RepoRoute, repoPredicate);
   }
 
   bindRepositorySetting(
     to: string,
     labelI18nKey: string,
     linkName: string,
-    RepositoryComponent: any,
+    RepositoryComponent: any
   ) {
     // create predicate based on the link name of the current repository route
     // if the linkname is not available, the navigation link and the route are not bound to the extension points
-    const repoPredicate = (props: object) => {
+    const repoPredicate = (props: any) => {
       return (
         props.repository &&
         props.repository._links &&
@@ -107,27 +133,33 @@ class ConfigurationBinder {
 
     // create NavigationLink with translated label
     const RepoNavLink = translate(this.i18nNamespace)(({ t, url }) => {
-      return this.navLink(url + '/settings' + to, labelI18nKey, t);
+      return this.navLink(url + "/settings" + to, labelI18nKey, t);
     });
 
     // bind navigation link to extension point
-    binder.bind('repository.setting', RepoNavLink, repoPredicate);
+    binder.bind("repository.setting", RepoNavLink, repoPredicate);
 
     // route for global configuration, passes the current repository to component
-    const RepoRoute = ({ url, repository, ...additionalProps }) => {
+    const RepoRoute = ({
-      const link = repository._links[linkName].href;
+      url,
-      return this.route(
+      repository,
-        url + '/settings' + to,
+      ...additionalProps
-        <RepositoryComponent
+    }: RepositoryRouteProps) => {
-          repository={repository}
+      const link = repository._links[linkName];
-          link={link}
+      if (link) {
-          {...additionalProps}
+        return this.route(
-        />,
+          url + "/settings" + to,
-      );
+          <RepositoryComponent
+            repository={repository}
+            link={(link as Link).href}
+            {...additionalProps}
+          />
+        );
+      }
     };
 
     // bind config route to extension point
-    binder.bind('repository.route', RepoRoute, repoPredicate);
+    binder.bind("repository.route", RepoRoute, repoPredicate);
   }
 }
 

scm-ui/ui-components/src/config/index.ts

@@ -1,2 +1,2 @@
-export { default as ConfigurationBinder } from './ConfigurationBinder';
+export { default as ConfigurationBinder } from "./ConfigurationBinder";
-export { default as Configuration } from './Configuration';
+export { default as Configuration } from "./Configuration";

scm-ui/ui-components/src/errors.test.ts

@@ -2,39 +2,39 @@ import {
   BackendError,
   UnauthorizedError,
   createBackendError,
-  NotFoundError,
+  NotFoundError
-} from './errors';
+} from "./errors";
 
-describe('test createBackendError', () => {
+describe("test createBackendError", () => {
   const earthNotFoundError = {
-    transactionId: '42t',
+    transactionId: "42t",
-    errorCode: '42e',
+    errorCode: "42e",
-    message: 'earth not found',
+    message: "earth not found",
     context: [
       {
-        type: 'planet',
+        type: "planet",
-        id: 'earth',
+        id: "earth"
-      },
+      }
     ],
-    violations: [],
+    violations: []
   };
 
-  it('should return a default backend error', () => {
+  it("should return a default backend error", () => {
     const err = createBackendError(earthNotFoundError, 500);
     expect(err).toBeInstanceOf(BackendError);
-    expect(err.name).toBe('BackendError');
+    expect(err.name).toBe("BackendError");
   });
 
   // 403 is no backend error
-  xit('should return an unauthorized error for status code 403', () => {
+  xit("should return an unauthorized error for status code 403", () => {
     const err = createBackendError(earthNotFoundError, 403);
     expect(err).toBeInstanceOf(UnauthorizedError);
-    expect(err.name).toBe('UnauthorizedError');
+    expect(err.name).toBe("UnauthorizedError");
   });
 
-  it('should return an not found error for status code 404', () => {
+  it("should return an not found error for status code 404", () => {
     const err = createBackendError(earthNotFoundError, 404);
     expect(err).toBeInstanceOf(NotFoundError);
-    expect(err.name).toBe('NotFoundError');
+    expect(err.name).toBe("NotFoundError");
   });
 });

scm-ui/ui-components/src/errors.ts

@@ -54,19 +54,19 @@ export class ForbiddenError extends Error {
 
 export class NotFoundError extends BackendError {
   constructor(content: BackendErrorContent, statusCode: number) {
-    super(content, 'NotFoundError', statusCode);
+    super(content, "NotFoundError", statusCode);
   }
 }
 
 export class ConflictError extends BackendError {
   constructor(content: BackendErrorContent, statusCode: number) {
-    super(content, 'ConflictError', statusCode);
+    super(content, "ConflictError", statusCode);
   }
 }
 
 export function createBackendError(
   content: BackendErrorContent,
-  statusCode: number,
+  statusCode: number
 ) {
   switch (statusCode) {
     case 404:
@@ -74,13 +74,13 @@ export function createBackendError(
     case 409:
       return new ConflictError(content, statusCode);
     default:
-      return new BackendError(content, 'BackendError', statusCode);
+      return new BackendError(content, "BackendError", statusCode);
   }
 }
 
 export function isBackendError(response: Response) {
   return (
-    response.headers.get('Content-Type') ===
+    response.headers.get("Content-Type") ===
-    'application/vnd.scmm-error+json;v=2'
+    "application/vnd.scmm-error+json;v=2"
   );
 }

scm-ui/ui-components/src/forms/AddEntryToTableField.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { MouseEvent } from "react";
 
-import { AddButton } from '../buttons';
+import { AddButton } from "../buttons";
-import InputField from './InputField';
+import InputField from "./InputField";
 
 type Props = {
   addEntry: (p: string) => void;
@@ -21,7 +21,7 @@ class AddEntryToTableField extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      entryToAdd: '',
+      entryToAdd: ""
     };
   }
 
@@ -29,7 +29,7 @@ class AddEntryToTableField extends React.Component<Props, State> {
     const { validateEntry } = this.props;
     if (
       !this.state.entryToAdd ||
-      this.state.entryToAdd === '' ||
+      this.state.entryToAdd === "" ||
       !validateEntry
     ) {
       return true;
@@ -44,7 +44,7 @@ class AddEntryToTableField extends React.Component<Props, State> {
       buttonLabel,
       fieldLabel,
       errorMessage,
-      helpText,
+      helpText
     } = this.props;
     return (
       <div className="field">
@@ -61,13 +61,13 @@ class AddEntryToTableField extends React.Component<Props, State> {
         <AddButton
           label={buttonLabel}
           action={this.addButtonClicked}
-          disabled={disabled || this.state.entryToAdd === '' || !this.isValid()}
+          disabled={disabled || this.state.entryToAdd === "" || !this.isValid()}
         />
       </div>
     );
   }
 
-  addButtonClicked = (event: Event) => {
+  addButtonClicked = (event: MouseEvent) => {
     event.preventDefault();
     this.appendEntry();
   };
@@ -77,14 +77,14 @@ class AddEntryToTableField extends React.Component<Props, State> {
     this.props.addEntry(entryToAdd);
     this.setState({
       ...this.state,
-      entryToAdd: '',
+      entryToAdd: ""
     });
   };
 
   handleAddEntryChange = (entryname: string) => {
     this.setState({
       ...this.state,
-      entryToAdd: entryname,
+      entryToAdd: entryname
     });
   };
 }

scm-ui/ui-components/src/forms/AutocompleteAddEntryToTableField.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { MouseEvent } from "react";
 
-import { AutocompleteObject, SelectValue } from '@scm-manager/ui-types';
+import { AutocompleteObject, SelectValue } from "@scm-manager/ui-types";
-import Autocomplete from '../Autocomplete';
+import Autocomplete from "../Autocomplete";
-import AddButton from '../buttons/AddButton';
+import AddButton from "../buttons/AddButton";
 
 type Props = {
   addEntry: (p: SelectValue) => void;
@@ -10,7 +10,7 @@ type Props = {
   buttonLabel: string;
   fieldLabel: string;
   helpText?: string;
-  loadSuggestions: (p: string) => Promise<AutocompleteObject>;
+  loadSuggestions: (p: string) => Promise<SelectValue[]>;
   placeholder?: string;
   loadingMessage?: string;
   noOptionsMessage?: string;
@@ -24,7 +24,7 @@ class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      selectedValue: undefined,
+      selectedValue: undefined
     };
   }
   render() {
@@ -36,7 +36,7 @@ class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
       loadSuggestions,
       placeholder,
       loadingMessage,
-      noOptionsMessage,
+      noOptionsMessage
     } = this.props;
 
     const { selectedValue } = this.state;
@@ -63,7 +63,7 @@ class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
     );
   }
 
-  addButtonClicked = (event: Event) => {
+  addButtonClicked = (event: MouseEvent) => {
     event.preventDefault();
     this.appendEntry();
   };
@@ -73,20 +73,20 @@ class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
     if (!selectedValue) {
       return;
     }
-    // $FlowFixMe null is needed to clear the selection; undefined does not work
     this.setState(
+      // @ts-ignore null is needed to clear the selection; undefined does not work
       {
         ...this.state,
-        selectedValue: null,
+        selectedValue: null
       },
-      () => this.props.addEntry(selectedValue),
+      () => this.props.addEntry(selectedValue)
     );
   };
 
   handleAddEntryChange = (selection: SelectValue) => {
     this.setState({
       ...this.state,
-      selectedValue: selection,
+      selectedValue: selection
     });
   };
 }

scm-ui/ui-components/src/forms/Checkbox.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import Checkbox from "./Checkbox";
+import styled from "styled-components";
+
+const Spacing = styled.div`
+  padding: 2em;
+`;
+
+storiesOf("Forms|Checkbox", module)
+  .add("Default", () => (
+    <Spacing>
+      <Checkbox label="Not checked" checked={false} />
+      <Checkbox label="Checked" checked={true} />
+    </Spacing>
+  ))
+  .add("Disabled", () => (
+    <Spacing>
+      <Checkbox label="Checked but disabled" checked={true} disabled={true} />
+    </Spacing>
+  ));

scm-ui/ui-components/src/forms/Checkbox.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React, { ChangeEvent } from "react";
-import { Help } from '../index';
+import { Help } from "../index";
 
 type Props = {
   label?: string;
@@ -11,7 +11,7 @@ type Props = {
 };
 
 class Checkbox extends React.Component<Props> {
-  onCheckboxChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
+  onCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (this.props.onChange) {
       this.props.onChange(event.target.checked, this.props.name);
     }
@@ -28,13 +28,18 @@ class Checkbox extends React.Component<Props> {
     return (
       <div className="field is-grouped">
         <div className="control">
+          {/*
+            we have to ignore the next line, 
+            because jsx label does not the custom disabled attribute
+            but bulma does.
+            // @ts-ignore */}
           <label className="checkbox" disabled={this.props.disabled}>
             <input
               type="checkbox"
               checked={this.props.checked}
               onChange={this.onCheckboxChange}
               disabled={this.props.disabled}
-            />{' '}
+            />{" "}
             {this.props.label}
             {this.renderHelp()}
           </label>

scm-ui/ui-components/src/forms/DropDown.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React, { ChangeEvent } from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
 
 type Props = {
   options: string[];
@@ -17,14 +17,14 @@ class DropDown extends React.Component<Props> {
       optionValues,
       preselectedOption,
       className,
-      disabled,
+      disabled
     } = this.props;
     return (
       <div
-        className={classNames(className, 'select', disabled ? 'disabled' : '')}
+        className={classNames(className, "select", disabled ? "disabled" : "")}
       >
         <select
-          value={preselectedOption ? preselectedOption : ''}
+          value={preselectedOption ? preselectedOption : ""}
           onChange={this.change}
           disabled={disabled}
         >
@@ -48,7 +48,7 @@ class DropDown extends React.Component<Props> {
     );
   }
 
-  change = (event: SyntheticInputEvent<HTMLSelectElement>) => {
+  change = (event: ChangeEvent<HTMLSelectElement>) => {
     this.props.optionSelected(event.target.value);
   };
 }

scm-ui/ui-components/src/forms/FilterInput.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { ChangeEvent } from "react";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
-import styled from 'styled-components';
+import styled from "styled-components";
+import { FormEvent } from "react";
 
 type Props = {
   filter: (p: string) => void;
@@ -19,20 +20,20 @@ const FixedHeightInput = styled.input`
 `;
 
 class FilterInput extends React.Component<Props, State> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     this.state = {
-      value: this.props.value ? this.props.value : '',
+      value: this.props.value ? this.props.value : ""
     };
   }
 
-  handleChange = event => {
+  handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     this.setState({
-      value: event.target.value,
+      value: event.target.value
     });
   };
 
-  handleSubmit = event => {
+  handleSubmit = (event: FormEvent) => {
     this.props.filter(this.state.value);
     event.preventDefault();
   };
@@ -45,7 +46,7 @@ class FilterInput extends React.Component<Props, State> {
           <FixedHeightInput
             className="input"
             type="search"
-            placeholder={t('filterEntries')}
+            placeholder={t("filterEntries")}
             value={this.state.value}
             onChange={this.handleChange}
           />
@@ -58,4 +59,4 @@ class FilterInput extends React.Component<Props, State> {
   }
 }
 
-export default translate('commons')(FilterInput);
+export default translate("commons")(FilterInput);

scm-ui/ui-components/src/forms/InputField.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { ChangeEvent, KeyboardEvent } from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
-import LabelWithHelpIcon from './LabelWithHelpIcon';
+import LabelWithHelpIcon from "./LabelWithHelpIcon";
 
 type Props = {
   label?: string;
@@ -19,8 +19,8 @@ type Props = {
 
 class InputField extends React.Component<Props> {
   static defaultProps = {
-    type: 'text',
+    type: "text",
-    placeholder: '',
+    placeholder: ""
   };
 
   field: HTMLInputElement | null | undefined;
@@ -31,16 +31,16 @@ class InputField extends React.Component<Props> {
     }
   }
 
-  handleInput = (event: SyntheticInputEvent<HTMLInputElement>) => {
+  handleInput = (event: ChangeEvent<HTMLInputElement>) => {
     this.props.onChange(event.target.value, this.props.name);
   };
 
-  handleKeyPress = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+  handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {
     const onReturnPressed = this.props.onReturnPressed;
     if (!onReturnPressed) {
       return;
     }
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       event.preventDefault();
       onReturnPressed();
     }
@@ -55,13 +55,13 @@ class InputField extends React.Component<Props> {
       errorMessage,
       disabled,
       label,
-      helpText,
+      helpText
     } = this.props;
-    const errorView = validationError ? 'is-danger' : '';
+    const errorView = validationError ? "is-danger" : "";
     const helper = validationError ? (
       <p className="help is-danger">{errorMessage}</p>
     ) : (
-      ''
+      ""
     );
     return (
       <div className="field">
@@ -71,7 +71,7 @@ class InputField extends React.Component<Props> {
             ref={input => {
               this.field = input;
             }}
-            className={classNames('input', errorView)}
+            className={classNames("input", errorView)}
             type={type}
             placeholder={placeholder}
             value={value}

scm-ui/ui-components/src/forms/LabelWithHelpIcon.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
-import Help from '../Help';
+import Help from "../Help";
 
 type Props = {
   label?: string;
@@ -26,7 +26,7 @@ class LabelWithHelpIcon extends React.Component<Props> {
       );
     }
 
-    return '';
+    return "";
   }
 }
 

scm-ui/ui-components/src/forms/MemberNameTagGroup.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
-import { DisplayedUser } from '@scm-manager/ui-types';
+import { DisplayedUser } from "@scm-manager/ui-types";
-import TagGroup from './TagGroup';
+import TagGroup from "./TagGroup";
 
 type Props = {
   members: string[];
@@ -18,14 +18,14 @@ class MemberNameTagGroup extends React.Component<Props> {
       return {
         id,
         displayName: id,
-        mail: '',
+        mail: ""
       };
     });
     return (
       <TagGroup
         items={membersExtended}
-        label={label ? label : t('group.members')}
+        label={label ? label : t("group.members")}
-        helpText={helpText ? helpText : t('groupForm.help.memberHelpText')}
+        helpText={helpText ? helpText : t("groupForm.help.memberHelpText")}
         onRemove={this.removeEntry}
       />
     );
@@ -33,10 +33,10 @@ class MemberNameTagGroup extends React.Component<Props> {
 
   removeEntry = (membersExtended: DisplayedUser[]) => {
     const members = membersExtended.map(function(item) {
-      return item['id'];
+      return item["id"];
     });
     this.props.memberListChanged(members);
   };
 }
 
-export default translate('groups')(MemberNameTagGroup);
+export default translate("groups")(MemberNameTagGroup);

scm-ui/ui-components/src/forms/PasswordConfirmation.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import { translate } from 'react-i18next';
+import { translate } from "react-i18next";
-import InputField from './InputField';
+import InputField from "./InputField";
 
 type State = {
   password: string;
@@ -19,19 +19,19 @@ class PasswordConfirmation extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      password: '',
+      password: "",
-      confirmedPassword: '',
+      confirmedPassword: "",
       passwordValid: true,
-      passwordConfirmationFailed: false,
+      passwordConfirmationFailed: false
     };
   }
 
   componentDidMount() {
     this.setState({
-      password: '',
+      password: "",
-      confirmedPassword: '',
+      confirmedPassword: "",
       passwordValid: true,
-      passwordConfirmationFailed: false,
+      passwordConfirmationFailed: false
     });
   }
 
@@ -41,29 +41,29 @@ class PasswordConfirmation extends React.Component<Props, State> {
       <div className="columns is-multiline">
         <div className="column is-half">
           <InputField
-            label={t('password.newPassword')}
+            label={t("password.newPassword")}
             type="password"
             onChange={this.handlePasswordChange}
-            value={this.state.password ? this.state.password : ''}
+            value={this.state.password ? this.state.password : ""}
             validationError={!this.state.passwordValid}
-            errorMessage={t('password.passwordInvalid')}
+            errorMessage={t("password.passwordInvalid")}
           />
         </div>
         <div className="column is-half">
           <InputField
-            label={t('password.confirmPassword')}
+            label={t("password.confirmPassword")}
             type="password"
             onChange={this.handlePasswordValidationChange}
-            value={this.state ? this.state.confirmedPassword : ''}
+            value={this.state ? this.state.confirmedPassword : ""}
             validationError={this.state.passwordConfirmationFailed}
-            errorMessage={t('password.passwordConfirmFailed')}
+            errorMessage={t("password.passwordConfirmFailed")}
           />
         </div>
       </div>
     );
   }
 
-  validatePassword = password => {
+  validatePassword = (password: string) => {
     const { passwordValidator } = this.props;
     if (passwordValidator) {
       return passwordValidator(password);
@@ -78,9 +78,9 @@ class PasswordConfirmation extends React.Component<Props, State> {
     this.setState(
       {
         confirmedPassword,
-        passwordConfirmationFailed: !passwordConfirmed,
+        passwordConfirmationFailed: !passwordConfirmed
       },
-      this.propagateChange,
+      this.propagateChange
     );
   };
 
@@ -92,9 +92,9 @@ class PasswordConfirmation extends React.Component<Props, State> {
       {
         passwordValid: this.validatePassword(password),
         passwordConfirmationFailed,
-        password: password,
+        password: password
       },
-      this.propagateChange,
+      this.propagateChange
     );
   };
 
@@ -107,4 +107,4 @@ class PasswordConfirmation extends React.Component<Props, State> {
   };
 }
 
-export default translate('commons')(PasswordConfirmation);
+export default translate("commons")(PasswordConfirmation);

scm-ui/ui-components/src/forms/Radio.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import Radio from "./Radio";
+import styled from "styled-components";
+
+const Spacing = styled.div`
+  padding: 2em;
+`;
+
+storiesOf("Forms|Radio", module)
+  .add("Default", () => (
+    <Spacing>
+      <Radio label="Not checked" checked={false} />
+      <Radio label="Checked" checked={true} />
+    </Spacing>
+  ))
+  .add("Disabled", () => (
+    <Spacing>
+      <Radio label="Checked but disabled" checked={true} disabled={true} />
+    </Spacing>
+  ));

scm-ui/ui-components/src/forms/Radio.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React, { ChangeEvent } from "react";
-import { Help } from '../index';
+import { Help } from "../index";
 
 type Props = {
   label?: string;
@@ -19,20 +19,33 @@ class Radio extends React.Component<Props> {
     }
   };
 
+  onValueChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (this.props.onChange) {
+      this.props.onChange(event.target.checked, this.props.name);
+    }
+  };
+
   render() {
     return (
-      <label className="radio" disabled={this.props.disabled}>
+      <>
-        <input
+        {/*
-          type="radio"
+        we have to ignore the next line, 
-          name={this.props.name}
+        because jsx label does not the custom disabled attribute
-          value={this.props.value}
+        but bulma does.
-          checked={this.props.checked}
+        // @ts-ignore */}
-          onChange={this.props.onChange}
+        <label className="radio" disabled={this.props.disabled}>
-          disabled={this.props.disabled}
+          <input
-        />{' '}
+            type="radio"
-        {this.props.label}
+            name={this.props.name}
-        {this.renderHelp()}
+            value={this.props.value}
-      </label>
+            checked={this.props.checked}
+            onChange={this.onValueChange}
+            disabled={this.props.disabled}
+          />{" "}
+          {this.props.label}
+          {this.renderHelp()}
+        </label>
+      </>
     );
   }
 }

scm-ui/ui-components/src/forms/Select.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { ChangeEvent } from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
-import LabelWithHelpIcon from './LabelWithHelpIcon';
+import LabelWithHelpIcon from "./LabelWithHelpIcon";
 
 export type SelectItem = {
   value: string;
@@ -29,18 +29,18 @@ class Select extends React.Component<Props> {
     }
   }
 
-  handleInput = (event: SyntheticInputEvent<HTMLSelectElement>) => {
+  handleInput = (event: ChangeEvent<HTMLSelectElement>) => {
     this.props.onChange(event.target.value, this.props.name);
   };
 
   render() {
     const { options, value, label, helpText, loading, disabled } = this.props;
-    const loadingClass = loading ? 'is-loading' : '';
+    const loadingClass = loading ? "is-loading" : "";
 
     return (
       <div className="field">
         <LabelWithHelpIcon label={label} helpText={helpText} />
-        <div className={classNames('control select', loadingClass)}>
+        <div className={classNames("control select", loadingClass)}>
           <select
             ref={input => {
               this.field = input;
@@ -51,7 +51,7 @@ class Select extends React.Component<Props> {
           >
             {options.map(opt => {
               return (
-                <option value={opt.value} key={'KEY_' + opt.value}>
+                <option value={opt.value} key={"KEY_" + opt.value}>
                   {opt.label}
                 </option>
               );

scm-ui/ui-components/src/forms/TagGroup.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import * as React from "react";
-import { DisplayedUser } from '@scm-manager/ui-types';
+import { DisplayedUser } from "@scm-manager/ui-types";
-import { Help, Tag } from '../index';
+import { Help, Tag } from "../index";
 
 type Props = {
   items: DisplayedUser[];
@@ -23,11 +23,11 @@ export default class TagGroup extends React.Component<Props> {
             <strong>
               {label}
               {help}
-              {items.length > 0 ? ':' : ''}
+              {items.length > 0 ? ":" : ""}
             </strong>
           </div>
         ) : (
-          ''
+          ""
         )}
         {items.map((item, key) => {
           return (
@@ -46,7 +46,7 @@ export default class TagGroup extends React.Component<Props> {
     );
   }
 
-  removeEntry = item => {
+  removeEntry = (item: DisplayedUser) => {
     const newItems = this.props.items.filter(name => name !== item);
     this.props.onRemove(newItems);
   };

scm-ui/ui-components/src/forms/Textarea.tsx

@@ -1,15 +1,10 @@
-import React from 'react';
+import React, { ChangeEvent } from "react";
-import LabelWithHelpIcon from './LabelWithHelpIcon';
+import LabelWithHelpIcon from "./LabelWithHelpIcon";
-
-export type SelectItem = {
-  value: string;
-  label: string;
-};
 
 type Props = {
   name?: string;
   label?: string;
-  placeholder?: SelectItem[];
+  placeholder?: string;
   value?: string;
   autofocus?: boolean;
   onChange: (value: string, name?: string) => void;
@@ -26,7 +21,7 @@ class Textarea extends React.Component<Props> {
     }
   }
 
-  handleInput = (event: SyntheticInputEvent<HTMLTextAreaElement>) => {
+  handleInput = (event: ChangeEvent<HTMLTextAreaElement>) => {
     this.props.onChange(event.target.value, this.props.name);
   };
 

scm-ui/ui-components/src/forms/index.ts

@@ -1,17 +1,17 @@
 // @create-index
 
-export { default as AddEntryToTableField } from './AddEntryToTableField';
+export { default as AddEntryToTableField } from "./AddEntryToTableField";
 export {
-  default as AutocompleteAddEntryToTableField,
+  default as AutocompleteAddEntryToTableField
-} from './AutocompleteAddEntryToTableField';
+} from "./AutocompleteAddEntryToTableField";
-export { default as TagGroup } from './TagGroup';
+export { default as TagGroup } from "./TagGroup";
-export { default as MemberNameTagGroup } from './MemberNameTagGroup';
+export { default as MemberNameTagGroup } from "./MemberNameTagGroup";
-export { default as Checkbox } from './Checkbox';
+export { default as Checkbox } from "./Checkbox";
-export { default as Radio } from './Radio';
+export { default as Radio } from "./Radio";
-export { default as FilterInput } from './FilterInput';
+export { default as FilterInput } from "./FilterInput";
-export { default as InputField } from './InputField';
+export { default as InputField } from "./InputField";
-export { default as Select } from './Select';
+export { default as Select } from "./Select";
-export { default as Textarea } from './Textarea';
+export { default as Textarea } from "./Textarea";
-export { default as PasswordConfirmation } from './PasswordConfirmation';
+export { default as PasswordConfirmation } from "./PasswordConfirmation";
-export { default as LabelWithHelpIcon } from './LabelWithHelpIcon';
+export { default as LabelWithHelpIcon } from "./LabelWithHelpIcon";
-export { default as DropDown } from './DropDown';
+export { default as DropDown } from "./DropDown";