chore: use @guardian/prettier config and rewrite files

.editorconfig

@@ -8,8 +8,6 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 charset = utf-8
-indent_style = space
-indent_size = 2
 
 # makefile
 [makefile]

.eslintrc.json

@@ -1,55 +1,55 @@
 {
-  "parser": "@typescript-eslint/parser",
-  "extends": [
-    "plugin:prettier/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "prettier",
-    "plugin:jsx-a11y/recommended",
-    "plugin:functional/no-mutations",
-    "plugin:react-hooks/recommended",
-    "plugin:@guardian/source-foundations/recommended",
-    "plugin:@guardian/source-react-components/recommended",
-    "plugin:storybook/recommended"
-  ],
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "plugins": ["functional"],
-  "rules": {
-    "react/prop-types": 0,
-    "@typescript-eslint/explicit-function-return-type": 0,
-    "@typescript-eslint/explicit-module-boundary-types": 0,
-    "functional/prefer-readonly-type": 0,
-    "functional/no-method-signature": 0,
-    "functional/immutable-data": [
-      "error",
-      {
-        "ignoreImmediateMutation": true
-      }
-    ],
-    "functional/prefer-immutable-types": 0,
-    "functional/type-declaration-immutability": 0,
-    "no-var": "error",
-    "no-param-reassign": "error",
-    "prefer-const": "error",
-    "no-sequences": "error",
-    "no-console": "error",
-    "react/no-unknown-property": ["error", { "ignore": ["css"] }]
-  },
-  "overrides": [
-    {
-      "files": ["*.stories.tsx"],
-      "rules": {
-        "functional/immutable-data": 0
-      }
-    }
-  ],
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
+	"parser": "@typescript-eslint/parser",
+	"extends": [
+		"plugin:prettier/recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:react/recommended",
+		"prettier",
+		"plugin:jsx-a11y/recommended",
+		"plugin:functional/no-mutations",
+		"plugin:react-hooks/recommended",
+		"plugin:@guardian/source-foundations/recommended",
+		"plugin:@guardian/source-react-components/recommended",
+		"plugin:storybook/recommended"
+	],
+	"parserOptions": {
+		"ecmaFeatures": {
+			"jsx": true
+		}
+	},
+	"plugins": ["functional"],
+	"rules": {
+		"react/prop-types": 0,
+		"@typescript-eslint/explicit-function-return-type": 0,
+		"@typescript-eslint/explicit-module-boundary-types": 0,
+		"functional/prefer-readonly-type": 0,
+		"functional/no-method-signature": 0,
+		"functional/immutable-data": [
+			"error",
+			{
+				"ignoreImmediateMutation": true
+			}
+		],
+		"functional/prefer-immutable-types": 0,
+		"functional/type-declaration-immutability": 0,
+		"no-var": "error",
+		"no-param-reassign": "error",
+		"prefer-const": "error",
+		"no-sequences": "error",
+		"no-console": "error",
+		"react/no-unknown-property": ["error", { "ignore": ["css"] }]
+	},
+	"overrides": [
+		{
+			"files": ["*.stories.tsx"],
+			"rules": {
+				"functional/immutable-data": 0
+			}
+		}
+	],
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
+	}
 }

.prettierrc

@@ -1,6 +1 @@
-{
-  "tabWidth": 2,
-  "trailingComma": "all",
-  "singleQuote": true,
-  "bracketSpacing": true
-}
+"@guardian/prettier"

.ratelimit.example.json

@@ -1,15 +1,15 @@
 {
-  "enabled": false,
-  "settings": {
-    "logOnly": false,
-    "trackBucketCapacity": false
-  },
-  "defaultBuckets": {
-    "globalBucket": { "capacity": 500, "addTokenMs": 50 },
-    "ipBucket": { "capacity": 100, "addTokenMs": 50 },
-    "emailBucket": { "capacity": 100, "addTokenMs": 50 },
-    "oktaIdentifierBucket": { "capacity": 100, "addTokenMs": 50 },
-    "accessTokenBucket": { "capacity": 100, "addTokenMs": 50 }
-  },
-  "routeBuckets": {}
+	"enabled": false,
+	"settings": {
+		"logOnly": false,
+		"trackBucketCapacity": false
+	},
+	"defaultBuckets": {
+		"globalBucket": { "capacity": 500, "addTokenMs": 50 },
+		"ipBucket": { "capacity": 100, "addTokenMs": 50 },
+		"emailBucket": { "capacity": 100, "addTokenMs": 50 },
+		"oktaIdentifierBucket": { "capacity": 100, "addTokenMs": 50 },
+		"accessTokenBucket": { "capacity": 100, "addTokenMs": 50 }
+	},
+	"routeBuckets": {}
 }

.storybook/clientStateDecorator.tsx

@@ -2,19 +2,19 @@ import React from 'react';
 import { DecoratorFn } from '@storybook/react';
 
 import {
-  ClientStateProvider,
-  defaultClientState,
+	ClientStateProvider,
+	defaultClientState,
 } from '../src/client/components/ClientState';
 
 const clientStateDecorator: DecoratorFn = (StoryToDecorate, context) => (
-  <ClientStateProvider
-    clientState={{
-      ...defaultClientState,
-      ...context.parameters.clientState,
-    }}
-  >
-    <StoryToDecorate />
-  </ClientStateProvider>
+	<ClientStateProvider
+		clientState={{
+			...defaultClientState,
+			...context.parameters.clientState,
+		}}
+	>
+		<StoryToDecorate />
+	</ClientStateProvider>
 );
 
 export default clientStateDecorator;

.storybook/main.js

@@ -3,77 +3,77 @@ const { neutral } = require('@guardian/source-foundations');
 const deepmerge = require('deepmerge');
 const sharedLoader = require('../.swcrc.config');
 const config = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-styling',
-  ],
-  babel: async (options) => {
-    options.presets.push('@emotion/babel-preset-css-prop');
-    return options;
-  },
-  previewHead: (head) => `
+	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-styling',
+	],
+	babel: async (options) => {
+		options.presets.push('@emotion/babel-preset-css-prop');
+		return options;
+	},
+	previewHead: (head) => `
     ${head}
     <style>
       body {
         color: ${neutral[7]};
       }
     </style>
   `,
-  webpackFinal: async (config) => {
-    // Add the @client alias to prevent imports using it from failing
-    // Nb. __dirname is the current working directory, so .storybook in this case
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      '@': path.join(__dirname, '../src'),
-      react: 'preact/compat',
-      'react-dom/test-utils': 'preact/test-utils',
-      'react-dom': 'preact/compat',
-      // Must be below test-utils
-      'react/jsx-runtime': 'preact/jsx-runtime',
-      mjml: 'mjml-browser',
-      // We stub these libraries required by mjml because Storybook cannot run these on the client side.
-      'uglify-js': false,
-      'clean-css': false,
-    };
+	webpackFinal: async (config) => {
+		// Add the @client alias to prevent imports using it from failing
+		// Nb. __dirname is the current working directory, so .storybook in this case
+		config.resolve.alias = {
+			...config.resolve.alias,
+			'@': path.join(__dirname, '../src'),
+			react: 'preact/compat',
+			'react-dom/test-utils': 'preact/test-utils',
+			'react-dom': 'preact/compat',
+			// Must be below test-utils
+			'react/jsx-runtime': 'preact/jsx-runtime',
+			mjml: 'mjml-browser',
+			// We stub these libraries required by mjml because Storybook cannot run these on the client side.
+			'uglify-js': false,
+			'clean-css': false,
+		};
 
-    // transpile certain modules so we can get them to work with ie11 storybook
-    const transpileModules = {
-      include: [/node_modules[\\\/]@guardian/],
-      test: /\.(m?)(j|t)s(x?)/,
-      use: [
-        deepmerge(sharedLoader, {
-          options: {
-            env: {
-              targets: {
-                chrome: '100',
-              },
-            },
-          },
-        }),
-      ],
-    };
+		// transpile certain modules so we can get them to work with ie11 storybook
+		const transpileModules = {
+			include: [/node_modules[\\\/]@guardian/],
+			test: /\.(m?)(j|t)s(x?)/,
+			use: [
+				deepmerge(sharedLoader, {
+					options: {
+						env: {
+							targets: {
+								chrome: '100',
+							},
+						},
+					},
+				}),
+			],
+		};
 
-    // Return the altered config
-    return {
-      ...config,
-      module: {
-        ...config.module,
-        rules: [...config.module.rules, transpileModules],
-      },
-      target: ['web'],
-    };
-  },
-  typescript: {
-    reactDocgen: 'react-docgen-typescript-plugin',
-  },
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {},
-  },
-  docs: {
-    autodocs: false,
-  },
+		// Return the altered config
+		return {
+			...config,
+			module: {
+				...config.module,
+				rules: [...config.module.rules, transpileModules],
+			},
+			target: ['web'],
+		};
+	},
+	typescript: {
+		reactDocgen: 'react-docgen-typescript-plugin',
+	},
+	framework: {
+		name: '@storybook/react-webpack5',
+		options: {},
+	},
+	docs: {
+		autodocs: false,
+	},
 };
 export default config;

.storybook/preview-head.html

@@ -1,5 +1,5 @@
 <script>
-  // fix for chromatic/storybook failing to render a component
-  // as the window.guardian object was not defined
-  window.guardian = {};
+	// fix for chromatic/storybook failing to render a component
+	// as the window.guardian object was not defined
+	window.guardian = {};
 </script>