Feature - Marketplace Pages

src/assets/index.js

@@ -13,6 +13,11 @@ export {
   ReactComponent as MarketplaceComponent,
 } from './Marketplace.svg';
 
+export {
+  default as MarketplaceColorful,
+  ReactComponent as MarketplaceColorfulComponent,
+} from './MarketplaceColorful.svg';
+
 export { default as Flow } from './Flow.svg';
 export { default as FlowHover } from './FlowHover.svg';
 export { default as LoadingJupyter } from './LoadingJupyter.gif';

src/components/MainSider/MainMenu/index.js

@@ -3,19 +3,25 @@ import { Menu } from 'antd';
 import PropTypes from 'prop-types';
 
 const MainMenu = ({ className, itemsList, selectedItems, handleItemClick }) => {
-  // ! The code below may be changing a prop value. We should fix this
-  const selectedItem = selectedItems[0];
-  if (selectedItem === '/' || selectedItem.includes('/projetos')) {
-    selectedItems[0] = '/projetos';
-  } else if (selectedItem.includes('/tarefas')) {
-    selectedItems[0] = '/tarefas';
-  }
+  const getSelectedItems = () => {
+    const [firstItem] = selectedItems;
+
+    if (firstItem === '/' || firstItem.includes('/projetos')) {
+      return ['/projetos'];
+    } else if (firstItem.includes('/marketplace')) {
+      return ['/marketplace'];
+    } else if (firstItem.includes('/tarefas')) {
+      return ['/tarefas'];
+    }
+
+    return selectedItems;
+  };
 
   return (
     <Menu
       theme='dark'
       className={className}
-      selectedKeys={selectedItems}
+      selectedKeys={getSelectedItems()}
       onClick={(e) => handleItemClick(e.key)}
     >
       {itemsList.map(({ icon, title, path }) => (

src/components/MainSider/MainMenu/itemsMenu.js

@@ -4,6 +4,7 @@ import {
   BuildOutlined,
   ExperimentOutlined,
   PartitionOutlined,
+  ShoppingOutlined,
 } from '@ant-design/icons';
 
 const itemsMenu = [
@@ -27,6 +28,11 @@ const itemsMenu = [
     title: 'JupyterLab',
     path: '/jupyterlab',
   },
+  {
+    icon: <ShoppingOutlined />,
+    title: 'Marketplace',
+    path: '/marketplace',
+  },
 ];
 
 export default itemsMenu;

src/components/MarketplaceTaskItem/MarketplaceTaskItemBox/MarketplaceTaskItemBox.component.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { MARKETPLACE_TASK_CATEGORIES } from 'configs';
+
+import './MarketplaceTaskItemBox.style.less';
+
+const MarketplaceTaskItemBox = ({
+  header,
+  footer,
+  onClick,
+  children,
+  tabIndex,
+  className,
+  taskCategory,
+  borderDirection,
+}) => {
+  const borderDirectionClass = `marketplace-task-item-box-${borderDirection}`;
+
+  const getColor = () => {
+    return (
+      MARKETPLACE_TASK_CATEGORIES[taskCategory]?.color ||
+      MARKETPLACE_TASK_CATEGORIES.DATASETS.color
+    );
+  };
+
+  return (
+    <div
+      className={`marketplace-task-item-box ${className} ${borderDirectionClass}`}
+      role='button'
+      onKeyPress={null}
+      onClick={onClick}
+      tabIndex={tabIndex}
+    >
+      <div
+        style={{ background: getColor() }}
+        className='marketplace-task-item-box-border'
+      />
+
+      <div className='marketplace-task-item-box-content'>
+        <div className='marketplace-task-item-box-content-header'>{header}</div>
+        <div className='marketplace-task-item-box-content-body'>{children}</div>
+        <div className='marketplace-task-item-box-content-footer'>{footer}</div>
+      </div>
+    </div>
+  );
+};
+
+MarketplaceTaskItemBox.propTypes = {
+  header: PropTypes.node,
+  footer: PropTypes.node,
+  onClick: PropTypes.func,
+  children: PropTypes.node,
+  tabIndex: PropTypes.number,
+  className: PropTypes.string,
+  taskCategory: PropTypes.oneOf(Object.keys(MARKETPLACE_TASK_CATEGORIES)),
+  borderDirection: PropTypes.oneOf(['left', 'top']),
+};
+
+MarketplaceTaskItemBox.defaultProps = {
+  header: null,
+  footer: null,
+  onClick: null,
+  children: null,
+  tabIndex: -1,
+  className: '',
+  taskCategory: MARKETPLACE_TASK_CATEGORIES.DATASETS.key,
+  borderDirection: 'top',
+};
+
+export default MarketplaceTaskItemBox;

src/components/MarketplaceTaskItem/MarketplaceTaskItemBox/MarketplaceTaskItemBox.style.less

@@ -0,0 +1,57 @@
+.marketplace-task-item-box {
+  border-radius: 5px;
+  border: 1px solid #595959;
+  background: white;
+  overflow: hidden;
+  outline: none;
+  transition: box-shadow 0.2s ease-in-out;
+
+  &:hover {
+    box-shadow: 0px 4px 4px 0px #00000040;
+  }
+
+  .marketplace-task-item-box-border {
+    overflow: hidden;
+  }
+
+  .marketplace-task-item-box-content {
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    height: 100%;
+
+    .marketplace-task-item-box-content-header {
+      margin-bottom: 16px;
+    }
+
+    .marketplace-task-item-box-content-body {
+      flex: 1;
+      margin-bottom: 16px;
+    }
+  }
+
+  &.marketplace-task-item-box-top {
+    display: flex;
+    flex-direction: column;
+
+    .marketplace-task-item-box-border {
+      height: 6px;
+      min-height: 6px;
+      max-height: 6px;
+      width: 100%;
+      border-bottom: 1px solid #595959;
+    }
+  }
+
+  &.marketplace-task-item-box-left {
+    display: flex;
+    align-items: stretch;
+
+    .marketplace-task-item-box-border {
+      width: 6px;
+      min-width: 6px;
+      max-width: 6px;
+      border-right: 1px solid #595959;
+    }
+  }
+}

src/components/MarketplaceTaskItem/MarketplaceTaskItemBox/index.js

@@ -0,0 +1,3 @@
+import MarketplaceTaskItemBox from './MarketplaceTaskItemBox.component';
+
+export default MarketplaceTaskItemBox;

src/components/MarketplaceTaskItem/MarketplaceTaskItemDescription/MarketplaceTaskItemDescription.component.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './MarketplaceTaskItemDescription.style.less';
+
+const MarketplaceTaskItemDescription = ({ children }) => {
+  return <div className='marketplace-task-item-description'>{children}</div>;
+};
+
+MarketplaceTaskItemDescription.propTypes = {
+  children: PropTypes.node,
+};
+
+MarketplaceTaskItemDescription.defaultProps = {
+  children: null,
+};
+
+export default MarketplaceTaskItemDescription;

src/components/MarketplaceTaskItem/MarketplaceTaskItemDescription/MarketplaceTaskItemDescription.style.less

@@ -0,0 +1,4 @@
+.marketplace-task-item-description {
+  font-size: 14px;
+  line-height: 22px;
+}

src/components/MarketplaceTaskItem/MarketplaceTaskItemDescription/index.js

@@ -0,0 +1,3 @@
+import MarketplaceTaskItemDescription from './MarketplaceTaskItemDescription.component';
+
+export default MarketplaceTaskItemDescription;

src/components/MarketplaceTaskItem/MarketplaceTaskItemHeader/MarketplaceTaskItemHeader.component.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Avatar, Typography } from 'antd';
+
+import './MarketplaceTaskItemHeader.style.less';
+
+const MarketplaceTaskItemHeader = ({
+  name,
+  userId,
+  userName,
+  imageSrc,
+  avatarColor,
+}) => {
+  const handleClick = (e) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <div className='marketplace-task-item-header'>
+      <Avatar
+        className='marketplace-task-item-header-avatar'
+        style={{ backgroundColor: avatarColor }}
+        src={imageSrc}
+        alt={name}
+        size={48}
+      >
+        {name.charAt(0)}
+      </Avatar>
+
+      <div className='marketplace-task-item-header-data'>
+        <Typography.Title level={5}>{name}</Typography.Title>
+
+        <Link
+          onClick={handleClick}
+          to={`/marketplace/autor/${userId}`}
+          component={Typography.Link}
+        >
+          {userName}
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+MarketplaceTaskItemHeader.propTypes = {
+  name: PropTypes.string,
+  userId: PropTypes.string,
+  userName: PropTypes.string,
+  imageSrc: PropTypes.string,
+  avatarColor: PropTypes.string,
+};
+
+MarketplaceTaskItemHeader.defaultProps = {
+  name: '',
+  userId: '',
+  userName: '',
+  imageSrc: '',
+  avatarColor: undefined,
+};
+
+export default MarketplaceTaskItemHeader;

src/components/MarketplaceTaskItem/MarketplaceTaskItemHeader/MarketplaceTaskItemHeader.style.less

@@ -0,0 +1,13 @@
+.marketplace-task-item-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  .marketplace-task-item-header-data {
+    padding: 0 16px;
+
+    > * {
+      margin: 0;
+    }
+  }
+}

src/components/MarketplaceTaskItem/MarketplaceTaskItemHeader/index.js

@@ -0,0 +1,3 @@
+import MarketplaceTaskItemHeader from './MarketplaceTaskItemHeader.component';
+
+export default MarketplaceTaskItemHeader;

src/components/MarketplaceTaskItem/MarketplaceTaskItemInlineData/MarketplaceTaskItemInlineData.component.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './MarketplaceTaskItemInlineData.style.less';
+import { TASK_CATEGORIES } from 'configs';
+
+const MarketplaceTaskItemInlineData = ({ taskType, taskCategory }) => {
+  const inlineDataArray = [];
+
+  if (taskType) {
+    inlineDataArray.push(['Tipo:', taskType]);
+  }
+
+  if (taskCategory) {
+    const taskCategoryName = TASK_CATEGORIES[taskCategory]?.name;
+    inlineDataArray.push(['Categoria:', taskCategoryName || taskCategory]);
+  }
+
+  return (
+    <div className='marketplace-task-item-inline-data'>
+      {inlineDataArray.map((inlineData, index) => {
+        const canShowDivider = index + 1 < inlineDataArray.length;
+        const dataWithLabel = inlineData.join(' ');
+        const dividerClassName = 'marketplace-task-item-inline-data-divider';
+
+        return (
+          <span key={index}>
+            <span>{dataWithLabel}</span>
+            {canShowDivider && <span className={dividerClassName}>|</span>}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+MarketplaceTaskItemInlineData.propTypes = {
+  taskCategory: PropTypes.string,
+  taskType: PropTypes.string,
+};
+
+MarketplaceTaskItemInlineData.defaultProps = {
+  taskCategory: '',
+  taskType: '',
+};
+
+export default MarketplaceTaskItemInlineData;

src/components/MarketplaceTaskItem/MarketplaceTaskItemInlineData/MarketplaceTaskItemInlineData.style.less

@@ -0,0 +1,8 @@
+.marketplace-task-item-inline-data {
+  display: inline;
+  color: #595959;
+
+  .marketplace-task-item-inline-data-divider {
+    margin: 0 6px;
+  }
+}

src/components/MarketplaceTaskItem/MarketplaceTaskItemInlineData/index.js

@@ -0,0 +1,3 @@
+import MarketplaceTaskItemInlineData from './MarketplaceTaskItemInlineData.component';
+
+export default MarketplaceTaskItemInlineData;