refactor(field): migrate string, url diff to @sanity/ui

Author: vicmeow

packages/@sanity/field/src/types/string/diff/StringFieldDiff.css

@@ -1,28 +1,25 @@
 import React from 'react'
+import styled from 'styled-components'
 import {DiffComponent, DiffFromTo, DiffString, StringDiff} from '../../../diff'
 import {StringPreview} from '../preview/StringPreview'
 
-import styles from './StringFieldDiff.css'
+const StringWrapper = styled.div`
+  white-space: pre-wrap;
+  word-wrap: break-word;
+`
 
 export const StringFieldDiff: DiffComponent<StringDiff> = ({diff, schemaType}) => {
   const {options} = schemaType as any
 
   if (options?.list) {
     // When the string is considered to be an "enum", don't show individual
     // string segment changes, rather treat is as a "from -> to" diff
-    return (
-      <DiffFromTo
-        cardClassName={styles.card}
-        diff={diff}
-        previewComponent={StringPreview}
-        schemaType={schemaType}
-      />
-    )
+    return <DiffFromTo diff={diff} previewComponent={StringPreview} schemaType={schemaType} />
   }
 
   return (
-    <div className={styles.root}>
+    <StringWrapper>
       <DiffString diff={diff} />
-    </div>
+    </StringWrapper>
   )
 }

packages/@sanity/field/src/types/string/diff/StringFieldDiff.tsx

@@ -1,8 +1,20 @@
+import {Box} from '@sanity/ui'
 import React from 'react'
+import styled from 'styled-components'
 import {PreviewComponent} from '../../../preview/types'
 
+const StringWrapper = styled.div`
+  display: inline-block;
+  word-break: break-all;
+  white-space: pre-wrap;
+`
+
 export const StringPreview: PreviewComponent<string> = (props) => {
   const {value} = props
 
-  return <>{value}</>
+  return (
+    <Box as={StringWrapper} paddingX={2} paddingY={1}>
+      {value}
+    </Box>
+  )
 }

packages/@sanity/field/src/types/string/preview/StringPreview.tsx

@@ -2,15 +2,6 @@ import React from 'react'
 import {DiffComponent, DiffFromTo, StringDiff} from '../../../diff'
 import {StringPreview} from '../../string/preview'
 
-import styles from './UrlFieldDiff.css'
-
 export const UrlFieldDiff: DiffComponent<StringDiff> = ({diff, schemaType}) => {
-  return (
-    <DiffFromTo
-      cardClassName={styles.card}
-      diff={diff}
-      schemaType={schemaType}
-      previewComponent={StringPreview}
-    />
-  )
+  return <DiffFromTo diff={diff} schemaType={schemaType} previewComponent={StringPreview} />
 }