Blueprint JS removed, css fixes, sidebar is now animated, popover had…

… padding reduced.
qoretechnologies · Feb 26, 2021 · e6befac · e6befac
1 parent 84bbd02
commit e6befac
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 144 deletions.
diff --git a/__tests__/notifications.test.tsx b/__tests__/notifications.test.tsx
@@ -1,4 +1,3 @@
-import { Button } from '@blueprintjs/core';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import React, { useContext } from 'react';
 import { ReqoreNotificationsContext, ReqoreUIProvider } from '../src/index';
@@ -7,7 +6,7 @@ const AddButton = (props: any) => {
   const { addNotification } = useContext(ReqoreNotificationsContext);
 
   return (
-    <Button
+    <button
       id='add-notification'
       onClick={() =>
         addNotification({
@@ -20,15 +19,15 @@ const AddButton = (props: any) => {
       }
     >
       Add Notification
-    </Button>
+    </button>
   );
 };
 
 const UpdateButton = (props: any) => {
   const { addNotification } = useContext(ReqoreNotificationsContext);
 
   return (
-    <Button
+    <button
       id='update-notification'
       onClick={() =>
         addNotification({
@@ -40,7 +39,7 @@ const UpdateButton = (props: any) => {
       }
     >
       Update Notification
-    </Button>
+    </button>
   );
 };
 

diff --git a/package.json b/package.json
@@ -62,7 +62,6 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
-    "@blueprintjs/core": "^3.36.0",
     "@popperjs/core": "^2.6.0",
     "@types/lodash": "^4.14.166",
     "classnames": "^2.2.6",

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -22,13 +22,13 @@ const StyledIconWrapper = styled.span<{ margin?: 'right' | 'left' }>`
   ${({ margin }) =>
     margin &&
     css`
-    margin-${margin}: 5px;
+    margin-${margin}: 6px;
   `}
 `;
 
 const ReqoreIcon = ({
   icon,
-  size = '16px',
+  size = '17px',
   className,
   color,
   margin,

diff --git a/src/components/InternalPopover/index.tsx b/src/components/InternalPopover/index.tsx
@@ -63,14 +63,18 @@ const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
   }
 `;
 
-const StyledPopoverContent = styled.div`
+const StyledPopoverContent = styled.div<{ isString?: boolean }>`
   width: 100%;
   height: 100%;
-  padding: 10px;
+  padding: ${({ isString }) => (isString ? '8px' : '5px')};
   z-index: 20;
   position: relative;
   background-color: ${({ theme }) => theme.popover?.main || theme.main};
   border-radius: 3.5px;
+
+  .reqore-popover-text {
+    font-size: 14px;
+  }
 `;
 
 export interface IReqoreInternalPopoverProps {
@@ -129,17 +133,19 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
           style={styles.arrow}
           data-popper-arrow
         />
-        <StyledPopoverContent>
-          {React.Children.map(content, (child) => {
-            if (isString(child)) {
-              return child;
-            }
-
-            return React.cloneElement(child, {
-              _insidePopover: true,
-              _popoverId: id,
-            });
-          })}
+        <StyledPopoverContent isString={isString(content)}>
+          {isString(content) ? (
+            <span className='reqore-popover-text'>{content}</span>
+          ) : (
+            <>
+              {React.Children.map(content, (child) => {
+                return React.cloneElement(child, {
+                  _insidePopover: true,
+                  _popoverId: id,
+                });
+              })}
+            </>
+          )}
         </StyledPopoverContent>
       </StyledPopoverWrapper>
     </ReqoreThemeProvider>

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -18,6 +18,18 @@ const StyledReqoreLayoutWrapper = styled.div<{
   width: 100%;
   height: 100%;
   overflow: hidden;
+  font-size: 14px;
+
+  * {
+    font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular',
+      'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+      Helvetica, Arial, sans-serif;
+    box-sizing: border-box;
+  }
+
+  a {
+    text-decoration: none;
+  }
 
   ${({ withSidebar, theme }) => css`
     flex-flow: ${withSidebar ? 'row' : 'column'};

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -77,6 +77,7 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
   .sidebarScroll {
     flex: 1;
   }
+  transition: all 0.1s ease-in-out;
 
   &.expanded {
     min-width: 180px !important;

diff --git a/src/containers/UIProvider.tsx b/src/containers/UIProvider.tsx
@@ -26,13 +26,11 @@ const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({
 
   return (
     <ThemeContext.Provider value={{ ...merge(_defaultTheme, _theme) }}>
-      <ReqoreNotifications position={notificationsPosition}>
-        <PopoverProvider>
-          <ReqoreLayoutWrapper withSidebar={withSidebar}>
-            {children}
-          </ReqoreLayoutWrapper>
-        </PopoverProvider>
-      </ReqoreNotifications>
+      <ReqoreLayoutWrapper withSidebar={withSidebar}>
+        <ReqoreNotifications position={notificationsPosition}>
+          <PopoverProvider>{children}</PopoverProvider>
+        </ReqoreNotifications>
+      </ReqoreLayoutWrapper>
     </ThemeContext.Provider>
   );
 };

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,3 @@
-import '@blueprintjs/core/lib/css/blueprint.css';
-
 export { default as ReqoreBreadcrumbs } from './components/Breadcrumbs';
 export { default as ReqoreBreadcrumbsItem } from './components/Breadcrumbs/item';
 export { default as ReqoreContent } from './components/Content';

diff --git a/src/stories/Notifications/Interactive.stories.tsx b/src/stories/Notifications/Interactive.stories.tsx
@@ -1,4 +1,3 @@
-import { Button } from '@blueprintjs/core';
 import { Meta, Story } from '@storybook/react/types-6-0';
 import React, { useContext } from 'react';
 import ReqoreNotification, {
@@ -16,7 +15,7 @@ const AddingButton = ({ id, onClick, onClose, onFinish }: any) => {
   const { addNotification } = useContext(ReqoreNotificationsContext);
 
   return (
-    <Button
+    <button
       onClick={() =>
         addNotification({
           title: 'Created notification',
@@ -31,15 +30,15 @@ const AddingButton = ({ id, onClick, onClose, onFinish }: any) => {
       }
     >
       Add notification
-    </Button>
+    </button>
   );
 };
 
 const UpdatingButton = ({ id }) => {
   const { addNotification } = useContext(ReqoreNotificationsContext);
 
   return (
-    <Button
+    <button
       onClick={() =>
         addNotification({
           content: 'I have just updated!',
@@ -51,7 +50,7 @@ const UpdatingButton = ({ id }) => {
       }
     >
       Update notification
-    </Button>
+    </button>
   );
 };