Migrate color-picker plugin to ts

jest-preset.front.js

@@ -22,7 +22,7 @@ module.exports = {
   moduleNameMapper,
   /* Tells jest to ignore duplicated manual mock files, such as index.js */
   modulePathIgnorePatterns: ['.*__mocks__.*'],
-  testPathIgnorePatterns: ['node_modules/', '__tests__'],
+  testPathIgnorePatterns: ['node_modules/', '__tests__', 'dist/'],
   globalSetup: '@strapi/admin-test-utils/global-setup',
   setupFiles: ['@strapi/admin-test-utils/environment'],
   setupFilesAfterEnv: ['@strapi/admin-test-utils/after-env'],

packages/admin-test-utils/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/cli/create-strapi-app/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/cli/create-strapi-starter/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/core/data-transfer/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/core/utils/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/generators/app/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/generators/generators/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/plugins/color-picker/.editorconfig

@@ -0,0 +1,16 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[{package.json,*.yml}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

packages/plugins/color-picker/.eslintignore

@@ -1,2 +1,3 @@
 node_modules/
 .eslintrc.js
+dist/

packages/plugins/color-picker/.eslintrc.js

@@ -2,12 +2,8 @@ module.exports = {
   root: true,
   overrides: [
     {
-      files: ['admin/**/*'],
-      extends: ['custom/front'],
-    },
-    {
-      files: ['**/*'],
-      excludedFiles: ['admin/**/*'],
+      files: ['**'],
+      excludedFiles: ['admin/**/*', 'server/**/*'],
       extends: ['custom/back'],
     },
   ],

packages/plugins/color-picker/.npmignore

@@ -0,0 +1,98 @@
+############################
+# OS X
+############################
+
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+.Spotlight-V100
+.Trashes
+._*
+
+############################
+# Linux
+############################
+
+*~
+
+############################
+# Windows
+############################
+
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/
+*.cab
+*.msi
+*.msm
+*.msp
+
+############################
+# Packages
+############################
+
+*.7z
+*.csv
+*.dat
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.seed
+*.so
+*.swo
+*.swp
+*.swn
+*.swm
+*.out
+*.pid
+
+############################
+# Logs and databases
+############################
+
+.tmp
+*.log
+*.sql
+*.sqlite
+
+############################
+# Misc.
+############################
+
+*#
+.editorconfig
+.idea
+nbproject
+
+############################
+# Node.js
+############################
+
+lib-cov
+lcov.info
+pids
+logs
+results
+build
+node_modules
+.node_history
+
+############################
+# Tests
+############################
+
+test
+tests
+__tests__
+jest.config.js

packages/plugins/color-picker/admin/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: ['custom/front/typescript'],
+  parserOptions: {
+    project: ['./admin/tsconfig.eslint.json'],
+  },
+};

packages/plugins/color-picker/admin/src/global.d.ts

@@ -0,0 +1,2 @@
+declare module '@strapi/helper-plugin';
+declare module '@strapi/design-system';

packages/plugins/color-picker/admin/src/index.ts

@@ -1,11 +1,11 @@
 import { prefixPluginTranslations } from '@strapi/helper-plugin';
 
 import ColorPickerIcon from './components/ColorPicker/ColorPickerIcon';
-import pluginId from './pluginId';
+import { pluginId } from './pluginId';
 import getTrad from './utils/getTrad';
 
 export default {
-  register(app) {
+  register(app: any) {
     app.customFields.register({
       name: 'color',
       pluginId: 'color-picker',
@@ -64,7 +64,7 @@ export default {
       },
     });
   },
-  async registerTrads({ locales }) {
+  async registerTrads({ locales }: { locales: string[] }) {
     const importedTrads = await Promise.all(
       locales.map((locale) => {
         return import(`./translations/${locale}.json`)

packages/plugins/color-picker/admin/src/pluginId.js

@@ -1,5 +0,0 @@
-const pluginPkg = require('../../package.json');
-
-const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');
-
-module.exports = pluginId;

packages/plugins/color-picker/admin/src/pluginId.ts

@@ -0,0 +1,3 @@
+import pluginPkg from '../../package.json';
+
+export const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');

packages/plugins/color-picker/admin/src/utils/getTrad.ts

@@ -1,4 +1,4 @@
-import pluginId from '../pluginId';
+import { pluginId } from '../pluginId';
 
 const getTrad = (id) => `${pluginId}.${id}`;
 

packages/plugins/color-picker/admin/tsconfig.eslint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

packages/plugins/color-picker/admin/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "tsconfig/base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "noEmit": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

packages/plugins/color-picker/jest.config.front.js

@@ -2,5 +2,8 @@
 
 module.exports = {
   preset: '../../../jest-preset.front.js',
+  transform: {
+    '^.+\\.ts(x)?$': ['@swc/jest'],
+  },
   displayName: 'Color picker plugin',
 };

packages/plugins/color-picker/package.json

@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@testing-library/react": "14.0.0",
+    "@types/styled-components": "5.1.26",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "5.3.4",
@@ -30,7 +31,18 @@
     "react-router-dom": "5.3.4",
     "styled-components": "5.3.3"
   },
+  "files": [
+    "./dist",
+    "./admin",
+    "strapi-admin.js",
+    "strapi-server.js"
+  ],
   "scripts": {
+    "build": "run -T tsc -p server/tsconfig.json --outDir ./dist/server",
+    "build:ts": "run build",
+    "watch": "run -T tsc -w --preserveWatchOutput",
+    "clean": "run -T rimraf ./dist",
+    "prepublishOnly": "yarn clean && yarn build",
     "test:front": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js",
     "test:front:watch": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js --watchAll",
     "test:front:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js",

packages/plugins/color-picker/server/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: ['custom/back/typescript'],
+  parserOptions: {
+    project: ['./server/tsconfig.eslint.json'],
+  },
+};

packages/plugins/color-picker/server/index.js

@@ -1,7 +0,0 @@
-'use strict';
-
-const register = require('./register');
-
-module.exports = {
-  register,
-};

packages/plugins/color-picker/server/src/index.ts

@@ -0,0 +1,5 @@
+import { register } from './register';
+
+export default {
+  register,
+};

packages/plugins/color-picker/server/src/register.ts

@@ -1,6 +1,4 @@
-'use strict';
-
-module.exports = ({ strapi }) => {
+export const register = ({ strapi }: any) => {
   strapi.customFields.register({
     name: 'color',
     plugin: 'color-picker',

packages/plugins/color-picker/server/tsconfig.eslint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

packages/plugins/color-picker/server/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/base.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

packages/plugins/color-picker/strapi-admin.js

@@ -1,3 +1,3 @@
 'use strict';
 
-module.exports = require('./admin/src').default;
+module.exports = require('./admin/src/index.ts');

packages/plugins/color-picker/strapi-server.js

@@ -1,3 +1,3 @@
 'use strict';
 
-module.exports = require('./server');
+module.exports = require('./dist/server');

packages/providers/audit-logs-local/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/providers/email-amazon-ses/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/providers/email-mailgun/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/providers/email-nodemailer/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/providers/email-sendgrid/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/providers/email-sendmail/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/providers/upload-aws-s3/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/providers/upload-cloudinary/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/providers/upload-local/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

packages/utils/eslint-config-custom/back/typescript.js

@@ -14,7 +14,7 @@ module.exports = {
     strapi: false,
   },
   rules: {
-    ...require('./back').rules,
+    ...require('../back').rules,
     'node/no-unsupported-features/es-syntax': 'off',
     'node/no-missing-import': 'off',
     // TODO: The following rules from @strapi/eslint-config/typescript are disabled because they're causing problems we need to solve or fix

packages/utils/eslint-config-custom/front/typescript.js

@@ -0,0 +1,26 @@
+const path = require('path');
+
+module.exports = {
+  root: true,
+  // TODO: create a front typescript config in eslint-config and use it here
+  extends: [
+    'airbnb-typescript/base',
+    '../front',
+    'plugin:@typescript-eslint/recommended',
+    /*'plugin:@typescript-eslint/recommended-requiring-type-checking'*/
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    project: ['./tsconfig.eslint.json'],
+  },
+  rules: {
+    'react/jsx-filename-extension': [
+      1,
+      {
+        extensions: ['tsx'],
+      },
+    ],
+    'import/extensions': 'off',
+  },
+};

packages/utils/logger/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['custom/typescript'],
+  extends: ['custom/back/typescript'],
 };

yarn.lock

@@ -7864,6 +7864,7 @@ __metadata:
     "@strapi/helper-plugin": 4.11.7
     "@strapi/icons": 1.8.2
     "@testing-library/react": 14.0.0
+    "@types/styled-components": 5.1.26
     prop-types: ^15.8.1
     react: ^18.2.0
     react-colorful: 5.6.1
@@ -8970,7 +8971,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/hoist-non-react-statics@npm:^3.3.1":
+"@types/hoist-non-react-statics@npm:*, @types/hoist-non-react-statics@npm:^3.3.1":
   version: 3.3.1
   resolution: "@types/hoist-non-react-statics@npm:3.3.1"
   dependencies:
@@ -9531,6 +9532,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/styled-components@npm:5.1.26":
+  version: 5.1.26
+  resolution: "@types/styled-components@npm:5.1.26"
+  dependencies:
+    "@types/hoist-non-react-statics": "*"
+    "@types/react": "*"
+    csstype: ^3.0.2
+  checksum: 84f53b3101739b20d1731554fb7735bc2f3f5d050a8b392e9845403c8c8bbd729737d033978649f9195a97b557875b010d46e35a4538564a2d0dbcce661dbf76
+  languageName: node
+  linkType: hard
+
 "@types/tapable@npm:^1, @types/tapable@npm:^1.0.5":
   version: 1.0.8
   resolution: "@types/tapable@npm:1.0.8"