@linagora/twake-mui 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.6.0](https://github.com/linagora/twake-ui/compare/v1.5.0...v1.6.0) (2026-04-22)
+
+
+### Bug Fixes
+
+* ESM/CJS mismatch in exports ([bd31d2d](https://github.com/linagora/twake-ui/commit/bd31d2db3b8993da5cafe582cb350441a7d05685))
+
+
+### Features
+
+* Add all storybook/argos config files ([6a774a9](https://github.com/linagora/twake-ui/commit/6a774a97cedfacaa8387f3b4d5b75503efd7ae65))
+* Add packages for storybook and argos ([729e937](https://github.com/linagora/twake-ui/commit/729e93734f0e09d639871410f0256cbba0939ad9))
+* Add storybook stories ([9a141ca](https://github.com/linagora/twake-ui/commit/9a141ca06d2c5cfd9ec8a8142a5c5a34452cfd90))
+
 # [1.5.0](https://github.com/linagora/twake-ui/compare/v1.4.0...v1.5.0) (2026-04-14)
 
 

package/README.md

@@ -70,6 +70,43 @@ This package is part of the `twake-ui` monorepo.
 npm run build
 ```
 
+### Storybook
+
+Use Storybook for isolated component development and visual testing:
+
+```bash
+# Start Storybook development server
+npm run doc
+
+# Build static Storybook
+npm run build:doc
+```
+
+Stories are located in:
+- `src/components/**/*.stories.tsx` - Component stories (e.g., Avatar)
+- `src/stories/*.stories.tsx` - Override showcase stories (Button, Input, Dialog, etc.)
+
+Access Storybook at http://localhost:6006
+
+### Visual Regression Testing
+
+We use Argos for visual regression testing. Screenshots are automatically captured from Storybook stories during CI.
+
+To run visual tests locally (requires ARGOS_TOKEN):
+
+```bash
+npm run build:doc
+npm run screenshots
+```
+
+To add visual regression coverage to a story:
+
+```typescript
+export const MyStory = {
+  tags: ['argos']
+}
+```
+
 ### Local Development
 
 To use this package locally in another project:
@@ -92,6 +129,23 @@ Or use file path in package.json:
 }
 ```
 
+### About dependencies
+
+Because of inter-dependencies between these packages:
+- `storybook`, `@storybook/*`
+- `vite`, `@vitejs/*`
+- `vitest`, `@vitest/*`
+- `@argos-ci/*`, `playwright`
+
+you may encounter problem to install packages. So you can:
+
+```bash
+rm -rf node_modules packages/twake-mui/node_modules package-lock.json
+npm install
+```
+
+We can maybe use **pnpm** in the future that support hoisting disabling via `.npmrc`
+
 ## License
 
 MIT

package/dist/components/Avatar/Avatar.stories.d.ts

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

package/dist/components/Avatar/Avatar.stories.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { supportedColors } from './helpers';
+import { Avatar } from './index';
+const meta = {
+    title: 'Avatar',
+    component: Avatar,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        color: {
+            control: 'select',
+            options: ['none', ...supportedColors]
+        },
+        size: {
+            control: 'select',
+            options: ['xs', 's', 'm', 'l', 'xl']
+        },
+        border: { control: 'boolean' },
+        innerBorder: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        display: {
+            control: 'select',
+            options: ['initial', 'inline']
+        }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'JD'
+    }
+};
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' } },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Sizes"),
+            React.createElement("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' } },
+                React.createElement(Avatar, { size: "xs" }, "XS"),
+                React.createElement(Avatar, { size: "s" }, "S"),
+                React.createElement(Avatar, { size: "m" }, "M"),
+                React.createElement(Avatar, { size: "l" }, "L"),
+                React.createElement(Avatar, { size: "xl" }, "XL"))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Colors"),
+            React.createElement("div", { style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, supportedColors.map(color => (React.createElement(Avatar, { key: color, color: color, size: "l" }, color.slice(0, 2).toUpperCase()))))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Name-based Colors"),
+            React.createElement("div", { style: { display: 'flex', gap: '16px' } },
+                React.createElement(Avatar, { size: "l" }, "Alice"),
+                React.createElement(Avatar, { size: "l" }, "Bob"),
+                React.createElement(Avatar, { size: "l" }, "Charlie"),
+                React.createElement(Avatar, { size: "l" }, "Diana"))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "With Image"),
+            React.createElement("div", { style: { display: 'flex', gap: '16px' } },
+                React.createElement(Avatar, { src: "https://i.pravatar.cc/150?img=11", alt: "User 1", size: "l" }),
+                React.createElement(Avatar, { src: "https://i.pravatar.cc/150?img=12", alt: "User 2", size: "l" }),
+                React.createElement(Avatar, { src: "https://i.pravatar.cc/150?img=13", alt: "User 3", size: "l" }))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Border Variants"),
+            React.createElement("div", { style: { display: 'flex', gap: '16px' } },
+                React.createElement(Avatar, { size: "l" }, "Default"),
+                React.createElement(Avatar, { size: "l", border: true }, "Border"),
+                React.createElement(Avatar, { size: "l", innerBorder: true }, "Inner"),
+                React.createElement(Avatar, { size: "l", border: true, innerBorder: true }, "Both"))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Disabled State"),
+            React.createElement("div", { style: { display: 'flex', gap: '16px' } },
+                React.createElement(Avatar, { size: "l", disabled: true }, "D"),
+                React.createElement(Avatar, { size: "l", disabled: true, src: "https://i.pravatar.cc/150?img=14", alt: "Disabled" })))))
+};

package/dist/stories/Button.stories.d.ts

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

package/dist/stories/Button.stories.js

@@ -0,0 +1,43 @@
+import { Button, Stack } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'Button',
+    component: Button,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs']
+};
+export default meta;
+export const Docs = {
+    args: {
+        variant: 'contained',
+        children: 'Button'
+    }
+};
+// Visual Regression - All variants combined
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Variants"),
+            React.createElement(Stack, { direction: "row", spacing: 2 },
+                React.createElement(Button, { variant: "contained" }, "Contained"),
+                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(Button, { variant: "contained", color: "primary" }, "Primary"),
+                React.createElement(Button, { variant: "contained", color: "secondary" }, "Secondary"),
+                React.createElement(Button, { variant: "contained", color: "error" }, "Error"))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Sizes"),
+            React.createElement(Stack, { direction: "row", spacing: 2, sx: { alignItems: 'center' } },
+                React.createElement(Button, { variant: "contained", size: "small" }, "Small"),
+                React.createElement(Button, { variant: "contained", size: "medium" }, "Medium"),
+                React.createElement(Button, { variant: "contained", size: "large" }, "Large"))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "States"),
+            React.createElement(Stack, { direction: "row", spacing: 2 },
+                React.createElement(Button, { variant: "contained" }, "Normal"),
+                React.createElement(Button, { variant: "contained", disabled: true }, "Disabled")))))
+};

package/dist/stories/Dialog.stories.d.ts

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

package/dist/stories/Dialog.stories.js

@@ -0,0 +1,40 @@
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Stack } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'Dialog',
+    component: Dialog,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs']
+};
+export default meta;
+// Basic Dialog with open/close state
+const BasicDialogComponent = () => {
+    const [open, setOpen] = React.useState(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { variant: "contained", onClick: () => setOpen(true) }, "Open Dialog"),
+        React.createElement(Dialog, { open: open, onClose: () => setOpen(false) },
+            React.createElement(DialogTitle, null, "Dialog Title"),
+            React.createElement(DialogContent, null,
+                React.createElement(DialogContentText, null, "This is a basic dialog with a title, content, and action buttons. You can put any content here.")),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { onClick: () => setOpen(false) }, "Cancel"),
+                React.createElement(Button, { onClick: () => setOpen(false), variant: "contained" }, "Confirm")))));
+};
+export const Default = {
+    render: () => React.createElement(BasicDialogComponent, null)
+};
+// Visual Regression - Dialog styles
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Dialog Components"),
+            React.createElement(Stack, { spacing: 2 },
+                React.createElement(Dialog, { open: 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.")),
+                    React.createElement(DialogActions, null,
+                        React.createElement(Button, null, "Cancel"),
+                        React.createElement(Button, { variant: "contained" }, "Confirm")))))))
+};

package/dist/stories/Input.stories.d.ts

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

package/dist/stories/Input.stories.js

@@ -0,0 +1,41 @@
+import { TextField, Select, MenuItem, Stack, Box } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'Input',
+    component: TextField,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Label',
+        variant: 'outlined',
+        defaultValue: 'Sample text'
+    }
+};
+// Visual Regression - All inputs combined
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "TextField Variants"),
+            React.createElement(Stack, { spacing: 2 },
+                React.createElement(TextField, { label: "Outlined", variant: "outlined", defaultValue: "Sample text" }),
+                React.createElement(TextField, { label: "Filled", variant: "filled", defaultValue: "Sample text" }),
+                React.createElement(TextField, { label: "Standard", variant: "standard", defaultValue: "Sample text" }))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "TextField States"),
+            React.createElement(Stack, { spacing: 2 },
+                React.createElement(TextField, { label: "Normal", variant: "outlined", defaultValue: "Sample text" }),
+                React.createElement(TextField, { label: "Disabled", variant: "outlined", defaultValue: "Cannot edit", disabled: true }),
+                React.createElement(TextField, { label: "Error", variant: "outlined", defaultValue: "Invalid value", error: true, helperText: "This field has an error" }),
+                React.createElement(TextField, { label: "Required", variant: "outlined", required: true }))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Select"),
+            React.createElement(Box, { sx: { minWidth: 200 } },
+                React.createElement(Select, { value: 10, fullWidth: true },
+                    React.createElement(MenuItem, { value: 10 }, "Ten"),
+                    React.createElement(MenuItem, { value: 20 }, "Twenty"),
+                    React.createElement(MenuItem, { value: 30 }, "Thirty"))))))
+};

package/dist/stories/Selection.stories.d.ts

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

package/dist/stories/Selection.stories.js

@@ -0,0 +1,37 @@
+import FormatBoldIcon from '@mui/icons-material/FormatBold';
+import FormatItalicIcon from '@mui/icons-material/FormatItalic';
+import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
+import { Checkbox, FormControlLabel, ToggleButton, ToggleButtonGroup, Stack, Box } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'Selection',
+    component: Checkbox,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {
+    render: () => React.createElement(FormControlLabel, { control: React.createElement(Checkbox, null), label: "Checkbox" })
+};
+// Visual Regression - All selection components
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Checkbox States"),
+            React.createElement(Stack, { direction: "row", spacing: 4 },
+                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: false }), label: "Unchecked" }),
+                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: true }), label: "Checked" }),
+                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { indeterminate: true }), label: "Indeterminate" }),
+                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { disabled: true }), label: "Disabled" }))),
+        React.createElement("section", null,
+            React.createElement("h3", { style: { marginBottom: '12px' } }, "Toggle Buttons"),
+            React.createElement(Box, null,
+                React.createElement(ToggleButtonGroup, { value: ['bold'] },
+                    React.createElement(ToggleButton, { value: "bold", "aria-label": "bold" },
+                        React.createElement(FormatBoldIcon, null)),
+                    React.createElement(ToggleButton, { value: "italic", "aria-label": "italic" },
+                        React.createElement(FormatItalicIcon, null)),
+                    React.createElement(ToggleButton, { value: "underlined", "aria-label": "underlined" },
+                        React.createElement(FormatUnderlinedIcon, null)))))))
+};

package/dist/stories/Typography.stories.d.ts

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

package/dist/stories/Typography.stories.js

@@ -0,0 +1,45 @@
+import { Typography, Paper, Stack } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'Typography',
+    component: Typography,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {
+    args: {
+        variant: 'body1',
+        children: 'This is sample typography text.'
+    }
+};
+// 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"))))))
+};

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@linagora/twake-mui",
-  "version": "1.5.0",
+  "type": "module",
+  "version": "1.6.0",
   "description": "MUI v7 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -21,9 +22,8 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     }
   },
   "main": "dist/index.js",
@@ -38,36 +38,44 @@
   },
   "scripts": {
     "build": "tsc",
+    "build:doc": "storybook build --output-dir storybook-static",
     "start": "tsc --watch",
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint src --ext .ts,.tsx --fix",
-    "clean": "rm -rf dist"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "clean": "rm -rf dist",
+    "doc": "storybook dev -p 6006",
+    "screenshots": "vitest run"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
     "@mui/material": "^7.1.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "@types/react": "18.3.26",
-    "@types/react-dom": "18.3.7",
-    "cozy-tsconfig": "^1.9.0",
-    "eslint": "10.1.0",
-    "eslint-config-cozy-app": "7.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": false
-    },
-    "react-dom": {
-      "optional": false
-    }
+    "@argos-ci/cli": "4.2.0",
+    "@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",
+    "@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",
+    "@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",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "10.3.5",
+    "vite": "8.0.9",
+    "vitest": "4.1.5"
   }
 }