chore: add new svgs, update package.json and move some components around

package.json

@@ -19,17 +19,18 @@
     "axios": "^0.21.4",
     "axios-mock-adapter": "^1.19.0",
     "jwt-decode": "^3.1.2",
+    "polished": "^4.2.2",
     "react-error-boundary": "^3.1.4",
-    "zustand": "^4.0.0-rc.1",
-    "react-router-dom": "^5.3.1"
+    "react-router-dom": "^5.3.1",
+    "zustand": "^4.0.0-rc.1"
   },
   "devDependencies": {
     "@amanda-mitchell/semantic-release-npm-multiple": "^3.5.0",
     "@commitlint/cli": "^16.2.4",
     "@commitlint/config-conventional": "^16.2.4",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "@orfium/ictinus": "^4.71.3",
+    "@orfium/ictinus": "^4.80.0-alpha.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.2",
     "@semantic-release/changelog": "^6.0.1",
@@ -89,8 +90,8 @@
     "documentation": "cd documentation && yarn start",
     "documentation:build": "cd documentation && yarn install && yarn build",
     "build": "rimraf ./dist/types && npm run build:esm && npm run build:cjs",
-    "build:esm": "rimraf ./dist/esm && tsc -p tsconfig.prod.json --module esnext --outDir dist/esm && copyfiles -f ./src/assets/* ./dist/esm/assets/",
-    "build:cjs": "rimraf ./dist/cjs && tsc -p tsconfig.prod.json --module commonjs --outDir dist/cjs && copyfiles -f ./src/assets/* ./dist/cjs/assets/",
+    "build:esm": "rimraf ./dist/esm && tsc -p tsconfig.prod.json --module esnext --outDir dist/esm && copyfiles -u 1 ./src/assets/* ./src/assets/products/* ./dist/esm/",
+    "build:cjs": "rimraf ./dist/cjs && tsc -p tsconfig.prod.json --module commonjs --outDir dist/cjs && copyfiles -u 1 ./src/assets/* ./src/assets/products/* ./dist/cjs/",
     "yalc:push": "yalc publish --push",
     "watch": "tsc-watch --noClear -p ./tsconfig.json --onSuccess \"yarn yalc:push\"",
     "lint": "eslint './src/**/*.{ts,tsx}'",

src/authentication/Authentication.tsx → src/authentication/components/Authentication/Authentication.tsx

@@ -1,48 +1,39 @@
-import { Button, Loader, ThemeProvider } from '@orfium/ictinus';
+import { Button, Loader } from '@orfium/ictinus';
 import * as Sentry from '@sentry/browser';
-import React, { useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import { orfiumIdBaseInstance } from '../request';
-import useOrganization, { Organization } from '../store/organizations';
+import { orfiumIdBaseInstance } from '../../../request';
+import useOrganization, { Organization } from '../../../store/organizations';
+import ErrorFallback from '../../../ui/ErrorFallback/ErrorFallback';
+import { config } from '../../config';
+import { AuthenticationProvider, useAuthentication } from '../../context';
 import { Box, LoadingContent, Wrapper } from './Authentication.style';
-import ErrorFallback from './components/ErrorFallback/ErrorFallback';
-import { TopBar, TopBarProps } from './components/TopBar/TopBar';
-import { config } from './config';
-import { AuthenticationProvider, useAuthentication } from './context';
-
-type AuthenticationSubComponents = {
-  TopBar: React.FC<TopBarProps>;
-};
 
 /*
  * The component that uses the AuthenticationProvider.
  * All the logic is on the Authentication
  */
-const Authentication: React.FC & AuthenticationSubComponents = ({ children }) => {
+function Authentication({ children }: { children: ReactNode }) {
   return (
-    <ThemeProvider>
-      {/*
-      // @ts-ignore @TODO when react type will go to 18 this will be fixed */}
-      <ErrorBoundary
-        FallbackComponent={ErrorFallback}
-        onError={(error) => {
-          Sentry.captureException(error);
-        }}
-      >
-        <AuthenticationProvider>
-          <AuthenticationWrapper>{children}</AuthenticationWrapper>
-        </AuthenticationProvider>
-      </ErrorBoundary>
-    </ThemeProvider>
+    // @ts-ignore @TODO when react type will go to 18 this will be fixed
+    <ErrorBoundary
+      FallbackComponent={ErrorFallback}
+      onError={(error) => {
+        Sentry.captureException(error);
+      }}
+    >
+      <AuthenticationProvider>
+        <AuthenticationWrapper>{children}</AuthenticationWrapper>
+      </AuthenticationProvider>
+    </ErrorBoundary>
   );
-};
-Authentication.TopBar = TopBar;
+}
 
 /*
- * This is the main component that is wrapped on the authentication.
+ * This is the main component that is wrapped in the authentication.
  */
-const AuthenticationWrapper: React.FunctionComponent = ({ children }) => {
+function AuthenticationWrapper({ children }: { children: ReactNode }) {
   const {
     isLoading,
     isAuthenticated,
@@ -143,6 +134,6 @@ const AuthenticationWrapper: React.FunctionComponent = ({ children }) => {
   }
 
   return <>{children}</>;
-};
+}
 
 export default Authentication;

src/authentication/components/Authentication/index.ts

@@ -0,0 +1,2 @@
+export * from './Authentication';
+export { default } from './Authentication';

src/authentication/index.ts

@@ -1,7 +1,3 @@
-import Authentication from './Authentication';
-import { TopBarProps } from './components/TopBar/TopBar';
-import { useAuthentication, AuthenticationProvider } from './context';
-// note: TopBar is part of the Authentication as Authentication.TopBar so there is no need to import/export here
-
-export { TopBarProps, Authentication, useAuthentication, AuthenticationProvider };
+export { default as Authentication } from './components/Authentication';
+export { AuthenticationProvider, useAuthentication } from './context';
 export * from './types';

src/index.ts

@@ -14,5 +14,6 @@ const useOrganization = () =>
 export * from './authentication';
 export * from './request';
 export * from './routing';
+export * from './ui';
 export type { Organization };
 export { useOrganization };

src/authentication/components/ErrorFallback/ErrorFallback.tsx → src/ui/ErrorFallback/ErrorFallback.tsx

@@ -1,8 +1,7 @@
 import { Button } from '@orfium/ictinus';
-
+import ErrorCoverImg from '../../assets/error_cover.svg';
 //* using logoutAuth because error fallback is outside of providers */
-import ErrorCoverImg from '../../../assets/error_cover.svg';
-import { logoutAuth } from '../../context';
+import { logoutAuth } from '../../authentication/context';
 import {
   Box,
   ContentWrapper,
@@ -11,7 +10,7 @@ import {
   TechInfoTitle,
   TechInfoWrapper,
   Wrapper,
-} from './ErrorFallback.style';
+} from './ErrorFallback.styles';
 
 const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
   return (

src/authentication/components/Menu/Menu.style.ts → src/ui/Navigation/components/ClientSelector/ClientSelector.styles.ts

@@ -8,28 +8,60 @@ import { rem } from '@orfium/ictinus/dist/theme/utils';
 export const Wrapper = styled.div`
   position: relative;
   display: inline-block;
+  width: 100%;
 `;
 export const Button = styled.button`
   position: relative;
   color: ${({ textColor }: { textColor: string }) => textColor};
   border: none;
-  display: flex;
   font-size: ${({ theme }) => theme.typography.fontSizes['14']};
+  display: flex;
   align-items: center;
-  padding: 0;
+  background-color: transparent;
+  width: 100%;
+  padding: ${({ theme }) => `0 ${theme.spacing.md}`};
+  transition: background-color 0.15s ease;
+  cursor: pointer;
+  height: calc(9 * ${({ theme }) => `${theme.spacing.sm}`});
+
+  :hover {
+    background-color: ${({ theme }) => `${theme.utils.getColor('lightGrey', 50)}`};
+  }
 
   > span {
     padding-right: ${({ theme }) => theme.spacing.sm};
     display: inline-block;
   }
 `;
 
-export const Tag = styled.span<{ backgroundColor: string; textColor: string }>`
+export const ButtonTextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: ${({ theme }) => `${theme.spacing.xsm}`};
+`;
+
+export const ButtonContentWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export const ChevronWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${({ theme }) => `${theme.spacing.lg}`};
+  align-self: start;
+`;
+
+export const Tag = styled.span<{ textColor: string }>`
   font-size: ${({ theme }) => theme.typography.fontSizes[12]};
   padding: ${({ theme }) => theme.spacing.xsm};
-  background-color: ${({ backgroundColor }) => backgroundColor};
+  background-color: ${({ theme }) => theme.utils.getColor('lightGrey', 100)};
   color: ${({ textColor }) => textColor};
   border-radius: ${rem(2)};
+  align-self: start;
 `;
 export const Option = styled.span<{ menuPosition: MenuPositionAllowed }>`
   ${({ theme, menuPosition }) => optionsStyle({ menuPosition })(theme)}

src/authentication/components/Menu/Menu.tsx → src/ui/Navigation/components/ClientSelector/ClientSelector.tsx

@@ -1,19 +1,27 @@
-import { Icon, List, useTheme } from '@orfium/ictinus';
-import * as React from 'react';
-
+import { List, useTheme } from '@orfium/ictinus';
 import ClickAwayListener from '@orfium/ictinus/dist/components/utils/ClickAwayListener';
 import { MenuPositionAllowed } from '@orfium/ictinus/dist/components/utils/DropdownOptions';
-import { Button, Option, Tag, Wrapper } from './Menu.style';
+import { ReactNode, useState } from 'react';
+import FlippableArrow from '../../../FlippableArrow';
+import {
+  Button,
+  ButtonContentWrapper,
+  ButtonTextWrapper,
+  ChevronWrapper,
+  Option,
+  Tag,
+  Wrapper,
+} from './ClientSelector.styles';
 
 export type Props = {
   /** Items that are being declared as menu options */
   items?: string[];
   /** A callback that is being triggered when an items has been clicked */
   onSelect: (option: string) => void;
   /** The text of the button to show - defaults to "More" */
-  buttonText: React.ReactNode;
+  buttonText: ReactNode;
   /** The text of the tag to show - defaults to undefined */
-  tagText: React.ReactNode;
+  tagText: ReactNode;
   /** Define if the button is in disabled state */
   disabled?: boolean;
   /** Menu position when open */
@@ -24,7 +32,7 @@ export type TestProps = {
   dataTestId?: string;
 };
 
-const Menu: React.FC<Props & TestProps> = (props) => {
+function ClientSelector(props: Props & TestProps) {
   const {
     items,
     disabled,
@@ -34,23 +42,25 @@ const Menu: React.FC<Props & TestProps> = (props) => {
     dataTestId,
     tagText,
   } = props;
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
   const theme = useTheme();
   const textColor = theme.utils.getColor('blue', 600);
-  const backgroundColor = theme.utils.getColor('lightGrey', 100);
 
   return (
     <ClickAwayListener onClick={() => setOpen(false)}>
       <Wrapper data-testid={dataTestId}>
         <Button disabled={disabled} textColor={textColor} onClick={() => setOpen((open) => !open)}>
-          <span>{buttonText}</span>{' '}
-          <Icon name={open ? 'triangleUp' : 'triangleDown'} size={11} color={textColor} />
+          <ButtonContentWrapper>
+            <ButtonTextWrapper>
+              <span>{buttonText}</span>
+              {tagText && <Tag textColor={textColor}>{tagText}</Tag>}
+            </ButtonTextWrapper>
+            <ChevronWrapper>
+              <FlippableArrow expanded={open} color={textColor} size={11} />
+            </ChevronWrapper>
+          </ButtonContentWrapper>
         </Button>
-        {tagText && (
-          <Tag backgroundColor={backgroundColor} textColor={textColor}>
-            {tagText}
-          </Tag>
-        )}
+
         {open && (
           <Option menuPosition={menuPosition}>
             {items && (
@@ -68,6 +78,6 @@ const Menu: React.FC<Props & TestProps> = (props) => {
       </Wrapper>
     </ClickAwayListener>
   );
-};
+}
 
-export default Menu;
+export default ClientSelector;

src/ui/Navigation/components/ClientSelector/index.ts

@@ -0,0 +1 @@
+export { default } from './ClientSelector';