Enabled treeshaking for validator in AdminX design system

ref https://linear.app/tryghost/issue/DEV-20/faster-builds

- we can save 75KB by using a tree-shaking import for validator
- import string comes from validator docs
- also adds validator import, which was missing for this package

apps/admin-x-design-system/package.json

@@ -56,6 +56,7 @@
     "storybook": "7.6.20",
     "ts-node": "10.9.2",
     "typescript": "5.4.5",
+    "validator": "13.12.0",
     "vite": "4.5.3",
     "vite-plugin-svgr": "3.3.0"
   },

apps/admin-x-design-system/src/global/form/URLTextField.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import validator from 'validator';
+import isEmail from 'validator/es/lib/isEmail';
 import {useFocusContext} from '../../providers/DesignSystemProvider';
 import TextField, {TextFieldProps} from './TextField';
 
@@ -18,7 +18,7 @@ export const formatUrl = (value: string, baseUrl?: string, nullable?: boolean) =
     }
 
     // if we have an email address, add the mailto:
-    if (validator.isEmail(url)) {
+    if (isEmail(url)) {
         return {save: `mailto:${url}`, display: `mailto:${url}`};
     }
 

yarn.lock

@@ -30982,6 +30982,11 @@ validate-peer-dependencies@^1.1.0:
     resolve-package-path "^3.1.0"
     semver "^7.3.2"
 
+validator@13.12.0:
+  version "13.12.0"
+  resolved "https://registry.yarnpkg.com/validator/-/validator-13.12.0.tgz#7d78e76ba85504da3fee4fd1922b385914d4b35f"
+  integrity sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==
+
 validator@7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/validator/-/validator-7.2.0.tgz#a63dcbaba51d4350bf8df20988e0d5a54d711791"