feat: migrate to typescript (#63)

# Description

This pr migrates the project to Typescript with correct typings, build
process and keeping the tests running

## Issue Ticket Number

Fixes 

## Type of change

<!-- Please select all options that are applicable. -->

- [X] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update


# Checklist

<!-- These must all be followed and checked. -->

- [X] I have followed the contributing guidelines of this project as
mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
- [X] I have created an
[issue](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues)
ticket for this PR
- [X] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/colbyfayock/netlify-plugin-cloudinary/pulls)
for the same update/change?
- [X] I have performed a self-review of my own code
- [X] I have run tests locally to ensure they all pass
- [X] I have commented my code, particularly in hard-to-understand areas
- [X] I have made corresponding changes needed to the documentation

---------

Co-authored-by: Colby Fayock <[email protected]>

Author: matiasfha

.eslintignore

@@ -0,0 +1,2 @@
+demo
+node_modules

.eslintrc.cjs

@@ -0,0 +1,26 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2022: true,
+  },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint'],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+    },
+  ],
+  rules: {
+    '@typescript-eslint/no-unused-vars': 'error',
+    // to enforce using type for object type definitions, can be type or interface
+    '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+  },
+}

.gitignore

@@ -2,4 +2,5 @@ node_modules
 .env
 # Local Netlify folder
 .netlify
-_next
+_next
+dist

.prettierignore

@@ -0,0 +1,2 @@
+demo
+node_modules

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}

.setTestEnvVars.js

@@ -0,0 +1,5 @@
+process.env.CLOUDINARY_CLOUD_NAME="testcloud"
+process.env.CLOUDINARY_API_KEY="791111111111111"
+process.env.CLOUDINARY_API_SECRET="B1CoYVwbgSZ-Bpk_Firy8jB2480"
+process.env.CLOUDINARY_API_SECRET="ThisIsTheSe-Cre_tAPIKEY_800"
+process.env.NETLIFY_HOST="test.netlify.app"

demo/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "prettier"]
 }

demo/.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

demo/app/app/page.jsx

@@ -0,0 +1,45 @@
+import '../../styles/globals.css';
+import Image from 'next/image';
+import styles from '../../styles/Home.module.css';
+
+import images from '../../data/images.json';
+
+export default function Home() {
+  return (
+    <div className={styles.container}>
+      <main className={styles.main}>
+        <h1 className={styles.title}>Cloudinary Netlify Plugin</h1>
+
+        <ul className={styles.grid}>
+          {images.map((image) => {
+            return (
+              <li key={image.src}>
+                <img
+                  src={image.src}
+                  width={image.width}
+                  height={image.height}
+                  alt={image.title}
+                />
+              </li>
+            );
+          })}
+        </ul>
+
+        <ul className={styles.grid}>
+          {images.map((image) => {
+            return (
+              <li key={image.src}>
+                <Image
+                  src={image.src}
+                  width={image.width}
+                  height={image.height}
+                  alt={image.title}
+                />
+              </li>
+            );
+          })}
+        </ul>
+      </main>
+    </div>
+  );
+}