Migration of jsx files to tsx 1

cypress/e2e/modals.cy.ts

@@ -77,11 +77,18 @@ describe("modals", () => {
     });
 
     it("name", () => {
+      when.click("field-doc-button-Name");
+
+      should.containText("spec-field-doc", "name for the style");
+    });
+
+    it("show name specifications", () => {
       when.setValue(get.dataAttribute("modal:settings.name"), "foobar");
       when.click("modal:settings.owner");
 
       should.equalStyleStore((obj) => obj.name, "foobar");
     });
+
     it("owner", () => {
       when.setValue(get.dataAttribute("modal:settings.owner"), "foobar");
       when.click("modal:settings.name");

package.json

@@ -96,11 +96,19 @@
     "@storybook/react": "^7.6.5",
     "@storybook/react-vite": "^7.6.5",
     "@storybook/theming": "^7.6.5",
+    "@types/codemirror": "^5.60.15",
+    "@types/color": "^3.0.6",
     "@types/cors": "^2.8.17",
+    "@types/lodash.capitalize": "^4.2.9",
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",
     "@types/react": "^16.14.52",
+    "@types/react-aria-modal": "^4.0.9",
+    "@types/react-autocomplete": "^1.8.9",
+    "@types/react-color": "^3.0.10",
     "@types/react-dom": "^16.9.24",
+    "@types/react-file-reader-input": "^2.0.4",
+    "@types/react-icon-base": "^2.1.6",
     "@types/uuid": "^9.0.7",
     "@vitejs/plugin-react": "^4.2.0",
     "cors": "^2.8.5",

src/components/Block.jsx → src/components/Block.tsx

@@ -1,40 +1,43 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SyntheticEvent} from 'react'
 import classnames from 'classnames'
 import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
 
 
+type BlockProps = {
+  "data-wd-key"?: string
+  label?: string
+  action?: React.ReactElement
+  style?: object
+  onChange?(...args: unknown[]): unknown
+  fieldSpec?: object
+  wideMode?: boolean
+  error?: unknown[]
+};
+
+type BlockState = {
+  showDoc: boolean
+};
+
 /** Wrap a component with a label */
-export default class Block extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    label: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element,
-    ]),
-    action: PropTypes.element,
-    children: PropTypes.node.isRequired,
-    style: PropTypes.object,
-    onChange: PropTypes.func,
-    fieldSpec: PropTypes.object,
-    wideMode: PropTypes.bool,
-    error: PropTypes.array,
-  }
+export default class Block extends React.Component<BlockProps, BlockState> {
+  _blockEl: HTMLDivElement | null = null;
 
-  constructor (props) {
+  constructor (props: BlockProps) {
     super(props);
     this.state = {
       showDoc: false,
     }
   }
 
-  onChange(e) {
+  onChange(e: React.BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) {
     const value = e.target.value
-    return this.props.onChange(value === "" ? undefined : value)
+    if (this.props.onChange) {
+      return this.props.onChange(value === "" ? undefined : value)
+    }
   }
 
-  onToggleDoc = (val) => {
+  onToggleDoc = (val: boolean) => {
     this.setState({
       showDoc: val
     });
@@ -46,20 +49,17 @@ export default class Block extends React.Component {
    * causing the picker to reopen. This causes a scenario where the picker can
    * never be closed once open.
    */
-  onLabelClick = (event) => {
+  onLabelClick = (event: SyntheticEvent<any, any>) => {
     const el = event.nativeEvent.target;
-    const nativeEvent = event.nativeEvent;
-    const contains = this._blockEl.contains(el);
+    const contains = this._blockEl?.contains(el);
 
     if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
       event.stopPropagation();
     }
-		event.preventDefault();
+        event.preventDefault();
   }
 
   render() {
-    const errors = [].concat(this.props.error || []);
-
     return <label style={this.props.style}
       data-wd-key={this.props["data-wd-key"]}
       className={classnames({

src/components/Doc.jsx → src/components/Doc.tsx

@@ -1,24 +1,33 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
-export default class Doc extends React.Component {
-  static propTypes = {
-    fieldSpec: PropTypes.object.isRequired,
+const headers = {
+  js: "JS",
+  android: "Android",
+  ios: "iOS",
+  macos: "macOS",
+};
+
+type DocProps = {
+  fieldSpec: {
+    doc?: string
+    values?: {
+      [key: string]: {
+        doc?: string
+      }
+    }
+    'sdk-support'?: {
+      [key: string]: typeof headers
+    }
   }
+};
 
+export default class Doc extends React.Component<DocProps> {
   render () {
     const {fieldSpec} = this.props;
 
     const {doc, values} = fieldSpec;
     const sdkSupport = fieldSpec['sdk-support'];
 
-    const headers = {
-      js: "JS",
-      android: "Android",
-      ios: "iOS",
-      macos: "macOS",
-    };
-
     const renderValues = (
       !!values &&
       // HACK: Currently we merge additional values into the style spec, so this is required
@@ -30,7 +39,7 @@ export default class Doc extends React.Component {
       <>
         {doc &&
           <div className="SpecDoc">
-            <div className="SpecDoc__doc">{doc}</div>
+            <div className="SpecDoc__doc" data-wd-key='spec-field-doc'>{doc}</div>
             {renderValues &&
               <ul className="SpecDoc__values">
                 {Object.entries(values).map(([key, value]) => {
@@ -61,10 +70,9 @@ export default class Doc extends React.Component {
                   return (
                     <tr key={key}>
                       <td>{key}</td>
-                      {Object.keys(headers).map(k => {
-                        const value = supportObj[k];
+                      {Object.keys(headers).map((k) => {
                         if (supportObj.hasOwnProperty(k)) {
-                          return <td key={k}>{supportObj[k]}</td>;
+                          return <td key={k}>{supportObj[k as keyof typeof headers]}</td>;
                         }
                         else {
                           return <td key={k}>no</td>;
@@ -80,4 +88,4 @@ export default class Doc extends React.Component {
       </>
     );
   }
-}
+}