Code Diff

import { Meta, StoryObj } from '@storybook/react-vite';

import { CodeDiff, CodeDiffFile } from './CodeDiff';

const composerJsonDiff = `diff --git a/composer.json b/composer.json
index 3f2a9c1..8d41e7b 100644
--- a/composer.json
+++ b/composer.json
@@ -24,7 +24,7 @@
         "drupal/core-composer-scaffold": "^10.3",
         "drupal/core-recommended": "^10.3",
         "drupal/pantheon_advanced_page_cache": "^2.3",
-        "drupal/pathauto": "^1.8",
+        "drupal/pathauto": "^1.13",
         "drupal/redis": "^1.8",
         "drush/drush": "^12.5"
     },`;

const composerLockDiff = `diff --git a/composer.lock b/composer.lock
index b7c0e52..14fa9d3 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4521,11 +4521,11 @@
         },
         {
             "name": "drupal/pathauto",
-            "version": "1.8.0",
+            "version": "1.13.0",
             "source": {
                 "type": "git",
                 "url": "https://git.drupalcode.org/project/pathauto.git",
-                "reference": "8.x-1.8"
+                "reference": "8.x-1.13"
             },
             "dist": {
                 "type": "zip",`;

const pantheonYmlDiff = `diff --git a/pantheon.yml b/pantheon.yml
index 9a1d4e8..c3b6f20 100644
--- a/pantheon.yml
+++ b/pantheon.yml
@@ -1,5 +1,5 @@
 api_version: 1
 web_docroot: true
-php_version: 8.2
+php_version: 8.3
 database:
   version: 10.6`;

const FILES: CodeDiffFile[] = [
	{
		additions: 1,
		deletions: 1,
		diff: composerJsonDiff,
		expandButtonLabel: 'Show changes to composer.json',
		id: 'composer-json',
		name: 'composer.json',
	},
	{
		additions: 2,
		deletions: 2,
		diff: composerLockDiff,
		expandButtonLabel: 'Show changes to composer.lock',
		id: 'composer-lock',
		name: 'composer.lock',
	},
	{
		additions: 1,
		deletions: 1,
		diff: pantheonYmlDiff,
		expandButtonLabel: 'Show changes to pantheon.yml',
		id: 'pantheon-yml',
		name: 'pantheon.yml',
	},
];

const meta: Meta<typeof CodeDiff> = {
	tags: ['new-pattern', 'ready-for-dev'],
	title: 'Component Proposals/Code Diff',
	component: CodeDiff,
	parameters: {
		docs: {
			description: {
				component:
					"**New pattern:** not in PDS v2 today, but built entirely from PDS parts. A Panel List of changed files, each row expanding to show its diff in a Code Block (`language='diff'`), with the File Diff bar at the end of the row.",
			},
		},
	},
	argTypes: {
		className: { table: { category: 'Base attributes' } },
		copyButtonLabel: { control: 'text', table: { category: 'Content' } },
		files: { control: 'object', table: { category: 'Content' } },
		hasBorder: {
			control: 'boolean',
			table: { category: 'Component configuration' },
		},
		hasCopyButton: {
			control: 'boolean',
			table: { category: 'Component configuration' },
		},
		paddingSize: {
			control: 'select',
			options: ['2xs', 'xs', 's', 'm', 'l'],
			table: { category: 'Component configuration' },
		},
	},
	args: {
		copyButtonLabel: 'Copy diff',
		files: FILES,
		hasBorder: true,
		hasCopyButton: false,
		paddingSize: '2xs',
	},
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};

export const SingleFile: Story = {
	args: { files: FILES.slice(0, 1) },
};