Add Storybook stories for all components and hooks (#397)

* Initial plan

* Add Storybook stories for all components and hook MDX docs

Agent-Logs-Url: https://github.com/linn/react-components-library/sessions/9a479ef6-d099-463a-8484-230d8cde1bac

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

package-lock.json

@@ -0,0 +1,27 @@
+import { fn } from 'storybook/test';
+import BackButton from './BackButton';
+
+export default {
+    title: 'Components/BackButton',
+    component: BackButton,
+    tags: ['autodocs'],
+    args: {
+        backClick: fn()
+    }
+};
+
+export const Default = {};
+
+export const CustomText = {
+    name: 'Custom text',
+    args: {
+        text: 'Go Back'
+    }
+};
+
+export const LongCustomText = {
+    name: 'Long custom text',
+    args: {
+        text: 'Return to previous page'
+    }
+};

src/components/BackButton.stories.js

@@ -0,0 +1,45 @@
+import { fn } from 'storybook/test';
+import Breadcrumbs from './Breadcrumbs';
+
+export default {
+    title: 'Components/Breadcrumbs',
+    component: Breadcrumbs,
+    tags: ['autodocs'],
+    args: {
+        navigate: fn(),
+        homeUrl: 'https://app.linn.co.uk',
+        rootPathLength: 2,
+        location: { pathname: '/purchasing/orders/12345' }
+    }
+};
+
+export const Default = {};
+
+export const ShallowPath = {
+    name: 'Shallow path',
+    args: {
+        location: { pathname: '/products' }
+    }
+};
+
+export const DeepPath = {
+    name: 'Deep path',
+    args: {
+        location: { pathname: '/manufacturing/works-orders/12345/operations' }
+    }
+};
+
+export const TrailingSlash = {
+    name: 'Trailing slash (normalised)',
+    args: {
+        location: { pathname: '/sales/invoices/' }
+    }
+};
+
+export const CustomHomeUrl = {
+    name: 'Custom home URL',
+    args: {
+        homeUrl: 'https://internal.example.com',
+        location: { pathname: '/admin/settings' }
+    }
+};

src/components/Breadcrumbs.stories.js

@@ -0,0 +1,39 @@
+import { fn } from 'storybook/test';
+import CheckboxWithLabel from './CheckboxWithLabel';
+
+export default {
+    title: 'Components/CheckboxWithLabel',
+    component: CheckboxWithLabel,
+    tags: ['autodocs'],
+    args: {
+        onChange: fn(),
+        label: 'Accept terms and conditions',
+        checked: false,
+        color: 'primary'
+    }
+};
+
+export const Default = {};
+
+export const Checked = {
+    args: {
+        checked: true,
+        label: 'Subscribe to newsletter'
+    }
+};
+
+export const Unchecked = {
+    args: {
+        checked: false,
+        label: 'Subscribe to newsletter'
+    }
+};
+
+export const SecondaryColour = {
+    name: 'Secondary colour',
+    args: {
+        checked: true,
+        color: 'secondary',
+        label: 'Secondary checkbox'
+    }
+};

src/components/CheckboxWithLabel.stories.js

@@ -0,0 +1,55 @@
+import { fn } from 'storybook/test';
+import ConfirmDialog from './ConfirmDialog';
+
+export default {
+    title: 'Components/ConfirmDialog',
+    component: ConfirmDialog,
+    tags: ['autodocs'],
+    args: {
+        closeDialog: fn(),
+        onConfirm: fn(),
+        onCancel: fn(),
+        visible: true,
+        title: 'Are you sure?',
+        primaryText: 'This action cannot be undone.',
+        secondaryText: null,
+        confirmButtonText: 'Confirm',
+        cancelButtonText: 'Cancel',
+        maxWidth: 'md'
+    }
+};
+
+export const Default = {};
+
+export const WithSecondaryText = {
+    name: 'With secondary text',
+    args: {
+        primaryText: 'You are about to delete this record.',
+        secondaryText: 'All associated data will be permanently removed.'
+    }
+};
+
+export const DeleteConfirmation = {
+    name: 'Delete confirmation',
+    args: {
+        title: 'Delete record?',
+        primaryText: 'Are you sure you want to delete this item?',
+        secondaryText: 'This action is permanent and cannot be reversed.',
+        confirmButtonText: 'Delete',
+        cancelButtonText: 'Keep'
+    }
+};
+
+export const Closed = {
+    args: {
+        visible: false
+    }
+};
+
+export const NarrowWidth = {
+    name: 'Narrow width',
+    args: {
+        maxWidth: 'sm',
+        primaryText: 'Confirm this action.'
+    }
+};

src/components/ConfirmDialog.stories.js

@@ -0,0 +1,27 @@
+import { MemoryRouter } from 'react-router-dom';
+import CreateButton from './CreateButton';
+
+export default {
+    title: 'Components/CreateButton',
+    component: CreateButton,
+    tags: ['autodocs'],
+    decorators: [
+        Story => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ],
+    args: {
+        createUrl: '/items/create',
+        disabled: false
+    }
+};
+
+export const Default = {};
+
+export const Disabled = {
+    args: {
+        disabled: true
+    }
+};

src/components/CreateButton.stories.js

@@ -0,0 +1,61 @@
+import { fn } from 'storybook/test';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import DatePicker from './DatePicker';
+
+export default {
+    title: 'Components/DatePicker',
+    component: DatePicker,
+    tags: ['autodocs'],
+    decorators: [
+        Story => (
+            <LocalizationProvider dateAdapter={AdapterMoment}>
+                <Story />
+            </LocalizationProvider>
+        )
+    ],
+    args: {
+        onChange: fn(),
+        label: 'Select date',
+        value: '2025-06-15T00:00:00.000Z',
+        disabled: false,
+        required: false,
+        minDate: null,
+        maxDate: null
+    }
+};
+
+export const Default = {};
+
+export const WithLabel = {
+    name: 'With label',
+    args: {
+        label: 'Date of Birth',
+        value: '1990-03-22T00:00:00.000Z'
+    }
+};
+
+export const Required = {
+    args: {
+        label: 'Required Date',
+        required: true
+    }
+};
+
+export const Disabled = {
+    args: {
+        label: 'Read-only Date',
+        disabled: true,
+        value: '2024-01-01T00:00:00.000Z'
+    }
+};
+
+export const WithMinMaxDate = {
+    name: 'With min/max date',
+    args: {
+        label: 'Restricted Date',
+        minDate: '2025-01-01T00:00:00.000Z',
+        maxDate: '2025-12-31T00:00:00.000Z',
+        value: '2025-06-15T00:00:00.000Z'
+    }
+};

src/components/DatePicker.stories.js

@@ -0,0 +1,49 @@
+import { fn } from 'storybook/test';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import DateTimePicker from './DateTimePicker';
+
+export default {
+    title: 'Components/DateTimePicker',
+    component: DateTimePicker,
+    tags: ['autodocs'],
+    decorators: [
+        Story => (
+            <LocalizationProvider dateAdapter={AdapterMoment}>
+                <Story />
+            </LocalizationProvider>
+        )
+    ],
+    args: {
+        onChange: fn(),
+        label: 'Select date and time',
+        value: '2025-06-15T14:30:00.000Z',
+        disabled: false,
+        required: false
+    }
+};
+
+export const Default = {};
+
+export const WithLabel = {
+    name: 'With label',
+    args: {
+        label: 'Appointment Date & Time',
+        value: '2025-09-01T09:00:00.000Z'
+    }
+};
+
+export const Required = {
+    args: {
+        label: 'Required Date & Time',
+        required: true
+    }
+};
+
+export const Disabled = {
+    args: {
+        label: 'Read-only Date & Time',
+        disabled: true,
+        value: '2024-12-25T12:00:00.000Z'
+    }
+};