@linagora/twake-mui 1.6.0 → 2.0.0

package/dist/stories/Alert.stories.d.ts

@@ -0,0 +1,7 @@
+import { Alert } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

package/dist/stories/Alert.stories.js

@@ -0,0 +1,81 @@
+import { Alert, AlertTitle } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'Alert',
+    component: Alert,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        severity: {
+            control: 'text',
+            description: 'Severity level (error, warning, info, success) or custom color name (primary, secondary)'
+        },
+        variant: {
+            control: 'select',
+            options: ['standard', 'filled', 'outlined']
+        },
+        color: {
+            control: 'text',
+            description: 'Custom color (CSS color value or MUI palette color like "primary", "secondary")'
+        }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        severity: 'info',
+        variant: 'standard'
+    },
+    render: args => (React.createElement(Alert, { ...args },
+        React.createElement(AlertTitle, null, "Alert Title"),
+        "This is the alert content text"))
+};
+// Visual Regression - All severity colors and variants combined
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '24px',
+            minWidth: '400px'
+        } },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Standard Variant"),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' } },
+                React.createElement(Alert, { severity: 'primary' },
+                    React.createElement(AlertTitle, null, "Primary Alert"),
+                    "This is a primary alert with title and text"),
+                React.createElement(Alert, { severity: 'secondary' },
+                    React.createElement(AlertTitle, null, "Secondary Alert"),
+                    "This is a secondary alert with title and text"),
+                React.createElement(Alert, { severity: "error" },
+                    React.createElement(AlertTitle, null, "Error Alert"),
+                    "This is an error alert with title and text"),
+                React.createElement(Alert, { severity: "warning" },
+                    React.createElement(AlertTitle, null, "Warning Alert"),
+                    "This is a warning alert with title and text"),
+                React.createElement(Alert, { severity: "info" },
+                    React.createElement(AlertTitle, null, "Info Alert"),
+                    "This is an info alert with title and text"),
+                React.createElement(Alert, { severity: "success" },
+                    React.createElement(AlertTitle, null, "Success Alert"),
+                    "This is a success alert with title and text"))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Filled Variant"),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' } },
+                React.createElement(Alert, { severity: "error", variant: "filled" },
+                    React.createElement(AlertTitle, null, "Filled Error"),
+                    "This is a filled error alert"),
+                React.createElement(Alert, { severity: "success", variant: "filled" },
+                    React.createElement(AlertTitle, null, "Filled Success"),
+                    "This is a filled success alert"))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Outlined Variant"),
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' } },
+                React.createElement(Alert, { severity: "warning", variant: "outlined" },
+                    React.createElement(AlertTitle, null, "Outlined Warning"),
+                    "This is an outlined warning alert"),
+                React.createElement(Alert, { severity: "info", variant: "outlined" },
+                    React.createElement(AlertTitle, null, "Outlined Info"),
+                    "This is an outlined info alert")))))
+};

package/dist/stories/Button.stories.js

@@ -4,7 +4,21 @@ const meta = {
     title: 'Button',
     component: Button,
     parameters: { layout: 'centered' },
-    tags: ['autodocs']
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['contained', 'outlined', 'text']
+        },
+        color: {
+            control: 'select',
+            options: ['primary', 'secondary', 'error', 'warning', 'info', 'success']
+        },
+        size: {
+            control: 'select',
+            options: ['small', 'medium', 'large']
+        }
+    }
 };
 export default meta;
 export const Docs = {
@@ -24,11 +38,32 @@ export const Screenshot = {
                 React.createElement(Button, { variant: "outlined" }, "Outlined"),
                 React.createElement(Button, { variant: "text" }, "Text"))),
         React.createElement("section", null,
-            React.createElement("h3", { style: { marginBottom: '12px' } }, "Colors"),
-            React.createElement(Stack, { direction: "row", spacing: 2 },
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Colors contained"),
+            React.createElement(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 2 },
                 React.createElement(Button, { variant: "contained", color: "primary" }, "Primary"),
                 React.createElement(Button, { variant: "contained", color: "secondary" }, "Secondary"),
-                React.createElement(Button, { variant: "contained", color: "error" }, "Error"))),
+                React.createElement(Button, { variant: "contained", color: "success" }, "Success"),
+                React.createElement(Button, { variant: "contained", color: "error" }, "Error"),
+                React.createElement(Button, { variant: "contained", color: "warning" }, "Warning"),
+                React.createElement(Button, { variant: "contained", color: "info" }, "Info"))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Colors outlined"),
+            React.createElement(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 2 },
+                React.createElement(Button, { variant: "outlined", color: "primary" }, "Primary"),
+                React.createElement(Button, { variant: "outlined", color: "secondary" }, "Secondary"),
+                React.createElement(Button, { variant: "outlined", color: "success" }, "Success"),
+                React.createElement(Button, { variant: "outlined", color: "error" }, "Error"),
+                React.createElement(Button, { variant: "outlined", color: "warning" }, "Warning"),
+                React.createElement(Button, { variant: "outlined", color: "info" }, "Info"))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Colors text"),
+            React.createElement(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 2 },
+                React.createElement(Button, { variant: "text", color: "primary" }, "Primary"),
+                React.createElement(Button, { variant: "text", color: "secondary" }, "Secondary"),
+                React.createElement(Button, { variant: "text", color: "success" }, "Success"),
+                React.createElement(Button, { variant: "text", color: "error" }, "Error"),
+                React.createElement(Button, { variant: "text", color: "warning" }, "Warning"),
+                React.createElement(Button, { variant: "text", color: "info" }, "Info"))),
         React.createElement("section", null,
             React.createElement("h3", { style: { marginBottom: '12px' } }, "Sizes"),
             React.createElement(Stack, { direction: "row", spacing: 2, sx: { alignItems: 'center' } },

package/dist/stories/Dialog.stories.js

@@ -30,7 +30,7 @@ export const Screenshot = {
         React.createElement("section", null,
             React.createElement("h3", { style: { marginBottom: '12px' } }, "Dialog Components"),
             React.createElement(Stack, { spacing: 2 },
-                React.createElement(Dialog, { open: true },
+                React.createElement(Dialog, { open: true, disableAutoFocus: true },
                     React.createElement(DialogTitle, null, "Standard Dialog"),
                     React.createElement(DialogContent, null,
                         React.createElement(DialogContentText, null, "This demonstrates the standard dialog appearance with all its subcomponents styled according to the Twake theme.")),

package/dist/stories/Typography.stories.js

@@ -1,4 +1,4 @@
-import { Typography, Paper, Stack } from '@mui/material';
+import { Typography, Stack } from '@mui/material';
 import React from 'react';
 const meta = {
     title: 'Typography',
@@ -16,30 +16,35 @@ export const Default = {
 // Visual Regression - All typography combined
 export const Screenshot = {
     tags: ['argos'],
-    render: () => (React.createElement(Paper, { sx: { p: 4, maxWidth: 600 } },
-        React.createElement(Stack, { spacing: 2 },
-            React.createElement("section", null,
-                React.createElement("h3", { style: { marginBottom: '12px' } }, "All Variants"),
-                React.createElement(Stack, { spacing: 1 },
-                    React.createElement(Typography, { variant: "h1" }, "Heading 1"),
-                    React.createElement(Typography, { variant: "h2" }, "Heading 2"),
-                    React.createElement(Typography, { variant: "h3" }, "Heading 3"),
-                    React.createElement(Typography, { variant: "h4" }, "Heading 4"),
-                    React.createElement(Typography, { variant: "h5" }, "Heading 5"),
-                    React.createElement(Typography, { variant: "h6" }, "Heading 6"),
-                    React.createElement(Typography, { variant: "subtitle1" }, "Subtitle 1"),
-                    React.createElement(Typography, { variant: "subtitle2" }, "Subtitle 2"),
-                    React.createElement(Typography, { variant: "body1" }, "Body 1 - This is the default body text style used for most content."),
-                    React.createElement(Typography, { variant: "body2" }, "Body 2 - This is a smaller body text style for secondary content."),
-                    React.createElement(Typography, { variant: "button" }, "Button Text"),
-                    React.createElement(Typography, { variant: "caption" }, "Caption text"),
-                    React.createElement(Typography, { variant: "overline" }, "OVERLINE TEXT"))),
-            React.createElement("section", null,
-                React.createElement("h3", { style: { marginBottom: '12px', marginTop: '24px' } }, "Colors"),
-                React.createElement(Stack, { spacing: 1 },
-                    React.createElement(Typography, { color: "primary" }, "Primary color text"),
-                    React.createElement(Typography, { color: "secondary" }, "Secondary color text"),
-                    React.createElement(Typography, { color: "error" }, "Error color text"),
-                    React.createElement(Typography, { color: "text.primary" }, "Text primary color"),
-                    React.createElement(Typography, { color: "text.secondary" }, "Text secondary color"))))))
+    render: () => (React.createElement(Stack, { spacing: 2 },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "All Variants"),
+            React.createElement(Stack, { spacing: 1 },
+                React.createElement(Typography, { variant: "h1" }, "Heading 1"),
+                React.createElement(Typography, { variant: "h2" }, "Heading 2"),
+                React.createElement(Typography, { variant: "h3" }, "Heading 3"),
+                React.createElement(Typography, { variant: "h4" }, "Heading 4"),
+                React.createElement(Typography, { variant: "h5" }, "Heading 5"),
+                React.createElement(Typography, { variant: "h6" }, "Heading 6"),
+                React.createElement(Typography, { variant: "subtitle1" }, "Subtitle 1"),
+                React.createElement(Typography, { variant: "subtitle2" }, "Subtitle 2"),
+                React.createElement(Typography, { variant: "body1" }, "Body 1 - This is the default body text style used for most content."),
+                React.createElement(Typography, { variant: "body2" }, "Body 2 - This is a smaller body text style for secondary content."),
+                React.createElement(Typography, { variant: "button" }, "Button Text"),
+                React.createElement(Typography, { variant: "caption" }, "Caption text"),
+                React.createElement(Typography, { variant: "overline" }, "OVERLINE TEXT"))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px', marginTop: '24px' } }, "Colors"),
+            React.createElement(Stack, { spacing: 1 },
+                React.createElement(Typography, { color: "primary" }, "Primary color text"),
+                React.createElement(Typography, { color: "secondary" }, "Secondary color text"),
+                React.createElement(Typography, { color: "success" }, "Success color text"),
+                React.createElement(Typography, { color: "error" }, "Error color text"),
+                React.createElement(Typography, { color: "warning" }, "Warning color text"),
+                React.createElement(Typography, { color: "info" }, "Info color text"),
+                React.createElement(Typography, { color: "textPrimary" }, "Text primary color"),
+                React.createElement(Typography, { color: "textSecondary" }, "Text secondary color"),
+                React.createElement(Typography, { color: "textDisabled" }, "Text disabled color"),
+                React.createElement(Typography, { sx: { color: 'text.primary' } }, "Text primary color"),
+                React.createElement(Typography, { sx: { color: 'text.secondary' } }, "Text secondary color")))))
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "1.6.0",
-  "description": "MUI v7 theme system for Twake applications",
+  "version": "2.0.0",
+  "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
   "engines": {
@@ -50,7 +50,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@mui/material": "^7.1.2",
+    "@mui/material": "^9.0.1",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -59,19 +59,21 @@
     "@argos-ci/storybook": "5.3.2",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@mui/icons-material": "7.3.10",
-    "@mui/material": "^7.1.2",
+    "@mui/icons-material": "^9.0.1",
+    "@mui/material": "^9.0.1",
     "@storybook/addon-docs": "10.3.5",
     "@storybook/addon-vitest": "10.3.5",
     "@storybook/builder-vite": "10.3.5",
     "@storybook/react": "10.3.5",
     "@storybook/react-vite": "10.3.5",
+    "@types/lodash": "4.17.24",
     "@vitest/browser-playwright": "4.1.5",
     "cozy-tsconfig": "^2.0.0",
     "eslint": "10.2.1",
     "eslint-config-cozy-app": "7.0.0",
     "eslint-plugin-storybook": "10.3.5",
-    "playwright": "1.59.1",
+    "lodash": "4.18.1",
+    "playwright": "1.60.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "10.3.5",

package/dist/lib/overrides/accordionOverrides.d.ts

@@ -1,2 +0,0 @@
-import { Theme, Components } from '@mui/material/styles';
-export declare const accordionOverrides: (theme: Theme) => Components;

package/dist/lib/overrides/accordionOverrides.js

@@ -1,63 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import paletteJson from '../palette.json';
-const paletteData = paletteJson;
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const accordionOverrides = (theme) => {
-    return {
-        MuiAccordion: {
-            styleOverrides: {
-                root: {
-                    '&::before': {
-                        display: 'none'
-                    }
-                }
-            }
-        },
-        MuiAccordionSummary: {
-            styleOverrides: {
-                root: {
-                    padding: '0',
-                    minHeight: '32px',
-                    '&.Mui-expanded': {
-                        minHeight: '32px'
-                    }
-                },
-                content: {
-                    fontSize: '14px',
-                    fontWeight: 500,
-                    lineHeight: '20px',
-                    color: alpha(paletteData.Grey[900], 0.9),
-                    margin: 0,
-                    '&.Mui-expanded': {
-                        margin: 0
-                    }
-                },
-                expandIconWrapper: {
-                    padding: '4px',
-                    color: alpha(paletteData.Grey[900], 0.48),
-                    borderRadius: '50%',
-                    '&:hover': {
-                        backgroundColor: alpha(paletteData.Primary.A400, 0.04)
-                    }
-                }
-            }
-        },
-        MuiCssBaseline: {
-            styleOverrides: {
-                '.MuiAccordion-root .MuiListItem-root': {
-                    padding: '0',
-                    borderRadius: '4px',
-                    '&:hover': {
-                        backgroundColor: alpha(paletteData.Grey.A900, 0.04)
-                    }
-                },
-                '.MuiAccordion-root .MuiListItem-root label': {
-                    fontSize: '14px',
-                    fontStyle: 'normal',
-                    fontWeight: 400,
-                    color: alpha(paletteData.Grey[900], 0.9)
-                }
-            }
-        }
-    };
-};

package/dist/lib/overrides/autocompleteOverrides.d.ts

@@ -1,2 +0,0 @@
-import { Components } from '@mui/material/styles';
-export declare const autocompleteOverrides: () => Components["MuiAutocomplete"];

package/dist/lib/overrides/autocompleteOverrides.js

@@ -1,31 +0,0 @@
-import { radius } from '../radius';
-export const autocompleteOverrides = () => {
-    return {
-        styleOverrides: {
-            root: {
-                // Using "&&" to increase CSS specificity
-                '&&': {
-                    '& .MuiOutlinedInput-root': {
-                        paddingLeft: '16px',
-                        borderRadius: radius.sm,
-                        '& fieldset.MuiOutlinedInput-notchedOutline': {
-                            borderRadius: radius.sm
-                        },
-                        '&.MuiInputBase-sizeSmall': {
-                            paddingTop: '8px',
-                            paddingBottom: '8px',
-                            paddingLeft: '16px',
-                            '& .MuiAutocomplete-input': {
-                                padding: '0px 4px 0px 8px'
-                            }
-                        }
-                    }
-                }
-            },
-            // Styling for chips in Autocomplete
-            tag: {
-                margin: '2px'
-            }
-        }
-    };
-};

package/dist/lib/overrides/avatarOverrides.d.ts

@@ -1,2 +0,0 @@
-import { Theme, Components } from '@mui/material/styles';
-export declare const avatarOverrides: (theme: Theme) => Components["MuiAvatar"];

package/dist/lib/overrides/avatarOverrides.js

@@ -1,85 +0,0 @@
-export const avatarOverrides = (theme) => {
-    return {
-        styleOverrides: {
-            root: {
-                fontWeight: 600,
-                '&.size-xs': {
-                    width: 18,
-                    height: 18,
-                    fontSize: '9.109px',
-                    fontWeight: 500,
-                    lineHeight: '18.219px',
-                    '& svg': {
-                        width: '50%',
-                        height: '50%'
-                    }
-                },
-                '&.size-s': {
-                    width: 28,
-                    height: 28,
-                    fontSize: '12.525px',
-                    fontWeight: 500,
-                    lineHeight: '18.219px',
-                    '& svg': {
-                        width: '50%',
-                        height: '50%'
-                    }
-                },
-                '&.size-m': {
-                    width: 36,
-                    height: 36,
-                    fontSize: '18.219px',
-                    fontWeight: 500,
-                    lineHeight: '27.328px',
-                    '& svg': {
-                        width: '50%',
-                        height: '50%'
-                    }
-                },
-                '&.size-l': {
-                    width: 54,
-                    height: 54,
-                    fontSize: '27.328px',
-                    fontWeight: 600,
-                    lineHeight: '36.438px',
-                    '& svg': {
-                        width: '50%',
-                        height: '50%'
-                    }
-                },
-                '&.size-xl': {
-                    width: 72,
-                    height: 72,
-                    fontSize: '36.438px',
-                    fontWeight: 600,
-                    lineHeight: '45.547px',
-                    '& svg': {
-                        width: '50%',
-                        height: '50%'
-                    }
-                },
-                '&.disabled': {
-                    color: theme.palette.primary.contrastText,
-                    background: theme.palette.grey[300],
-                    '& img': {
-                        filter: 'grayscale(1) brightness(2)',
-                        opacity: 0.5
-                    }
-                },
-                '&.displayInline': {
-                    display: 'inline-flex'
-                },
-                '&.border': {
-                    border: `2px solid ${theme.palette.background.paper}`
-                },
-                '&.innerBorder': {
-                    boxShadow: `inset 0px 0px 0px 1px ${theme.palette.divider}`
-                }
-            },
-            colorDefault: {
-                backgroundColor: theme.palette.background.paper,
-                color: theme.palette.text.secondary
-            }
-        }
-    };
-};

package/dist/lib/overrides/backdropOverrides.d.ts

@@ -1,2 +0,0 @@
-import { Components, Theme } from '@mui/material/styles';
-export declare const backdropOverrides: (theme: Theme) => Components["MuiBackdrop"];

package/dist/lib/overrides/backdropOverrides.js

@@ -1,17 +0,0 @@
-import { alpha } from '@mui/material/styles';
-export const backdropOverrides = (theme) => {
-    return {
-        styleOverrides: {
-            root: {
-                variants: [
-                    {
-                        props: { invisible: false },
-                        style: {
-                            backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.focusOpacity)
-                        }
-                    }
-                ]
-            }
-        }
-    };
-};

package/dist/lib/overrides/buttonOverrides.d.ts

@@ -1,2 +0,0 @@
-import { Theme, Components } from '@mui/material/styles';
-export declare const buttonOverrides: (theme: Theme) => Components["MuiButton"];

package/dist/lib/overrides/buttonOverrides.js

@@ -1,86 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import paletteJson from '../palette.json';
-import { radius } from '../radius';
-const paletteData = paletteJson;
-export const buttonOverrides = (theme) => {
-    return {
-        styleOverrides: {
-            root: {
-                borderRadius: radius.pill,
-                boxShadow: 'none',
-                '&:hover': {
-                    boxShadow: 'none'
-                },
-                '&:active': {
-                    boxShadow: 'none'
-                },
-                '&:focus': {
-                    boxShadow: 'none'
-                }
-            },
-            contained: {
-                boxShadow: 'none',
-                '&:hover': {
-                    boxShadow: 'none'
-                },
-                '&:active': {
-                    boxShadow: 'none'
-                },
-                '&:focus': {
-                    boxShadow: 'none'
-                }
-            },
-            containedSecondary: {
-                backgroundColor: theme.palette.secondary.main,
-                color: alpha(theme.palette.text.primary, 0.9),
-                borderRadius: radius.sm,
-                '&:hover': {
-                    backgroundColor: paletteData.Secondary[700],
-                    color: alpha(theme.palette.text.primary, 0.9)
-                },
-                '&.Mui-disabled': {
-                    backgroundColor: theme.palette.action.disabledBackground
-                }
-            },
-            outlined: {
-                backgroundColor: theme.palette.background.paper,
-                borderColor: alpha(paletteData.Grey.A900, 0.28),
-                color: alpha(theme.palette.text.primary, 0.9),
-                '&:hover': {
-                    backgroundColor: alpha(theme.palette.primary.main, 0.04),
-                    color: theme.palette.primary.main,
-                    borderColor: alpha(theme.palette.primary.main, 0.32)
-                },
-                '&.Mui-disabled': {
-                    backgroundColor: theme.palette.background.paper,
-                    color: alpha(theme.palette.grey[900], 0.38),
-                    borderColor: alpha(paletteData.Grey.A900, 0.28)
-                }
-            },
-            text: {
-            // Text button overrides
-            },
-            sizeSmall: {
-                padding: '6px 16px'
-            },
-            containedSizeSmall: {
-                paddingTop: '7px',
-                paddingBottom: '7px'
-            },
-            sizeMedium: {
-                padding: '9px 24px'
-            },
-            containedSizeMedium: {
-                paddingTop: '10px',
-                paddingBottom: '10px'
-            },
-            sizeLarge: {
-                padding: '12px 32px'
-            },
-            containedSizeLarge: {
-                paddingTop: '13px',
-                paddingBottom: '13px'
-            }
-        }
-    };
-};

package/dist/lib/overrides/checkboxOverrides.d.ts

@@ -1,2 +0,0 @@
-import { Components } from '@mui/material/styles';
-export declare const checkboxOverrides: () => Components["MuiCheckbox"];

package/dist/lib/overrides/checkboxOverrides.js

@@ -1,11 +0,0 @@
-export const checkboxOverrides = () => {
-    return {
-        styleOverrides: {
-            root: {
-                '&.MuiCheckbox-sizeSmall': {
-                    padding: '6px'
-                }
-            }
-        }
-    };
-};

package/dist/lib/overrides/datePickerOverrides.d.ts

@@ -1,2 +0,0 @@
-import { Theme, Components } from '@mui/material/styles';
-export declare const datePickerOverrides: (theme: Theme) => Components;