@linagora/twake-mui 1.5.0 → 1.6.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [1.6.1](https://github.com/linagora/twake-ui/compare/v1.6.0...v1.6.1) (2026-05-06)
+
+
+### Bug Fixes
+
+* trigger release ([be0544c](https://github.com/linagora/twake-ui/commit/be0544c8603365348ea02b9c5af59ce4254f7fc1))
+
+# [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/lib/makeDarkOverrides.js

@@ -1,39 +1,8 @@
 import { alpha } from '@mui/material/styles';
-import { accordionOverrides } from './overrides/accordionOverrides';
-import { autocompleteOverrides } from './overrides/autocompleteOverrides';
-import { avatarOverrides } from './overrides/avatarOverrides';
-import { backdropOverrides } from './overrides/backdropOverrides';
-import { buttonOverrides } from './overrides/buttonOverrides';
-import { checkboxOverrides } from './overrides/checkboxOverrides';
-import { datePickerOverrides } from './overrides/datePickerOverrides';
-import { dialogOverrides, dialogTitleOverrides, dialogContentOverrides, dialogActionsOverrides } from './overrides/dialogOverrides';
-import { iconButtonOverrides } from './overrides/iconButtonOverrides';
-import { menuItemOverrides } from './overrides/menuItemOverrides';
-import { popoverOverrides } from './overrides/popoverOverrides';
-import { swipeableDrawerOverrides } from './overrides/swipeableDrawerOverrides';
-import { textFieldOverrides, outlinedInputOverrides, inputBaseOverrides, selectOverrides } from './overrides/textFieldOverrides';
-import { toggleButtonGroupOverrides, toggleButtonOverrides } from './overrides/toggleButtonOverrides';
+import { merge } from 'lodash';
+import { makeLightOverrides } from './makeLightOverrides';
 export const makeDarkOverrides = (theme) => {
-    const datePickerOverridesResult = datePickerOverrides(theme);
-    const accordionOverridesResult = accordionOverrides(theme);
-    return {
-        MuiButton: buttonOverrides(theme),
-        MuiTextField: textFieldOverrides(),
-        MuiOutlinedInput: outlinedInputOverrides(),
-        MuiInputBase: inputBaseOverrides(),
-        MuiSelect: selectOverrides(),
-        MuiAutocomplete: autocompleteOverrides(),
-        MuiDialog: dialogOverrides(),
-        MuiDialogTitle: dialogTitleOverrides(),
-        MuiDialogContent: dialogContentOverrides(),
-        MuiDialogActions: dialogActionsOverrides(),
-        MuiPopover: popoverOverrides(),
-        MuiAvatar: avatarOverrides(theme),
-        MuiToggleButtonGroup: toggleButtonGroupOverrides(),
-        MuiToggleButton: toggleButtonOverrides(theme),
-        MuiIconButton: iconButtonOverrides(),
-        MuiCheckbox: checkboxOverrides(),
-        MuiBackdrop: backdropOverrides(theme),
+    const makeOverridesForDarkTheme = (theme) => ({
         MuiTypography: {
             styleOverrides: {
                 root: {
@@ -43,17 +12,8 @@ export const makeDarkOverrides = (theme) => {
                 // Typography caption overrides will be implemented later
                 }
             }
-        },
-        ...datePickerOverridesResult,
-        MuiAccordion: accordionOverridesResult.MuiAccordion,
-        MuiAccordionSummary: accordionOverridesResult.MuiAccordionSummary,
-        MuiCssBaseline: {
-            styleOverrides: {
-                ...(datePickerOverridesResult.MuiCssBaseline?.styleOverrides || {}),
-                ...(accordionOverridesResult.MuiCssBaseline?.styleOverrides || {})
-            }
-        },
-        MuiMenuItem: menuItemOverrides(theme),
-        MuiSwipeableDrawer: swipeableDrawerOverrides(theme)
-    };
+        }
+    });
+    const DarkOverrides = merge(makeLightOverrides(theme), makeOverridesForDarkTheme(theme));
+    return DarkOverrides;
 };