Feat: make compatible with latest version (#5)

Author: cp-sumi-k

README.md

@@ -1,11 +1,16 @@
+<p align="center"><a href="https://canopas.com/contact"><img src="./assets/banner.png"></a></p>
+
 <h1><strong>Tagsinput plugin for strapi</strong></h1>
 
 This plugin is used to add tagsinput in your strapi admin panel.
 Read more about it at [tagsinput guidence](https://blog.canopas.com/the-simple-guidance-how-to-add-tagsinput-customfield-plugin-in-strapi-b5d2b5af7c3b).
 
+<img src="./assets/demo.png">
+
 ## How to Install
 
 Using npm,
+
 ```
 npm i strapi-plugin-tagsinput
 ```
@@ -16,10 +21,30 @@ Using yarn,
 yarn add strapi-plugin-tagsinput
 ```
 
-## Demo
+## Showcase
+
 How to use tagsinput?
 
-![Tagsinput](https://github.com/canopas/strapi-plugin-tagsinput/assets/69897605/bb6f78f3-39de-4d29-bb1f-c60e019c79ae)
+<img src="./assets/showcase.gif">
+
+## Issues
+
+If you face any issues, feel free to submit them with detailed information.
+
+## Contributing
+
+Feel free to fork and make a Pull Request to this plugin project. All the inputs are warmly welcome!
+
+## Show your support ⭐️
+
+Add a star if this project helped you.
+
+## Credits
+
+This repository is owned and maintained by the [Canopas team](https://canopas.com/). If you are interested in building web apps, plugins or designing products, please let us know. We'd love to hear from you!
+
+<a href="https://canopas.com/contact"><img src="./assets/cta.png" width=300></a>
 
 ## Licence
+
 This repository licenced under [MIT](https://github.com/canopas/strapi-plugin-tagsinput/blob/main/LICENSE).

admin/src/components/Input/index.js

@@ -1,7 +1,7 @@
 import TagsInput from "react-tagsinput";
-import "react-tagsinput/react-tagsinput.css";
 import React, { useState } from "react";
 import PropTypes from "prop-types";
+import "../styles/global.css";
 
 import {
   Flex,
@@ -51,8 +51,7 @@ const Tags = ({
       // GenericInput calls formatMessage and returns a string for the error
       error={error}
       hint={description && formatMessage(description)}
-      required={required}
-    >
+      required={required}>
       <Flex direction="column" alignItems="stretch" gap={1}>
         <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>
         <Flex>

admin/src/components/styles/global.css

@@ -0,0 +1,55 @@
+:root {
+  --primary: rgb(151, 54, 232);
+  --secondary: rgb(255, 255, 255);
+}
+
+.react-tagsinput {
+  width: 100%;
+  background-color: var(--secondary);
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+  padding-left: 5px;
+  padding-top: 5px;
+}
+
+.react-tagsinput--focused {
+  outline: 3px solid var(--primary);
+}
+
+.react-tagsinput-tag {
+  background-color: var(--primary);
+  border-radius: 2px;
+  border: 1px solid var(--primary);
+  color: var(--secondary);
+  display: inline-block;
+  font-family: sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  margin-bottom: 5px;
+  margin-right: 5px;
+  padding: 5px;
+}
+
+.react-tagsinput-remove {
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.react-tagsinput-tag a::before {
+  content: " ×";
+}
+
+.react-tagsinput-input {
+  background: transparent;
+  border: 0;
+  color: #777;
+  font-family: sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  margin-bottom: 6px;
+  margin-top: 1px;
+  outline: none;
+  padding: 5px;
+  width: 80px;
+}

assets/banner.png

@@ -1,10 +1,10 @@
 {
   "name": "strapi-plugin-tagsinput",
-  "version": "1.0.1",
-  "description": "Add tagsinput in your strapi project",
+  "version": "1.0.3",
+  "description": "Tagsinput plugin for your strapi project",
   "strapi": {
     "name": "tagsinput",
-    "description": "Add tagsinput in your strapi project",
+    "description": "Tagsinput plugin for your strapi project",
     "kind": "plugin",
     "displayName": "Tagsinput"
   },
@@ -13,35 +13,35 @@
     "url": "git+https://github.com/canopas/strapi-plugin-tagsinput.git"
   },
   "dependencies": {
-    "@babel/preset-react": "^7.18.6",
-    "@strapi/design-system": "^1.6.3",
-    "@strapi/helper-plugin": "^4.6.0",
-    "@strapi/icons": "^1.6.3",
-    "prop-types": "^15.7.2",
-    "react-tagsinput": "^3.20.1"
+    "@babel/preset-react": "^7.23.3",
+    "@strapi/design-system": "^1.14.1",
+    "@strapi/helper-plugin": "^4.20.2",
+    "@strapi/icons": "^1.14.1",
+    "prop-types": "^15.8.1",
+    "react-tagsinput": "^3.20.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.21.5",
-    "@babel/core": "^7.21.8",
-    "@babel/preset-env": "^7.21.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@babel/cli": "^7.23.9",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^5.3.4",
-    "styled-components": "^5.3.6"
+    "styled-components": "^5.3.11"
   },
   "peerDependencies": {
-    "@strapi/strapi": "^4.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@strapi/strapi": "^4.20.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^5.3.4",
-    "styled-components": "^5.3.6"
+    "styled-components": "^5.3.11"
   },
   "author": "Canopas",
   "maintainers": [
     "Canopas"
   ],
   "engines": {
-    "node": ">=14.19.1 <=18.x.x",
+    "node": ">=14.19.1 <=20.x.x",
     "npm": ">=6.0.0"
   },
   "license": "MIT",