🗑️ Cleanup #2545 (#2546)

sanityv3/actions/fieldActions/CustomCopyFieldAction.ts

@@ -1,11 +1,8 @@
 import { CopyIcon } from '@sanity/icons'
-import { Toast, useToast } from '@sanity/ui'
+import { useToast } from '@sanity/ui'
 import { useCallback } from 'react'
 
-import { defineDocumentFieldAction } from 'sanity'
-import { useTranslation } from 'sanity'
-import { useCopyPaste } from 'sanity'
-import { useGetFormValue } from 'sanity'
+import { defineDocumentFieldAction, useTranslation, useCopyPaste, useGetFormValue } from 'sanity'
 import { type FormDocumentValue } from 'sanity'
 
 export const copyAction = defineDocumentFieldAction({

sanityv3/plugins/asset-source-brandmaster/src/BrandmasterAssetSource.tsx

@@ -1,16 +1,11 @@
 import { useEffect, useCallback, forwardRef, useState, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { Dialog } from '@sanity/ui'
-import styled from 'styled-components'
 
 const BM_EVENT_NAME = 'dam:plugin-assets-selected-event'
 const BM_URL = process.env.SANITY_STUDIO_BRANDMASTER_URL || ''
 const BM_SOURCE = BM_URL + process.env.SANITY_STUDIO_BRANDMASTER_PLUGIN_SOURCE || ''
 
-const Content = styled.div`
-  margin: 2em;
-`
-
 const BrandmasterAssetSource = forwardRef<HTMLDivElement>((props: any, ref) => {
   const { onSelect, onClose } = props
 
@@ -81,17 +76,17 @@ const BrandmasterAssetSource = forwardRef<HTMLDivElement>((props: any, ref) => {
       {container && createPortal(props.children, container)}
 
       {BM_SOURCE ? (
-        <Content>
+        <div style={{ margin: '32px' }}>
           <p>Select an image from Brandmaster in the popup window.</p>
           <p>Once selected, the upload process should start automatically.</p>
-        </Content>
+        </div>
       ) : (
-        <Content>
+        <div style={{ margin: '32px' }}>
           <p>
             No Brandmaster source URL found. Please define the URL and path in the enviromental variables to load the
             iframe.
           </p>
-        </Content>
+        </div>
       )}
     </Dialog>
   )

sanityv3/plugins/asset-source-fotoware/src/components.tsx

@@ -87,7 +87,7 @@ export const FotowareWidget = forwardRef<HTMLDivElement, FotowareWidgetProps>((p
       ref={ref}
     >
       <Content>
-        <StyledIframe src={url} title="Fotoware" frameBorder="0" ref={iframeRef}></StyledIframe>
+        <StyledIframe src={url} title="Fotoware" ref={iframeRef}></StyledIframe>
       </Content>
     </FullScreenDialog>
   )

sanityv3/sanity.config.tsx

@@ -8,7 +8,7 @@ import {
   PluginOptions,
   SchemaTypeDefinition,
   Template,
-} from 'sanity'
+ buildLegacyTheme } from 'sanity'
 
 import type {
   InputProps,
@@ -39,7 +39,6 @@ import { createCustomDuplicateAction } from './actions/CustomDuplicateAction'
 import { LangBadge } from './schemas/components/LangBadge'
 import './customStyles.css'
 import { partialStudioTheme } from './studioTheme'
-import { buildLegacyTheme } from 'sanity'
 import { copyAction } from './actions/fieldActions/CustomCopyFieldAction'
 
 export const customTheme = buildLegacyTheme(partialStudioTheme)

sanityv3/schemas/components/EventPromotion/EventPromotionInput.tsx

@@ -1,4 +1,4 @@
-import { Text, Card, Grid, Stack, Heading, Radio, Inline, Flex, Switch, TextInput } from '@sanity/ui'
+import { Text, Card, Grid, Stack, Heading, Radio, Inline, Flex, Switch } from '@sanity/ui'
 import { set, MemberField } from 'sanity'
 import { getObjectMemberField } from '../utils/getObjectMemberField'
 import type { ObjectInputProps } from 'sanity'

sanityv3/schemas/documents/localNewsTag.tsx

@@ -1,24 +1,20 @@
 import { languages } from '../../languages'
 import type { CurrentUser } from 'sanity'
-import styled from 'styled-components'
 import { EdsIcon } from '../../icons'
 import { tag_more } from '@equinor/eds-icons'
 
-const StyledSpan = styled.span`
-  display: block;
-  margin-top: 0.5em;
-`
-
 const LocalNewsTagDescription = () => (
   <>
-    <StyledSpan>The translated names used to display the tag on the web and generate the slugs.</StyledSpan>
-    <StyledSpan>
+    <span style={{ display: 'block', marginTop: '8px' }}>
+      The translated names used to display the tag on the web and generate the slugs.
+    </span>
+    <span style={{ display: 'block', marginTop: '8px' }}>
       <span role="img" aria-label="warning icon">
         ⚠️
       </span>{' '}
       Since these values are used to automatically generate slugs; they should only be changed if you know what you are
       doing.
-    </StyledSpan>
+    </span>
   </>
 )
 

sanityv3/schemas/editors/blockContentType.tsx

@@ -57,15 +57,6 @@ export const ExtraLargeTextRender = (props: any) => {
   const { children } = props
   return <span style={{ fontSize: `${em(56, 16)}`, fontWeight: '600' }}>{children}</span>
 }
-const Level2BaseStyle = (props: any) => {
-  const { children } = props
-  return <h2 style={{ fontSize: `${em(18, 16)}`, fontWeight: '600' }}>{children} </h2>
-}
-
-const Level3BaseStyle = (props: any) => {
-  const { children } = props
-  return <h3 style={{ fontSize: `${em(16, 16)}`, fontWeight: '600' }}>{children} </h3>
-}
 
 // H1 not allowed in block content since it should be a document title.
 export const configureBlockContent = (options: BlockContentProps = {}): BlockDefinition => {

sanityv3/schemas/objects/anchorLink.tsx

@@ -4,24 +4,19 @@ import { Rule } from 'sanity'
 import { validateComponentAnchor } from '../validations/validateAnchorReference'
 import { EdsIcon } from '../../icons'
 import { Heading, Text, Box } from '@sanity/ui'
-import styled from 'styled-components'
 
 export type AnchorLink = {
   _type: 'anchorLink'
 }
 
-const StyledText = styled(Text)`
-  margin: 1em 0;
-`
-
 const Description = () => {
   return (
     <Box>
       <Heading size={2}>How to use</Heading>
-      <StyledText>
+      <Text style={{ margin: '1em 0' }}>
         Add this component before the component for which you want to have an anchor reference. The anchor reference
         will be ignored when there is no component following it.
-      </StyledText>
+      </Text>
     </Box>
   )
 }

sanityv3/schemas/objects/anchorReferenceField.tsx

@@ -1,28 +1,26 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { validateAnchorReference } from '../validations/validateAnchorReference'
-import styled from 'styled-components'
 import { Rule } from 'sanity'
 
-const StyledSpan = styled.span`
-  display: block;
-  margin-top: 0.3em;
-`
-
 export const AnchorComponentDescription = () => (
   <>
-    <StyledSpan>Add an optional anchor reference that can be used to link directly to this component.</StyledSpan>
-    <StyledSpan>
+    <span style={{ display: 'block', marginTop: '4.8px' }}>
+      Add an optional anchor reference that can be used to link directly to this component.
+    </span>
+    <span style={{ display: 'block', marginTop: '4.8px' }}>
       Allowed characters are: letters, numbers, hyphens, and underscores. The # symbol is not needed.
-    </StyledSpan>
+    </span>
   </>
 )
+
 export const AnchorLinkDescription = () => (
   <>
-    <StyledSpan>Optional: add the anchor reference of the component/section you want to link directly to.</StyledSpan>
-    <StyledSpan>Results cannot be guaranteed for external URLs.</StyledSpan>
+    <span style={{ display: 'block', marginTop: '4.8px' }}>
+      Optional: add the anchor reference of the component/section you want to link directly to.
+    </span>
+    <span style={{ display: 'block', marginTop: '4.8px' }}>Results cannot be guaranteed for external URLs.</span>
   </>
 )
-
 export default {
   name: 'anchorReferenceField',
   title: 'Anchor reference',

sanityv3/schemas/objects/cookieDeclaration.tsx

@@ -1,23 +1,19 @@
 import { table_chart } from '@equinor/eds-icons'
 import { EdsIcon } from '../../icons'
 import { Heading, Text, Box } from '@sanity/ui'
-import styled from 'styled-components'
 import CompactBlockEditor from '../components/CompactBlockEditor'
 import { configureTitleBlockContent } from '../editors'
 
-const StyledText = styled(Text)`
-  margin: 1em 0;
-`
 const titleContentType = configureTitleBlockContent()
 // eslint-disable-next-line react/display-name
 const ApiDescription = () => {
   return (
     <Box>
       <Heading size={2}>How to use</Heading>
-      <StyledText>
+      <Text style={{ margin: '1em 0' }}>
         This component will automatically display cookies identified in the website. No configuration is required. This
         component is to be used on Cookie Policy page.
-      </StyledText>
+      </Text>
     </Box>
   )
 }

sanityv3/schemas/objects/grid/cellTypes/gridTeaser.tsx

@@ -3,7 +3,7 @@ import blocksToText from '../../../../helpers/blocksToText'
 import { configureBlockContent, configureThemedTitleBlockContent } from '../../../editors'
 import { validateCharCounterEditor } from '../../../validations/validateCharCounterEditor'
 
-import type { PortableTextBlock, Reference, Rule, ValidationContext } from 'sanity'
+import type { PortableTextBlock, Reference, Rule } from 'sanity'
 import type { DownloadableImage } from './../../downloadableImage'
 import type { DownloadableFile } from '../../files'
 import type { ImageWithAlt } from '../../imageWithAlt'

sanityv3/schemas/objects/grid/index.tsx

@@ -1,6 +1,7 @@
 import { PortableTextBlock } from 'sanity'
 import { EdsIcon } from '../../../icons'
 import { table_chart } from '@equinor/eds-icons'
+import blocksToText from '../../../helpers/blocksToText'
 
 export type Grid = {
   _type: 'grid'
@@ -51,10 +52,9 @@ export default {
       title: 'title',
     },
     prepare({ title = [] }: { title: PortableTextBlock[] }) {
-      const plainTitle = 'Grid'
-
+      const plainTitle = blocksToText(title)
       return {
-        title: plainTitle,
+        title: plainTitle || 'Grid',
         subtitle: 'Grid component',
         media: () => EdsIcon(table_chart),
       }

sanityv3/schemas/objects/imageWithAltAndCaption.tsx

@@ -1,5 +1,4 @@
 import type { ImageWithAlt } from './imageWithAlt'
-import type { Rule } from 'sanity'
 
 export type ImageWithAltAndCaption = {
   _type: 'imageWithAltAndCaption'

sanityv3/schemas/objects/newsList.tsx

@@ -3,32 +3,33 @@ import { EdsIcon } from '../../icons'
 import { list } from '@equinor/eds-icons'
 import { configureTitleBlockContent } from '../editors'
 import CompactBlockEditor from '../components/CompactBlockEditor'
-import { Heading, Text, Box } from '@sanity/ui'
-import styled from 'styled-components'
+import { Card, Text, Box, Stack } from '@sanity/ui'
 import type { Rule } from 'sanity'
 
 const titleContentType = configureTitleBlockContent()
 
-const StyledText = styled(Text)`
-  margin: 1em 0;
-`
-
 // eslint-disable-next-line react/display-name
 const ComponentDescription = () => {
   return (
-    <Box>
-      <Heading size={1}>How to use</Heading>
-      <StyledText>
-        This component will automatically generate a list of news articles based on the tags you select.
-      </StyledText>
-      <StyledText>
-        <span role="img" aria-label="warning icon" style={{ marginRight: '5px' }}>
-          ⚠️
-        </span>
-        Please note that there is no limit on this list: it will generate a list of <strong>all</strong> articles that
-        match the selected tag(s).
-      </StyledText>
-    </Box>
+    <Card padding={4}>
+      <Box padding={[3, 3, 4, 5]} style={{ outline: '1px solid gray' }}>
+        <Stack space={[3, 3, 4, 5]}>
+          <Text align="center" size={[2, 2, 3, 4]}>
+            How to use
+          </Text>
+          <Text align="left" size={[1, 1, 2]}>
+            This component will automatically generate a list of news articles based on the tags you select.
+          </Text>
+          <Text align="left" size={[1, 1, 2]}>
+            <span role="img" aria-label="warning icon" style={{ marginRight: '5px' }}>
+              ⚠️
+            </span>
+            Please note that there is no limit on this list: it will generate a list of <strong>all</strong> articles
+            that match the selected tag(s).
+          </Text>
+        </Stack>
+      </Box>
+    </Card>
   )
 }
 

sanityv3/schemas/objects/stockValuesApi.tsx

@@ -1,22 +1,17 @@
 import { dollar } from '@equinor/eds-icons'
 import { Box, Heading, Text } from '@sanity/ui'
-import styled from 'styled-components'
 import { EdsIcon } from '../../icons'
 import type { ColorSelectorValue } from '../components/ColorSelector'
 
-const StyledText = styled(Text)`
-  margin: 1em 0;
-`
-
 // eslint-disable-next-line react/display-name
 const ApiDescription = () => {
   return (
     <Box>
       <Heading size={2}>How to use</Heading>
-      <StyledText>
+      <Text style={{ margin: '4px 0' }}>
         This component will automatically display up to date Equinor stock values from the OSE and NYSE. No
         configuration is required.
-      </StyledText>
+      </Text>
     </Box>
   )
 }

sanityv3/schemas/objects/transcript.tsx

@@ -1,4 +1,3 @@
-import { defineType, defineField } from 'sanity'
 import { configureBlockContent } from '../editors/blockContentType'
 import CompactBlockEditor from '../components/CompactBlockEditor'
 

sanityv3/src/previews/Preview.tsx

@@ -1,15 +1,7 @@
 import resolveProductionUrl from '../../resolveProductionUrl'
-import styled from 'styled-components'
 import { dataset } from '../lib/datasetHelpers'
 import { PreviewWrapper } from './PreviewWrapper'
 
-const Frame = styled.iframe`
-  border: 0;
-  height: 100%;
-  left: 0;
-  width: 100%;
-`
-
 const REQUIRES_SLUG = ['news', 'localNews', 'magazine']
 
 export default function Preview({ document }: any) {
@@ -33,7 +25,16 @@ export default function Preview({ document }: any) {
 
   return (
     <PreviewWrapper src={url} shareable={dataset !== 'secret'}>
-      <Frame src={url} title="preview" frameBorder={'0'} />
+      <iframe
+        src={url}
+        title="preview"
+        style={{
+          border: '0',
+          height: '100%',
+          width: '100%',
+          left: 0,
+        }}
+      />
     </PreviewWrapper>
   )
 }