Orfium · panvourtsis · Jun 26, 2024 · Jun 19, 2024 · Jun 26, 2024 · Jun 26, 2024
diff --git a/.gitignore b/.gitignore
@@ -31,3 +31,6 @@ yarn-error.log*
 .vscode/
 
 /typeDocs
+.yalc
+/yalc.lock
+/rollup.config-1715595703115.mjs
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -6,13 +6,17 @@ module.exports = {
   transform: {
     '^.+\\.[tj]sx?$': 'ts-jest',
   },
+  transformIgnorePatterns: [
+    '<rootDir>/node_modules/(?!lodash-es)'
+  ],
   moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx'],
   moduleDirectories: ['<rootDir>/src', 'node_modules'],
   moduleNameMapper: {
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     '\\.svg$': '<rootDir>/__mocks__/fileMock.tsx',
     '~/(.*)': '<rootDir>/src/$1',
     '__mocks__/(.*)': '<rootDir>/__mocks__/$1',
+    "^lodash-es$": "lodash"
   },
   setupFilesAfterEnv: [`<rootDir>/setup-jest.ts`],
   collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.stories.{ts,tsx,js,jsx,mdx,md}'],

diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "@commitlint/config-conventional": "^16.2.4",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "@orfium/ictinus": "^4.80.0-alpha.0",
+    "@orfium/ictinus": "5.7.0-rc.20",
     "@rollup/plugin-typescript": "^8.3.2",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
@@ -84,7 +84,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "@orfium/ictinus": "^4.71.3",
+    "@orfium/ictinus": "^5.0.0",
     "@sentry/browser": "^7.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"

diff --git a/src/providers/Toolbox/Toolbox.style.ts b/src/providers/Toolbox/Toolbox.style.ts
@@ -17,7 +17,7 @@ export const LoadingContent = styled.div`
   display: flex;
   align-items: center;
   column-gap: ${rem(10)};
-  font-size: ${({ theme }) => theme.typography.fontSizes['16']};
+  font-size: ${({ theme }) => theme.globals.typography.fontSize.get("4")};
 `;
 
 export const Box = styled.div`

diff --git a/src/providers/Toolbox/Toolbox.tsx b/src/providers/Toolbox/Toolbox.tsx
@@ -1,4 +1,4 @@
-import { Button, Loader } from '@orfium/ictinus';
+import { Button, ProgressIndicator } from '@orfium/ictinus';
 import * as Sentry from '@sentry/browser';
 import dayjs from 'dayjs';
 import { ReactNode, useEffect } from 'react';
@@ -107,7 +107,7 @@ function AuthenticationWrapper({ children }: { children: ReactNode }) {
     return (
       <Wrapper data-testid={'orfium-auth-loading'}>
         <LoadingContent>
-          Loading... <Loader type={'spinner'} />
+          Loading... <ProgressIndicator type={'circular'} />
         </LoadingContent>
       </Wrapper>
     );
@@ -121,7 +121,7 @@ function AuthenticationWrapper({ children }: { children: ReactNode }) {
         <Box>
           <div>OR</div>
         </Box>
-        <Button onClick={logout} type={'primary'}>
+        <Button onClick={logout} htmlType={'primary'}>
           Logout
         </Button>
       </Wrapper>
@@ -136,7 +136,7 @@ function AuthenticationWrapper({ children }: { children: ReactNode }) {
         <Box>
           <div>OR</div>
         </Box>
-        <Button onClick={logout} type={'primary'}>
+        <Button onClick={logout} htmlType={'primary'}>
           Logout
         </Button>
       </Wrapper>

diff --git a/src/ui/ErrorFallback/ErrorFallback.tsx b/src/ui/ErrorFallback/ErrorFallback.tsx
@@ -1,8 +1,7 @@
-import { Button } from '@orfium/ictinus';
+import { Box, Button } from '@orfium/ictinus';
 //* using logoutAuth because error fallback is outside of providers */
 import { logoutAuth } from '~/utils/auth';
 import {
-  Box,
   ContentWrapper,
   ErrorContainer,
   ErrorCover,
@@ -25,16 +24,16 @@ const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
             </div>
           </Box>
 
-          <Box>
-            <Button onClick={resetErrorBoundary} type={'primary'}>
+          <Box justifyContent={'center'} display={'flex'} m={'7'}>
+            <Button onClick={resetErrorBoundary} htmlType={'primary'}>
               Try again
             </Button>
           </Box>
 
           <div>OR</div>
 
-          <Box>
-            <Button onClick={logoutAuth} type={'link'}>
+          <Box justifyContent={'center'} display={'flex'} m={'7'}>
+            <Button onClick={logoutAuth} htmlType={'link'}>
               Logout
             </Button>
           </Box>

diff --git a/src/ui/FlippableArrow/FlippableArrow.styles.ts b/src/ui/FlippableArrow/FlippableArrow.styles.ts
@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
-import { transition } from '@orfium/ictinus/dist/theme/functions.js';
+import { transition } from '@orfium/ictinus';
 
 export const IconWrapper = styled.span<{ expanded: boolean }>`
   perspective: 1000px;
   position: relative;
 
-  > span {
+  > * {
     ${transition(0.2)};
     transform-style: preserve-3d;
     transform: ${({ expanded }) => (expanded ? `rotateX(180deg) ` : `rotateX(0)`)};

diff --git a/src/ui/Navigation/common.styles.ts b/src/ui/Navigation/common.styles.ts
@@ -1,20 +1,18 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Theme } from '@orfium/ictinus';
-import { flexCenter, transition } from '@orfium/ictinus/dist/theme/functions.js';
-import { getFocus } from '@orfium/ictinus/dist/theme/states/index.js';
+import { Theme, flexCenter, transition } from '@orfium/ictinus';
 import { rem } from 'polished';
 
 export function getGlobalNavWidth(theme: Theme) {
-  return `calc(7 * ${theme.spacing.sm})`; // 56px
+  return `calc(7 * ${theme.globals.spacing.get('4')})`; // 56px
 }
 
 export const menuItemStyle = (theme: Theme) => css`
   height: ${rem(44)};
   color: ${theme.utils.getColor('darkGrey', 850)};
-  font-size: ${theme.typography.fontSizes['14']};
-  font-weight: ${theme.typography.weights.medium};
-  padding: 0 ${theme.spacing.sm};
+  font-size: ${theme.globals.typography.fontSize.get('3')};
+  font-weight: ${theme.globals.typography.fontWeight.get('medium')};
+  padding: 0 ${theme.globals.spacing.get('4')};
   border: 0 solid transparent;
   display: flex;
   justify-content: flex-start;
@@ -39,15 +37,16 @@ export const menuItemStyle = (theme: Theme) => css`
   }
 
   &:focus-visible {
-    outline: ${getFocus({ theme }).styleOutline};
+    // @TODO fix this
+    outline: #c813d5 auto 0.0625rem;
   }
 `;
 
 export const MenuIcon = styled.div<{ hidden?: boolean }>`
   position: relative;
   ${transition(0.2)};
   ${flexCenter};
-  margin-right: ${({ theme }) => theme.spacing.sm};
+  margin-right: ${({ theme }) => theme.globals.spacing.get('4')};
   width: ${rem(32)};
   height: ${rem(32)};
   border-radius: 50%;

diff --git a/src/ui/Navigation/components/Drawer/Drawer.styles.ts b/src/ui/Navigation/components/Drawer/Drawer.styles.ts
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { transition } from '@orfium/ictinus/dist/theme/functions.js';
+import { transition } from '@orfium/ictinus';
 import { rem } from 'polished';
 import { getGlobalNavWidth, menuItemStyle } from '~/ui/Navigation/common.styles';
 
@@ -9,7 +9,7 @@ export const DrawerContainer = styled.div<{
 }>`
   ${transition(0.2, 'width')};
   width: ${({ expanded }) => (expanded ? rem(252) : 0)};
-  background-color: ${({ theme }) => theme.palette.white};
+  background-color: ${({ theme }) => theme.globals.oldColors.white};
   position: ${({ isDesktop }) => (isDesktop ? 'relative' : 'absolute')};
   left: ${({ theme, isDesktop }) => (isDesktop ? 0 : getGlobalNavWidth(theme))};
   flex-shrink: 0;
@@ -36,45 +36,45 @@ export const OrgSwitcherWrapper = styled.div`
 `;
 
 export const NavHeader = styled.h2`
-  font-size: ${({ theme }) => `${theme.typography.fontSizes['18']}`};
-  font-weight: ${({ theme }) => `${theme.typography.weights.bold}`};
-  line-height: ${({ theme }) => `calc(7 * ${theme.spacing.xsm}`});
+  font-size: ${({ theme }) => `${theme.globals.typography.fontSize.get('5')}`};
+  font-weight: ${({ theme }) => `${theme.globals.typography.fontWeight.get('bold')}`};
+  line-height: ${({ theme }) => `calc(7 * ${theme.globals.spacing.get('3')}`});
   color: ${({ theme }) => theme.utils.getColor('blue', 600)};
   flex-shrink: 0;
-  margin: 0 0 ${({ theme }) => theme.spacing.sm} 0;
+  margin: 0 0 ${({ theme }) => theme.globals.spacing.get('4')} 0;
   white-space: nowrap;
   overflow: hidden;
 `;
 
 export const ExtrasContainer = styled.div`
   border-top: 1px solid ${({ theme }) => theme.utils.getColor('lightGrey', 200)};
-  padding: ${({ theme }) => `${theme.spacing.lg} 0`};
+  padding: ${({ theme }) => `${theme.globals.spacing.get('8')} 0`};
   overflow: auto;
 
   //Stick the scrollbar to the edge
   box-sizing: border-box;
-  padding-right: ${({ theme }) => `${theme.spacing.md}`};
-  width: calc(100% + ${({ theme }) => `${theme.spacing.md}`});
+  padding-right: ${({ theme }) => `${theme.globals.spacing.get('6')}`};
+  width: calc(100% + ${({ theme }) => `${theme.globals.spacing.get('6')}`});
 `;
 
 export const ExtrasSection = styled.div`
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.spacing.sm};
+  gap: ${({ theme }) => theme.globals.spacing.get('4')};
 `;
 
 export const ExtrasSectionTitle = styled.h2`
-  font-size: ${({ theme }) => `${theme.typography.fontSizes['12']}`};
-  font-weight: ${({ theme }) => `${theme.typography.weights.bold}`};
-  line-height: ${({ theme }) => theme.spacing.md});
+  font-size: ${({ theme }) => `${theme.globals.typography.fontSize.get('2')}`};
+  font-weight: ${({ theme }) => `${theme.globals.typography.fontWeight.get('bold')}`};
+  line-height: ${({ theme }) => theme.globals.spacing.get('6')});
   color: ${({ theme }) => theme.utils.getColor('blue', 600)};
   text-transform: uppercase;
   margin: 0;
 `;
 
 export const ExtrasSectionMenuItem = styled.a`
   ${({ theme }) => menuItemStyle(theme)};
-  font-weight: ${({ theme }) => theme.typography.weights.regular};
+  font-weight: ${({ theme }) => theme.globals.typography.fontWeight.get('regular')};
 
   > span {
     transform: scale(1);
@@ -89,7 +89,7 @@ export const ExtrasSectionMenuItem = styled.a`
 `;
 
 export const NavElementsContainer = styled.div`
-  padding: ${({ theme }) => `${rem(10)} ${theme.spacing.md} 0`};
+  padding: ${({ theme }) => `${rem(10)} ${theme.globals.spacing.get('6')} 0`};
   display: flex;
   flex-direction: column;
   flex-grow: 1;

diff --git a/src/ui/Navigation/components/Drawer/Navigation/Navigation.styles.ts b/src/ui/Navigation/components/Drawer/Navigation/Navigation.styles.ts
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { transition } from '@orfium/ictinus/dist/theme/functions.js';
+import { transition } from "@orfium/ictinus";
 import { rem } from 'polished';
 
 export const NavigationContainer = styled.div<{ hasExtras: boolean }>`
@@ -9,9 +9,9 @@ export const NavigationContainer = styled.div<{ hasExtras: boolean }>`
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
-  gap: ${({ theme }) => theme.spacing.sm};
+  gap: ${({ theme }) => theme.globals.spacing.get("4")};
   overflow: auto;
-  padding-bottom: ${({ theme }) => theme.spacing.lg};
+  padding-bottom: ${({ theme }) => theme.globals.spacing.get("8")};
   max-height: ${({ hasExtras }) => (hasExtras ? `calc(100% - ${rem(184)})` : '')};
 
   // handle scrolling
@@ -20,8 +20,8 @@ export const NavigationContainer = styled.div<{ hasExtras: boolean }>`
 
   //Stick the scrollbar to the edge
   box-sizing: border-box;
-  padding-right: ${({ theme }) => `${theme.spacing.md}`};
-  width: calc(100% + ${({ theme }) => `${theme.spacing.md}`});
+  padding-right: ${({ theme }) => `${theme.globals.spacing.get("6")}`};
+  width: calc(100% + ${({ theme }) => `${theme.globals.spacing.get("6")}`});
 
   .menu-item-text,
   .submenu-item-text {

diff --git a/src/ui/Navigation/components/Drawer/Navigation/components/MenuItem/MenuItem.styles.ts b/src/ui/Navigation/components/Drawer/Navigation/components/MenuItem/MenuItem.styles.ts
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { flexCenter, transition } from '@orfium/ictinus/dist/theme/functions.js';
+import { flexCenter, transition } from "@orfium/ictinus";
 import { rem } from 'polished';
 import { menuItemStyle } from '~/ui/Navigation/common.styles';
 import { NavLinkWithStatePassthrough } from '~/utils/NavLinkWithStatePassthrough';

diff --git a/src/ui/Navigation/components/Drawer/Navigation/components/MenuItem/MenuItem.tsx b/src/ui/Navigation/components/Drawer/Navigation/components/MenuItem/MenuItem.tsx
@@ -1,6 +1,4 @@
-import { ExpandCollapse, Icon, Theme, useTypeColorToColorMatch } from '@orfium/ictinus';
-import { AcceptedIconNames } from '@orfium/ictinus/dist/components/Icon/types';
-import { BASE_SHADE } from '@orfium/ictinus/dist/theme/palette.js';
+import { AcceptedIconNames, ExpandCollapse, Icon, Theme } from '@orfium/ictinus';
 import React, { useMemo } from 'react';
 import { useRouteMatch } from 'react-router-dom';
 import FlippableArrow from '~/ui/FlippableArrow';
@@ -30,9 +28,7 @@ function MenuItemContent(props: {
 }) {
   const { theme, item, expanded = false, isSubMenu = false } = props;
   const match = useRouteMatch(item.url);
-  const { calculateColorBetweenColorAndType } = useTypeColorToColorMatch();
 
-  const { shade } = calculateColorBetweenColorAndType('', 'primary');
   const isCurrent = !!match;
   const hasSubMenus = item.children && item.children.length > 0;
   const color = isCurrent
@@ -44,18 +40,14 @@ function MenuItemContent(props: {
   return (
     <React.Fragment>
       <MenuIcon theme={theme} hidden={isSubMenu ? (isCurrent ? false : true) : false}>
-        {isSubMenu ? (
-          <Bullet color={color} />
-        ) : (
-          <Icon name={iconName} color={color} size={16} variant={isCurrent ? shade : BASE_SHADE} />
-        )}
+        {isSubMenu ? <Bullet color={color} /> : <Icon name={iconName} color={color} size={16} />}
       </MenuIcon>
       <MenuItemText theme={theme} color={color} className={'menu-item-text'}>
         {item.text}
       </MenuItemText>
       {hasSubMenus ? (
         <ArrowContainer theme={theme} open={expanded}>
-          <FlippableArrow expanded={expanded} color={color} size={10} />
+          <FlippableArrow expanded={expanded} color={color} size={18} />
         </ArrowContainer>
       ) : null}
     </React.Fragment>
@@ -76,7 +68,8 @@ export function ExpandableMenuItem(props: MenuItemProps) {
   return (
     <ExpandCollapseWrapper theme={theme} matched={!!match}>
       <ExpandCollapse
-        expanded={expanded}
+        // @ts-ignore
+        isExpanded={expanded}
         onChange={() => setExpanded((state) => !state)}
         textAndControl={(handleClick) => {
           return (

diff --git a/src/ui/Navigation/components/GlobalNav/GlobalNav.styles.ts b/src/ui/Navigation/components/GlobalNav/GlobalNav.styles.ts
@@ -9,7 +9,7 @@ import { getGlobalNavWidth } from '~/ui/Navigation/common.styles';
 export const Wrapper = styled.div`
   width: ${({ theme }) => getGlobalNavWidth(theme)};
   display: flex;
-  flex-basis: calc(7 * ${({ theme }) => `${theme.spacing.sm}`}); // 56px
+  flex-basis: calc(7 * ${({ theme }) => `${theme.globals.spacing.get("4")}`}); // 56px
   flex-direction: column;
   flex-shrink: 0;
   background-color: #151447;
@@ -33,8 +33,8 @@ export const IconsContainer = styled.div`
   flex-direction: column;
   flex: 1;
   align-items: center;
-  padding: ${({ theme }) => `${theme.spacing.sm} 0`};
-  gap: ${({ theme }) => `${theme.spacing.md} 0`};
+  padding: ${({ theme }) => `${theme.globals.spacing.get("4")} 0`};
+  gap: ${({ theme }) => `${theme.globals.spacing.get("6")} 0`};
 `;
 
 export const AppIconWrapper = styled.div`
@@ -47,8 +47,8 @@ export const AppIconWrapper = styled.div`
 export const AppIcon = (theme: Theme) => css`
   background-color: #ffffff10;
   border-radius: 4px;
-  height: ${theme.spacing.xl};
-  width: ${theme.spacing.xl};
+  height: ${theme.globals.spacing.get("9")};
+  width: ${theme.globals.spacing.get("9")};
   display: flex;
   align-items: center;
   justify-content: center;