City-of-Helsinki
diff --git a/‎.babelrc‎
Lines changed: 2 additions & 1 deletion b/‎.babelrc‎
Lines changed: 2 additions & 1 deletion
diff --git a/‎.eslintrc‎
Lines changed: 0 additions & 35 deletions b/‎.eslintrc‎
Lines changed: 0 additions & 35 deletions
diff --git a/‎.github/workflows/ci.yml‎
Lines changed: 1 addition & 0 deletions b/‎.github/workflows/ci.yml‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎README.md‎
Lines changed: 23 additions & 0 deletions b/‎README.md‎
Lines changed: 23 additions & 0 deletions
diff --git a/‎cfg/base.js‎
Lines changed: 1 addition & 1 deletion b/‎cfg/base.js‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎cfg/dev.js‎
Lines changed: 21 additions & 0 deletions b/‎cfg/dev.js‎
Lines changed: 21 additions & 0 deletions
diff --git a/‎cfg/dist.js‎
Lines changed: 16 additions & 0 deletions b/‎cfg/dist.js‎
Lines changed: 16 additions & 0 deletions
diff --git a/‎eslint.config.mjs‎
Lines changed: 52 additions & 25 deletions b/‎eslint.config.mjs‎
Lines changed: 52 additions & 25 deletions
diff --git a/‎jest.config.js‎
Lines changed: 6 additions & 3 deletions b/‎jest.config.js‎
Lines changed: 6 additions & 3 deletions
@@ -1,7 +1,8 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   "plugins": [
     [
 
@@ -13,5 +13,6 @@ jobs:
     secrets: inherit
     with:
       node-version: 22
+      typecheck: true  # Enable type checking
       extra-commands: |
         cp .env.example .env
@@ -19,6 +19,29 @@ Run `npm install`
 
 Run `npm start`
 
+## TypeScript Support ##
+
+This project supports incremental TypeScript migration alongside JavaScript. You can create new components as `.tsx` files or gradually convert existing `.js` files to TypeScript.
+
+### Type Checking ###
+
+Run `npm run typecheck` to check TypeScript types without emitting files.
+
+### File Extensions ###
+
+- Use `.tsx` for React components with TypeScript
+- Use `.ts` for utility files, actions, reducers with TypeScript  
+- Existing `.js` and `.jsx` files continue to work unchanged
+
+### Migration Strategy ###
+
+1. Start with simple components that have no props
+2. Convert components that already have PropTypes defined
+3. Add type definitions for Redux state and actions
+4. Gradually convert remaining components
+
+The build system automatically handles both JavaScript and TypeScript files.
+
 # Production build #
 
 1. Important! Update the version in `src/pulkka.appcache`
 
@@ -52,7 +52,7 @@ module.exports = {
     allowedHosts: 'all'
   },
   resolve: {
-    extensions: ['.js', '.jsx'],
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
     fallback: {
       "process": require.resolve("process/browser.js")
     },
 
@@ -35,6 +35,27 @@ let config = Object.assign({}, baseConfig, {
 });
 
 // Add needed loaders to the defaults here
+config.module.rules.push({
+  test: /\.(ts|tsx)$/,
+  use: [
+    {
+      loader: require.resolve('babel-loader'),
+      options: {
+        plugins: [require.resolve('react-refresh/babel')],
+      }
+    },
+    {
+      loader: 'ts-loader',
+      options: {
+        transpileOnly: true
+      }
+    }
+  ],
+  include: [].concat(
+    [ path.join(__dirname, '/../src') ]
+  )
+});
+
 config.module.rules.push({
   test: /\.(js|jsx)$/,
   use: [
 
@@ -48,4 +48,20 @@ config.module.rules.push({
   )
 });
 
+config.module.rules.push({
+  test: /\.(ts|tsx)$/,
+  use: [
+    'babel-loader',
+    {
+      loader: 'ts-loader',
+      options: {
+        transpileOnly: true
+      }
+    }
+  ],
+  include: [].concat(
+    [ path.join(__dirname, '/../src') ]
+  )
+});
+
 module.exports = config;
@@ -1,6 +1,9 @@
 import js from '@eslint/js';
 import react from 'eslint-plugin-react';
 import babelParser from '@babel/eslint-parser';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsparser from '@typescript-eslint/parser';
+import globals from 'globals';
 
 export default [
   js.configs.recommended,
@@ -20,39 +23,63 @@ export default [
         },
       },
       globals: {
-        // Node.js environment
-        process: 'readonly',
-        require: 'readonly',
-        module: 'readonly',
-        global: 'readonly',
-        Buffer: 'readonly',
-        __dirname: 'readonly',
-        __filename: 'readonly',
-        // Browser environment 
-        window: 'readonly',
-        document: 'readonly',
-        console: 'readonly',
-        fetch: 'readonly',
-        localStorage: 'readonly',
-        navigator: 'readonly',
-        setTimeout: 'readonly',
-        clearTimeout: 'readonly',
-        setInterval: 'readonly',
-        clearInterval: 'readonly',
-        // Test environment
-        describe: 'readonly',
-        it: 'readonly',
-        beforeEach: 'readonly',
-        afterEach: 'readonly',
-        expect: 'readonly',
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
       },
     },
     rules: {
+      'comma-dangle': 'warn',
       'quotes': ['warn', 'single'],
+      'no-undef': 'warn',
+      'no-extra-semi': 'warn',
       'no-console': 'off',
+      'no-unused-vars': 'warn',
+      'no-trailing-spaces': ['warn', { 'skipBlankLines': true }],
+      'no-unreachable': 'warn',
       'no-alert': 'off',
       'react/jsx-uses-react': 'warn',
       'react/jsx-uses-vars': 'warn',
+      'indent': ['error', 2, { 'SwitchCase': 1 }],
+    },
+  },
+  {
+    files: ['src/**/*.{ts,tsx}', 'test/**/*.{ts,tsx}'],
+    plugins: {
+      '@typescript-eslint': tseslint,
+      react,
+    },
+    languageOptions: {
+      parser: tsparser,
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
+      },
+    },
+    rules: {
+      // Base ESLint rules
+      'comma-dangle': 'warn',
+      'quotes': ['warn', 'single'],
+      'no-undef': 'warn',
+      'no-extra-semi': 'warn',
+      'no-console': 'off',
+      'no-trailing-spaces': ['warn', { 'skipBlankLines': true }],
+      'no-unreachable': 'warn',
+      'no-alert': 'off',
+      'react/jsx-uses-react': 'warn',
+      'react/jsx-uses-vars': 'warn',
+      'indent': ['error', 2, { 'SwitchCase': 1 }],
+      // TypeScript specific rules
+      '@typescript-eslint/no-unused-vars': 'warn',
+      'no-unused-vars': 'off', // Turn off base rule as it conflicts with @typescript-eslint version
     },
   },
 ];
@@ -3,10 +3,11 @@ module.exports = {
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['<rootDir>/test/setupTests.js'],
   testMatch: [
-    '<rootDir>/{test,src}/**/__tests__/*.test.{js,jsx}'
+    '<rootDir>/{test,src}/**/__tests__/*.test.{js,jsx,ts,tsx}'
   ],
-  moduleFileExtensions: ['js', 'jsx'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   transform: {
+    '^.+\\.(ts|tsx)$': ['babel-jest', { presets: ['@babel/preset-typescript'] }],
     '^.+\\.(js|jsx)$': 'babel-jest',
   },
   moduleNameMapper: {
@@ -23,9 +24,11 @@ module.exports = {
   moduleDirectories: ['node_modules', 'src'],
   collectCoverage: true,
   collectCoverageFrom: [
-    'src/**/*.{js,jsx}',
+    'src/**/*.{js,jsx,ts,tsx}',
     '!src/index.js',
     '!src/config/**',
+    '!src/**/types.ts',
+    '!src/**/mock_groups.js',
   ],
   coverageProvider: 'v8',
   coverageDirectory: 'coverage',
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,8 @@`
`1`	`1`	`{`
`2`	`2`	`"presets": [`
`3`	`3`	`"@babel/preset-env",`
`4`		`- "@babel/preset-react"`
	`4`	`+ "@babel/preset-react",`
	`5`	`+ "@babel/preset-typescript"`
`5`	`6`	`],`
`6`	`7`	`"plugins": [`
`7`	`8`	`[`