feat(shared): typescript migration [EP-3031] (#214)

* feat(sharted): typescript conversion [EP-3031] * feat(shared): typescript conversion [EP-3031] * feat(shared): typescript conversion [EP-3031] * feat(shared): typescript conversion [EP-3031] * feat(shared): typescript conversion [EP-3031] * feat(shared): typescript conversion [EP-3031]
natgeosociety · Oct 8, 2020 · 65bc856 · 65bc856
1 parent f661642
commit 65bc856
Show file tree

Hide file tree

Showing 57 changed files with 432 additions and 287 deletions.
diff --git a/packages/earth-admin/src/utils/hooks.tsx b/packages/earth-admin/src/utils/hooks.tsx
@@ -122,7 +122,7 @@ export function useInfiniteListPaged(
 }
 
 interface IMergedResults {
-  data: Array<any>;
+  data: any[];
   pagination?: {
     size: number;
     total: number;
@@ -134,7 +134,7 @@ interface IMergedResults {
 /**
  * Merge multiple page results into a single list of results
  */
-export function mergePages(pagedResponse: Array<any>): IMergedResults {
+export function mergePages(pagedResponse: any[]): IMergedResults {
   return pagedResponse.reduce(
     (acc: any, { data, ...rest }: any) => {
       return {

diff --git a/packages/earth-shared/entry.js → packages/earth-shared/entry.ts b/packages/earth-shared/entry.js → packages/earth-shared/entry.ts
diff --git a/packages/earth-shared/icon.font.js → packages/earth-shared/icon.font.ts b/packages/earth-shared/icon.font.js → packages/earth-shared/icon.font.ts
diff --git a/packages/earth-shared/package.json b/packages/earth-shared/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@marapp/earth-shared",
   "version": "1.0.0",
-  "main": "src/index.js",
-  "module": "src/index.js",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
   "scripts": {
     "transpile": "babel src -d dist --ignore '**/*.spec.js,**/*.stories.js'",
     "jest": "jest --coverage --verbose --color",

diff --git a/...shared/src/components/button/component.js → ...h-shared/src/components/button/Button.tsx b/...shared/src/components/button/component.js → ...h-shared/src/components/button/Button.tsx
@@ -18,26 +18,31 @@
 */
 
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import Link from 'redux-first-router-link';
 
 // styles
 import './styles.scss';
 
-class Button extends PureComponent {
-  static propTypes = {
-    link: PropTypes.shape({}),
-    style: PropTypes.shape({}),
-    className: PropTypes.string,
-    onMouseDown: PropTypes.func,
-    onMouseUp: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-    onTouchStart: PropTypes.func,
-    onTouchEnd: PropTypes.func,
-  };
+interface ButtonProps {
+  link?: {};
+  style?: {};
+  className?: string;
+  onMouseDown?: (e) => {};
+  onMouseUp?: (e) => {};
+  onMouseLeave?: (e) => {};
+  onTouchStart?: (e) => {};
+  onTouchEnd?: (e) => {};
+  onClick?: (e) => {};
+}
+
+interface ButtonState {
+  rippleStyle?: {};
+  rippleIsVisible?: boolean;
+}
 
+class Button extends PureComponent<ButtonProps, ButtonState> {
   static defaultProps = {
     link: null,
     style: {},
@@ -53,6 +58,8 @@ class Button extends PureComponent {
     rippleStyle: {},
     rippleIsVisible: false,
   };
+  private ripple: any;
+  private button: any;
 
   constructor(props) {
     super(props);
@@ -154,7 +161,7 @@ class Button extends PureComponent {
     });
   }
 
-  hideRipple() {
+  hideRipple(e) {
     this.setState({
       rippleIsVisible: false,
     });

diff --git a/...rth-shared/src/components/button/index.js → ...rth-shared/src/components/button/index.ts b/...rth-shared/src/components/button/index.js → ...rth-shared/src/components/button/index.ts
@@ -17,6 +17,6 @@
   specific language governing permissions and limitations under the License.
 */
 
-import ButtonComponent from './component';
+import ButtonComponent from './Button';
 
 export default ButtonComponent;
diff --git a/...-shared/src/components/chart/component.js → ...rth-shared/src/components/chart/Chart.tsx b/...-shared/src/components/chart/component.js → ...rth-shared/src/components/chart/Chart.tsx
@@ -18,7 +18,6 @@
 */
 
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import maxBy from 'lodash/maxBy';
@@ -45,15 +44,36 @@ import ChartTick from './tick';
 
 import './styles.scss';
 
-class Chart extends PureComponent {
-  static propTypes = {
-    data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-    config: PropTypes.shape({}).isRequired,
-    className: PropTypes.string,
-    handleMouseMove: PropTypes.func,
-    handleMouseLeave: PropTypes.func,
-  };
+interface ChartConfig {
+  xTitle: string;
+  yTitle: string;
+  margin: { top: number; right: number; left: number; bottom: number };
+  padding: { top: number; right: number; left: number; bottom: number };
+  type: string;
+  xKey: string;
+  yKeys: any;
+  xAxis: string;
+  yAxis: string;
+  cartesianGrid: string;
+  gradients: string;
+  height: string;
+  patterns: string;
+  tooltip: string;
+  layout: string;
+  legend: string;
+  unit: string;
+  unitFormat: (v: any) => {};
+}
+
+interface ChartProps {
+  data: {}[];
+  config: ChartConfig;
+  className?: string;
+  handleMouseMove?: () => {};
+  handleMouseLeave?: () => {};
+}
 
+class Chart extends PureComponent<ChartProps> {
   static defaultProps = {
     className: '',
     handleMouseMove: null,
@@ -208,7 +228,7 @@ class Chart extends PureComponent {
                     {!!bars[key].label && <Label {...bars[key].label} />}
 
                     {bars[key].itemColor &&
-                      data.map((item) => <Cell key={`c_${item.color}`} fill={item.color} />)}
+                      data.map((item: any) => <Cell key={`c_${item.color}`} fill={item.color} />)}
                   </Bar>
                 ))}
 

diff --git a/...arth-shared/src/components/chart/index.js → ...arth-shared/src/components/chart/index.ts b/...arth-shared/src/components/chart/index.js → ...arth-shared/src/components/chart/index.ts
@@ -17,6 +17,6 @@
   specific language governing permissions and limitations under the License.
 */
 
-import ChartComponent from './component';
+import ChartComponent from './Chart';
 
 export default ChartComponent;
diff --git a/...ed/src/components/chart/tick/component.js → ...shared/src/components/chart/tick/Tick.tsx b/...ed/src/components/chart/tick/component.js → ...shared/src/components/chart/tick/Tick.tsx
@@ -18,20 +18,22 @@
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-class Tick extends React.Component {
-  static propTypes = {
-    x: PropTypes.number,
-    y: PropTypes.number,
-    payload: PropTypes.shape({}),
-    dataMax: PropTypes.number,
-    unit: PropTypes.string.isRequired,
-    unitFormat: PropTypes.func.isRequired,
-    fill: PropTypes.string.isRequired,
-    backgroundColor: PropTypes.string,
-  };
+interface TickProps {
+  unit: string;
+  unitFormat: (v: any) => {};
+  fill: string;
+  x?: number;
+  y?: number;
+  fontWeight: number;
+  payload?: { value: any };
+  dataMax?: number;
+  backgroundColor?: string;
+}
+
+interface TickState {}
 
+class Tick extends React.Component<TickProps, TickState> {
   static defaultProps = {
     x: 0,
     y: 0,
@@ -44,7 +46,7 @@ class Tick extends React.Component {
 
     const tickValue = payload && payload.value;
     const formattedTick = typeof tickValue !== 'undefined' ? unitFormat(tickValue) : 0;
-    const tick = tickValue >= dataMax ? `${formattedTick}${unit}` : formattedTick;
+    const tick: any = tickValue >= dataMax ? `${formattedTick}${unit}` : formattedTick;
 
     return (
       <g transform={`translate(${x},${y})`}>

diff --git a/...shared/src/components/chart/tick/index.js → ...shared/src/components/chart/tick/index.ts b/...shared/src/components/chart/tick/index.js → ...shared/src/components/chart/tick/index.ts
@@ -17,6 +17,6 @@
   specific language governing permissions and limitations under the License.
 */
 
-import TickComponent from './component';
+import TickComponent from './Tick';
 
 export default TickComponent;
diff --git a/...src/components/chart/tooltip/component.js → .../src/components/chart/tooltip/Tooltip.tsx b/...src/components/chart/tooltip/component.js → .../src/components/chart/tooltip/Tooltip.tsx
@@ -18,18 +18,17 @@
 */
 
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 
 // Styles
 import './styles.scss';
 
-class Tooltip extends PureComponent {
-  static propTypes = {
-    payload: PropTypes.arrayOf(PropTypes.shape({})),
-    settings: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-    hideZeros: PropTypes.bool,
-  };
+interface TooltipProps {
+  settings: any[];
+  payload?: any[];
+  hideZeros?: boolean;
+}
 
+class Tooltip extends PureComponent<TooltipProps> {
   static defaultProps = {
     payload: [],
     hideZeros: false,

diff --git a/...red/src/components/chart/tooltip/index.js → ...red/src/components/chart/tooltip/index.ts b/...red/src/components/chart/tooltip/index.js → ...red/src/components/chart/tooltip/index.ts
@@ -17,6 +17,6 @@
   specific language governing permissions and limitations under the License.
 */
 
-import TooltipComponent from './component';
+import TooltipComponent from './Tooltip';
 
 export default TooltipComponent;
diff --git a/...ed/src/components/datepicker/component.js → .../src/components/datepicker/Datepicker.tsx b/...ed/src/components/datepicker/component.js → .../src/components/datepicker/Datepicker.tsx
@@ -19,15 +19,22 @@
 
 import React, { PureComponent } from 'react';
 import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
 import ReactDatePicker, { CalendarContainer } from 'react-datepicker';
 import classnames from 'classnames';
 
 import Input from './input';
 
 import './styles.scss';
 
-class Datepicker extends PureComponent {
+interface DatepickerProps {
+  onDateChange: () => {};
+  className?: string;
+  settings?: { minDate; maxDate };
+  theme?: string;
+  date?: any;
+}
+
+class Datepicker extends PureComponent<DatepickerProps> {
   // renderCalendarHeader = ({
   //   date,
   //   changeYear,
@@ -92,6 +99,7 @@ class Datepicker extends PureComponent {
   //     </div>
   //   );
   // };
+  private ref: any;
 
   renderCalendarContainer = ({ children }) => {
     return createPortal(<CalendarContainer>{children}</CalendarContainer>, document.body);
@@ -143,12 +151,4 @@ class Datepicker extends PureComponent {
   }
 }
 
-Datepicker.propTypes = {
-  className: PropTypes.string,
-  theme: PropTypes.string,
-  date: PropTypes.object,
-  onDateChange: PropTypes.func.isRequired,
-  settings: PropTypes.object,
-};
-
 export default Datepicker;
diff --git a/...shared/src/components/datepicker/index.js → ...shared/src/components/datepicker/index.ts b/...shared/src/components/datepicker/index.js → ...shared/src/components/datepicker/index.ts
@@ -17,6 +17,6 @@
   specific language governing permissions and limitations under the License.
 */
 
-import Component from './component';
+import Component from './Datepicker';
 
 export default Component;
diff --git a/.../components/datepicker/input/component.js → ...src/components/datepicker/input/Input.tsx b/.../components/datepicker/input/component.js → ...src/components/datepicker/input/Input.tsx
@@ -22,7 +22,18 @@ import classnames from 'classnames';
 
 import './styles.scss';
 
-class DatepickerInput extends PureComponent {
+interface DatepickerInputProps {
+  onFocus?: (e) => {};
+  onBlur?: (e) => {};
+  onClick?: (e) => {};
+  value?: any;
+}
+
+interface DatepickerInputState {
+  focus?: boolean;
+}
+
+class DatepickerInput extends PureComponent<DatepickerInputProps, DatepickerInputState> {
   state = {
     focus: false,
   };

diff --git a/.../src/components/datepicker/input/index.js → .../src/components/datepicker/input/index.ts b/.../src/components/datepicker/input/index.js → .../src/components/datepicker/input/index.ts
@@ -17,6 +17,6 @@
   specific language governing permissions and limitations under the License.
 */
 
-import Component from './component';
+import Component from './Input';
 
 export default Component;
diff --git a/...c/components/error-template/component.tsx → ...mponents/error-template/ErrorTemplate.tsx b/...c/components/error-template/component.tsx → ...mponents/error-template/ErrorTemplate.tsx
diff --git a/packages/earth-shared/src/components/error-template/index.ts b/packages/earth-shared/src/components/error-template/index.ts
@@ -17,4 +17,4 @@
   specific language governing permissions and limitations under the License.
 */
 
-export { default } from './component';
+export { default } from './ErrorTemplate';
diff --git a/...ed/src/components/fullscreen/component.js → .../src/components/fullscreen/Fullscreen.tsx b/...ed/src/components/fullscreen/component.js → .../src/components/fullscreen/Fullscreen.tsx
@@ -18,7 +18,6 @@
 */
 
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 
 // Animations
 import { Transition } from 'react-spring/renderprops';
@@ -28,15 +27,12 @@ import Templates from './templates';
 // Styles
 import './styles.scss';
 
-class Fullscreen extends PureComponent {
-  static propTypes = {
-    open: PropTypes.bool.isRequired,
-    data: PropTypes.shape({
-      type: PropTypes.string,
-      properties: PropTypes.object,
-    }).isRequired,
-  };
+interface FullscreenProps {
+  open: boolean;
+  data: { type: string; properties: {} };
+}
 
+class Fullscreen extends PureComponent<FullscreenProps> {
   render() {
     const { open, data } = this.props;
 
@@ -54,6 +50,7 @@ class Fullscreen extends PureComponent {
           (({ height, y, ...props }) => (
             <div
               className="c-fullscreen marapp-qa-fullscreen"
+              // @ts-ignore
               style={{
                 height: `${height}%`,
                 transform: `translate(0, ${y}%)`,

diff --git a/...shared/src/components/fullscreen/index.js → ...shared/src/components/fullscreen/index.ts b/...shared/src/components/fullscreen/index.js → ...shared/src/components/fullscreen/index.ts
@@ -17,6 +17,6 @@
   specific language governing permissions and limitations under the License.
 */
 
-import FullscreenComponent from './component';
+import FullscreenComponent from './Fullscreen';
 
 export default FullscreenComponent;