Init permission tabs

Signed-off-by: HichamELBSI <elabbassih@gmail.com>

packages/strapi-admin/admin/src/components/Roles/CollectionTypesPermissions/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Padded, Flex } from '@buffetjs/core';
+
+const CollectionTypesPermissions = () => (
+  <Padded top left right bottom size="lg">
+    <Flex justifyContent="center" alignItems="center">
+      COLLECTION TYPES PERMISSIONS COMMING SOON
+    </Flex>
+  </Padded>
+);
+
+export default CollectionTypesPermissions;

packages/strapi-admin/admin/src/components/Roles/PluginsPermissions/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Padded, Flex } from '@buffetjs/core';
+
+const PluginsPermissions = () => (
+  <Padded top left right bottom size="lg">
+    <Flex justifyContent="center" alignItems="center">
+      PLUGINS PERMISSIONS COMMING SOON
+    </Flex>
+  </Padded>
+);
+
+export default PluginsPermissions;

packages/strapi-admin/admin/src/components/Roles/SettingsPermissions/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Padded, Flex } from '@buffetjs/core';
+
+const SettingsPermissions = () => (
+  <Padded top left right bottom size="lg">
+    <Flex justifyContent="center" alignItems="center">
+      SETTINGS PERMISSIONS COMMING SOON
+    </Flex>
+  </Padded>
+);
+
+export default SettingsPermissions;

packages/strapi-admin/admin/src/components/Roles/SingleTypesPermissions/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Padded, Flex } from '@buffetjs/core';
+
+const SingleTypesPermissions = () => (
+  <Padded top left right bottom size="lg">
+    <Flex justifyContent="center" alignItems="center">
+      SINGLE TYPES PERMISSIONS COMMING SOON
+    </Flex>
+  </Padded>
+);
+
+export default SingleTypesPermissions;

packages/strapi-admin/admin/src/components/Roles/Tabs/Tab.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const Tab = styled.div`
+  flex: 1;
+  padding: 1rem;
+  text-align: center;
+  ${({ isActive, theme }) =>
+    isActive
+      ? {
+        borderTop: `2px solid ${theme.main.colors.blue}`,
+        backgroundColor: theme.main.colors.white,
+      }
+      : {
+        backgroundColor: '#f2f3f4',
+        cursor: 'pointer',
+      }}
+`;
+
+export default Tab;

packages/strapi-admin/admin/src/components/Roles/Tabs/TabsWrapper.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const TabsWrapper = styled.div`
+  display: block;
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  box-shadow: ${({ theme }) => `0px 2px 4px 0px ${theme.main.colors.darkGrey}`};
+`;
+
+export default TabsWrapper;

packages/strapi-admin/admin/src/components/Roles/Tabs/index.js

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Flex, Text } from '@buffetjs/core';
+import PropTypes from 'prop-types';
+
+import TabsWrapper from './TabsWrapper';
+import Tab from './Tab';
+
+const Tabs = ({ children, tabsLabel }) => {
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+
+  const handleSelectedTab = index => {
+    if (index !== selectedTabIndex) {
+      setSelectedTabIndex(index);
+    }
+  };
+
+  return (
+    <TabsWrapper>
+      <Flex alignItems="stretch">
+        {tabsLabel.map((tab, index) => (
+          <Tab
+            // eslint-disable-next-line react/no-array-index-key
+            key={`${tab}-${index}`}
+            onClick={() => handleSelectedTab(index)}
+            isActive={index === selectedTabIndex}
+          >
+            <Text fontWeight={index === selectedTabIndex ? 'bold' : 'semiBold'}>{tab}</Text>
+          </Tab>
+        ))}
+      </Flex>
+      {children && children[selectedTabIndex]}
+    </TabsWrapper>
+  );
+};
+
+Tabs.propTypes = {
+  children: PropTypes.node.isRequired,
+  tabsLabel: PropTypes.array.isRequired,
+};
+
+export default Tabs;

packages/strapi-admin/admin/src/components/Roles/index.js

@@ -1,3 +1,8 @@
 export { default as RoleDescription } from './RoleDescription';
 export { default as RoleListWrapper } from './RoleListWrapper';
 export { default as RoleRow } from './RoleRow';
+export { default as Tabs } from './Tabs';
+export { default as SingleTypesPermissions } from './SingleTypesPermissions';
+export { default as CollectionTypesPermissions } from './CollectionTypesPermissions';
+export { default as PluginsPermissions } from './PluginsPermissions';
+export { default as SettingsPermissions } from './SettingsPermissions';

packages/strapi-admin/admin/src/containers/Roles/CreatePage/index.js

@@ -8,6 +8,13 @@ import FormCard from './FormCard';
 import ButtonWithNumber from './ButtonWithNumber';
 import InputWrapper from './InputWrapper';
 import schema from './utils/schema';
+import {
+  Tabs,
+  CollectionTypesPermissions,
+  SingleTypesPermissions,
+  PluginsPermissions,
+  SettingsPermissions,
+} from '../../../components/Roles';
 
 const CreatePage = () => {
   const { formatMessage } = useIntl();
@@ -106,6 +113,15 @@ const CreatePage = () => {
               </InputWrapper>
             </Flex>
           </FormCard>
+          <Padded top size="md" />
+          <Padded top size="xs">
+            <Tabs tabsLabel={['Collection Types', 'Single Types', 'Plugins', 'Settings']}>
+              <CollectionTypesPermissions />
+              <SingleTypesPermissions />
+              <PluginsPermissions />
+              <SettingsPermissions />
+            </Tabs>
+          </Padded>
         </>
       )}
     </Formik>