Merge pull request #47 from p3ol/refactor/typescript

♻️ refactor: rewrite everything with Typescript

.eslintrc.js

@@ -1,27 +1,17 @@
 module.exports = {
-  extends: '@poool/eslint-config-react',
+  extends: [
+    '@poool/eslint-config-react',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
   rules: {
     'react/react-in-jsx-scope': 0,
+    '@typescript-eslint/no-explicit-any': 0,
   },
   overrides: [{
-    files: ['src/**/*.test.js'],
+    files: ['src/**/*.test.{ts,tsx}'],
     env: {
       jest: true,
     },
-  }, {
-    files: ['src/**/*.{ts,tsx}'],
-    extends: ['plugin:@typescript-eslint/recommended'],
-    parser: '@typescript-eslint/parser',
-    globals: {
-      JSX: 'readonly',
-      React: 'readonly',
-    },
-    rules: {
-      '@typescript-eslint/no-explicit-any': 0,
-      'max-len': [1, {
-        ignoreComments: true,
-      }],
-      'no-use-before-define': 0,
-    },
   }],
 };

.github/pull_request_template.md

@@ -0,0 +1,41 @@
+{ REMOVE THIS TO WRITE YOUR OWN DESCRIPTION }
+
+## PR title rules
+
+- Should have an emoji so it's clear what it does from the list view
+- Should have a type (feat, fix, chore, ...)
+- Can have a subject (but it's not mandatory)
+
+## Available emojis
+
+- ✨ → New feature
+- 🐛 → Bug fix
+- ♻️ → Drastically rewrites a big percentage of the code or architecture
+- 🏗 → Add/update unit tests
+- 📦 → Dependency maintenance and/or internal script update
+- 📖 → Documentation update
+
+## Allowed types
+- chore
+- docs
+- feat
+- fix
+- refactor
+- test
+- tests
+- deploy
+- release
+
+## Don't do
+
+```
+Feature: Add new time picker
+fix the thing that was not working
+```
+
+## Do
+
+```
+✨ feat(react): add new time picker component
+🐛 fix(core): parse hsla correctly
+```

.github/workflows/ci.yml

@@ -17,12 +17,15 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
+          check-latest: true
           cache: yarn
       - name: Install deps
         run: yarn install
       - name: ESlint check
         run: yarn lint
+      - name: Type check
+        run: yarn tsc
 
   test:
     name: Unit tests
@@ -34,7 +37,8 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
+          check-latest: true
           cache: yarn
       - name: Install deps
         run: yarn install
@@ -55,7 +59,8 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
+          check-latest: true
           cache: yarn
       - name: Install deps
         run: yarn install

.yarnrc.yml

@@ -1,5 +1,5 @@
-yarnPath: .yarn/releases/yarn-4.1.1.cjs
+enableGlobalCache: true
 
 nodeLinker: node-modules
 
-enableGlobalCache: true
+yarnPath: .yarn/releases/yarn-4.3.1.cjs

examples/basic/index.js → examples/basic/index.tsx

@@ -1,14 +1,18 @@
 import { useReducer } from 'react';
 import { createRoot } from 'react-dom/client';
-import { mockState } from '@junipero/core';
+import { mockState, StateReducer } from '@junipero/core';
 import { EngageContext, Element, Elements } from '@poool/react-engage';
 
+export interface AppState {
+  mode: 'auto' | 'slug';
+}
+
 const App = () => {
   if (!document.referrer) {
     location.reload();
   }
 
-  const [state, dispatch] = useReducer(mockState, {
+  const [state, dispatch] = useReducer<StateReducer<AppState>>(mockState, {
     mode: 'auto',
   });
 

examples/basic/package.json

@@ -1,3 +1,9 @@
 {
-  "name": "poool-react-engage-basic-example"
+  "name": "poool-react-engage-basic-example",
+  "scripts": {
+    "serve": "yarn run -T webpack serve --config ./webpack.config.ts"
+  },
+  "dependencies": {
+    "@poool/react-engage": "portal:../../"
+  }
 }

examples/basic/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./"],
+  "ts-node": {
+    "compilerOptions": {
+      "module": "CommonJS"
+    }
+  }
+}

examples/basic/webpack.config.js → examples/basic/webpack.config.ts

@@ -1,11 +1,11 @@
-const path = require('path');
+import path from 'node:path';
 
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+import webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 
-module.exports = {
+const config: webpack.Configuration = {
   entry: {
-    example: path.resolve(__dirname, './index.js'),
+    example: path.resolve(__dirname, './index.tsx'),
   },
   devtool: 'inline-source-map',
   mode: 'development',
@@ -27,18 +27,33 @@ module.exports = {
     }),
   ],
   resolve: {
-    extensions: ['.js'],
+    extensions: ['.js', '.ts', '.tsx'],
     alias: {
       '@poool/react-engage': path.resolve(__dirname, '../../src'),
     },
   },
   module: {
     rules: [{
-      test: /\.js/,
+      test: /\.m?[j|t]sx?/,
       exclude: /node_modules/,
       use: [{
-        loader: 'babel-loader',
+        loader: 'swc-loader',
+        options: {
+          jsc: {
+            transform: {
+              react: {
+                runtime: 'automatic',
+              },
+            },
+            parser: {
+              syntax: 'typescript',
+              tsx: true,
+            },
+          },
+        },
       }],
     }],
   },
 };
+
+export default config;

examples/next/.swcrc

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://swc.rs/schema.json",
+  "jsc": {
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
+    },
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    }
+  }
+}

examples/next/app/layout.js → examples/next/app/layout.tsx

@@ -1,8 +1,10 @@
-import PropTypes from 'prop-types';
+import type { ComponentPropsWithoutRef } from 'react';
 
 import Providers from './providers';
 
-export default function RootLayout ({ children }) {
+export default function RootLayout ({
+  children,
+}: ComponentPropsWithoutRef<any>) {
   return (
     <html lang="en">
       <body>
@@ -14,10 +16,6 @@ export default function RootLayout ({ children }) {
   );
 }
 
-RootLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
 export const metadata = {
   title: 'Next.js',
   description: 'Generated by Next.js',

examples/next/app/providers.js → examples/next/app/providers.tsx

@@ -1,9 +1,9 @@
 'use client';
 
+import type { ComponentPropsWithoutRef } from 'react';
 import { EngageContext } from '@poool/react-engage';
-import PropTypes from 'prop-types';
 
-const Providers = ({ children }) => {
+const Providers = ({ children }: ComponentPropsWithoutRef<any>) => {
   return (
     <EngageContext
       appId="155PF-L7Q6Q-EB2GG-04TF8"
@@ -14,8 +14,6 @@ const Providers = ({ children }) => {
   );
 };
 
-Providers.propTypes = {
-  children: PropTypes.node.isRequired,
-};
+Providers.displayName = 'Providers';
 
 export default Providers;

examples/next/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/next/package.json

@@ -2,7 +2,9 @@
   "name": "poool-react-engage-next-example",
   "dependencies": {
     "@poool/react-engage": "portal:../../",
-    "next": "14.2.1"
+    "next": "14.2.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "scripts": {
     "dev": "next"

examples/next/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": [
+    "../../",
+    "./",
+    "app/**/*",
+    ".next/types/**/*.ts"
+  ],
+  "compilerOptions": {
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "isolatedModules": true
+  }
+}

jest.config.ts

@@ -0,0 +1,35 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  clearMocks: true,
+  collectCoverage: true,
+  fakeTimers: {
+    enableGlobally: false,
+  },
+  testEnvironment: 'jsdom',
+  coverageDirectory: 'coverage',
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '/tests/',
+  ],
+  transform: {
+    '^.+\\.[j|t]sx?$': ['@swc/jest', {
+      jsc: {
+        transform: {
+          react: {
+            runtime: 'automatic',
+          },
+        },
+        parser: {
+          syntax: 'typescript',
+          tsx: true,
+        },
+      },
+    }],
+  },
+  moduleNameMapper: {
+    '^~(.+)': '<rootDir>/$1',
+  },
+};
+
+export default config;