Convert to TypeScript

.github/workflows/tests.yml

@@ -4,8 +4,8 @@ permissions:
 on:
   # Release workflow calls this manually for main and tags
   push:
-    branches:
-      - '!main'
+    branches-ignore:
+      - 'main'
   workflow_call: # Can called from other workflows
 jobs:
   tests:

assets/src/Control.jsx → assets/src/Control.tsx

@@ -3,13 +3,13 @@ import {
   useState,
   useContext
 } from 'react'
-import { ControlContext } from './index.jsx'
+import { ControlContext } from './index.tsx'
 
 import { triggerEvent } from './events'
 import { OverlayProvider } from 'react-aria'
 import { dynamicValuesAPI } from './dynamic-values'
 
-import types from './types.js'
+import types from './types.ts'
 import DependendWrapper from './components/dependent/DependendWrapper'
 import RenderWrapper from './components/render/RenderWrapper'
 import VisibilityWrapper from './components/visibility/VisibilityWrapper'

assets/src/Element.jsx → assets/src/Element.tsx

@@ -3,12 +3,12 @@ import {
   useContext,
   useEffect
 } from 'react'
-import { ControlContext } from './index.jsx'
+import { ControlContext } from './index.tsx'
 
-import types from './types.js'
+import types from './types.ts'
 import DependendWrapper from './components/dependent/DependendWrapper'
 import VisibilityWrapper from './components/visibility/VisibilityWrapper'
-import RenderWrapper from './components/render/RenderWrapper.jsx'
+import RenderWrapper from './components/render/RenderWrapper.tsx'
 
 /**
  * Really similar to Control component, expect it has no values

assets/src/components/base/button/Button.stories.js → assets/src/components/base/button/Button.stories.ts

@@ -1,7 +1,7 @@
 // Button.stories.js (or .mdx)
 
 // import { fn } from 'storybook/test'; // Keep if you use it for action logging
-import Button from './Button.jsx';
+import Button from './Button.tsx';
 
 export default {
   title: 'Button',

assets/src/components/base/modal/Modal.jsx → assets/src/components/base/modal/Modal.tsx

@@ -7,7 +7,7 @@ import {
   Overlay,
   useModalOverlay
 } from 'react-aria'
-import { ControlContext } from '../../../index.jsx'
+import { ControlContext } from '../../../index.tsx'
 
 const Modal = ({ state, children, ...props }) => {
 

assets/src/components/base/popover/Popover.jsx → assets/src/components/base/popover/Popover.tsx

@@ -8,7 +8,7 @@ import {
   Overlay, 
   usePopover
 } from 'react-aria'
-import { ControlContext } from '../../../index.jsx'
+import { ControlContext } from '../../../index.tsx'
 
 function Popover({ 
   children, 

assets/src/components/dependent/utils.js → assets/src/components/dependent/utils.ts

@@ -1,4 +1,4 @@
-import * as tangibleFields from '../../index.jsx'
+import * as tangibleFields from '../../index.tsx'
 
 /**
  * Returns an object that can be used to map which exterior field will trigger which value

assets/src/components/dynamic/base-wrapper/BaseWrapper.jsx → assets/src/components/dynamic/base-wrapper/BaseWrapper.tsx

@@ -10,7 +10,7 @@ import {
   useOverlayTrigger,
 } from 'react-aria'
 
-import { getConfig } from '../../../index.jsx'
+import { getConfig } from '../../../index.tsx'
 import Control from '../../../Control'
 
 import { useOverlayTriggerState } from 'react-stately'

assets/src/components/field/date/DateField.jsx → assets/src/components/field/date/DateField.tsx

@@ -7,7 +7,7 @@ import {
   useLocale 
 } from 'react-aria'
 
-import DateSegment from './DateSegment.jsx'
+import DateSegment from './DateSegment.tsx'
 
 const DateField = props => {
 

assets/src/components/field/editor/index.jsx → assets/src/components/field/editor/index.tsx

@@ -1,5 +1,5 @@
 import ProseMirror from './prosemirror/Editor'
-import TinyMce from './TinyMce.jsx'
+import TinyMce from './TinyMce.tsx'
 
 export default props => {
 

assets/src/components/field/editor/prosemirror/ProseMirror.jsx → assets/src/components/field/editor/prosemirror/ProseMirror.tsx

@@ -15,7 +15,7 @@ import {
   exampleSetup,
   buildMenuItems
 } from 'prosemirror-example-setup'
-import { types } from '../../../../index.jsx'
+import { types } from '../../../../index.tsx'
 
 import CodeEditor from '../../code/Editor'
 

assets/src/components/field/file/File.jsx → assets/src/components/field/file/File.tsx

@@ -14,7 +14,7 @@ import {
   Description, 
   Label
 } from "../../base"
-import { getConfig } from '../../../index.jsx'
+import { getConfig } from '../../../index.tsx'
 
 import { postMedia } from "../../../requests/media"
 import FilePreview from "./FilePreview"

assets/src/components/repeater/Repeater.jsx → assets/src/components/repeater/Repeater.tsx

@@ -8,17 +8,17 @@ import {
 import {
   repeaterDispatcher,
   initDispatcher
-} from './dispatcher.js'
+} from './dispatcher.ts'
 
 import {
   Button,
   Title,
   ModalTrigger
 } from '../base'
 
-import types from '../../types.js'
+import types from '../../types.ts'
 import Item from './common/Item'
-import strings from './strings.js'
+import strings from './strings.ts'
 
 const Repeater = props => {
 

assets/src/components/repeater/layout/advanced/header.jsx → assets/src/components/repeater/layout/advanced/header.tsx

@@ -1,4 +1,4 @@
-import * as tangibleFields from '../../../../index.jsx'
+import * as tangibleFields from '../../../../index.tsx'
 
 /**
  * This file contains helper functions that are used to render

assets/src/dynamic-values/index.js → assets/src/dynamic-values/index.ts

@@ -2,7 +2,7 @@ import {
   dynamicValueToString,
   stringToDynamicValue
 } from './format'
-import { getConfig } from '../index.jsx'
+import { getConfig } from '../index.tsx'
 
 /**
  * Field type that support dynamic values (!== to supported props.dyanmic.types)

assets/src/example/combobox-layout.jsx → assets/src/example/combobox-layout.tsx

@@ -2,7 +2,7 @@ import {
   createRoot,
   forwardRef
 } from 'react'
-import * as tangibleFields from '../index.jsx'
+import * as tangibleFields from '../index.tsx'
 
 const initCombobox = () => {
 

assets/src/example/register-custom-type.jsx → assets/src/example/register-custom-type.tsx

@@ -3,7 +3,7 @@ import {
   useEffect,
   createRoot
 } from 'react'
-import * as tangibleFields from '../index.jsx'
+import * as tangibleFields from '../index.tsx'
 
 const initExample = () => {
 

assets/src/global.js → assets/src/global.ts

@@ -1,4 +1,4 @@
-import * as tangibleFields from './index.jsx'
+import * as tangibleFields from './index.tsx'
 
 window.tangibleFields = tangibleFields
 window.addEventListener('load', () => {

assets/src/requests/index.js → assets/src/requests/index.ts

@@ -1,4 +1,4 @@
-import { getConfig } from '../index.jsx'
+import { getConfig } from '../index.tsx'
 
 const post = (url, data) => {
 

assets/src/requests/media.js → assets/src/requests/media.ts

@@ -2,7 +2,7 @@ import {
   post, 
   get 
 } from '.'
-import { getConfig } from '../index.jsx'
+import { getConfig } from '../index.tsx'
 
 const postMedia = file => {
 

playwright.config.js

@@ -14,7 +14,7 @@ const readJson = (f) => JSON.parse(fs.readFileSync(f, 'utf8'))
 export default (function createConfig() {
   const cwd = process.cwd()
   const testDir = path.join(cwd, 'tests')
-  const testMatch = 'e2e/**/*.js'
+  const testMatch = 'e2e/**/*.{js,ts}'
   const timeout = parseInt(process.env.TIMEOUT || '', 10) || 100_000 // Defaults to 100 seconds
   const artifactsPath = (process.env.WP_ARTIFACTS_PATH ??= path.join(
     cwd,

tangible.config.js

@@ -7,7 +7,7 @@ export default {
      * Script: Common for all contexts
      */
     {
-      src: 'assets/src/global.js',
+      src: 'assets/src/global.ts',
       dest: 'assets/build/index.min.js',
       react: 'wp',
       rollupPlugins: [
@@ -41,7 +41,7 @@ export default {
      * Example
      */
     {
-      src: 'assets/src/example/index.js',
+      src: 'assets/src/example/index.ts',
       dest: 'assets/build/example.min.js',
       react: 'wp',
     },

tests/jest/cases/codemirror/mask.test.js → tests/jest/cases/codemirror/mask.test.ts

@@ -1,6 +1,6 @@
-import '../../../../assets/src/index.jsx'
+import '../../../../assets/src/index.tsx'
 import { userEvent } from '@testing-library/user-event'
-import { createInput } from '../../../../assets/src/codemirror/index.js'
+import { createInput } from '../../../../assets/src/codemirror/index.ts'
 
 describe('codeMirror - Mask', () => {
 

tests/jest/cases/components/controls/Accordion.test.jsx → tests/jest/cases/components/controls/Accordion.test.tsx

@@ -1,4 +1,4 @@
-import * as fields from '../../../../../assets/src/index.jsx'
+import * as fields from '../../../../../assets/src/index.tsx'
 import userEvent from '@testing-library/user-event'
 import { render } from '@testing-library/react'
 

tests/jest/cases/components/controls/ButtonGroup.test.jsx → tests/jest/cases/components/controls/ButtonGroup.test.tsx

@@ -1,12 +1,12 @@
-import * as fields from '../../../../../assets/src/index.jsx'
+import * as fields from '../../../../../assets/src/index.tsx'
 import { render } from '@testing-library/react'
 import {
   rendersWithMinimal,
   rendersWithoutLabelThrowWarning,
   rendersLabelAndDescription,
   renderHasElement,
   renderHasNotElement
-} from '../../../utils/fields.js'
+} from '../../../utils/fields.ts'
 
 describe('Button group component', () => {
 

tests/jest/cases/components/controls/Checkbox.test.jsx → tests/jest/cases/components/controls/Checkbox.test.tsx

@@ -1,4 +1,4 @@
-import * as fields from '../../../../../assets/src/index.jsx'
+import * as fields from '../../../../../assets/src/index.tsx'
 import userEvent from '@testing-library/user-event'
 import { 
   render, 
@@ -8,7 +8,7 @@ import {
   rendersWithMinimal,
   rendersWithoutLabelThrowWarning,
   rendersLabelAndDescription
-} from '../../../utils/fields.js'
+} from '../../../utils/fields.ts'
 
 describe('Checkbox component', () => {
 

tests/jest/cases/components/controls/Code.test.jsx → tests/jest/cases/components/controls/Code.test.tsx

@@ -1,9 +1,9 @@
-import '../../../../../assets/src/index.jsx'
+import '../../../../../assets/src/index.tsx'
 import {
   rendersWithMinimal,
   rendersWithoutLabelThrowWarning,
   rendersLabelAndDescription
-} from '../../../utils/fields.js'
+} from '../../../utils/fields.ts'
 
 describe('Code component', () => {
   it('renders with minimal config', () => rendersWithMinimal({ type: 'code' }))

tests/jest/cases/components/controls/ColorPicker.test.jsx → tests/jest/cases/components/controls/ColorPicker.test.tsx

@@ -1,11 +1,11 @@
-import * as fields from '../../../../../assets/src/index.jsx'
-import '../../../../../assets/src/index.jsx'
+import * as fields from '../../../../../assets/src/index.tsx'
+import '../../../../../assets/src/index.tsx'
 import { render } from '@testing-library/react'
 import {
   rendersWithMinimal,
   rendersWithoutLabelThrowWarning,
   rendersLabelAndDescription
-} from '../../../utils/fields.js'
+} from '../../../utils/fields.ts'
 
 describe('Color component', () => {
 

tests/jest/cases/components/controls/ComboBox.test.jsx → tests/jest/cases/components/controls/ComboBox.test.tsx

@@ -1,4 +1,4 @@
-import * as fields from '../../../../../assets/src/index.jsx'
+import * as fields from '../../../../../assets/src/index.tsx'
 import { forwardRef } from 'react'
 import {
     getAllByLabelText,

tests/jest/cases/components/controls/DatePicker.test.jsx → tests/jest/cases/components/controls/DatePicker.test.tsx

@@ -1,4 +1,4 @@
-import * as fields from '../../../../../assets/src/index.jsx'
+import * as fields from '../../../../../assets/src/index.tsx'
 import userEvent from '@testing-library/user-event'
 import { 
   within,
@@ -9,7 +9,7 @@ import {
   rendersWithMinimal,
   rendersWithoutLabelThrowWarning,
   rendersLabelAndDescription
-} from '../../../utils/fields.js'
+} from '../../../utils/fields.ts'
 import { 
   today, 
   getLocalTimeZone,

tests/jest/cases/components/controls/Editor.test.jsx → tests/jest/cases/components/controls/Editor.test.tsx

@@ -1,4 +1,4 @@
-import * as fields from '../../../../../assets/src/index.jsx'
+import * as fields from '../../../../../assets/src/index.tsx'
 import userEvent from '@testing-library/user-event'
 import {
   render,
@@ -8,7 +8,7 @@ import {
   rendersWithMinimal,
   rendersWithoutLabelThrowWarning,
   rendersLabelAndDescription
-} from '../../../utils/fields.js'
+} from '../../../utils/fields.ts'
 
 /**
  * TODO: Add tests to check is value correctly set from both visual and raw views

tests/jest/cases/components/controls/FieldGroup.test.jsx → tests/jest/cases/components/controls/FieldGroup.test.tsx

@@ -1,4 +1,4 @@
-import * as fields from '../../../../../assets/src/index.jsx'
+import * as fields from '../../../../../assets/src/index.tsx'
 import userEvent from '@testing-library/user-event'
 import { render, within } from '@testing-library/react'
 

tests/jest/cases/components/controls/List.test.jsx → tests/jest/cases/components/controls/List.test.tsx

@@ -1,4 +1,4 @@
-import * as fields from '../../../../../assets/src/index.jsx'
+import * as fields from '../../../../../assets/src/index.tsx'
 import { 
   render,
   screen,
@@ -7,7 +7,7 @@ import {
 import { 
   rendersWithMinimal,
   rendersWithoutLabelThrowWarning
-} from '../../../utils/fields.js'
+} from '../../../utils/fields.ts'
 import { userEvent } from '@testing-library/user-event'
 
 describe('List component', () => {

tests/jest/cases/components/controls/Number.test.jsx → tests/jest/cases/components/controls/Number.test.tsx

@@ -1,4 +1,4 @@
-import * as fields from '../../../../../assets/src/index.jsx'
+import * as fields from '../../../../../assets/src/index.tsx'
 import { 
   render, 
   within 
@@ -9,7 +9,7 @@ import {
   rendersLabelAndDescription,
   renderHasElement,
   renderHasNotElement
-} from '../../../utils/fields.js'
+} from '../../../utils/fields.ts'
 
 describe('Number component', () => {
 

tests/jest/cases/components/controls/Select.test.jsx → tests/jest/cases/components/controls/Select.test.tsx

@@ -1,10 +1,10 @@
-import * as fields from '../../../../../assets/src/index.jsx'
+import * as fields from '../../../../../assets/src/index.tsx'
 import { render, within } from '@testing-library/react'
 import { 
   rendersWithoutLabelThrowWarning,
   renderHasElement,
   renderHasNotElement
-} from '../../../utils/fields.js'
+} from '../../../utils/fields.ts'
 
 describe('Select component', () => {
 

tests/jest/cases/components/controls/Tab.test.jsx → tests/jest/cases/components/controls/Tab.test.tsx

@@ -1,4 +1,4 @@
-import * as fields from '../../../../../assets/src/index.jsx'
+import * as fields from '../../../../../assets/src/index.tsx'
 import userEvent from '@testing-library/user-event'
 import { render, within } from '@testing-library/react'
 

tests/jest/cases/components/controls/Text.test.jsx → tests/jest/cases/components/controls/Text.test.tsx

@@ -1,4 +1,4 @@
-import * as fields from '../../../../../assets/src/index.jsx'
+import * as fields from '../../../../../assets/src/index.tsx'
 import { 
   act, 
   render
@@ -10,7 +10,7 @@ import {
   rendersLabelAndDescription,
   renderHasElement,
   renderHasNotElement
-} from '../../../utils/fields.js'
+} from '../../../utils/fields.ts'
 
 describe('Text component', () => {