Merge pull request #389 from zendesk/gianluca/typescript

Added TypeScript support

.eslintrc.json

@@ -1,15 +1,30 @@
 {
   "extends": [
     "eslint:recommended",
-    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:import/recommended",
-    "plugin:react/recommended"
+    "plugin:import/typescript",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:prettier/recommended"
   ],
   "env": {
     "browser": true
   },
-  "parserOptions": {
-    "ecmaVersion": 2015,
-    "sourceType": "module"
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "root": true,
+  "settings": {
+    "import/resolver": {
+      "typescript": true,
+      "node": true
+    },
+    "react": {
+      "version": "detect"
+    }
+  },
+  "ignorePatterns": ["assets/**"],
+  "rules": {
+    "@typescript-eslint/consistent-type-imports": "error"
   }
 }

package.json

@@ -22,23 +22,27 @@
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.6",
-    "@babel/preset-react": "^7.22.5",
     "@commitlint/cli": "17.3.0",
     "@commitlint/config-conventional": "17.3.0",
-    "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-typescript": "^11.1.2",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.20",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
     "concurrently": "8.0.1",
     "dotenv": "16.0.3",
     "eslint": "8.35.0",
     "eslint-config-prettier": "8.6.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react": "^7.32.2",
     "husky": "8.0.2",
     "js-yaml": "4.1.0",
     "lighthouse": "10.0.1",
@@ -48,6 +52,7 @@
     "rollup-plugin-sass": "1.12.18",
     "sass": "1.58.3",
     "semantic-release": "19.0.5",
+    "typescript": "^5.1.6",
     "url-pattern": "1.0.3",
     "wait-on": "7.0.1"
   },

rollup.config.mjs

@@ -1,7 +1,7 @@
 import zass from "./zass.mjs";
-import nodeResolve from "@rollup/plugin-node-resolve";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
-import babel from "@rollup/plugin-babel";
+import typescript from "@rollup/plugin-typescript";
 import replace from "@rollup/plugin-replace";
 import { defineConfig } from "rollup";
 
@@ -18,7 +18,10 @@ export default defineConfig([
     },
   },
   {
-    input: ["src/modules/NewRequestForm.jsx", "src/modules/shared.jsx"],
+    input: {
+      "new-request-form": "src/modules/new-request-form/index.tsx",
+      shared: "src/modules/shared.tsx",
+    },
     output: {
       dir: "assets",
       format: "es",
@@ -31,14 +34,10 @@ export default defineConfig([
     },
     plugins: [
       nodeResolve({
-        extensions: [".js", "jsx"],
-      }),
-      babel({
-        babelHelpers: "bundled",
-        presets: ["@babel/preset-react"],
-        extensions: [".js", ".jsx"],
+        extensions: [".js"],
       }),
       commonjs(),
+      typescript(),
       replace({
         preventAssignment: true,
         "process.env.NODE_ENV": '"production"',

src/modules/new-request-form/NewRequestForm.tsx

@@ -0,0 +1,14 @@
+import type { TicketForm } from "./data-types/TicketForm";
+import { TicketFormField } from "./ticket-form-field/TicketFormField";
+
+export interface NewRequestFormProps {
+  ticketForms: TicketForm[];
+}
+
+export function NewRequestForm({ ticketForms }: NewRequestFormProps) {
+  return (
+    <form>
+      <TicketFormField ticketForms={ticketForms} />
+    </form>
+  );
+}

src/modules/new-request-form/data-types/TicketForm.ts

@@ -0,0 +1,5 @@
+export interface TicketForm {
+  id: string;
+  url: string;
+  name: string;
+}

src/modules/new-request-form/index.tsx

@@ -0,0 +1 @@
+export { renderNewRequestForm } from "./renderNewRequestForm";

src/modules/new-request-form/renderNewRequestForm.tsx

@@ -0,0 +1,16 @@
+import { render } from "react-dom";
+import { ComponentProviders } from "../shared";
+import type { NewRequestFormProps } from "./NewRequestForm";
+import { NewRequestForm } from "./NewRequestForm";
+
+export function renderNewRequestForm(
+  props: NewRequestFormProps,
+  container: HTMLElement
+) {
+  render(
+    <ComponentProviders>
+      <NewRequestForm {...props} />
+    </ComponentProviders>,
+    container
+  );
+}

src/modules/new-request-form/ticket-form-field/TicketFormField.tsx

@@ -0,0 +1,33 @@
+import type { IComboboxProps } from "@zendeskgarden/react-dropdowns.next";
+import {
+  Combobox,
+  Field,
+  Label,
+  Option,
+} from "@zendeskgarden/react-dropdowns.next";
+import type { TicketForm } from "../data-types/TicketForm";
+
+interface TicketFormFieldProps {
+  ticketForms: TicketForm[];
+}
+
+export function TicketFormField({ ticketForms }: TicketFormFieldProps) {
+  const handleChange: IComboboxProps["onChange"] = ({ selectionValue }) => {
+    if (selectionValue && typeof selectionValue === "string") {
+      window.location.href = selectionValue;
+    }
+  };
+
+  return (
+    <Field>
+      <Label>Please choose your issue below</Label>
+      <Combobox isEditable={false} onChange={handleChange}>
+        {ticketForms.map(({ id, url, name }) => (
+          <Option key={id} value={url} label={name}>
+            {name}
+          </Option>
+        ))}
+      </Combobox>
+    </Field>
+  );
+}

src/modules/shared.tsx

@@ -0,0 +1,15 @@
+import type { IGardenTheme } from "@zendeskgarden/react-theming";
+import { ThemeProvider, DEFAULT_THEME } from "@zendeskgarden/react-theming";
+import type { ReactNode } from "react";
+
+let theme = DEFAULT_THEME;
+
+export function setupGardenTheme(
+  callback: (defaultTheme: IGardenTheme) => IGardenTheme
+) {
+  theme = callback(DEFAULT_THEME);
+}
+
+export function ComponentProviders({ children }: { children: ReactNode }) {
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+}

templates/document_head.hbs

@@ -7,7 +7,7 @@
         "imports": {
             "vendor": "{{asset 'vendor.js'}}",
             "shared": "{{asset 'shared.js'}}",
-            "new-request-form": "{{asset 'NewRequestForm.js'}}"
+            "new-request-form": "{{asset 'new-request-form.js'}}"
         }
     }
 </script>

templates/new_request_page.hbs

@@ -50,12 +50,10 @@
 <script type="module">
   import { renderNewRequestForm } from "new-request-form";
 
-  var ticketForms = {
-    options: []
-  };
+  var ticketForms = [];
   
   {{#each ticket_forms}}
-    ticketForms.options.push({ id:
+    ticketForms.push({ id:
     {{id}}, url: "{{url}}", name: "{{display_name}}" });
   {{/each}}
 

tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noUncheckedIndexedAccess": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src/modules"]
+}