@groupeactual/ui-kit 1.7.10 → 2.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.7.10",
+  "version": "2.0.0-beta.1",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "main": "dist/cjs/index.js",
@@ -11,35 +11,38 @@
     "src"
   ],
   "devDependencies": {
-    "@types/google.picker": "^0.0.46",
+    "@types/google.picker": "^0.0.50",
     "@types/styled-components": "^5.1.34",
-    "framer-motion": "^11.12.0",
-    "eslint": "^9.16.0",
-    "eslint-config-prettier": "^9.1.0",
+    "framer-motion": "^12.6.3",
+    "eslint": "^9.24.0",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-n": "^17.14.0",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-n": "^17.17.0",
+    "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "prettier": "^3.4.1"
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "prettier": "^3.5.3",
+    "typescript": "5.7.3"
   },
   "dependencies": {
-    "@mui/material": "5.16.7",
-    "@mui/system": "5.16.7",
-    "@mui/styled-engine": "5.16.6",
+    "@mui/material": "7.0.2",
+    "@mui/system": "7.0.2",
+    "@mui/styled-engine": "7.0.2",
     "@mui/x-date-pickers": "7.15.0",
     "@mui/x-date-pickers-pro": "7.15.0",
-    "styled-components": "^6.1.13",
-    "@groupeactual/design-tokens": "1.7.10"
+    "styled-components": "^6.1.17",
+    "@groupeactual/design-tokens": "2.0.0-beta.1"
   },
   "scripts": {
     "build": "rollup -c",
     "build:watch": "rollup --bundleConfigAsCjs -c -w",
     "dev": "npm run build:watch",
     "eslint": "eslint --config \"eslint.config.js\" --color \".\" --max-warnings=0",
-    "lint": "npm run eslint"
+    "lint": "npm run eslint",
+    "prettier:check": "prettier --check .",
+    "prettier:format": "prettier --write ."
   }
 }

package/src/DesignSystemProvider.tsx

@@ -1,60 +1,45 @@
-import React, {
-  PropsWithChildren,
-  createContext,
-  useContext,
-  useState,
-} from 'react';
+import React, { PropsWithChildren, createContext, useContext } from 'react';
 
-import { useMaterialThemeTokens } from '@groupeactual/design-tokens';
-import { ThemeProvider, createTheme } from '@mui/material';
-
-// Deux themes pour le moment :
-// Default = Theme backoffice Material
-// Ep = Espace personnel
-type Theme = 'Default' | 'Ep';
+import { Theme, theme } from '@groupeactual/design-tokens';
+import { PaletteMode, ThemeProvider, createTheme } from '@mui/material';
 
 export interface DesignSystemContextValues {
-  isDarkTheme: boolean;
   themeName: Theme;
-  toggleDarkTheme: () => void;
+  mode: PaletteMode;
 }
 
 export const DesignSystemContext = createContext<DesignSystemContextValues>({
-  isDarkTheme: false,
-  themeName: 'Default',
-  toggleDarkTheme: () => {
-    return;
-  },
+  mode: 'light',
+  themeName: 'Interne',
 });
 
 interface Props {
-  name?: Theme;
+  themeName?: Theme;
+  mode?: PaletteMode;
 }
 
 const MaterialThemeProvider = ({ children }: PropsWithChildren<unknown>) => {
-  const { themeName } =
+  const { themeName, mode } =
     useContext<DesignSystemContextValues>(DesignSystemContext);
-  const { muiTokens } = useMaterialThemeTokens(themeName);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const theme = createTheme(muiTokens as any);
 
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  const designSystemTheme = theme(themeName, mode);
+  const muiTheme = createTheme({
+    cssVariables: {
+      disableCssColorScheme: true,
+    },
+    ...designSystemTheme,
+  });
+
+  return <ThemeProvider theme={muiTheme}>{children}</ThemeProvider>;
 };
 
 const DesignSystemProvider = ({
   children,
-  name: themeName = 'Default',
+  themeName = 'Interne',
+  mode = 'light',
 }: PropsWithChildren<Props>) => {
-  const [isDarkTheme, setIsDarkTheme] = useState(false);
-
-  const toggleDarkTheme = (): void => {
-    setIsDarkTheme(!isDarkTheme);
-  };
-
   return (
-    <DesignSystemContext.Provider
-      value={{ isDarkTheme, themeName, toggleDarkTheme }}
-    >
+    <DesignSystemContext.Provider value={{ themeName, mode }}>
       <MaterialThemeProvider>{children}</MaterialThemeProvider>
     </DesignSystemContext.Provider>
   );

package/src/components/Accordion/Accordion.tsx

@@ -2,22 +2,19 @@ import React, {
   MouseEventHandler,
   ReactNode,
   useEffect,
-  useMemo,
   useState,
 } from 'react';
 
 import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
-import { AccordionStyle } from '@groupeactual/design-tokens';
 import {
   AccordionDetails,
   Accordion as AccordionMui,
   AccordionProps,
   AccordionSummary,
-  styled,
-  useTheme,
 } from '@mui/material';
 
 import IconButton from '@/components/IconButton';
+import Text from '@/components/Text';
 
 interface Props extends AccordionProps {
   title?: string;
@@ -28,65 +25,50 @@ interface Props extends AccordionProps {
   onClick?: MouseEventHandler;
 }
 
-const Accordion = ({
-  title,
-  summaryHeight,
-  expanded = false,
-  onClick,
-  children,
-  ...props
-}: Props) => {
-  const theme = useTheme();
-  const StyledAccordion = useMemo(
-    () => styled(AccordionMui)(AccordionStyle(theme)),
-    [theme],
-  );
+const Accordion = React.forwardRef<HTMLDivElement, Props>(
+  (
+    { title, summaryHeight, expanded = false, children, onClick, ...props },
+    ref,
+  ) => {
+    const [internalExpanded, setInternalExpanded] = useState(expanded);
 
-  const [internalExpanded, setInternalExpanded] = useState(expanded);
+    useEffect(() => {
+      if (expanded !== internalExpanded) {
+        setInternalExpanded(expanded);
+      }
+    }, [expanded]);
 
-  useEffect(() => {
-    if (expanded !== internalExpanded) {
-      setInternalExpanded(expanded);
-    }
-  }, [expanded]);
-
-  return (
-    <StyledAccordion
-      expanded={internalExpanded}
-      onClick={(e) => {
-        if (!props.disabled) {
-          setInternalExpanded(!internalExpanded);
-          if (onClick) {
-            onClick(e);
+    return (
+      <AccordionMui
+        ref={ref}
+        data-testid="ds-accordion"
+        expanded={internalExpanded}
+        onClick={(e) => {
+          if (!props.disabled) {
+            setInternalExpanded(!internalExpanded);
+            if (onClick) {
+              onClick(e);
+            }
           }
-        }
-      }}
-      {...props}
-    >
-      <AccordionSummary
-        expandIcon={
-          <IconButton variant="table" size="medium" icon={faChevronDown} />
-        }
-        sx={{
-          fontWeight: 500,
-          fontSize: 18,
-          lineHeight: 21,
-          height: summaryHeight || 60,
-        }}
-      >
-        {title}
-      </AccordionSummary>
-      <AccordionDetails
-        sx={{
-          backgroundColor: theme.palette.greyXLight,
-          borderTop: '1px solid',
-          borderColor: theme.palette.greyLightDefaultBorder,
         }}
+        {...props}
       >
-        {children}
-      </AccordionDetails>
-    </StyledAccordion>
-  );
-};
+        <AccordionSummary
+          expandIcon={
+            <IconButton variant="plain" size="medium" icon={faChevronDown} />
+          }
+          sx={{
+            height: summaryHeight || 60,
+          }}
+        >
+          <Text variant="h4">{title}</Text>
+        </AccordionSummary>
+        <AccordionDetails>{children}</AccordionDetails>
+      </AccordionMui>
+    );
+  },
+);
+
+Accordion.displayName = 'Accordion';
 
 export default Accordion;

package/src/components/BannerNotification/BannerNotification.tsx

@@ -1,8 +1,7 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import { faBell, faTimes } from '@fortawesome/pro-solid-svg-icons';
-import { BannerNotificationStyle } from '@groupeactual/design-tokens';
-import { Alert, AlertProps, styled, useTheme } from '@mui/material';
+import { Alert, AlertProps } from '@mui/material';
 
 import IconProvider from '@/components/IconProvider';
 
@@ -11,23 +10,23 @@ interface Props extends AlertProps {
   onClose?: () => void;
 }
 
-const BannerNotification = ({ text, severity, onClose }: Props) => {
-  const theme = useTheme();
+const BannerNotification = React.forwardRef<HTMLDivElement, Props>(
+  ({ text, severity, onClose }, ref) => {
+    return (
+      <Alert
+        ref={ref}
+        data-testid="ds-banner-notification"
+        className="MuiAlertBannerNotification"
+        severity={severity}
+        icon={<IconProvider icon={faBell} />}
+        action={onClose && <IconProvider icon={faTimes} onClick={onClose} />}
+      >
+        {text}
+      </Alert>
+    );
+  },
+);
 
-  const StyledBannerNotification = useMemo(
-    () => styled(Alert)(BannerNotificationStyle(theme)),
-    [],
-  );
-
-  return (
-    <StyledBannerNotification
-      severity={severity}
-      icon={<IconProvider icon={faBell} />}
-      action={onClose && <IconProvider icon={faTimes} onClick={onClose} />}
-    >
-      {text}
-    </StyledBannerNotification>
-  );
-};
+BannerNotification.displayName = 'BannerNotification';
 
 export default BannerNotification;

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,12 +1,6 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
-import { BreadcrumbsStyle } from '@groupeactual/design-tokens';
-import {
-  Breadcrumbs as BreadcrumbsMui,
-  BreadcrumbsProps,
-  styled,
-  useTheme,
-} from '@mui/material';
+import { Breadcrumbs as BreadcrumbsMui, BreadcrumbsProps } from '@mui/material';
 
 import Link from '@/components/Link';
 import Text from '@/components/Text';
@@ -17,29 +11,39 @@ interface LinkItem {
 }
 
 interface Props extends BreadcrumbsProps {
-  PageName: string;
+  currentPage: string;
   links?: LinkItem[];
 }
 
-const Breadcrumbs = ({ PageName, links, ...props }: Props) => {
-  const theme = useTheme();
-  const StyledBreadcrumbs = useMemo(
-    () => styled(BreadcrumbsMui)(BreadcrumbsStyle(theme)),
-    [theme],
-  );
+const Breadcrumbs = React.forwardRef<HTMLDivElement, Props>(
+  ({ currentPage, links, ...props }, ref) => {
+    return (
+      <BreadcrumbsMui
+        aria-label="breadcrumb"
+        {...props}
+        ref={ref}
+        data-testid="ds-breadcrumbs"
+      >
+        {links?.map((link, index) => (
+          <div key={index} data-testid={`ds-breadcrumb-link-${index}`}>
+            <Link
+              key={index}
+              href={link.link}
+              variant="link1"
+              data-testid={`ds-link-${index}`}
+            >
+              {link.title}
+            </Link>
+          </div>
+        ))}
+        <Text variant="body1" data-testid="ds-current-page">
+          {currentPage}
+        </Text>
+      </BreadcrumbsMui>
+    );
+  },
+);
 
-  return (
-    <StyledBreadcrumbs aria-label="breadcrumb" {...props}>
-      {links?.map((link, index) => (
-        <div key={index}>
-          <Link key={index} href={link.link} variant="link1">
-            {link.title}
-          </Link>
-        </div>
-      ))}
-      <Text variant="body1">{PageName}</Text>
-    </StyledBreadcrumbs>
-  );
-};
+Breadcrumbs.displayName = 'Breadcrumbs';
 
 export default Breadcrumbs;

package/src/components/Button/Button.tsx

@@ -1,30 +1,83 @@
-import React, { ReactNode, useMemo } from 'react';
+import React, { ReactNode } from 'react';
 
-import { ButtonStyle } from '@groupeactual/design-tokens';
 import {
   Button as ButtonMUI,
   ButtonProps,
-  styled,
-  useTheme,
+  CircularProgress,
 } from '@mui/material';
 
+type Variant = 'contained' | 'outlined' | 'tertiary' | 'text';
+type Color = 'primary' | 'secondary';
+
 interface Props extends Omit<ButtonProps, 'variant' | 'children'> {
-  variant?: 'primary' | 'secondary';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'destructive';
   children?: ReactNode;
 }
 
-const Button = ({ variant, children, ...props }: Props) => {
-  const theme = useTheme();
-  const StyledButton = useMemo(
-    () => styled(ButtonMUI)(ButtonStyle(theme)),
-    [theme],
-  );
-
-  return (
-    <StyledButton variant={variant as 'text'} {...props}>
-      {children}
-    </StyledButton>
-  );
+const isDisableRipple = (variant: Props['variant']): boolean => {
+  switch (variant) {
+    case 'primary':
+    case 'secondary':
+    case 'tertiary':
+    case 'destructive':
+      return false;
+    default:
+      return true;
+  }
+};
+
+const getVariant = (variant: Props['variant']): Variant => {
+  switch (variant) {
+    case 'primary':
+      return 'contained';
+    case 'secondary':
+      return 'outlined';
+    case 'tertiary':
+      return 'tertiary';
+    case 'destructive':
+      return 'contained';
+    default:
+      return 'contained';
+  }
 };
 
+const getColor = (variant: Props['variant']): Color => {
+  switch (variant) {
+    case 'destructive':
+      return 'secondary';
+    default:
+      return 'primary';
+  }
+};
+
+const Button = React.forwardRef<HTMLButtonElement, Props>(
+  ({ variant, children, ...props }, ref) => {
+    return (
+      <ButtonMUI
+        variant={getVariant(variant)}
+        color={getColor(variant)}
+        disableRipple={isDisableRipple(variant)}
+        ref={ref}
+        {...props}
+        loadingPosition="start"
+        loadingIndicator={
+          <CircularProgress
+            sx={{
+              ml: '2px',
+            }}
+            color="inherit"
+            size={14}
+            thickness={4}
+          />
+        }
+        data-testid="ds-button"
+      >
+        {children}
+      </ButtonMUI>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
 export default Button;