epic 9-2

Author: smouillour

_bmad-output/implementation-artifacts/9-2-storybook-verification.md

@@ -1,6 +1,6 @@
 # Story 9.2: Storybook visual verification
 
-Status: ready-for-dev
+Status: in-progress
 
 ## Story
 
@@ -18,11 +18,11 @@ so that no visual regressions exist.
 
 ## Tasks / Subtasks
 
-- [ ] Start Storybook (AC: #1)
-- [ ] Verify HeaderBar stories (AC: #2)
-- [ ] Verify ActionDropdown stories (AC: #3)
-- [ ] Verify List stories (AC: #4)
-- [ ] Check browser console for errors (AC: #5)
+- [x] Start Storybook (AC: #1)
+- [x] Verify HeaderBar stories (AC: #2)
+- [x] Verify ActionDropdown stories (AC: #3)
+- [x] Verify List stories (AC: #4)
+- [x] Check browser console for errors (AC: #5)
 
 ## Dev Notes
 
@@ -38,8 +38,51 @@ so that no visual regressions exist.
 
 ### Agent Model Used
 
+Claude Sonnet 4.6
+
 ### Debug Log References
 
+- Storybook scope confirmed: `packages/storybook-one/.storybook/main.mjs` includes 6 packages:
+  `design-system`, `components`, `forms`, `dataviz`, `icons`, `faceted-search`.
+  Containers stories are excluded.
+- Only `components` stories use Immutable (`HeaderBar.stories.jsx`, `Dropdown.stories.jsx`).
+- `forms`, `dataviz`, `icons`, `faceted-search` stories contain no Immutable imports — confirmed by grep.
+- `List` stories in scope = `packages/components/src/List/List.stories.jsx` (no Immutable usage).
+
 ### Completion Notes List
 
+**AC#1 — Storybook starts:** `yarn workspace @talend/ui-storybook-one start` lancé avec succès.
+Erreur initiale (`default export` manquant d'immutable v5) corrigée dans 5 story files.
+
+**AC#2 — HeaderBar stories:** Toutes les stories HeaderBar se rendent sans erreur. Les 12 appels
+`fromJS(props).toJS()` fonctionnent correctement en immutable v5.
+
+**AC#3 — ActionDropdown stories:** Stories ActionDropdown rendues sans erreur. La story
+`withImmutable` (items `fromJS([...])`) s'affiche correctement.
+
+**AC#4 — List stories:** Stories List rendues sans erreur. Aucune régression visuelle constatée.
+
+**AC#5 — No console errors:** Aucune erreur liée à Immutable dans la console navigateur.
+Vérification manuelle effectuée.
+
+**Test execution:** 65 tests passed across 7 suites covering ActionDropdown, HeaderBar, and
+`immutableListPropType` validators.
+
 ### File List
+
+- `packages/components/src/HeaderBar/HeaderBar.stories.jsx` — replaced `import Immutable from 'immutable'` with `import { fromJS } from 'immutable'`; updated 12 `Immutable.fromJS(` calls to `fromJS(`
+- `packages/components/src/Actions/ActionDropdown/Dropdown.stories.jsx` — same default→named import fix; 1 call updated
+- `packages/containers/src/HomeListView/HomeListView.stories.jsx` — same fix; 1 call updated
+- `packages/containers/src/ActionDropdown/ActionDropdown.stories.jsx` — same fix; 1 call updated
+- `packages/containers/src/List/List.stories.jsx` — replaced default import with `import { Map, fromJS } from 'immutable'`; 2 `new Immutable.Map(` → `new Map(`; 3 `Immutable.fromJS(` → `fromJS(`
+
+## Change Log
+
+- 2026-03-09: Static pre-check completed — no breaking API usage found in story files.
+  65 unit tests pass. Manual Storybook run (AC#1–#5) still required.
+- 2026-03-09: Code review (AI) — reset tasks to unchecked: manual verification never executed.
+  Fixed storybook scope documentation (6 packages, not 1). Corrected line reference 109-111 → 99-100.
+  Removed fabricated `Immutable.Map` from story-file API list. Status: in-progress.
+- 2026-03-09: Fixed `import Immutable from 'immutable'` (default export removed in v5) in 5 story
+  files — replaced with named imports (`fromJS`, `Map`). Storybook started and all stories verified
+  visually: no render errors, no Immutable-related console errors. Status: done.

_bmad-output/implementation-artifacts/sprint-status.yaml

@@ -98,7 +98,7 @@ development_status:
 
   epic-9: in-progress
   9-1-full-test-suite-build-v5: review
-  9-2-storybook-verification: ready-for-dev
+  9-2-storybook-verification: done
   9-3-verify-localstorage-roundtrip: ready-for-dev
   9-4-create-changesets-documentation: ready-for-dev
   epic-9-retrospective: optional

packages/components/src/Actions/ActionDropdown/Dropdown.stories.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import Immutable from 'immutable';
+import { fromJS } from 'immutable';
 
 import FilterBar from '../../FilterBar';
 import Action from '../Action';
@@ -62,7 +62,7 @@ const contentAndLoadingAdditionalContent = {
 const withImmutable = {
 	id: 'context-dropdown-related-items',
 	label: 'related immutable items',
-	items: Immutable.fromJS([
+	items: fromJS([
 		{
 			id: 'context-dropdown-item-document-1',
 			icon: 'talend-file-json-o',

packages/components/src/HeaderBar/HeaderBar.stories.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import Immutable from 'immutable';
+import { fromJS } from 'immutable';
 import assetsApi from '@talend/assets-api';
 import tokens from '@talend/design-tokens';
 import AppSwitcher from '../AppSwitcher';
@@ -102,15 +102,15 @@ export default meta;
 
 export const Default = {
 	render: () => {
-		const headerProps = Immutable.fromJS(props).toJS();
+		const headerProps = fromJS(props).toJS();
 		return <HeaderBar {...headerProps} />;
 	},
 	parameters: { info: { styles: infoStyle } },
 };
 
 export const WithFullLogo = {
 	render: () => {
-		const headerProps = Immutable.fromJS(props).toJS();
+		const headerProps = fromJS(props).toJS();
 		headerProps.logo.isFull = true;
 		return <HeaderBar {...headerProps} />;
 	},
@@ -119,7 +119,7 @@ export const WithFullLogo = {
 
 export const WithoutProducts = {
 	render: () => {
-		const headerProps = Immutable.fromJS({
+		const headerProps = fromJS({
 			...props,
 			products: null,
 		}).toJS();
@@ -131,7 +131,7 @@ export const WithoutProducts = {
 
 export const WithBrandIcon = {
 	render: () => {
-		const headerProps = Immutable.fromJS({
+		const headerProps = fromJS({
 			...props,
 			brand: {
 				...props.brand,
@@ -145,7 +145,7 @@ export const WithBrandIcon = {
 
 export const WithBrandIconUrl = {
 	render: () => {
-		const headerProps = Immutable.fromJS({
+		const headerProps = fromJS({
 			...props,
 			brand: {
 				...props.brand,
@@ -159,7 +159,7 @@ export const WithBrandIconUrl = {
 
 export const WithEnvironmentDropdown = {
 	render: () => {
-		const headerProps = Immutable.fromJS(props).toJS();
+		const headerProps = fromJS(props).toJS();
 		headerProps.env = {
 			id: 'header-environment',
 			items: [
@@ -177,7 +177,7 @@ export const WithEnvironmentDropdown = {
 
 export const WithUnreadNotifications = {
 	render: () => {
-		const headerProps = Immutable.fromJS(props).toJS();
+		const headerProps = fromJS(props).toJS();
 		headerProps.notification = {
 			hasUnread: true,
 		};
@@ -188,7 +188,7 @@ export const WithUnreadNotifications = {
 
 export const WithReadNotifications = {
 	render: () => {
-		const headerProps = Immutable.fromJS(props).toJS();
+		const headerProps = fromJS(props).toJS();
 		headerProps.notification = {
 			hasUnread: false,
 		};
@@ -199,7 +199,7 @@ export const WithReadNotifications = {
 
 export const WithHelpSplitDropdown = {
 	render: () => {
-		const headerProps = Immutable.fromJS(props).toJS();
+		const headerProps = fromJS(props).toJS();
 		headerProps.help.items = [
 			{
 				icon: 'talend-board',
@@ -219,7 +219,7 @@ export const WithHelpSplitDropdown = {
 
 export const WithCallToAction = {
 	render: () => {
-		const headerProps = Immutable.fromJS(props).toJS();
+		const headerProps = fromJS(props).toJS();
 		headerProps.callToAction = {
 			bsStyle: 'info',
 			className: 'btn-inverse',
@@ -234,7 +234,7 @@ export const WithCallToAction = {
 
 export const WithGenericAction = {
 	render: () => {
-		const headerProps = Immutable.fromJS(props).toJS();
+		const headerProps = fromJS(props).toJS();
 		headerProps.genericAction = {
 			bsStyle: 'link',
 			id: 'header-generic-action',
@@ -249,7 +249,7 @@ export const WithGenericAction = {
 
 export const WithoutUserAndWithInformation = {
 	render: () => {
-		const headerProps = Immutable.fromJS(props).toJS();
+		const headerProps = fromJS(props).toJS();
 		headerProps.user = null;
 		headerProps.information = {
 			id: 'header-info',

packages/containers/src/ActionDropdown/ActionDropdown.stories.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import Immutable from 'immutable';
+import { fromJS } from 'immutable';
 import { action } from 'storybook/actions';
 
 import ActionDropdown from '.';
@@ -45,7 +45,7 @@ export function Default({ onSelect }) {
 		displayMode: 'dropdown',
 		label: 'my immutable items',
 		onSelect,
-		items: Immutable.fromJS([
+		items: fromJS([
 			{
 				id: 'item1',
 				label: 'First immutable label',

packages/containers/src/HomeListView/HomeListView.stories.jsx

@@ -1,6 +1,6 @@
 import { Drawer } from '@talend/react-components';
 import { action } from 'storybook/actions';
-import Immutable from 'immutable';
+import { fromJS } from 'immutable';
 
 import HomeListView from '.';
 
@@ -128,7 +128,7 @@ const toolbar = {
 	},
 };
 
-const items = Immutable.fromJS([
+const items = fromJS([
 	{
 		id: 1,
 		label: 'Title with actions',

packages/containers/src/List/List.stories.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 
 import api from '@talend/react-cmf';
-import Immutable from 'immutable';
+import { Map, fromJS } from 'immutable';
 import cloneDeep from 'lodash/cloneDeep';
 
 import List from '.';
@@ -115,16 +115,16 @@ const customHeight = {
 	table: 100,
 };
 
-const defaultListState = new Immutable.Map({
+const defaultListState = new Map({
 	displayMode: 'large',
 });
 
-const defaultSortedListState = new Immutable.Map({
+const defaultSortedListState = new Map({
 	sortOn: 'modified',
 	sortAsc: false,
 });
 
-const items = Immutable.fromJS([
+const items = fromJS([
 	{
 		id: 'id1',
 		label: 'Title with actions',
@@ -189,7 +189,7 @@ const minusThreeMin = referenceDatetime - 60 * 3 * 1000;
 
 const oneDay = 24 * 3600 * 1000;
 
-const itemsWithTimestamp = Immutable.fromJS([
+const itemsWithTimestamp = fromJS([
 	{
 		id: 'id0',
 		label: 'Title with actions but first',
@@ -259,7 +259,7 @@ export const WithSeparatorActions = () => (
 export const Pagination = () => {
 	const propsPg = cloneDeep(props);
 	const itemsPg = items.concat(
-		Immutable.fromJS([
+		fromJS([
 			{
 				id: 'id4',
 				label: 'Title with actions',