chore(many): remove jsx praga headers; use react-jsx compiler option for jsx; fix lint

Author: balzss

commitlint.config.js

@@ -86,6 +86,6 @@ module.exports = {
     formatMessageCB: ({ scope, defaultMessage }) =>
       scope.split(',').length > 3
         ? defaultMessage.replace(scope, 'many')
-        : defaultMessage
+        : defaultMessage.replace(scope, 'many')
   }
 }

cypress/component/Alerts.cy.tsx

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
-import { Alert } from '../../packages/ui'
+
+import { Alert } from '@instructure/ui'
 
 import '../support/component'
 import 'cypress-real-events'

cypress/component/AppNav.cy.tsx

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
-import { AppNav } from '../../packages/ui'
+
+import { AppNav } from '@instructure/ui'
 
 import '../support/component'
 import 'cypress-real-events'

cypress/component/ColorIndicator.cy.tsx

@@ -21,13 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
-import { ColorIndicator } from '../../packages/ui'
+
+import { ColorIndicator } from '@instructure/ui'
 
 import '../support/component'
 import 'cypress-real-events'
 
-import { colorToRGB, colorToHex8 } from '../../packages/ui-color-utils'
+import { colorToRGB, colorToHex8 } from '@instructure/ui-color-utils'
 
 const colorTestCases = {
   '3 digit hex': '#069',

cypress/component/ColorMixer.cy.tsx

@@ -21,13 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
-import { ColorMixer } from '../../packages/ui'
+
+import { ColorMixer } from '@instructure/ui'
 
 import '../support/component'
 import 'cypress-real-events'
 
-import { colorToHex8 } from '../../packages/ui-color-utils'
+import { colorToHex8 } from '@instructure/ui-color-utils'
 
 const testValue = {
   value: '#09918B'

cypress/component/ColorPicker.cy.tsx

@@ -21,19 +21,19 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import {
   ColorPicker,
   ColorMixer,
   ColorPreset,
   ColorContrast,
   Button
-} from '../../packages/ui'
+} from '@instructure/ui'
 
 import '../support/component'
 import 'cypress-real-events'
 
-import { colorToRGB, color2hex } from '../../packages/ui-color-utils'
+import { colorToRGB, color2hex } from '@instructure/ui-color-utils'
 
 const colorPreset = [
   '#ffffff',

cypress/component/ColorPreset.cy.tsx

@@ -21,13 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
-import { ColorPreset } from '../../packages/ui'
+
+import { ColorPreset } from '@instructure/ui'
 
 import '../support/component'
 import 'cypress-real-events'
 
-import { colorToRGB } from '../../packages/ui-color-utils'
+import { colorToRGB } from '@instructure/ui-color-utils'
 
 const testValue = {
   colors: [

cypress/component/DateInput.cy.tsx

@@ -21,11 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import 'cypress-real-events'
 
 import '../support/component'
-import { DateInput, Calendar } from '../../packages/ui'
+import { DateInput, Calendar } from '@instructure/ui'
 
 const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
 

cypress/component/DateInput2.cy.tsx

@@ -21,12 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import 'cypress-real-events'
 
 import '../support/component'
-import { DateTimeInput } from '../../packages/ui'
-import { DateTime } from '../../packages/ui-i18n'
+import { DateTimeInput } from '@instructure/ui'
+import { DateTime } from '@instructure/ui-i18n'
 
 describe('<DateInput/>', () => {
   it('should merge defaultValue and initialTimeForNewDate and handle onChange when the user clears date input and select another one', () => {

cypress/component/DateTimeInput.cy.tsx

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { useState, useRef } from 'react'
+import { useState, useRef } from 'react'
 import { Dialog } from '@instructure/ui'
 import 'cypress-real-events'
 

cypress/component/Dialog.cy.tsx

@@ -21,12 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import { expect } from 'chai'
 
 import '../support/component'
 import { px, within } from '@instructure/ui-utils'
-import DrawerLayoutFixture from '../../packages/ui-drawer-layout/src/DrawerLayout/__fixtures__/DrawerLayout.fixture'
+import DrawerLayoutFixture from '@instructure/ui-drawer-layout/src/DrawerLayout/__fixtures__/DrawerLayout.fixture'
 
 describe('<DrawerLayout/>', () => {
   it('with no overlay, layout content should have margin equal to tray width with placement=start', () => {

cypress/component/DrawerLayout.cy.tsx

@@ -21,7 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
 
 import '../support/component'
 import canvas from '@instructure/ui-themes'

cypress/component/DrawerTray.cy.tsx

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import 'cypress-real-events'
 
-import { Drilldown } from '../../packages/ui'
+import { Drilldown } from '@instructure/ui'
 import '../support/component'
 
 const data = Array(5)

cypress/component/Drilldown.cy.tsx

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import 'cypress-real-events'
 
-import { Drilldown } from '../../packages/ui'
+import { Drilldown } from '@instructure/ui'
 import '../support/component'
 
 function mountDrilldown(selectableType, defaultSelected) {

cypress/component/DrilldownGroup.cy.tsx

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import 'cypress-real-events'
 
-import { Drilldown } from '../../packages/ui'
+import { Drilldown } from '@instructure/ui'
 import '../support/component'
 
 describe('<DrilldownOption/>', () => {

cypress/component/DrilldownOption.cy.tsx

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import 'cypress-real-events'
 
-import { Drilldown } from '../../packages/ui'
+import { Drilldown } from '@instructure/ui'
 import '../support/component'
 
 describe('<DrilldownPage/>', () => {

cypress/component/DrilldownPage.cy.tsx

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import 'cypress-real-events'
 
-import { Drilldown } from '../../packages/ui'
+import { Drilldown } from '@instructure/ui'
 import '../support/component'
 
 describe('<DrilldownSeparator/>', () => {

cypress/component/DrilldownSeparator.cy.tsx

@@ -21,9 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
-// eslint-disable-next-line @instructure/no-relative-imports
-import { FormFieldLayout } from '../../packages/ui'
+
+import { FormFieldLayout } from '@instructure/ui'
 
 import '../support/component'
 

cypress/component/FormField.cy.tsx

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import '../support/component'
 import 'cypress-real-events'
 import { Img } from '@instructure/ui'

cypress/component/Img.cy.tsx

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import '../support/component'
 import 'cypress-real-events'
 import { InlineSVG } from '@instructure/ui'

cypress/component/InlineSVG.cy.tsx

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import 'cypress-real-events'
 
-import { ListItem } from '../../packages/ui'
+import { ListItem } from '@instructure/ui'
 import '../support/component'
 
 describe('<ListItem/>', () => {

cypress/component/ListItem.cy.tsx

@@ -21,12 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import { expect } from 'chai'
 import 'cypress-real-events'
 
 import '../support/component'
-import { Menu, MenuItem } from '../../packages/ui'
+import { Menu, MenuItem } from '@instructure/ui'
 
 describe('<Menu/>', () => {
   it('should move focus properly', () => {

cypress/component/Menu.cy.tsx

@@ -21,12 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import { expect } from 'chai'
 import 'cypress-real-events'
 
 import '../support/component'
-import { MenuItem } from '../../packages/ui'
+import { MenuItem } from '@instructure/ui'
 
 describe('<MenuItem />', () => {
   it('should call onSelect after SPACE key is pressed', () => {

cypress/component/MenuItem.cy.tsx

@@ -21,12 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import { expect } from 'chai'
 import 'cypress-real-events'
 
 import '../support/component'
-import { MenuItem, MenuItemGroup, MenuItemSeparator } from '../../packages/ui'
+import { MenuItem, MenuItemGroup, MenuItemSeparator } from '@instructure/ui'
 
 describe('<MenuItemGroup />', () => {
   it('updates the selected items when allowMultiple is true', () => {

cypress/component/MenuItemGroup.cy.tsx

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { useState } from 'react'
-import { Modal, View } from '../../packages/ui'
+import { useState } from 'react'
+import { Modal, View } from '@instructure/ui'
 
 import '../support/component'
 

cypress/component/Modal.cy.tsx

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
-import { NumberInput } from '../../packages/ui'
+
+import { NumberInput } from '@instructure/ui'
 
 import '../support/component'
 import 'cypress-real-events'

cypress/component/NumberInput.cy.tsx

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import '../support/component'
 import 'cypress-real-events'
 import { expect } from 'chai'

cypress/component/OptionsItem.cy.tsx

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Pages, PagesPage } from '@instructure/ui-pages'
 
 import '../support/component'

cypress/component/Page.cy.tsx

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
-import { Pagination, ScreenReaderContent } from '../../packages/ui'
+
+import { Pagination, ScreenReaderContent } from '@instructure/ui'
 
 import '../support/component'
 import 'cypress-real-events'

cypress/component/Pagination.cy.tsx

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
-import { Pagination } from '../../packages/ui'
+
+import { Pagination } from '@instructure/ui'
 
 import '../support/component'
 import 'cypress-real-events'

cypress/component/PaginationArrowButton.cy.tsx

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
-import { Pagination } from '../../packages/ui'
+
+import { Pagination } from '@instructure/ui'
 
 import '../support/component'
 import 'cypress-real-events'