strapi-plugin-navigation 1.1.3 → 2.0.0-beta.4

package/README.md

@@ -1,36 +1,45 @@
-# Strapi - Navigation plugin
-
-<p align="center">
+<div align="center">
+  <h1>Strapi v4 - Navigation plugin - BETA</h1>
+  <p>Create consumable navigation with a simple and straigthforward visual builder.</p>
   <a href="https://www.npmjs.org/package/strapi-plugin-navigation">
-    <img src="https://img.shields.io/npm/v/strapi-plugin-navigation/latest.svg" alt="NPM Version" />
+    <img src="https://img.shields.io/github/package-json/v/VirtusLab-Open-Source/strapi-plugin-navigation/feat%252Fstrapi-v4-support?label=npm" alt="NPM Version" />
   </a>
   <a href="https://www.npmjs.org/package/strapi-plugin-navigation">
     <img src="https://img.shields.io/npm/dm/strapi-plugin-navigation.svg" alt="Monthly download on NPM" />
   </a>
   <a href="https://circleci.com/gh/VirtusLab/strapi-plugin-navigation">
-    <img src="https://circleci.com/gh/VirtusLab/strapi-plugin-navigation.svg?style=shield" alt="CircleCI" />
+    <img src="https://circleci.com/gh/VirtusLab-Open-Source/strapi-plugin-navigation/tree/feat%2Fstrapi-v4-support.svg?style=shield" alt="CircleCI" />
   </a>
   <a href="https://codecov.io/gh/VirtusLab/strapi-plugin-navigation">
-    <img src="https://codecov.io/gh/VirtusLab/strapi-plugin-navigation/coverage.svg?branch=master" alt="codecov.io" />
+    <img src="https://codecov.io/gh/VirtusLab/strapi-plugin-navigation/coverage.svg?branch=feat%2Fstrapi-v4-support" alt="codecov.io" />
   </a>
-</p>
+</div>
+
+---
 
-A plugin for [Strapi Headless CMS](https://github.com/strapi/strapi) that provides navigation / menu builder feature with their possibility to control the audience and different output structure renderers:
+Strapi Navigation Plugin provides a website navigation / menu builder feature for [Strapi Headless CMS](https://github.com/strapi/strapi) admin panel. Navigation has the possibility to control the audience and can be consumed by the website with different output structure renderers:
 
 - Flat
 - Tree (nested)
 - RFR (ready for handling by Redux First Router)
 
-<img src="public/assets/preview.png" alt="UI preview" />
+## ✨ Features
+
+- **Navigation Public API:** Simple and ready for use API endpoint for consuming the navigation structure you've created
+- **Visual builder:** Elegant and easy to use visual builder
+- **Any Content Type relation:** Navigation can by linked to any of your Content Types by default. Simply, you're controlling it and also limiting available content types by configuration props
+- **Customizable:** Possibility to customize the options like: available Content Types, Maximum level for "attach to menu", Additional fields (audience)
+- **[Audit log](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-audit-log):** integration with Strapi Molecules Audit Log plugin that provides changes track record
 
-### Versions
+
+## ⚙️ Versions
 
 - **Stable** - [v1.1.2](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation)
 - **Beta** - v4 support - [v2.0.0-beta.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation/tree/feat/strapi-v4-support)
 
-### ⏳ Installation
+## ⏳ Installation
 
-(Use **yarn** to install this plugin within your Strapi project (recommended). [Install yarn with these docs](https://yarnpkg.com/lang/en/docs/install/).)
+It's recommended to use **yarn** to install this plugin within your Strapi project. [You can install yarn with these docs](https://yarnpkg.com/lang/en/docs/install/).
 
 ```bash
 yarn add strapi-plugin-navigation@latest
@@ -51,69 +60,53 @@ yarn develop --watch-admin
 
 The **UI Navigation** plugin should appear in the **Plugins** section of Strapi sidebar after you run app again.
 
-
 Enjoy 🎉
 
-### 🖐 Requirements
+## 🖐 Requirements
 
-Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under <a href="https://strapi.io/documentation/v3.x/installation/cli.html#step-1-make-sure-requirements-are-met">Installation Requirements</a>.
+Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under <a href="https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/installation/cli.html#preparing-the-installation">Installation Requirements</a>.
 
 **Supported Strapi versions**:
 
-- Strapi v3.6.8 (recently tested)
-- Strapi v3.x
-
-(This plugin may work with the older Strapi versions, but these are not tested nor officially supported at this time.)
-
-**We recommend always using the latest version of Strapi to start your new projects**.
-
-## Features
-
-- **Navigation Public API:** Simple and ready for use API endpoint for getting the navigation structure you've created
-- **Visual builder:** Elegant and easy to use visual builder
-- **Any Content Type relation:** Navigation can by linked to any of your Content Types by default. Simply, you're controlling it and also limiting available content types by configuration props
-- **Customizable:** Possibility to customize the options like: available Content Types, Maximum level for "attach to menu", Additional fields (audience)
-- **[Audit log](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-audit-log):** integration with Strapi Molecules Audit Log plugin that provides changes track record
+- Strapi v4.0.5 (recently tested)
+- Strapi v4.x
 
+_This plugin is not working with v3.x._
 
-## Content Type model relation to Navigation Item
+It may or may not work with the older Strapi v4 versions, these are not tested nor officially supported at this time.
 
-We can define in `config/plugins.js`
-```js
-  navigation: {
-    ...
-    relatedContentTypes: [
-      'application::pages.pages'
-    ],
-    ...
-  },
-```
+**We recommend always using the latest version of Strapi to start your new projects**.
 
-## Configuration
-To setup the plugin properly we recommend to put following snippet as part of `config/plugins.js` or `config/<env>/plugins.js` file. If you've got already configurations for other plugins stores by this way, use just the `navigation` part within exising `plugins` item.
+## 🔧 Configuration
+Config for this plugin is stored as a part of `config/plugins.js` or `config/<env>/plugins.js` file. You can use following snippet to make sure that the config structure is correct. If you've got already configurations for other plugins stores by this way, you can use the `navigation` along with them. 
 
 ```js
-    ...
-      navigation: {
-        additionalFields: ['audience'],
-        allowedLevels: 2,
-        contentTypesNameFields: {
-          'blog_posts': ['altTitle'],
-          'pages': ['title'],
-        },
-        gql: { ... }
-      },
-    ...
+    module.exports = ({ env }) => ({
+        // ...
+        navigation: {
+            enabled: true,
+            config: {
+                additionalFields: ['audience'],
+                contentTypes: ['api::page.page'],
+                contentTypesNameFields: {
+                    'api::page.page': ['title']
+                },
+                allowedLevels: 2,
+                gql: {...},
+            }
+        }
+    });
 ```
 
 ### Properties
 - `additionalFields` - Additional fields: 'audience', more in the future
 - `allowedLevels` - Maximum level for which your're able to mark item as "Menu attached"
-- `contentTypesNameFields` - Definition of content type title fields like `'content_type_name': ['field_name_1', 'field_name_2']`, if not set titles are pulled from fields like `['title', 'subject', 'name']`
+- `contentTypes` - UIDs of related content types
+- `contentTypesNameFields` - Definition of content type title fields like `'api::<collection name>.<content type name>': ['field_name_1', 'field_name_2']`, if not set titles are pulled from fields like `['title', 'subject', 'name']`. **TIP** - Proper content type uid you can find in the URL of Content Manager where you're managing relevant entities like: `admin/content-manager/collectionType/< THE UID HERE >?page=1&pageSize=10&sort=Title:ASC&plugins[i18n][locale]=en`
 - `gql` - If you're using GraphQL that's the right place to put all necessary settings. More **[ here ](#gql-configuration)**
 
 ## GQL Configuration
-To properly configure GQL to work with navigation you should provide `gql` prop which should contain union types which will be used for define GQL response format for your data while fetching:
+Using navigation with GraphQL requires both plugins to be installed and working. You can find instalation guide for GraphQL plugin **[here](https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#graphql)**.  To properly configure GQL to work with navigation you should provide `gql` prop. This should contain union types that will be used to define GQL response format for your data while fetching:
 
 ```gql
 master: Int
@@ -121,11 +114,11 @@ items: [NavigationItem]
 related: NavigationRelated
 ```
 
-as follows:   
+This prop should look as follows:   
 
 ```js
 gql: {
-    navigationItemRelated: 'union NavigationRelated = <your GQL related entities>',
+    navigationItemRelated: ['<your GQL related content types>'],
 },
 ```
 
@@ -133,10 +126,10 @@ for example:
 
 ```js
 gql: {
-        navigationItemRelated: 'union NavigationRelated = Pages | UploadFile',
+    navigationItemRelated: ['Page', 'UploadFile'],
 },
 ```
-where `Pages` and `UploadFile` are your types to the **Content Types** you're referring by navigation items relations. 
+where `Page` and `UploadFile` are your type names for the **Content Types** you're referring by navigation items relations. 
 
 
 ## Public API Navigation Item model
@@ -209,13 +202,13 @@ where `Pages` and `UploadFile` are your types to the **Content Types** you're re
 
 ### Render
 
-`GET <host>/navigation/render/<idOrSlug>?type=<type>`
+`GET <host>/api/navigation/render/<idOrSlug>?type=<type>`
 
 Return a rendered navigation structure depends on passed type (`tree`, `rfr` or nothing to render as `flat/raw`).
 
 *Note: The ID of navigation by default is `1`, that's for future extensions and multi-navigation feature.*
 
-**Example URL**: `https://localhost:1337/navigation/render/1`
+**Example URL**: `https://localhost:1337/api/navigation/render/1`
 
 **Example response body**
 
@@ -244,7 +237,7 @@ Return a rendered navigation structure depends on passed type (`tree`, `rfr` or
 ]
 ```
 
-**Example URL**: `https://localhost:1337/navigation/render/1?type=tree`
+**Example URL**: `https://localhost:1337/api/navigation/render/1?type=tree`
 
 **Example response body**
 
@@ -280,7 +273,7 @@ Return a rendered navigation structure depends on passed type (`tree`, `rfr` or
 ]
 ```
 
-**Example URL**: `https://localhost:1337/navigation/render/1?type=rfr`
+**Example URL**: `https://localhost:1337/api/navigation/render/1?type=rfr`
 
 **Example response body**
 
@@ -371,30 +364,11 @@ For collection types it will be read from content type's attribute name `templat
 
 For single types a global name of this content type will be used as a template name or it can be set manually with an option named `templateName`.
 
-## Audit log
-If you would like to use the [Strapi Molecules Audit Log](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-audit-log) plugin you've to first install and then add in you `config/middleware.js` following section enable it:
-```js
-{
-    'audit-log': {
-          enabled: true,
-          exclude: [],
-          map: [
-            {
-              pluginName: 'navigation',
-              serviceName: 'navigation',
-              Class: Navigation,
-            },
-          ]
-        }
-}
-```
-As a last step you've to provide the Navigation class to let Audit Log use it. To not provide external & hard dependencies we've added the example of class code in the `examples/audit-log-integration.js` .
-
-## Examples
+## 🧩 Examples
 
 Live example of plugin usage can be found in the [VirtusLab Strapi Examples](https://github.com/VirtusLab/strapi-examples/tree/master/strapi-plugin-navigation) repository.
 
-## Q&A
+## 💬 Q&A
 
 ### Content Types
 
@@ -402,11 +376,11 @@ Live example of plugin usage can be found in the [VirtusLab Strapi Examples](htt
 
 **A:** As an authors of the plugin we're not supporting any editing of mentioned content types via built-in Strapi Content Manager. Plugin delivers highly customized & extended functionality which might be covered only by dedicated editor UI accessible via **Plugins Section > UI Navigation**. Only issues that has been recognized there, are in the scope of support we've providing.
 
-## Contributing
+## 🤝 Contributing
 
 Feel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome!
 
-## Community support
+## 👨‍💻 Community support
 
 For general help using Strapi, please refer to [the official Strapi documentation](https://strapi.io/documentation/). For additional help, you can use one of these channels to ask a question:
 
@@ -414,6 +388,6 @@ For general help using Strapi, please refer to [the official Strapi documentatio
 - [Slack - VirtusLab Open Source](https://virtuslab-oss.slack.com) We're present on a public channel #strapi-molecules
 - [GitHub](https://github.com/VirtusLab/strapi-plugin-navigation/issues) (Bug reports, Contributions, Questions and Discussions)
 
-## License
+## 📝 License
 
 [MIT License](LICENSE.md) Copyright (c) 2021 [VirtusLab Sp. z o.o.](https://virtuslab.com/) &amp; [Strapi Solutions](https://strapi.io/).

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

@@ -1,7 +1,6 @@
 import styled from "styled-components";
-import { Button } from "@buffetjs/styles";
-
-import { colors } from "strapi-helper-plugin";
+import { Box } from '@strapi/design-system/Box';
+import { Button } from "@strapi/design-system/Button";
 
 const EmptyView = styled.div`
   display: flex;
@@ -11,24 +10,16 @@ const EmptyView = styled.div`
   justify-content: center;
   padding-left: 2rem;
   padding-right: 2rem;
-  padding-bottom: ${(props) => (props.fixPosition ? "8rem" : 0)};
+  padding-bottom: "8rem" };
 
   font-size: 2rem;
   font-weight: 600;
-  color: ${colors.leftMenu.grey};
+  color: ${({ theme }) => theme.colors.neutral600};
   text-align: center;
 
-  svg {
-    margin-bottom: 1rem;
-  }
-
-  ${Button} {
-    margin-top: 2rem;
-
-    svg {
-      margin-bottom: 0;
-    }
-  }
+	> {
+		margin: 1rem;
+	}
 `;
 
 export default EmptyView;

package/admin/src/components/Item/ItemCardBadge/index.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { Badge } from '@strapi/design-system/Badge';
+
+const ItemCardBadge = styled(Badge)`
+		border: 1px solid ${({ theme, borderColor }) => theme.colors[borderColor]}
+`;
+
+export default ItemCardBadge;

package/admin/src/components/Item/ItemCardHeader/Wrapper.js

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { CardTitle } from '@strapi/design-system/Card';
+
+const CardItemTitle = styled(CardTitle)`
+	width: 100%;
+	
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	
+	color: ${({ theme }) => theme.colors.neutral800};
+	font-size: ${({ theme }) => theme.fontSizes[2]};
+	font-weight: ${({ theme }) => theme.fontWeights.bold};
+
+	> div > * {
+			margin: 0px ${({ theme }) => theme.spaces[1]};
+	}
+`;
+
+export default CardItemTitle;

package/admin/src/components/Item/ItemCardHeader/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+
+import { Flex } from '@strapi/design-system/Flex';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Typography } from '@strapi/design-system/Typography';
+import PencilIcon from '@strapi/icons/Pencil';
+import TrashIcon from '@strapi/icons/Trash';
+import RefreshIcon from '@strapi/icons/Refresh';
+
+import Wrapper from './Wrapper';
+import ItemCardBadge from '../ItemCardBadge';
+import { getTrad } from "../../../translations";
+
+const ItemCardHeader = ({ title, path, icon, removed, isExternal, isPublished, onItemRemove, onItemEdit, onItemRestore }) => {
+	const badgeColor = isPublished ? 'success' : 'secondary';
+	const { formatMessage } = useIntl();
+
+	return (
+		<Wrapper>
+			<Flex alignItems="center">
+				{icon}
+				<Typography variant="omega" fontWeight="bold">
+					{title}
+				</Typography>
+				<Typography variant="omega" fontWeight="bold" textColor='neutral500'>
+					{path}
+				</Typography>
+			</Flex>
+			<Flex alignItems="center">
+				{removed ?
+					<ItemCardBadge
+						borderColor={`danger200`}
+						backgroundColor={`danger100`}
+						textColor={`danger600`}
+					>
+						{formatMessage(getTrad("navigation.item.badge.removed"))}
+					</ItemCardBadge>
+					: !isExternal && <ItemCardBadge
+						borderColor={`${badgeColor}200`}
+						backgroundColor={`${badgeColor}100`}
+						textColor={`${badgeColor}600`}
+						className="action"
+					>
+						{formatMessage(getTrad(`navigation.item.badge.${isPublished ? 'published' : 'draft'}`))}
+					</ItemCardBadge>
+				}
+
+				<IconButton disabled={removed} onClick={onItemEdit} label="Edit" icon={<PencilIcon />} />
+				{removed ?
+					<IconButton onClick={onItemRestore} label="Restore" icon={<RefreshIcon />} /> :
+					<IconButton onClick={onItemRemove} label="Remove" icon={<TrashIcon />} />
+				}
+			</Flex>
+		</Wrapper>
+	);
+}
+
+export default ItemCardHeader;

package/admin/src/components/Item/Wrapper.js

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+position: relative;
+margin-top: ${({theme}) => theme.spaces[2]};
+margin-left: ${({ theme, level }) => level && theme.spaces[8]}};
+
+${({ level, theme, isLast }) => level && `
+	&::before {
+		${!isLast && 'content: "";'}
+		display: block;
+		top: ${theme.spaces[1]};
+		left: -24px;
+		position: absolute;
+		height: calc(100% + ${theme.spaces[2]});
+		width: 19px;
+		border: 0px solid transparent;
+		border-left: 4px solid ${theme.colors.neutral300};
+	}
+
+	&::after {
+		content: "";
+		display: block;
+		height: 22px;
+		width: 19px;
+		position: absolute;
+		top: ${theme.spaces[1]};
+		left: -${theme.spaces[6]};
+		
+		background: transparent;
+		border: 4px solid ${theme.colors.neutral300};
+		border-top: transparent;
+		border-right: transparent;
+		border-radius: 0 0 0 100%;
+	}
+`};
+`;
+
+export default Wrapper;