@sanity/ui 1.0.0-next.3 → 1.0.0

package/src/primitives/text/__workshop__/index.ts

@@ -1,20 +1,24 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/text', 'Text', [
-  {
-    name: 'default',
-    title: 'Text',
-    component: lazy(() => import('./example')),
-  },
-  {
-    name: 'colored',
-    title: 'Colored text',
-    component: lazy(() => import('./colored')),
-  },
-  {
-    name: 'optical-alignment',
-    title: 'Optical alignment',
-    component: lazy(() => import('./opticalAlignment')),
-  },
-])
+export default defineScope({
+  name: 'primitives/text',
+  title: 'Text',
+  stories: [
+    {
+      name: 'default',
+      title: 'Text',
+      component: lazy(() => import('./example')),
+    },
+    {
+      name: 'colored',
+      title: 'Colored text',
+      component: lazy(() => import('./colored')),
+    },
+    {
+      name: 'optical-alignment',
+      title: 'Optical alignment',
+      component: lazy(() => import('./opticalAlignment')),
+    },
+  ],
+})

package/src/primitives/text/styles.ts

@@ -1,53 +1,59 @@
-import {CSSObject} from 'styled-components'
+import {css, FlattenSimpleInterpolation} from 'styled-components'
 import {ThemeProps} from '../../styles'
 
 export function textBaseStyle(
   props: {$accent?: boolean; $muted?: boolean} & ThemeProps
-): CSSObject {
+): FlattenSimpleInterpolation {
   const {$accent, $muted, theme} = props
   const {weights} = theme.sanity.fonts.text
 
-  return {
-    color: 'var(--card-fg-color)',
-
-    ...($accent ? {color: 'var(--card-accent-fg-color)'} : {}),
-
-    ...($muted ? {color: 'var(--card-muted-fg-color)'} : {}),
-
-    '& code': {
-      fontFamily: theme.sanity.fonts.code.family,
-      borderRadius: 1,
-      backgroundColor: 'var(--card-code-bg-color)',
-      color: 'var(--card-code-fg-color)',
-    },
-
-    '& a': {
-      textDecoration: 'none',
-      borderRadius: 1,
-      color: 'var(--card-link-color)',
-      outline: 'none',
-
-      '@media (hover: hover)': {
-        '&:hover': {
-          textDecoration: 'underline',
-        },
-      },
-
-      '&:focus': {
-        boxShadow: '0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color)',
-      },
-
-      '&:focus:not(:focus-visible)': {
-        boxShadow: 'none',
-      },
-    },
-
-    '& strong': {
-      fontWeight: weights.bold,
-    },
-
-    '& [data-sanity-icon]': {
-      verticalAlign: 'baseline',
-    },
-  }
+  return css`
+    color: var(--card-fg-color);
+
+    ${$accent &&
+    css`
+      color: var(--card-accent-fg-color);
+    `}
+
+    ${$muted &&
+    css`
+      color: var(--card-muted-fg-color);
+    `}
+
+    & code {
+      font-family: ${theme.sanity.fonts.code.family};
+      border-radius: 1px;
+      background-color: var(--card-code-bg-color);
+      color: var(--card-code-fg-color);
+    }
+
+    & a {
+      text-decoration: none;
+      border-radius: 1px;
+      color: var(--card-link-color);
+      outline: none;
+
+      @media (hover: hover) {
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);
+      }
+
+      &:focus:not(:focus-visible) {
+        box-shadow: none;
+      }
+    }
+
+    & strong {
+      font-weight: ${weights.bold};
+    }
+
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+    }
+  `
 }

package/src/primitives/text/text.tsx

@@ -1,7 +1,6 @@
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {compose} from '../../styles'
 import {
   ResponsiveFontStyleProps,
   responsiveTextAlignStyle,
@@ -29,22 +28,18 @@ export interface TextProps {
   weight?: ThemeFontWeightKey
 }
 
-const Root = memo(
-  compose<ResponsiveFontStyleProps>('div', [
-    responsiveTextFont,
-    responsiveTextAlignStyle,
-    textBaseStyle,
-  ])
+const Root = styled.div<ResponsiveFontStyleProps>(
+  responsiveTextFont,
+  responsiveTextAlignStyle,
+  textBaseStyle
 )
 
-const SpanWithTextOverflow = memo(
-  styled.span({
-    display: 'block',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-  })
-)
+const SpanWithTextOverflow = styled.span`
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`
 
 /**
  * @public

package/src/primitives/textArea/__workshop__/index.ts

@@ -1,10 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/text-area', 'TextArea', [
-  {
-    name: 'plain',
-    title: 'Plain',
-    component: lazy(() => import('./plain')),
-  },
-])
+export default defineScope({
+  name: 'primitives/text-area',
+  title: 'TextArea',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+  ],
+})

package/src/primitives/textArea/textArea.tsx

@@ -1,7 +1,6 @@
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
-import {compose} from '../../styles'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,
@@ -28,30 +27,24 @@ export interface TextAreaProps extends ResponsiveRadiusProps {
   weight?: ThemeFontWeightKey
 }
 
-const Root = memo(styled.span(textInputRootStyle))
+const Root = styled.span(textInputRootStyle)
 
-const InputRoot = memo(
-  styled.span({
-    flex: 1,
-    minWidth: 0,
-    display: 'block',
-    position: 'relative',
-  })
-)
+const InputRoot = styled.span`
+  flex: 1;
+  min-width: 0;
+  display: block;
+  position: relative;
+`
 
-const Input = memo(
-  compose<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>('textarea', [
-    responsiveInputPaddingStyle,
-    textInputBaseStyle,
-    textInputFontSizeStyle,
-  ])
+const Input = styled.textarea<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
+  responsiveInputPaddingStyle,
+  textInputBaseStyle,
+  textInputFontSizeStyle
 )
 
-const Presentation = memo(
-  compose<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>('div', [
-    responsiveRadiusStyle,
-    textInputRepresentationStyle,
-  ])
+const Presentation = styled.div<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
+  responsiveRadiusStyle,
+  textInputRepresentationStyle
 )
 
 /**

package/src/primitives/textInput/__workshop__/index.ts

@@ -1,45 +1,49 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/text-input', 'TextInput', [
-  {
-    name: 'plain',
-    title: 'Plain',
-    component: lazy(() => import('./plain')),
-  },
-  {
-    name: 'custom-validity',
-    title: 'Custom validity',
-    component: lazy(() => import('./customValidity')),
-  },
-  {
-    name: 'typed',
-    title: 'Typed',
-    component: lazy(() => import('./typed')),
-  },
-  {
-    name: 'tones',
-    title: 'Tones',
-    component: lazy(() => import('./tones')),
-  },
-  {
-    name: 'clear-button',
-    title: 'Clear button',
-    component: lazy(() => import('./clearButton')),
-  },
-  {
-    name: 'read-only',
-    title: 'Read only',
-    component: lazy(() => import('./readOnly')),
-  },
-  {
-    name: 'multiple-tones',
-    title: 'Multiple tones',
-    component: lazy(() => import('./multipleTones')),
-  },
-  {
-    name: 'states',
-    title: 'States',
-    component: lazy(() => import('./states')),
-  },
-])
+export default defineScope({
+  name: 'primitives/text-input',
+  title: 'TextInput',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+    {
+      name: 'custom-validity',
+      title: 'Custom validity',
+      component: lazy(() => import('./customValidity')),
+    },
+    {
+      name: 'typed',
+      title: 'Typed',
+      component: lazy(() => import('./typed')),
+    },
+    {
+      name: 'tones',
+      title: 'Tones',
+      component: lazy(() => import('./tones')),
+    },
+    {
+      name: 'clear-button',
+      title: 'Clear button',
+      component: lazy(() => import('./clearButton')),
+    },
+    {
+      name: 'read-only',
+      title: 'Read only',
+      component: lazy(() => import('./readOnly')),
+    },
+    {
+      name: 'multiple-tones',
+      title: 'Multiple tones',
+      component: lazy(() => import('./multipleTones')),
+    },
+    {
+      name: 'states',
+      title: 'States',
+      component: lazy(() => import('./states')),
+    },
+  ],
+})

package/src/primitives/textInput/__workshop__/plain.tsx

@@ -1,6 +1,7 @@
 import {icons, IconSymbol} from '@sanity/icons'
 import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {PerfTestProps, useBoolean, usePerfTest, useSelect, useText} from '@sanity/ui-workshop'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'
 import {useCallback, useState} from 'react'
 import {

package/src/primitives/textInput/textInput.tsx

@@ -1,10 +1,9 @@
 import {CloseIcon} from '@sanity/icons'
-import {createElement, forwardRef, isValidElement, memo, useCallback, useMemo} from 'react'
+import {createElement, forwardRef, isValidElement, useCallback, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp, useForwardedRef, useCustomValidity} from '../../hooks'
-import {compose} from '../../styles'
 import {
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
@@ -74,83 +73,64 @@ export interface TextInputProps {
 
 const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {zIndex: 2}
 
-// NOTE: use `['attrs']` to work around a VS Code syntax highlighting issue
-const Root = memo(styled(Card)['attrs']({forwardedAs: 'span'})(textInputRootStyle))
+const Root = styled(Card).attrs({forwardedAs: 'span'})(textInputRootStyle)
 
-const InputRoot = memo(
-  styled.span({
-    flex: 1,
-    minWidth: 0,
-    display: 'block',
-    position: 'relative',
-  })
-)
+const InputRoot = styled.span`
+  flex: 1;
+  min-width: 0;
+  display: block;
+  position: relative;
+`
 
-// NOTE: use `['attrs']` to work around a VS Code syntax highlighting issue
-const Prefix = memo(
-  styled(Card)['attrs']({forwardedAs: 'span'})({
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
+const Prefix = styled(Card).attrs({forwardedAs: 'span'})`
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 
-    '& > span': {
-      display: 'block',
-      margin: '-1px',
-    },
-  })
-)
+  & > span {
+    display: block;
+    margin: -1px;
+  }
+`
 
-// NOTE: use `['attrs']` to work around a VS Code syntax highlighting issue
-const Suffix = memo(
-  styled(Card)['attrs']({forwardedAs: 'span'})({
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
+const Suffix = styled(Card).attrs({forwardedAs: 'span'})`
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 
-    '& > span': {
-      display: 'block',
-      margin: '-1px',
-    },
-  })
-)
-
-const Input = memo(
-  compose<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>('input', [
-    responsiveInputPaddingStyle,
-    textInputBaseStyle,
-    textInputFontSizeStyle,
-  ])
-)
+  & > span {
+    display: block;
+    margin: -1px;
+  }
+`
 
-const Presentation = memo(
-  compose<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>('span', [
-    responsiveRadiusStyle,
-    textInputRepresentationStyle,
-  ])
-)
-
-const LeftBox = memo(
-  styled(Box)({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-  })
+const Input = styled.input<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
+  responsiveInputPaddingStyle,
+  textInputBaseStyle,
+  textInputFontSizeStyle
 )
 
-const RightBox = memo(
-  styled(Box)({
-    position: 'absolute',
-    top: 0,
-    right: 0,
-  })
+const Presentation = styled.span<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
+  responsiveRadiusStyle,
+  textInputRepresentationStyle
 )
 
-const RightCard = memo(
-  styled(Card)({
-    backgroundColor: 'transparent',
-    position: 'absolute',
-    top: 0,
-    right: 0,
-  })
-)
+const LeftBox = styled(Box)`
+  position: absolute;
+  top: 0;
+  left: 0;
+`
+
+const RightBox = styled(Box)`
+  position: absolute;
+  top: 0;
+  right: 0;
+`
+
+const RightCard = styled(Card)`
+  background-color: transparent;
+  position: absolute;
+  top: 0;
+  right: 0;
+`
 
 /**
  * @public

package/src/primitives/tooltip/__workshop__/index.ts

@@ -1,10 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/tooltip', 'Tooltip', [
-  {
-    name: 'props',
-    title: 'Props',
-    component: lazy(() => import('./props')),
-  },
-])
+export default defineScope({
+  name: 'primitives/tooltip',
+  title: 'Tooltip',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+  ],
+})

package/src/primitives/tooltip/tooltip.tsx

@@ -18,7 +18,6 @@ import {
   useState,
   CSSProperties,
   ForwardedRef,
-  memo,
 } from 'react'
 import styled from 'styled-components'
 import {FLOATING_STATIC_SIDES} from '../../constants'
@@ -47,11 +46,9 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   shadow?: number | number[]
 }
 
-const Root = memo(
-  styled(Layer)({
-    pointerEvents: 'none',
-  })
-)
+const Root = styled(Layer)`
+  pointer-events: none;
+`
 
 /**
  * @public