@sonardigital/carbon-ui 1.1.18

package/src/components/layout/Dropdown/components/DropdownPopover.tsx

@@ -0,0 +1,35 @@
+import { Popover, PopoverProps } from '@mui/material';
+import React from 'react';
+import { useDropdownContext } from '../hooks/useDropdownContext';
+
+interface PopoverProviderProps extends Omit<PopoverProps, 'open'> {
+  children: React.ReactNode;
+}
+
+export function DropdownPopover({ children, ...props }: PopoverProviderProps): React.ReactElement {
+  const methods = useDropdownContext();
+
+  return (
+    <Popover
+      open={methods.isOpen}
+      anchorEl={methods.anchorEl}
+      onClose={methods.close}
+      sx={{ marginTop: 0.8, borderRadius: 0, width: '100%' }}
+      anchorPosition={{
+        top: 0,
+        left: 0,
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      {...props}
+    >
+      {children}
+    </Popover>
+  );
+}

package/src/components/layout/Dropdown/components/DropdownProvider.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ClickAwayListener, Stack } from '@mui/material';
+import { useDropdown } from '../hooks/useDropdown';
+import DropdownContext from '../context/DropdownContext';
+
+interface DropdownProviderProps {
+  methods?: ReturnType<typeof useDropdown>;
+  children: React.ReactNode;
+  onClose?: () => void;
+}
+
+export function DropdownProvider({
+  methods,
+  children,
+  onClose,
+}: DropdownProviderProps): React.ReactElement<DropdownProviderProps> {
+  const defaultMethods = useDropdown({ onClose: onClose });
+
+  return (
+    <DropdownContext.Provider value={methods ?? defaultMethods}>
+      <ClickAwayListener onClickAway={methods ? methods.close : defaultMethods.close}>
+        <Stack flexDirection="column" position="relative" width="auto" height="auto">
+          {children}
+        </Stack>
+      </ClickAwayListener>
+    </DropdownContext.Provider>
+  );
+}

package/src/components/layout/Dropdown/components/DropdownTrigger.tsx

@@ -0,0 +1,27 @@
+import { ButtonBase } from '@mui/material';
+import React from 'react';
+import { useDropdownContext } from '../hooks/useDropdownContext';
+
+interface DropdownTriggerProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+
+export function DropdownTrigger({ children, onClick }: DropdownTriggerProps): React.ReactElement {
+  const { open, setAnchorEl } = useDropdownContext();
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
+    if (event.detail === 0) {
+      return;
+    }
+    setAnchorEl(event.currentTarget);
+    open();
+    if (onClick) onClick();
+  };
+
+  return (
+    <ButtonBase sx={{ posiion: 'relative' }} disableRipple onClick={handleClick}>
+      {children}
+    </ButtonBase>
+  );
+}

package/src/components/layout/Dropdown/components/index.ts

@@ -0,0 +1,3 @@
+export * from './DropdownProvider';
+export * from './DropdownTrigger';
+export * from './DropdownPopover';

package/src/components/layout/Dropdown/context/DropdownContext.ts

@@ -0,0 +1,21 @@
+import { Context, createContext } from 'react';
+
+export interface DropdownContextType {
+  isOpen: boolean;
+  toggle: () => void;
+  close: () => void;
+  open: () => void;
+  anchorEl: HTMLElement | null;
+  setAnchorEl: (el: HTMLElement | null) => void;
+}
+
+const DropdownContext: Context<DropdownContextType> = createContext<DropdownContextType>({
+  isOpen: false,
+  toggle: () => {},
+  close: () => {},
+  open: () => {},
+  anchorEl: null,
+  setAnchorEl: () => {},
+});
+
+export default DropdownContext;

package/src/components/layout/Dropdown/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useDropdown';

package/src/components/layout/Dropdown/hooks/useDropdown.ts

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+import { DropdownContextType } from '../context/DropdownContext';
+
+interface DropdownHookProps {
+  onClose?: () => void;
+}
+
+export const useDropdown = (props?: DropdownHookProps): DropdownContextType => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const toggle = (): void => setIsOpen((prev) => !prev);
+  const open = (): void => {
+    setIsOpen(true);
+  };
+  const close = (): void => {
+    setIsOpen(false);
+    if (props?.onClose) props.onClose();
+  };
+
+  return { isOpen, toggle, open, close, anchorEl, setAnchorEl };
+};

package/src/components/layout/Dropdown/hooks/useDropdownContext.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import DropdownContext, { DropdownContextType } from '../context/DropdownContext';
+
+export const useDropdownContext = (): DropdownContextType => {
+  const context = useContext(DropdownContext);
+
+  if (!context) {
+    throw new Error('useDropdown must be used within a DropdownProvider');
+  }
+  return context;
+};

package/src/components/layout/Dropdown/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './hooks';

package/src/components/layout/ScrollToTop/ScrollToTop.tsx

@@ -0,0 +1,12 @@
+import React, { useEffect } from 'react';
+import { useLocation } from 'react-router';
+
+export function ScrollToTop({ children }: { children?: React.ReactNode }): React.ReactElement {
+  const location = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location.pathname]);
+
+  return <>{children}</>;
+}

package/src/components/layout/index.ts

@@ -0,0 +1,5 @@
+export * from '../../ui/header/Header';
+export * from './app-layout/AppLayout';
+export * from './Drawer_';
+export * from './Dropdown';
+export * from './ScrollToTop/ScrollToTop';

package/src/index.css

@@ -0,0 +1,8 @@
+html {
+  font-size: 9.7px;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './theme';
+export * from './provider';
+export * from './components';
+export * from '@mui/material';

package/src/provider/CarbonProvider.tsx

@@ -0,0 +1,13 @@
+import { createTheme, ThemeProvider } from '@mui/material';
+
+type Theme = ReturnType<typeof createTheme>;
+
+export function CarbonProvider({
+  theme,
+  children,
+}: {
+  theme: Theme;
+  children: React.ReactNode;
+}): React.ReactElement {
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+}

package/src/provider/index.ts

@@ -0,0 +1 @@
+export * from './CarbonProvider';

package/src/theme/constants/components.ts

@@ -0,0 +1,369 @@
+/* eslint-disable max-lines */
+
+import { Theme } from '@emotion/react';
+import { Components, CssVarsTheme } from '@mui/material';
+
+const defaultButtonStyle = {
+  paddingLeft: 20,
+  paddingRight: 20,
+  paddingTop: 10,
+  paddingBottom: 10,
+  fontWeight: 400,
+  fontSize: 16.5,
+};
+
+const borderRadius = 1;
+
+export const components: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme> = {
+  MuiMenuItem: {
+    defaultProps: {
+      sx: {
+        padding: 1.1,
+        paddingX: 1.5,
+        height: 48,
+        transition: '0.15s',
+        '&:hover': { backgroundColor: 'primary.light' },
+        fontWeight: 400,
+      },
+    },
+  },
+  MuiAutocomplete: {
+    defaultProps: {
+      slotProps: {
+        paper: {
+          sx: {
+            marginTop: 1,
+            boxShadow: 0,
+            backgroundColor: 'background.default',
+            padding: 0.5,
+            paddingX: 1.2,
+            border: 1,
+            borderColor: 'divider',
+            '& .MuiAutocomplete-listbox': {
+              '& .MuiAutocomplete-option': {
+                borderRadius,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                padding: 1.2,
+                paddingTop: 1.5,
+                paddingBottom: 1.5,
+                fontSize: 16,
+                fontWeight: 450,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+
+  MuiTextField: {
+    defaultProps: {
+      size: 'medium',
+      fullWidth: true,
+      // eslint-disable-next-line
+      // @ts-ignore
+      color: 'info',
+      InputProps: {
+        sx: {
+          fontSize: '1.7rem',
+          fontWeight: 400,
+          height: 52,
+        },
+      },
+      InputLabelProps: {
+        sx: { fontSize: '1.7rem', fontWeight: 400, borderRadius: 0 },
+        shrink: true,
+      },
+    },
+  },
+  MuiContainer: {
+    defaultProps: {
+      maxWidth: 'lg',
+      sx: {
+        paddingY: 12,
+      },
+      style: {
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+    },
+  },
+  MuiPaper: {
+    variants: [
+      {
+        props: {
+          variant: 'outlined',
+        },
+        style: {
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: '#D4D6DE',
+          backgroundColor: 'transparent',
+        },
+      },
+    ],
+  },
+  MuiInputBase: {
+    defaultProps: {
+      sx: {
+        fontSize: 16.5,
+        fontWeight: 300,
+      },
+    },
+  },
+  MuiStack: {
+    defaultProps: {
+      style: {
+        borderColor: '#D4D6DE',
+        borderWidth: 1,
+      },
+    },
+  },
+  MuiChip: {
+    defaultProps: {
+      style: {
+        width: 'auto',
+        alignSelf: 'start',
+        height: 35,
+      },
+    },
+  },
+  MuiButton: {
+    variants: [
+      {
+        props: {
+          variant: 'contained',
+          color: 'primary',
+        },
+        style: ({ theme }) => ({
+          ...defaultButtonStyle,
+          backgroundColor: theme.palette.primary.light,
+          color: theme.palette.primary.main,
+          '&:hover': {
+            boxShadow: 0,
+            backgroundColor: theme.palette.primary.main,
+            color: 'white',
+          },
+        }),
+      },
+      {
+        props: {
+          variant: 'contained',
+          color: 'info',
+        },
+        style: ({ theme }) => ({
+          ...defaultButtonStyle,
+          paddingTop: 10,
+          backgroundColor: theme.palette.info.light,
+          color: theme.palette.info.main,
+          '&:hover': {
+            backgroundColor: theme.palette.info.main,
+            color: 'white',
+          },
+        }),
+      },
+      {
+        props: {
+          variant: 'text',
+        },
+        style: ({ theme }) => ({
+          ...defaultButtonStyle,
+          color: 'black',
+          backgroundColor: theme.palette.background.paper,
+          boxShadow: 'none',
+          '&:hover': {
+            backgroundColor: '#F1F1F1',
+          },
+        }),
+      },
+      {
+        props: {
+          // eslint-disable-next-line
+          // @ts-ignore
+          variant: 'hoverable',
+        },
+        style: ({ theme }) => ({
+          ...defaultButtonStyle,
+          backgroundColor: 'transparent',
+          '&:hover': {
+            backgroundColor: theme.palette.grey[100],
+            color: 'black',
+          },
+        }),
+      },
+    ],
+    defaultProps: {
+      disableRipple: true,
+      sx: {
+        boxShadow: 'none',
+        '&:hover': {
+          boxShadow: 'none',
+        },
+      },
+    },
+  },
+  MuiPopover: {
+    defaultProps: {
+      elevation: 0,
+      transitionDuration: 0,
+      slotProps: {
+        paper: {
+          sx: {
+            bgcolor: 'white',
+            minWidth: 175,
+            border: 1,
+            padding: 1,
+            borderColor: 'grey.400',
+          },
+        },
+      },
+    },
+  },
+  MuiIconButton: {
+    defaultProps: {
+      disableRipple: true,
+      sx: {
+        borderRadius,
+        ':hover': {
+          backgroundColor: 'grey.100',
+        },
+      },
+    },
+  },
+  MuiListItemIcon: {
+    defaultProps: {
+      sx: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingRight: 1,
+        color: 'inherit',
+      },
+    },
+  },
+  MuiAlert: {
+    defaultProps: {
+      variant: 'filled',
+      style: {
+        borderRadius,
+        opacity: 1,
+        boxShadow: 'none',
+      },
+    },
+  },
+  MuiDrawer: {
+    defaultProps: {
+      slotProps: {
+        paper: {
+          sx: {
+            bgcolor: 'background.default',
+          },
+        },
+      },
+    },
+  },
+  MuiListItem: {
+    defaultProps: {
+      style: {
+        paddingLeft: 12,
+        paddingRight: 12,
+        paddingTop: 0.5,
+        paddingBottom: 0.5,
+        cursor: 'pointer',
+        minHeight: 48,
+        width: '100%',
+        transition: '0.15s',
+      },
+      sx: {
+        width: '100%',
+        '&:hover': {
+          backgroundColor: 'background.paper',
+        },
+      },
+    },
+  },
+  MuiList: {
+    defaultProps: {
+      style: {
+        width: '100%',
+        minWidth: 230,
+        padding: 0,
+        margin: 0,
+        gap: 3,
+      },
+    },
+  },
+  MuiTooltip: {
+    defaultProps: {
+      style: {
+        fontSize: '1.8rem',
+      },
+      arrow: true,
+      slotProps: {
+        tooltip: {
+          sx: {
+            fontSize: '1.4rem',
+            fontWeight: 400,
+            bgcolor: 'grey.600',
+            color: 'white',
+          },
+        },
+      },
+    },
+  },
+  MuiCard: {
+    variants: [
+      {
+        props: {
+          variant: 'outlined',
+        },
+        style: {
+          padding: 30,
+          backgroundColor: 'transparent',
+          height: 280,
+        },
+      },
+      {
+        props: {
+          // TODO: fix this type
+          // eslint-disable-next-line
+          // @ts-ignore
+          variant: 'contained',
+        },
+        style: {
+          padding: 30,
+          boxShadow: 'none',
+          backgroundColor: 'background.paper',
+        },
+      },
+      {
+        props: {
+          // TODO: fix this type
+          // eslint-disable-next-line
+          // @ts-ignore
+          variant: 'numeric',
+        },
+        style: {
+          width: 50,
+          height: 50,
+          display: 'flex',
+          backgroundColor: '#1E1E1E',
+          padding: 0,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      },
+    ],
+    defaultProps: {
+      sx: {
+        transition: '0.2s',
+        boxShadow: 'none',
+        '&:hover': {
+          borderColor: 'primary.main',
+        },
+      },
+    },
+  },
+};

package/src/theme/constants/palette.ts

@@ -0,0 +1,39 @@
+export const palette = {
+  primary: {
+    main: '#791D46',
+    dark: '#51132f',
+    // light: '#FFEAEC',
+    light: '#FFEDF1',
+  },
+  secondary: {
+    main: '#4d1d81',
+    dark: '#000000',
+    light: '#f7f4fa',
+    // light: '#F1F0FF',
+  },
+  error: {
+    main: '#D80809',
+    dark: '#D80809',
+    light: '#fff2f1',
+  },
+  success: {
+    main: '#0D4D3C',
+    dark: '#D80809',
+    light: '#edfded',
+  },
+  info: {
+    main: '#222876',
+    dark: '#D80809',
+    // light: '#e4f5fd',
+    light: '#EEF4FC',
+  },
+  warning: {
+    main: '#A5500F',
+    dark: '#e67e22',
+    light: '#FFE5CA',
+  },
+  background: {
+    paper: '#FAFAFA',
+  },
+  diver: '#F7F7F7',
+};

package/src/theme/constants/typography.ts

@@ -0,0 +1,42 @@
+export const typography = {
+  fontFamily: `Inter`,
+  h1: {
+    fontSize: '4.0rem',
+    fontWeight: 500,
+    letterSpacing: -0.1,
+  },
+  h2: {
+    fontSize: '3.8rem',
+    fontWeight: 550,
+  },
+  h4: {
+    fontSize: '2rem',
+    fontWeight: 500,
+  },
+  h5: {
+    fontSize: '2.1rem',
+    fontWeight: 500,
+  },
+  body1: {
+    fontSize: '1.9rem',
+    lineHeight: 1.5,
+    fontWeight: 350,
+  },
+  body2: {
+    fontSize: '1.8rem',
+    fontWeight: 350,
+    lineHeight: 1.5,
+  },
+  caption: {
+    fontSize: '1.5rem',
+    fontWeight: 350,
+    textTransform: 'none',
+    letterSpacing: 0.1,
+  },
+  button: {
+    fontSize: '1.6rem',
+    fontWeight: 350,
+    textTransform: 'none',
+    letterSpacing: 0.1,
+  },
+};

package/src/theme/index.ts

@@ -0,0 +1 @@
+export * from './theme';

package/src/theme/theme.ts

@@ -0,0 +1,14 @@
+import { createTheme } from '@mui/material';
+import { typography } from './constants/typography';
+import { components } from './constants/components';
+import { palette } from './constants/palette';
+
+export const theme = createTheme({
+  palette,
+  // TODO: fix this type
+  // eslint-disable-next-line
+  // @ts-ignore
+  typography,
+  components,
+  shape: { borderRadius: 4 },
+});