filter-button 0.2.2 → 1.0.0

package/README.md

@@ -2,13 +2,15 @@
 
 ## About
 
-![App Screenshot](https://github.com/kalpesh442266/Filter-Button/blob/master/assets/demo.gif)
+<!-- ![App Screenshot](https://github.com/kalpesh442266/Filter-Button/blob/master/assets/demo.gif) -->
 
-<!-- ![App Screenshot](./assets//demo.gif) -->
+![App Screenshot](./assets//demo.gif)
 
 This package provides a custom field for Strapi that lets you add a filter button in no time.
 
-Custom fields are supported since Strapi 4.4+ and offer powerful API to create highly customizable fields.
+> **Strapi 5** compatible. (For Strapi 4 use `filter-button@0.2.1`.)
+
+Custom fields offer a powerful API to create highly customizable fields.
 
 This plugin lets you view filtered data according to your configurations.
 
@@ -28,61 +30,95 @@ npm i filter-button
 yarn add filter-button
 ```
 
-Now we need to register plugin so strapi can use it. In order to do that we need to create (if not already created) ./config/plugins.js file and add entry to it.
+#### Using a local build (unpublished / linked)
+
+If you have the plugin checked out locally (e.g. as a sibling folder next to your Strapi app) instead of installing from NPM, first build it, then reference it with a `file:` dependency:
 
 ```bash
-module.exports = {
-    'filter-button': {
-        enabled: true,
-    },
+# in the plugin folder
+npm install
+npm run build
+```
+
+```jsonc
+// in your Strapi app's package.json
+"dependencies": {
+  "filter-button": "file:../Filter-Button"
 }
 ```
 
+```bash
+# in your Strapi app
+npm install
+```
+
+`npm install` symlinks the plugin into `node_modules/filter-button`. Note the `file:` path is machine-specific, so this is best for local development rather than committing to a shared repo.
+
+### Registering the plugin (optional)
+
+Because `filter-button` is a package dependency in your `package.json`, Strapi 5 auto-discovers and enables it — **no `config/plugins` entry is required** just to turn it on.
+
+You only need an entry in `./config/plugins.js` (or `./config/plugins.ts`) if you want to be explicit about it (recommended for discoverability), or to disable it (`enabled: false`):
+
+```js
+module.exports = {
+  'filter-button': {
+    enabled: true,
+  },
+};
+```
+
+If you use a TypeScript config that already exports other plugin settings, add `'filter-button'` **inside** the exported config object rather than a separate `module.exports` — a trailing `module.exports` will override `export default` and silently drop your other settings:
+
+```ts
+export default ({ env }) => ({
+  // ...other plugins...
+  'filter-button': {
+    enabled: true,
+  },
+});
+```
+
 ## Configuration
 
 #### create relations first for filter button to work
 
 if relation is many to many then add boolean `manyToMany:true` in configuration
 
-Add webpack.config.js file into src/admin and paste this content there.
-
-```bash
-'use strict';
-
-/* eslint-disable no-unused-vars */
-module.exports = (config, webpack) => {
-  config.plugins.push(
-    new webpack.DefinePlugin({
-      CONTENT_TYPES: JSON.stringify(
-        [
-          {
-            from: 'api::topic.topic', // collection where button will be added
-            to: 'api::card.card', // which collection you want to filter
-            filterBy: 'title', // field name by which you want to filter
-            attributeName: 'viewCards', //attribute name added while adding button
-            buttonTitle: 'View Cards', // title of button
-          },
-          {
-            from: 'api::category.category',
-            to: 'api::topic.topic',
-            filterBy: 'title',
-            attributeName: 'viewTopics',
-            buttonTitle: 'View Topics',
-          },
-          {
-            from: 'api::category.category', //adding multiple buttons for same collection
-            to: 'api::card.card',
-            filterBy: 'title',
-            attributeName: 'viewCards',
-            buttonTitle: 'View Cards',
-          }
-        ]
-      ),
-    })
-  )
-  return config;
+Strapi 5 uses **Vite** for the admin panel (webpack has been removed). Create (or edit) `src/admin/vite.config.js` in your Strapi app and expose your configuration through Vite's `define` option:
+
+```js
+const { mergeConfig } = require('vite');
+
+module.exports = (config) => {
+  return mergeConfig(config, {
+    define: {
+      CONTENT_TYPES: JSON.stringify([
+        {
+          from: 'api::topic.topic', // collection where button will be added
+          to: 'api::card.card', // which collection you want to filter
+          filterBy: 'title', // field name by which you want to filter
+          attributeName: 'viewCards', // attribute name added while adding button
+          buttonTitle: 'View Cards', // title of button
+        },
+        {
+          from: 'api::category.category',
+          to: 'api::topic.topic',
+          filterBy: 'title',
+          attributeName: 'viewTopics',
+          buttonTitle: 'View Topics',
+        },
+        {
+          from: 'api::category.category', // adding multiple buttons for same collection
+          to: 'api::card.card',
+          filterBy: 'title',
+          attributeName: 'viewCards',
+          buttonTitle: 'View Cards',
+        },
+      ]),
+    },
+  });
 };
-
 ```
 
 #### Then run build:

package/dist/admin/ButtonComponent-BtVaVTMf.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const designSystem = require("@strapi/design-system");
+const reactRouterDom = require("react-router-dom");
+const admin = require("@strapi/strapi/admin");
+const ButtonComponent = react.forwardRef(({ name }, ref) => {
+  const navigate = reactRouterDom.useNavigate();
+  const { contentType, form } = admin.unstable_useContentManagerContext();
+  const values = form?.values ?? {};
+  const uid = contentType?.uid;
+  const currentCollection = CONTENT_TYPES?.filter(
+    (data) => data?.from === uid && data?.attributeName === name
+  )[0];
+  const filterCards = () => {
+    if (!currentCollection) return;
+    const relationField = currentCollection?.manyToMany ? `${currentCollection?.from?.split(".")[1]}s` : currentCollection?.from?.split(".")[1];
+    navigate(
+      `/content-manager/collection-types/${currentCollection?.to}?page=1&pageSize=10&sort=${currentCollection?.filterBy}:ASC&filters[$and][0][${relationField}][${currentCollection?.filterBy}][$eq]=${values?.title}`
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { ref, paddingTop: 5, style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { style: { margin: "auto" }, size: "L", variant: "default", onClick: filterCards, children: currentCollection?.buttonTitle || "View" }) });
+});
+exports.default = ButtonComponent;

package/dist/admin/ButtonComponent-ggy5X7sG.mjs

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box, Button } from "@strapi/design-system";
+import { useNavigate } from "react-router-dom";
+import { unstable_useContentManagerContext } from "@strapi/strapi/admin";
+const ButtonComponent = forwardRef(({ name }, ref) => {
+  const navigate = useNavigate();
+  const { contentType, form } = unstable_useContentManagerContext();
+  const values = form?.values ?? {};
+  const uid = contentType?.uid;
+  const currentCollection = CONTENT_TYPES?.filter(
+    (data) => data?.from === uid && data?.attributeName === name
+  )[0];
+  const filterCards = () => {
+    if (!currentCollection) return;
+    const relationField = currentCollection?.manyToMany ? `${currentCollection?.from?.split(".")[1]}s` : currentCollection?.from?.split(".")[1];
+    navigate(
+      `/content-manager/collection-types/${currentCollection?.to}?page=1&pageSize=10&sort=${currentCollection?.filterBy}:ASC&filters[$and][0][${relationField}][${currentCollection?.filterBy}][$eq]=${values?.title}`
+    );
+  };
+  return /* @__PURE__ */ jsx(Box, { ref, paddingTop: 5, style: { width: "100%" }, children: /* @__PURE__ */ jsx(Button, { style: { margin: "auto" }, size: "L", variant: "default", onClick: filterCards, children: currentCollection?.buttonTitle || "View" }) });
+});
+export {
+  ButtonComponent as default
+};

package/dist/admin/en-B4KWt_jN.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const en = {};
+exports.default = en;

package/dist/admin/en-Byx4XI2L.mjs

@@ -0,0 +1,4 @@
+const en = {};
+export {
+  en as default
+};

package/dist/admin/fr-C8Qw4iPZ.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fr = {};
+exports.default = fr;

package/dist/admin/fr-hkSxFuzl.mjs

@@ -0,0 +1,4 @@
+const fr = {};
+export {
+  fr as default
+};

package/dist/admin/index.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const styledComponents = require("styled-components");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+const prefixPluginTranslations = (trad, pluginId2) => {
+  if (!pluginId2) {
+    throw new TypeError("pluginId can't be empty");
+  }
+  return Object.keys(trad).reduce((acc, current) => {
+    acc[`${pluginId2}.${current}`] = trad[current];
+    return acc;
+  }, {});
+};
+const name$1 = "filter-button";
+const strapi = { "name": "filter-button" };
+const pluginPkg = {
+  name: name$1,
+  strapi
+};
+const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, "");
+const Initializer = ({ setPlugin }) => {
+  const ref = react.useRef();
+  ref.current = setPlugin;
+  react.useEffect(() => {
+    ref.current(pluginId);
+  }, []);
+  return null;
+};
+const IconBox = styledComponents.styled(designSystem.Flex)`
+  /* Hard code color values */
+  /* to stay consistent between themes */
+  background-color: #f0f0ff; /* primary100 */
+  border: 1px solid #d9d8ff; /* primary200 */
+
+  svg > path {
+    fill: #4945ff; /* primary600 */
+  }
+`;
+const PluginIcon = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Filter, {}) });
+};
+const name = pluginPkg.strapi.name;
+const index = {
+  register(app) {
+    app.customFields.register({
+      name: "filterButton",
+      pluginId,
+      // the custom field is provided by this plugin
+      type: "string",
+      // the value is stored as a string
+      intlLabel: {
+        id: "filter-button-button-label",
+        defaultMessage: "Filter Button"
+      },
+      intlDescription: {
+        id: "filter-button-button-description",
+        defaultMessage: "Filter Data"
+      },
+      icon: PluginIcon,
+      // don't forget to create/import your icon component
+      components: {
+        Input: async () => Promise.resolve().then(() => require("./ButtonComponent-BtVaVTMf.js")).then((module2) => ({
+          default: module2.default
+        }))
+      },
+      options: {
+        // declare options here
+      }
+    });
+    app.registerPlugin({
+      id: pluginId,
+      initializer: Initializer,
+      isReady: false,
+      name
+    });
+  },
+  bootstrap(app) {
+  },
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map((locale) => {
+        return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => Promise.resolve().then(() => require("./en-B4KWt_jN.js")), "./translations/fr.json": () => Promise.resolve().then(() => require("./fr-C8Qw4iPZ.js")) }), `./translations/${locale}.json`, 3).then(({ default: data }) => {
+          return {
+            data: prefixPluginTranslations(data, pluginId),
+            locale
+          };
+        }).catch(() => {
+          return {
+            data: {},
+            locale
+          };
+        });
+      })
+    );
+    return Promise.resolve(importedTrads);
+  }
+};
+exports.default = index;

package/dist/admin/index.mjs

@@ -0,0 +1,117 @@
+import { useRef, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import { Flex } from "@strapi/design-system";
+import { Filter } from "@strapi/icons";
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+const prefixPluginTranslations = (trad, pluginId2) => {
+  if (!pluginId2) {
+    throw new TypeError("pluginId can't be empty");
+  }
+  return Object.keys(trad).reduce((acc, current) => {
+    acc[`${pluginId2}.${current}`] = trad[current];
+    return acc;
+  }, {});
+};
+const name$1 = "filter-button";
+const strapi = { "name": "filter-button" };
+const pluginPkg = {
+  name: name$1,
+  strapi
+};
+const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, "");
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef();
+  ref.current = setPlugin;
+  useEffect(() => {
+    ref.current(pluginId);
+  }, []);
+  return null;
+};
+const IconBox = styled(Flex)`
+  /* Hard code color values */
+  /* to stay consistent between themes */
+  background-color: #f0f0ff; /* primary100 */
+  border: 1px solid #d9d8ff; /* primary200 */
+
+  svg > path {
+    fill: #4945ff; /* primary600 */
+  }
+`;
+const PluginIcon = () => {
+  return /* @__PURE__ */ jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsx(Filter, {}) });
+};
+const name = pluginPkg.strapi.name;
+const index = {
+  register(app) {
+    app.customFields.register({
+      name: "filterButton",
+      pluginId,
+      // the custom field is provided by this plugin
+      type: "string",
+      // the value is stored as a string
+      intlLabel: {
+        id: "filter-button-button-label",
+        defaultMessage: "Filter Button"
+      },
+      intlDescription: {
+        id: "filter-button-button-description",
+        defaultMessage: "Filter Data"
+      },
+      icon: PluginIcon,
+      // don't forget to create/import your icon component
+      components: {
+        Input: async () => import("./ButtonComponent-ggy5X7sG.mjs").then((module) => ({
+          default: module.default
+        }))
+      },
+      options: {
+        // declare options here
+      }
+    });
+    app.registerPlugin({
+      id: pluginId,
+      initializer: Initializer,
+      isReady: false,
+      name
+    });
+  },
+  bootstrap(app) {
+  },
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map((locale) => {
+        return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => import("./en-Byx4XI2L.mjs"), "./translations/fr.json": () => import("./fr-hkSxFuzl.mjs") }), `./translations/${locale}.json`, 3).then(({ default: data }) => {
+          return {
+            data: prefixPluginTranslations(data, pluginId),
+            locale
+          };
+        }).catch(() => {
+          return {
+            data: {},
+            locale
+          };
+        });
+      })
+    );
+    return Promise.resolve(importedTrads);
+  }
+};
+export {
+  index as default
+};

package/dist/server/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const register = ({ strapi }) => {
+  strapi.customFields.register({
+    name: "filterButton",
+    plugin: "filter-button",
+    type: "string"
+  });
+};
+const bootstrap = ({ strapi }) => {
+};
+const index = {
+  register,
+  bootstrap
+};
+exports.default = index;

package/dist/server/index.mjs

@@ -0,0 +1,16 @@
+const register = ({ strapi }) => {
+  strapi.customFields.register({
+    name: "filterButton",
+    plugin: "filter-button",
+    type: "string"
+  });
+};
+const bootstrap = ({ strapi }) => {
+};
+const index = {
+  register,
+  bootstrap
+};
+export {
+  index as default
+};

package/package.json

@@ -1,38 +1,81 @@
-{
-  "name": "filter-button",
-  "version": "0.2.2",
-  "private": false,
-  "description": "Custom filter button plugin for strapi",
-  "strapi": {
-    "name": "filter-button",
-    "description": "Custom filter button plugin for strapi",
-    "kind": "plugin",
-    "displayName": "Filter Button"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/kalpesh442266/Filter-Button"
-  },
-  "keywords": [
-    "filter-button",
-    "strapi custom field",
-    "strapi filter button field"
-  ],
-  "dependencies": {},
-  "author": {
-    "name":"Kalpesh Rane"
-  },
-  "peerDependencies": {
-    "@strapi/strapi": "^4.4.0"
-  },
-  "maintainers": [
-    {
-      "name": "Kalpesh Rane"
-    }
-  ],
-  "engines": {
-    "node": ">=14.19.1 <=18.x.x",
-    "npm": ">=6.0.0"
-  },
-  "license": "MIT"
-}
+{
+  "name": "filter-button",
+  "version": "1.0.0",
+  "private": false,
+  "description": "Custom filter button plugin for strapi",
+  "strapi": {
+    "name": "filter-button",
+    "description": "Custom filter button plugin for strapi",
+    "kind": "plugin",
+    "displayName": "Filter Button"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kalpesh442266/Filter-Button"
+  },
+  "keywords": [
+    "filter-button",
+    "strapi custom field",
+    "strapi filter button field"
+  ],
+  "type": "commonjs",
+  "exports": {
+    "./package.json": "./package.json",
+    "./strapi-admin": {
+      "source": "./admin/src/index.js",
+      "import": "./dist/admin/index.mjs",
+      "require": "./dist/admin/index.js",
+      "default": "./dist/admin/index.js"
+    },
+    "./strapi-server": {
+      "source": "./server/src/index.js",
+      "import": "./dist/server/index.mjs",
+      "require": "./dist/server/index.js",
+      "default": "./dist/server/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "strapi-plugin build",
+    "watch": "strapi-plugin watch",
+    "watch:link": "strapi-plugin watch:link",
+    "verify": "strapi-plugin verify"
+  },
+  "dependencies": {
+    "@strapi/design-system": "^2.0.0-rc.14",
+    "@strapi/icons": "^2.0.0-rc.14",
+    "react-intl": "^6.6.2"
+  },
+  "devDependencies": {
+    "@strapi/sdk-plugin": "^6.0.0",
+    "@strapi/strapi": "^5.0.0",
+    "prettier": "^3.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.22.3",
+    "styled-components": "^6.1.8"
+  },
+  "author": {
+    "name": "Kalpesh Rane"
+  },
+  "peerDependencies": {
+    "@strapi/sdk-plugin": "^6.0.0",
+    "@strapi/strapi": "^5.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-router-dom": "^6.0.0",
+    "styled-components": "^6.0.0"
+  },
+  "maintainers": [
+    {
+      "name": "Kalpesh Rane"
+    }
+  ],
+  "engines": {
+    "node": ">=18.0.0 <=22.x.x",
+    "npm": ">=6.0.0"
+  },
+  "license": "MIT"
+}

package/admin/src/components/ButtonComponent/ButtonComponent.js

@@ -1,37 +0,0 @@
-/*
- *
- * HomePage
- *
- */
-import { Box, Button } from '@strapi/design-system';
-import React from 'react';
-import { useHistory } from "react-router-dom";
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-
-
-const ButtonComponent = ({ name }) => {
-    const history = useHistory();
-    const {
-        allLayoutData,
-        modifiedData
-    } = useCMEditViewDataManager();
-
-    const { uid } = allLayoutData.contentType;
-    const currentCollection = CONTENT_TYPES?.filter(data => { if (data?.from === uid && data?.attributeName === name) return data })[0]
-
-    const filterCards = () => {
-        history.push(`/content-manager/collectionType/${currentCollection?.to}?page=1&pageSize=10&sort=${currentCollection?.filterBy}:ASC&filters[$and][0][${currentCollection?.manyToMany ? currentCollection?.from?.split('.')[1] + 's' : currentCollection?.from?.split('.')[1]}][${currentCollection?.filterBy}][$eq]=${modifiedData?.title}`)
-    }
-
-    return (
-        <>
-            <Box paddingTop={5} style={{ width: '100%' }}>
-                <Button style={{ margin: 'auto' }} size="L" variant="default" onClick={filterCards}>
-                    {currentCollection?.buttonTitle || "View"}
-                </Button>
-            </Box>
-        </>
-    );
-};
-
-export default ButtonComponent;

package/admin/src/components/Initializer/index.js

@@ -1,26 +0,0 @@
-/**
- *
- * Initializer
- *
- */
-
-import { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import pluginId from '../../pluginId';
-
-const Initializer = ({ setPlugin }) => {
-  const ref = useRef();
-  ref.current = setPlugin;
-
-  useEffect(() => {
-    ref.current(pluginId);
-  }, []);
-
-  return null;
-};
-
-Initializer.propTypes = {
-  setPlugin: PropTypes.func.isRequired,
-};
-
-export default Initializer;

package/admin/src/components/PluginIcon/index.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Icon } from '@strapi/design-system/Icon';
-import { Flex } from '@strapi/design-system/Flex';
-import Filter from '@strapi/icons/Filter';
-
-const IconBox = styled(Flex)`
-  /* Hard code color values */
-  /* to stay consistent between themes */
-  background-color: #f0f0ff; /* primary100 */
-  border: 1px solid #d9d8ff; /* primary200 */
-
-  svg > path {
-    fill: #4945ff; /* primary600 */
-  }
-`;
-
-const PluginIcon = () => {
-  return (
-    <IconBox justifyContent="center" alignItems="center" width={7} height={6} hasRadius aria-hidden>
-      <Icon as={Filter} />
-    </IconBox>
-  );
-};
-
-export default PluginIcon;

package/admin/src/index.js

@@ -1,64 +0,0 @@
-import { prefixPluginTranslations } from '@strapi/helper-plugin';
-import pluginPkg from '../../package.json';
-import pluginId from './pluginId';
-import Initializer from './components/Initializer';
-import PluginIcon from './components/PluginIcon';
-
-const name = pluginPkg.strapi.name;
-
-export default {
-  register(app) {
-    app.customFields.register({
-      name: "filterButton",
-      pluginId: pluginId, // the custom field is created by a color-picker plugin
-      type: "string", // the color will be stored as a string
-
-      intlLabel: {
-        id: "filter-button-button-label",
-        defaultMessage: "Filter Button",
-      },
-      intlDescription: {
-        id: "filter-button-button-description",
-        defaultMessage: "Filter Data",
-      },
-      icon: PluginIcon, // don't forget to create/import your icon component 
-      components: {
-        Input: async () => import(/* webpackChunkName: "input-component" */ "./components/ButtonComponent/ButtonComponent.js"),
-      },
-      options: {
-        // declare options here
-      },
-    });
-    app.registerPlugin({
-      id: pluginId,
-      initializer: Initializer,
-      isReady: false,
-      name,
-    });
-  },
-
-  bootstrap(app) { },
-  async registerTrads({ locales }) {
-    const importedTrads = await Promise.all(
-      locales.map((locale) => {
-        return import(
-          /* webpackChunkName: "translation-[request]" */ `./translations/${locale}.json`
-        )
-          .then(({ default: data }) => {
-            return {
-              data: prefixPluginTranslations(data, pluginId),
-              locale,
-            };
-          })
-          .catch(() => {
-            return {
-              data: {},
-              locale,
-            };
-          });
-      })
-    );
-
-    return Promise.resolve(importedTrads);
-  },
-};

package/admin/src/pages/App/index.js

@@ -1,25 +0,0 @@
-/**
- *
- * This component is the skeleton around the actual pages, and should only
- * contain code that should be seen on all pages. (e.g. navigation bar)
- *
- */
-
-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import { NotFound } from '@strapi/helper-plugin';
-import pluginId from '../../pluginId';
-import HomePage from '../HomePage';
-
-const App = () => {
-  return (
-    <div>
-      <Switch>
-        <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
-        <Route component={NotFound} />
-      </Switch>
-    </div>
-  );
-};
-
-export default App;

package/admin/src/pages/HomePage/index.js

@@ -1,20 +0,0 @@
-/*
- *
- * HomePage
- *
- */
-
-import React from 'react';
-// import PropTypes from 'prop-types';
-import pluginId from '../../pluginId';
-
-const HomePage = () => {
-  return (
-    <div>
-      <h1>{pluginId}&apos;s HomePage</h1>
-      <p>Happy coding</p>
-    </div>
-  );
-};
-
-export default HomePage;

package/admin/src/pluginId.js

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

package/admin/src/translations/en.json

@@ -1 +0,0 @@
-{}

package/admin/src/translations/fr.json

@@ -1 +0,0 @@
-{}

package/admin/src/utils/axiosInstance.js

@@ -1,42 +0,0 @@
-/**
- * axios with a custom config.
- */
-
-import axios from 'axios';
-import { auth, wrapAxiosInstance } from '@strapi/helper-plugin';
-
-const instance = axios.create({
-  baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
-});
-
-instance.interceptors.request.use(
-  async (config) => {
-    config.headers = {
-      Authorization: `Bearer ${auth.getToken()}`,
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    };
-
-    return config;
-  },
-  (error) => {
-    Promise.reject(error);
-  }
-);
-
-instance.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    // whatever you want to do with the error
-    if (error.response?.status === 401) {
-      auth.clearAppStorage();
-      window.location.reload();
-    }
-
-    throw error;
-  }
-);
-
-const wrapper = wrapAxiosInstance(instance);
-
-export default wrapper;

package/admin/src/utils/getTrad.js

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

package/server/bootstrap.js

@@ -1,5 +0,0 @@
-'use strict';
-
-module.exports = ({ strapi }) => {
-  // bootstrap phase
-};

package/server/index.js

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

package/server/register.js

@@ -1,9 +0,0 @@
-'use strict';
-
-module.exports = ({ strapi }) => {
-  strapi.customFields.register({
-    name: 'filterButton',
-    plugin: 'filter-button',
-    type: 'string',
-  })
-};

package/strapi-admin.js

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

package/strapi-server.js

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