docs: add Storybook MDX docs for 8 undocumented hooks (#398)

* Initial plan

* Initial plan

* docs: add MDX documentation for 8 missing hooks

Agent-Logs-Url: https://github.com/linn/react-components-library/sessions/20d84e38-5ee4-43e2-bd9b-7174d48bf428

Co-authored-by: lewisrenfrew <16683709+lewisrenfrew@users.noreply.github.com>

* Add missing Storybook stories for 13 components

Agent-Logs-Url: https://github.com/linn/react-components-library/sessions/50babd49-3d47-4790-8207-8b4ca1b63fee

Co-authored-by: lewisrenfrew <16683709+lewisrenfrew@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: lewisrenfrew <16683709+lewisrenfrew@users.noreply.github.com>

Author: Copilot

src/components/AddressUtility.stories.js

@@ -0,0 +1,83 @@
+import { MemoryRouter } from 'react-router-dom';
+import { fn } from 'storybook/test';
+import AddressUtility from './AddressUtility';
+
+const sampleCountries = [
+    { id: 'GB', name: 'United Kingdom', countryCode: 'GB', countryName: 'United Kingdom' },
+    { id: 'US', name: 'United States', countryCode: 'US', countryName: 'United States' },
+    { id: 'DE', name: 'Germany', countryCode: 'DE', countryName: 'Germany' }
+];
+
+const sampleAddresses = [
+    {
+        id: 1,
+        name: '1 Linn Products Way',
+        description: 'Glasgow, G76 0EQ',
+        addressId: 1,
+        postCode: 'G76 0EQ',
+        countryCode: 'GB',
+        href: '/addresses/1'
+    }
+];
+
+export default {
+    title: 'Components/AddressUtility',
+    component: AddressUtility,
+    tags: ['autodocs'],
+    decorators: [
+        Story => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ],
+    args: {
+        createAddress: fn(),
+        createAddressLoading: false,
+        selectAddress: fn(),
+        searchCountries: fn(),
+        searchAddresses: fn(),
+        countriesSearchResults: [],
+        countriesSearchLoading: false,
+        addressSearchResults: [],
+        addressSearchLoading: false,
+        clearAddressesSearch: fn(),
+        clearCountriesSearch: fn(),
+        defaultAddressee: false,
+        isActive: false,
+        setIsActive: fn()
+    }
+};
+
+export const Default = {};
+
+export const DialogOpen = {
+    name: 'Dialog open',
+    args: {
+        isActive: true
+    }
+};
+
+export const WithCountryResults = {
+    name: 'Dialog open with country results',
+    args: {
+        isActive: true,
+        countriesSearchResults: sampleCountries
+    }
+};
+
+export const WithAddressResults = {
+    name: 'Dialog open with address results',
+    args: {
+        isActive: true,
+        addressSearchResults: sampleAddresses
+    }
+};
+
+export const LoadingAddress = {
+    name: 'Loading address creation',
+    args: {
+        isActive: true,
+        createAddressLoading: true
+    }
+};

src/components/EntityList.stories.js

@@ -0,0 +1,60 @@
+import { MemoryRouter } from 'react-router-dom';
+import { fn } from 'storybook/test';
+import EntityList from './EntityList';
+
+const sampleEntities = [
+    { id: 1, name: 'Widget A', href: '/products/1' },
+    { id: 2, name: 'Widget B', href: '/products/2' },
+    { id: 3, name: 'Gadget Pro', href: '/products/3' }
+];
+
+const entitiesWithDescription = [
+    { id: 'WA', description: 'Widest widget', href: '/products/WA' },
+    { id: 'WB', description: 'Mid-range widget', href: '/products/WB' },
+    { id: 'GP', description: 'Professional gadget', href: '/products/GP' }
+];
+
+export default {
+    title: 'Components/EntityList',
+    component: EntityList,
+    tags: ['autodocs'],
+    decorators: [
+        Story => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ],
+    args: {
+        title: 'Products',
+        entityList: sampleEntities,
+        entityId: 'id',
+        descriptionFieldName: null,
+        hasExternalLinks: false
+    }
+};
+
+export const Default = {};
+
+export const WithDescriptions = {
+    name: 'With description field',
+    args: {
+        entityList: entitiesWithDescription,
+        entityId: 'id',
+        descriptionFieldName: 'description'
+    }
+};
+
+export const ExternalLinks = {
+    name: 'External links',
+    args: {
+        hasExternalLinks: true
+    }
+};
+
+export const NoTitle = {
+    name: 'No title',
+    args: {
+        title: ''
+    }
+};

src/components/FileUploader.stories.js

@@ -0,0 +1,55 @@
+import { fn } from 'storybook/test';
+import FileUploader from './FileUploader';
+
+export default {
+    title: 'Components/FileUploader',
+    component: FileUploader,
+    tags: ['autodocs'],
+    args: {
+        title: 'File Uploader',
+        helperText: 'Upload a File',
+        initiallyExpanded: true,
+        loading: false,
+        result: null,
+        snackbarVisible: false,
+        setSnackbarVisible: fn(),
+        onFileSelect: fn(),
+        doUpload: fn()
+    }
+};
+
+export const Default = {};
+
+export const Collapsed = {
+    args: {
+        initiallyExpanded: false
+    }
+};
+
+export const Loading = {
+    args: {
+        loading: true
+    }
+};
+
+export const WithError = {
+    name: 'Upload error',
+    args: {
+        result: {
+            success: false,
+            message: 'File upload failed',
+            errors: [
+                { descriptor: 'Row 1', message: 'Invalid format' },
+                { descriptor: 'Row 2', message: 'Missing required field' }
+            ]
+        }
+    }
+};
+
+export const CustomTitle = {
+    name: 'Custom title and helper text',
+    args: {
+        title: 'Import CSV',
+        helperText: 'Select a CSV file to import records'
+    }
+};

src/components/LinkField.stories.js

@@ -0,0 +1,66 @@
+import { MemoryRouter } from 'react-router-dom';
+import LinkField from './LinkField';
+
+export default {
+    title: 'Components/LinkField',
+    component: LinkField,
+    tags: ['autodocs'],
+    decorators: [
+        Story => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ],
+    args: {
+        value: 'View product details',
+        to: 'https://example.com/products/123',
+        external: true,
+        openLinksInNewTabs: false,
+        disabled: false,
+        label: '',
+        shouldRender: true
+    }
+};
+
+export const Default = {};
+
+export const WithLabel = {
+    name: 'With label',
+    args: {
+        label: 'Product Link',
+        value: 'Widget A'
+    }
+};
+
+export const OpenInNewTab = {
+    name: 'Open in new tab',
+    args: {
+        openLinksInNewTabs: true,
+        value: 'External resource'
+    }
+};
+
+export const Disabled = {
+    args: {
+        disabled: true,
+        value: 'Disabled link text'
+    }
+};
+
+export const NotRendered = {
+    name: 'Not rendered',
+    args: {
+        shouldRender: false,
+        value: 'This should not appear'
+    }
+};
+
+export const InternalLink = {
+    name: 'Internal link (router)',
+    args: {
+        external: false,
+        to: '/products/123',
+        value: 'View product'
+    }
+};

src/components/Navigation.stories.js

@@ -0,0 +1,106 @@
+import { SnackbarProvider } from 'notistack';
+import { fn } from 'storybook/test';
+import Navigation from './Navigation';
+
+const sampleSections = [
+    {
+        id: 'purchasing',
+        title: 'Purchasing',
+        columns: [
+            {
+                categories: [
+                    {
+                        title: 'Purchase Orders',
+                        items: [
+                            { title: 'Create PO', href: '#', showInMenu: true },
+                            { title: 'View POs', href: '#', showInMenu: true }
+                        ]
+                    },
+                    {
+                        title: 'Suppliers',
+                        items: [
+                            { title: 'Supplier List', href: '#', showInMenu: true },
+                            { title: 'Add Supplier', href: '#', showInMenu: true }
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        id: 'sales',
+        title: 'Sales',
+        columns: [
+            {
+                categories: [
+                    {
+                        title: 'Orders',
+                        items: [
+                            { title: 'Sales Orders', href: '#', showInMenu: true },
+                            { title: 'Invoices', href: '#', showInMenu: true }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+const sampleMyStuff = {
+    groups: [
+        {
+            items: [{ title: 'My Profile', href: '#/profile' }]
+        },
+        {
+            items: [{ title: 'My Settings', href: '#/settings' }]
+        }
+    ]
+};
+
+export default {
+    title: 'Components/Navigation',
+    component: Navigation,
+    tags: ['autodocs'],
+    decorators: [
+        Story => (
+            <SnackbarProvider maxSnack={3}>
+                <div style={{ height: '200px' }}>
+                    <Story />
+                </div>
+            </SnackbarProvider>
+        )
+    ],
+    args: {
+        sections: sampleSections,
+        loading: false,
+        username: 'jsmith',
+        myStuff: sampleMyStuff,
+        notifications: [],
+        handleSignOut: fn()
+    }
+};
+
+export const Default = {};
+
+export const Loading = {
+    args: {
+        loading: true
+    }
+};
+
+export const WithNotifications = {
+    name: 'With notifications',
+    args: {
+        notifications: [
+            { title: 'Order Approved', content: 'PO-12345 has been approved' },
+            { title: 'Low Stock Alert', content: 'Widget A is running low' }
+        ]
+    }
+};
+
+export const NoSections = {
+    name: 'No sections (empty bar)',
+    args: {
+        sections: null
+    }
+};

src/components/NotFound.stories.js

@@ -0,0 +1,9 @@
+import NotFound from './NotFound';
+
+export default {
+    title: 'Components/NotFound',
+    component: NotFound,
+    tags: ['autodocs']
+};
+
+export const Default = {};