Merge pull request beightone#1 from vtex-apps/typings-test

Changes to avoid typing problems

.eslintrc

@@ -0,0 +1,12 @@
+{
+  "extends": "vtex",
+  "root": true,
+  "env": {
+    "node": true,
+    "es6": true,
+    "jest": true
+  },
+  "rules": {
+    "react/prefer-stateless-function": false
+  }
+}

.gitignore

@@ -35,5 +35,4 @@ docs/_book/
 npm-debug.log
 .build/
 lib
-.eslintrc
 base

CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+### Fixed
+- Problems with typings and lint

react/.eslintrc

@@ -0,0 +1,11 @@
+{
+  "extends": "vtex-react/io",
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "rules": {
+    "react/prefer-stateless-function": false
+  }
+}

react/components/CustomButton.tsx

@@ -2,17 +2,12 @@ import React, { Component } from 'react'
 
 import Table from './Table'
 
-import { OrderFormItem } from '../typings/orderForm'
-
-class CustomButton extends Component<CustomButtonProps, CustomButtonState> {
-  /**
-   * This component is responsible for rendering the custom button itself. For instance,
-   * we use it to render a table that contains the name of the items that are in the
-   * order form.
-  */
-  constructor(props: any) {
-    super(props)
-  }
+/**
+ * This component is responsible for rendering the custom button itself. For instance,
+ * we use it to render a table that contains the name of the items that are in the
+ * order form.
+ */
+class CustomButton extends Component<CustomButtonProps, {}> {
   render() {
     const { items } = this.props
 

react/components/Table.tsx

@@ -1,7 +1,5 @@
 import React, { Component } from 'react'
 
-import { OrderFormItem } from '../typings/orderForm'
-
 class Table extends Component<TableProps> {
   constructor(props: any) {
     super(props)

react/index.tsx

@@ -1,12 +1,8 @@
 import React, { Component } from 'react'
 
 import CustomButton from './components/CustomButton'
-import { OrderForm } from './typings/orderForm'
 
-class CheckoutButtonExample extends Component<
-  CheckoutButtonExampleProps,
-  CheckoutButtonExampleState
-> {
+class CheckoutButtonExample extends Component<{}, CheckoutButtonExampleState> {
   /**
    * This component is the one that is referenced in the extension point. To use it
    * as an example, we add an event listener, which updates the state every time the
@@ -20,14 +16,16 @@ class CheckoutButtonExample extends Component<
     }
   }
 
-  listenOrderFormUpdated = () => {
+  listenOrderFormUpdated() {
     $(window).on('orderFormUpdated.vtex', (_: any, orderForm: OrderForm) =>
       this.setState({ orderForm })
     )
   }
 
   render() {
     this.listenOrderFormUpdated()
+    console.log(window.vtex.i18n.getLocale())
+
     return <CustomButton {...this.state.orderForm!} />
   }
 }

react/tsconfig.json

@@ -17,7 +17,7 @@
   },
   "include": [
     "./**/*.tsx",
-    "typings.d.ts"
+    "./**/*.d.ts"
   ],
   "exclude": [
     "node_modules"

react/typings/orderForm.d.ts → react/typings/global.d.ts

@@ -1,9 +1,13 @@
-export interface OrderFormContext {
+interface Window extends Window {
+  vtex: any
+}
+
+interface OrderFormContext {
   orderForm: OrderForm
   loading: boolean
 }
 
-export interface OrderFormItem {
+interface OrderFormItem {
   additionalInfo: ItemAdditionalInfo
   availability: string
   detailUrl: string
@@ -34,7 +38,7 @@ interface SKUSpecification {
   fieldValues: string[]
 }
 
-export interface OrderForm {
+interface OrderForm {
   id: string
   items: OrderFormItem[]
   marketingData: MarketingData