Migrated to typescript, and new v5 plugin structure

Author: Zaydme

.gitignore

@@ -1,2 +1,138 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+############################
+# 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
+*.sqlite3
+
+
+############################
+# Misc.
+############################
+
+*#
+ssl
+.idea
+nbproject
+.tsbuildinfo
+.eslintcache
+.env
+
+
+############################
+# Strapi
+############################
+
+public/uploads/*
+!public/uploads/.gitkeep
+
+
+############################
+# Build
+############################
+
+dist
+build
+
+
+############################
+# Node.js
+############################
+
+lib-cov
+lcov.info
+pids
+logs
+results
 node_modules
+.node_history
+
+
+############################
+# Package managers
+############################
+
+.yarn/*
+!.yarn/cache
+!.yarn/unplugged
+!.yarn/patches
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+yarn-error.log
+
+
+############################
+# Tests
+############################
+
+coverage

.prettierignore

@@ -0,0 +1,2 @@
+dist
+coverage

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "endOfLine": "lf",
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

README.md

@@ -3,6 +3,10 @@
 A strapi custom field for selecting multiple options from a provided list of items.
 
 ### CHANGELOG
+**2.0.0**
+- Migrated to Strapi v5, and the new plugin structure
+- Now using @strapi/sdk-plugin
+- Migrated to TypeScript
 
 **1.2.2** Support colons in option values, only first colon is used as separator 
 

admin/custom.d.ts

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

admin/src/components/MultiSelect/MultiValueContainer.tsx

@@ -0,0 +1,23 @@
+import { Tag } from '@strapi/design-system';
+import { Cross } from '@strapi/icons';
+
+export default ({
+  selectProps,
+  data,
+}: {
+  selectProps: any;
+  data: {
+    value: string;
+    label: string;
+  };
+}) => {
+  const handleTagClick = (data: { value: string; label: string }) => (e: React.UIEvent<any>) => {
+    e.preventDefault();
+    selectProps.onChange(selectProps.value.filter((v: any) => v !== data));
+  };
+  return (
+    <Tag tabIndex={-1} icon={<Cross />} onClick={handleTagClick(data)}>
+      {data.label}
+    </Tag>
+  );
+};

admin/src/components/MultiSelect/ReactSelect.jsx

@@ -0,0 +1,49 @@
+import Select from 'react-select';
+import styled from 'styled-components';
+
+const ReactSelect = ({ components, styles, error, ariaErrorMessage, ...props }: any) => {
+  return (
+    <Select
+      menuPosition="fixed"
+      components={{
+        IndicatorSeparator: () => null,
+        LoadingIndicator: () => null,
+        ...components,
+      }}
+      aria-errormessage={error && ariaErrorMessage}
+      aria-invalid={!!error}
+      styles={{ ...styles }}
+      {...props}
+    />
+  );
+};
+
+const StyledReactSelect = styled(ReactSelect)`
+  .select-control {
+    height: auto;
+    background: ${({ theme }) => theme.colors.neutral0};
+    border: 1px solid ${({ theme }) => theme.colors.neutral200};
+
+    & > div:first-child {
+      padding: 4px;
+      gap: 4px;
+
+      & > div {
+        padding-left: 8px;
+      }
+    }
+
+    .select-multi-value-container {
+      margin-right: -8px;
+    }
+  }
+  .select-menu {
+    background: ${({ theme }) => theme.colors.neutral0};
+
+    .option-focused {
+      background: ${({ theme }) => theme.colors.neutral200};
+    }
+  }
+`;
+
+export default StyledReactSelect;